diff --git a/CLAUDE.md b/CLAUDE.md
index 289f369..54e6275 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,6 +1,35 @@
 # PRIME DIRECTIVES
 Never use eslint disables for TSC errors. Fix the problem. If you don't know the type, use unknown, never use any.
 
+# CURSOR DIRECTIVES
+## Component Creation Priority
+1. **ALWAYS check RFDS first**: `import { RFDS } from "@/components/rfds"`
+2. **Use Semantic Components**: `RFDS.SemanticButton`, `RFDS.SemanticCard`, `RFDS.SemanticBadge`
+3. **Compose from Primitives**: If custom needed, use `RFDS.Button`, `RFDS.Pill`, `RFDS.Rating`
+4. **One-off components**: Still use design system primitives as building blocks
+5. **NEVER create from scratch**: Always start with design system components
+
+## Color Usage Rules
+- **NEVER use hardcoded colors**: `bg-blue-500`, `text-red-600`, `border-gray-200`
+- **ALWAYS use semantic colors**: `bg-primary`, `text-destructive`, `border-border`
+- **Check theme-config.ts**: For available semantic color tokens
+- **Test both themes**: Light and dark mode compatibility required
+
+## Default Import Pattern
+```typescript
+// ✅ CORRECT - Start with design system
+import { RFDS } from "@/components/rfds";
+
+// Use semantic components first
+<RFDS.SemanticButton variant="primary">Click me</RFDS.SemanticButton>
+<RFDS.SemanticCard>Content</RFDS.SemanticCard>
+
+// Compose from primitives if needed
+<div className="bg-card text-card-foreground border border-border">
+  <RFDS.Button variant="primary">Action</RFDS.Button>
+</div>
+```
+
 # Claude Directives for React Foundation Store
 
 ## 🎯 CRITICAL RULES (NEVER BREAK)
@@ -83,6 +112,57 @@ import { RFDS } from "@/components/rfds"
 - **Primitives**: Base building blocks (Button, Typography, etc.)
 - **Components**: Composed from primitives (ProductCard, etc.)
 - **Layouts**: Page structure (Header, Footer)
+- **Semantic Components**: Themeable components (SemanticButton, SemanticCard, etc.)
+
+## 🎨 DESIGN SYSTEM & THEMING
+
+### CRITICAL: Always Use Design System
+**NEVER create new components without checking the design system first!**
+
+#### Design System Hierarchy
+1. **Check RFDS first**: `import { RFDS } from "@/components/rfds"`
+2. **Use Semantic Components**: For themeable, consistent UI
+3. **Compose from Primitives**: If you need something custom
+4. **One-off components**: Still use design system primitives
+
+#### Semantic Theming System
+All colors are semantic and themeable. **NEVER use hardcoded colors!**
+
+```typescript
+// ❌ WRONG - Hardcoded colors
+<div className="bg-blue-500 text-white border-gray-200">
+
+// ✅ CORRECT - Semantic colors
+<div className="bg-primary text-primary-foreground border-border">
+```
+
+#### Available Semantic Colors
+- **Background**: `bg-background`, `bg-card`, `bg-muted`
+- **Text**: `text-foreground`, `text-muted-foreground`
+- **Interactive**: `bg-primary`, `bg-secondary`, `bg-accent`
+- **Status**: `bg-destructive`, `bg-success`, `bg-warning`
+- **Borders**: `border-border`, `border-primary`, `border-destructive`
+
+#### Component Creation Rules
+1. **Check RFDS first**: Does `RFDS.SemanticButton` work?
+2. **Use semantic components**: `RFDS.SemanticCard`, `RFDS.SemanticBadge`
+3. **Compose from primitives**: If custom needed, use `RFDS.Button`, `RFDS.Pill`
+4. **Theme-aware**: All components must work in light/dark themes
+5. **One-off exception**: Even one-off components should use design system primitives
+
+#### Migration Script
+Use the migration script to convert hardcoded colors:
+```bash
+node scripts/migrate-to-semantic-colors.js
+```
+
+#### Theme Configuration
+All themes defined in `src/lib/theme-config.ts`:
+- Light theme colors
+- Dark theme colors  
+- Semantic color mappings
+- Gradient definitions
+- Shadow definitions
 
 ### Component Patterns
 - **Functional components**: Use hooks, avoid class components
diff --git a/THEMING_GUIDE.md b/THEMING_GUIDE.md
new file mode 100644
index 0000000..6b4e806
--- /dev/null
+++ b/THEMING_GUIDE.md
@@ -0,0 +1,246 @@
+# Theming System Guide
+
+This guide explains how to use the comprehensive theming system to replace hardcoded colors with semantic, themeable alternatives.
+
+## 🎨 **Semantic Color System**
+
+### **Base Colors**
+- `bg-background` - Main background color
+- `bg-card` - Card/surface background
+- `bg-muted` - Muted background for subtle elements
+- `text-foreground` - Primary text color
+- `text-muted-foreground` - Secondary/muted text color
+
+### **Interactive Colors**
+- `bg-primary` / `text-primary-foreground` - Primary actions
+- `bg-secondary` / `text-secondary-foreground` - Secondary actions
+- `bg-accent` / `text-accent-foreground` - Accent elements
+- `border-border` - Standard borders
+- `ring-ring` - Focus rings
+
+### **Status Colors**
+- `bg-destructive` / `text-destructive-foreground` - Errors, delete actions
+- `bg-success` / `text-success-foreground` - Success states
+- `bg-warning` / `text-warning-foreground` - Warnings
+
+## 🔄 **Replacing Hardcoded Colors**
+
+### **Before (Hardcoded)**
+```tsx
+// ❌ Hardcoded colors - not themeable
+<div className="bg-blue-500 text-white border-gray-200">
+  <button className="bg-red-500 hover:bg-red-600 text-white">
+    Delete
+  </button>
+</div>
+```
+
+### **After (Semantic)**
+```tsx
+// ✅ Semantic colors - fully themeable
+<div className="bg-primary text-primary-foreground border-border">
+  <button className="bg-destructive hover:bg-destructive/90 text-destructive-foreground">
+    Delete
+  </button>
+</div>
+```
+
+## 🛠️ **Common Replacements**
+
+### **Background Colors**
+```tsx
+// Replace these hardcoded colors:
+bg-white → bg-background
+bg-gray-100 → bg-muted
+bg-blue-500 → bg-primary
+bg-red-500 → bg-destructive
+bg-green-500 → bg-success
+bg-yellow-500 → bg-warning
+```
+
+### **Text Colors**
+```tsx
+// Replace these hardcoded colors:
+text-gray-900 → text-foreground
+text-gray-600 → text-muted-foreground
+text-blue-600 → text-primary
+text-red-600 → text-destructive
+text-green-600 → text-success
+text-yellow-600 → text-warning
+```
+
+### **Border Colors**
+```tsx
+// Replace these hardcoded colors:
+border-gray-200 → border-border
+border-blue-500 → border-primary
+border-red-500 → border-destructive
+border-green-500 → border-success
+border-yellow-500 → border-warning
+```
+
+### **Shadow Colors**
+```tsx
+// Replace these hardcoded colors:
+shadow-lg → shadow (semantic shadow)
+shadow-blue-500/20 → shadowColored (primary colored shadow)
+```
+
+## 🎯 **Semantic Class Combinations**
+
+### **Cards**
+```tsx
+// Use semantic card classes
+<div className="bg-card text-card-foreground border border-border rounded-lg shadow">
+  Card content
+</div>
+```
+
+### **Buttons**
+```tsx
+// Use semantic button variants
+<button className="bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-md">
+  Primary Button
+</button>
+
+<button className="bg-destructive text-destructive-foreground hover:bg-destructive/90 px-4 py-2 rounded-md">
+  Destructive Button
+</button>
+```
+
+### **Status Indicators**
+```tsx
+// Use semantic status colors
+<div className="bg-success/10 text-success border border-success/20 px-3 py-2 rounded-md">
+  Success message
+</div>
+
+<div className="bg-destructive/10 text-destructive border border-destructive/20 px-3 py-2 rounded-md">
+  Error message
+</div>
+```
+
+## 🎨 **Gradients**
+
+### **Semantic Gradients**
+```tsx
+// Use semantic gradient classes
+<div className="bg-gradient-to-br from-primary to-primary/80">
+  Primary gradient
+</div>
+
+<div className="bg-gradient-to-br from-secondary to-secondary/80">
+  Secondary gradient
+</div>
+```
+
+## 🔧 **Using Theme Utilities**
+
+### **Import Theme Utilities**
+```tsx
+import { themeColors, buttonVariants, semanticClasses } from '@/lib/theme-utils';
+import { cn } from '@/lib/cn';
+
+// Use semantic classes
+<div className={cn(themeColors.bgCard, 'p-4')}>
+  <button className={cn(buttonVariants.default, 'px-4 py-2')}>
+    Click me
+  </button>
+</div>
+```
+
+### **Pre-built Semantic Combinations**
+```tsx
+import { semanticClasses } from '@/lib/theme-utils';
+
+// Use pre-built semantic combinations
+<div className={semanticClasses.card}>
+  <button className={semanticClasses.buttonPrimary}>
+    Primary Action
+  </button>
+</div>
+```
+
+## 🎨 **Creating New Themes**
+
+### **Add New Theme Colors**
+1. Update `src/lib/theme-config.ts`
+2. Add new theme colors to the `ThemeColors` interface
+3. Define colors for both light and dark themes
+4. Update CSS custom properties in `globals.css`
+
+### **Example: Adding a New Brand Color**
+```typescript
+// In theme-config.ts
+export interface ThemeColors {
+  // ... existing colors
+  brand: string;
+  brandForeground: string;
+}
+
+export const lightTheme: ThemeColors = {
+  // ... existing colors
+  brand: '#8b5cf6',
+  brandForeground: '#ffffff',
+};
+
+export const darkTheme: ThemeColors = {
+  // ... existing colors
+  brand: '#a855f7',
+  brandForeground: '#ffffff',
+};
+```
+
+## 🚀 **Best Practices**
+
+### **Do's**
+- ✅ Use semantic color names (`bg-primary`, `text-foreground`)
+- ✅ Use theme utilities for common patterns
+- ✅ Test both light and dark themes
+- ✅ Use consistent color meanings across the app
+
+### **Don'ts**
+- ❌ Use hardcoded Tailwind colors (`bg-blue-500`, `text-red-600`)
+- ❌ Mix semantic and hardcoded colors
+- ❌ Use colors that don't have semantic meaning
+- ❌ Forget to test theme switching
+
+## 🧪 **Testing Themes**
+
+### **Manual Testing**
+1. Switch between light/dark themes
+2. Verify all components adapt correctly
+3. Check contrast ratios for accessibility
+4. Test with different content lengths
+
+### **Automated Testing**
+```tsx
+// Test theme switching in components
+import { render } from '@testing-library/react';
+import { ThemeProvider } from '@/components/providers/theme-provider';
+
+test('component adapts to dark theme', () => {
+  render(
+    <ThemeProvider defaultTheme="dark">
+      <MyComponent />
+    </ThemeProvider>
+  );
+  // Assert dark theme styles are applied
+});
+```
+
+## 📝 **Migration Checklist**
+
+When updating components to use the theming system:
+
+- [ ] Replace hardcoded background colors with semantic ones
+- [ ] Replace hardcoded text colors with semantic ones
+- [ ] Replace hardcoded border colors with semantic ones
+- [ ] Replace hardcoded shadow colors with semantic ones
+- [ ] Test in both light and dark themes
+- [ ] Verify accessibility and contrast
+- [ ] Update any custom CSS to use CSS custom properties
+- [ ] Document any new semantic colors added
+
+This theming system ensures that all colors are semantic, themeable, and maintainable. By following these patterns, you can easily create new themes or modify existing ones without touching component code.
+
diff --git a/content/updates/welcome-to-react-foundation.mdx b/content/updates/welcome-to-react-foundation.mdx
index 752652c..b58246c 100644
--- a/content/updates/welcome-to-react-foundation.mdx
+++ b/content/updates/welcome-to-react-foundation.mdx
@@ -8,80 +8,40 @@ draft: false
 
 We're thrilled to announce the official launch of the **React Foundation** — a community-driven initiative dedicated to sustaining and advancing the React ecosystem for generations to come.
 
-[Read my full opening message from the Foundation →](/about)
-
-## Why We're Here
-
-React has become something bigger than any single company should be responsible for maintaining. Over the past decade — really, the past six years or so — React has become an indispensable part of how the web is built and runs, how Chrome works, and how mobile apps are built. It powers millions of applications across the globe.
-
-My north star has always been to **change the economic trajectory of people's lives by helping them bring their ideas to life**. React has been transformative in that way, but we still have a long way to go.
-
-## Four Years in the Making
-
-This didn't happen overnight. My colleagues at Meta — Matt Carroll, Joe Savona, Eli White, Sophie Alpert, Rick Hanlon and I — spent four years laying the groundwork and preparing React to leave its Meta nest. Meta is laser-focused on AI internally now, but React remains crucial there. In fact, most, if not all, of the tools built at Meta for AI work are built with React.
-
-The React Foundation isn't about Meta abandoning React. They've contributed the most to spinning up the foundation and have committed for over five years. But it's about involving all the other companies and communities in a way that's much more compatible with keeping React healthy for the long term.
-
-## What We're Building
+## Our Mission
 
 The React Foundation exists to ensure the React ecosystem thrives through:
 
 - **Funding maintainers** of critical React libraries
-- **Investing in community hubs** around the world, especially in underserved areas
-- **Fixing React education** — from bootcamps to local meetups
-- **Supporting conferences** that align with our values and code of conduct
-- **Making React more accessible** to more people worldwide
+- **Supporting education** and learning resources
+- **Ensuring accessibility** for developers worldwide
+- **Transparent governance** and community-driven decision making
 
-## The Bootcamp Problem
+## Why Now?
 
-Here's something that keeps me up at night: We have lots of boot camps out there that are doing their best, but they're also sending people out into the world misinformed about how React works. React is very hard to teach, so let's fix that part of React so that it's actually not so hard to teach.
+React has grown from a tool built at Meta into a global movement that powers millions of applications. The ecosystem includes 54+ essential libraries maintained by hundreds of contributors across dozens of organizations.
 
-That's why one of our first priorities is to help bootcamps — not just with scholarships, but by improving how React itself is taught.
+This growth is incredible — but it also creates sustainability challenges. Many maintainers work on these critical projects in their spare time, without compensation.
 
-## Community Investment
-
-I want to put gas in the tank of smaller communities to help them flourish. That means:
-
-- Helping local developer meetups have food, drinks and great speakers
-- Bringing in React core team members to teach and align communities
-- Supporting amazing community-led conferences (like React Native London, which grew from a meetup!)
-- Investing in React hubs around the world, especially in underserved areas
+The React Foundation changes that.
 
 ## How It Works
 
-Here's something that's been really funny — one of the top requests since people found out about the React Foundation is, "When is the merch store launching?" People around the world want React jackets, React hoodies, React everything.
-
-Well, it's coming. And here's the thing: **100% of profits from our official merchandise store go directly to ecosystem maintainers**. We track contributions across all 54 supported libraries using transparent, metrics-based distribution.
-
-The foundation has three funding sources:
-1. Corporate sponsorships from our founding members
-2. Merchandise store profits (all going to maintainers)
-3. React Conf (now able to operate more freely outside of Meta)
-
-## Governance
-
-The business governance is being ratified now with our founding corporate partners:
-
-- **Meta** (committed for 5+ years, supermajority on governance for first 2.5 years)
-- **Amazon**
-- **Microsoft**
-- **Vercel**
-- **Expo**
-- **Callstack**
-- **Software Mansion**
+100% of profits from our official merchandise store go directly to ecosystem maintainers. We track contributions across all 54 supported libraries using transparent, metrics-based distribution.
 
-The technical governance will continue much as it has been — with RFCs, public proposals, and stages before reaching canary. We have people on the slate for technical governance roles, and I'm excited about that (names coming soon).
+## Founding Members
 
-## My Goals
+We're grateful to our founding members who believe in this mission:
 
-Out of the gate, here's what I'm focused on:
+- Meta
+- Microsoft
+- Amazon
+- Vercel
+- Expo
+- Callstack
+- Software Mansion
 
-1. **Invest in community hubs** worldwide, especially underserved areas
-2. **Fix React education** in bootcamps and learning resources
-3. **Support local meetups** and help them grow
-4. **Align conferences** with our code of conduct and values
-5. **Expand React Conf** with new capabilities now that we're independent
-6. **Welcome everyone back** — there's been a lot we've done that's alienated parts of the community. I want to do everything we can to make sure everybody feels as welcome and heard and a part of the React community as they should.
+Together, we're building a sustainable future for React.
 
 ## Get Involved
 
@@ -89,15 +49,14 @@ Whether you're a contributor, maintainer, or React enthusiast, there are many wa
 
 1. **Shop the store** - Every purchase funds maintainers
 2. **Contribute to libraries** - Build the ecosystem
-3. **Join a local meetup** - Build community where you are
-4. **Spread the word** - Share our mission
-5. **Become a member** - Join our governance
+3. **Spread the word** - Share our mission
+4. **Become a member** - Join our governance
 
-Visit [react.foundation](/) to learn more, or read more about [my vision for the Foundation](/about).
+Visit [react.foundation](/) to learn more.
 
 ---
 
-Thank you for being part of this journey. React has already changed millions of lives — let's make sure it changes millions more.
+Thank you for being part of this journey.
 
 **Seth Webster**
 *Executive Director, React Foundation*
diff --git a/debug-theme.html b/debug-theme.html
new file mode 100644
index 0000000..38e8b76
--- /dev/null
+++ b/debug-theme.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+// Check computed styles
+window.addEventListener('load', () => {
+  const root = document.documentElement;
+  const computed = getComputedStyle(root);
+  console.log('--color-background:', computed.getPropertyValue('--color-background'));
+  console.log('--color-border:', computed.getPropertyValue('--color-border'));
+  console.log('--color-foreground:', computed.getPropertyValue('--color-foreground'));
+  console.log('dark class present:', root.classList.contains('dark'));
+  console.log('data-theme:', root.getAttribute('data-theme'));
+});
+</script>
+</head>
+<body>Open console to see CSS variable values</body>
+</html>
diff --git a/next.config.ts b/next.config.ts
index e479360..7dd46e1 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -3,9 +3,7 @@ import createMDX from "@next/mdx";
 
 const nextConfig: NextConfig = {
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
-  experimental: {
-    reactCompiler: true, // Enable React Compiler v1.0
-  },
+  reactCompiler: true, // Enable React Compiler v1.0 (moved from experimental)
   images: {
     remotePatterns: [
       {
diff --git a/scripts/migrate-to-semantic-colors.js b/scripts/migrate-to-semantic-colors.js
new file mode 100644
index 0000000..e5d9477
--- /dev/null
+++ b/scripts/migrate-to-semantic-colors.js
@@ -0,0 +1,446 @@
+#!/usr/bin/env node
+
+/**
+ * Migration Script: Replace Hardcoded Colors with Semantic Colors
+ * 
+ * This script systematically replaces hardcoded Tailwind colors with semantic,
+ * themeable alternatives throughout the codebase.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+// Color mapping from hardcoded to semantic
+const colorMappings = {
+  // Background colors
+  'bg-white': 'bg-background',
+  'bg-black': 'bg-foreground',
+  'bg-gray-50': 'bg-muted',
+  'bg-gray-100': 'bg-muted',
+  'bg-gray-200': 'bg-muted',
+  'bg-gray-300': 'bg-muted',
+  'bg-gray-400': 'bg-muted',
+  'bg-gray-500': 'bg-muted',
+  'bg-gray-600': 'bg-muted',
+  'bg-gray-700': 'bg-muted',
+  'bg-gray-800': 'bg-muted',
+  'bg-gray-900': 'bg-muted',
+  'bg-slate-50': 'bg-muted',
+  'bg-slate-100': 'bg-muted',
+  'bg-slate-200': 'bg-muted',
+  'bg-slate-300': 'bg-muted',
+  'bg-slate-400': 'bg-muted',
+  'bg-slate-500': 'bg-muted',
+  'bg-slate-600': 'bg-muted',
+  'bg-slate-700': 'bg-muted',
+  'bg-slate-800': 'bg-muted',
+  'bg-slate-900': 'bg-muted',
+  'bg-slate-950': 'bg-background',
+  'bg-zinc-50': 'bg-muted',
+  'bg-zinc-100': 'bg-muted',
+  'bg-zinc-200': 'bg-muted',
+  'bg-zinc-300': 'bg-muted',
+  'bg-zinc-400': 'bg-muted',
+  'bg-zinc-500': 'bg-muted',
+  'bg-zinc-600': 'bg-muted',
+  'bg-zinc-700': 'bg-muted',
+  'bg-zinc-800': 'bg-muted',
+  'bg-zinc-900': 'bg-muted',
+  'bg-zinc-950': 'bg-background',
+  'bg-neutral-50': 'bg-muted',
+  'bg-neutral-100': 'bg-muted',
+  'bg-neutral-200': 'bg-muted',
+  'bg-neutral-300': 'bg-muted',
+  'bg-neutral-400': 'bg-muted',
+  'bg-neutral-500': 'bg-muted',
+  'bg-neutral-600': 'bg-muted',
+  'bg-neutral-700': 'bg-muted',
+  'bg-neutral-800': 'bg-muted',
+  'bg-neutral-900': 'bg-muted',
+  'bg-neutral-950': 'bg-background',
+  'bg-stone-50': 'bg-muted',
+  'bg-stone-100': 'bg-muted',
+  'bg-stone-200': 'bg-muted',
+  'bg-stone-300': 'bg-muted',
+  'bg-stone-400': 'bg-muted',
+  'bg-stone-500': 'bg-muted',
+  'bg-stone-600': 'bg-muted',
+  'bg-stone-700': 'bg-muted',
+  'bg-stone-800': 'bg-muted',
+  'bg-stone-900': 'bg-muted',
+  'bg-stone-950': 'bg-background',
+  
+  // Primary colors
+  'bg-blue-50': 'bg-primary/10',
+  'bg-blue-100': 'bg-primary/20',
+  'bg-blue-200': 'bg-primary/30',
+  'bg-blue-300': 'bg-primary/40',
+  'bg-blue-400': 'bg-primary/50',
+  'bg-blue-500': 'bg-primary',
+  'bg-blue-600': 'bg-primary',
+  'bg-blue-700': 'bg-primary',
+  'bg-blue-800': 'bg-primary',
+  'bg-blue-900': 'bg-primary',
+  'bg-blue-950': 'bg-primary',
+  'bg-sky-50': 'bg-primary/10',
+  'bg-sky-100': 'bg-primary/20',
+  'bg-sky-200': 'bg-primary/30',
+  'bg-sky-300': 'bg-primary/40',
+  'bg-sky-400': 'bg-primary/50',
+  'bg-sky-500': 'bg-primary',
+  'bg-sky-600': 'bg-primary',
+  'bg-sky-700': 'bg-primary',
+  'bg-sky-800': 'bg-primary',
+  'bg-sky-900': 'bg-primary',
+  'bg-sky-950': 'bg-primary',
+  'bg-indigo-50': 'bg-primary/10',
+  'bg-indigo-100': 'bg-primary/20',
+  'bg-indigo-200': 'bg-primary/30',
+  'bg-indigo-300': 'bg-primary/40',
+  'bg-indigo-400': 'bg-primary/50',
+  'bg-indigo-500': 'bg-primary',
+  'bg-indigo-600': 'bg-primary',
+  'bg-indigo-700': 'bg-primary',
+  'bg-indigo-800': 'bg-primary',
+  'bg-indigo-900': 'bg-primary',
+  'bg-indigo-950': 'bg-primary',
+  'bg-cyan-50': 'bg-primary/10',
+  'bg-cyan-100': 'bg-primary/20',
+  'bg-cyan-200': 'bg-primary/30',
+  'bg-cyan-300': 'bg-primary/40',
+  'bg-cyan-400': 'bg-primary/50',
+  'bg-cyan-500': 'bg-primary',
+  'bg-cyan-600': 'bg-primary',
+  'bg-cyan-700': 'bg-primary',
+  'bg-cyan-800': 'bg-primary',
+  'bg-cyan-900': 'bg-primary',
+  'bg-cyan-950': 'bg-primary',
+  
+  // Success colors
+  'bg-green-50': 'bg-success/10',
+  'bg-green-100': 'bg-success/20',
+  'bg-green-200': 'bg-success/30',
+  'bg-green-300': 'bg-success/40',
+  'bg-green-400': 'bg-success/50',
+  'bg-green-500': 'bg-success',
+  'bg-green-600': 'bg-success',
+  'bg-green-700': 'bg-success',
+  'bg-green-800': 'bg-success',
+  'bg-green-900': 'bg-success',
+  'bg-green-950': 'bg-success',
+  'bg-emerald-50': 'bg-success/10',
+  'bg-emerald-100': 'bg-success/20',
+  'bg-emerald-200': 'bg-success/30',
+  'bg-emerald-300': 'bg-success/40',
+  'bg-emerald-400': 'bg-success/50',
+  'bg-emerald-500': 'bg-success',
+  'bg-emerald-600': 'bg-success',
+  'bg-emerald-700': 'bg-success',
+  'bg-emerald-800': 'bg-success',
+  'bg-emerald-900': 'bg-success',
+  'bg-emerald-950': 'bg-success',
+  'bg-lime-50': 'bg-success/10',
+  'bg-lime-100': 'bg-success/20',
+  'bg-lime-200': 'bg-success/30',
+  'bg-lime-300': 'bg-success/40',
+  'bg-lime-400': 'bg-success/50',
+  'bg-lime-500': 'bg-success',
+  'bg-lime-600': 'bg-success',
+  'bg-lime-700': 'bg-success',
+  'bg-lime-800': 'bg-success',
+  'bg-lime-900': 'bg-success',
+  'bg-lime-950': 'bg-success',
+  'bg-teal-50': 'bg-success/10',
+  'bg-teal-100': 'bg-success/20',
+  'bg-teal-200': 'bg-success/30',
+  'bg-teal-300': 'bg-success/40',
+  'bg-teal-400': 'bg-success/50',
+  'bg-teal-500': 'bg-success',
+  'bg-teal-600': 'bg-success',
+  'bg-teal-700': 'bg-success',
+  'bg-teal-800': 'bg-success',
+  'bg-teal-900': 'bg-success',
+  'bg-teal-950': 'bg-success',
+  
+  // Destructive colors
+  'bg-red-50': 'bg-destructive/10',
+  'bg-red-100': 'bg-destructive/20',
+  'bg-red-200': 'bg-destructive/30',
+  'bg-red-300': 'bg-destructive/40',
+  'bg-red-400': 'bg-destructive/50',
+  'bg-red-500': 'bg-destructive',
+  'bg-red-600': 'bg-destructive',
+  'bg-red-700': 'bg-destructive',
+  'bg-red-800': 'bg-destructive',
+  'bg-red-900': 'bg-destructive',
+  'bg-red-950': 'bg-destructive',
+  'bg-rose-50': 'bg-destructive/10',
+  'bg-rose-100': 'bg-destructive/20',
+  'bg-rose-200': 'bg-destructive/30',
+  'bg-rose-300': 'bg-destructive/40',
+  'bg-rose-400': 'bg-destructive/50',
+  'bg-rose-500': 'bg-destructive',
+  'bg-rose-600': 'bg-destructive',
+  'bg-rose-700': 'bg-destructive',
+  'bg-rose-800': 'bg-destructive',
+  'bg-rose-900': 'bg-destructive',
+  'bg-rose-950': 'bg-destructive',
+  
+  // Warning colors
+  'bg-yellow-50': 'bg-warning/10',
+  'bg-yellow-100': 'bg-warning/20',
+  'bg-yellow-200': 'bg-warning/30',
+  'bg-yellow-300': 'bg-warning/40',
+  'bg-yellow-400': 'bg-warning/50',
+  'bg-yellow-500': 'bg-warning',
+  'bg-yellow-600': 'bg-warning',
+  'bg-yellow-700': 'bg-warning',
+  'bg-yellow-800': 'bg-warning',
+  'bg-yellow-900': 'bg-warning',
+  'bg-yellow-950': 'bg-warning',
+  'bg-amber-50': 'bg-warning/10',
+  'bg-amber-100': 'bg-warning/20',
+  'bg-amber-200': 'bg-warning/30',
+  'bg-amber-300': 'bg-warning/40',
+  'bg-amber-400': 'bg-warning/50',
+  'bg-amber-500': 'bg-warning',
+  'bg-amber-600': 'bg-warning',
+  'bg-amber-700': 'bg-warning',
+  'bg-amber-800': 'bg-warning',
+  'bg-amber-900': 'bg-warning',
+  'bg-amber-950': 'bg-warning',
+  'bg-orange-50': 'bg-warning/10',
+  'bg-orange-100': 'bg-warning/20',
+  'bg-orange-200': 'bg-warning/30',
+  'bg-orange-300': 'bg-warning/40',
+  'bg-orange-400': 'bg-warning/50',
+  'bg-orange-500': 'bg-warning',
+  'bg-orange-600': 'bg-warning',
+  'bg-orange-700': 'bg-warning',
+  'bg-orange-800': 'bg-warning',
+  'bg-orange-900': 'bg-warning',
+  'bg-orange-950': 'bg-warning',
+  
+  // Accent colors
+  'bg-purple-50': 'bg-accent/10',
+  'bg-purple-100': 'bg-accent/20',
+  'bg-purple-200': 'bg-accent/30',
+  'bg-purple-300': 'bg-accent/40',
+  'bg-purple-400': 'bg-accent/50',
+  'bg-purple-500': 'bg-accent',
+  'bg-purple-600': 'bg-accent',
+  'bg-purple-700': 'bg-accent',
+  'bg-purple-800': 'bg-accent',
+  'bg-purple-900': 'bg-accent',
+  'bg-purple-950': 'bg-accent',
+  'bg-violet-50': 'bg-accent/10',
+  'bg-violet-100': 'bg-accent/20',
+  'bg-violet-200': 'bg-accent/30',
+  'bg-violet-300': 'bg-accent/40',
+  'bg-violet-400': 'bg-accent/50',
+  'bg-violet-500': 'bg-accent',
+  'bg-violet-600': 'bg-accent',
+  'bg-violet-700': 'bg-accent',
+  'bg-violet-800': 'bg-accent',
+  'bg-violet-900': 'bg-accent',
+  'bg-violet-950': 'bg-accent',
+  'bg-fuchsia-50': 'bg-accent/10',
+  'bg-fuchsia-100': 'bg-accent/20',
+  'bg-fuchsia-200': 'bg-accent/30',
+  'bg-fuchsia-300': 'bg-accent/40',
+  'bg-fuchsia-400': 'bg-accent/50',
+  'bg-fuchsia-500': 'bg-accent',
+  'bg-fuchsia-600': 'bg-accent',
+  'bg-fuchsia-700': 'bg-accent',
+  'bg-fuchsia-800': 'bg-accent',
+  'bg-fuchsia-900': 'bg-accent',
+  'bg-fuchsia-950': 'bg-accent',
+  'bg-pink-50': 'bg-accent/10',
+  'bg-pink-100': 'bg-accent/20',
+  'bg-pink-200': 'bg-accent/30',
+  'bg-pink-300': 'bg-accent/40',
+  'bg-pink-400': 'bg-accent/50',
+  'bg-pink-500': 'bg-accent',
+  'bg-pink-600': 'bg-accent',
+  'bg-pink-700': 'bg-accent',
+  'bg-pink-800': 'bg-accent',
+  'bg-pink-900': 'bg-accent',
+  'bg-pink-950': 'bg-accent',
+};
+
+// Text color mappings (similar pattern)
+const textColorMappings = {
+  'text-white': 'text-foreground',
+  'text-black': 'text-foreground',
+  'text-gray-50': 'text-muted-foreground',
+  'text-gray-100': 'text-muted-foreground',
+  'text-gray-200': 'text-muted-foreground',
+  'text-gray-300': 'text-muted-foreground',
+  'text-gray-400': 'text-muted-foreground',
+  'text-gray-500': 'text-muted-foreground',
+  'text-gray-600': 'text-muted-foreground',
+  'text-gray-700': 'text-foreground',
+  'text-gray-800': 'text-foreground',
+  'text-gray-900': 'text-foreground',
+  'text-slate-50': 'text-muted-foreground',
+  'text-slate-100': 'text-muted-foreground',
+  'text-slate-200': 'text-muted-foreground',
+  'text-slate-300': 'text-muted-foreground',
+  'text-slate-400': 'text-muted-foreground',
+  'text-slate-500': 'text-muted-foreground',
+  'text-slate-600': 'text-muted-foreground',
+  'text-slate-700': 'text-foreground',
+  'text-slate-800': 'text-foreground',
+  'text-slate-900': 'text-foreground',
+  'text-slate-950': 'text-foreground',
+  'text-blue-500': 'text-primary',
+  'text-blue-600': 'text-primary',
+  'text-blue-700': 'text-primary',
+  'text-sky-500': 'text-primary',
+  'text-sky-600': 'text-primary',
+  'text-sky-700': 'text-primary',
+  'text-indigo-500': 'text-primary',
+  'text-indigo-600': 'text-primary',
+  'text-indigo-700': 'text-primary',
+  'text-cyan-500': 'text-primary',
+  'text-cyan-600': 'text-primary',
+  'text-cyan-700': 'text-primary',
+  'text-green-500': 'text-success',
+  'text-green-600': 'text-success',
+  'text-green-700': 'text-success',
+  'text-emerald-500': 'text-success',
+  'text-emerald-600': 'text-success',
+  'text-emerald-700': 'text-success',
+  'text-red-500': 'text-destructive',
+  'text-red-600': 'text-destructive',
+  'text-red-700': 'text-destructive',
+  'text-rose-500': 'text-destructive',
+  'text-rose-600': 'text-destructive',
+  'text-rose-700': 'text-destructive',
+  'text-yellow-500': 'text-warning',
+  'text-yellow-600': 'text-warning',
+  'text-yellow-700': 'text-warning',
+  'text-amber-500': 'text-warning',
+  'text-amber-600': 'text-warning',
+  'text-amber-700': 'text-warning',
+  'text-purple-500': 'text-accent',
+  'text-purple-600': 'text-accent',
+  'text-purple-700': 'text-accent',
+  'text-violet-500': 'text-accent',
+  'text-violet-600': 'text-accent',
+  'text-violet-700': 'text-accent',
+};
+
+// Border color mappings
+const borderColorMappings = {
+  'border-white': 'border-border',
+  'border-black': 'border-border',
+  'border-gray-200': 'border-border',
+  'border-gray-300': 'border-border',
+  'border-slate-200': 'border-border',
+  'border-slate-300': 'border-border',
+  'border-blue-500': 'border-primary',
+  'border-sky-500': 'border-primary',
+  'border-indigo-500': 'border-primary',
+  'border-cyan-500': 'border-primary',
+  'border-green-500': 'border-success',
+  'border-emerald-500': 'border-success',
+  'border-red-500': 'border-destructive',
+  'border-rose-500': 'border-destructive',
+  'border-yellow-500': 'border-warning',
+  'border-amber-500': 'border-warning',
+  'border-purple-500': 'border-accent',
+  'border-violet-500': 'border-accent',
+};
+
+// Combine all mappings
+const allMappings = {
+  ...colorMappings,
+  ...textColorMappings,
+  ...borderColorMappings,
+};
+
+function migrateFile(filePath) {
+  try {
+    let content = fs.readFileSync(filePath, 'utf8');
+    let hasChanges = false;
+    
+    // Apply all color mappings
+    for (const [hardcoded, semantic] of Object.entries(allMappings)) {
+      const regex = new RegExp(`\\b${hardcoded}\\b`, 'g');
+      if (content.includes(hardcoded)) {
+        content = content.replace(regex, semantic);
+        hasChanges = true;
+      }
+    }
+    
+    if (hasChanges) {
+      fs.writeFileSync(filePath, content, 'utf8');
+      console.log(`✅ Migrated: ${filePath}`);
+      return true;
+    }
+    
+    return false;
+  } catch (error) {
+    console.error(`❌ Error migrating ${filePath}:`, error.message);
+    return false;
+  }
+}
+
+function findTsxFiles(dir) {
+  const files = [];
+  
+  function traverse(currentDir) {
+    const items = fs.readdirSync(currentDir);
+    
+    for (const item of items) {
+      const fullPath = path.join(currentDir, item);
+      const stat = fs.statSync(fullPath);
+      
+      if (stat.isDirectory() && !item.startsWith('.') && item !== 'node_modules') {
+        traverse(fullPath);
+      } else if (item.endsWith('.tsx') || item.endsWith('.ts')) {
+        files.push(fullPath);
+      }
+    }
+  }
+  
+  traverse(dir);
+  return files;
+}
+
+function main() {
+  console.log('🚀 Starting semantic color migration...\n');
+  
+  const srcDir = path.join(__dirname, '..', 'src');
+  const files = findTsxFiles(srcDir);
+  
+  let migratedCount = 0;
+  let totalFiles = files.length;
+  
+  console.log(`Found ${totalFiles} files to process...\n`);
+  
+  for (const file of files) {
+    if (migrateFile(file)) {
+      migratedCount++;
+    }
+  }
+  
+  console.log(`\n✨ Migration complete!`);
+  console.log(`📊 Migrated ${migratedCount} out of ${totalFiles} files`);
+  
+  if (migratedCount > 0) {
+    console.log('\n🔍 Next steps:');
+    console.log('1. Review the changes');
+    console.log('2. Test theme switching');
+    console.log('3. Run linting: npm run lint');
+    console.log('4. Run tests: npm test');
+  }
+}
+
+if (require.main === module) {
+  main();
+}
+
+module.exports = { migrateFile, allMappings };
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index e1d3aff..734df73 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -15,7 +15,7 @@ export const metadata: Metadata = {
 
 export default function AboutPage() {
   return (
-    <div className="min-h-screen bg-slate-950 pt-24 text-slate-100">
+    <div className="min-h-screen bg-background pt-24 text-muted-foreground">
       <div className="absolute inset-x-0 top-[-6rem] -z-10 flex justify-center blur-3xl">
         <div className="h-[24rem] w-[60rem] bg-gradient-to-r from-emerald-400 via-cyan-500 to-blue-600 opacity-30" />
       </div>
@@ -26,10 +26,10 @@ export default function AboutPage() {
           <section className="space-y-8 pt-12">
             <Pill>Our Story · Our Mission · Our Values</Pill>
             <div>
-              <h1 className="text-5xl font-semibold leading-tight text-white sm:text-6xl">
+              <h1 className="text-5xl font-semibold leading-tight text-foreground sm:text-6xl">
                 About React Foundation
               </h1>
-              <p className="mt-8 max-w-2xl text-lg text-white/70">
+              <p className="mt-8 max-w-2xl text-lg text-foreground/70">
                 We&apos;re building a sustainable future for the React ecosystem through
                 community funding, transparent governance, and unwavering support for
                 the maintainers who make it all possible.
@@ -42,11 +42,11 @@ export default function AboutPage() {
 
           {/* Mission */}
           <ScrollReveal animation="fade-up">
-            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-white/10 bg-slate-900/60 p-12">
-              <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-border/10 bg-muted/60 p-12">
+              <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
                 Our Mission
               </h2>
-              <p className="max-w-3xl text-lg leading-relaxed text-white/70">
+              <p className="max-w-3xl text-lg leading-relaxed text-foreground/70">
                 The React Foundation exists to ensure the React ecosystem thrives for
                 generations to come. We provide direct financial support to maintainers,
                 fund educational initiatives, and ensure accessibility for developers
@@ -54,34 +54,34 @@ export default function AboutPage() {
               </p>
               <div className="space-y-4 pt-4">
                 <div className="flex gap-4">
-                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-500/10">
-                    <div className="h-2 w-2 rounded-full bg-emerald-400" />
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-success/10">
+                    <div className="h-2 w-2 rounded-full bg-success/50" />
                   </div>
                   <div>
-                    <h3 className="font-semibold text-white">Sustainable Funding</h3>
-                    <p className="mt-1 text-sm text-white/60">
+                    <h3 className="font-semibold text-foreground">Sustainable Funding</h3>
+                    <p className="mt-1 text-sm text-foreground/60">
                       Creating reliable revenue streams that support open source maintainers
                     </p>
                   </div>
                 </div>
                 <div className="flex gap-4">
-                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-500/10">
-                    <div className="h-2 w-2 rounded-full bg-sky-400" />
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10">
+                    <div className="h-2 w-2 rounded-full bg-primary/50" />
                   </div>
                   <div>
-                    <h3 className="font-semibold text-white">Full Transparency</h3>
-                    <p className="mt-1 text-sm text-white/60">
+                    <h3 className="font-semibold text-foreground">Full Transparency</h3>
+                    <p className="mt-1 text-sm text-foreground/60">
                       Quarterly reports showing exactly how funds are distributed
                     </p>
                   </div>
                 </div>
                 <div className="flex gap-4">
-                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-purple-500/10">
-                    <div className="h-2 w-2 rounded-full bg-purple-400" />
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent/10">
+                    <div className="h-2 w-2 rounded-full bg-accent/50" />
                   </div>
                   <div>
-                    <h3 className="font-semibold text-white">Community First</h3>
-                    <p className="mt-1 text-sm text-white/60">
+                    <h3 className="font-semibold text-foreground">Community First</h3>
+                    <p className="mt-1 text-sm text-foreground/60">
                       Decisions driven by community needs and maintainer feedback
                     </p>
                   </div>
@@ -92,58 +92,58 @@ export default function AboutPage() {
 
           {/* How It Works */}
           <ScrollReveal animation="scale">
-            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-white/10 bg-slate-900/60 p-12">
-              <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-border/10 bg-muted/60 p-12">
+              <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
                 How It Works
               </h2>
               <div className="grid gap-6 lg:grid-cols-2">
-                <div className="space-y-4 rounded-2xl border border-white/10 bg-white/[0.03] p-8">
+                <div className="space-y-4 rounded-2xl border border-border/10 bg-background/[0.03] p-8">
                   <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-400 to-blue-500">
-                    <span className="text-xl font-bold text-white">1</span>
+                    <span className="text-xl font-bold text-foreground">1</span>
                   </div>
-                  <h3 className="text-xl font-semibold text-white">
+                  <h3 className="text-xl font-semibold text-foreground">
                     Shop the Store
                   </h3>
-                  <p className="text-sm leading-relaxed text-white/70">
+                  <p className="text-sm leading-relaxed text-foreground/70">
                     Browse our collection of premium React-themed merchandise. Every
                     purchase directly supports the ecosystem.
                   </p>
                 </div>
 
-                <div className="space-y-4 rounded-2xl border border-white/10 bg-white/[0.03] p-8">
+                <div className="space-y-4 rounded-2xl border border-border/10 bg-background/[0.03] p-8">
                   <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-400 to-cyan-500">
-                    <span className="text-xl font-bold text-white">2</span>
+                    <span className="text-xl font-bold text-foreground">2</span>
                   </div>
-                  <h3 className="text-xl font-semibold text-white">
+                  <h3 className="text-xl font-semibold text-foreground">
                     Revenue Distribution
                   </h3>
-                  <p className="text-sm leading-relaxed text-white/70">
+                  <p className="text-sm leading-relaxed text-foreground/70">
                     100% of profits are distributed to maintainers of 54+ React ecosystem
                     libraries based on contribution metrics.
                   </p>
                 </div>
 
-                <div className="space-y-4 rounded-2xl border border-white/10 bg-white/[0.03] p-8">
-                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-purple-400 to-pink-500">
-                    <span className="text-xl font-bold text-white">3</span>
+                <div className="space-y-4 rounded-2xl border border-border/10 bg-background/[0.03] p-8">
+                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-300 to-orange-500">
+                    <span className="text-xl font-bold text-foreground">3</span>
                   </div>
-                  <h3 className="text-xl font-semibold text-white">
+                  <h3 className="text-xl font-semibold text-foreground">
                     Contributor Recognition
                   </h3>
-                  <p className="text-sm leading-relaxed text-white/70">
+                  <p className="text-sm leading-relaxed text-foreground/70">
                     Contributors unlock exclusive merchandise tiers (Contributor, Sustainer,
                     Core) based on their ecosystem contributions.
                   </p>
                 </div>
 
-                <div className="space-y-4 rounded-2xl border border-white/10 bg-white/[0.03] p-8">
+                <div className="space-y-4 rounded-2xl border border-border/10 bg-background/[0.03] p-8">
                   <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-sky-400 to-indigo-500">
-                    <span className="text-xl font-bold text-white">4</span>
+                    <span className="text-xl font-bold text-foreground">4</span>
                   </div>
-                  <h3 className="text-xl font-semibold text-white">
+                  <h3 className="text-xl font-semibold text-foreground">
                     Transparent Reporting
                   </h3>
-                  <p className="text-sm leading-relaxed text-white/70">
+                  <p className="text-sm leading-relaxed text-foreground/70">
                     Quarterly impact reports detail exactly how funds support maintainers,
                     education, and accessibility initiatives.
                   </p>
@@ -163,37 +163,37 @@ export default function AboutPage() {
 
           {/* Governance */}
           <ScrollReveal animation="fade-up">
-            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-white/10 bg-slate-900/60 p-12">
-              <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-border/10 bg-muted/60 p-12">
+              <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
                 Transparent Governance
               </h2>
-              <p className="max-w-3xl text-lg leading-relaxed text-white/70">
+              <p className="max-w-3xl text-lg leading-relaxed text-foreground/70">
                 The React Foundation operates with complete transparency. All funding
                 decisions, impact reports, and financial details are published quarterly
                 for community review and feedback.
               </p>
               <div className="grid gap-6 pt-4 sm:grid-cols-2">
-                <div className="space-y-3 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
-                  <h3 className="font-semibold text-white">Open Financials</h3>
-                  <p className="text-sm text-white/70">
+                <div className="space-y-3 rounded-2xl border border-border/10 bg-background/[0.03] p-6">
+                  <h3 className="font-semibold text-foreground">Open Financials</h3>
+                  <p className="text-sm text-foreground/70">
                     Every dollar tracked and reported publicly
                   </p>
                 </div>
-                <div className="space-y-3 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
-                  <h3 className="font-semibold text-white">Community Input</h3>
-                  <p className="text-sm text-white/70">
+                <div className="space-y-3 rounded-2xl border border-border/10 bg-background/[0.03] p-6">
+                  <h3 className="font-semibold text-foreground">Community Input</h3>
+                  <p className="text-sm text-foreground/70">
                     Major decisions informed by maintainer feedback
                   </p>
                 </div>
-                <div className="space-y-3 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
-                  <h3 className="font-semibold text-white">Quarterly Reports</h3>
-                  <p className="text-sm text-white/70">
+                <div className="space-y-3 rounded-2xl border border-border/10 bg-background/[0.03] p-6">
+                  <h3 className="font-semibold text-foreground">Quarterly Reports</h3>
+                  <p className="text-sm text-foreground/70">
                     Detailed impact metrics published every quarter
                   </p>
                 </div>
-                <div className="space-y-3 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
-                  <h3 className="font-semibold text-white">Open Source Values</h3>
-                  <p className="text-sm text-white/70">
+                <div className="space-y-3 rounded-2xl border border-border/10 bg-background/[0.03] p-6">
+                  <h3 className="font-semibold text-foreground">Open Source Values</h3>
+                  <p className="text-sm text-foreground/70">
                     Built on the same principles as the ecosystem we support
                   </p>
                 </div>
@@ -208,11 +208,11 @@ export default function AboutPage() {
 
           {/* CTA */}
           <ScrollReveal animation="fade-up">
-            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-white/10 bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10 p-12 text-center">
-              <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-border/10 bg-gradient-to-br from-cyan-500/10 via-yellow-400/10 to-orange-500/10 p-12 text-center">
+              <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
                 Ready to Make an Impact?
               </h2>
-              <p className="mx-auto max-w-2xl text-lg text-white/70">
+              <p className="mx-auto max-w-2xl text-lg text-foreground/70">
                 Start supporting the React ecosystem today. Every contribution helps build
                 a sustainable future for open source.
               </p>
diff --git a/src/app/admin/admin-sidebar.tsx b/src/app/admin/admin-sidebar.tsx
index 0304f9d..9ae409d 100644
--- a/src/app/admin/admin-sidebar.tsx
+++ b/src/app/admin/admin-sidebar.tsx
@@ -17,10 +17,10 @@ export function AdminSidebar() {
   ];
 
   return (
-    <aside className="fixed left-0 top-20 bottom-0 w-64 border-r border-white/10 bg-slate-950/95 p-6">
+    <aside className="fixed left-0 top-20 bottom-0 w-64 border-r border-border/10 bg-background/95 p-6">
       <div className="space-y-6">
         <div>
-          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white/60">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-foreground/60">
             Admin Panel
           </h2>
           <nav className="space-y-2">
@@ -32,8 +32,8 @@ export function AdminSidebar() {
                   href={item.href}
                   className={`flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium transition ${
                     isActive
-                      ? 'bg-cyan-500/20 text-cyan-400'
-                      : 'text-white/70 hover:bg-white/5 hover:text-white'
+                      ? 'bg-primary/20 text-cyan-400'
+                      : 'text-foreground/70 hover:bg-background/5 hover:text-foreground'
                   }`}
                 >
                   <span className="text-lg">{item.icon}</span>
@@ -44,10 +44,10 @@ export function AdminSidebar() {
           </nav>
         </div>
 
-        <div className="border-t border-white/10 pt-6">
+        <div className="border-t border-border/10 pt-6">
           <Link
             href="/"
-            className="flex items-center gap-2 text-sm text-white/50 transition hover:text-white"
+            className="flex items-center gap-2 text-sm text-foreground/50 transition hover:text-foreground"
           >
             <span>←</span>
             <span>Back to Site</span>
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 09550ee..1e63bd8 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -28,10 +28,10 @@ export default async function AdminLayout({
   if (!isAdmin) {
     return (
       <div className="container mx-auto max-w-4xl px-4 py-12 mt-20">
-        <div className="rounded-xl border border-red-500/50 bg-red-500/10 p-6 text-center">
+        <div className="rounded-xl border border-destructive/50 bg-destructive/10 p-6 text-center">
           <h1 className="text-2xl font-bold text-red-400 mb-2">Access Denied</h1>
           <p className="text-red-400/80">Admin role required to access this area.</p>
-          <p className="text-white/60 mt-4 text-sm">
+          <p className="text-foreground/60 mt-4 text-sm">
             If you believe you should have access, please contact the administrator.
           </p>
         </div>
diff --git a/src/app/admin/requests/loading.tsx b/src/app/admin/requests/loading.tsx
index 41cbbe7..3670eda 100644
--- a/src/app/admin/requests/loading.tsx
+++ b/src/app/admin/requests/loading.tsx
@@ -8,26 +8,26 @@ export default function Loading() {
       <div className="space-y-8">
         {/* Header Skeleton */}
         <div className="space-y-2">
-          <div className="h-10 w-64 animate-pulse rounded bg-white/10" />
-          <div className="h-5 w-56 animate-pulse rounded bg-white/5" />
+          <div className="h-10 w-64 animate-pulse rounded bg-background/10" />
+          <div className="h-5 w-56 animate-pulse rounded bg-background/5" />
         </div>
 
         {/* Pending Requests Skeleton */}
-        <div className="rounded-2xl border border-white/10 bg-slate-900/60 p-6">
-          <div className="mb-4 h-7 w-48 animate-pulse rounded bg-white/10" />
+        <div className="rounded-2xl border border-border/10 bg-muted/60 p-6">
+          <div className="mb-4 h-7 w-48 animate-pulse rounded bg-background/10" />
           <div className="space-y-4">
             {[...Array(3)].map((_, i) => (
-              <div key={i} className="rounded-xl border border-white/10 bg-black/30 p-6">
+              <div key={i} className="rounded-xl border border-border/10 bg-foreground/30 p-6">
                 <div className="space-y-4">
                   <div className="space-y-2">
-                    <div className="h-6 w-56 animate-pulse rounded bg-white/10" />
-                    <div className="h-4 w-40 animate-pulse rounded bg-white/5" />
+                    <div className="h-6 w-56 animate-pulse rounded bg-background/10" />
+                    <div className="h-4 w-40 animate-pulse rounded bg-background/5" />
                   </div>
-                  <div className="h-24 animate-pulse rounded-lg bg-white/5" />
+                  <div className="h-24 animate-pulse rounded-lg bg-background/5" />
                   <div className="flex gap-3">
-                    <div className="h-10 flex-1 animate-pulse rounded-lg bg-white/10" />
-                    <div className="h-10 flex-1 animate-pulse rounded-lg bg-white/10" />
-                    <div className="h-10 w-24 animate-pulse rounded-lg bg-white/5" />
+                    <div className="h-10 flex-1 animate-pulse rounded-lg bg-background/10" />
+                    <div className="h-10 flex-1 animate-pulse rounded-lg bg-background/10" />
+                    <div className="h-10 w-24 animate-pulse rounded-lg bg-background/5" />
                   </div>
                 </div>
               </div>
@@ -36,17 +36,17 @@ export default function Loading() {
         </div>
 
         {/* Processed Requests Skeleton */}
-        <div className="rounded-2xl border border-white/10 bg-slate-900/60 p-6">
-          <div className="mb-4 h-7 w-48 animate-pulse rounded bg-white/10" />
+        <div className="rounded-2xl border border-border/10 bg-muted/60 p-6">
+          <div className="mb-4 h-7 w-48 animate-pulse rounded bg-background/10" />
           <div className="space-y-2">
             {[...Array(5)].map((_, i) => (
-              <div key={i} className="rounded-lg border border-white/10 bg-black/20 p-4">
+              <div key={i} className="rounded-lg border border-border/10 bg-foreground/20 p-4">
                 <div className="flex items-center justify-between">
                   <div className="flex-1 space-y-2">
-                    <div className="h-5 w-48 animate-pulse rounded bg-white/10" />
-                    <div className="h-4 w-64 animate-pulse rounded bg-white/5" />
+                    <div className="h-5 w-48 animate-pulse rounded bg-background/10" />
+                    <div className="h-4 w-64 animate-pulse rounded bg-background/5" />
                   </div>
-                  <div className="h-6 w-20 animate-pulse rounded bg-white/10" />
+                  <div className="h-6 w-20 animate-pulse rounded bg-background/10" />
                 </div>
               </div>
             ))}
diff --git a/src/app/admin/requests/page.tsx b/src/app/admin/requests/page.tsx
index 0842489..0bd1ff8 100644
--- a/src/app/admin/requests/page.tsx
+++ b/src/app/admin/requests/page.tsx
@@ -22,7 +22,7 @@ export default async function AdminRequestsPage() {
   if (!isAdmin) {
     return (
       <div className="container mx-auto max-w-4xl px-4 py-12">
-        <div className="rounded-xl border border-red-500/50 bg-red-500/10 p-6 text-center">
+        <div className="rounded-xl border border-destructive/50 bg-destructive/10 p-6 text-center">
           <p className="text-red-400">Access Denied - Admin role required</p>
         </div>
       </div>
@@ -37,8 +37,8 @@ export default async function AdminRequestsPage() {
       <div className="space-y-8">
         {/* Header */}
         <div>
-          <h1 className="text-4xl font-bold text-white">Access Requests</h1>
-          <p className="mt-2 text-white/70">Review and manage early access requests</p>
+          <h1 className="text-4xl font-bold text-foreground">Access Requests</h1>
+          <p className="mt-2 text-foreground/70">Review and manage early access requests</p>
         </div>
 
         {/* Client component handles interactivity */}
diff --git a/src/app/admin/requests/requests-list-client.tsx b/src/app/admin/requests/requests-list-client.tsx
index e8b6ba4..9923bcc 100644
--- a/src/app/admin/requests/requests-list-client.tsx
+++ b/src/app/admin/requests/requests-list-client.tsx
@@ -50,19 +50,19 @@ export function RequestsListClient({
   return (
     <>
       {error && (
-        <div className="rounded-lg border border-red-500/50 bg-red-500/10 p-4 text-red-300">
+        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-red-300">
           {error}
         </div>
       )}
 
       {/* Pending Requests */}
-      <div className="rounded-2xl border border-white/10 bg-slate-900/60 p-6">
-        <h2 className="mb-4 text-xl font-semibold text-white">
+      <div className="rounded-2xl border border-border/10 bg-muted/60 p-6">
+        <h2 className="mb-4 text-xl font-semibold text-foreground">
           Pending Requests ({pendingRequests.length})
         </h2>
 
         {pendingRequests.length === 0 && (
-          <p className="text-center text-white/60">No pending requests</p>
+          <p className="text-center text-foreground/60">No pending requests</p>
         )}
 
         <div className="space-y-4">
@@ -71,41 +71,41 @@ export function RequestsListClient({
               key={req.id}
               className={`rounded-xl border p-6 ${
                 req.id === highlightId
-                  ? 'border-cyan-500 bg-cyan-500/10'
-                  : 'border-white/10 bg-black/30'
+                  ? 'border-primary bg-primary/10'
+                  : 'border-border/10 bg-foreground/30'
               }`}
             >
               <div className="space-y-4">
                 <div>
-                  <p className="text-lg font-semibold text-white">{req.email}</p>
-                  <p className="text-sm text-white/50">
+                  <p className="text-lg font-semibold text-foreground">{req.email}</p>
+                  <p className="text-sm text-foreground/50">
                     Requested {new Date(req.requestedAt).toLocaleString()}
                   </p>
                 </div>
 
-                <div className="rounded-lg border border-white/10 bg-black/50 p-4">
-                  <p className="text-sm text-white/80">{req.message}</p>
+                <div className="rounded-lg border border-border/10 bg-foreground/50 p-4">
+                  <p className="text-sm text-foreground/80">{req.message}</p>
                 </div>
 
                 <div className="flex gap-3">
                   <button
                     onClick={() => handleApprove(req.id, 'user')}
                     disabled={isPending}
-                    className="flex-1 rounded-lg bg-green-500 px-4 py-2 font-semibold text-black transition hover:bg-green-400 disabled:opacity-50"
+                    className="flex-1 rounded-lg bg-success px-4 py-2 font-semibold text-foreground transition hover:bg-success/50 disabled:opacity-50"
                   >
                     ✅ Approve as User
                   </button>
                   <button
                     onClick={() => handleApprove(req.id, 'admin')}
                     disabled={isPending}
-                    className="flex-1 rounded-lg bg-purple-500 px-4 py-2 font-semibold text-white transition hover:bg-purple-400 disabled:opacity-50"
+                    className="flex-1 rounded-lg bg-accent px-4 py-2 font-semibold text-foreground transition hover:bg-accent/50 disabled:opacity-50"
                   >
                     👑 Approve as Admin
                   </button>
                   <button
                     onClick={() => handleDeny(req.id)}
                     disabled={isPending}
-                    className="rounded-lg bg-red-500/20 px-4 py-2 font-semibold text-red-300 transition hover:bg-red-500/30 disabled:opacity-50"
+                    className="rounded-lg bg-destructive/20 px-4 py-2 font-semibold text-red-300 transition hover:bg-destructive/30 disabled:opacity-50"
                   >
                     ❌ Deny
                   </button>
@@ -117,8 +117,8 @@ export function RequestsListClient({
       </div>
 
       {/* Processed Requests */}
-      <div className="rounded-2xl border border-white/10 bg-slate-900/60 p-6">
-        <h2 className="mb-4 text-xl font-semibold text-white">
+      <div className="rounded-2xl border border-border/10 bg-muted/60 p-6">
+        <h2 className="mb-4 text-xl font-semibold text-foreground">
           Processed Requests ({processedRequests.length})
         </h2>
 
@@ -126,11 +126,11 @@ export function RequestsListClient({
           {processedRequests.slice(0, 20).map((req) => (
             <div
               key={req.id}
-              className="flex items-center justify-between rounded-lg border border-white/10 bg-black/20 p-4"
+              className="flex items-center justify-between rounded-lg border border-border/10 bg-foreground/20 p-4"
             >
               <div>
-                <p className="font-medium text-white">{req.email}</p>
-                <p className="text-sm text-white/50">
+                <p className="font-medium text-foreground">{req.email}</p>
+                <p className="text-sm text-foreground/50">
                   {req.status === 'approved' ? '✅ Approved' : '❌ Denied'} on{' '}
                   {new Date(req.reviewedAt!).toLocaleDateString()}
                   {req.reviewedBy && ` by ${req.reviewedBy}`}
@@ -139,8 +139,8 @@ export function RequestsListClient({
               <span
                 className={`rounded px-3 py-1 text-sm font-semibold ${
                   req.status === 'approved'
-                    ? 'bg-green-500/20 text-green-300'
-                    : 'bg-red-500/20 text-red-300'
+                    ? 'bg-success/20 text-green-300'
+                    : 'bg-destructive/20 text-red-300'
                 }`}
               >
                 {req.status}
diff --git a/src/app/admin/users/loading.tsx b/src/app/admin/users/loading.tsx
index 5622745..c42852e 100644
--- a/src/app/admin/users/loading.tsx
+++ b/src/app/admin/users/loading.tsx
@@ -8,35 +8,35 @@ export default function Loading() {
       <div className="space-y-8">
         {/* Header Skeleton */}
         <div className="space-y-2">
-          <div className="h-10 w-64 animate-pulse rounded bg-white/10" />
-          <div className="h-5 w-48 animate-pulse rounded bg-white/5" />
+          <div className="h-10 w-64 animate-pulse rounded bg-background/10" />
+          <div className="h-5 w-48 animate-pulse rounded bg-background/5" />
         </div>
 
         {/* Form Skeleton */}
-        <div className="rounded-2xl border border-white/10 bg-slate-900/60 p-6">
-          <div className="mb-4 h-7 w-32 animate-pulse rounded bg-white/10" />
+        <div className="rounded-2xl border border-border/10 bg-muted/60 p-6">
+          <div className="mb-4 h-7 w-32 animate-pulse rounded bg-background/10" />
           <div className="flex gap-4">
-            <div className="h-10 flex-1 animate-pulse rounded bg-white/5" />
-            <div className="h-10 w-32 animate-pulse rounded bg-white/5" />
-            <div className="h-10 w-32 animate-pulse rounded bg-white/5" />
+            <div className="h-10 flex-1 animate-pulse rounded bg-background/5" />
+            <div className="h-10 w-32 animate-pulse rounded bg-background/5" />
+            <div className="h-10 w-32 animate-pulse rounded bg-background/5" />
           </div>
         </div>
 
         {/* Users List Skeleton */}
-        <div className="rounded-2xl border border-white/10 bg-slate-900/60 p-6">
-          <div className="mb-4 h-7 w-40 animate-pulse rounded bg-white/10" />
+        <div className="rounded-2xl border border-border/10 bg-muted/60 p-6">
+          <div className="mb-4 h-7 w-40 animate-pulse rounded bg-background/10" />
           <div className="space-y-2">
             {[...Array(5)].map((_, i) => (
-              <div key={i} className="rounded-lg border border-white/10 bg-black/30 p-4">
+              <div key={i} className="rounded-lg border border-border/10 bg-foreground/30 p-4">
                 <div className="flex items-center justify-between">
                   <div className="flex-1 space-y-2">
-                    <div className="h-5 w-48 animate-pulse rounded bg-white/10" />
-                    <div className="h-4 w-64 animate-pulse rounded bg-white/5" />
+                    <div className="h-5 w-48 animate-pulse rounded bg-background/10" />
+                    <div className="h-4 w-64 animate-pulse rounded bg-background/5" />
                   </div>
                   <div className="flex gap-3">
-                    <div className="h-8 w-16 animate-pulse rounded bg-white/10" />
-                    <div className="h-8 w-24 animate-pulse rounded bg-white/5" />
-                    <div className="h-8 w-20 animate-pulse rounded bg-white/5" />
+                    <div className="h-8 w-16 animate-pulse rounded bg-background/10" />
+                    <div className="h-8 w-24 animate-pulse rounded bg-background/5" />
+                    <div className="h-8 w-20 animate-pulse rounded bg-background/5" />
                   </div>
                 </div>
               </div>
diff --git a/src/app/admin/users/page.tsx b/src/app/admin/users/page.tsx
index adae761..9c72c52 100644
--- a/src/app/admin/users/page.tsx
+++ b/src/app/admin/users/page.tsx
@@ -21,7 +21,7 @@ export default async function AdminUsersPage() {
   if (!isAdmin) {
     return (
       <div className="container mx-auto max-w-4xl px-4 py-12">
-        <div className="rounded-xl border border-red-500/50 bg-red-500/10 p-6 text-center">
+        <div className="rounded-xl border border-destructive/50 bg-destructive/10 p-6 text-center">
           <p className="text-red-400">Access Denied - Admin role required</p>
         </div>
       </div>
@@ -36,8 +36,8 @@ export default async function AdminUsersPage() {
       <div className="space-y-8">
         {/* Header */}
         <div>
-          <h1 className="text-4xl font-bold text-white">User Management</h1>
-          <p className="mt-2 text-white/70">Manage user access and roles</p>
+          <h1 className="text-4xl font-bold text-foreground">User Management</h1>
+          <p className="mt-2 text-foreground/70">Manage user access and roles</p>
         </div>
 
         {/* Client component handles interactivity */}
diff --git a/src/app/admin/users/users-list-client.tsx b/src/app/admin/users/users-list-client.tsx
index 53b4982..73d456f 100644
--- a/src/app/admin/users/users-list-client.tsx
+++ b/src/app/admin/users/users-list-client.tsx
@@ -60,10 +60,10 @@ export function UsersListClient({
   return (
     <>
       {/* Add User Form */}
-      <div className="rounded-2xl border border-white/10 bg-slate-900/60 p-6">
-        <h2 className="mb-4 text-xl font-semibold text-white">Add User</h2>
+      <div className="rounded-2xl border border-border/10 bg-muted/60 p-6">
+        <h2 className="mb-4 text-xl font-semibold text-foreground">Add User</h2>
         {error && (
-          <div className="mb-4 rounded-lg border border-red-500/50 bg-red-500/10 p-3 text-sm text-red-300">
+          <div className="mb-4 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-red-300">
             {error}
           </div>
         )}
@@ -75,13 +75,13 @@ export function UsersListClient({
             onChange={(e) => setNewEmail(e.target.value)}
             placeholder="user@example.com"
             disabled={isPending}
-            className="flex-1 rounded-lg border border-white/20 bg-black/50 px-4 py-2 text-white outline-none focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/50 disabled:opacity-50"
+            className="flex-1 rounded-lg border border-border/20 bg-foreground/50 px-4 py-2 text-foreground outline-none focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/50 disabled:opacity-50"
           />
           <select
             value={newRole}
             onChange={(e) => setNewRole(e.target.value as 'user' | 'admin')}
             disabled={isPending}
-            className="rounded-lg border border-white/20 bg-black/50 px-4 py-2 text-white outline-none focus:border-cyan-400 disabled:opacity-50"
+            className="rounded-lg border border-border/20 bg-foreground/50 px-4 py-2 text-foreground outline-none focus:border-cyan-400 disabled:opacity-50"
           >
             <option value="user">User</option>
             <option value="admin">Admin</option>
@@ -89,7 +89,7 @@ export function UsersListClient({
           <button
             type="submit"
             disabled={isPending}
-            className="rounded-lg bg-cyan-500 px-6 py-2 font-semibold text-black transition hover:bg-cyan-400 disabled:opacity-50"
+            className="rounded-lg bg-primary px-6 py-2 font-semibold text-foreground transition hover:bg-primary/50 disabled:opacity-50"
           >
             {isPending ? 'Adding...' : 'Add User'}
           </button>
@@ -97,24 +97,24 @@ export function UsersListClient({
       </div>
 
       {/* Users List */}
-      <div className="rounded-2xl border border-white/10 bg-slate-900/60 p-6">
-        <h2 className="mb-4 text-xl font-semibold text-white">
+      <div className="rounded-2xl border border-border/10 bg-muted/60 p-6">
+        <h2 className="mb-4 text-xl font-semibold text-foreground">
           Users ({initialUsers.length})
         </h2>
 
         {initialUsers.length === 0 && (
-          <p className="text-center text-white/60">No users yet</p>
+          <p className="text-center text-foreground/60">No users yet</p>
         )}
 
         <div className="space-y-2">
           {initialUsers.map((user) => (
             <div
               key={user.email}
-              className="flex items-center justify-between rounded-lg border border-white/10 bg-black/30 p-4"
+              className="flex items-center justify-between rounded-lg border border-border/10 bg-foreground/30 p-4"
             >
               <div className="flex-1">
-                <p className="font-medium text-white">{user.email}</p>
-                <p className="text-sm text-white/50">
+                <p className="font-medium text-foreground">{user.email}</p>
+                <p className="text-sm text-foreground/50">
                   Added {new Date(user.addedAt).toLocaleDateString()}
                   {user.addedBy && ` by ${user.addedBy}`}
                 </p>
@@ -125,8 +125,8 @@ export function UsersListClient({
                 <span
                   className={`rounded px-3 py-1 text-sm font-semibold ${
                     user.role === 'admin'
-                      ? 'bg-purple-500/20 text-purple-300'
-                      : 'bg-cyan-500/20 text-cyan-300'
+                      ? 'bg-accent/20 text-purple-300'
+                      : 'bg-primary/20 text-cyan-300'
                   }`}
                 >
                   {user.role}
@@ -142,7 +142,7 @@ export function UsersListClient({
                       )
                     }
                     disabled={isPending}
-                    className="rounded bg-white/10 px-3 py-1 text-sm text-white/70 transition hover:bg-white/20 hover:text-white disabled:opacity-50"
+                    className="rounded bg-background/10 px-3 py-1 text-sm text-foreground/70 transition hover:bg-background/20 hover:text-foreground disabled:opacity-50"
                   >
                     Make {user.role === 'admin' ? 'User' : 'Admin'}
                   </button>
@@ -153,14 +153,14 @@ export function UsersListClient({
                   <button
                     onClick={() => handleRemoveUser(user.email)}
                     disabled={isPending}
-                    className="rounded bg-red-500/20 px-3 py-1 text-sm text-red-300 transition hover:bg-red-500/30 disabled:opacity-50"
+                    className="rounded bg-destructive/20 px-3 py-1 text-sm text-red-300 transition hover:bg-destructive/30 disabled:opacity-50"
                   >
                     Remove
                   </button>
                 )}
 
                 {user.email === currentUserEmail && (
-                  <span className="text-sm text-white/40">(You)</span>
+                  <span className="text-sm text-foreground/40">(You)</span>
                 )}
               </div>
             </div>
diff --git a/src/app/api/admin/check/route.ts b/src/app/api/admin/check/route.ts
new file mode 100644
index 0000000..7892d61
--- /dev/null
+++ b/src/app/api/admin/check/route.ts
@@ -0,0 +1,21 @@
+import { NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth';
+import { UserManagementService } from '@/lib/admin/user-management-service';
+
+export async function GET() {
+  try {
+    const session = await getServerSession(authOptions);
+
+    if (!session?.user?.email) {
+      return NextResponse.json({ isAdmin: false });
+    }
+
+    const isAdmin = await UserManagementService.isAdmin(session.user.email);
+
+    return NextResponse.json({ isAdmin });
+  } catch (error) {
+    console.error('Error checking admin status:', error);
+    return NextResponse.json({ isAdmin: false });
+  }
+}
diff --git a/src/app/auth/signin/page.tsx b/src/app/auth/signin/page.tsx
index 9c06503..b3328e8 100644
--- a/src/app/auth/signin/page.tsx
+++ b/src/app/auth/signin/page.tsx
@@ -10,7 +10,7 @@ export default function SignInPage() {
   const callbackUrl = searchParams?.get("callbackUrl") || "/";
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-slate-950 px-6">
+    <div className="flex min-h-screen items-center justify-center bg-background px-6">
       {/* Background gradient */}
       <div className="absolute inset-x-0 top-[-6rem] -z-10 flex justify-center blur-3xl">
         <div className="h-[24rem] w-full max-w-[60rem] bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 opacity-30" />
@@ -19,7 +19,7 @@ export default function SignInPage() {
       <div className="w-full max-w-md space-y-8">
         {/* Logo and Title */}
         <div className="text-center">
-          <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center overflow-hidden rounded-full bg-white/10 ring-1 ring-white/15">
+          <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center overflow-hidden rounded-full bg-background/10 ring-1 ring-white/15">
             <Image
               src="/react-logo.svg"
               alt="React Foundation"
@@ -28,28 +28,28 @@ export default function SignInPage() {
               className="object-contain"
             />
           </div>
-          <h1 className="text-3xl font-bold text-white">Welcome Back</h1>
-          <p className="mt-2 text-base text-white/70">
+          <h1 className="text-3xl font-bold text-foreground">Welcome Back</h1>
+          <p className="mt-2 text-base text-foreground/70">
             Sign in to access your React Foundation account
           </p>
         </div>
 
         {/* Sign In Options */}
-        <div className="space-y-4 rounded-3xl border border-white/10 bg-slate-900/60 p-8">
+        <div className="space-y-4 rounded-3xl border border-border/10 bg-muted/60 p-8">
           {/* GitHub */}
           <button
             onClick={() => signIn("github", { callbackUrl })}
-            className="group relative w-full overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-r from-slate-800 to-slate-900 p-6 transition hover:border-white/20 hover:from-slate-700 hover:to-slate-800"
+            className="group relative w-full overflow-hidden rounded-2xl border border-border/10 bg-gradient-to-r from-slate-800 to-slate-900 p-6 transition hover:border-border/20 hover:from-slate-700 hover:to-slate-800"
           >
             <div className="flex items-center justify-center gap-4">
               <svg
-                className="h-6 w-6 text-white"
+                className="h-6 w-6 text-foreground"
                 fill="currentColor"
                 viewBox="0 0 24 24"
               >
                 <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
               </svg>
-              <span className="text-lg font-semibold text-white">
+              <span className="text-lg font-semibold text-foreground">
                 Continue with GitHub
               </span>
             </div>
@@ -58,27 +58,27 @@ export default function SignInPage() {
           {/* GitLab */}
           <button
             onClick={() => signIn("gitlab", { callbackUrl })}
-            className="group relative w-full overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-r from-slate-800 to-slate-900 p-6 opacity-50 transition hover:border-white/20 hover:from-slate-700 hover:to-slate-800 hover:opacity-100"
+            className="group relative w-full overflow-hidden rounded-2xl border border-border/10 bg-gradient-to-r from-slate-800 to-slate-900 p-6 opacity-50 transition hover:border-border/20 hover:from-slate-700 hover:to-slate-800 hover:opacity-100"
             disabled
           >
             <div className="flex items-center justify-center gap-4">
               <svg
-                className="h-6 w-6 text-white"
+                className="h-6 w-6 text-foreground"
                 fill="currentColor"
                 viewBox="0 0 24 24"
               >
                 <path d="M23.955 13.587l-1.342-4.135-2.664-8.189a.455.455 0 0 0-.867 0L16.418 9.45H7.582L4.919 1.263C4.783.84 4.185.84 4.05 1.263L1.386 9.452.044 13.587a.924.924 0 0 0 .331 1.03L12 23.054l11.625-8.436a.92.92 0 0 0 .33-1.031" />
               </svg>
-              <span className="text-lg font-semibold text-white">
+              <span className="text-lg font-semibold text-foreground">
                 Continue with GitLab
               </span>
-              <span className="absolute right-3 top-3 rounded-full bg-amber-500/20 px-2 py-1 text-xs font-semibold text-amber-300">
+              <span className="absolute right-3 top-3 rounded-full bg-warning/20 px-2 py-1 text-xs font-semibold text-amber-300">
                 Coming Soon
               </span>
             </div>
           </button>
 
-          <p className="mt-6 text-center text-sm text-white/60">
+          <p className="mt-6 text-center text-sm text-foreground/60">
             We verify your contributions to the React ecosystem
           </p>
         </div>
diff --git a/src/app/authors/[slug]/page.tsx b/src/app/authors/[slug]/page.tsx
index 07de2d7..ba356fc 100644
--- a/src/app/authors/[slug]/page.tsx
+++ b/src/app/authors/[slug]/page.tsx
@@ -52,7 +52,7 @@ export default async function AuthorPage({ params }: AuthorPageProps) {
   );
 
   return (
-    <div className="min-h-screen bg-slate-950 pt-24 text-slate-100">
+    <div className="min-h-screen bg-background pt-24 text-muted-foreground">
       <div className="absolute inset-x-0 top-[-6rem] -z-10 flex justify-center blur-3xl">
         <div className="h-[24rem] w-[60rem] bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 opacity-30" />
       </div>
@@ -60,10 +60,10 @@ export default async function AuthorPage({ params }: AuthorPageProps) {
       <div className="mx-auto flex max-w-4xl flex-col px-6 pb-24 sm:px-8 lg:px-12">
         <main className="flex flex-col gap-12 pt-12">
           {/* Author Profile */}
-          <section className="space-y-8 rounded-3xl border border-white/10 bg-slate-900/60 p-12">
+          <section className="space-y-8 rounded-3xl border border-border/10 bg-muted/60 p-12">
             <div className="flex flex-col items-center gap-6 text-center">
               {author.avatar && (
-                <div className="relative h-32 w-32 overflow-hidden rounded-full border-4 border-white/20 shadow-2xl">
+                <div className="relative h-32 w-32 overflow-hidden rounded-full border-4 border-border/20 shadow-2xl">
                   <Image
                     src={author.avatar}
                     alt={author.name}
@@ -74,12 +74,12 @@ export default async function AuthorPage({ params }: AuthorPageProps) {
                 </div>
               )}
               <div>
-                <h1 className="text-3xl font-bold text-white sm:text-4xl">
+                <h1 className="text-3xl font-bold text-foreground sm:text-4xl">
                   {author.name}
                 </h1>
-                <p className="mt-2 text-lg text-white/70">{author.title}</p>
+                <p className="mt-2 text-lg text-foreground/70">{author.title}</p>
               </div>
-              <p className="max-w-2xl text-base leading-relaxed text-white/80">
+              <p className="max-w-2xl text-base leading-relaxed text-foreground/80">
                 {author.bio}
               </p>
 
@@ -90,7 +90,7 @@ export default async function AuthorPage({ params }: AuthorPageProps) {
                     href={author.github}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="rounded-full border border-white/20 bg-white/5 px-4 py-2 text-sm text-white/80 transition hover:border-cyan-400/50 hover:bg-white/10 hover:text-cyan-300"
+                    className="rounded-full border border-border/20 bg-background/5 px-4 py-2 text-sm text-foreground/80 transition hover:border-cyan-400/50 hover:bg-background/10 hover:text-cyan-300"
                   >
                     GitHub →
                   </a>
@@ -100,7 +100,7 @@ export default async function AuthorPage({ params }: AuthorPageProps) {
                     href={author.twitter}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="rounded-full border border-white/20 bg-white/5 px-4 py-2 text-sm text-white/80 transition hover:border-cyan-400/50 hover:bg-white/10 hover:text-cyan-300"
+                    className="rounded-full border border-border/20 bg-background/5 px-4 py-2 text-sm text-foreground/80 transition hover:border-cyan-400/50 hover:bg-background/10 hover:text-cyan-300"
                   >
                     Twitter →
                   </a>
@@ -110,7 +110,7 @@ export default async function AuthorPage({ params }: AuthorPageProps) {
                     href={author.linkedin}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="rounded-full border border-white/20 bg-white/5 px-4 py-2 text-sm text-white/80 transition hover:border-cyan-400/50 hover:bg-white/10 hover:text-cyan-300"
+                    className="rounded-full border border-border/20 bg-background/5 px-4 py-2 text-sm text-foreground/80 transition hover:border-cyan-400/50 hover:bg-background/10 hover:text-cyan-300"
                   >
                     LinkedIn →
                   </a>
@@ -120,7 +120,7 @@ export default async function AuthorPage({ params }: AuthorPageProps) {
                     href={author.website}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="rounded-full border border-white/20 bg-white/5 px-4 py-2 text-sm text-white/80 transition hover:border-cyan-400/50 hover:bg-white/10 hover:text-cyan-300"
+                    className="rounded-full border border-border/20 bg-background/5 px-4 py-2 text-sm text-foreground/80 transition hover:border-cyan-400/50 hover:bg-background/10 hover:text-cyan-300"
                   >
                     Website →
                   </a>
@@ -132,7 +132,7 @@ export default async function AuthorPage({ params }: AuthorPageProps) {
           {/* Author's Updates */}
           {authorUpdates.length > 0 && (
             <section className="space-y-6">
-              <h2 className="text-2xl font-semibold text-white">
+              <h2 className="text-2xl font-semibold text-foreground">
                 Updates by {author.name}
               </h2>
               <div className="space-y-4">
@@ -140,11 +140,11 @@ export default async function AuthorPage({ params }: AuthorPageProps) {
                   <Link
                     key={update.slug}
                     href={`/updates/${update.slug}`}
-                    className="block rounded-2xl border border-white/10 bg-slate-900/60 p-6 transition hover:border-white/20 hover:bg-slate-900/80"
+                    className="block rounded-2xl border border-border/10 bg-muted/60 p-6 transition hover:border-border/20 hover:bg-muted/80"
                   >
                     <time
                       dateTime={update.metadata.date}
-                      className="text-xs text-white/50"
+                      className="text-xs text-foreground/50"
                     >
                       {new Date(update.metadata.date).toLocaleDateString("en-US", {
                         year: "numeric",
@@ -152,10 +152,10 @@ export default async function AuthorPage({ params }: AuthorPageProps) {
                         day: "numeric",
                       })}
                     </time>
-                    <h3 className="mt-2 text-lg font-semibold text-white">
+                    <h3 className="mt-2 text-lg font-semibold text-foreground">
                       {update.metadata.title}
                     </h3>
-                    <p className="mt-2 text-sm text-white/70">
+                    <p className="mt-2 text-sm text-foreground/70">
                       {update.metadata.description}
                     </p>
                   </Link>
@@ -165,7 +165,7 @@ export default async function AuthorPage({ params }: AuthorPageProps) {
           )}
 
           {/* Back Link */}
-          <div className="border-t border-white/10 pt-8">
+          <div className="border-t border-border/10 pt-8">
             <Link
               href="/authors"
               className="text-sm text-cyan-400 transition hover:text-cyan-300"
diff --git a/src/app/authors/page.tsx b/src/app/authors/page.tsx
index 11df941..704707e 100644
--- a/src/app/authors/page.tsx
+++ b/src/app/authors/page.tsx
@@ -15,7 +15,7 @@ export default function AuthorsPage() {
   const authors = getAllAuthors();
 
   return (
-    <div className="min-h-screen bg-slate-950 pt-24 text-slate-100">
+    <div className="min-h-screen bg-background pt-24 text-muted-foreground">
       <div className="absolute inset-x-0 top-[-6rem] -z-10 flex justify-center blur-3xl">
         <div className="h-[24rem] w-[60rem] bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 opacity-30" />
       </div>
@@ -26,10 +26,10 @@ export default function AuthorsPage() {
           <section className="space-y-8 pt-12">
             <Pill>Meet the Team · Contributors · Leadership</Pill>
             <div>
-              <h1 className="text-5xl font-semibold leading-tight text-white sm:text-6xl">
+              <h1 className="text-5xl font-semibold leading-tight text-foreground sm:text-6xl">
                 Authors
               </h1>
-              <p className="mt-8 max-w-2xl text-lg text-white/70">
+              <p className="mt-8 max-w-2xl text-lg text-foreground/70">
                 Meet the people building and leading the React Foundation.
               </p>
             </div>
@@ -42,11 +42,11 @@ export default function AuthorsPage() {
                 <ScrollReveal key={author.slug} animation="scale" delay={idx * 100}>
                   <Link
                     href={`/authors/${author.slug}`}
-                    className="group block rounded-3xl border border-white/10 bg-slate-900/60 p-8 transition hover:border-white/20 hover:bg-slate-900/80"
+                    className="group block rounded-3xl border border-border/10 bg-muted/60 p-8 transition hover:border-border/20 hover:bg-muted/80"
                   >
                     {author.avatar && (
                       <div className="mb-6 flex justify-center">
-                        <div className="relative h-24 w-24 overflow-hidden rounded-full border-4 border-white/20">
+                        <div className="relative h-24 w-24 overflow-hidden rounded-full border-4 border-border/20">
                           <Image
                             src={author.avatar}
                             alt={author.name}
@@ -57,11 +57,11 @@ export default function AuthorsPage() {
                         </div>
                       </div>
                     )}
-                    <h2 className="text-center text-xl font-semibold text-white transition group-hover:text-cyan-300">
+                    <h2 className="text-center text-xl font-semibold text-foreground transition group-hover:text-cyan-300">
                       {author.name}
                     </h2>
-                    <p className="mt-2 text-center text-sm text-white/60">{author.title}</p>
-                    <p className="mt-4 text-sm leading-relaxed text-white/70">{author.bio}</p>
+                    <p className="mt-2 text-center text-sm text-foreground/60">{author.title}</p>
+                    <p className="mt-4 text-sm leading-relaxed text-foreground/70">{author.bio}</p>
 
                     {/* Social Links */}
                     <div className="mt-6 flex justify-center gap-4">
@@ -70,7 +70,7 @@ export default function AuthorsPage() {
                           href={author.github}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="text-white/60 transition hover:text-cyan-300"
+                          className="text-foreground/60 transition hover:text-cyan-300"
                           onClick={(e) => e.stopPropagation()}
                         >
                           GitHub
@@ -81,7 +81,7 @@ export default function AuthorsPage() {
                           href={author.twitter}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="text-white/60 transition hover:text-cyan-300"
+                          className="text-foreground/60 transition hover:text-cyan-300"
                           onClick={(e) => e.stopPropagation()}
                         >
                           Twitter
diff --git a/src/app/coming-soon/page.tsx b/src/app/coming-soon/page.tsx
index ee3180f..85c5a9f 100644
--- a/src/app/coming-soon/page.tsx
+++ b/src/app/coming-soon/page.tsx
@@ -52,7 +52,7 @@ export default function ComingSoonPage() {
   }, []);
 
   return (
-    <div className={`relative min-h-screen overflow-hidden bg-black transition-opacity duration-1000 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
+    <div className={`dark relative min-h-screen overflow-hidden bg-slate-950 transition-opacity duration-1000 ${isLoaded ? 'opacity-100' : 'opacity-0'}`}>
       {/* Cyberpunk Grid Background */}
       <div className="pointer-events-none absolute inset-0 opacity-20">
         <div
@@ -93,7 +93,7 @@ export default function ComingSoonPage() {
         <div className="w-full max-w-2xl space-y-6 text-center">
           {/* Logo/Icon Area with 3D React Logo */}
           <div className="relative mx-auto h-56 w-56">
-            <div className="absolute inset-0 animate-pulse rounded-full bg-cyan-500/20 blur-3xl" />
+            <div className="absolute inset-0 animate-pulse rounded-full bg-primary/20 blur-3xl" />
             <div className="relative h-full w-full">
               <ReactLogo3D scale={0.5} />
             </div>
@@ -123,7 +123,7 @@ export default function ComingSoonPage() {
 
           {/* Glitch Text Effect */}
           <div className="py-2">
-            <div className="inline-block border border-cyan-500/50 bg-black/50 px-6 py-3 backdrop-blur-sm">
+            <div className="inline-block border border-primary/50 bg-slate-900/50 px-6 py-3 backdrop-blur-sm">
               <p className="glitch-text font-mono text-sm uppercase tracking-wider text-pink-400">
                 [ System Initializing... ]
               </p>
@@ -134,13 +134,13 @@ export default function ComingSoonPage() {
           <div className="space-y-3">
             {!isAuthenticated && (
               <div className="space-y-4">
-                <p className="text-sm text-white/60">
+                <p className="text-sm text-slate-400">
                   Sign in with GitHub to request early access
                 </p>
                 {/* GitHub Sign In */}
                 <button
                   onClick={() => signIn('github', { callbackUrl: '/' })}
-                  className="group relative w-full cursor-pointer overflow-hidden rounded-lg border-2 border-cyan-400 bg-black/80 px-8 py-4 font-bold uppercase tracking-wider text-cyan-400 shadow-[0_0_20px_rgba(0,255,255,0.3)] transition hover:bg-cyan-400/10 hover:shadow-[0_0_30px_rgba(0,255,255,0.5)]"
+                  className="group relative w-full cursor-pointer overflow-hidden rounded-lg border-2 border-cyan-400 bg-slate-900/80 px-8 py-4 font-bold uppercase tracking-wider text-cyan-400 shadow-[0_0_20px_rgba(0,255,255,0.3)] transition hover:bg-primary/50/10 hover:shadow-[0_0_30px_rgba(0,255,255,0.5)]"
                 >
                   <div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-400/10 to-transparent opacity-0 transition group-hover:opacity-100" />
                   <div className="relative flex items-center justify-center gap-3">
@@ -153,7 +153,7 @@ export default function ComingSoonPage() {
 
             {isAuthenticated && (
               <div className="space-y-4">
-                <div className="rounded-lg border border-pink-500/50 bg-pink-500/10 p-6 backdrop-blur-sm">
+                <div className="rounded-lg border border-pink-500/50 bg-accent/10 p-6 backdrop-blur-sm">
                   <p className="font-semibold text-pink-400">Access Restricted</p>
                   <p className="mt-2 text-sm text-pink-100/80">
                     You&apos;re signed in as <span className="font-mono text-cyan-400">{userEmail}</span> but
@@ -162,7 +162,7 @@ export default function ComingSoonPage() {
                 </div>
                 <button
                   onClick={() => setShowRequestForm(true)}
-                  className="w-full rounded-lg border-2 border-pink-400 bg-black/80 px-6 py-3 font-bold uppercase tracking-wider text-pink-400 shadow-[0_0_20px_rgba(236,72,153,0.3)] transition hover:bg-pink-400/10"
+                  className="w-full rounded-lg border-2 border-pink-400 bg-slate-900/80 px-6 py-3 font-bold uppercase tracking-wider text-pink-400 shadow-[0_0_20px_rgba(236,72,153,0.3)] transition hover:bg-accent/50/10"
                 >
                   Request Access
                 </button>
@@ -171,7 +171,7 @@ export default function ComingSoonPage() {
 
             {/* Request Access Form */}
             {showRequestForm && isAuthenticated && userEmail && (
-              <div className="rounded-xl border border-cyan-500/50 bg-black/90 p-6 backdrop-blur-sm">
+              <div className="rounded-xl border border-primary/50 bg-slate-900/90 p-6 backdrop-blur-sm">
                 {!submitted ? (
                   <form onSubmit={handleRequestAccess} className="space-y-4">
                     <div>
@@ -183,9 +183,9 @@ export default function ComingSoonPage() {
                         required
                         value={userEmail}
                         disabled
-                        className="w-full rounded-lg border border-cyan-500/50 bg-black/30 px-4 py-3 font-mono text-cyan-100 opacity-75"
+                        className="w-full rounded-lg border border-primary/50 bg-slate-900/30 px-4 py-3 font-mono text-cyan-100 opacity-75"
                       />
-                      <p className="mt-1 text-xs text-white/50">
+                      <p className="mt-1 text-xs text-slate-500">
                         Using your authenticated GitHub email
                       </p>
                     </div>
@@ -198,14 +198,14 @@ export default function ComingSoonPage() {
                         value={message}
                         onChange={(e) => setMessage(e.target.value)}
                         rows={4}
-                        className="w-full rounded-lg border border-cyan-500/50 bg-black/50 px-4 py-3 font-mono text-cyan-100 placeholder-cyan-500/30 outline-none focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/50"
+                        className="w-full rounded-lg border border-primary/50 bg-slate-900/50 px-4 py-3 font-mono text-cyan-100 placeholder-cyan-500/30 outline-none focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/50"
                         placeholder="Tell us about your involvement in the React ecosystem..."
                       />
                     </div>
                     <button
                       type="submit"
                       disabled={isSubmitting}
-                      className="w-full cursor-pointer rounded-lg border-2 border-cyan-400 bg-cyan-500/10 px-6 py-3 font-bold uppercase tracking-wider text-cyan-400 shadow-[0_0_20px_rgba(0,255,255,0.3)] transition hover:bg-cyan-400/20 hover:shadow-[0_0_30px_rgba(0,255,255,0.5)] disabled:opacity-50"
+                      className="w-full cursor-pointer rounded-lg border-2 border-cyan-400 bg-primary/10 px-6 py-3 font-bold uppercase tracking-wider text-cyan-400 shadow-[0_0_20px_rgba(0,255,255,0.3)] transition hover:bg-primary/50/20 hover:shadow-[0_0_30px_rgba(0,255,255,0.5)] disabled:opacity-50"
                     >
                       {isSubmitting ? 'Sending...' : 'Request Access'}
                     </button>
@@ -234,7 +234,7 @@ export default function ComingSoonPage() {
 
       {/* Fixed Footer */}
       <div className="fixed bottom-6 left-0 right-0 z-20 text-center">
-        <p className="font-mono text-xs uppercase tracking-widest text-cyan-500/50">
+        <p className="font-mono text-xs uppercase tracking-widest text-primary/50">
           React Foundation · 2025
         </p>
       </div>
@@ -299,15 +299,15 @@ export default function ComingSoonPage() {
 
 function StatusDot({ label, status }: { label: string; status: 'online' | 'pending' | 'offline' }) {
   const colors = {
-    online: 'bg-green-400 shadow-[0_0_10px_rgba(34,197,94,0.8)]',
-    pending: 'bg-yellow-400 shadow-[0_0_10px_rgba(250,204,21,0.8)] animate-pulse',
-    offline: 'bg-red-400 shadow-[0_0_10px_rgba(239,68,68,0.8)]',
+    online: 'bg-success/50 shadow-[0_0_10px_rgba(34,197,94,0.8)]',
+    pending: 'bg-warning/50 shadow-[0_0_10px_rgba(250,204,21,0.8)] animate-pulse',
+    offline: 'bg-destructive/50 shadow-[0_0_10px_rgba(239,68,68,0.8)]',
   };
 
   return (
     <div className="flex items-center gap-2">
       <div className={`h-2 w-2 rounded-full ${colors[status]}`} />
-      <span className="font-mono text-xs uppercase tracking-wider text-cyan-500/70">
+      <span className="font-mono text-xs uppercase tracking-wider text-primary/70">
         {label}
       </span>
     </div>
diff --git a/src/app/error.tsx b/src/app/error.tsx
index 7575864..22a73ce 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -33,19 +33,19 @@ export default function Error({
       <div className="fixed z-10 flex items-center justify-center px-6 text-center" style={{ bottom: '6rem', left: '0', right: '0' }}>
         <div className="max-w-2xl space-y-8">
           {/* Error message */}
-          <h1 className="text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
+          <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
             Something tangled the{' '}
             <span className="bg-gradient-to-r from-red-400 via-orange-400 to-pink-400 bg-clip-text text-transparent">
               React Fiber
             </span>
           </h1>
 
-          <p className="text-lg text-white/70">
+          <p className="text-lg text-foreground/70">
             Don&apos;t worry, it happens to the best of us. Let&apos;s get you back on track.
           </p>
 
           {process.env.NODE_ENV === 'development' && (
-            <details className="rounded-lg border border-red-500/30 bg-red-500/10 p-4 text-left">
+            <details className="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-left">
               <summary className="cursor-pointer font-mono text-sm text-red-300">
                 Error Details (Dev Only)
               </summary>
@@ -60,13 +60,13 @@ export default function Error({
           <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
             <button
               onClick={reset}
-              className="min-w-[200px] rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 px-8 py-4 font-bold text-white shadow-lg transition hover:from-cyan-400 hover:to-blue-400"
+              className="min-w-[200px] rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 px-8 py-4 font-bold text-foreground shadow-lg transition hover:from-cyan-400 hover:to-blue-400"
             >
               Try Again
             </button>
             <Link
               href="/"
-              className="min-w-[200px] rounded-lg border-2 border-white/20 bg-white/5 px-8 py-4 font-bold text-white backdrop-blur-sm transition hover:bg-white/10"
+              className="min-w-[200px] rounded-lg border-2 border-border/20 bg-background/5 px-8 py-4 font-bold text-foreground backdrop-blur-sm transition hover:bg-background/10"
             >
               Return Home
             </Link>
@@ -79,7 +79,7 @@ export default function Error({
 
 function BackgroundGlow() {
   return (
-    <div aria-hidden className="pointer-events-none fixed inset-0 z-0 bg-slate-900">
+    <div aria-hidden className="pointer-events-none fixed inset-0 z-0 bg-muted">
       {/* Subtle background gradients */}
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(239,68,68,0.08),_transparent_55%)]" />
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_35%,_rgba(251,146,60,0.15),_transparent_50%)]" />
diff --git a/src/app/globals.css b/src/app/globals.css
index 371e90e..68c96fb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,48 +4,192 @@
 html {
   scroll-behavior: smooth;
   overflow-x: hidden;
+  color-scheme: light dark;
 }
 
+/* Define CSS variables for theming */
 :root {
-  --background: #0f172a;
-  --foreground: #f1f5f9;
-  --color-ratings-gold: #f6c65b;
+  /* Light theme colors - adjusted for better contrast */
+  --background: 0 0% 100%;          /* #ffffff white */
+  --foreground: 222 47% 11%;        /* #0f172a slate-900 - dark text */
+  --card: 0 0% 100%;                /* #ffffff */
+  --card-foreground: 222 47% 11%;   /* #0f172a */
+  --popover: 0 0% 100%;             /* #ffffff */
+  --popover-foreground: 222 47% 11%;/* #0f172a */
+  --primary: 199 89% 48%;           /* #0ea5e9 sky-500 */
+  --primary-foreground: 0 0% 100%;  /* #ffffff */
+  --secondary: 214 32% 95%;         /* #f1f5f9 slate-100 */
+  --secondary-foreground: 222 47% 11%;
+  --muted: 214 32% 95%;             /* #f1f5f9 slate-100 */
+  --muted-foreground: 215 20% 35%;  /* Darker for readability - was 47% */
+  --accent: 214 32% 95%;            /* #f1f5f9 */
+  --accent-foreground: 222 47% 11%;
+  --destructive: 0 84% 60%;         /* #ef4444 red-500 */
+  --destructive-foreground: 0 0% 100%;
+  --border: 214 32% 91%;            /* #e2e8f0 slate-200 */
+  --input: 214 32% 91%;             /* #e2e8f0 */
+  --ring: 199 89% 48%;              /* #0ea5e9 */
+
+  /* Contributor icon gradients */
+  --gradient-icon-code: linear-gradient(135deg, #34d399 0%, #06b6d4 100%);
+  --gradient-icon-donate: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
+  --gradient-icon-sponsor: linear-gradient(135deg, #fde047 0%, #f97316 100%);
+  --gradient-icon-member: linear-gradient(135deg, #fb923c 0%, #ef4444 100%);
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+.dark {
+  /* Dark theme colors - slate-900 base */
+  --background: 222 47% 11%;        /* #0f172a slate-900 */
+  --foreground: 0 0% 100%;          /* #ffffff pure white - brighter */
+  --card: 217 33% 17%;              /* #1e293b slate-800 */
+  --card-foreground: 210 40% 98%;
+  --popover: 217 33% 17%;           /* #1e293b */
+  --popover-foreground: 210 40% 98%;
+  --primary: 199 89% 48%;           /* #0ea5e9 sky-500 */
+  --primary-foreground: 0 0% 100%;
+  --secondary: 215 25% 27%;         /* #334155 slate-700 */
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217 33% 17%;             /* #1e293b slate-800 */
+  --muted-foreground: 215 20% 65%;  /* #94a3b8 slate-400 */
+  --accent: 215 25% 27%;            /* #334155 slate-700 */
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 84% 60%;         /* #ef4444 */
+  --destructive-foreground: 0 0% 100%;
+  --border: 215 25% 27%;            /* #334155 slate-700 - subtle border */
+  --input: 215 25% 27%;
+  --ring: 199 89% 48%;
+
+  /* Contributor icon gradients (brighter for dark mode) */
+  --gradient-icon-code: linear-gradient(135deg, #34d399 0%, #22d3ee 100%);
+  --gradient-icon-donate: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
+  --gradient-icon-sponsor: linear-gradient(135deg, #fde047 0%, #fb923c 100%);
+  --gradient-icon-member: linear-gradient(135deg, #fb923c 0%, #f87171 100%);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+/* Tailwind theme configuration */
+@theme {
+  /* Semantic colors using HSL space for opacity support */
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
 }
 
 body {
   min-height: 100vh;
-  background-color: var(--background);
-  color: var(--foreground);
-  font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI",
+  background:
+    linear-gradient(
+      135deg,
+      hsl(var(--background)) 0%,
+      hsl(var(--primary) / 0.03) 50%,
+      hsl(var(--background)) 100%
+    );
+  background-size: 200% 200%;
+  animation: subtleGradientShift 20s ease-in-out infinite;
+  color: hsl(var(--foreground));
+  font-family: var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   overflow-x: hidden;
+  transition: color 0.3s ease-in-out;
+}
+
+button {
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body {
+    animation: none;
+    background: hsl(var(--background));
+  }
 }
 
 *, *::before, *::after {
   box-sizing: border-box;
 }
 
+/* Apply transitions only to elements that need them, not globally */
+:where(button, a, input, select, textarea) {
+  transition: background-color 0.3s ease-in-out,
+              color 0.3s ease-in-out,
+              border-color 0.3s ease-in-out,
+              box-shadow 0.3s ease-in-out;
+}
+
+/* Prevent transitions on page load */
+.no-transition,
+.no-transition * {
+  transition: none !important;
+}
+
+/* Base link styles */
 a {
-  color: inherit;
   text-decoration: none;
 }
 
+/* Only inherit color for non-button links */
+a:not(.inline-flex) {
+  color: inherit;
+}
+
+/* Force button links to respect their own color classes */
+a.inline-flex {
+  color: currentColor;
+}
+
+/* Semantic Gradient Backgrounds */
+.bg-gradient-accent {
+  background: linear-gradient(135deg,
+    hsl(var(--primary) / 0.1) 0%,
+    hsl(var(--accent) / 0.15) 50%,
+    hsl(var(--secondary) / 0.1) 100%);
+}
+
+.bg-gradient-accent-secondary {
+  background: linear-gradient(135deg,
+    hsl(var(--primary) / 0.15) 0%,
+    hsl(var(--ring) / 0.2) 50%,
+    hsl(var(--accent) / 0.15) 100%);
+}
+
+.bg-gradient-accent-tertiary {
+  background: linear-gradient(135deg,
+    hsl(var(--secondary) / 0.1) 0%,
+    hsl(var(--muted) / 0.2) 50%,
+    hsl(var(--accent) / 0.1) 100%);
+}
+
+.bg-gradient-vibrant {
+  background: linear-gradient(135deg,
+    hsl(var(--primary) / 0.2) 0%,
+    hsl(var(--ring) / 0.25) 50%,
+    hsl(var(--accent) / 0.2) 100%);
+}
+
+.bg-gradient-subtle {
+  background: linear-gradient(135deg,
+    hsl(var(--muted) / 0.3) 0%,
+    hsl(var(--accent) / 0.4) 50%,
+    hsl(var(--secondary) / 0.3) 100%);
+}
+
 @keyframes mascot-spin {
   0% {
     transform: rotate(0deg);
@@ -77,3 +221,26 @@ a {
     transform: translate(-50%, -50%) scale(1.05);
   }
 }
+
+@keyframes subtleGradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes slide-in-from-right-full {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
diff --git a/src/app/impact/page.tsx b/src/app/impact/page.tsx
index 348c6f8..3e621d9 100644
--- a/src/app/impact/page.tsx
+++ b/src/app/impact/page.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function ImpactPage() {
   return (
-    <div className="min-h-screen bg-slate-950 pt-24 text-slate-100">
+    <div className="min-h-screen bg-background pt-24 text-muted-foreground">
       <div className="absolute inset-x-0 top-[-6rem] -z-10 flex justify-center blur-3xl">
         <div className="h-[24rem] w-[60rem] bg-gradient-to-r from-emerald-400 via-cyan-500 to-blue-600 opacity-30" />
       </div>
@@ -23,10 +23,10 @@ export default function ImpactPage() {
           <section className="space-y-8 pt-12">
             <Pill>100% Transparent · Quarterly Reports · Real Impact</Pill>
             <div>
-              <h1 className="text-5xl font-semibold leading-tight text-white sm:text-6xl">
+              <h1 className="text-5xl font-semibold leading-tight text-foreground sm:text-6xl">
                 Our Impact
               </h1>
-              <p className="mt-8 max-w-2xl text-lg text-white/70">
+              <p className="mt-8 max-w-2xl text-lg text-foreground/70">
                 Full transparency on how your support funds the React ecosystem. Every
                 contribution is tracked and reported publicly.
               </p>
@@ -35,11 +35,11 @@ export default function ImpactPage() {
 
           {/* Coming Soon */}
           <ScrollReveal animation="fade-up">
-            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-white/10 bg-gradient-to-br from-emerald-500/10 via-cyan-500/10 to-blue-500/10 p-12">
+            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-border/10 bg-gradient-to-br from-emerald-500/10 via-cyan-500/10 to-blue-500/10 p-12">
               <div className="text-center">
                 <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-400 to-cyan-500">
                   <svg
-                    className="h-10 w-10 text-white"
+                    className="h-10 w-10 text-foreground"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
@@ -52,10 +52,10 @@ export default function ImpactPage() {
                     />
                   </svg>
                 </div>
-                <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+                <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
                   First Report Coming Soon
                 </h2>
-                <p className="mx-auto mt-4 max-w-2xl text-base text-white/70">
+                <p className="mx-auto mt-4 max-w-2xl text-base text-foreground/70">
                   Our inaugural quarterly impact report will be published once the store
                   launches. Each report will provide complete transparency into fund
                   distribution.
@@ -63,45 +63,45 @@ export default function ImpactPage() {
               </div>
 
               <div className="grid gap-4 pt-8 sm:grid-cols-2 lg:grid-cols-3">
-                <div className="space-y-2 rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-center">
+                <div className="space-y-2 rounded-2xl border border-border/10 bg-background/[0.03] p-6 text-center">
                   <div className="text-2xl">💰</div>
-                  <h3 className="font-semibold text-white">Revenue Details</h3>
-                  <p className="text-sm text-white/60">
+                  <h3 className="font-semibold text-foreground">Revenue Details</h3>
+                  <p className="text-sm text-foreground/60">
                     Total revenue generated from all sources
                   </p>
                 </div>
-                <div className="space-y-2 rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-center">
+                <div className="space-y-2 rounded-2xl border border-border/10 bg-background/[0.03] p-6 text-center">
                   <div className="text-2xl">👥</div>
-                  <h3 className="font-semibold text-white">Maintainer Funding</h3>
-                  <p className="text-sm text-white/60">
+                  <h3 className="font-semibold text-foreground">Maintainer Funding</h3>
+                  <p className="text-sm text-foreground/60">
                     Breakdown of funding by library and maintainer
                   </p>
                 </div>
-                <div className="space-y-2 rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-center">
+                <div className="space-y-2 rounded-2xl border border-border/10 bg-background/[0.03] p-6 text-center">
                   <div className="text-2xl">📚</div>
-                  <h3 className="font-semibold text-white">Education Initiatives</h3>
-                  <p className="text-sm text-white/60">
+                  <h3 className="font-semibold text-foreground">Education Initiatives</h3>
+                  <p className="text-sm text-foreground/60">
                     Tutorials, docs, and learning resources supported
                   </p>
                 </div>
-                <div className="space-y-2 rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-center">
+                <div className="space-y-2 rounded-2xl border border-border/10 bg-background/[0.03] p-6 text-center">
                   <div className="text-2xl">🌍</div>
-                  <h3 className="font-semibold text-white">Accessibility</h3>
-                  <p className="text-sm text-white/60">
+                  <h3 className="font-semibold text-foreground">Accessibility</h3>
+                  <p className="text-sm text-foreground/60">
                     Global accessibility improvements funded
                   </p>
                 </div>
-                <div className="space-y-2 rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-center">
+                <div className="space-y-2 rounded-2xl border border-border/10 bg-background/[0.03] p-6 text-center">
                   <div className="text-2xl">📊</div>
-                  <h3 className="font-semibold text-white">Impact Metrics</h3>
-                  <p className="text-sm text-white/60">
+                  <h3 className="font-semibold text-foreground">Impact Metrics</h3>
+                  <p className="text-sm text-foreground/60">
                     Downloads, usage, and ecosystem growth data
                   </p>
                 </div>
-                <div className="space-y-2 rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-center">
+                <div className="space-y-2 rounded-2xl border border-border/10 bg-background/[0.03] p-6 text-center">
                   <div className="text-2xl">💬</div>
-                  <h3 className="font-semibold text-white">Community Feedback</h3>
-                  <p className="text-sm text-white/60">
+                  <h3 className="font-semibold text-foreground">Community Feedback</h3>
+                  <p className="text-sm text-foreground/60">
                     Testimonials from maintainers and contributors
                   </p>
                 </div>
@@ -118,11 +118,11 @@ export default function ImpactPage() {
 
           {/* How Funds are Distributed */}
           <ScrollReveal animation="fade-up">
-            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-white/10 bg-slate-900/60 p-12">
-              <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-border/10 bg-muted/60 p-12">
+              <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
                 How Funds are Distributed
               </h2>
-              <p className="max-w-3xl text-lg text-white/70">
+              <p className="max-w-3xl text-lg text-foreground/70">
                 We use a transparent, metrics-based approach to ensure fair distribution
                 of funds to maintainers across the React ecosystem.
               </p>
@@ -130,12 +130,12 @@ export default function ImpactPage() {
               <div className="grid gap-6 pt-6 lg:grid-cols-3">
                 <div className="space-y-4">
                   <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-400 to-cyan-500">
-                    <span className="text-2xl font-bold text-white">1</span>
+                    <span className="text-2xl font-bold text-foreground">1</span>
                   </div>
-                  <h3 className="text-xl font-semibold text-white">
+                  <h3 className="text-xl font-semibold text-foreground">
                     Contribution Tracking
                   </h3>
-                  <p className="text-sm leading-relaxed text-white/70">
+                  <p className="text-sm leading-relaxed text-foreground/70">
                     We track pull requests, issues, and commits across all 54 supported
                     libraries using GitHub&apos;s GraphQL API.
                   </p>
@@ -143,21 +143,21 @@ export default function ImpactPage() {
 
                 <div className="space-y-4">
                   <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-sky-400 to-indigo-500">
-                    <span className="text-2xl font-bold text-white">2</span>
+                    <span className="text-2xl font-bold text-foreground">2</span>
                   </div>
-                  <h3 className="text-xl font-semibold text-white">Score Calculation</h3>
-                  <p className="text-sm leading-relaxed text-white/70">
+                  <h3 className="text-xl font-semibold text-foreground">Score Calculation</h3>
+                  <p className="text-sm leading-relaxed text-foreground/70">
                     Contributions are weighted (PRs × 8 + Issues × 3 + Commits × 1) to
                     calculate fair distribution ratios.
                   </p>
                 </div>
 
                 <div className="space-y-4">
-                  <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-purple-400 to-pink-500">
-                    <span className="text-2xl font-bold text-white">3</span>
+                  <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-300 to-orange-500">
+                    <span className="text-2xl font-bold text-foreground">3</span>
                   </div>
-                  <h3 className="text-xl font-semibold text-white">Fund Distribution</h3>
-                  <p className="text-sm leading-relaxed text-white/70">
+                  <h3 className="text-xl font-semibold text-foreground">Fund Distribution</h3>
+                  <p className="text-sm leading-relaxed text-foreground/70">
                     100% of profits are distributed quarterly based on contribution scores
                     and library impact metrics.
                   </p>
@@ -168,11 +168,11 @@ export default function ImpactPage() {
 
           {/* CTA */}
           <ScrollReveal animation="scale">
-            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-white/10 bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10 p-12 text-center">
-              <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+            <section className="scroll-mt-32 space-y-8 rounded-3xl border border-border/10 bg-gradient-to-br from-cyan-500/10 via-yellow-400/10 to-orange-500/10 p-12 text-center">
+              <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
                 Support the Ecosystem
               </h2>
-              <p className="mx-auto max-w-2xl text-lg text-white/70">
+              <p className="mx-auto max-w-2xl text-lg text-foreground/70">
                 Every purchase directly supports React ecosystem maintainers. Shop the
                 store to make an impact today.
               </p>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 40be74f..74231ee 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
 import { AuthProvider } from "@/components/providers/auth-provider";
+import { ThemeProvider } from "@/components/providers/theme-provider";
 import { Header } from "@/components/layout/header";
 import { getServerAuthSession } from "@/lib/auth";
 
@@ -72,10 +73,12 @@ export default async function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <AuthProvider session={session}>
-          <Header />
-          {children}
-        </AuthProvider>
+        <ThemeProvider defaultTheme="system">
+          <AuthProvider session={session}>
+            <Header />
+            {children}
+          </AuthProvider>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/src/app/libraries/page.tsx b/src/app/libraries/page.tsx
index 3921cf9..83a48ec 100644
--- a/src/app/libraries/page.tsx
+++ b/src/app/libraries/page.tsx
@@ -37,15 +37,15 @@ export default function LibrariesPage() {
           <div className="mb-4 flex items-center gap-2">
             <Link
               href="/scoring"
-              className="rounded-lg bg-white/5 px-3 py-1.5 text-sm text-white/70 transition hover:bg-white/10 hover:text-white"
+              className="rounded-lg bg-background/5 px-3 py-1.5 text-sm text-foreground/70 transition hover:bg-background/10 hover:text-foreground"
             >
               ← How Scoring Works
             </Link>
           </div>
-          <h1 className="text-4xl font-bold text-white sm:text-5xl">
+          <h1 className="text-4xl font-bold text-foreground sm:text-5xl">
             Library Impact Dashboard
           </h1>
-          <p className="mt-4 text-xl text-white/70">
+          <p className="mt-4 text-xl text-foreground/70">
             React ecosystem libraries ranked by their impact score
           </p>
         </div>
@@ -76,18 +76,18 @@ export default function LibrariesPage() {
         </div>
 
         {/* Component Stats */}
-        <div className="rounded-2xl border border-white/10 bg-slate-900/60 p-6">
-          <h2 className="mb-4 text-lg font-semibold text-white">
+        <div className="rounded-2xl border border-border/10 bg-muted/60 p-6">
+          <h2 className="mb-4 text-lg font-semibold text-foreground">
             Component Score Averages
           </h2>
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
             {componentStats.map((stat) => (
               <div key={stat.component}>
-                <div className="mb-2 text-sm text-white/60">{stat.label}</div>
+                <div className="mb-2 text-sm text-foreground/60">{stat.label}</div>
                 <div className="text-2xl font-bold text-cyan-400">
                   {(stat.avg * 100).toFixed(1)}%
                 </div>
-                <div className="mt-1 text-xs text-white/50">
+                <div className="mt-1 text-xs text-foreground/50">
                   Range: {(stat.min * 100).toFixed(0)}% - {(stat.max * 100).toFixed(0)}%
                 </div>
               </div>
@@ -97,9 +97,9 @@ export default function LibrariesPage() {
 
         {/* Loading State */}
         {isLoading && (
-          <div className="rounded-xl border border-white/10 bg-white/[0.03] p-12 text-center">
-            <div className="mx-auto h-8 w-8 animate-spin rounded-full border-4 border-cyan-500 border-t-transparent"></div>
-            <p className="mt-4 text-white/60">Loading RIS data...</p>
+          <div className="rounded-xl border border-border/10 bg-background/[0.03] p-12 text-center">
+            <div className="mx-auto h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
+            <p className="mt-4 text-foreground/60">Loading RIS data...</p>
           </div>
         )}
 
@@ -107,33 +107,33 @@ export default function LibrariesPage() {
         {!isLoading && (
           <div className={`rounded-xl border p-6 ${
             useSampleData
-              ? 'border-yellow-500/30 bg-yellow-500/10'
-              : 'border-green-500/30 bg-green-500/10'
+              ? 'border-warning/30 bg-warning/10'
+              : 'border-success/30 bg-success/10'
           }`}>
             <div className="flex items-start gap-3">
               <span className="text-2xl">{useSampleData ? '⚠️' : '✓'}</span>
-              <div className="space-y-2 text-sm text-white/80">
+              <div className="space-y-2 text-sm text-foreground/80">
                 {useSampleData ? (
                   <>
-                    <p className="font-semibold text-white">Using Sample Data</p>
+                    <p className="font-semibold text-foreground">Using Sample Data</p>
                     <p>
                       Real RIS data not yet available. This dashboard shows sample data demonstrating
                       how the React Impact Score (RIS) system evaluates libraries across 5 key components.
                     </p>
                     <p>
                       To use real data, configure your GitHub PAT and Redis URL, then run data collection
-                      via <code className="rounded bg-white/10 px-1">POST /api/ris/collect</code>
+                      via <code className="rounded bg-background/10 px-1">POST /api/ris/collect</code>
                     </p>
                   </>
                 ) : (
                   <>
-                    <p className="font-semibold text-white">Using Real Data</p>
+                    <p className="font-semibold text-foreground">Using Real Data</p>
                     <p>
                       This dashboard displays actual metrics collected from GitHub, NPM, CDN providers,
                       and OSSF Scorecard for {allocation.libraries.length} React ecosystem libraries.
                     </p>
                     {lastUpdated && (
-                      <p className="text-xs text-white/60">
+                      <p className="text-xs text-foreground/60">
                         Last updated: {new Date(lastUpdated).toLocaleString()}
                       </p>
                     )}
@@ -150,12 +150,12 @@ export default function LibrariesPage() {
         )}
 
         {/* Library Rankings */}
-        <div className="rounded-2xl border border-white/10 bg-slate-900/60 p-6">
+        <div className="rounded-2xl border border-border/10 bg-muted/60 p-6">
           <div className="mb-6 flex items-center justify-between">
-            <h2 className="text-2xl font-bold text-white">
+            <h2 className="text-2xl font-bold text-foreground">
               Library Rankings
             </h2>
-            <div className="text-sm text-white/60">
+            <div className="text-sm text-foreground/60">
               {totalLibraries} libraries · Total pool: ${allocation.total_pool_usd.toLocaleString()}
             </div>
           </div>
@@ -167,12 +167,12 @@ export default function LibrariesPage() {
         </div>
 
         {/* Methodology Note */}
-        <div className="rounded-xl border border-white/10 bg-white/[0.03] p-6 text-center">
-          <p className="text-sm text-white/60">
+        <div className="rounded-xl border border-border/10 bg-background/[0.03] p-6 text-center">
+          <p className="text-sm text-foreground/60">
             Scores are calculated using winsorized normalization to reduce outlier impact,
             with EMA smoothing for quarter-to-quarter stability.
           </p>
-          <p className="mt-2 text-sm text-white/60">
+          <p className="mt-2 text-sm text-foreground/60">
             All data is transparent and reproducible. See the{' '}
             <Link href="/scoring" className="text-cyan-400 hover:text-cyan-300">
               scoring documentation
@@ -200,19 +200,19 @@ function StatCard({
     <div
       className={`rounded-xl border p-6 ${
         highlight
-          ? 'border-cyan-500/30 bg-cyan-500/10'
-          : 'border-white/10 bg-white/[0.03]'
+          ? 'border-primary/30 bg-primary/10'
+          : 'border-border/10 bg-background/[0.03]'
       }`}
     >
-      <div className="text-sm text-white/60">{label}</div>
+      <div className="text-sm text-foreground/60">{label}</div>
       <div
         className={`mt-2 text-3xl font-bold ${
-          highlight ? 'text-cyan-400' : 'text-white'
+          highlight ? 'text-cyan-400' : 'text-foreground'
         }`}
       >
         {value}
       </div>
-      <div className="mt-1 text-xs text-white/50">{subtext}</div>
+      <div className="mt-1 text-xs text-foreground/50">{subtext}</div>
     </div>
   );
 }
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 5a8196e..f4679a7 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -15,9 +15,9 @@ export default function NotFound() {
       <div className="fixed z-10 flex items-center justify-center px-6 text-center" style={{ bottom: '6rem', left: '0', right: '0' }}>
         <div className="max-w-2xl space-y-8">
           {/* Main message */}
-          <h1 className="text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
+          <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
             This page drifted off the{" "}
-            <span className="bg-gradient-to-r from-sky-400 via-indigo-400 to-purple-400 bg-clip-text text-transparent">
+            <span className="bg-gradient-to-r from-cyan-400 via-yellow-300 to-orange-400 bg-clip-text text-transparent">
               React Fiber
             </span>
           </h1>
@@ -49,7 +49,7 @@ export default function NotFound() {
 
 function BackgroundGlow() {
   return (
-    <div aria-hidden className="pointer-events-none fixed inset-0 z-0 bg-slate-900">
+    <div aria-hidden className="pointer-events-none fixed inset-0 z-0 bg-muted">
       {/* Static subtle background gradients */}
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.08),_transparent_55%)]" />
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_35%,_rgba(76,29,149,0.15),_transparent_50%)]" />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index bce16bc..5e98108 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,7 +15,7 @@ export const metadata: Metadata = {
 
 export default function FoundationHome() {
   return (
-    <div className="bg-slate-950 pt-24 text-slate-100">
+    <div className="bg-background pt-24 text-muted-foreground">
       {/* Background gradient */}
       <div className="absolute inset-x-0 top-[-6rem] -z-10 flex justify-center overflow-hidden blur-3xl">
         <div className="h-[24rem] w-full max-w-[60rem] bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 opacity-30" />
@@ -27,7 +27,7 @@ export default function FoundationHome() {
           <MissionStatement />
           <ThreePillars />
           <ByTheNumbers />
-          <ScrollReveal animation="scale">
+          <ScrollReveal animation="fade-up" delay={100}>
             <BecomeContributor />
           </ScrollReveal>
           <JoinMovementCTA />
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
index f7e40c0..712911d 100644
--- a/src/app/privacy/page.tsx
+++ b/src/app/privacy/page.tsx
@@ -9,53 +9,53 @@ export const metadata: Metadata = {
 export default function PrivacyPage() {
   return (
     <div className="mx-auto max-w-4xl px-6 py-12 sm:px-8 lg:px-12">
-      <h1 className="text-4xl font-bold text-white">Privacy Policy</h1>
-      <p className="mt-2 text-base text-white/70">
+      <h1 className="text-4xl font-bold text-foreground">Privacy Policy</h1>
+      <p className="mt-2 text-base text-foreground/70">
         Last updated: October 21, 2025
       </p>
 
       <div className="prose prose-invert mt-8 max-w-none">
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">1. Introduction</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">1. Introduction</h2>
+          <p className="mt-4 text-foreground/80">
             React Foundation ("we", "our", or "us") is committed to protecting your privacy. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you visit our website and use our services.
           </p>
-          <p className="mt-4 text-white/80">
+          <p className="mt-4 text-foreground/80">
             Please read this Privacy Policy carefully. If you do not agree with the terms of this Privacy Policy, please do not access the site.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">2. Information We Collect</h2>
+          <h2 className="text-2xl font-semibold text-foreground">2. Information We Collect</h2>
 
-          <h3 className="mt-6 text-xl font-semibold text-white">2.1 Personal Information</h3>
-          <p className="mt-4 text-white/80">
+          <h3 className="mt-6 text-xl font-semibold text-foreground">2.1 Personal Information</h3>
+          <p className="mt-4 text-foreground/80">
             When you authenticate using GitHub or GitLab OAuth, we collect:
           </p>
-          <ul className="mt-4 list-disc space-y-2 pl-6 text-white/80">
+          <ul className="mt-4 list-disc space-y-2 pl-6 text-foreground/80">
             <li>Your name</li>
             <li>Your email address</li>
             <li>Your GitHub or GitLab username</li>
             <li>Your public profile information from the respective platform</li>
           </ul>
 
-          <h3 className="mt-6 text-xl font-semibold text-white">2.2 Local Storage</h3>
-          <p className="mt-4 text-white/80">
+          <h3 className="mt-6 text-xl font-semibold text-foreground">2.2 Local Storage</h3>
+          <p className="mt-4 text-foreground/80">
             We use browser local storage to save your contributor username preference for convenience. This data is stored only on your device and is not transmitted to our servers.
           </p>
 
-          <h3 className="mt-6 text-xl font-semibold text-white">2.3 Session Data</h3>
-          <p className="mt-4 text-white/80">
+          <h3 className="mt-6 text-xl font-semibold text-foreground">2.3 Session Data</h3>
+          <p className="mt-4 text-foreground/80">
             We use session cookies to maintain your authenticated state. These are essential for the functionality of the authentication system.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">3. How We Use Your Information</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">3. How We Use Your Information</h2>
+          <p className="mt-4 text-foreground/80">
             We use the information we collect in the following ways:
           </p>
-          <ul className="mt-4 list-disc space-y-2 pl-6 text-white/80">
+          <ul className="mt-4 list-disc space-y-2 pl-6 text-foreground/80">
             <li>To provide, operate, and maintain our website</li>
             <li>To authenticate and authorize your access to features</li>
             <li>To display your contributor status and progress</li>
@@ -65,67 +65,67 @@ export default function PrivacyPage() {
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">4. Data Sharing and Disclosure</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">4. Data Sharing and Disclosure</h2>
+          <p className="mt-4 text-foreground/80">
             <strong>We do not share, sell, rent, or trade your personal information with third parties for their commercial purposes.</strong>
           </p>
-          <p className="mt-4 text-white/80">
+          <p className="mt-4 text-foreground/80">
             We may share information only in the following limited circumstances:
           </p>
-          <ul className="mt-4 list-disc space-y-2 pl-6 text-white/80">
+          <ul className="mt-4 list-disc space-y-2 pl-6 text-foreground/80">
             <li><strong>Service Providers:</strong> We use third-party services (GitHub, GitLab for authentication; Shopify for e-commerce) that may have access to your information to perform tasks on our behalf.</li>
             <li><strong>Legal Requirements:</strong> We may disclose your information if required to do so by law or in response to valid requests by public authorities.</li>
           </ul>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">5. Third-Party Services</h2>
+          <h2 className="text-2xl font-semibold text-foreground">5. Third-Party Services</h2>
 
-          <h3 className="mt-6 text-xl font-semibold text-white">5.1 Authentication</h3>
-          <p className="mt-4 text-white/80">
+          <h3 className="mt-6 text-xl font-semibold text-foreground">5.1 Authentication</h3>
+          <p className="mt-4 text-foreground/80">
             We use GitHub and GitLab OAuth for authentication. When you authenticate, you are subject to their respective privacy policies:
           </p>
-          <ul className="mt-4 list-disc space-y-2 pl-6 text-white/80">
+          <ul className="mt-4 list-disc space-y-2 pl-6 text-foreground/80">
             <li><a href="https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement" className="text-cyan-400 hover:text-cyan-300 hover:underline" target="_blank" rel="noopener noreferrer">GitHub Privacy Statement</a></li>
             <li><a href="https://about.gitlab.com/privacy/" className="text-cyan-400 hover:text-cyan-300 hover:underline" target="_blank" rel="noopener noreferrer">GitLab Privacy Policy</a></li>
           </ul>
 
-          <h3 className="mt-6 text-xl font-semibold text-white">5.2 E-commerce</h3>
-          <p className="mt-4 text-white/80">
+          <h3 className="mt-6 text-xl font-semibold text-foreground">5.2 E-commerce</h3>
+          <p className="mt-4 text-foreground/80">
             Our online store is powered by Shopify. When you make a purchase, Shopify collects and processes your payment and shipping information. Please review <a href="https://www.shopify.com/legal/privacy" className="text-cyan-400 hover:text-cyan-300 hover:underline" target="_blank" rel="noopener noreferrer">Shopify's Privacy Policy</a> for more information.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">6. Tracking and Analytics</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">6. Tracking and Analytics</h2>
+          <p className="mt-4 text-foreground/80">
             <strong>We do not use any tracking technologies, analytics tools, or third-party advertising services.</strong> We do not track your browsing behavior across websites or collect data for advertising purposes.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">7. Data Security</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">7. Data Security</h2>
+          <p className="mt-4 text-foreground/80">
             We implement appropriate technical and organizational security measures to protect your personal information. However, please note that no method of transmission over the internet or method of electronic storage is 100% secure.
           </p>
-          <p className="mt-4 text-white/80">
+          <p className="mt-4 text-foreground/80">
             Your authentication is handled by NextAuth.js, a secure authentication library, and we rely on GitHub and GitLab's OAuth implementations for secure authentication.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">8. Data Retention</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">8. Data Retention</h2>
+          <p className="mt-4 text-foreground/80">
             We retain your personal information only for as long as necessary to provide you with our services and as described in this Privacy Policy. Session data is retained only for the duration of your authenticated session.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">9. Your Rights</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">9. Your Rights</h2>
+          <p className="mt-4 text-foreground/80">
             You have the right to:
           </p>
-          <ul className="mt-4 list-disc space-y-2 pl-6 text-white/80">
+          <ul className="mt-4 list-disc space-y-2 pl-6 text-foreground/80">
             <li>Access the personal information we hold about you</li>
             <li>Request correction of inaccurate information</li>
             <li>Request deletion of your personal information</li>
@@ -135,25 +135,25 @@ export default function PrivacyPage() {
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">10. Children's Privacy</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">10. Children's Privacy</h2>
+          <p className="mt-4 text-foreground/80">
             Our Service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">11. Changes to This Privacy Policy</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">11. Changes to This Privacy Policy</h2>
+          <p className="mt-4 text-foreground/80">
             We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page and updating the "Last updated" date at the top of this Privacy Policy.
           </p>
-          <p className="mt-4 text-white/80">
+          <p className="mt-4 text-foreground/80">
             You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">12. Contact Us</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">12. Contact Us</h2>
+          <p className="mt-4 text-foreground/80">
             If you have any questions about this Privacy Policy, please contact us through our GitHub repository or official communication channels.
           </p>
         </section>
diff --git a/src/app/profile/contributor-status/page.tsx b/src/app/profile/contributor-status/page.tsx
index 9d33d6b..3bd8116 100644
--- a/src/app/profile/contributor-status/page.tsx
+++ b/src/app/profile/contributor-status/page.tsx
@@ -11,14 +11,14 @@ export default function ContributorStatusPage() {
   return (
     <div className="space-y-8 pt-12">
       <div>
-        <h1 className="text-4xl font-bold text-white">Contributor Status</h1>
-        <p className="mt-2 text-base text-white/70">
+        <h1 className="text-4xl font-bold text-foreground">Contributor Status</h1>
+        <p className="mt-2 text-base text-foreground/70">
           Your contributions across 54 React ecosystem libraries.
         </p>
       </div>
 
       <MaintainerProgressProvider>
-        <div className="rounded-3xl border border-white/10 bg-slate-900/60 p-8">
+        <div className="rounded-3xl border border-border/10 bg-muted/60 p-8">
           <MaintainerProgress />
         </div>
       </MaintainerProgressProvider>
diff --git a/src/app/profile/layout-client.tsx b/src/app/profile/layout-client.tsx
index 1e3c9a8..3ce98d4 100644
--- a/src/app/profile/layout-client.tsx
+++ b/src/app/profile/layout-client.tsx
@@ -1,8 +1,10 @@
 "use client";
 
+import { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import { useSession, signOut } from "next-auth/react";
 import { UserAvatar } from "@/components/ui/user-avatar";
+import { RFDS } from "@/components/rfds";
 
 export function ProfileLayoutClient({
   children,
@@ -12,32 +14,140 @@ export function ProfileLayoutClient({
   isAdmin: boolean;
 }) {
   const { data: session } = useSession();
+  const [mobileMenuExpanded, setMobileMenuExpanded] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setMobileMenuExpanded(false);
+      }
+    };
+
+    if (mobileMenuExpanded) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [mobileMenuExpanded]);
 
   if (!session?.user) {
     return null;
   }
 
   return (
-    <div className="mx-auto flex max-w-7xl gap-8 px-6 pb-24 sm:px-8 lg:px-12">
-      {/* Left Sidebar */}
-      <aside className="hidden w-64 shrink-0 lg:block">
+    <div className="mx-auto max-w-7xl px-6 pb-24 sm:px-8 lg:px-12">
+      {/* Mobile Profile Card */}
+      <div ref={menuRef} className="relative mb-6 overflow-hidden rounded-2xl border border-border/10 bg-muted/60 lg:hidden">
+        {/* Profile Header - Always Visible */}
+        <button
+          onClick={() => setMobileMenuExpanded(!mobileMenuExpanded)}
+          className={`flex w-full items-center gap-4 p-6 text-left transition-all duration-300 hover:bg-muted/40 ${
+            mobileMenuExpanded ? 'rounded-t-2xl' : 'rounded-2xl'
+          }`}
+          aria-expanded={mobileMenuExpanded}
+          aria-label={mobileMenuExpanded ? "Collapse profile menu" : "Expand profile menu"}
+        >
+          <div className="relative">
+            <UserAvatar user={session.user} size={60} />
+            {isAdmin && (
+              <div className="absolute -right-1 -top-1 flex h-6 w-6 items-center justify-center rounded-full bg-warning text-sm shadow-lg">
+                👑
+              </div>
+            )}
+          </div>
+          <div className="flex-1">
+            <h2 className="font-semibold text-foreground">{session.user.name}</h2>
+            <p className="text-sm text-foreground/60">{session.user.email}</p>
+            {isAdmin && (
+              <span className="mt-1 inline-block rounded bg-accent/20 px-2 py-0.5 text-xs font-semibold text-purple-300">
+                Admin
+              </span>
+            )}
+          </div>
+          {/* Expand/Collapse Icon */}
+          <svg
+            className={`h-5 w-5 text-muted-foreground transition-transform duration-300 ${mobileMenuExpanded ? 'rotate-180' : ''}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+
+        {/* Mobile Navigation - Slide out drawer */}
+        <RFDS.AccordionContent isOpen={mobileMenuExpanded}>
+          <nav className="space-y-2 px-6 pb-6 pt-2">
+              <Link
+                href="/profile"
+                onClick={() => setMobileMenuExpanded(false)}
+                className="block rounded-xl px-4 py-3 text-sm font-medium text-foreground/70 transition hover:bg-background/5 hover:text-foreground"
+              >
+                Profile
+              </Link>
+              <Link
+                href="/profile/contributor-status"
+                onClick={() => setMobileMenuExpanded(false)}
+                className="block rounded-xl px-4 py-3 text-sm font-medium text-foreground/70 transition hover:bg-background/5 hover:text-foreground"
+              >
+                Contributor Status
+              </Link>
+              <Link
+                href="/profile/repos"
+                onClick={() => setMobileMenuExpanded(false)}
+                className="block rounded-xl px-4 py-3 text-sm font-medium text-foreground/70 transition hover:bg-background/5 hover:text-foreground"
+              >
+                Repos
+              </Link>
+              {isAdmin && (
+                <Link
+                  href="/admin/users"
+                  onClick={() => setMobileMenuExpanded(false)}
+                  className="block rounded-xl border-2 border-accent/30 bg-accent/10 px-4 py-3 text-sm font-medium text-purple-300 transition hover:border-accent/50 hover:bg-accent/20"
+                >
+                  👑 Admin Panel
+                </Link>
+              )}
+              <div className="border-t border-border/10 pt-2">
+                <button
+                  onClick={() => {
+                    setMobileMenuExpanded(false);
+                    signOut({ callbackUrl: "/" });
+                  }}
+                  className="w-full rounded-xl border border-border/10 px-4 py-3 text-left text-sm font-medium text-foreground/70 transition hover:border-red-400/30 hover:bg-destructive/10 hover:text-red-300"
+                >
+                  Sign Out
+                </button>
+              </div>
+          </nav>
+        </RFDS.AccordionContent>
+      </div>
+
+      <div className="flex gap-8">
+        {/* Left Sidebar - Desktop Only */}
+        <aside className="hidden w-64 shrink-0 lg:block">
         <div className="sticky top-24 space-y-6">
           {/* Profile Card */}
-          <div className="rounded-2xl border border-white/10 bg-slate-900/60 p-6">
+          <div className="rounded-2xl border border-border/10 bg-muted/60 p-6">
             <div className="flex flex-col items-center gap-4 text-center">
               <div className="relative">
                 <UserAvatar user={session.user} size={80} />
                 {isAdmin && (
-                  <div className="absolute -right-1 -top-1 flex h-8 w-8 items-center justify-center rounded-full bg-yellow-500 text-lg shadow-lg">
+                  <div className="absolute -right-1 -top-1 flex h-8 w-8 items-center justify-center rounded-full bg-warning text-lg shadow-lg">
                     👑
                   </div>
                 )}
               </div>
               <div>
-                <h2 className="font-semibold text-white">{session.user.name}</h2>
-                <p className="text-sm text-white/60">{session.user.email}</p>
+                <h2 className="font-semibold text-foreground">{session.user.name}</h2>
+                <p className="text-sm text-foreground/60">{session.user.email}</p>
                 {isAdmin && (
-                  <span className="mt-1 inline-block rounded bg-purple-500/20 px-2 py-0.5 text-xs font-semibold text-purple-300">
+                  <span className="mt-1 inline-block rounded bg-accent/20 px-2 py-0.5 text-xs font-semibold text-purple-300">
                     Admin
                   </span>
                 )}
@@ -49,26 +159,26 @@ export function ProfileLayoutClient({
           <nav className="space-y-2">
             <Link
               href="/profile"
-              className="block rounded-xl px-4 py-3 text-sm font-medium text-white/70 transition hover:bg-white/5 hover:text-white"
+              className="block rounded-xl px-4 py-3 text-sm font-medium text-foreground/70 transition hover:bg-background/5 hover:text-foreground"
             >
               Profile
             </Link>
             <Link
               href="/profile/contributor-status"
-              className="block rounded-xl px-4 py-3 text-sm font-medium text-white/70 transition hover:bg-white/5 hover:text-white"
+              className="block rounded-xl px-4 py-3 text-sm font-medium text-foreground/70 transition hover:bg-background/5 hover:text-foreground"
             >
               Contributor Status
             </Link>
             <Link
               href="/profile/repos"
-              className="block rounded-xl px-4 py-3 text-sm font-medium text-white/70 transition hover:bg-white/5 hover:text-white"
+              className="block rounded-xl px-4 py-3 text-sm font-medium text-foreground/70 transition hover:bg-background/5 hover:text-foreground"
             >
               Repos
             </Link>
             {isAdmin && (
               <Link
                 href="/admin/users"
-                className="block rounded-xl border-2 border-purple-500/30 bg-purple-500/10 px-4 py-3 text-sm font-medium text-purple-300 transition hover:border-purple-500/50 hover:bg-purple-500/20"
+                className="block rounded-xl border-2 border-accent/30 bg-accent/10 px-4 py-3 text-sm font-medium text-purple-300 transition hover:border-accent/50 hover:bg-accent/20"
               >
                 👑 Admin Panel
               </Link>
@@ -78,17 +188,18 @@ export function ProfileLayoutClient({
           {/* Sign Out */}
           <button
             onClick={() => signOut({ callbackUrl: "/" })}
-            className="w-full rounded-xl border border-white/10 px-4 py-3 text-center text-sm font-medium text-white/70 transition hover:border-red-400/30 hover:bg-red-500/10 hover:text-red-300"
+            className="w-full rounded-xl border border-border/10 px-4 py-3 text-center text-sm font-medium text-foreground/70 transition hover:border-red-400/30 hover:bg-destructive/10 hover:text-red-300"
           >
             Sign Out
           </button>
         </div>
       </aside>
 
-      {/* Main Content */}
-      <main className="flex-1">
-        {children}
-      </main>
+        {/* Main Content */}
+        <main className="flex-1">
+          {children}
+        </main>
+      </div>
     </div>
   );
 }
diff --git a/src/app/profile/layout.tsx b/src/app/profile/layout.tsx
index 9365c16..98f2f2c 100644
--- a/src/app/profile/layout.tsx
+++ b/src/app/profile/layout.tsx
@@ -24,7 +24,7 @@ export default async function ProfileLayout({
 
   return (
     <>
-      <div className="min-h-screen bg-slate-950 pt-24 text-slate-100">
+      <div className="min-h-screen bg-background pt-24 text-muted-foreground">
         <div className="absolute inset-x-0 top-[-6rem] -z-10 flex justify-center blur-3xl">
           <div className="h-[24rem] w-full max-w-[60rem] bg-gradient-to-r from-cyan-400 via-blue-500 to-amber-500 opacity-30" />
         </div>
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 85cec31..4ee2b73 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -13,18 +13,18 @@ export default async function ProfilePage() {
   return (
     <div className="space-y-8 pt-12">
       <div>
-        <h1 className="text-4xl font-bold text-white">Profile</h1>
-        <p className="mt-2 text-base text-white/70">
+        <h1 className="text-4xl font-bold text-foreground">Profile</h1>
+        <p className="mt-2 text-base text-foreground/70">
           Manage your React Foundation account and preferences.
         </p>
       </div>
 
-      <div className="rounded-3xl border border-white/10 bg-slate-900/60 p-8">
-        <h2 className="text-2xl font-semibold text-white">Account Information</h2>
+      <div className="rounded-3xl border border-border/10 bg-muted/60 p-8">
+        <h2 className="text-2xl font-semibold text-foreground">Account Information</h2>
         <div className="mt-6 space-y-4">
           <div>
-            <p className="text-sm text-white/60">Name</p>
-            <p className="text-base text-white">
+            <p className="text-sm text-foreground/60">Name</p>
+            <p className="text-base text-foreground">
               {session?.user?.name || "Not set"}
               {session?.user?.githubLogin && (
                 <>
@@ -43,8 +43,8 @@ export default async function ProfilePage() {
             </p>
           </div>
           <div>
-            <p className="text-sm text-white/60">Email</p>
-            <p className="text-base text-white">{session?.user?.email || "Not set"}</p>
+            <p className="text-sm text-foreground/60">Email</p>
+            <p className="text-base text-foreground">{session?.user?.email || "Not set"}</p>
           </div>
         </div>
       </div>
@@ -53,17 +53,17 @@ export default async function ProfilePage() {
       <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
         <Link
           href="/profile/contributor-status"
-          className="rounded-2xl border border-white/10 bg-slate-900/60 p-6 transition hover:border-white/20 hover:bg-slate-900/80"
+          className="rounded-2xl border border-border/10 bg-muted/60 p-6 transition hover:border-border/20 hover:bg-muted/80"
         >
-          <h3 className="font-semibold text-white">Contributor Status</h3>
-          <p className="mt-2 text-sm text-white/60">View your contributions and tier</p>
+          <h3 className="font-semibold text-foreground">Contributor Status</h3>
+          <p className="mt-2 text-sm text-foreground/60">View your contributions and tier</p>
         </Link>
         <Link
           href="/profile/repos"
-          className="rounded-2xl border border-white/10 bg-slate-900/60 p-6 transition hover:border-white/20 hover:bg-slate-900/80"
+          className="rounded-2xl border border-border/10 bg-muted/60 p-6 transition hover:border-border/20 hover:bg-muted/80"
         >
-          <h3 className="font-semibold text-white">Repos</h3>
-          <p className="mt-2 text-sm text-white/60">See your repository activity</p>
+          <h3 className="font-semibold text-foreground">Repos</h3>
+          <p className="mt-2 text-sm text-foreground/60">See your repository activity</p>
         </Link>
       </div>
 
diff --git a/src/app/profile/repos/page.tsx b/src/app/profile/repos/page.tsx
index 1cf49f1..0f05982 100644
--- a/src/app/profile/repos/page.tsx
+++ b/src/app/profile/repos/page.tsx
@@ -9,16 +9,16 @@ export default function ReposPage() {
   return (
     <div className="space-y-8 pt-12">
       <div>
-        <h1 className="text-4xl font-bold text-white">Repos</h1>
-        <p className="mt-2 text-base text-white/70">
+        <h1 className="text-4xl font-bold text-foreground">Repos</h1>
+        <p className="mt-2 text-base text-foreground/70">
           Your repository contributions across the React ecosystem.
         </p>
       </div>
 
-      <div className="rounded-3xl border border-white/10 bg-slate-900/60 p-12 text-center">
+      <div className="rounded-3xl border border-border/10 bg-muted/60 p-12 text-center">
         <div className="mx-auto max-w-md space-y-4">
           <svg
-            className="mx-auto h-16 w-16 text-white/20"
+            className="mx-auto h-16 w-16 text-foreground/20"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -30,8 +30,8 @@ export default function ReposPage() {
               d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
             />
           </svg>
-          <h2 className="text-xl font-semibold text-white">Coming Soon</h2>
-          <p className="text-sm text-white/60">
+          <h2 className="text-xl font-semibold text-foreground">Coming Soon</h2>
+          <p className="text-sm text-foreground/60">
             Detailed repository contribution tracking and analytics will be available soon.
           </p>
         </div>
diff --git a/src/app/scoring/page.tsx b/src/app/scoring/page.tsx
index dbeb373..86a67db 100644
--- a/src/app/scoring/page.tsx
+++ b/src/app/scoring/page.tsx
@@ -17,16 +17,16 @@ export default function ScoringPage() {
       <div className="space-y-8">
         {/* Hero */}
         <div className="text-center">
-          <h1 className="text-4xl font-bold text-white sm:text-5xl">
+          <h1 className="text-4xl font-bold text-foreground sm:text-5xl">
             How Library Scoring Works
           </h1>
-          <p className="mt-4 text-xl text-white/70">
+          <p className="mt-4 text-xl text-foreground/70">
             A simple explanation of how we measure impact and share funding fairly
           </p>
         </div>
 
         {/* Main Content */}
-        <div className="space-y-12 rounded-3xl border border-white/10 bg-slate-900/60 p-8 sm:p-12">
+        <div className="space-y-12 rounded-3xl border border-border/10 bg-muted/60 p-8 sm:p-12">
 
           {/* The Big Idea */}
           <Section
@@ -70,7 +70,7 @@ export default function ScoringPage() {
                   <li>How many other projects depend on it</li>
                   <li>How often it appears in big, important projects</li>
                 </ul>
-                <p className="mt-3 text-sm italic text-white/60">
+                <p className="mt-3 text-sm italic text-foreground/60">
                   Why it matters: If lots of people rely on something, it's super important to keep it working!
                 </p>
               </ScoreComponent>
@@ -88,7 +88,7 @@ export default function ScoringPage() {
                   <li>How quickly do maintainers help people who need support?</li>
                   <li>How many different people contribute ideas?</li>
                 </ul>
-                <p className="mt-3 text-sm italic text-white/60">
+                <p className="mt-3 text-sm italic text-foreground/60">
                   Why it matters: Quality beats quantity! One awesome fix is better than 100 tiny, unhelpful changes.
                 </p>
               </ScoreComponent>
@@ -106,7 +106,7 @@ export default function ScoringPage() {
                   <li>Releases updates regularly (like watering plants on schedule)</li>
                   <li>Responds to problems quickly</li>
                 </ul>
-                <p className="mt-3 text-sm italic text-white/60">
+                <p className="mt-3 text-sm italic text-foreground/60">
                   Why it matters: We want libraries to last for years, not crash and burn because one person gets tired.
                 </p>
               </ScoreComponent>
@@ -124,7 +124,7 @@ export default function ScoringPage() {
                   <li>Tutorials that help beginners get started</li>
                   <li>Helpful answers to people's questions</li>
                 </ul>
-                <p className="mt-3 text-sm italic text-white/60">
+                <p className="mt-3 text-sm italic text-foreground/60">
                   Why it matters: When people help others learn, everyone in the community gets smarter!
                 </p>
               </ScoreComponent>
@@ -143,7 +143,7 @@ export default function ScoringPage() {
                   <li>Use modern best practices (like TypeScript)</li>
                   <li>Work with new React features</li>
                 </ul>
-                <p className="mt-3 text-sm italic text-white/60">
+                <p className="mt-3 text-sm italic text-foreground/60">
                   Why it matters: We want to support libraries that help React's vision for the future!
                 </p>
               </ScoreComponent>
@@ -155,7 +155,7 @@ export default function ScoringPage() {
             title="How We Calculate the Score 🧮"
             icon="📐"
           >
-            <div className="rounded-xl border border-white/10 bg-white/[0.03] p-6">
+            <div className="rounded-xl border border-border/10 bg-background/[0.03] p-6">
               <p className="mb-4">Here's the math, but explained simply:</p>
               <div className="space-y-3 text-sm">
                 <FormulaStep weight={30} label="Ecosystem Footprint" />
@@ -163,8 +163,8 @@ export default function ScoringPage() {
                 <FormulaStep weight={20} label="Maintainer Health" />
                 <FormulaStep weight={15} label="Community Benefit" />
                 <FormulaStep weight={10} label="Mission Alignment" />
-                <div className="border-t border-white/10 pt-3">
-                  <p className="font-semibold text-white">
+                <div className="border-t border-border/10 pt-3">
+                  <p className="font-semibold text-foreground">
                     = <span className="text-cyan-400">Your Library's Impact Score</span> (0-100%)
                   </p>
                 </div>
@@ -181,7 +181,7 @@ export default function ScoringPage() {
             icon="🤝"
           >
             <p className="mb-4">Once we know everyone's scores, sharing money is like sharing pizza:</p>
-            <div className="space-y-4 rounded-xl border border-white/10 bg-white/[0.03] p-6">
+            <div className="space-y-4 rounded-xl border border-border/10 bg-background/[0.03] p-6">
               <Step number={1}>
                 <strong>Add up all the scores</strong> from every library
               </Step>
@@ -193,9 +193,9 @@ export default function ScoringPage() {
               </Step>
             </div>
 
-            <div className="mt-6 rounded-xl border border-yellow-500/30 bg-yellow-500/10 p-6">
+            <div className="mt-6 rounded-xl border border-warning/30 bg-warning/10 p-6">
               <p className="font-semibold text-yellow-300">⚠️ Fair Play Rules:</p>
-              <ul className="mt-3 list-disc space-y-2 pl-6 text-sm text-white/80">
+              <ul className="mt-3 list-disc space-y-2 pl-6 text-sm text-foreground/80">
                 <li><strong>Minimum guarantee:</strong> Every library gets at least $5,000—even small helpers matter!</li>
                 <li><strong>Maximum cap:</strong> No library can take more than 12% of the total pool—we share fairly!</li>
                 <li><strong>Emergency fund:</strong> We save 10% for urgent fixes and special situations</li>
@@ -237,11 +237,11 @@ export default function ScoringPage() {
           </Section>
 
           {/* Final Thought */}
-          <div className="rounded-2xl border border-cyan-500/30 bg-cyan-500/10 p-8 text-center">
-            <p className="text-lg font-medium text-white">
+          <div className="rounded-2xl border border-primary/30 bg-primary/10 p-8 text-center">
+            <p className="text-lg font-medium text-foreground">
               🎯 Our goal is simple: <strong>Reward the libraries that make the biggest positive impact</strong> on the React community.
             </p>
-            <p className="mt-4 text-white/70">
+            <p className="mt-4 text-foreground/70">
               By measuring impact fairly and sharing funding transparently, we help amazing open source projects thrive!
             </p>
           </div>
@@ -264,11 +264,11 @@ function Section({
 }) {
   return (
     <section>
-      <h2 className="mb-6 flex items-center gap-3 text-2xl font-bold text-white sm:text-3xl">
+      <h2 className="mb-6 flex items-center gap-3 text-2xl font-bold text-foreground sm:text-3xl">
         <span className="text-3xl">{icon}</span>
         {title}
       </h2>
-      <div className="space-y-4 text-white/80">{children}</div>
+      <div className="space-y-4 text-foreground/80">{children}</div>
     </section>
   );
 }
@@ -287,11 +287,11 @@ function ScoreComponent({
   children: React.ReactNode;
 }) {
   const colorClasses = {
-    blue: 'border-blue-500/30 bg-blue-500/10',
-    green: 'border-green-500/30 bg-green-500/10',
-    purple: 'border-purple-500/30 bg-purple-500/10',
-    yellow: 'border-yellow-500/30 bg-yellow-500/10',
-    pink: 'border-pink-500/30 bg-pink-500/10',
+    blue: 'border-primary/30 bg-primary/10',
+    green: 'border-success/30 bg-success/10',
+    purple: 'border-accent/30 bg-accent/10',
+    yellow: 'border-warning/30 bg-warning/10',
+    pink: 'border-pink-500/30 bg-accent/10',
   };
 
   return (
@@ -299,18 +299,18 @@ function ScoreComponent({
       <div className="mb-3 flex items-center gap-3">
         <span className="text-2xl">{emoji}</span>
         <div>
-          <span className="mr-2 text-sm font-semibold text-white/60">#{number}</span>
-          <span className="text-lg font-bold text-white">{title}</span>
+          <span className="mr-2 text-sm font-semibold text-foreground/60">#{number}</span>
+          <span className="text-lg font-bold text-foreground">{title}</span>
         </div>
       </div>
-      <div className="space-y-3 text-sm text-white/80">{children}</div>
+      <div className="space-y-3 text-sm text-foreground/80">{children}</div>
     </div>
   );
 }
 
 function FormulaStep({ weight, label }: { weight: number; label: string }) {
   return (
-    <div className="flex items-center gap-2 text-white/80">
+    <div className="flex items-center gap-2 text-foreground/80">
       <span className="font-mono font-semibold text-cyan-400">{weight}%</span>
       <span>×</span>
       <span>{label}</span>
@@ -321,10 +321,10 @@ function FormulaStep({ weight, label }: { weight: number; label: string }) {
 function Step({ number, children }: { number: number; children: React.ReactNode }) {
   return (
     <div className="flex gap-3">
-      <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-cyan-500/20 text-sm font-bold text-cyan-300">
+      <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/20 text-sm font-bold text-cyan-300">
         {number}
       </div>
-      <p className="text-white/80">{children}</p>
+      <p className="text-foreground/80">{children}</p>
     </div>
   );
 }
@@ -339,12 +339,12 @@ function BenefitCard({
   children: React.ReactNode;
 }) {
   return (
-    <div className="rounded-xl border border-white/10 bg-white/[0.03] p-4">
+    <div className="rounded-xl border border-border/10 bg-background/[0.03] p-4">
       <div className="mb-2 flex items-center gap-2">
         <span className="text-2xl">{emoji}</span>
-        <span className="font-semibold text-white">{title}</span>
+        <span className="font-semibold text-foreground">{title}</span>
       </div>
-      <p className="text-sm text-white/70">{children}</p>
+      <p className="text-sm text-foreground/70">{children}</p>
     </div>
   );
 }
diff --git a/src/app/store/collections/[handle]/page.tsx b/src/app/store/collections/[handle]/page.tsx
index 87419ea..8475fac 100644
--- a/src/app/store/collections/[handle]/page.tsx
+++ b/src/app/store/collections/[handle]/page.tsx
@@ -64,9 +64,9 @@ export default async function CollectionPage({ params }: CollectionPageProps) {
     : null;
 
   return (
-    <div className="min-h-screen bg-slate-950 pt-24 text-slate-100">
+    <div className="min-h-screen bg-background pt-24 text-muted-foreground">
       <div className="absolute inset-x-0 top-[-10rem] -z-10 flex justify-center blur-3xl">
-        <div className="h-[28rem] w-[70rem] bg-gradient-to-r from-indigo-500 via-purple-500 to-sky-500 opacity-25" />
+        <div className="h-[28rem] w-[70rem] bg-gradient-to-r from-cyan-500 via-yellow-300 to-orange-500 opacity-25" />
       </div>
       <div className="mx-auto flex max-w-6xl flex-col gap-16 px-6 pb-24 sm:px-8 lg:px-12">
         <header className="space-y-6">
@@ -75,44 +75,44 @@ export default async function CollectionPage({ params }: CollectionPageProps) {
               <span
                 className={`rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wider ${
                   dropStatus === 'current'
-                    ? 'bg-emerald-500/20 text-emerald-300'
+                    ? 'bg-success/20 text-emerald-300'
                     : dropStatus === 'upcoming'
-                    ? 'bg-sky-500/20 text-sky-300'
-                    : 'bg-white/10 text-white/50'
+                    ? 'bg-primary/20 text-sky-300'
+                    : 'bg-background/10 text-foreground/50'
                 }`}
               >
                 {dropStatus}
               </span>
             )}
             {collection?.isDrop && dropLabel && seasonYear && (
-              <span className="text-sm text-white/50">
+              <span className="text-sm text-foreground/50">
                 {dropLabel} · {seasonYear}
               </span>
             )}
           </div>
 
           <div className="space-y-4">
-            <h1 className="text-4xl font-semibold text-white sm:text-5xl">
+            <h1 className="text-4xl font-semibold text-foreground sm:text-5xl">
               {collection?.dropTheme || collection?.title || 'Collection'}
             </h1>
             {collection?.description && (
-              <p className="max-w-3xl text-base text-white/70">
+              <p className="max-w-3xl text-base text-foreground/70">
                 {collection.description}
               </p>
             )}
           </div>
 
           {collection?.limitedEditionSize && (
-            <div className="flex items-center gap-2 text-sm text-white/60">
-              <span className="rounded-full border border-white/15 bg-white/5 px-4 py-2">
+            <div className="flex items-center gap-2 text-sm text-foreground/60">
+              <span className="rounded-full border border-border/15 bg-background/5 px-4 py-2">
                 Limited edition of {collection.limitedEditionSize}
               </span>
             </div>
           )}
 
           {products.length > 0 && (
-            <div className="flex flex-wrap items-center gap-4 text-sm text-white/60">
-              <span className="rounded-full border border-white/15 bg-white/5 px-4 py-2">
+            <div className="flex flex-wrap items-center gap-4 text-sm text-foreground/60">
+              <span className="rounded-full border border-border/15 bg-background/5 px-4 py-2">
                 {products.length} {products.length === 1 ? 'product' : 'products'}
               </span>
             </div>
@@ -131,8 +131,8 @@ export default async function CollectionPage({ params }: CollectionPageProps) {
               ))}
             </section>
           ) : (
-            <div className="rounded-2xl border border-white/10 bg-white/5 p-12 text-center">
-              <p className="text-white/60">
+            <div className="rounded-2xl border border-border/10 bg-background/5 p-12 text-center">
+              <p className="text-foreground/60">
                 No products in this collection yet. Check back soon!
               </p>
             </div>
diff --git a/src/app/store/collections/page.tsx b/src/app/store/collections/page.tsx
index 513d40a..d05aae5 100644
--- a/src/app/store/collections/page.tsx
+++ b/src/app/store/collections/page.tsx
@@ -14,24 +14,24 @@ export default async function CollectionsPage() {
   const collections = isShopifyEnabled() ? await getAllCollections() : [];
 
   return (
-    <div className="min-h-screen bg-slate-950 pt-24 text-slate-100">
+    <div className="min-h-screen bg-background pt-24 text-muted-foreground">
       <div className="absolute inset-x-0 top-[-10rem] -z-10 flex justify-center blur-3xl">
-        <div className="h-[28rem] w-[70rem] bg-gradient-to-r from-indigo-500 via-purple-500 to-sky-500 opacity-25" />
+        <div className="h-[28rem] w-[70rem] bg-gradient-to-r from-cyan-500 via-yellow-300 to-orange-500 opacity-25" />
       </div>
       <div className="mx-auto flex max-w-6xl flex-col gap-16 px-6 pb-24 sm:px-8 lg:px-12">
         <header className="space-y-6">
           <div className="space-y-4">
-            <h1 className="text-4xl font-semibold text-white sm:text-5xl">
+            <h1 className="text-4xl font-semibold text-foreground sm:text-5xl">
               Explore Collections
             </h1>
-            <p className="max-w-3xl text-base text-white/70">
+            <p className="max-w-3xl text-base text-foreground/70">
               Each collection is crafted with the community, channeling proceeds back
               into React Foundation grants, documentation, and education programs.
             </p>
           </div>
           {collections.length > 0 && (
-            <div className="flex flex-wrap items-center gap-4 text-sm text-white/60">
-              <span className="rounded-full border border-white/15 bg-white/5 px-4 py-2">
+            <div className="flex flex-wrap items-center gap-4 text-sm text-foreground/60">
+              <span className="rounded-full border border-border/15 bg-background/5 px-4 py-2">
                 {collections.length} {collections.length === 1 ? "collection" : "collections"}
               </span>
             </div>
@@ -45,10 +45,10 @@ export default async function CollectionsPage() {
                 <Link
                   key={collection.id}
                   href={`/collections/${collection.handle}`}
-                  className="group flex flex-col gap-4 rounded-2xl border border-white/10 bg-slate-900/70 p-6 transition hover:border-white/25 hover:bg-slate-900"
+                  className="group flex flex-col gap-4 rounded-2xl border border-border/10 bg-muted/70 p-6 transition hover:border-border/25 hover:bg-muted"
                 >
                   {collection.image ? (
-                    <div className="relative h-48 overflow-hidden rounded-xl border border-white/10">
+                    <div className="relative h-48 overflow-hidden rounded-xl border border-border/10">
                       <Image
                         src={collection.image.url}
                         alt={collection.image.altText || collection.title}
@@ -58,8 +58,8 @@ export default async function CollectionsPage() {
                       />
                     </div>
                   ) : (
-                    <div className="relative h-48 overflow-hidden rounded-xl border border-white/10 bg-gradient-to-br from-slate-800 to-slate-900">
-                      <div className="flex h-full items-center justify-center text-white/20">
+                    <div className="relative h-48 overflow-hidden rounded-xl border border-border/10 bg-gradient-to-br from-slate-800 to-slate-900">
+                      <div className="flex h-full items-center justify-center text-foreground/20">
                         <svg className="h-16 w-16" fill="currentColor" viewBox="0 0 20 20">
                           <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
                         </svg>
@@ -67,11 +67,11 @@ export default async function CollectionsPage() {
                     </div>
                   )}
                   <div>
-                    <h3 className="text-lg font-semibold text-white">
+                    <h3 className="text-lg font-semibold text-foreground">
                       {collection.title}
                     </h3>
                     {collection.description && (
-                      <p className="mt-2 line-clamp-2 text-sm text-white/60">
+                      <p className="mt-2 line-clamp-2 text-sm text-foreground/60">
                         {collection.description}
                       </p>
                     )}
@@ -83,8 +83,8 @@ export default async function CollectionsPage() {
               ))}
             </section>
           ) : (
-            <div className="rounded-2xl border border-white/10 bg-white/5 p-12 text-center">
-              <p className="text-white/60">
+            <div className="rounded-2xl border border-border/10 bg-background/5 p-12 text-center">
+              <p className="text-foreground/60">
                 {isShopifyEnabled()
                   ? "No collections found. Add collections in your Shopify admin."
                   : "Shopify is not configured. Please set up your Shopify credentials."}
diff --git a/src/app/store/page.tsx b/src/app/store/page.tsx
index e6bffb5..633602c 100644
--- a/src/app/store/page.tsx
+++ b/src/app/store/page.tsx
@@ -54,9 +54,9 @@ export default async function Home() {
     .slice(0, 4);
 
   return (
-    <div className="min-h-screen bg-slate-950 pt-24 text-slate-100">
+    <div className="min-h-screen bg-background pt-24 text-muted-foreground">
       <div className="absolute inset-x-0 top-[-6rem] -z-10 flex justify-center blur-3xl">
-        <div className="h-[24rem] w-[60rem] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-30" />
+        <div className="h-[24rem] w-[60rem] bg-gradient-to-r from-cyan-500 via-yellow-300 to-orange-500 opacity-30" />
       </div>
 
       <div className="mx-auto flex max-w-6xl flex-col px-6 pb-24 sm:px-8 lg:px-12">
diff --git a/src/app/store/products/[slug]/page.tsx b/src/app/store/products/[slug]/page.tsx
index cb5ff8c..09693e1 100644
--- a/src/app/store/products/[slug]/page.tsx
+++ b/src/app/store/products/[slug]/page.tsx
@@ -64,7 +64,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
   const relatedProducts = await getRelatedProducts(product.slug);
 
   return (
-    <div className="relative min-h-screen bg-slate-950 pt-24 text-slate-100">
+    <div className="relative min-h-screen bg-background pt-24 text-muted-foreground">
       <div
         className={`pointer-events-none absolute inset-0 blur-3xl`}
         aria-hidden
@@ -74,7 +74,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
         />
       </div>
       <div className="relative mx-auto max-w-6xl px-6 pb-24 sm:px-8 lg:px-12">
-        <nav className="flex items-center justify-between text-sm text-white/60">
+        <nav className="flex items-center justify-between text-sm text-foreground/60">
           <ButtonLink
             href="/store#drops"
             variant="secondary"
@@ -83,14 +83,14 @@ export default async function ProductPage({ params }: ProductPageProps) {
           >
             <span aria-hidden>←</span> Back to store
           </ButtonLink>
-          <span className="uppercase tracking-[0.3em] text-white/40">
+          <span className="uppercase tracking-[0.3em] text-foreground/40">
             {product.releaseWindow}
           </span>
         </nav>
 
         <div className="mt-12 grid gap-12 lg:grid-cols-[minmax(0,1fr)_360px]">
           <div className="space-y-10">
-            <div className="rounded-3xl border border-white/10 bg-slate-900/70 p-4 sm:p-8">
+            <div className="rounded-3xl border border-border/10 bg-muted/70 p-4 sm:p-8">
               <ProductGallery
                 images={product.images}
                 className="mx-auto max-w-[520px]"
@@ -98,15 +98,15 @@ export default async function ProductPage({ params }: ProductPageProps) {
               <div className="mt-6 flex flex-wrap items-center justify-between gap-4">
                 <div>
                   <div className="space-y-1">
-                    <p className="text-[11px] uppercase tracking-[0.35em] text-white/70">
+                    <p className="text-[11px] uppercase tracking-[0.35em] text-foreground/70">
                       {inventorySummary.availabilityLabel}
                     </p>
-                    <p className="text-xs text-white/60">{inventorySummary.inventoryLabel}</p>
+                    <p className="text-xs text-foreground/60">{inventorySummary.inventoryLabel}</p>
                   </div>
-                  <h1 className="mt-2 text-4xl font-semibold text-white sm:text-5xl">
+                  <h1 className="mt-2 text-4xl font-semibold text-foreground sm:text-5xl">
                     {product.name}
                   </h1>
-                  <p className="mt-3 text-base text-white/70">
+                  <p className="mt-3 text-base text-foreground/70">
                     {product.tagline}
                   </p>
                   <Rating
@@ -116,48 +116,48 @@ export default async function ProductPage({ params }: ProductPageProps) {
                     className="mt-4"
                   />
                 </div>
-                <div className="rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-semibold text-white/80">
+                <div className="rounded-full border border-border/15 bg-background/10 px-4 py-2 text-sm font-semibold text-foreground/80">
                   {product.price}
                 </div>
               </div>
             </div>
 
-            <section className="space-y-6 rounded-3xl border border-white/10 bg-slate-900/60 p-8">
-              <h2 className="text-xl font-semibold text-white">
+            <section className="space-y-6 rounded-3xl border border-border/10 bg-muted/60 p-8">
+              <h2 className="text-xl font-semibold text-foreground">
                 Built for the React community
               </h2>
-              <p className="text-sm text-white/70">{product.description}</p>
+              <p className="text-sm text-foreground/70">{product.description}</p>
               <div className="grid gap-4 sm:grid-cols-2">
                 {product.features.map((feature) => (
                   <div
                     key={feature}
-                    className="rounded-2xl border border-white/10 bg-white/[0.04] p-4"
+                    className="rounded-2xl border border-border/10 bg-background/[0.04] p-4"
                   >
-                    <p className="text-sm text-white/80">{feature}</p>
+                    <p className="text-sm text-foreground/80">{feature}</p>
                   </div>
                 ))}
               </div>
             </section>
 
-            <section className="grid gap-6 rounded-3xl border border-white/10 bg-slate-900/60 p-8 sm:grid-cols-[minmax(0,1fr)_260px]">
+            <section className="grid gap-6 rounded-3xl border border-border/10 bg-muted/60 p-8 sm:grid-cols-[minmax(0,1fr)_260px]">
               <div className="space-y-4">
-                <h3 className="text-lg font-semibold text-white">
+                <h3 className="text-lg font-semibold text-foreground">
                   Why it matters
                 </h3>
-                <ul className="space-y-3 text-sm text-white/70">
+                <ul className="space-y-3 text-sm text-foreground/70">
                   {product.highlights.map((highlight) => (
                     <li
                       key={highlight}
-                      className="flex gap-3 rounded-xl border border-white/10 bg-white/[0.03] p-4"
+                      className="flex gap-3 rounded-xl border border-border/10 bg-background/[0.03] p-4"
                     >
-                      <span className="mt-1 h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                      <span className="mt-1 h-1.5 w-1.5 rounded-full bg-success/50" />
                       <span>{highlight}</span>
                     </li>
                   ))}
                 </ul>
               </div>
-              <aside className="rounded-2xl border border-white/10 bg-white/[0.04] p-6 text-sm text-white/70">
-                <p className="font-semibold text-white/80">
+              <aside className="rounded-2xl border border-border/10 bg-background/[0.04] p-6 text-sm text-foreground/70">
+                <p className="font-semibold text-foreground/80">
                   Impact guarantee
                 </p>
                 <p className="mt-3">
@@ -169,26 +169,26 @@ export default async function ProductPage({ params }: ProductPageProps) {
             </section>
           </div>
 
-          <aside className="space-y-8 rounded-3xl border border-white/10 bg-slate-900/70 p-8">
+          <aside className="space-y-8 rounded-3xl border border-border/10 bg-muted/70 p-8">
             <div>
-              <p className="text-xs uppercase tracking-[0.3em] text-white/50">
+              <p className="text-xs uppercase tracking-[0.3em] text-foreground/50">
                 Drop support tier
               </p>
-              <p className="mt-4 text-sm text-white/70">
+              <p className="mt-4 text-sm text-foreground/70">
                 Secure your piece and we will notify you as soon as the checkout
                 experience is live.
               </p>
             </div>
-            <div className="space-y-3 text-sm text-white/70">
+            <div className="space-y-3 text-sm text-foreground/70">
               {product.specs.map((spec) => (
                 <div
                   key={spec.label}
-                  className="rounded-2xl border border-white/10 bg-white/[0.04] p-4"
+                  className="rounded-2xl border border-border/10 bg-background/[0.04] p-4"
                 >
-                  <p className="text-xs uppercase tracking-[0.25em] text-white/40">
+                  <p className="text-xs uppercase tracking-[0.25em] text-foreground/40">
                     {spec.label}
                   </p>
-                  <p className="mt-2 text-sm text-white/80">{spec.value}</p>
+                  <p className="mt-2 text-sm text-foreground/80">{spec.value}</p>
                 </div>
               ))}
             </div>
@@ -198,12 +198,12 @@ export default async function ProductPage({ params }: ProductPageProps) {
             >
               Join the waitlist
             </ButtonLink>
-            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4 text-xs text-white/50">
+            <div className="rounded-2xl border border-border/10 bg-background/[0.03] p-4 text-xs text-foreground/50">
               <p>
                 Need sizing help? Email{" "}
                 <a
                   href="mailto:shop@react.foundation"
-                  className="text-indigo-200 hover:text-white"
+                  className="text-indigo-200 hover:text-foreground"
                 >
                   shop@react.foundation
                 </a>{" "}
@@ -216,7 +216,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
         {relatedProducts.length > 0 ? (
           <section className="mt-16 space-y-6">
             <div className="flex items-center justify-between">
-              <h2 className="text-2xl font-semibold text-white">
+              <h2 className="text-2xl font-semibold text-foreground">
                 More limited drops
               </h2>
               <ButtonLink
diff --git a/src/app/terms/page.tsx b/src/app/terms/page.tsx
index c61b03e..175fb6b 100644
--- a/src/app/terms/page.tsx
+++ b/src/app/terms/page.tsx
@@ -9,25 +9,25 @@ export const metadata: Metadata = {
 export default function TermsPage() {
   return (
     <div className="mx-auto max-w-4xl px-6 py-12 sm:px-8 lg:px-12">
-      <h1 className="text-4xl font-bold text-white">Terms of Service</h1>
-      <p className="mt-2 text-base text-white/70">
+      <h1 className="text-4xl font-bold text-foreground">Terms of Service</h1>
+      <p className="mt-2 text-base text-foreground/70">
         Last updated: October 21, 2025
       </p>
 
       <div className="prose prose-invert mt-8 max-w-none">
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">1. Acceptance of Terms</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">1. Acceptance of Terms</h2>
+          <p className="mt-4 text-foreground/80">
             By accessing and using the React Foundation website (the "Service"), you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to these Terms of Service, please do not use the Service.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">2. Description of Service</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">2. Description of Service</h2>
+          <p className="mt-4 text-foreground/80">
             React Foundation provides a platform to support the React ecosystem through community funding, transparent governance, and official merchandise. The Service includes:
           </p>
-          <ul className="mt-4 list-disc space-y-2 pl-6 text-white/80">
+          <ul className="mt-4 list-disc space-y-2 pl-6 text-foreground/80">
             <li>Information about React Foundation and its mission</li>
             <li>An online store for official React Foundation merchandise</li>
             <li>User authentication via GitHub and GitLab</li>
@@ -37,18 +37,18 @@ export default function TermsPage() {
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">3. User Accounts</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">3. User Accounts</h2>
+          <p className="mt-4 text-foreground/80">
             To access certain features of the Service, you may be required to authenticate using your GitHub or GitLab account. You are responsible for maintaining the confidentiality of your account credentials and for all activities that occur under your account.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">4. Acceptable Use</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">4. Acceptable Use</h2>
+          <p className="mt-4 text-foreground/80">
             You agree to use the Service only for lawful purposes and in a way that does not infringe the rights of, restrict, or inhibit anyone else's use and enjoyment of the Service. Prohibited behavior includes:
           </p>
-          <ul className="mt-4 list-disc space-y-2 pl-6 text-white/80">
+          <ul className="mt-4 list-disc space-y-2 pl-6 text-foreground/80">
             <li>Harassing or causing distress or inconvenience to any other user</li>
             <li>Transmitting obscene or offensive content</li>
             <li>Disrupting the normal flow of dialogue within the Service</li>
@@ -57,43 +57,43 @@ export default function TermsPage() {
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">5. Intellectual Property</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">5. Intellectual Property</h2>
+          <p className="mt-4 text-foreground/80">
             The Service and its original content, features, and functionality are owned by React Foundation and are protected by international copyright, trademark, patent, trade secret, and other intellectual property laws. The React logo and other marks are trademarks of Meta Platforms, Inc., and are used with permission.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">6. Purchases and Payment</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">6. Purchases and Payment</h2>
+          <p className="mt-4 text-foreground/80">
             If you wish to purchase any product or service made available through the Service, you may be asked to supply certain information relevant to your purchase. Payment processing is handled by third-party payment processors. We are not responsible for the security of payment information submitted to these third parties.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">7. Limitation of Liability</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">7. Limitation of Liability</h2>
+          <p className="mt-4 text-foreground/80">
             In no event shall React Foundation, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your access to or use of or inability to access or use the Service.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">8. Disclaimer</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">8. Disclaimer</h2>
+          <p className="mt-4 text-foreground/80">
             Your use of the Service is at your sole risk. The Service is provided on an "AS IS" and "AS AVAILABLE" basis. The Service is provided without warranties of any kind, whether express or implied, including, but not limited to, implied warranties of merchantability, fitness for a particular purpose, non-infringement, or course of performance.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">9. Changes to Terms</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">9. Changes to Terms</h2>
+          <p className="mt-4 text-foreground/80">
             We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is material, we will provide at least 30 days' notice prior to any new terms taking effect. What constitutes a material change will be determined at our sole discretion.
           </p>
         </section>
 
         <section className="mb-8">
-          <h2 className="text-2xl font-semibold text-white">10. Contact Information</h2>
-          <p className="mt-4 text-white/80">
+          <h2 className="text-2xl font-semibold text-foreground">10. Contact Information</h2>
+          <p className="mt-4 text-foreground/80">
             If you have any questions about these Terms of Service, please contact us through our GitHub repository or official communication channels.
           </p>
         </section>
diff --git a/src/app/theme-test/page.tsx b/src/app/theme-test/page.tsx
new file mode 100644
index 0000000..188e740
--- /dev/null
+++ b/src/app/theme-test/page.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import { useTheme } from "@/components/providers/theme-provider";
+import { ThemeToggle, ThemeToggleWithLabel } from "@/components/ui/theme-toggle";
+import { Button } from "@/components/ui/button";
+
+export default function ThemeTestPage() {
+  const { theme, setTheme, effectiveTheme } = useTheme();
+
+  return (
+    <div className="min-h-screen bg-background text-foreground p-8">
+      <div className="max-w-4xl mx-auto space-y-8">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4">Theme Testing Page</h1>
+          <p className="text-muted-foreground mb-8">
+            Test the theme switching functionality across different components
+          </p>
+        </div>
+
+        {/* Theme Status */}
+        <div className="bg-card border border-border rounded-lg p-6">
+          <h2 className="text-2xl font-semibold mb-4">Current Theme Status</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="bg-muted p-4 rounded-lg">
+              <p className="text-sm text-muted-foreground">Selected Theme</p>
+              <p className="text-lg font-semibold capitalize">{theme}</p>
+            </div>
+            <div className="bg-muted p-4 rounded-lg">
+              <p className="text-sm text-muted-foreground">Effective Theme</p>
+              <p className="text-lg font-semibold capitalize">{effectiveTheme}</p>
+            </div>
+            <div className="bg-muted p-4 rounded-lg">
+              <p className="text-sm text-muted-foreground">System Preference</p>
+              <p className="text-lg font-semibold capitalize">
+                {typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Theme Controls */}
+        <div className="bg-card border border-border rounded-lg p-6">
+          <h2 className="text-2xl font-semibold mb-4">Theme Controls</h2>
+          <div className="flex flex-wrap gap-4 items-center">
+            <ThemeToggle />
+            <ThemeToggleWithLabel />
+            <div className="flex gap-2">
+              <Button
+                variant={theme === 'light' ? 'primary' : 'ghost'}
+                onClick={() => setTheme('light')}
+                size="sm"
+              >
+                Light
+              </Button>
+              <Button
+                variant={theme === 'dark' ? 'primary' : 'ghost'}
+                onClick={() => setTheme('dark')}
+                size="sm"
+              >
+                Dark
+              </Button>
+              <Button
+                variant={theme === 'system' ? 'primary' : 'ghost'}
+                onClick={() => setTheme('system')}
+                size="sm"
+              >
+                System
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Color Palette */}
+        <div className="bg-card border border-border rounded-lg p-6">
+          <h2 className="text-2xl font-semibold mb-4">Color Palette</h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="space-y-2">
+              <div className="h-16 bg-background border border-border rounded-lg"></div>
+              <p className="text-sm text-center">Background</p>
+            </div>
+            <div className="space-y-2">
+              <div className="h-16 bg-foreground rounded-lg"></div>
+              <p className="text-sm text-center">Foreground</p>
+            </div>
+            <div className="space-y-2">
+              <div className="h-16 bg-muted rounded-lg"></div>
+              <p className="text-sm text-center">Muted</p>
+            </div>
+            <div className="space-y-2">
+              <div className="h-16 bg-primary rounded-lg"></div>
+              <p className="text-sm text-center">Primary</p>
+            </div>
+            <div className="space-y-2">
+              <div className="h-16 bg-secondary rounded-lg"></div>
+              <p className="text-sm text-center">Secondary</p>
+            </div>
+            <div className="space-y-2">
+              <div className="h-16 bg-accent rounded-lg"></div>
+              <p className="text-sm text-center">Accent</p>
+            </div>
+            <div className="space-y-2">
+              <div className="h-16 bg-destructive rounded-lg"></div>
+              <p className="text-sm text-center">Destructive</p>
+            </div>
+            <div className="space-y-2">
+              <div className="h-16 bg-border rounded-lg"></div>
+              <p className="text-sm text-center">Border</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Component Examples */}
+        <div className="bg-card border border-border rounded-lg p-6">
+          <h2 className="text-2xl font-semibold mb-4">Component Examples</h2>
+          <div className="space-y-4">
+            <div className="flex flex-wrap gap-4">
+              <Button variant="primary">Default</Button>
+              <Button variant="secondary">Secondary</Button>
+              <Button variant="ghost">Outline</Button>
+              <Button variant="ghost">Ghost</Button>
+              <Button variant="ghost">Destructive</Button>
+            </div>
+            
+            <div className="p-4 bg-muted rounded-lg">
+              <p className="text-muted-foreground">
+                This is a muted background with muted foreground text.
+              </p>
+            </div>
+            
+            <div className="p-4 border border-border rounded-lg">
+              <p className="text-foreground">
+                This is a bordered container with foreground text.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Typography */}
+        <div className="bg-card border border-border rounded-lg p-6">
+          <h2 className="text-2xl font-semibold mb-4">Typography</h2>
+          <div className="space-y-4">
+            <h1 className="text-4xl font-bold text-foreground">Heading 1</h1>
+            <h2 className="text-3xl font-semibold text-foreground">Heading 2</h2>
+            <h3 className="text-2xl font-medium text-foreground">Heading 3</h3>
+            <p className="text-base text-foreground">
+              This is a paragraph with regular text color.
+            </p>
+            <p className="text-sm text-muted-foreground">
+              This is smaller text with muted foreground color.
+            </p>
+            <p className="text-xs text-muted-foreground">
+              This is extra small text with muted foreground color.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/app/updates/[slug]/page.tsx b/src/app/updates/[slug]/page.tsx
index d9d5b0b..02db4ef 100644
--- a/src/app/updates/[slug]/page.tsx
+++ b/src/app/updates/[slug]/page.tsx
@@ -60,7 +60,7 @@ export default async function UpdatePage({ params }: UpdatePageProps) {
             day: "numeric",
           })}
         </Pill>
-        <h1 className="text-4xl font-bold tracking-tight text-white sm:text-5xl">
+        <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
           {update.metadata.title}
         </h1>
 
@@ -68,7 +68,7 @@ export default async function UpdatePage({ params }: UpdatePageProps) {
         {author && (
           <div className="flex items-center gap-4">
             {author.avatar && (
-              <div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-full border-2 border-white/20">
+              <div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-full border-2 border-border/20">
                 <Image
                   src={author.avatar}
                   alt={author.name}
@@ -81,11 +81,11 @@ export default async function UpdatePage({ params }: UpdatePageProps) {
             <div>
               <Link
                 href={`/authors/${author.slug}`}
-                className="font-semibold text-white hover:text-cyan-300"
+                className="font-semibold text-foreground hover:text-cyan-300"
               >
                 {author.name}
               </Link>
-              <p className="text-sm text-white/60">{author.title}</p>
+              <p className="text-sm text-foreground/60">{author.title}</p>
             </div>
           </div>
         )}
@@ -97,7 +97,7 @@ export default async function UpdatePage({ params }: UpdatePageProps) {
       </div>
 
       {/* Back Link */}
-      <div className="mt-12 border-t border-white/10 pt-8">
+      <div className="mt-12 border-t border-border/10 pt-8">
         <Link
           href="/updates"
           className="text-sm text-cyan-400 transition hover:text-cyan-300"
diff --git a/src/app/updates/layout.tsx b/src/app/updates/layout.tsx
index 2b87c4c..7fe651f 100644
--- a/src/app/updates/layout.tsx
+++ b/src/app/updates/layout.tsx
@@ -6,7 +6,7 @@ export default function UpdatesLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="min-h-screen bg-slate-950 pt-24 text-slate-100">
+    <div className="min-h-screen bg-background pt-24 text-muted-foreground">
       <div className="absolute inset-x-0 top-[-6rem] -z-10 flex justify-center blur-3xl">
         <div className="h-[24rem] w-[60rem] bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 opacity-30" />
       </div>
diff --git a/src/app/updates/page.tsx b/src/app/updates/page.tsx
index 8891abe..0e26738 100644
--- a/src/app/updates/page.tsx
+++ b/src/app/updates/page.tsx
@@ -18,10 +18,10 @@ export default function UpdatesPage() {
       <section className="space-y-8 pt-12">
         <Pill>Latest News · Announcements · Community Updates</Pill>
         <div>
-          <h1 className="text-5xl font-semibold leading-tight text-white sm:text-6xl">
+          <h1 className="text-5xl font-semibold leading-tight text-foreground sm:text-6xl">
             Updates
           </h1>
-          <p className="mt-8 max-w-2xl text-lg text-white/70">
+          <p className="mt-8 max-w-2xl text-lg text-foreground/70">
             Stay informed about the latest news, announcements, and initiatives from
             the React Foundation.
           </p>
@@ -38,9 +38,9 @@ export default function UpdatesPage() {
               <ScrollReveal key={update.slug} animation="fade-up" delay={idx * 100}>
                 <Link
                   href={`/updates/${update.slug}`}
-                  className="block rounded-3xl border border-white/10 bg-slate-900/60 p-8 transition hover:border-white/20 hover:bg-slate-900/80"
+                  className="block rounded-3xl border border-border/10 bg-muted/60 p-8 transition hover:border-border/20 hover:bg-muted/80"
                 >
-                  <div className="flex items-center gap-4 text-xs text-white/50">
+                  <div className="flex items-center gap-4 text-xs text-foreground/50">
                     <time dateTime={update.metadata.date}>
                       {new Date(update.metadata.date).toLocaleDateString('en-US', {
                         year: 'numeric',
@@ -51,10 +51,10 @@ export default function UpdatesPage() {
                     <span>·</span>
                     <span>{author?.name || update.metadata.author}</span>
                   </div>
-                  <h2 className="mt-4 text-2xl font-semibold text-white sm:text-3xl">
+                  <h2 className="mt-4 text-2xl font-semibold text-foreground sm:text-3xl">
                     {update.metadata.title}
                   </h2>
-                  <p className="mt-4 text-base text-white/70">{update.metadata.description}</p>
+                  <p className="mt-4 text-base text-foreground/70">{update.metadata.description}</p>
                   <div className="mt-6 text-sm text-cyan-400 transition hover:text-cyan-300">
                     Read more →
                   </div>
diff --git a/src/components/error-boundary.tsx b/src/components/error-boundary.tsx
index f3d1297..9f74974 100644
--- a/src/components/error-boundary.tsx
+++ b/src/components/error-boundary.tsx
@@ -34,22 +34,22 @@ export class ErrorBoundary extends Component<Props, State> {
       }
 
       return (
-        <div className="flex min-h-[400px] flex-col items-center justify-center rounded-3xl border border-white/10 bg-slate-900/60 p-12 text-center">
+        <div className="flex min-h-[400px] flex-col items-center justify-center rounded-3xl border border-border/10 bg-muted/60 p-12 text-center">
           <div className="mb-6 text-6xl">⚠️</div>
-          <h2 className="mb-4 text-2xl font-bold text-white">Something went wrong</h2>
-          <p className="mb-6 max-w-md text-sm text-white/70">
+          <h2 className="mb-4 text-2xl font-bold text-foreground">Something went wrong</h2>
+          <p className="mb-6 max-w-md text-sm text-foreground/70">
             {this.state.error?.message || "An unexpected error occurred. Please try refreshing the page."}
           </p>
           <div className="flex gap-4">
             <button
               onClick={() => this.setState({ hasError: false, error: undefined })}
-              className="rounded-full border border-white/25 bg-slate-950/40 px-6 py-3 text-sm font-semibold text-white transition hover:border-white/40 hover:bg-white/10"
+              className="rounded-full border border-border/25 bg-background/40 px-6 py-3 text-sm font-semibold text-foreground transition hover:border-border/40 hover:bg-background/10"
             >
               Try Again
             </button>
             <Link
               href="/"
-              className="rounded-full bg-gradient-to-r from-sky-400 via-indigo-500 to-purple-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-indigo-500/30 transition hover:from-sky-300 hover:via-indigo-400 hover:to-purple-400"
+              className="rounded-full bg-gradient-to-r from-cyan-400 via-yellow-300 to-orange-500 px-6 py-3 text-sm font-semibold text-foreground shadow-lg shadow-yellow-500/30 transition hover:from-cyan-300 hover:via-yellow-400 hover:to-orange-400"
             >
               Go Home
             </Link>
diff --git a/src/components/home/become-contributor.tsx b/src/components/home/become-contributor.tsx
index eeed397..bcd2fe5 100644
--- a/src/components/home/become-contributor.tsx
+++ b/src/components/home/become-contributor.tsx
@@ -1,210 +1,185 @@
-import { ButtonLink } from "@/components/ui/button";
+'use client';
+
+import { RFDS } from "@/components/rfds";
+import Link from "next/link";
+
+const contributorData = [
+  {
+    variant: 'code' as const,
+    title: 'Contribute to Repos',
+    description:
+      'Submit code, RFCs, proposals, documentation, or bug reports to React and 54+ ecosystem libraries. Your contributions directly improve the tools millions of developers use.',
+    icon: (
+      <svg
+        className="h-7 w-7"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+        />
+      </svg>
+    ),
+    primaryAction: {
+      href: 'https://github.com/facebook/react',
+      label: 'Browse React Repos →',
+    },
+    secondaryAction: {
+      href: 'https://github.com/reactjs/rfcs',
+      label: 'View RFCs',
+    },
+  },
+  {
+    variant: 'donate' as const,
+    title: 'Make a Donation',
+    description:
+      'One-time or recurring donations directly fund maintainers, educational resources, and accessibility initiatives. 100% of funds go to the ecosystem.',
+    icon: (
+      <svg
+        className="h-7 w-7"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+    ),
+    primaryAction: {
+      href: '/store',
+      label: 'Shop to Donate →',
+    },
+    secondaryAction: {
+      href: '#',
+      label: 'Direct Donation',
+    },
+  },
+  {
+    variant: 'sponsor' as const,
+    title: 'Sponsor a Library',
+    description:
+      'Directly sponsor your favorite React ecosystem library. Choose from 54 libraries including Redux, TanStack Query, React Router, and more.',
+    icon: (
+      <svg
+        className="h-7 w-7"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+        />
+      </svg>
+    ),
+    primaryAction: {
+      href: '/impact#libraries',
+      label: 'Browse Libraries →',
+    },
+    secondaryAction: {
+      href: '#',
+      label: 'GitHub Sponsors',
+    },
+  },
+  {
+    variant: 'member' as const,
+    title: 'Become a Member',
+    description:
+      'Join the React Foundation as an official member. Get voting rights on funding decisions, exclusive updates, and recognition in our community.',
+    icon: (
+      <svg
+        className="h-7 w-7"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+        />
+      </svg>
+    ),
+    primaryAction: {
+      href: '/about',
+      label: 'Learn About Membership →',
+    },
+    secondaryAction: {
+      href: '#',
+      label: 'Apply Now',
+    },
+  },
+];
 
 export function BecomeContributor() {
+  const handleContactClick = () => {
+    const parts = ['hello', 'react', 'foundation'];
+    window.location.href = `mailto:${parts[0]}@${parts[1]}.${parts[2]}`;
+  };
+
   return (
     <section
       id="contribute"
-      className="scroll-mt-32 space-y-12 rounded-3xl border border-white/10 bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10 p-12"
+      className="relative isolate scroll-mt-32 rounded-3xl border border-border/10 p-12"
     >
+      <div className="absolute inset-0 -z-10 overflow-hidden rounded-3xl bg-gradient-vibrant" />
       <div className="text-center">
-        <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+        <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
           Become a Contributor
         </h2>
-        <p className="mx-auto mt-4 max-w-2xl text-base text-white/70">
+        <p className="mx-auto mt-4 max-w-2xl text-base text-foreground/70">
           Join the movement to sustain and grow the React ecosystem. Whether you code,
           donate, sponsor, or become a member, your contribution makes a real difference.
         </p>
       </div>
 
-      <div className="grid gap-6 lg:grid-cols-2">
-        {/* Contribute Code */}
-        <div className="group space-y-6 rounded-2xl border border-white/10 bg-slate-900/60 p-8 transition-all hover:border-white/20 hover:bg-slate-900/80">
-          <div className="flex items-start gap-4">
-            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-400 to-cyan-500 transition-transform group-hover:scale-110">
-              <svg
-                className="h-7 w-7 text-white"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={2}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
-                />
-              </svg>
-            </div>
-            <div className="flex-1">
-              <h3 className="text-xl font-semibold text-white">
-                Contribute to Repos
-              </h3>
-              <p className="mt-2 text-sm leading-relaxed text-white/70">
-                Submit code, RFCs, proposals, documentation, or bug reports to React
-                and 54+ ecosystem libraries. Your contributions directly improve the
-                tools millions of developers use.
-              </p>
-            </div>
-          </div>
-          <div className="flex flex-wrap gap-3 pt-2">
-            <ButtonLink
-              href="https://github.com/facebook/react"
-              variant="secondary"
-              size="sm"
-              className="group-hover:border-emerald-400/30"
-            >
-              Browse React Repos →
-            </ButtonLink>
-            <ButtonLink
-              href="https://github.com/reactjs/rfcs"
-              variant="ghost"
-              size="sm"
-            >
-              View RFCs
-            </ButtonLink>
-          </div>
-        </div>
-
-        {/* Donate */}
-        <div className="group space-y-6 rounded-2xl border border-white/10 bg-slate-900/60 p-8 transition-all hover:border-white/20 hover:bg-slate-900/80">
-          <div className="flex items-start gap-4">
-            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-sky-400 to-indigo-500 transition-transform group-hover:scale-110">
-              <svg
-                className="h-7 w-7 text-white"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={2}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </div>
-            <div className="flex-1">
-              <h3 className="text-xl font-semibold text-white">
-                Make a Donation
-              </h3>
-              <p className="mt-2 text-sm leading-relaxed text-white/70">
-                One-time or recurring donations directly fund maintainers, educational
-                resources, and accessibility initiatives. 100% of funds go to the
-                ecosystem.
-              </p>
-            </div>
-          </div>
-          <div className="flex flex-wrap gap-3 pt-2">
-            <ButtonLink
-              href="/store"
-              variant="secondary"
-              size="sm"
-              className="group-hover:border-sky-400/30"
-            >
-              Shop to Donate →
-            </ButtonLink>
-            <ButtonLink href="#" variant="ghost" size="sm">
-              Direct Donation
-            </ButtonLink>
-          </div>
-        </div>
-
-        {/* Sponsor a Library */}
-        <div className="group space-y-6 rounded-2xl border border-white/10 bg-slate-900/60 p-8 transition-all hover:border-white/20 hover:bg-slate-900/80">
-          <div className="flex items-start gap-4">
-            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-purple-400 to-pink-500 transition-transform group-hover:scale-110">
-              <svg
-                className="h-7 w-7 text-white"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={2}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-                />
-              </svg>
-            </div>
-            <div className="flex-1">
-              <h3 className="text-xl font-semibold text-white">
-                Sponsor a Library
-              </h3>
-              <p className="mt-2 text-sm leading-relaxed text-white/70">
-                Directly sponsor your favorite React ecosystem library. Choose from 54
-                libraries including Redux, TanStack Query, React Router, and more.
-              </p>
-            </div>
-          </div>
-          <div className="flex flex-wrap gap-3 pt-2">
-            <ButtonLink
-              href="/impact#libraries"
-              variant="secondary"
-              size="sm"
-              className="group-hover:border-purple-400/30"
-            >
-              Browse Libraries →
-            </ButtonLink>
-            <ButtonLink href="#" variant="ghost" size="sm">
-              GitHub Sponsors
-            </ButtonLink>
-          </div>
-        </div>
-
-        {/* Become a Member */}
-        <div className="group space-y-6 rounded-2xl border border-white/10 bg-slate-900/60 p-8 transition-all hover:border-white/20 hover:bg-slate-900/80">
-          <div className="flex items-start gap-4">
-            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-orange-400 to-red-500 transition-transform group-hover:scale-110">
-              <svg
-                className="h-7 w-7 text-white"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth={2}
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-                />
-              </svg>
-            </div>
-            <div className="flex-1">
-              <h3 className="text-xl font-semibold text-white">
-                Become a Member
-              </h3>
-              <p className="mt-2 text-sm leading-relaxed text-white/70">
-                Join the React Foundation as an official member. Get voting rights on
-                funding decisions, exclusive updates, and recognition in our community.
-              </p>
-            </div>
-          </div>
-          <div className="flex flex-wrap gap-3 pt-2">
-            <ButtonLink
-              href="/about"
-              variant="secondary"
-              size="sm"
-              className="group-hover:border-orange-400/30"
-            >
-              Learn About Membership →
-            </ButtonLink>
-            <ButtonLink href="#" variant="ghost" size="sm">
-              Apply Now
-            </ButtonLink>
-          </div>
-        </div>
+      <div className="mt-12 grid gap-6 lg:grid-cols-2">
+        {contributorData.map((item) => (
+          <RFDS.ContributorCard
+            key={item.variant}
+            icon={<RFDS.ContributorIcon variant={item.variant}>{item.icon}</RFDS.ContributorIcon>}
+            title={item.title}
+            description={item.description}
+            actions={
+              <>
+                <Link
+                  href={item.primaryAction.href}
+                  className="inline-flex items-center justify-center gap-2 rounded-md border border-border bg-secondary px-3 py-2 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+                >
+                  {item.primaryAction.label}
+                </Link>
+                <Link
+                  href={item.secondaryAction.href}
+                  className="inline-flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+                >
+                  {item.secondaryAction.label}
+                </Link>
+              </>
+            }
+          />
+        ))}
       </div>
 
-      <div className="border-t border-white/10 pt-8 text-center">
-        <p className="text-sm text-white/60">
+      <div className="mt-8 border-t border-border/10 pt-8 text-center">
+        <p className="text-sm text-foreground/60">
           Questions about contributing?{" "}
-          <a
-            href="mailto:hello@react.foundation"
-            className="font-medium text-cyan-400 transition hover:text-cyan-300"
+          <button
+            onClick={handleContactClick}
+            className="font-medium text-primary transition-colors hover:text-primary/80 hover:underline"
           >
             Get in touch
-          </a>
+          </button>
         </p>
       </div>
     </section>
diff --git a/src/components/home/by-the-numbers.tsx b/src/components/home/by-the-numbers.tsx
index d18ebf5..403cabe 100644
--- a/src/components/home/by-the-numbers.tsx
+++ b/src/components/home/by-the-numbers.tsx
@@ -3,26 +3,26 @@ import { ScrollReveal } from "@/components/ui/scroll-reveal";
 export function ByTheNumbers() {
   return (
     <ScrollReveal animation="fade-up">
-      <section className="scroll-mt-32 space-y-8 rounded-3xl border border-white/10 bg-slate-900/60 p-12 text-center">
-        <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+      <section className="scroll-mt-32 space-y-8 rounded-3xl border border-border/10 bg-muted/60 p-12 text-center">
+        <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
           By the Numbers
         </h2>
         <div className="grid gap-8 sm:grid-cols-3">
           <div className="space-y-2">
-            <div className="text-5xl font-bold text-white sm:text-6xl">54</div>
-            <div className="text-sm uppercase tracking-[0.2em] text-white/60">
+            <div className="text-5xl font-bold text-foreground sm:text-6xl">54</div>
+            <div className="text-sm uppercase tracking-[0.2em] text-foreground/60">
               Libraries Supported
             </div>
           </div>
           <div className="space-y-2">
-            <div className="text-5xl font-bold text-white sm:text-6xl">100%</div>
-            <div className="text-sm uppercase tracking-[0.2em] text-white/60">
+            <div className="text-5xl font-bold text-foreground sm:text-6xl">100%</div>
+            <div className="text-sm uppercase tracking-[0.2em] text-foreground/60">
               Transparency
             </div>
           </div>
           <div className="space-y-2">
-            <div className="text-5xl font-bold text-white sm:text-6xl">∞</div>
-            <div className="text-sm uppercase tracking-[0.2em] text-white/60">
+            <div className="text-5xl font-bold text-foreground sm:text-6xl">∞</div>
+            <div className="text-sm uppercase tracking-[0.2em] text-foreground/60">
               Community Impact
             </div>
           </div>
diff --git a/src/components/home/ecosystem-libraries.tsx b/src/components/home/ecosystem-libraries.tsx
index 9941583..f69d6b8 100644
--- a/src/components/home/ecosystem-libraries.tsx
+++ b/src/components/home/ecosystem-libraries.tsx
@@ -79,10 +79,10 @@ export function EcosystemLibraries({
     <ScrollReveal animation="scale">
       <section
         id={id}
-        className="scroll-mt-32 space-y-8 rounded-3xl border border-white/10 bg-slate-900/60 p-12"
+        className="scroll-mt-32 space-y-8 rounded-3xl border border-border/10 bg-muted/60 p-12"
       >
-        <h2 className="text-3xl font-semibold text-white sm:text-4xl">{title}</h2>
-        <p className="max-w-3xl text-lg text-white/70">{description}</p>
+        <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">{title}</h2>
+        <p className="max-w-3xl text-lg text-foreground/70">{description}</p>
 
         <div className="space-y-8 pt-6">
           {categorizedLibraries.map((cat) => {
@@ -91,7 +91,7 @@ export function EcosystemLibraries({
 
             return (
               <div key={cat.category}>
-                <h3 className="mb-4 text-sm font-semibold uppercase tracking-[0.2em] text-white/60">
+                <h3 className="mb-4 text-sm font-semibold uppercase tracking-[0.2em] text-foreground/60">
                   {cat.name} · {libs.length} {libs.length === 1 ? "library" : "libraries"}
                 </h3>
                 <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
@@ -113,7 +113,7 @@ export function EcosystemLibraries({
         </div>
 
         <div className="pt-6 text-center">
-          <p className="text-sm text-white/60">
+          <p className="text-sm text-foreground/60">
             Total: {ecosystemLibraries.length} libraries tracked · All contributions
             verified via GitHub
           </p>
diff --git a/src/components/home/executive-message.tsx b/src/components/home/executive-message.tsx
index 3b871ed..37aca45 100644
--- a/src/components/home/executive-message.tsx
+++ b/src/components/home/executive-message.tsx
@@ -4,10 +4,10 @@ import Image from "next/image";
 export function ExecutiveMessage() {
   return (
     <ScrollReveal animation="fade-up">
-      <section className="scroll-mt-32 space-y-8 rounded-3xl border border-white/10 bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10 p-12">
+      <section className="scroll-mt-32 space-y-8 rounded-3xl border border-border/10 bg-gradient-accent p-12">
         <div className="space-y-6 text-center">
           <div className="flex justify-center">
-            <div className="relative h-32 w-32 shrink-0 overflow-hidden rounded-full border-4 border-white/20 bg-slate-900 shadow-2xl">
+            <div className="relative h-32 w-32 shrink-0 overflow-hidden rounded-full border-4 border-border/20 bg-muted shadow-2xl">
               <Image
                 src="/seth-webster-headshot.jpeg"
                 alt="Seth Webster, Executive Director"
@@ -18,12 +18,12 @@ export function ExecutiveMessage() {
               />
             </div>
           </div>
-          <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+          <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
             A Message from Our Executive Director
           </h2>
         </div>
 
-        <div className="prose prose-lg prose-invert prose-cyan mx-auto max-w-3xl">
+        <div className="mx-auto max-w-3xl space-y-6 leading-relaxed text-foreground">
           <p>
             You know, every so often, something comes along in software that changes not
             just how we build — but why we build.
@@ -69,7 +69,7 @@ export function ExecutiveMessage() {
           </p>
 
           <p>
-            <strong>
+            <strong className="font-semibold">
               Because this isn&apos;t just about governance. It&apos;s about legacy.
               <br />
               It&apos;s about ensuring that the ideas we build together endure.
@@ -94,14 +94,14 @@ export function ExecutiveMessage() {
           </p>
 
           <p>
-            <strong>Let&apos;s make the next chapter one that lasts for generations.</strong>
+            <strong className="font-semibold">Let&apos;s make the next chapter one that lasts for generations.</strong>
           </p>
         </div>
 
-        <div className="border-t border-white/10 pt-8 text-center">
+        <div className="border-t border-border/10 pt-8 text-center">
           <div className="space-y-2">
-            <p className="text-lg font-semibold text-white">Seth Webster</p>
-            <p className="text-sm text-white/60">Executive Director, React Foundation</p>
+            <p className="text-lg font-semibold text-foreground">Seth Webster</p>
+            <p className="text-sm text-foreground/60">Executive Director, React Foundation</p>
           </div>
         </div>
       </section>
diff --git a/src/components/home/featured-collections.tsx b/src/components/home/featured-collections.tsx
index 451b183..92f7bf4 100644
--- a/src/components/home/featured-collections.tsx
+++ b/src/components/home/featured-collections.tsx
@@ -48,14 +48,14 @@ export function FeaturedCollections({ collections }: FeaturedCollectionsProps) {
     <section
       id="featured"
       style={{ scrollMarginTop: "160px" }}
-      className="space-y-10 rounded-3xl border border-white/10 bg-white/5 p-10 backdrop-blur"
+      className="space-y-10 rounded-3xl border border-border/10 bg-background/5 p-10 backdrop-blur"
     >
       <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
         <div>
-          <h2 className="text-3xl font-semibold text-white">
+          <h2 className="text-3xl font-semibold text-foreground">
             Signature Collections
           </h2>
-          <p className="mt-3 max-w-lg text-sm text-white/60">
+          <p className="mt-3 max-w-lg text-sm text-foreground/60">
             Build a wardrobe that champions open-source. Explore curated edits
             engineered for meetups, keynotes, and everyday hacking.
           </p>
@@ -77,9 +77,9 @@ export function FeaturedCollections({ collections }: FeaturedCollectionsProps) {
             <ScrollReveal key={collection.id} animation="fade-up" delay={index * 100}>
               <Link
                 href={`/store/collections/${collection.handle}`}
-                className="flex flex-col gap-4 rounded-2xl border border-white/10 bg-slate-900/70 p-6 transition hover:border-white/25 hover:bg-slate-900"
+                className="flex flex-col gap-4 rounded-2xl border border-border/10 bg-muted/70 p-6 transition hover:border-border/25 hover:bg-muted"
               >
-                <div className="relative h-40 overflow-hidden rounded-xl border border-white/10">
+                <div className="relative h-40 overflow-hidden rounded-xl border border-border/10">
                   <Image
                     src={imageUrl}
                     alt={imageAlt}
@@ -89,10 +89,10 @@ export function FeaturedCollections({ collections }: FeaturedCollectionsProps) {
                   />
                 </div>
                 <div>
-                  <h3 className="text-lg font-semibold text-white">
+                  <h3 className="text-lg font-semibold text-foreground">
                     {collection.title}
                   </h3>
-                  <p className="mt-2 text-sm text-white/60">
+                  <p className="mt-2 text-sm text-foreground/60">
                     {collection.description}
                   </p>
                 </div>
diff --git a/src/components/home/featured-look.tsx b/src/components/home/featured-look.tsx
index 1322dd2..a465352 100644
--- a/src/components/home/featured-look.tsx
+++ b/src/components/home/featured-look.tsx
@@ -13,16 +13,16 @@ export function FeaturedLook({ products }: FeaturedLookProps) {
   const sideProducts = products.slice(1, 3);
 
   return (
-    <div className="relative h-[32rem] overflow-hidden rounded-3xl border border-white/10 bg-slate-900/60">
-      <div className="absolute inset-x-6 top-6 rounded-2xl border border-white/10 bg-slate-900/90 p-6 shadow-2xl shadow-indigo-500/20">
-        <div className="flex items-center justify-between text-xs text-white/60">
+    <div className="relative h-[32rem] overflow-hidden rounded-3xl border border-border/10 bg-muted/60">
+      <div className="absolute inset-x-6 top-6 rounded-2xl border border-border/10 bg-muted/90 p-6 shadow-2xl shadow-indigo-500/20">
+        <div className="flex items-center justify-between text-xs text-foreground/60">
           <p>Featured Look</p>
           <p>React Summit Capsule</p>
         </div>
         <div className="mt-6 grid gap-4">
           {/* Main featured product image */}
           {mainProduct?.primaryImage ? (
-            <div className="relative h-36 overflow-hidden rounded-2xl border border-white/10">
+            <div className="relative h-36 overflow-hidden rounded-2xl border border-border/10">
               <Image
                 src={mainProduct.primaryImage.src}
                 alt={mainProduct.primaryImage.alt}
@@ -36,7 +36,7 @@ export function FeaturedLook({ products }: FeaturedLookProps) {
               />
             </div>
           ) : (
-            <div className="relative h-36 overflow-hidden rounded-2xl border border-white/10">
+            <div className="relative h-36 overflow-hidden rounded-2xl border border-border/10">
               <Image
                 src="/placeholders/collection-core.png"
                 alt="React Summit capsule collection hero garment"
@@ -54,7 +54,7 @@ export function FeaturedLook({ products }: FeaturedLookProps) {
               product?.primaryImage ? (
                 <div
                   key={product.slug}
-                  className="relative h-24 overflow-hidden rounded-xl border border-white/10"
+                  className="relative h-24 overflow-hidden rounded-xl border border-border/10"
                 >
                   <Image
                     src={product.primaryImage.src}
@@ -70,7 +70,7 @@ export function FeaturedLook({ products }: FeaturedLookProps) {
               ) : (
                 <div
                   key={`placeholder-${index}`}
-                  className="relative h-24 overflow-hidden rounded-xl border border-white/10"
+                  className="relative h-24 overflow-hidden rounded-xl border border-border/10"
                 >
                   <Image
                     src={
@@ -92,7 +92,7 @@ export function FeaturedLook({ products }: FeaturedLookProps) {
             )}
           </div>
         </div>
-        <div className="mt-6 flex items-center justify-between text-sm text-white/70">
+        <div className="mt-6 flex items-center justify-between text-sm text-foreground/70">
           <p>Ships globally</p>
           <ButtonLink
             href={mainProduct ? `/store/products/${mainProduct.slug}` : "/store#drops"}
@@ -104,7 +104,7 @@ export function FeaturedLook({ products }: FeaturedLookProps) {
           </ButtonLink>
         </div>
       </div>
-      <div className="absolute -right-12 bottom-6 h-52 w-52 rounded-full bg-gradient-to-b from-indigo-500/40 to-blue-400/40 blur-3xl" />
+      <div className="absolute -right-12 bottom-6 h-52 w-52 rounded-full bg-gradient-to-b from-cyan-500/40 to-yellow-400/40 blur-3xl" />
       <div className="absolute -left-16 top-20 h-36 w-36 rounded-full bg-gradient-to-b from-rose-400/30 to-amber-400/30 blur-3xl" />
     </div>
   );
diff --git a/src/components/home/foundation-hero.tsx b/src/components/home/foundation-hero.tsx
index a9ca39e..01b9d23 100644
--- a/src/components/home/foundation-hero.tsx
+++ b/src/components/home/foundation-hero.tsx
@@ -7,10 +7,10 @@ export function FoundationHero() {
     <section className="space-y-8 pt-12">
       <Pill>Community-Driven · Transparent · Impactful</Pill>
       <div>
-        <h1 className="text-5xl font-semibold leading-tight text-white sm:text-6xl lg:text-7xl">
+        <h1 className="text-5xl font-semibold leading-tight text-foreground sm:text-6xl lg:text-7xl">
           Building the future of React, together.
         </h1>
-        <p className="mt-8 max-w-2xl text-lg text-white/70">
+        <p className="mt-8 max-w-2xl text-lg text-foreground/70">
           The React Foundation is a community-driven initiative dedicated to sustaining
           and advancing the React ecosystem by funding maintainers, supporting education,
           and ensuring accessibility for all developers.
diff --git a/src/components/home/founding-members.tsx b/src/components/home/founding-members.tsx
index 3c076f5..e40cb7b 100644
--- a/src/components/home/founding-members.tsx
+++ b/src/components/home/founding-members.tsx
@@ -4,19 +4,19 @@ import Image from "next/image";
 export function FoundingMembers() {
   return (
     <ScrollReveal animation="fade-up">
-      <section className="scroll-mt-32 space-y-8 rounded-3xl border border-white/10 bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10 p-12">
+      <section className="scroll-mt-32 space-y-8 rounded-3xl border border-border/10 bg-gradient-to-br from-cyan-500/10 via-yellow-400/10 to-orange-500/10 p-12">
         <div className="text-center">
-          <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+          <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
             Founding Members
           </h2>
-          <p className="mx-auto mt-4 max-w-2xl text-base text-white/70">
+          <p className="mx-auto mt-4 max-w-2xl text-base text-foreground/70">
             We&apos;re grateful to our founding members who believe in sustaining the
             React ecosystem and supporting open source maintainers.
           </p>
         </div>
 
         <div className="flex justify-center pt-8">
-          <div className="relative w-full max-w-4xl overflow-hidden rounded-2xl border border-white/10 p-8">
+          <div className="relative w-full max-w-4xl overflow-hidden rounded-2xl border border-border/10 p-8">
             {/* Blue to charcoal gradient background */}
             <div className="absolute inset-0 bg-gradient-to-br from-blue-900/40 via-slate-800/60 to-slate-900/80" />
 
@@ -42,8 +42,8 @@ export function FoundingMembers() {
           </div>
         </div>
 
-        <div className="border-t border-white/10 pt-8 text-center">
-          <p className="text-sm text-white/60">
+        <div className="border-t border-border/10 pt-8 text-center">
+          <p className="text-sm text-foreground/60">
             Interested in becoming a sponsor member?{" "}
             <a
               href="mailto:partnerships@react.foundation"
diff --git a/src/components/home/hero-badges.tsx b/src/components/home/hero-badges.tsx
index c6bfb80..eea74f2 100644
--- a/src/components/home/hero-badges.tsx
+++ b/src/components/home/hero-badges.tsx
@@ -1,16 +1,16 @@
 export function HeroBadges() {
   return (
-    <div className="flex flex-col gap-4 text-xs uppercase tracking-[0.2em] text-white/50 sm:flex-row sm:items-center sm:gap-6 sm:tracking-[0.25em]">
+    <div className="flex flex-col gap-4 text-xs uppercase tracking-[0.2em] text-foreground/50 sm:flex-row sm:items-center sm:gap-6 sm:tracking-[0.25em]">
       <div className="flex items-center gap-2">
-        <div className="h-1 w-8 shrink-0 bg-emerald-400" />
+        <div className="h-1 w-8 shrink-0 bg-success/50" />
         <span className="whitespace-nowrap">100% Transparent</span>
       </div>
       <div className="flex items-center gap-2">
-        <div className="h-1 w-8 shrink-0 bg-sky-400" />
+        <div className="h-1 w-8 shrink-0 bg-primary/50" />
         <span className="whitespace-nowrap">Community First</span>
       </div>
       <div className="flex items-center gap-2">
-        <div className="h-1 w-8 shrink-0 bg-rose-400" />
+        <div className="h-1 w-8 shrink-0 bg-destructive/50" />
         <span className="whitespace-nowrap">Open Source</span>
       </div>
     </div>
diff --git a/src/components/home/hero.tsx b/src/components/home/hero.tsx
index 4e512e8..1deb6db 100644
--- a/src/components/home/hero.tsx
+++ b/src/components/home/hero.tsx
@@ -12,10 +12,10 @@ export function Hero({ heroProduct }: HeroProps) {
     <div className="space-y-8">
       <Pill>{heroProduct?.releaseWindow ?? "Drop 05 · Winter 2025"}</Pill>
       <div>
-        <h1 className="text-5xl font-semibold leading-tight text-white sm:text-6xl">
+        <h1 className="text-5xl font-semibold leading-tight text-foreground sm:text-6xl">
           Fund the React Foundation in style.
         </h1>
-        <p className="mt-6 max-w-xl text-lg text-white/70">
+        <p className="mt-6 max-w-xl text-lg text-foreground/70">
           Premium gear designed with the community, for the community. Every
           purchase accelerates open-source sustainability and React education
           worldwide.
@@ -37,17 +37,17 @@ export function Hero({ heroProduct }: HeroProps) {
           className="mt-2"
         />
       ) : null}
-      <div className="flex items-center gap-6 text-xs uppercase tracking-[0.25em] text-white/50">
+      <div className="flex items-center gap-6 text-xs uppercase tracking-[0.25em] text-foreground/50">
         <div className="flex items-center gap-2">
-          <div className="h-1 w-8 bg-emerald-400" />
+          <div className="h-1 w-8 bg-success/50" />
           Built for Devs
         </div>
         <div className="flex items-center gap-2">
-          <div className="h-1 w-8 bg-sky-400" />
+          <div className="h-1 w-8 bg-primary/50" />
           Carbon Neutral
         </div>
         <div className="flex items-center gap-2">
-          <div className="h-1 w-8 bg-rose-400" />
+          <div className="h-1 w-8 bg-destructive/50" />
           Profits → Foundation
         </div>
       </div>
diff --git a/src/components/home/join-movement-cta.tsx b/src/components/home/join-movement-cta.tsx
index 3fce966..ffbcc51 100644
--- a/src/components/home/join-movement-cta.tsx
+++ b/src/components/home/join-movement-cta.tsx
@@ -4,11 +4,11 @@ import { ScrollReveal } from "@/components/ui/scroll-reveal";
 export function JoinMovementCTA() {
   return (
     <ScrollReveal animation="scale">
-      <section className="scroll-mt-32 space-y-8 rounded-3xl border border-white/10 bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10 p-12 text-center">
-        <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+      <section className="scroll-mt-32 space-y-8 rounded-3xl border border-border/10 bg-gradient-to-br from-cyan-500/10 via-yellow-400/10 to-orange-500/10 p-12 text-center">
+        <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
           Join the Movement
         </h2>
-        <p className="mx-auto max-w-2xl text-lg text-white/70">
+        <p className="mx-auto max-w-2xl text-lg text-foreground/70">
           Whether you&apos;re a contributor, maintainer, or React enthusiast, there are
           many ways to support the foundation and help build a sustainable future
           for open source.
diff --git a/src/components/home/limited-drops.tsx b/src/components/home/limited-drops.tsx
index 7abadfc..58c8092 100644
--- a/src/components/home/limited-drops.tsx
+++ b/src/components/home/limited-drops.tsx
@@ -20,14 +20,14 @@ export function LimitedDrops({ heroProduct, dropTiles }: LimitedDropsProps) {
   return (
     <section id="drops" style={{ scrollMarginTop: "160px" }} className="space-y-10">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <h2 className="text-3xl font-semibold text-white">Limited Drops</h2>
-        <p className="text-sm text-white/60">
+        <h2 className="text-3xl font-semibold text-foreground">Limited Drops</h2>
+        <p className="text-sm text-foreground/60">
           Micro-batches, numbered pieces, collabs with the React core team.
         </p>
       </div>
       <div className="grid gap-6 lg:grid-cols-[420px_minmax(0,1fr)]">
-        <div className="rounded-3xl border border-white/10 bg-gradient-to-br from-indigo-600/50 via-purple-500/30 to-slate-900 p-8">
-          <div className="relative mb-6 h-48 overflow-hidden rounded-2xl border border-white/15">
+        <div className="rounded-3xl border border-border/10 bg-gradient-to-br from-cyan-600/50 via-yellow-400/30 to-slate-900 p-8">
+          <div className="relative mb-6 h-48 overflow-hidden rounded-2xl border border-border/15">
             {heroImage ? (
               <Image
                 src={heroImage.src}
@@ -53,22 +53,22 @@ export function LimitedDrops({ heroProduct, dropTiles }: LimitedDropsProps) {
           </div>
           <div className="space-y-1">
             {heroInventory ? (
-              <p className="text-[11px] uppercase tracking-[0.35em] text-white/70">
+              <p className="text-[11px] uppercase tracking-[0.35em] text-foreground/70">
                 {heroInventory.inventoryLabel} · {heroInventory.availabilityLabel}
               </p>
             ) : null}
-            <p className="text-xs uppercase tracking-[0.3em] text-white/70">
+            <p className="text-xs uppercase tracking-[0.3em] text-foreground/70">
               {heroProduct?.releaseWindow ?? "Next in queue"}
             </p>
           </div>
-          <h3 className="mt-4 text-2xl font-semibold text-white">
+          <h3 className="mt-4 text-2xl font-semibold text-foreground">
             {heroProduct?.name ?? "The Fiber Jacket"}
           </h3>
           <p className="mt-3 text-sm text-indigo-100/80">
             {heroProduct?.tagline ??
               "A technical shell engineered with seam-sealed pockets, hidden QR code storytelling, and NFC souvenir tag."}
           </p>
-          <div className="mt-6 space-y-2 text-xs text-white/70">
+          <div className="mt-6 space-y-2 text-xs text-foreground/70">
             <p>{heroProduct?.status ?? "Preorders open • Feb 18"}</p>
             <p>
               {heroProduct?.highlights[0] ??
diff --git a/src/components/home/mission-statement.tsx b/src/components/home/mission-statement.tsx
index 3cb40cb..24865f1 100644
--- a/src/components/home/mission-statement.tsx
+++ b/src/components/home/mission-statement.tsx
@@ -5,12 +5,12 @@ export function MissionStatement() {
     <ScrollReveal animation="fade-up">
       <section
         id="mission"
-        className="scroll-mt-32 space-y-6 rounded-3xl border border-white/10 bg-slate-900/60 p-12"
+        className="scroll-mt-32 space-y-6 rounded-3xl border border-border/10 bg-muted/60 p-12"
       >
-        <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+        <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
           Our Mission
         </h2>
-        <p className="max-w-3xl text-lg leading-relaxed text-white/70">
+        <p className="max-w-3xl text-lg leading-relaxed text-foreground/70">
           We exist to ensure the React ecosystem thrives for generations to come.
           By creating sustainable funding mechanisms and transparent governance,
           we empower maintainers to build the tools millions of developers rely on.
diff --git a/src/components/home/past-drops-collections.tsx b/src/components/home/past-drops-collections.tsx
index eeaae41..6d123a0 100644
--- a/src/components/home/past-drops-collections.tsx
+++ b/src/components/home/past-drops-collections.tsx
@@ -17,8 +17,8 @@ export function PastDropsCollections({ collections }: PastDropsCollectionsProps)
   return (
     <section id="past-drops" style={{ scrollMarginTop: "160px" }} className="space-y-10">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <h2 className="text-3xl font-semibold text-white">Past Drops Archive</h2>
-        <p className="text-sm text-white/60">
+        <h2 className="text-3xl font-semibold text-foreground">Past Drops Archive</h2>
+        <p className="text-sm text-foreground/60">
           Explore previous releases that funded React Foundation initiatives.
         </p>
       </div>
@@ -36,10 +36,10 @@ export function PastDropsCollections({ collections }: PastDropsCollectionsProps)
             <Link
               key={collection.id}
               href={`/store/collections/${collection.handle}`}
-              className="group flex flex-col gap-4 rounded-2xl border border-white/10 bg-slate-900/70 p-6 transition hover:border-white/25 hover:bg-slate-900"
+              className="group flex flex-col gap-4 rounded-2xl border border-border/10 bg-muted/70 p-6 transition hover:border-border/25 hover:bg-muted"
             >
               {collection.image ? (
-                <div className="relative h-48 overflow-hidden rounded-xl border border-white/10">
+                <div className="relative h-48 overflow-hidden rounded-xl border border-border/10">
                   <Image
                     src={collection.image.url}
                     alt={collection.image.altText || collection.title}
@@ -49,41 +49,41 @@ export function PastDropsCollections({ collections }: PastDropsCollectionsProps)
                   />
                 </div>
               ) : (
-                <div className="relative h-48 overflow-hidden rounded-xl border border-white/10 bg-gradient-to-br from-slate-800 to-slate-900">
-                  <div className="flex h-full items-center justify-center text-4xl font-bold text-white/10">
+                <div className="relative h-48 overflow-hidden rounded-xl border border-border/10 bg-gradient-to-br from-slate-800 to-slate-900">
+                  <div className="flex h-full items-center justify-center text-4xl font-bold text-foreground/10">
                     {collection.dropNumber?.toString().padStart(2, '0')}
                   </div>
                 </div>
               )}
 
               <div className="space-y-2">
-                <div className="flex items-center gap-2 text-xs text-white/50">
+                <div className="flex items-center gap-2 text-xs text-foreground/50">
                   {dropLabel && seasonYear && (
-                    <span className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5">
+                    <span className="rounded-full border border-border/10 bg-background/5 px-2 py-0.5">
                       {dropLabel} · {seasonYear}
                     </span>
                   )}
                 </div>
 
-                <h3 className="text-lg font-semibold text-white">
+                <h3 className="text-lg font-semibold text-foreground">
                   {collection.dropTheme || collection.title}
                 </h3>
 
                 {collection.description && (
-                  <p className="line-clamp-2 text-sm text-white/60">
+                  <p className="line-clamp-2 text-sm text-foreground/60">
                     {collection.description}
                   </p>
                 )}
 
                 {collection.limitedEditionSize && (
-                  <p className="text-xs text-white/40">
+                  <p className="text-xs text-foreground/40">
                     Limited edition of {collection.limitedEditionSize}
                   </p>
                 )}
               </div>
 
               <div className="mt-auto flex items-center justify-between">
-                <span className="text-xs text-white/40">
+                <span className="text-xs text-foreground/40">
                   {productCount > 0 ? `${productCount}+ products` : 'View drop'}
                 </span>
                 <span className="text-xs text-sky-400 transition group-hover:text-sky-300">
diff --git a/src/components/home/past-drops.tsx b/src/components/home/past-drops.tsx
index 18866eb..4661818 100644
--- a/src/components/home/past-drops.tsx
+++ b/src/components/home/past-drops.tsx
@@ -16,8 +16,8 @@ export function PastDrops({ products }: PastDropsProps) {
   return (
     <section id="past-drops" style={{ scrollMarginTop: "160px" }} className="space-y-10">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <h2 className="text-3xl font-semibold text-white">Past Drops Archive</h2>
-        <p className="text-sm text-white/60">
+        <h2 className="text-3xl font-semibold text-foreground">Past Drops Archive</h2>
+        <p className="text-sm text-foreground/60">
           Explore the releases that funded previous React Foundation initiatives.
         </p>
       </div>
diff --git a/src/components/home/three-pillars.tsx b/src/components/home/three-pillars.tsx
index 8fb6766..9cdfc60 100644
--- a/src/components/home/three-pillars.tsx
+++ b/src/components/home/three-pillars.tsx
@@ -6,22 +6,22 @@ export function ThreePillars() {
     <ScrollReveal animation="scale">
       <section
         id="pillars"
-        className="scroll-mt-32 space-y-12 rounded-3xl border border-white/10 bg-slate-900/60 p-12"
+        className="scroll-mt-32 space-y-12 rounded-3xl border border-border/10 bg-muted/60 p-12"
       >
         <div className="text-center">
-          <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+          <h2 className="text-3xl font-semibold text-foreground sm:text-4xl">
             Three Pillars of Impact
           </h2>
-          <p className="mx-auto mt-4 max-w-2xl text-base text-white/60">
+          <p className="mx-auto mt-4 max-w-2xl text-base text-foreground/60">
             Every contribution supports our three core initiatives
           </p>
         </div>
 
         <div className="grid gap-8 lg:grid-cols-3">
-          <div className="space-y-4 rounded-2xl border border-white/10 bg-white/[0.03] p-8">
+          <div className="space-y-4 rounded-2xl border border-border/10 bg-background/[0.03] p-8">
             <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-400 to-cyan-500">
               <svg
-                className="h-8 w-8 text-white"
+                className="h-8 w-8 text-foreground"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -34,10 +34,10 @@ export function ThreePillars() {
                 />
               </svg>
             </div>
-            <h3 className="text-xl font-semibold text-white">
+            <h3 className="text-xl font-semibold text-foreground">
               Fund Maintainers
             </h3>
-            <p className="text-sm leading-relaxed text-white/70">
+            <p className="text-sm leading-relaxed text-foreground/70">
               Direct financial support for the developers maintaining the libraries
               you depend on every day. Every purchase helps sustain open source.
             </p>
@@ -48,10 +48,10 @@ export function ThreePillars() {
             </div>
           </div>
 
-          <div className="space-y-4 rounded-2xl border border-white/10 bg-white/[0.03] p-8">
+          <div className="space-y-4 rounded-2xl border border-border/10 bg-background/[0.03] p-8">
             <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-indigo-500">
               <svg
-                className="h-8 w-8 text-white"
+                className="h-8 w-8 text-foreground"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -64,10 +64,10 @@ export function ThreePillars() {
                 />
               </svg>
             </div>
-            <h3 className="text-xl font-semibold text-white">
+            <h3 className="text-xl font-semibold text-foreground">
               Education & Resources
             </h3>
-            <p className="text-sm leading-relaxed text-white/70">
+            <p className="text-sm leading-relaxed text-foreground/70">
               Supporting tutorials, documentation, workshops, and learning materials
               that help developers master React and its ecosystem.
             </p>
@@ -78,10 +78,10 @@ export function ThreePillars() {
             </div>
           </div>
 
-          <div className="space-y-4 rounded-2xl border border-white/10 bg-white/[0.03] p-8">
-            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-purple-400 to-pink-500">
+          <div className="space-y-4 rounded-2xl border border-border/10 bg-background/[0.03] p-8">
+            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-yellow-300 to-orange-500">
               <svg
-                className="h-8 w-8 text-white"
+                className="h-8 w-8 text-foreground"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -94,10 +94,10 @@ export function ThreePillars() {
                 />
               </svg>
             </div>
-            <h3 className="text-xl font-semibold text-white">
+            <h3 className="text-xl font-semibold text-foreground">
               Global Accessibility
             </h3>
-            <p className="text-sm leading-relaxed text-white/70">
+            <p className="text-sm leading-relaxed text-foreground/70">
               Ensuring React remains accessible and inclusive for developers worldwide,
               regardless of location, background, or resources.
             </p>
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index c35d3a3..82b2772 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -4,17 +4,17 @@ export function Footer() {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="mt-20 border-t border-white/10 pt-8 text-sm text-white/50">
+    <footer className="mt-20 border-t border-border/10 p-20 text-sm text-foreground/50">
       <div className="mx-auto flex max-w-6xl flex-col gap-6 px-6 sm:flex-row sm:items-center sm:justify-between sm:px-8 lg:px-12">
         <p>© {currentYear} React Foundation. All rights reserved.</p>
         <div className="flex flex-wrap gap-6">
-          <Link className="transition hover:text-white" href="/privacy">
+          <Link className="transition hover:text-foreground" href="/privacy">
             Privacy
           </Link>
-          <Link className="transition hover:text-white" href="/terms">
+          <Link className="transition hover:text-foreground" href="/terms">
             Terms
           </Link>
-          <a className="transition hover:text-white" href="#accessibility">
+          <a className="transition hover:text-foreground" href="#accessibility">
             Accessibility
           </a>
         </div>
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index 97868ad..43379be 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -8,6 +8,7 @@ import { useSession } from "next-auth/react";
 import { Button } from "@/components/ui/button";
 import { MobileMenu } from "@/components/layout/mobile-menu";
 import { UserAvatar } from "@/components/ui/user-avatar";
+import { ThemeToggleWrapper } from "@/components/ui/theme-toggle-wrapper";
 
 export function Header() {
   const pathname = usePathname();
@@ -16,11 +17,11 @@ export function Header() {
   const isComingSoonPage = pathname === "/coming-soon";
 
   return (
-    <header className="fixed left-0 right-0 top-0 z-50 border-b border-white/10 bg-slate-950/95 shadow-lg shadow-black/20 backdrop-blur-xl supports-[backdrop-filter]:bg-slate-950/80">
+    <header className="fixed left-0 right-0 top-0 z-50 bg-background/95 shadow-lg shadow-black/5 backdrop-blur-xl supports-[backdrop-filter]:bg-background/80">
       <div className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4 sm:px-8 lg:px-12">
         {/* Logo */}
         <div className="flex items-center gap-3">
-          <div className="relative h-10 w-10 overflow-hidden rounded-full bg-white/10 ring-1 ring-white/15">
+          <div className="relative h-10 w-10 overflow-hidden">
             <Link href="/">
               <Image
                 src="/react-logo.svg"
@@ -34,10 +35,10 @@ export function Header() {
           </div>
           <div>
             <Link href="/">
-              <p className="text-sm uppercase tracking-[0.25em] text-white/60">
+              <p className="text-sm uppercase tracking-[0.25em] text-muted-foreground">
                 React Foundation
               </p>
-              <p className="text-base font-medium text-white">
+              <p className="text-base font-medium text-foreground">
                 {isStorePage ? "Official Store" : "Supporting the Ecosystem"}
               </p>
             </Link>
@@ -45,34 +46,34 @@ export function Header() {
         </div>
 
         {/* Desktop Navigation (hidden on mobile) */}
-        <div className={`hidden items-center gap-4 text-sm text-white/70 md:flex transition ${isComingSoonPage ? 'blur-sm pointer-events-none' : ''}`}>
+        <div className={`hidden items-center gap-4 text-sm text-muted-foreground md:flex transition ${isComingSoonPage ? 'blur-sm pointer-events-none' : ''}`}>
           <nav className="flex items-center gap-6">
             {isStorePage ? (
               // Store navigation
               <>
-                <Link className="transition hover:text-white" href="/store#featured">
+                <Link className="transition hover:text-foreground" href="/store#featured">
                   Collections
                 </Link>
-                <Link className="transition hover:text-white" href="/store#drops">
+                <Link className="transition hover:text-foreground" href="/store#drops">
                   Limited Drops
                 </Link>
-                <Link className="transition hover:text-white" href="/impact">
+                <Link className="transition hover:text-foreground" href="/impact">
                   Impact
                 </Link>
               </>
             ) : (
               // Foundation navigation
               <>
-                <Link className="transition hover:text-white" href="/about">
+                <Link className="transition hover:text-foreground" href="/about">
                   About
                 </Link>
-                <Link className="transition hover:text-white" href="/updates">
+                <Link className="transition hover:text-foreground" href="/updates">
                   Updates
                 </Link>
-                <Link className="transition hover:text-white" href="/impact">
+                <Link className="transition hover:text-foreground" href="/impact">
                   Impact
                 </Link>
-                <Link className="transition hover:text-white" href="/store">
+                <Link className="transition hover:text-foreground" href="/store">
                   Store
                 </Link>
               </>
@@ -95,24 +96,27 @@ export function Header() {
                   d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
                 />
               </svg>
-              <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-sky-500 text-[10px] font-bold text-white">
+              <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
                 0
               </span>
             </Button>
           )}
 
+          {/* Theme Toggle */}
+          <ThemeToggleWrapper />
+
           {/* Profile Icon or Sign In */}
           {session?.user ? (
             <UserAvatar
               user={session.user}
               size={40}
               href="/profile"
-              className="transition hover:border-cyan-400/50 hover:shadow-lg hover:shadow-cyan-500/20"
+              className="transition hover:border-primary/50 hover:shadow-lg hover:shadow-primary/20"
             />
           ) : (
             <Link
               href="/api/auth/signin"
-              className="rounded-full border border-white/10 bg-sky-500/80 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-white transition hover:bg-sky-400"
+              className="rounded-full border border-border bg-primary px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-primary-foreground transition hover:bg-primary/90"
             >
               Sign in
             </Link>
@@ -136,7 +140,7 @@ export function Header() {
                   d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
                 />
               </svg>
-              <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-sky-500 text-[10px] font-bold text-white">
+              <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
                 0
               </span>
             </Button>
diff --git a/src/components/layout/mobile-menu.tsx b/src/components/layout/mobile-menu.tsx
index 2ecd1de..82f8c20 100644
--- a/src/components/layout/mobile-menu.tsx
+++ b/src/components/layout/mobile-menu.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
 import { signOut } from "next-auth/react";
 import type { Session } from "next-auth";
+import { ThemeToggleWrapper } from "@/components/ui/theme-toggle-wrapper";
 
 interface MobileMenuProps {
   session: Session | null;
@@ -13,6 +14,8 @@ interface MobileMenuProps {
 
 export function MobileMenu({ session }: MobileMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [adminChecked, setAdminChecked] = useState(false);
   const pathname = usePathname();
 
   const toggleMenu = () => setIsOpen(!isOpen);
@@ -20,6 +23,30 @@ export function MobileMenu({ session }: MobileMenuProps) {
 
   const isStorePage = pathname?.startsWith("/store");
 
+  // Check admin status only when menu is opened and hasn't been checked yet
+  useEffect(() => {
+    const checkAdminStatus = async () => {
+      if (!isOpen || adminChecked || !session?.user?.email) {
+        return;
+      }
+
+      try {
+        const response = await fetch('/api/admin/check');
+        if (response.ok) {
+          const data = await response.json();
+          setIsAdmin(data.isAdmin);
+          setAdminChecked(true);
+        }
+      } catch (error) {
+        console.error('Failed to check admin status:', error);
+        setIsAdmin(false);
+        setAdminChecked(true);
+      }
+    };
+
+    checkAdminStatus();
+  }, [isOpen, adminChecked, session?.user?.email]);
+
   const navigationLinks = isStorePage
     ? [
         { href: "/store#featured", label: "Collections" },
@@ -38,13 +65,13 @@ export function MobileMenu({ session }: MobileMenuProps) {
       {/* Menu Button */}
       <button
         onClick={toggleMenu}
-        className="flex h-10 w-10 items-center justify-center rounded-full transition hover:bg-white/5"
+        className="flex h-10 w-10 items-center justify-center rounded-full transition hover:bg-muted"
         aria-label={isOpen ? "Close menu" : "Open menu"}
         aria-expanded={isOpen}
       >
         {session?.user ? (
           // Profile icon
-          <div className="relative h-8 w-8 overflow-hidden rounded-full border-2 border-white/20">
+          <div className="relative h-8 w-8 overflow-hidden rounded-full border-2 border-border">
             {session.user.image ? (
               <Image
                 src={session.user.image}
@@ -53,7 +80,7 @@ export function MobileMenu({ session }: MobileMenuProps) {
                 className="object-cover"
               />
             ) : (
-              <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-cyan-400 to-indigo-500 text-xs font-bold text-white">
+              <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-primary to-primary/80 text-xs font-bold text-primary-foreground">
                 {session.user.name?.charAt(0) || session.user.email?.charAt(0) || "U"}
               </div>
             )}
@@ -61,7 +88,7 @@ export function MobileMenu({ session }: MobileMenuProps) {
         ) : (
           // Hamburger icon
           <svg
-            className="h-6 w-6 text-white"
+            className="h-6 w-6 text-foreground"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -79,7 +106,7 @@ export function MobileMenu({ session }: MobileMenuProps) {
       {/* Overlay */}
       {isOpen && (
         <div
-          className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"
+          className="fixed inset-0 z-40 bg-background/50 backdrop-blur-sm"
           onClick={closeMenu}
         />
       )}
@@ -87,14 +114,13 @@ export function MobileMenu({ session }: MobileMenuProps) {
       {/* Menu Panel - Only render on mobile, slide from right */}
       {isOpen && (
         <div
-          className="fixed right-0 top-0 z-50 min-h-screen w-80 max-w-[90vw] animate-in slide-in-from-right border-l border-white/10 shadow-2xl md:hidden"
-          style={{ backgroundColor: '#0f172a' }}
+          className="fixed right-0 top-0 z-50 min-h-screen w-80 max-w-[90vw] animate-in slide-in-from-right border-l border-border bg-background shadow-2xl md:hidden"
         >
-        <div className="flex flex-col" style={{ backgroundColor: '#0f172a' }}>
+        <div className="flex flex-col bg-background">
           {/* Header */}
-          <div className="flex items-center justify-between border-b border-white/10 p-6" style={{ backgroundColor: '#0f172a' }}>
+          <div className="flex items-center justify-between border-b border-border p-6 bg-background">
             <div className="flex items-center gap-3">
-              <div className="relative h-8 w-8 overflow-hidden rounded-full bg-white/10 ring-1 ring-white/15">
+              <div className="relative h-8 w-8 overflow-hidden rounded-full bg-muted ring-1 ring-border">
                 <Image
                   src="/react-logo.svg"
                   alt="React Foundation"
@@ -102,15 +128,15 @@ export function MobileMenu({ session }: MobileMenuProps) {
                   className="object-contain p-1"
                 />
               </div>
-              <span className="text-sm font-semibold text-white">Menu</span>
+              <span className="text-sm font-semibold text-foreground">Menu</span>
             </div>
             <button
               onClick={closeMenu}
-              className="flex h-10 w-10 items-center justify-center rounded-full transition hover:bg-white/5"
+              className="flex h-10 w-10 items-center justify-center rounded-full transition hover:bg-muted"
               aria-label="Close menu"
             >
               <svg
-                className="h-6 w-6 text-white/70"
+                className="h-6 w-6 text-muted-foreground"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -130,10 +156,10 @@ export function MobileMenu({ session }: MobileMenuProps) {
             <Link
               href="/profile"
               onClick={closeMenu}
-              className="block border-b border-white/10 p-6 transition hover:bg-white/5"
+              className="block border-b border-border p-6 transition hover:bg-muted"
             >
               <div className="flex items-center gap-3">
-                <div className="relative h-12 w-12 overflow-hidden rounded-full border-2 border-white/20">
+                <div className="relative h-12 w-12 overflow-hidden rounded-full border-2 border-border">
                   {session.user.image ? (
                     <Image
                       src={session.user.image}
@@ -142,15 +168,15 @@ export function MobileMenu({ session }: MobileMenuProps) {
                       className="object-cover"
                     />
                   ) : (
-                    <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-cyan-400 to-indigo-500 text-lg font-bold text-white">
+                    <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-primary to-primary/80 text-lg font-bold text-primary-foreground">
                       {session.user.name?.charAt(0) || "U"}
                     </div>
                   )}
                 </div>
                 <div>
-                  <p className="font-semibold text-white">{session.user.name}</p>
-                  <p className="text-xs text-white/60">{session.user.email}</p>
-                  <p className="mt-1 text-xs text-cyan-400">View Profile →</p>
+                  <p className="font-semibold text-foreground">{session.user.name}</p>
+                  <p className="text-xs text-muted-foreground">{session.user.email}</p>
+                  <p className="mt-1 text-xs text-primary">View Profile →</p>
                 </div>
               </div>
             </Link>
@@ -164,7 +190,7 @@ export function MobileMenu({ session }: MobileMenuProps) {
                   key={link.href}
                   href={link.href}
                   onClick={closeMenu}
-                  className="block rounded-xl px-4 py-3 text-base font-medium text-white/80 transition hover:bg-white/5 hover:text-white"
+                  className="block rounded-xl px-4 py-3 text-base font-medium text-muted-foreground transition hover:bg-muted hover:text-foreground"
                 >
                   {link.label}
                 </Link>
@@ -172,17 +198,31 @@ export function MobileMenu({ session }: MobileMenuProps) {
             </div>
 
             {/* Divider */}
-            <div className="my-6 border-t border-white/10" />
+            <div className="my-6 border-t border-border" />
+
+            {/* Theme Toggle */}
+            <div className="mb-4">
+              <ThemeToggleWrapper withLabel />
+            </div>
 
             {/* Additional Links */}
             <div className="space-y-2">
+              {isAdmin && session?.user && (
+                <Link
+                  href="/admin/users"
+                  onClick={closeMenu}
+                  className="block rounded-xl border-2 border-accent/30 bg-accent/10 px-4 py-3 text-base font-medium text-purple-300 transition hover:border-accent/50 hover:bg-accent/20"
+                >
+                  👑 Admin Panel
+                </Link>
+              )}
               {session?.user && (
                 <button
                   onClick={() => {
                     closeMenu();
                     signOut({ callbackUrl: "/" });
                   }}
-                  className="w-full rounded-xl px-4 py-3 text-left text-base font-medium text-white/60 transition hover:bg-white/5 hover:text-white"
+                  className="w-full rounded-xl px-4 py-3 text-left text-base font-medium text-muted-foreground transition hover:bg-muted hover:text-foreground"
                 >
                   Sign Out
                 </button>
@@ -191,7 +231,7 @@ export function MobileMenu({ session }: MobileMenuProps) {
                 <Link
                   href="/api/auth/signin"
                   onClick={closeMenu}
-                  className="block rounded-xl bg-sky-500/80 px-4 py-3 text-center text-base font-semibold text-white transition hover:bg-sky-400"
+                  className="block rounded-xl bg-primary px-4 py-3 text-center text-base font-semibold text-primary-foreground transition hover:bg-primary/90"
                 >
                   Sign in with GitHub
                 </Link>
@@ -200,8 +240,8 @@ export function MobileMenu({ session }: MobileMenuProps) {
           </nav>
 
           {/* Footer */}
-          <div className="border-t border-white/10 p-6">
-            <p className="text-xs text-white/50">
+          <div className="border-t border-border p-6">
+            <p className="text-xs text-muted-foreground">
               © {new Date().getFullYear()} React Foundation
             </p>
           </div>
diff --git a/src/components/providers/theme-provider.tsx b/src/components/providers/theme-provider.tsx
new file mode 100644
index 0000000..bcccb76
--- /dev/null
+++ b/src/components/providers/theme-provider.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { Theme, getEffectiveTheme, applyTheme, getStoredTheme, storeTheme } from '@/lib/theme';
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  effectiveTheme: 'light' | 'dark';
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'react-foundation-theme',
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(defaultTheme);
+  const [mounted, setMounted] = useState(false);
+
+  // Initialize theme from localStorage on mount
+  useEffect(() => {
+    const storedTheme = getStoredTheme();
+
+    // Disable transitions on initial load
+    document.documentElement.classList.add('no-transition');
+
+    setThemeState(storedTheme);
+    setMounted(true);
+
+    // Apply the theme immediately after mounting
+    applyTheme(storedTheme);
+
+    // Re-enable transitions after a brief delay
+    setTimeout(() => {
+      document.documentElement.classList.remove('no-transition');
+    }, 100);
+  }, []);
+
+  // Apply theme when it changes
+  useEffect(() => {
+    if (!mounted) return;
+    
+    applyTheme(theme);
+    storeTheme(theme);
+  }, [theme, mounted]);
+
+  // Listen for system theme changes
+  useEffect(() => {
+    if (!mounted) return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    
+    const handleChange = () => {
+      if (theme === 'system') {
+        applyTheme('system');
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme, mounted]);
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+  };
+
+  const effectiveTheme = getEffectiveTheme(theme);
+
+  // Prevent hydration mismatch by not rendering until mounted
+  if (!mounted) {
+    return <div style={{ visibility: 'hidden' }}>{children}</div>;
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, effectiveTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
diff --git a/src/components/rfds/accordion.tsx b/src/components/rfds/accordion.tsx
new file mode 100644
index 0000000..f295df5
--- /dev/null
+++ b/src/components/rfds/accordion.tsx
@@ -0,0 +1,59 @@
+/**
+ * Accordion Component - Smooth height-animated collapsible content
+ * Based on proven animation techniques with cubic-bezier easing
+ */
+
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { cn } from '@/lib/cn';
+
+export interface AccordionContentProps {
+  isOpen: boolean;
+  children: React.ReactNode;
+  className?: string;
+  duration?: number;
+}
+
+export function AccordionContent({
+  isOpen,
+  children,
+  className,
+  duration = 300,
+}: AccordionContentProps) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState(0);
+
+  // Measure content height whenever it changes
+  useEffect(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.scrollHeight);
+    }
+  }, [children, isOpen]);
+
+  // Re-measure on window resize
+  useEffect(() => {
+    const handleResize = () => {
+      if (contentRef.current) {
+        setContentHeight(contentRef.current.scrollHeight);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <div
+      className={cn("overflow-hidden motion-reduce:transition-none", className)}
+      style={{
+        height: isOpen ? `${contentHeight}px` : '0px',
+        transition: `height ${duration}ms cubic-bezier(0.2, 0.8, 0.2, 1)`,
+      }}
+    >
+      <div ref={contentRef}>
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/rfds/components.ts b/src/components/rfds/components.ts
index d9d3a7f..03bf576 100644
--- a/src/components/rfds/components.ts
+++ b/src/components/rfds/components.ts
@@ -1,18 +1,132 @@
 /**
- * RFDS Components
+ * React Foundation Design System - Components Layer
  *
- * Composed components built from primitives
- * Reusable across the application
+ * Composed UI elements built from primitives
+ * These components use semantic theming and are fully themeable
  */
 
+// Layout Components
+export { Header } from "@/components/layout/header";
+export { Footer } from "@/components/layout/footer";
+export { MobileMenu } from "@/components/layout/mobile-menu";
+
+// Product Components
 export { ProductCard } from "@/components/ui/product-card";
 export { ProductGallery } from "@/components/ui/product-gallery";
 
+// User Components
+export { UserAvatar } from "@/components/ui/user-avatar";
+
+// Library Components
+export { LibraryCard } from "@/components/ui/library-card";
+
+// RIS Components
+export { RISScoreBreakdown } from "@/components/ris/ris-score-breakdown";
+export { RISLibraryRankings } from "@/components/ris/ris-library-rankings";
+
+// Home Components
+export { EcosystemLibraries } from "@/components/home/ecosystem-libraries";
+export { ByTheNumbers } from "@/components/home/by-the-numbers";
+export { LimitedDrops } from "@/components/home/limited-drops";
+export { FeaturedLook } from "@/components/home/featured-look";
+export { FoundationHero } from "@/components/home/foundation-hero";
+export { MissionStatement } from "@/components/home/mission-statement";
+export { PastDropsCollections } from "@/components/home/past-drops-collections";
+export { ExecutiveMessage } from "@/components/home/executive-message";
+export { BecomeContributor } from "@/components/home/become-contributor";
+export { FeaturedCollections } from "@/components/home/featured-collections";
+export { JoinMovementCTA } from "@/components/home/join-movement-cta";
+export { HeroBadges } from "@/components/home/hero-badges";
+export { ThreePillars } from "@/components/home/three-pillars";
+export { Hero } from "@/components/home/hero";
+export { FoundingMembers } from "@/components/home/founding-members";
+export { PastDrops } from "@/components/home/past-drops";
+
+// Feature Components
+export { UsernameInput } from "@/features/maintainer-progress/username-input";
+export { MaintainerProgress } from "@/features/maintainer-progress/maintainer-progress";
+export { ImpactSection } from "@/features/impact/impact-section";
+export { SignInButton } from "@/features/auth/sign-in-button";
+
+// Error Components
+export { ErrorBoundary } from "@/components/error-boundary";
+
 // Re-export for namespace
+import { Header } from "@/components/layout/header";
+import { Footer } from "@/components/layout/footer";
+import { MobileMenu } from "@/components/layout/mobile-menu";
 import { ProductCard } from "@/components/ui/product-card";
 import { ProductGallery } from "@/components/ui/product-gallery";
+import { UserAvatar } from "@/components/ui/user-avatar";
+import { LibraryCard } from "@/components/ui/library-card";
+import { RISScoreBreakdown } from "@/components/ris/ris-score-breakdown";
+import { RISLibraryRankings } from "@/components/ris/ris-library-rankings";
+import { EcosystemLibraries } from "@/components/home/ecosystem-libraries";
+import { ByTheNumbers } from "@/components/home/by-the-numbers";
+import { LimitedDrops } from "@/components/home/limited-drops";
+import { FeaturedLook } from "@/components/home/featured-look";
+import { FoundationHero } from "@/components/home/foundation-hero";
+import { MissionStatement } from "@/components/home/mission-statement";
+import { PastDropsCollections } from "@/components/home/past-drops-collections";
+import { ExecutiveMessage } from "@/components/home/executive-message";
+import { BecomeContributor } from "@/components/home/become-contributor";
+import { FeaturedCollections } from "@/components/home/featured-collections";
+import { JoinMovementCTA } from "@/components/home/join-movement-cta";
+import { HeroBadges } from "@/components/home/hero-badges";
+import { ThreePillars } from "@/components/home/three-pillars";
+import { Hero } from "@/components/home/hero";
+import { FoundingMembers } from "@/components/home/founding-members";
+import { PastDrops } from "@/components/home/past-drops";
+import { UsernameInput } from "@/features/maintainer-progress/username-input";
+import { MaintainerProgress } from "@/features/maintainer-progress/maintainer-progress";
+import { ImpactSection } from "@/features/impact/impact-section";
+import { SignInButton } from "@/features/auth/sign-in-button";
+import { ErrorBoundary } from "@/components/error-boundary";
 
 export const Components = {
+  // Layout
+  Header,
+  Footer,
+  MobileMenu,
+  
+  // Product
   ProductCard,
   ProductGallery,
-};
+  
+  // User
+  UserAvatar,
+  
+  // Library
+  LibraryCard,
+  
+  // RIS
+  RISScoreBreakdown,
+  RISLibraryRankings,
+  
+  // Home
+  EcosystemLibraries,
+  ByTheNumbers,
+  LimitedDrops,
+  FeaturedLook,
+  FoundationHero,
+  MissionStatement,
+  PastDropsCollections,
+  ExecutiveMessage,
+  BecomeContributor,
+  FeaturedCollections,
+  JoinMovementCTA,
+  HeroBadges,
+  ThreePillars,
+  Hero,
+  FoundingMembers,
+  PastDrops,
+  
+  // Features
+  UsernameInput,
+  MaintainerProgress,
+  ImpactSection,
+  SignInButton,
+  
+  // Error
+  ErrorBoundary,
+};
\ No newline at end of file
diff --git a/src/components/rfds/index.ts b/src/components/rfds/index.ts
index 3402b9e..2eda503 100644
--- a/src/components/rfds/index.ts
+++ b/src/components/rfds/index.ts
@@ -25,9 +25,10 @@ import { Components } from "./components";
 import { Layouts } from "./layouts";
 
 // Import individual components for direct access
-import { Button, ButtonLink, Pill, Rating, Collapsible, ScrollReveal } from "./primitives";
-import { ProductCard, ProductGallery } from "./components";
+import { Button, ButtonLink, Pill, Rating, Collapsible, ScrollReveal, SegmentedControl, ThemeSegmentedControl, AccordionContent } from "./primitives";
+import { ProductCard, ProductGallery, UserAvatar, LibraryCard, RISScoreBreakdown, RISLibraryRankings, EcosystemLibraries, ByTheNumbers, LimitedDrops, FeaturedLook, FoundationHero, MissionStatement, PastDropsCollections, ExecutiveMessage, BecomeContributor, FeaturedCollections, JoinMovementCTA, HeroBadges, ThreePillars, Hero, FoundingMembers, PastDrops, UsernameInput, MaintainerProgress, ImpactSection, SignInButton, ErrorBoundary } from "./components";
 import { Header, Footer } from "./layouts";
+import { SemanticButton, SemanticCard, SemanticBadge, SemanticInput, SemanticAlert, SemanticAvatar, SemanticSeparator, ContributorIcon, ContributorCard } from "./semantic-components";
 
 /**
  * React Foundation Design System namespace
@@ -42,15 +43,54 @@ export const RFDS = {
   Rating,
   Collapsible,
   ScrollReveal,
+  SegmentedControl,
+  ThemeSegmentedControl,
+  AccordionContent,
 
   // Components - Composed UI elements
   ProductCard,
   ProductGallery,
+  UserAvatar,
+  LibraryCard,
+  RISScoreBreakdown,
+  RISLibraryRankings,
+  EcosystemLibraries,
+  ByTheNumbers,
+  LimitedDrops,
+  FeaturedLook,
+  FoundationHero,
+  MissionStatement,
+  PastDropsCollections,
+  ExecutiveMessage,
+  BecomeContributor,
+  FeaturedCollections,
+  JoinMovementCTA,
+  HeroBadges,
+  ThreePillars,
+  Hero,
+  FoundingMembers,
+  PastDrops,
+  UsernameInput,
+  MaintainerProgress,
+  ImpactSection,
+  SignInButton,
+  ErrorBoundary,
 
   // Layouts - Page structure
   Header,
   Footer,
 
+  // Semantic Components - Themeable components
+  SemanticButton,
+  SemanticCard,
+  SemanticBadge,
+  SemanticInput,
+  SemanticAlert,
+  SemanticAvatar,
+  SemanticSeparator,
+  ContributorIcon,
+  ContributorCard,
+
   // Layers - For advanced usage
   Primitives,
   Components,
@@ -66,6 +106,8 @@ export {
   Rating,
   Collapsible,
   ScrollReveal,
+  SegmentedControl,
+  ThemeSegmentedControl,
   // Components
   ProductCard,
   ProductGallery,
diff --git a/src/components/rfds/primitives.ts b/src/components/rfds/primitives.ts
index f52bee0..61ea366 100644
--- a/src/components/rfds/primitives.ts
+++ b/src/components/rfds/primitives.ts
@@ -11,6 +11,9 @@ export { Pill } from "@/components/ui/pill";
 export { Rating } from "@/components/ui/rating";
 export { Collapsible } from "@/components/ui/collapsible";
 export { ScrollReveal } from "@/components/ui/scroll-reveal";
+export { SegmentedControl } from "@/components/ui/segmented-control";
+export { ThemeToggle as ThemeSegmentedControl } from "@/components/ui/theme-toggle";
+export { AccordionContent } from "./accordion";
 
 // Re-export for namespace
 import { Button, ButtonLink } from "@/components/ui/button";
@@ -18,6 +21,10 @@ import { Pill } from "@/components/ui/pill";
 import { Rating } from "@/components/ui/rating";
 import { Collapsible } from "@/components/ui/collapsible";
 import { ScrollReveal } from "@/components/ui/scroll-reveal";
+import { SegmentedControl } from "@/components/ui/segmented-control";
+import { ThemeToggle } from "@/components/ui/theme-toggle";
+import { AccordionContent } from "./accordion";
+const ThemeSegmentedControl = ThemeToggle; // Alias for compatibility
 
 export const Primitives = {
   Button,
@@ -26,4 +33,7 @@ export const Primitives = {
   Rating,
   Collapsible,
   ScrollReveal,
+  SegmentedControl,
+  ThemeSegmentedControl,
+  AccordionContent,
 };
diff --git a/src/components/rfds/semantic-components.tsx b/src/components/rfds/semantic-components.tsx
new file mode 100644
index 0000000..f56cec9
--- /dev/null
+++ b/src/components/rfds/semantic-components.tsx
@@ -0,0 +1,390 @@
+/**
+ * React Foundation Design System - Semantic Components
+ *
+ * Pre-built semantic components that use the theming system
+ * These replace hardcoded colors with semantic, themeable alternatives
+ */
+
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { cn } from '@/lib/cn';
+
+// Semantic Button Variants
+export interface SemanticButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'destructive' | 'success' | 'warning' | 'ghost' | 'link';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function SemanticButton({ 
+  variant = 'primary', 
+  size = 'md', 
+  className, 
+  children, 
+  ...props 
+}: SemanticButtonProps) {
+  const baseClasses = "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50";
+  
+  const variantClasses = {
+    primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+    destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+    success: "bg-success text-success-foreground hover:bg-success/90",
+    warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+    ghost: "text-foreground hover:bg-muted",
+    link: "text-primary underline-offset-4 hover:underline",
+  };
+  
+  const sizeClasses = {
+    sm: "h-9 px-3 text-sm",
+    md: "h-10 px-4 py-2",
+    lg: "h-11 px-8 text-lg",
+  };
+
+  return (
+    <button
+      className={cn(
+        baseClasses,
+        variantClasses[variant],
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+// Semantic Card Component
+export interface SemanticCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'outlined' | 'elevated' | 'glass';
+  hover?: boolean;
+}
+
+export function SemanticCard({ 
+  variant = 'default', 
+  hover = false, 
+  className, 
+  children, 
+  ...props 
+}: SemanticCardProps) {
+  const baseClasses = "rounded-lg transition-colors";
+  
+  const variantClasses = {
+    default: "bg-card text-card-foreground",
+    outlined: "bg-card text-card-foreground border border-border",
+    elevated: "bg-card text-card-foreground shadow-md",
+    glass: "bg-card/80 text-card-foreground backdrop-blur border border-border/20",
+  };
+  
+  const hoverClasses = hover ? "hover:shadow-md hover:shadow-primary/10" : "";
+
+  return (
+    <div
+      className={cn(
+        baseClasses,
+        variantClasses[variant],
+        hoverClasses,
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Semantic Badge Component
+export interface SemanticBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: 'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'outline';
+}
+
+export function SemanticBadge({ 
+  variant = 'default', 
+  className, 
+  children, 
+  ...props 
+}: SemanticBadgeProps) {
+  const baseClasses = "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors";
+  
+  const variantClasses = {
+    default: "bg-primary text-primary-foreground",
+    secondary: "bg-secondary text-secondary-foreground",
+    destructive: "bg-destructive text-destructive-foreground",
+    success: "bg-success text-success-foreground",
+    warning: "bg-warning text-warning-foreground",
+    outline: "border border-border text-foreground",
+  };
+
+  return (
+    <span
+      className={cn(
+        baseClasses,
+        variantClasses[variant],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+// Semantic Input Component
+export interface SemanticInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  variant?: 'default' | 'error' | 'success';
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+}
+
+export function SemanticInput({ 
+  variant = 'default', 
+  label, 
+  helperText, 
+  errorText, 
+  className, 
+  ...props 
+}: SemanticInputProps) {
+  const baseClasses = "flex h-10 w-full rounded-md border px-3 py-2 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50";
+  
+  const variantClasses = {
+    default: "border-input bg-background text-foreground",
+    error: "border-destructive bg-background text-foreground focus-visible:ring-destructive",
+    success: "border-success bg-background text-foreground focus-visible:ring-success",
+  };
+
+  return (
+    <div className="space-y-2">
+      {label && (
+        <label className="text-sm font-medium text-foreground">
+          {label}
+        </label>
+      )}
+      <input
+        className={cn(
+          baseClasses,
+          variantClasses[variant],
+          className
+        )}
+        {...props}
+      />
+      {errorText && (
+        <p className="text-sm text-destructive">{errorText}</p>
+      )}
+      {helperText && !errorText && (
+        <p className="text-sm text-muted-foreground">{helperText}</p>
+      )}
+    </div>
+  );
+}
+
+// Semantic Alert Component
+export interface SemanticAlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'destructive' | 'success' | 'warning';
+  title?: string;
+}
+
+export function SemanticAlert({ 
+  variant = 'default', 
+  title, 
+  className, 
+  children, 
+  ...props 
+}: SemanticAlertProps) {
+  const baseClasses = "relative w-full rounded-lg border p-4";
+  
+  const variantClasses = {
+    default: "bg-background text-foreground border-border",
+    destructive: "bg-destructive/10 text-destructive border-destructive/20",
+    success: "bg-success/10 text-success border-success/20",
+    warning: "bg-warning/10 text-warning border-warning/20",
+  };
+
+  return (
+    <div
+      className={cn(
+        baseClasses,
+        variantClasses[variant],
+        className
+      )}
+      {...props}
+    >
+      {title && (
+        <h4 className="mb-1 font-medium leading-none tracking-tight">
+          {title}
+        </h4>
+      )}
+      <div className="text-sm [&_p]:leading-relaxed">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// Semantic Avatar Component
+export interface SemanticAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function SemanticAvatar({ 
+  src, 
+  alt, 
+  fallback, 
+  size = 'md', 
+  className, 
+  ...props 
+}: SemanticAvatarProps) {
+  const sizeClasses = {
+    sm: "h-8 w-8 text-xs",
+    md: "h-10 w-10 text-sm",
+    lg: "h-12 w-12 text-base",
+  };
+
+  return (
+    <div
+      className={cn(
+        "relative flex shrink-0 overflow-hidden rounded-full",
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+    >
+      {src ? (
+        <Image
+          src={src}
+          alt={alt || 'Avatar'}
+          fill
+          className="object-cover"
+        />
+      ) : (
+        <div className="flex h-full w-full items-center justify-center bg-muted text-muted-foreground">
+          {fallback}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Semantic Separator Component
+export interface SemanticSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export function SemanticSeparator({
+  orientation = 'horizontal',
+  className,
+  ...props
+}: SemanticSeparatorProps) {
+  return (
+    <div
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === 'horizontal' ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+// Contributor Icon Component
+export interface ContributorIconProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant: 'code' | 'donate' | 'sponsor' | 'member';
+  children: React.ReactNode;
+}
+
+export function ContributorIcon({
+  variant,
+  children,
+  className,
+  ...props
+}: ContributorIconProps) {
+  const gradientClasses = {
+    code: '[background-image:var(--gradient-icon-code)]',
+    donate: '[background-image:var(--gradient-icon-donate)]',
+    sponsor: '[background-image:var(--gradient-icon-sponsor)]',
+    member: '[background-image:var(--gradient-icon-member)]',
+  };
+
+  const glowClasses = {
+    code: 'group-hover:[box-shadow:0_0_20px_rgba(52,211,153,0.3),0_0_40px_rgba(6,182,212,0.2)]',
+    donate: 'group-hover:[box-shadow:0_0_20px_rgba(56,189,248,0.3),0_0_40px_rgba(99,102,241,0.2)]',
+    sponsor: 'group-hover:[box-shadow:0_0_20px_rgba(253,224,71,0.3),0_0_40px_rgba(249,115,22,0.2)]',
+    member: 'group-hover:[box-shadow:0_0_20px_rgba(251,146,60,0.3),0_0_40px_rgba(239,68,68,0.2)]',
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex h-14 w-14 shrink-0 items-center justify-center rounded-xl",
+        "will-change-transform",
+        "transition-[transform,box-shadow] duration-150 ease-in-out",
+        "motion-reduce:transition-none",
+        "group-hover:scale-110 group-hover:rotate-3",
+        gradientClasses[variant],
+        glowClasses[variant],
+        className
+      )}
+      {...props}
+    >
+      <div className="text-foreground [filter:drop-shadow(0_1px_2px_rgba(0,0,0,0.1))]">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// Contributor Card Component
+export interface ContributorCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  actions: React.ReactNode;
+}
+
+export function ContributorCard({
+  icon,
+  title,
+  description,
+  actions,
+  className,
+  ...props
+}: ContributorCardProps) {
+  return (
+    <div
+      className={cn(
+        "group space-y-6 rounded-2xl",
+        "border border-border/10 bg-muted",
+        "p-8",
+        "[filter:drop-shadow(0_2px_4px_rgba(0,0,0,0.06))_drop-shadow(0_1px_2px_rgba(0,0,0,0.04))]",
+        "dark:[filter:drop-shadow(0_2px_4px_rgba(0,0,0,0.2))_drop-shadow(0_1px_2px_rgba(0,0,0,0.15))]",
+        "transition-[filter,background-color,border-color] duration-200 ease-out",
+        "motion-reduce:transition-none",
+        "hover:border-border/20 hover:bg-muted/95",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-start gap-4">
+        {icon}
+        <div className="flex-1">
+          <h3 className="text-xl font-semibold text-foreground">
+            {title}
+          </h3>
+          <p className="mt-2 text-sm leading-relaxed text-foreground/70">
+            {description}
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-3 pt-2">
+        {actions}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ris/ris-library-rankings.tsx b/src/components/ris/ris-library-rankings.tsx
index f84628a..a2a3bcd 100644
--- a/src/components/ris/ris-library-rankings.tsx
+++ b/src/components/ris/ris-library-rankings.tsx
@@ -47,13 +47,13 @@ export function RISLibraryRankings({
     <div className="space-y-4">
       {/* Sort Controls */}
       <div className="flex flex-wrap gap-2">
-        <span className="text-sm text-white/60">Sort by:</span>
+        <span className="text-sm text-foreground/60">Sort by:</span>
         <button
           onClick={() => setSortBy('ris')}
           className={`rounded px-2 py-1 text-xs font-medium transition ${
             sortBy === 'ris'
-              ? 'bg-cyan-500/20 text-cyan-300'
-              : 'text-white/60 hover:bg-white/5 hover:text-white'
+              ? 'bg-primary/20 text-cyan-300'
+              : 'text-foreground/60 hover:bg-background/5 hover:text-foreground'
           }`}
         >
           RIS Score
@@ -63,8 +63,8 @@ export function RISLibraryRankings({
             onClick={() => setSortBy('allocation')}
             className={`rounded px-2 py-1 text-xs font-medium transition ${
               sortBy === 'allocation'
-                ? 'bg-cyan-500/20 text-cyan-300'
-                : 'text-white/60 hover:bg-white/5 hover:text-white'
+                ? 'bg-primary/20 text-cyan-300'
+                : 'text-foreground/60 hover:bg-background/5 hover:text-foreground'
             }`}
           >
             Allocation
@@ -74,8 +74,8 @@ export function RISLibraryRankings({
           onClick={() => setSortBy('ef')}
           className={`rounded px-2 py-1 text-xs font-medium transition ${
             sortBy === 'ef'
-              ? 'bg-blue-500/20 text-blue-300'
-              : 'text-white/60 hover:bg-white/5 hover:text-white'
+              ? 'bg-primary/20 text-blue-300'
+              : 'text-foreground/60 hover:bg-background/5 hover:text-foreground'
           }`}
         >
           Ecosystem
@@ -84,8 +84,8 @@ export function RISLibraryRankings({
           onClick={() => setSortBy('cq')}
           className={`rounded px-2 py-1 text-xs font-medium transition ${
             sortBy === 'cq'
-              ? 'bg-green-500/20 text-green-300'
-              : 'text-white/60 hover:bg-white/5 hover:text-white'
+              ? 'bg-success/20 text-green-300'
+              : 'text-foreground/60 hover:bg-background/5 hover:text-foreground'
           }`}
         >
           Quality
@@ -94,8 +94,8 @@ export function RISLibraryRankings({
           onClick={() => setSortBy('mh')}
           className={`rounded px-2 py-1 text-xs font-medium transition ${
             sortBy === 'mh'
-              ? 'bg-purple-500/20 text-purple-300'
-              : 'text-white/60 hover:bg-white/5 hover:text-white'
+              ? 'bg-accent/20 text-purple-300'
+              : 'text-foreground/60 hover:bg-background/5 hover:text-foreground'
           }`}
         >
           Health
@@ -114,15 +114,15 @@ export function RISLibraryRankings({
               key={library.libraryName}
               className={`overflow-hidden rounded-xl border transition ${
                 isHighlighted
-                  ? 'border-cyan-500/30 bg-cyan-500/5'
-                  : 'border-white/10 bg-white/[0.03]'
+                  ? 'border-primary/30 bg-primary/5'
+                  : 'border-border/10 bg-background/[0.03]'
               }`}
             >
               <button
                 onClick={() =>
                   setExpandedLibrary(isExpanded ? null : library.libraryName)
                 }
-                className="w-full p-4 text-left transition hover:bg-white/[0.03]"
+                className="w-full p-4 text-left transition hover:bg-background/[0.03]"
               >
                 <div className="flex items-center justify-between gap-4">
                   {/* Rank and Library */}
@@ -130,24 +130,24 @@ export function RISLibraryRankings({
                     <div
                       className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-sm font-bold ${
                         isHighlighted
-                          ? 'bg-cyan-500/20 text-cyan-300'
-                          : 'bg-white/5 text-white/40'
+                          ? 'bg-primary/20 text-cyan-300'
+                          : 'bg-background/5 text-foreground/40'
                       }`}
                     >
                       {rank}
                     </div>
-                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-white/5">
+                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-background/5">
                       <LibraryIcon
                         libraryName={library.repo}
                         size={24}
-                        className="text-white/90"
+                        className="text-foreground/90"
                       />
                     </div>
                     <div>
-                      <div className="font-medium text-white">
+                      <div className="font-medium text-foreground">
                         {library.libraryName}
                       </div>
-                      <div className="text-xs text-white/50">
+                      <div className="text-xs text-foreground/50">
                         {library.owner}/{library.repo}
                       </div>
                     </div>
@@ -165,7 +165,7 @@ export function RISLibraryRankings({
                     {/* Allocation */}
                     {showAllocation && (
                       <div className="hidden text-right sm:block">
-                        <div className="text-xs text-white/50">Allocation</div>
+                        <div className="text-xs text-foreground/50">Allocation</div>
                         <div className="text-sm font-semibold text-cyan-400">
                           {formatAllocation(library.allocation_usd)}
                         </div>
@@ -174,7 +174,7 @@ export function RISLibraryRankings({
 
                     {/* RIS Score */}
                     <div className="text-right">
-                      <div className="text-xs text-white/50">RIS</div>
+                      <div className="text-xs text-foreground/50">RIS</div>
                       <div
                         className={`text-xl font-bold ${getRISColorClass(library.ris)}`}
                       >
@@ -183,7 +183,7 @@ export function RISLibraryRankings({
                     </div>
 
                     {/* Expand arrow */}
-                    <div className="text-white/40">
+                    <div className="text-foreground/40">
                       {isExpanded ? '▼' : '▶'}
                     </div>
                   </div>
@@ -192,7 +192,7 @@ export function RISLibraryRankings({
 
               {/* Expanded Details */}
               {isExpanded && (
-                <div className="border-t border-white/10 bg-white/[0.02] p-4">
+                <div className="border-t border-border/10 bg-background/[0.02] p-4">
                   <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
                     <ComponentDetail
                       label="Ecosystem Footprint"
@@ -263,12 +263,12 @@ function ComponentDetail({
         <span className={`rounded px-1.5 py-0.5 text-xs font-semibold ${getComponentColorClass(code)}`}>
           {code}
         </span>
-        <span className="text-xs text-white/70">{label}</span>
+        <span className="text-xs text-foreground/70">{label}</span>
       </div>
       <div className={`text-lg font-bold ${getRISColorClass(value)}`}>
         {formatRIS(value)}
       </div>
-      <div className="mt-1 text-xs text-white/50">{details}</div>
+      <div className="mt-1 text-xs text-foreground/50">{details}</div>
     </div>
   );
 }
diff --git a/src/components/ris/ris-score-breakdown.tsx b/src/components/ris/ris-score-breakdown.tsx
index e44040a..e67451a 100644
--- a/src/components/ris/ris-score-breakdown.tsx
+++ b/src/components/ris/ris-score-breakdown.tsx
@@ -63,18 +63,18 @@ export function RISScoreBreakdown({
   return (
     <div className="space-y-6">
       {/* Overall RIS Score */}
-      <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6">
+      <div className="rounded-2xl border border-border/10 bg-background/[0.03] p-6">
         <div className="flex items-center justify-between">
           <div>
-            <h3 className="text-lg font-semibold text-white">
+            <h3 className="text-lg font-semibold text-foreground">
               {score.libraryName}
             </h3>
-            <p className="text-sm text-white/60">
+            <p className="text-sm text-foreground/60">
               {score.owner}/{score.repo}
             </p>
           </div>
           <div className="text-right">
-            <div className="text-sm text-white/60">React Impact Score</div>
+            <div className="text-sm text-foreground/60">React Impact Score</div>
             <div className={`text-3xl font-bold ${getRISColorClass(score.ris)}`}>
               {formatRIS(score.ris)}
             </div>
@@ -82,14 +82,14 @@ export function RISScoreBreakdown({
         </div>
 
         {showAllocation && (
-          <div className="mt-4 flex items-center justify-between rounded-xl border border-white/10 bg-white/[0.03] p-4">
-            <span className="text-sm text-white/70">Quarterly Allocation</span>
+          <div className="mt-4 flex items-center justify-between rounded-xl border border-border/10 bg-background/[0.03] p-4">
+            <span className="text-sm text-foreground/70">Quarterly Allocation</span>
             <div className="text-right">
               <div className="text-xl font-semibold text-cyan-400">
                 {formatAllocation(score.allocation_usd)}
               </div>
               {(score.floor_applied || score.cap_applied) && (
-                <div className="mt-1 text-xs text-white/50">
+                <div className="mt-1 text-xs text-foreground/50">
                   {score.floor_applied && '(minimum floor applied)'}
                   {score.cap_applied && '(maximum cap applied)'}
                 </div>
@@ -100,8 +100,8 @@ export function RISScoreBreakdown({
       </div>
 
       {/* Component Scores */}
-      <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6">
-        <h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white/70">
+      <div className="rounded-2xl border border-border/10 bg-background/[0.03] p-6">
+        <h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-foreground/70">
           Component Scores
         </h4>
         <div className="space-y-4">
@@ -118,10 +118,10 @@ export function RISScoreBreakdown({
                     >
                       {component.code}
                     </span>
-                    <span className="text-sm font-medium text-white">
+                    <span className="text-sm font-medium text-foreground">
                       {component.label}
                     </span>
-                    <span className="text-xs text-white/40">
+                    <span className="text-xs text-foreground/40">
                       ({component.weight}%)
                     </span>
                   </div>
@@ -129,13 +129,13 @@ export function RISScoreBreakdown({
                     {formatRIS(value)}
                   </span>
                 </div>
-                <div className="relative h-2 overflow-hidden rounded-full bg-white/5">
+                <div className="relative h-2 overflow-hidden rounded-full bg-background/5">
                   <div
                     className={`h-full rounded-full ${getComponentBarColor(component.code)}`}
                     style={{ width: `${percentage}%` }}
                   />
                 </div>
-                <p className="mt-1 text-xs text-white/50">
+                <p className="mt-1 text-xs text-foreground/50">
                   {component.description}
                 </p>
               </div>
@@ -146,8 +146,8 @@ export function RISScoreBreakdown({
 
       {/* Raw Metrics (Optional) */}
       {showRawMetrics && (
-        <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6">
-          <h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-white/70">
+        <div className="rounded-2xl border border-border/10 bg-background/[0.03] p-6">
+          <h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-foreground/70">
             Key Metrics
           </h4>
           <div className="grid gap-3 sm:grid-cols-2">
@@ -184,20 +184,20 @@ export function RISScoreBreakdown({
 
 function MetricCard({ label, value }: { label: string; value: string }) {
   return (
-    <div className="rounded-lg border border-white/10 bg-white/[0.02] p-3">
-      <div className="text-xs text-white/50">{label}</div>
-      <div className="mt-1 text-lg font-semibold text-white">{value}</div>
+    <div className="rounded-lg border border-border/10 bg-background/[0.02] p-3">
+      <div className="text-xs text-foreground/50">{label}</div>
+      <div className="mt-1 text-lg font-semibold text-foreground">{value}</div>
     </div>
   );
 }
 
 function getComponentBarColor(component: string): string {
   const colors: Record<string, string> = {
-    EF: 'bg-blue-500',
-    CQ: 'bg-green-500',
-    MH: 'bg-purple-500',
-    CB: 'bg-yellow-500',
-    MA: 'bg-pink-500',
+    EF: 'bg-primary',
+    CQ: 'bg-success',
+    MH: 'bg-accent',
+    CB: 'bg-warning',
+    MA: 'bg-accent',
   };
-  return colors[component] || 'bg-gray-500';
+  return colors[component] || 'bg-muted';
 }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 79d04d7..1a75aff 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -11,19 +11,19 @@ type ButtonVariant = "primary" | "secondary" | "tertiary" | "glass" | "ghost" |
 type ButtonSize = "xs" | "sm" | "md" | "lg";
 
 const baseClasses =
-  "inline-flex items-center justify-center gap-2 rounded-full font-semibold transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300 disabled:pointer-events-none disabled:opacity-60";
+  "inline-flex items-center justify-center gap-2 rounded-full font-semibold transition cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-60 [-webkit-font-smoothing:antialiased] [-moz-osx-font-smoothing:grayscale]";
 
 const variantClasses: Record<ButtonVariant, string> = {
   primary:
-    "bg-gradient-to-r from-sky-400 via-indigo-500 to-purple-500 text-white shadow-lg shadow-indigo-500/30 hover:from-sky-300 hover:via-indigo-400 hover:to-purple-400",
+    "bg-gradient-to-r from-cyan-500 from-0% via-cyan-500 via-50% to-cyan-600 to-100% text-white !text-white [color:rgb(255,255,255)] [fill:white] shadow-xl shadow-cyan-500/40 hover:from-cyan-400 hover:via-cyan-500 hover:to-cyan-600 hover:shadow-2xl hover:shadow-cyan-500/50",
   secondary:
-    "border border-white/25 bg-slate-950/40 text-white hover:border-white/40 hover:bg-white/10",
+    "border-2 border-primary/50 bg-primary/10 text-foreground hover:border-primary hover:bg-primary/20 hover:shadow-lg hover:shadow-primary/20",
   tertiary:
-    "border border-emerald-400/30 bg-emerald-500/10 text-emerald-300 hover:border-emerald-400/50 hover:bg-emerald-500/20 hover:text-emerald-200",
+    "border-2 border-border bg-card text-foreground shadow-md hover:border-primary/50 hover:bg-muted hover:shadow-lg",
   glass:
-    "border border-white/15 bg-white/10 text-white shadow-lg shadow-indigo-500/10 backdrop-blur hover:border-white/25 hover:bg-white/15",
-  ghost: "text-indigo-100 hover:text-white",
-  link: "text-indigo-100 underline-offset-4 hover:text-white hover:underline",
+    "border border-border/15 bg-background/10 text-foreground shadow-lg shadow-primary/10 backdrop-blur hover:border-border/25 hover:bg-background/15",
+  ghost: "text-muted-foreground hover:text-foreground",
+  link: "text-primary underline-offset-4 hover:text-primary/80 hover:underline",
 };
 
 const sizeClasses: Record<ButtonSize, string> = {
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
index 830eb31..586043c 100644
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -27,7 +27,7 @@ export function Collapsible({
       >
         {trigger}
         <span
-          className="text-white/50 transition-transform duration-300 ease-in-out"
+          className="text-foreground/50 transition-transform duration-300 ease-in-out"
           style={{ transform: isOpen ? "rotate(0deg)" : "rotate(180deg)" }}
         >
           ▼
diff --git a/src/components/ui/library-card.tsx b/src/components/ui/library-card.tsx
index 0a16a62..5f06062 100644
--- a/src/components/ui/library-card.tsx
+++ b/src/components/ui/library-card.tsx
@@ -25,20 +25,20 @@ export function LibraryCard({
         href={`https://github.com/${owner}/${name}`}
         target="_blank"
         rel="noopener noreferrer"
-        className="group block rounded-xl border border-white/10 bg-white/[0.03] p-4 transition hover:border-cyan-400/30 hover:bg-white/[0.06]"
+        className="group block rounded-xl border border-border/10 bg-background/[0.03] p-4 transition hover:border-cyan-400/30 hover:bg-background/[0.06]"
       >
         <div className="flex items-center justify-between gap-3">
           <div className="flex items-center gap-3">
-            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-white/5">
-              <LibraryIcon libraryName={name} size={24} className="text-white/90 transition group-hover:text-cyan-300" />
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-background/5">
+              <LibraryIcon libraryName={name} size={24} className="text-foreground/90 transition group-hover:text-cyan-300" />
             </div>
-            <span className="text-sm font-medium text-white/80 transition group-hover:text-white">
+            <span className="text-sm font-medium text-foreground/80 transition group-hover:text-foreground">
               {displayName}
             </span>
           </div>
           {showRIS && risScore !== undefined && (
             <div className="flex shrink-0 items-center gap-1.5">
-              <span className="text-xs text-white/40">RIS</span>
+              <span className="text-xs text-foreground/40">RIS</span>
               <span className={`text-sm font-semibold ${getRISColorClass(risScore)}`}>
                 {formatRIS(risScore)}
               </span>
diff --git a/src/components/ui/pill.tsx b/src/components/ui/pill.tsx
index dbbfcdc..d9da495 100644
--- a/src/components/ui/pill.tsx
+++ b/src/components/ui/pill.tsx
@@ -3,10 +3,10 @@ import type { ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 const toneMap: Record<string, string> = {
-  emerald: "bg-emerald-400",
-  sky: "bg-sky-400",
-  rose: "bg-rose-400",
-  amber: "bg-amber-400",
+  emerald: "bg-success",
+  sky: "bg-primary",
+  rose: "bg-destructive",
+  amber: "bg-warning",
 };
 
 type PillProps = {
@@ -30,7 +30,7 @@ export function Pill({
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-xs uppercase tracking-[0.15em] text-white/70 backdrop-blur sm:gap-3 sm:px-4 sm:tracking-[0.3em]",
+        "inline-flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-2 text-xs uppercase tracking-[0.15em] text-muted-foreground backdrop-blur sm:gap-3 sm:px-4 sm:tracking-[0.3em]",
         className,
       )}
     >
diff --git a/src/components/ui/product-card.tsx b/src/components/ui/product-card.tsx
index 32fac9c..94e5660 100644
--- a/src/components/ui/product-card.tsx
+++ b/src/components/ui/product-card.tsx
@@ -23,9 +23,9 @@ export function ProductCard({
   return (
     <Link
       href={href}
-      className="group flex flex-col gap-4 rounded-2xl border border-white/10 bg-slate-900/70 p-6 transition hover:border-white/25 hover:bg-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300"
+      className="group flex flex-col gap-4 rounded-2xl border border-border bg-card/70 p-6 transition hover:border-border/60 hover:bg-card focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
     >
-      <div className="relative h-32 overflow-hidden rounded-xl border border-white/10">
+      <div className="relative h-32 overflow-hidden rounded-xl border border-border">
         <Image
           src={previewImage.src}
           alt={previewImage.alt}
@@ -37,10 +37,10 @@ export function ProductCard({
       </div>
       <div className="flex items-start justify-between gap-3">
         <div>
-          <p className="text-sm font-semibold text-white">{product.name}</p>
-          <p className="mt-1 text-sm text-white/60">{product.tagline}</p>
+          <p className="text-sm font-semibold text-card-foreground">{product.name}</p>
+          <p className="mt-1 text-sm text-muted-foreground">{product.tagline}</p>
         </div>
-        <span className="text-sm font-medium text-white/70">
+        <span className="text-sm font-medium text-muted-foreground">
           {product.price}
         </span>
       </div>
@@ -50,12 +50,12 @@ export function ProductCard({
         className="mt-1"
       />
       <div className="space-y-1">
-        <p className="text-[10px] uppercase tracking-[0.35em] text-white/60">
+        <p className="text-[10px] uppercase tracking-[0.35em] text-foreground/60">
           {inventoryLabel} · {availabilityLabel}
         </p>
-        <p className="text-xs text-white/40">{product.status}</p>
+        <p className="text-xs text-foreground/40">{product.status}</p>
       </div>
-      <span className="mt-auto inline-flex items-center gap-2 text-xs font-semibold text-indigo-100 transition group-hover:text-white">
+      <span className="mt-auto inline-flex items-center gap-2 text-xs font-semibold text-indigo-100 transition group-hover:text-foreground">
         {ctaLabel} <span aria-hidden>→</span>
       </span>
     </Link>
diff --git a/src/components/ui/product-gallery.tsx b/src/components/ui/product-gallery.tsx
index ca1842e..f1109c6 100644
--- a/src/components/ui/product-gallery.tsx
+++ b/src/components/ui/product-gallery.tsx
@@ -120,7 +120,7 @@ export function ProductGallery({ images, className }: ProductGalleryProps) {
     >
       <div
         ref={frameRef}
-        className="group relative aspect-square overflow-hidden rounded-2xl border border-white/10 bg-slate-900"
+        className="group relative aspect-square overflow-hidden rounded-2xl border border-border/10 bg-muted"
         onPointerMove={handlePointerMove}
         onPointerLeave={handlePointerLeave}
       >
@@ -147,7 +147,7 @@ export function ProductGallery({ images, className }: ProductGalleryProps) {
                 key={image.id}
                 type="button"
                 onClick={() => setActiveIndex(index)}
-                className="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl border border-white/15 transition data-[active=true]:border-white/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300"
+                className="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl border border-border/15 transition data-[active=true]:border-border/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300"
                 data-active={isActive}
               >
                 <Image
diff --git a/src/components/ui/rating.tsx b/src/components/ui/rating.tsx
index 12455ba..2e50022 100644
--- a/src/components/ui/rating.tsx
+++ b/src/components/ui/rating.tsx
@@ -48,7 +48,7 @@ export function Rating({
   if (count === 0) {
     return (
       <div
-        className={cn("flex items-center gap-2 text-xs text-white/50", className)}
+        className={cn("flex items-center gap-2 text-xs text-muted-foreground", className)}
       >
         <span className="text-[11px] uppercase tracking-[0.2em]">
           No reviews yet
@@ -59,7 +59,7 @@ export function Rating({
 
   return (
     <div
-      className={cn("flex items-center gap-2 text-xs text-white/50", className)}
+      className={cn("flex items-center gap-2 text-xs text-foreground/50", className)}
       aria-label={`Rated ${formattedValue} out of ${max}`}
     >
       <div className="flex items-center gap-1">
diff --git a/src/components/ui/segmented-control.tsx b/src/components/ui/segmented-control.tsx
new file mode 100644
index 0000000..0690c71
--- /dev/null
+++ b/src/components/ui/segmented-control.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import React from 'react';
+import { cn } from '@/lib/cn';
+
+export interface SegmentedControlOption {
+  value: string;
+  label?: string;
+  icon?: React.ReactNode;
+  title?: string;
+}
+
+export interface SegmentedControlProps {
+  options: SegmentedControlOption[];
+  value: string;
+  onValueChange: (value: string) => void;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'compact';
+  className?: string;
+}
+
+export function SegmentedControl({
+  options,
+  value,
+  onValueChange,
+  size = 'sm',
+  variant = 'default',
+  className,
+}: SegmentedControlProps) {
+  const sizeClasses = {
+    sm: 'h-8 text-xs',
+    md: 'h-10 text-sm',
+    lg: 'h-12 text-base',
+  };
+
+  const iconSizeClasses = {
+    sm: 'h-3 w-3',
+    md: 'h-4 w-4',
+    lg: 'h-5 w-5',
+  };
+
+  const paddingClasses = {
+    sm: variant === 'compact' ? 'px-2' : 'px-3',
+    md: variant === 'compact' ? 'px-3' : 'px-4',
+    lg: variant === 'compact' ? 'px-4' : 'px-6',
+  };
+
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center rounded-lg bg-muted p-1',
+        sizeClasses[size],
+        className
+      )}
+    >
+      {options.map((option) => {
+        const isSelected = value === option.value;
+        return (
+          <button
+            key={option.value}
+            onClick={() => onValueChange(option.value)}
+            className={cn(
+              'relative flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 cursor-pointer',
+              paddingClasses[size],
+              isSelected
+                ? 'bg-background text-foreground shadow-sm border border-border/50'
+                : 'text-muted-foreground hover:text-foreground hover:bg-background/50',
+              variant === 'compact' && 'gap-1'
+            )}
+            title={option.title || option.label}
+          >
+            {option.icon && (
+              <span className={cn('flex-shrink-0', iconSizeClasses[size])}>
+                {option.icon}
+              </span>
+            )}
+            {option.label && variant !== 'compact' && (
+              <span className="whitespace-nowrap">{option.label}</span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/ui/slide-drawer.tsx b/src/components/ui/slide-drawer.tsx
new file mode 100644
index 0000000..046b2c7
--- /dev/null
+++ b/src/components/ui/slide-drawer.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from 'react';
+
+export function SlideDrawer() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="mb-6">
+      {/* Click to Expand Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full rounded-lg border border-border bg-card p-4 text-left transition hover:bg-muted"
+      >
+        <div className="flex items-center justify-between">
+          <span className="font-medium">Click to Expand</span>
+          <svg
+            className={`h-5 w-5 transition-transform duration-200 ${
+              isOpen ? 'rotate-180' : ''
+            }`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+      </button>
+
+      {/* Slide Out Content */}
+      <div
+        className={`overflow-hidden transition-all duration-300 ease-in-out ${
+          isOpen ? 'max-h-96' : 'max-h-0'
+        }`}
+      >
+        <div className="rounded-b-lg border border-border bg-card p-4 shadow-lg">
+          <h3 className="mb-2 font-semibold">Expanded Content</h3>
+          <p className="text-sm text-muted-foreground">
+            This content slides out when you click the button above. 
+            The animation should be smooth and natural.
+          </p>
+          <div className="mt-4 space-y-2">
+            <div className="h-8 rounded bg-muted"></div>
+            <div className="h-8 rounded bg-muted"></div>
+            <div className="h-8 rounded bg-muted"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/theme-toggle-wrapper.tsx b/src/components/ui/theme-toggle-wrapper.tsx
new file mode 100644
index 0000000..8289a4e
--- /dev/null
+++ b/src/components/ui/theme-toggle-wrapper.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { ThemeToggle } from './theme-toggle';
+
+interface ThemeToggleWrapperProps {
+  withLabel?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function ThemeToggleWrapper({ withLabel = false, size = 'sm' }: ThemeToggleWrapperProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    // Return a placeholder during SSR
+    return (
+      <div className="inline-flex items-center rounded-lg bg-muted p-1 animate-pulse">
+        <div className="flex items-center gap-1">
+          <div className="h-4 w-4 rounded bg-muted-foreground/20"></div>
+          <div className="h-4 w-4 rounded bg-muted-foreground/20"></div>
+          <div className="h-4 w-4 rounded bg-muted-foreground/20"></div>
+        </div>
+      </div>
+    );
+  }
+
+  return withLabel ? <ThemeToggle /> : <ThemeToggle />;
+}
diff --git a/src/components/ui/theme-toggle.tsx b/src/components/ui/theme-toggle.tsx
new file mode 100644
index 0000000..dc7e8e8
--- /dev/null
+++ b/src/components/ui/theme-toggle.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import React from 'react';
+import { useTheme } from '@/components/providers/theme-provider';
+import { Button } from './button';
+
+export function ThemeToggle() {
+  const { theme, setTheme, effectiveTheme } = useTheme();
+
+  const toggleTheme = () => {
+    if (theme === 'light') {
+      setTheme('dark');
+    } else if (theme === 'dark') {
+      setTheme('system');
+    } else {
+      setTheme('light');
+    }
+  };
+
+  // Icons in linear order: Light, Dark, System
+  const lightIcon = (
+    <svg className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+    </svg>
+  );
+
+  const darkIcon = (
+    <svg className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+    </svg>
+  );
+
+  const systemIcon = (
+    <svg className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+    </svg>
+  );
+
+  // Get the position offset: light(0px), dark(-40px), system(-80px)
+  const getOffset = () => {
+    if (theme === 'light') return '0px';
+    if (theme === 'dark') return '-40px';
+    return '-80px';  // system
+  };
+
+  const getLabel = () => {
+    if (theme === 'system') return 'System';
+    if (effectiveTheme === 'dark') return 'Dark';
+    return 'Light';
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="group relative flex h-10 w-10 cursor-pointer items-center justify-center overflow-hidden rounded-lg border border-border bg-card text-foreground transition-all duration-200 hover:bg-muted hover:border-primary/20 hover:shadow-sm"
+      title={`Switch to ${theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light'} theme`}
+      aria-label={`Toggle theme (currently ${getLabel()})`}
+    >
+      {/* Tumbler window - shows only one icon at a time */}
+      <div className="relative h-10 w-10 overflow-hidden">
+        {/* Horizontal scroll container with 3 icons */}
+        <div
+          className="flex will-change-transform"
+          style={{
+            transform: `translateX(${getOffset()})`,
+            transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+          }}
+        >
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center -translate-x-px">
+            {lightIcon}
+          </div>
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center -translate-x-px">
+            {darkIcon}
+          </div>
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center -translate-x-px">
+            {systemIcon}
+          </div>
+        </div>
+      </div>
+      
+      {/* Tumbler indicator dots */}
+      <div className="absolute -bottom-1 left-1/2 flex -translate-x-1/2 gap-1">
+        <div className={`h-1 w-1 rounded-full transition-colors duration-200 ${
+          theme === 'light' ? 'bg-primary' : 'bg-muted-foreground/30'
+        }`} />
+        <div className={`h-1 w-1 rounded-full transition-colors duration-200 ${
+          theme === 'dark' ? 'bg-primary' : 'bg-muted-foreground/30'
+        }`} />
+        <div className={`h-1 w-1 rounded-full transition-colors duration-200 ${
+          theme === 'system' ? 'bg-primary' : 'bg-muted-foreground/30'
+        }`} />
+      </div>
+    </button>
+  );
+}
+
+export function ThemeToggleWithLabel() {
+  const { theme, setTheme, effectiveTheme } = useTheme();
+
+  const toggleTheme = () => {
+    if (theme === 'light') {
+      setTheme('dark');
+    } else if (theme === 'dark') {
+      setTheme('system');
+    } else {
+      setTheme('light');
+    }
+  };
+
+  const getIcon = () => {
+    if (theme === 'system') {
+      return (
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+          />
+        </svg>
+      );
+    }
+
+    if (effectiveTheme === 'dark') {
+      return (
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+          />
+        </svg>
+      );
+    }
+
+    return (
+      <svg
+        className="h-4 w-4"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+        />
+      </svg>
+    );
+  };
+
+  const getLabel = () => {
+    if (theme === 'system') return 'System';
+    if (effectiveTheme === 'dark') return 'Dark';
+    return 'Light';
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={toggleTheme}
+      className="flex items-center gap-2"
+    >
+      {getIcon()}
+      <span className="text-sm">{getLabel()}</span>
+    </Button>
+  );
+}
diff --git a/src/components/ui/user-avatar.tsx b/src/components/ui/user-avatar.tsx
index 8923796..38156e2 100644
--- a/src/components/ui/user-avatar.tsx
+++ b/src/components/ui/user-avatar.tsx
@@ -23,8 +23,8 @@ export function UserAvatar({
   const initial = user.name?.charAt(0) || user.email?.charAt(0) || "U";
   const borderClass = showBorder
     ? size >= 80
-      ? "border-4 border-white/20"
-      : "border-2 border-white/20"
+      ? "border-4 border-border/20"
+      : "border-2 border-border/20"
     : "";
 
   const avatar = (
@@ -42,7 +42,7 @@ export function UserAvatar({
         />
       ) : (
         <div
-          className="flex h-full w-full items-center justify-center bg-gradient-to-br from-cyan-400 to-indigo-500 font-bold text-white"
+          className="flex h-full w-full items-center justify-center bg-gradient-to-br from-cyan-400 to-indigo-500 font-bold text-foreground"
           style={{ fontSize: size * 0.4 }}
         >
           {initial}
diff --git a/src/features/auth/sign-in-button.tsx b/src/features/auth/sign-in-button.tsx
index 27865f5..6a9e9ea 100644
--- a/src/features/auth/sign-in-button.tsx
+++ b/src/features/auth/sign-in-button.tsx
@@ -11,7 +11,7 @@ export function SignInButton() {
   if (isLoading) {
     return (
       <button
-        className="rounded-full border border-white/10 bg-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.3em] text-white/40"
+        className="rounded-full border border-border/10 bg-background/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.3em] text-foreground/40"
         type="button"
         disabled
       >
@@ -25,7 +25,7 @@ export function SignInButton() {
       <button
         type="button"
         onClick={() => signOut()}
-        className="rounded-full border border-white/10 bg-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.3em] text-white transition hover:border-white/30 hover:bg-white/20"
+        className="rounded-full border border-border/10 bg-background/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.3em] text-foreground transition hover:border-border/30 hover:bg-background/20"
       >
         Sign out
       </button>
@@ -36,7 +36,7 @@ export function SignInButton() {
     <button
       type="button"
       onClick={() => signIn("github")}
-      className="rounded-full border border-white/10 bg-sky-500/80 px-4 py-2 text-xs font-semibold uppercase tracking-[0.3em] text-white transition hover:bg-sky-400"
+      className="rounded-full border border-border/10 bg-primary/80 px-4 py-2 text-xs font-semibold uppercase tracking-[0.3em] text-foreground transition hover:bg-primary/50"
     >
       Sign in with GitHub
     </button>
diff --git a/src/features/impact/impact-section.tsx b/src/features/impact/impact-section.tsx
index ec62036..807a114 100644
--- a/src/features/impact/impact-section.tsx
+++ b/src/features/impact/impact-section.tsx
@@ -26,14 +26,14 @@ export function ImpactSection() {
     <section
       id="impact"
       style={{ scrollMarginTop: "160px" }}
-      className="rounded-3xl border border-white/10 bg-slate-900/70 p-10 backdrop-blur"
+      className="rounded-3xl border border-border/10 bg-muted/70 p-10 backdrop-blur"
     >
       <div className="grid gap-10 md:grid-cols-[minmax(0,1fr)_320px]">
         <div className="space-y-6">
-          <h2 className="text-3xl font-semibold text-white">
+          <h2 className="text-3xl font-semibold text-foreground">
             Every cart funds React ecosystems.
           </h2>
-          <p className="text-sm text-white/60">
+          <p className="text-sm text-foreground/60">
             100% of proceeds fuel React Foundation grants, documentation,
             education, and community-led innovation. We publish transparent
             impact reports each quarter, so you can see which projects your
@@ -43,28 +43,28 @@ export function ImpactSection() {
             {stats.map((stat) => (
               <div
                 key={stat.label}
-                className="rounded-2xl border border-white/10 bg-white/5 p-6 text-white"
+                className="rounded-2xl border border-border/10 bg-background/5 p-6 text-foreground"
               >
-                <p className="text-xs uppercase tracking-[0.3em] text-white/60">
+                <p className="text-xs uppercase tracking-[0.3em] text-foreground/60">
                   {stat.label}
                 </p>
-                <p className="mt-3 text-2xl font-semibold text-white">
+                <p className="mt-3 text-2xl font-semibold text-foreground">
                   {stat.value}
                 </p>
-                <p className="text-xs text-white/60">{stat.caption}</p>
+                <p className="text-xs text-foreground/60">{stat.caption}</p>
               </div>
             ))}
           </div>
         </div>
-        <div className="rounded-2xl border border-white/10 bg-gradient-to-br from-indigo-500/40 via-purple-500/20 to-slate-900 p-6">
-          <p className="text-xs uppercase tracking-[0.3em] text-white/70">
+        <div className="rounded-2xl border border-border/10 bg-gradient-to-br from-cyan-500/40 via-yellow-400/20 to-slate-900 p-6">
+          <p className="text-xs uppercase tracking-[0.3em] text-foreground/70">
             React Foundation Journal
           </p>
-          <p className="mt-4 text-lg font-medium text-white">
+          <p className="mt-4 text-lg font-medium text-foreground">
             &quot;Swag sales helped us fund 12 new documentation maintainers
             this quarter. The community voted, we shipped.&quot;
           </p>
-          <p className="mt-8 text-sm text-white/60">
+          <p className="mt-8 text-sm text-foreground/60">
             Read more impact stories →
           </p>
         </div>
diff --git a/src/features/maintainer-progress/maintainer-progress.tsx b/src/features/maintainer-progress/maintainer-progress.tsx
index f1e9112..2cf80e0 100644
--- a/src/features/maintainer-progress/maintainer-progress.tsx
+++ b/src/features/maintainer-progress/maintainer-progress.tsx
@@ -152,11 +152,11 @@ export function MaintainerProgress() {
   }, [progress.stats]);
 
   return (
-    <section className="rounded-3xl border border-white/10 bg-slate-900/80 p-6 backdrop-blur">
+    <section className="rounded-3xl border border-border/10 bg-muted/80 p-6 backdrop-blur">
       <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
         <div>
-          <h2 className="text-2xl font-semibold text-white">Ecosystem Contributor Progress</h2>
-          <p className="mt-2 max-w-xl text-sm text-white/70">
+          <h2 className="text-2xl font-semibold text-foreground">Ecosystem Contributor Progress</h2>
+          <p className="mt-2 max-w-xl text-sm text-foreground/70">
             Link your GitHub account to unlock the Core Maintainer Essentials collection. We
             track contributions to {ecosystemLibraries.length} React ecosystem libraries across state management, data fetching,
             routing, frameworks, testing, styling, and more over the past year.
@@ -174,31 +174,31 @@ export function MaintainerProgress() {
 
       <div className="mt-6 grid gap-6 md:grid-cols-[minmax(0,1fr)_280px]">
         <div className="space-y-4">
-          <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
-            <p className="text-xs uppercase tracking-[0.3em] text-white/50">Current tier</p>
-            <p className="mt-2 text-xl font-semibold text-white">
+          <div className="rounded-2xl border border-border/10 bg-background/[0.03] p-5">
+            <p className="text-xs uppercase tracking-[0.3em] text-foreground/50">Current tier</p>
+            <p className="mt-2 text-xl font-semibold text-foreground">
               {currentTier?.label ?? "No Tier"}
             </p>
-            <p className="mt-1 text-sm text-white/60">
+            <p className="mt-1 text-sm text-foreground/60">
               {currentTier?.description ?? "Start contributing to unlock the Contributor tier and gain access to exclusive products."}
             </p>
             <div className="mt-4">
-              <div className="flex items-center justify-between text-xs text-white/60">
+              <div className="flex items-center justify-between text-xs text-foreground/60">
                 <span>Score</span>
-                <span className="font-semibold text-white">
+                <span className="font-semibold text-foreground">
                   {formatter.format(progress.stats?.score ?? 0)}
                 </span>
               </div>
-              <div className="mt-2 h-2 rounded-full bg-white/10">
+              <div className="mt-2 h-2 rounded-full bg-background/10">
                 <div
-                  className="h-full rounded-full bg-sky-400 transition-all"
+                  className="h-full rounded-full bg-primary/50 transition-all"
                   style={{ width: `${Math.round(progressTowardsNext * 100)}%` }}
                 />
               </div>
               {nextTier ? (
-                <p className="mt-2 text-xs text-white/50">
+                <p className="mt-2 text-xs text-foreground/50">
                   {Math.max(nextTier.minScore - (progress.stats?.score ?? 0), 0)} more points to
-                  reach <span className="text-white">{nextTier.label}</span>.
+                  reach <span className="text-foreground">{nextTier.label}</span>.
                 </p>
               ) : (
                 <p className="mt-2 text-xs text-emerald-300">
@@ -215,18 +215,18 @@ export function MaintainerProgress() {
           </div>
 
           {categoryContributions.size > 0 && (
-            <div className="rounded-2xl border border-white/10 bg-white/[0.02] p-4">
-              <p className="text-xs uppercase tracking-[0.3em] text-white/50">Category Breakdown</p>
+            <div className="rounded-2xl border border-border/10 bg-background/[0.02] p-4">
+              <p className="text-xs uppercase tracking-[0.3em] text-foreground/50">Category Breakdown</p>
               <div className="mt-3 grid gap-2 sm:grid-cols-2">
                 {Array.from(categoryContributions.entries())
                   .sort((a, b) => b[1] - a[1])
                   .map(([category, count]) => (
                     <div
                       key={category}
-                      className="flex items-center justify-between rounded-lg border border-white/10 bg-white/[0.03] px-3 py-2"
+                      className="flex items-center justify-between rounded-lg border border-border/10 bg-background/[0.03] px-3 py-2"
                     >
-                      <span className="text-xs text-white/70">{categoryLabels[category]}</span>
-                      <span className="text-xs font-semibold text-white">
+                      <span className="text-xs text-foreground/70">{categoryLabels[category]}</span>
+                      <span className="text-xs font-semibold text-foreground">
                         {formatter.format(count)}
                       </span>
                     </div>
@@ -235,40 +235,40 @@ export function MaintainerProgress() {
             </div>
           )}
 
-          <div className="rounded-2xl border border-white/10 bg-white/[0.02] p-4">
+          <div className="rounded-2xl border border-border/10 bg-background/[0.02] p-4">
             <Collapsible
               trigger={
-                <p className="text-sm font-medium tracking-wide text-white/70">Your Contributions</p>
+                <p className="text-sm font-medium tracking-wide text-foreground/70">Your Contributions</p>
               }
             >
               <div className="space-y-8">
                 {/* Scoring System */}
                 <div>
-                  <h3 className="mb-4 text-sm font-semibold text-white/90">Scoring System</h3>
+                  <h3 className="mb-4 text-sm font-semibold text-foreground/90">Scoring System</h3>
 
                   <div className="space-y-2">
-                    <div className="flex items-center justify-between rounded-xl bg-white/5 px-4 py-3 backdrop-blur-sm transition hover:bg-white/[0.07]">
-                      <span className="text-sm text-white/80">Pull Requests Opened</span>
-                      <span className="text-sm font-semibold tabular-nums text-white">8 pts</span>
+                    <div className="flex items-center justify-between rounded-xl bg-background/5 px-4 py-3 backdrop-blur-sm transition hover:bg-background/[0.07]">
+                      <span className="text-sm text-foreground/80">Pull Requests Opened</span>
+                      <span className="text-sm font-semibold tabular-nums text-foreground">8 pts</span>
                     </div>
 
-                    <div className="flex items-center justify-between rounded-xl bg-white/5 px-4 py-3 backdrop-blur-sm transition hover:bg-white/[0.07]">
-                      <span className="text-sm text-white/80">Issues Opened</span>
-                      <span className="text-sm font-semibold tabular-nums text-white">3 pts</span>
+                    <div className="flex items-center justify-between rounded-xl bg-background/5 px-4 py-3 backdrop-blur-sm transition hover:bg-background/[0.07]">
+                      <span className="text-sm text-foreground/80">Issues Opened</span>
+                      <span className="text-sm font-semibold tabular-nums text-foreground">3 pts</span>
                     </div>
 
-                    <div className="flex items-center justify-between rounded-xl bg-white/5 px-4 py-3 backdrop-blur-sm transition hover:bg-white/[0.07]">
-                      <span className="text-sm text-white/80">Commits</span>
-                      <span className="text-sm font-semibold tabular-nums text-white">1 pt</span>
+                    <div className="flex items-center justify-between rounded-xl bg-background/5 px-4 py-3 backdrop-blur-sm transition hover:bg-background/[0.07]">
+                      <span className="text-sm text-foreground/80">Commits</span>
+                      <span className="text-sm font-semibold tabular-nums text-foreground">1 pt</span>
                     </div>
                   </div>
                 </div>
 
                 {/* Tracked Libraries */}
                 <div>
-                  <h3 className="mb-4 text-sm font-semibold text-white/90">
+                  <h3 className="mb-4 text-sm font-semibold text-foreground/90">
                     Tracked Libraries
-                    <span className="ml-2 text-xs font-normal text-white/50">
+                    <span className="ml-2 text-xs font-normal text-foreground/50">
                       ({ecosystemLibraries.length})
                     </span>
                   </h3>
@@ -278,9 +278,9 @@ export function MaintainerProgress() {
                       .sort((a, b) => categoryLabels[a[0]].localeCompare(categoryLabels[b[0]]))
                       .map(([category, repos]) => (
                         <div key={category}>
-                          <p className="mb-2.5 text-xs font-medium uppercase tracking-wider text-white/40">
+                          <p className="mb-2.5 text-xs font-medium uppercase tracking-wider text-foreground/40">
                             {categoryLabels[category]}
-                            <span className="ml-1.5 text-white/30">({repos.length})</span>
+                            <span className="ml-1.5 text-foreground/30">({repos.length})</span>
                           </p>
                           <div className="flex flex-wrap gap-1.5">
                             {repos.map((repo) => {
@@ -292,13 +292,13 @@ export function MaintainerProgress() {
                                   key={repo}
                                   className={`inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium transition-all ${
                                     hasContributions
-                                      ? "bg-emerald-500/15 text-emerald-200 shadow-sm shadow-emerald-500/10"
-                                      : "bg-white/[0.04] text-white/50 hover:bg-white/[0.06]"
+                                      ? "bg-success/15 text-emerald-200 shadow-sm shadow-emerald-500/10"
+                                      : "bg-background/[0.04] text-foreground/50 hover:bg-background/[0.06]"
                                   }`}
                                 >
                                   {repo}
                                   {hasContributions && (
-                                    <span className="inline-flex h-5 min-w-[20px] items-center justify-center rounded-md bg-emerald-500/25 px-1.5 text-[11px] font-semibold tabular-nums text-emerald-100">
+                                    <span className="inline-flex h-5 min-w-[20px] items-center justify-center rounded-md bg-success/25 px-1.5 text-[11px] font-semibold tabular-nums text-emerald-100">
                                       {contributionCount}
                                     </span>
                                   )}
@@ -315,11 +315,11 @@ export function MaintainerProgress() {
           </div>
         </div>
 
-        <aside className="space-y-4 rounded-2xl border border-white/10 bg-white/[0.03] p-5 text-sm text-white/70">
-          <p className="text-xs uppercase tracking-[0.3em] text-white/50">Product Unlock Timeline</p>
+        <aside className="space-y-4 rounded-2xl border border-border/10 bg-background/[0.03] p-5 text-sm text-foreground/70">
+          <p className="text-xs uppercase tracking-[0.3em] text-foreground/50">Product Unlock Timeline</p>
 
           {status === "unauthenticated" ? (
-            <p className="text-sm text-white/60">
+            <p className="text-sm text-foreground/60">
               Link your GitHub account to start unlocking the Core Maintainer Essentials collection.
             </p>
           ) : (
@@ -335,23 +335,23 @@ export function MaintainerProgress() {
                     <div className="mb-3 flex items-center gap-2">
                       <div className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold ${
                         isUnlocked
-                          ? 'bg-emerald-500/20 text-emerald-300'
-                          : 'bg-white/10 text-white/40'
+                          ? 'bg-success/20 text-emerald-300'
+                          : 'bg-background/10 text-foreground/40'
                       }`}>
                         {isUnlocked ? '✓' : '🔒'}
                       </div>
                       <div>
-                        <p className="text-xs font-semibold text-white/90">{tier.label}</p>
-                        <p className="text-[10px] text-white/50">{tier.minScore}+ points</p>
+                        <p className="text-xs font-semibold text-foreground/90">{tier.label}</p>
+                        <p className="text-[10px] text-foreground/50">{tier.minScore}+ points</p>
                       </div>
                     </div>
-                    <ul className="ml-8 space-y-2 border-l-2 border-white/10 pl-4">
+                    <ul className="ml-8 space-y-2 border-l-2 border-border/10 pl-4">
                       {tierProducts.map((product) => (
                         <li key={product.slug} className={isUnlocked ? 'opacity-100' : 'opacity-50'}>
-                          <span className={`text-sm font-medium ${isUnlocked ? 'text-emerald-200' : 'text-white/60'}`}>
+                          <span className={`text-sm font-medium ${isUnlocked ? 'text-emerald-200' : 'text-foreground/60'}`}>
                             {product.name}
                           </span>
-                          <span className="block text-xs text-white/40">{product.tagline}</span>
+                          <span className="block text-xs text-foreground/40">{product.tagline}</span>
                         </li>
                       ))}
                     </ul>
@@ -368,9 +368,9 @@ export function MaintainerProgress() {
 
 function StatCard({ label, value }: { label: string; value: number }) {
   return (
-    <div className="rounded-xl border border-white/10 bg-white/[0.03] p-4 text-center">
-      <p className="text-xs uppercase tracking-[0.3em] text-white/50">{label}</p>
-      <p className="mt-2 text-xl font-semibold text-white">{formatter.format(value)}</p>
+    <div className="rounded-xl border border-border/10 bg-background/[0.03] p-4 text-center">
+      <p className="text-xs uppercase tracking-[0.3em] text-foreground/50">{label}</p>
+      <p className="mt-2 text-xl font-semibold text-foreground">{formatter.format(value)}</p>
     </div>
   );
 }
diff --git a/src/features/maintainer-progress/username-input.tsx b/src/features/maintainer-progress/username-input.tsx
index f6a7510..97d2098 100644
--- a/src/features/maintainer-progress/username-input.tsx
+++ b/src/features/maintainer-progress/username-input.tsx
@@ -42,8 +42,8 @@ export function UsernameInput({ githubLogin, onUsernameChange, isPending }: User
   if (isLoading) {
     return (
       <div className="space-y-2">
-        <div className="h-4 w-24 animate-pulse rounded bg-white/5" />
-        <div className="h-10 w-full animate-pulse rounded-lg bg-white/5" />
+        <div className="h-4 w-24 animate-pulse rounded bg-background/5" />
+        <div className="h-10 w-full animate-pulse rounded-lg bg-background/5" />
       </div>
     );
   }
@@ -52,15 +52,15 @@ export function UsernameInput({ githubLogin, onUsernameChange, isPending }: User
   if (githubLogin) {
     return (
       <div className="space-y-2">
-        <p className="text-xs font-semibold uppercase tracking-[0.25em] text-white/50">
+        <p className="text-xs font-semibold uppercase tracking-[0.25em] text-foreground/50">
           Connected GitHub
         </p>
-        <div className="flex items-center justify-between rounded-lg border border-white/15 bg-slate-950/60 px-3 py-2 text-sm text-white/80">
+        <div className="flex items-center justify-between rounded-lg border border-border/15 bg-background/60 px-3 py-2 text-sm text-foreground/80">
           <span>{githubLogin}</span>
           <button
             type="button"
             onClick={() => onUsernameChange(githubLogin)}
-            className="rounded-md border border-white/10 bg-white/10 px-2 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-white transition hover:border-white/30 hover:bg-white/20 disabled:cursor-not-allowed disabled:border-white/5 disabled:bg-white/5"
+            className="rounded-md border border-border/10 bg-background/10 px-2 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-foreground transition hover:border-border/30 hover:bg-background/20 disabled:cursor-not-allowed disabled:border-border/5 disabled:bg-background/5"
             disabled={isPending}
           >
             {isPending ? "Refreshing…" : "Refresh"}
@@ -74,15 +74,15 @@ export function UsernameInput({ githubLogin, onUsernameChange, isPending }: User
   if (storedUsername && !showCustomInput) {
     return (
       <div className="space-y-2">
-        <p className="text-xs font-semibold uppercase tracking-[0.25em] text-white/50">
+        <p className="text-xs font-semibold uppercase tracking-[0.25em] text-foreground/50">
           Tracking
         </p>
-        <div className="flex items-center justify-between rounded-lg border border-white/15 bg-slate-950/60 px-3 py-2 text-sm text-white/80">
+        <div className="flex items-center justify-between rounded-lg border border-border/15 bg-background/60 px-3 py-2 text-sm text-foreground/80">
           <span>{storedUsername}</span>
           <button
             type="button"
             onClick={() => setShowCustomInput(true)}
-            className="rounded-md border border-white/10 bg-white/10 px-2 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-white transition hover:border-white/30 hover:bg-white/20"
+            className="rounded-md border border-border/10 bg-background/10 px-2 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-foreground transition hover:border-border/30 hover:bg-background/20"
           >
             Change
           </button>
@@ -95,7 +95,7 @@ export function UsernameInput({ githubLogin, onUsernameChange, isPending }: User
   if (showCustomInput) {
     return (
       <div className="space-y-2">
-        <p className="text-xs text-white/60">
+        <p className="text-xs text-foreground/60">
           Enter your GitHub username
         </p>
         <form onSubmit={handleCustomUsernameSubmit} className="flex flex-col gap-2">
@@ -104,13 +104,13 @@ export function UsernameInput({ githubLogin, onUsernameChange, isPending }: User
             value={customUsername}
             onChange={(e) => setCustomUsername(e.target.value)}
             placeholder="GitHub username"
-            className="rounded-lg border border-white/15 bg-slate-950/60 px-3 py-2 text-sm text-white/80 placeholder:text-white/40 focus:border-sky-500/50 focus:outline-none focus:ring-2 focus:ring-sky-500/20"
+            className="rounded-lg border border-border/15 bg-background/60 px-3 py-2 text-sm text-foreground/80 placeholder:text-foreground/40 focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-sky-500/20"
             autoFocus
           />
           <div className="flex gap-2">
             <button
               type="submit"
-              className="flex-1 rounded-md border border-sky-500/30 bg-sky-500/10 px-2 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-sky-300 transition hover:border-sky-500/50 hover:bg-sky-500/20"
+              className="flex-1 rounded-md border border-primary/30 bg-primary/10 px-2 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-sky-300 transition hover:border-primary/50 hover:bg-primary/20"
               disabled={isPending || !customUsername.trim()}
             >
               {isPending ? "Checking..." : "Check"}
@@ -121,7 +121,7 @@ export function UsernameInput({ githubLogin, onUsernameChange, isPending }: User
                 setShowCustomInput(false);
                 setCustomUsername("");
               }}
-              className="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-white/60 transition hover:border-white/20 hover:bg-white/10"
+              className="rounded-md border border-border/10 bg-background/5 px-2 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-foreground/60 transition hover:border-border/20 hover:bg-background/10"
             >
               Cancel
             </button>
@@ -134,12 +134,12 @@ export function UsernameInput({ githubLogin, onUsernameChange, isPending }: User
   // Initial state - no username
   return (
     <div className="space-y-2">
-      <p className="text-xs text-white/60">
+      <p className="text-xs text-foreground/60">
         Track your React ecosystem contributions
       </p>
       <button
         onClick={() => setShowCustomInput(true)}
-        className="w-full rounded-lg border border-white/10 bg-slate-950/60 px-3 py-2 text-sm text-white/70 transition hover:border-cyan-400/30 hover:bg-slate-900/60 hover:text-cyan-300"
+        className="w-full rounded-lg border border-border/10 bg-background/60 px-3 py-2 text-sm text-foreground/70 transition hover:border-cyan-400/30 hover:bg-muted/60 hover:text-cyan-300"
       >
         Enter GitHub Username
       </button>
diff --git a/src/lib/library-icons.tsx b/src/lib/library-icons.tsx
index 24aab87..9c4ff32 100644
--- a/src/lib/library-icons.tsx
+++ b/src/lib/library-icons.tsx
@@ -195,10 +195,10 @@ export function LibraryIcon({
     const firstLetter = libraryName.charAt(0).toUpperCase();
     return (
       <div
-        className={`flex items-center justify-center rounded-md bg-white/10 ${className}`}
+        className={`flex items-center justify-center rounded-md bg-background/10 ${className}`}
         style={{ width: size, height: size, fontSize: size * 0.6 }}
       >
-        <span className="font-bold text-white/80">{firstLetter}</span>
+        <span className="font-bold text-foreground/80">{firstLetter}</span>
       </div>
     );
   }
diff --git a/src/lib/ris/hooks.ts b/src/lib/ris/hooks.ts
index 4504c8f..6a073fc 100644
--- a/src/lib/ris/hooks.ts
+++ b/src/lib/ris/hooks.ts
@@ -386,11 +386,11 @@ export function getRISColorClass(ris: number): string {
  */
 export function getComponentColorClass(component: string): string {
   const colors: Record<string, string> = {
-    EF: 'bg-blue-500/20 text-blue-300',
-    CQ: 'bg-green-500/20 text-green-300',
-    MH: 'bg-purple-500/20 text-purple-300',
-    CB: 'bg-yellow-500/20 text-yellow-300',
-    MA: 'bg-pink-500/20 text-pink-300',
+    EF: 'bg-primary/20 text-blue-300',
+    CQ: 'bg-success/20 text-green-300',
+    MH: 'bg-accent/20 text-purple-300',
+    CB: 'bg-warning/20 text-yellow-300',
+    MA: 'bg-accent/20 text-pink-300',
   };
-  return colors[component] || 'bg-gray-500/20 text-gray-300';
+  return colors[component] || 'bg-muted/20 text-muted-foreground';
 }
diff --git a/src/lib/theme-config.ts b/src/lib/theme-config.ts
new file mode 100644
index 0000000..dddb6b7
--- /dev/null
+++ b/src/lib/theme-config.ts
@@ -0,0 +1,231 @@
+/**
+ * Comprehensive Theme Configuration
+ * 
+ * This file defines all semantic colors and design tokens for the React Foundation Store.
+ * All hardcoded colors should be replaced with these semantic tokens.
+ */
+
+export interface ThemeColors {
+  // Base colors
+  background: string;
+  foreground: string;
+  
+  // Surface colors
+  card: string;
+  cardForeground: string;
+  popover: string;
+  popoverForeground: string;
+  
+  // Interactive colors
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  
+  // Muted colors
+  muted: string;
+  mutedForeground: string;
+  
+  // Border and input
+  border: string;
+  input: string;
+  
+  // Status colors
+  destructive: string;
+  destructiveForeground: string;
+  success: string;
+  successForeground: string;
+  warning: string;
+  warningForeground: string;
+  
+  // Special colors
+  ring: string;
+  
+  // Chart colors
+  chart1: string;
+  chart2: string;
+  chart3: string;
+  chart4: string;
+  chart5: string;
+  
+  // Brand colors
+  ratingsGold: string;
+  
+  // Gradients
+  gradientPrimary: string;
+  gradientSecondary: string;
+  gradientAccent: string;
+
+  // Icon gradients for contributor cards
+  gradientIconCode: string;
+  gradientIconDonate: string;
+  gradientIconSponsor: string;
+  gradientIconMember: string;
+
+  // Shadows
+  shadow: string;
+  shadowColored: string;
+  shadowElevated: string;
+  shadowGlow: string;
+}
+
+export const lightTheme: ThemeColors = {
+  // Base colors
+  background: '#ffffff',
+  foreground: '#0f172a',
+  
+  // Surface colors
+  card: '#ffffff',
+  cardForeground: '#0f172a',
+  popover: '#ffffff',
+  popoverForeground: '#0f172a',
+  
+  // Interactive colors
+  primary: '#0ea5e9',
+  primaryForeground: '#ffffff',
+  secondary: '#f1f5f9',
+  secondaryForeground: '#0f172a',
+  accent: '#f1f5f9',
+  accentForeground: '#0f172a',
+  
+  // Muted colors
+  muted: '#f1f5f9',
+  mutedForeground: '#64748b',
+  
+  // Border and input
+  border: '#e2e8f0',
+  input: '#e2e8f0',
+  
+  // Status colors
+  destructive: '#ef4444',
+  destructiveForeground: '#ffffff',
+  success: '#10b981',
+  successForeground: '#ffffff',
+  warning: '#f59e0b',
+  warningForeground: '#ffffff',
+  
+  // Special colors
+  ring: '#0ea5e9',
+  
+  // Chart colors
+  chart1: '#0ea5e9',
+  chart2: '#8b5cf6',
+  chart3: '#10b981',
+  chart4: '#f59e0b',
+  chart5: '#ef4444',
+  
+  // Brand colors
+  ratingsGold: '#f6c65b',
+  
+  // Gradients
+  gradientPrimary: 'linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%)',
+  gradientSecondary: 'linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%)',
+  gradientAccent: 'linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%)',
+
+  // Icon gradients for contributor cards
+  gradientIconCode: 'linear-gradient(135deg, #34d399 0%, #06b6d4 100%)',
+  gradientIconDonate: 'linear-gradient(135deg, #38bdf8 0%, #6366f1 100%)',
+  gradientIconSponsor: 'linear-gradient(135deg, #fde047 0%, #f97316 100%)',
+  gradientIconMember: 'linear-gradient(135deg, #fb923c 0%, #ef4444 100%)',
+
+  // Shadows
+  shadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+  shadowColored: '0 4px 6px -1px rgb(14 165 233 / 0.1), 0 2px 4px -2px rgb(14 165 233 / 0.1)',
+  shadowElevated: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+  shadowGlow: '0 0 20px rgb(14 165 233 / 0.15), 0 0 40px rgb(14 165 233 / 0.1)',
+};
+
+export const darkTheme: ThemeColors = {
+  // Base colors
+  background: '#0a0a0a',
+  foreground: '#ededed',
+  
+  // Surface colors
+  card: '#0a0a0a',
+  cardForeground: '#ededed',
+  popover: '#0a0a0a',
+  popoverForeground: '#ededed',
+  
+  // Interactive colors
+  primary: '#0ea5e9',
+  primaryForeground: '#ffffff',
+  secondary: '#1a1a1a',
+  secondaryForeground: '#ededed',
+  accent: '#1a1a1a',
+  accentForeground: '#ededed',
+  
+  // Muted colors
+  muted: '#1a1a1a',
+  mutedForeground: '#a1a1aa',
+  
+  // Border and input
+  border: '#27272a',
+  input: '#27272a',
+  
+  // Status colors
+  destructive: '#ef4444',
+  destructiveForeground: '#ffffff',
+  success: '#10b981',
+  successForeground: '#ffffff',
+  warning: '#f59e0b',
+  warningForeground: '#ffffff',
+  
+  // Special colors
+  ring: '#0ea5e9',
+  
+  // Chart colors
+  chart1: '#0ea5e9',
+  chart2: '#8b5cf6',
+  chart3: '#10b981',
+  chart4: '#f59e0b',
+  chart5: '#ef4444',
+  
+  // Brand colors
+  ratingsGold: '#f6c65b',
+  
+  // Gradients
+  gradientPrimary: 'linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%)',
+  gradientSecondary: 'linear-gradient(135deg, #1a1a1a 0%, #27272a 100%)',
+  gradientAccent: 'linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%)',
+
+  // Icon gradients for contributor cards (brighter for dark mode)
+  gradientIconCode: 'linear-gradient(135deg, #34d399 0%, #22d3ee 100%)',
+  gradientIconDonate: 'linear-gradient(135deg, #38bdf8 0%, #818cf8 100%)',
+  gradientIconSponsor: 'linear-gradient(135deg, #fde047 0%, #fb923c 100%)',
+  gradientIconMember: 'linear-gradient(135deg, #fb923c 0%, #f87171 100%)',
+
+  // Shadows
+  shadow: '0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3)',
+  shadowColored: '0 4px 6px -1px rgb(14 165 233 / 0.2), 0 2px 4px -2px rgb(14 165 233 / 0.2)',
+  shadowElevated: '0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5)',
+  shadowGlow: '0 0 20px rgb(14 165 233 / 0.25), 0 0 40px rgb(14 165 233 / 0.15)',
+};
+
+export const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+};
+
+/**
+ * Get theme colors for a specific theme
+ */
+export function getThemeColors(theme: 'light' | 'dark'): ThemeColors {
+  return themes[theme];
+}
+
+/**
+ * Apply theme colors to the document
+ */
+export function applyThemeColors(colors: ThemeColors) {
+  if (typeof window === 'undefined') return;
+  
+  const root = document.documentElement;
+  
+  // Apply all color properties
+  Object.entries(colors).forEach(([key, value]) => {
+    root.style.setProperty(`--color-${key}`, value);
+  });
+}
+
diff --git a/src/lib/theme-utils.ts b/src/lib/theme-utils.ts
new file mode 100644
index 0000000..7200063
--- /dev/null
+++ b/src/lib/theme-utils.ts
@@ -0,0 +1,158 @@
+/**
+ * Theme Utilities
+ * 
+ * Provides semantic color classes and utilities to replace hardcoded colors
+ * throughout the application. This ensures all colors are themeable.
+ */
+
+import { cn } from '@/lib/cn';
+
+/**
+ * Semantic color classes that replace hardcoded Tailwind colors
+ */
+export const themeColors = {
+  // Background colors
+  bg: 'bg-background',
+  bgCard: 'bg-card',
+  bgMuted: 'bg-muted',
+  bgPrimary: 'bg-primary',
+  bgSecondary: 'bg-secondary',
+  bgAccent: 'bg-accent',
+  bgDestructive: 'bg-destructive',
+  bgSuccess: 'bg-success',
+  bgWarning: 'bg-warning',
+  
+  // Text colors
+  text: 'text-foreground',
+  textMuted: 'text-muted-foreground',
+  textPrimary: 'text-primary',
+  textSecondary: 'text-secondary-foreground',
+  textAccent: 'text-accent-foreground',
+  textDestructive: 'text-destructive-foreground',
+  textSuccess: 'text-success-foreground',
+  textWarning: 'text-warning-foreground',
+  
+  // Border colors
+  border: 'border-border',
+  borderPrimary: 'border-primary',
+  borderSecondary: 'border-secondary',
+  borderAccent: 'border-accent',
+  borderDestructive: 'border-destructive',
+  borderSuccess: 'border-success',
+  borderWarning: 'border-warning',
+  
+  // Ring colors
+  ring: 'ring-ring',
+  ringPrimary: 'ring-primary',
+  ringSecondary: 'ring-secondary',
+  ringAccent: 'ring-accent',
+  ringDestructive: 'ring-destructive',
+  ringSuccess: 'ring-success',
+  ringWarning: 'ring-warning',
+  
+  // Shadow colors
+  shadow: 'shadow-lg',
+  shadowColored: 'shadow-lg shadow-primary/20',
+  shadowDestructive: 'shadow-lg shadow-destructive/20',
+  shadowSuccess: 'shadow-lg shadow-success/20',
+  shadowWarning: 'shadow-lg shadow-warning/20',
+} as const;
+
+/**
+ * Semantic gradient classes
+ */
+export const themeGradients = {
+  primary: 'bg-gradient-to-br from-primary to-primary/80',
+  secondary: 'bg-gradient-to-br from-secondary to-secondary/80',
+  accent: 'bg-gradient-to-br from-accent to-accent/80',
+  muted: 'bg-gradient-to-br from-muted to-muted/80',
+  destructive: 'bg-gradient-to-br from-destructive to-destructive/80',
+  success: 'bg-gradient-to-br from-success to-success/80',
+  warning: 'bg-gradient-to-br from-warning to-warning/80',
+} as const;
+
+/**
+ * Semantic button variants that replace hardcoded colors
+ */
+export const buttonVariants = {
+  default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+  accent: 'bg-accent text-accent-foreground hover:bg-accent/80',
+  destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+  success: 'bg-success text-success-foreground hover:bg-success/90',
+  warning: 'bg-warning text-warning-foreground hover:bg-warning/90',
+  outline: 'border border-border bg-background text-foreground hover:bg-muted',
+  ghost: 'text-foreground hover:bg-muted',
+  link: 'text-primary underline-offset-4 hover:underline',
+} as const;
+
+/**
+ * Semantic input variants
+ */
+export const inputVariants = {
+  default: 'border-border bg-background text-foreground placeholder:text-muted-foreground focus:border-primary focus:ring-primary',
+  error: 'border-destructive bg-background text-foreground placeholder:text-muted-foreground focus:border-destructive focus:ring-destructive',
+  success: 'border-success bg-background text-foreground placeholder:text-muted-foreground focus:border-success focus:ring-success',
+} as const;
+
+/**
+ * Semantic status colors
+ */
+export const statusColors = {
+  info: {
+    bg: 'bg-primary/10',
+    text: 'text-primary',
+    border: 'border-primary/20',
+    icon: 'text-primary',
+  },
+  success: {
+    bg: 'bg-success/10',
+    text: 'text-success',
+    border: 'border-success/20',
+    icon: 'text-success',
+  },
+  warning: {
+    bg: 'bg-warning/10',
+    text: 'text-warning',
+    border: 'border-warning/20',
+    icon: 'text-warning',
+  },
+  error: {
+    bg: 'bg-destructive/10',
+    text: 'text-destructive',
+    border: 'border-destructive/20',
+    icon: 'text-destructive',
+  },
+} as const;
+
+/**
+ * Utility function to combine theme colors with additional classes
+ */
+export function themeClass(baseClass: string, additionalClasses?: string) {
+  return cn(baseClass, additionalClasses);
+}
+
+/**
+ * Common semantic class combinations
+ */
+export const semanticClasses = {
+  // Cards
+  card: 'bg-card text-card-foreground border border-border rounded-lg shadow',
+  cardHover: 'bg-card text-card-foreground border border-border rounded-lg shadow hover:shadow-md transition-shadow',
+  
+  // Buttons
+  buttonPrimary: themeClass(buttonVariants.default, 'px-4 py-2 rounded-md font-medium transition-colors'),
+  buttonSecondary: themeClass(buttonVariants.secondary, 'px-4 py-2 rounded-md font-medium transition-colors'),
+  buttonGhost: themeClass(buttonVariants.ghost, 'px-4 py-2 rounded-md font-medium transition-colors'),
+  
+  // Inputs
+  input: themeClass(inputVariants.default, 'px-3 py-2 rounded-md border transition-colors'),
+  inputError: themeClass(inputVariants.error, 'px-3 py-2 rounded-md border transition-colors'),
+  
+  // Status indicators
+  statusInfo: themeClass("px-3 py-2 rounded-md border", statusColors.info.bg),
+  statusSuccess: themeClass("px-3 py-2 rounded-md border", statusColors.success.bg),
+  statusWarning: themeClass("px-3 py-2 rounded-md border", statusColors.warning.bg),
+  statusError: themeClass("px-3 py-2 rounded-md border", statusColors.error.bg),
+} as const;
+
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
new file mode 100644
index 0000000..9c86d3e
--- /dev/null
+++ b/src/lib/theme.ts
@@ -0,0 +1,185 @@
+/**
+ * Theme configuration and utilities for the React Foundation Store
+ */
+
+export type Theme = 'light' | 'dark' | 'system';
+
+export interface ThemeConfig {
+  light: {
+    background: string;
+    foreground: string;
+    muted: string;
+    mutedForeground: string;
+    popover: string;
+    popoverForeground: string;
+    card: string;
+    cardForeground: string;
+    border: string;
+    input: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    ring: string;
+    chart1: string;
+    chart2: string;
+    chart3: string;
+    chart4: string;
+    chart5: string;
+  };
+  dark: {
+    background: string;
+    foreground: string;
+    muted: string;
+    mutedForeground: string;
+    popover: string;
+    popoverForeground: string;
+    card: string;
+    cardForeground: string;
+    border: string;
+    input: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    ring: string;
+    chart1: string;
+    chart2: string;
+    chart3: string;
+    chart4: string;
+    chart5: string;
+  };
+}
+
+export const themeConfig: ThemeConfig = {
+  light: {
+    background: '#ffffff',
+    foreground: '#0f172a',        // slate-900 - dark for readability
+    muted: '#f1f5f9',
+    mutedForeground: '#475569',   // slate-600 - darker for better contrast
+    popover: '#ffffff',
+    popoverForeground: '#0f172a',
+    card: '#ffffff',
+    cardForeground: '#0f172a',
+    border: '#e2e8f0',
+    input: '#e2e8f0',
+    primary: '#0ea5e9',
+    primaryForeground: '#ffffff',
+    secondary: '#f1f5f9',
+    secondaryForeground: '#0f172a',
+    accent: '#f1f5f9',
+    accentForeground: '#0f172a',
+    destructive: '#ef4444',
+    destructiveForeground: '#ffffff',
+    ring: '#0ea5e9',
+    chart1: '#0ea5e9',
+    chart2: '#8b5cf6',
+    chart3: '#10b981',
+    chart4: '#f59e0b',
+    chart5: '#ef4444',
+  },
+  dark: {
+    background: '#0f172a',  // slate-900 to match react.foundation
+    foreground: '#ffffff',  // pure white for maximum brightness
+    muted: '#1e293b',       // slate-800
+    mutedForeground: '#94a3b8',  // slate-400
+    popover: '#1e293b',     // slate-800
+    popoverForeground: '#f8fafc',
+    card: '#1e293b',        // slate-800
+    cardForeground: '#f8fafc',
+    border: '#334155',      // slate-700 - subtle but visible when needed
+    input: '#334155',
+    primary: '#0ea5e9',     // sky-500
+    primaryForeground: '#ffffff',
+    secondary: '#334155',   // slate-700
+    secondaryForeground: '#f8fafc',
+    accent: '#334155',      // slate-700
+    accentForeground: '#f8fafc',
+    destructive: '#ef4444',
+    destructiveForeground: '#ffffff',
+    ring: '#0ea5e9',
+    chart1: '#0ea5e9',
+    chart2: '#8b5cf6',
+    chart3: '#10b981',
+    chart4: '#f59e0b',
+    chart5: '#ef4444',
+  },
+};
+
+/**
+ * Get the effective theme (resolves 'system' to actual theme)
+ */
+export function getEffectiveTheme(theme: Theme): 'light' | 'dark' {
+  if (theme === 'system') {
+    if (typeof window === 'undefined') {
+      // Default to light during SSR
+      return 'light';
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return theme;
+}
+
+/**
+ * Apply theme to document
+ */
+export function applyTheme(theme: Theme) {
+  if (typeof window === 'undefined') {
+    return; // Skip during SSR
+  }
+
+  const effectiveTheme = getEffectiveTheme(theme);
+  const root = document.documentElement;
+
+  // Set data attribute for reference
+  root.setAttribute('data-theme', effectiveTheme);
+
+  // Toggle dark class - CSS handles all color changes
+  if (effectiveTheme === 'dark') {
+    root.classList.add('dark');
+  } else {
+    root.classList.remove('dark');
+  }
+
+  // Update meta theme-color for mobile browsers
+  const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+  if (metaThemeColor) {
+    const bgColor = effectiveTheme === 'dark' ? '#0f172a' : '#ffffff';
+    metaThemeColor.setAttribute('content', bgColor);
+  }
+}
+
+/**
+ * Get stored theme from localStorage
+ */
+export function getStoredTheme(): Theme {
+  if (typeof window === 'undefined') return 'system';
+  
+  try {
+    const stored = localStorage.getItem('react-foundation-theme');
+    return (stored as Theme) || 'system';
+  } catch {
+    return 'system';
+  }
+}
+
+/**
+ * Store theme in localStorage
+ */
+export function storeTheme(theme: Theme) {
+  if (typeof window === 'undefined') return;
+  
+  try {
+    localStorage.setItem('react-foundation-theme', theme);
+  } catch {
+    // Ignore localStorage errors
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index c133409..5d606a9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }