diff --git a/src/pages/index.astro b/src/pages/index.astro
index d32019c..92fb133 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -27,10 +27,10 @@ const integrationPills = [
   { name: 'Spotify', icon: siIcon(siSpotify), color: '#1DB954' },
   { name: 'Hue', icon: siIcon(siPhilipshue), color: '#0065D3' },
   { name: 'Obsidian', icon: siIcon(siObsidian), color: '#7C3AED' },
-  { name: 'Twitter', icon: siIcon(siX), color: '#FFFFFF' },
+  { name: 'Twitter', icon: siIcon(siX), color: 'currentColor' },
   { name: 'Browser', icon: siIcon(siGooglechrome), color: '#4285F4' },
   { name: 'Gmail', icon: siIcon(siGmail), color: '#EA4335' },
-  { name: 'GitHub', icon: siIcon(siGithub), color: '#FFFFFF' },
+  { name: 'GitHub', icon: siIcon(siGithub), color: 'currentColor' },
 ];
 
 // Split top 30 into two rows for carousel
@@ -1813,7 +1813,7 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
     height: 36px;
     width: auto;
     opacity: 0.7;
-    transition: opacity 0.25s ease;
+    transition: opacity 0.25s ease, filter 0.25s ease;
   }
 
   .sponsor-card:hover .sponsor-logo {
@@ -1828,6 +1828,10 @@ const duration2 = (row2.length / 2 * pixelsPerItem) / pixelsPerSecond;
     height: 32px;
   }
 
+  html[data-theme='light'] .sponsor-logo {
+    filter: invert(1);
+  }
+
   @media (max-width: 480px) {
     .sponsors-grid {
       gap: 16px;
diff --git a/src/pages/integrations.astro b/src/pages/integrations.astro
index 54f0855..49a2149 100644
--- a/src/pages/integrations.astro
+++ b/src/pages/integrations.astro
@@ -80,7 +80,7 @@ const chatProviders = [
   { name: 'Nextcloud Talk', icon: siIcon(siNextcloud), color: '#0082C9', desc: 'Self-hosted Nextcloud chat', docs: 'https://docs.openclaw.ai/channels/nextcloud-talk' },
   { name: 'Matrix', icon: siIcon(siMatrix), color: '#000000', desc: 'Matrix protocol', docs: 'https://docs.openclaw.ai/channels/matrix' },
   { name: 'Nostr', icon: 'lucide:message-circle', color: '#8F2CFF', desc: 'Decentralized DMs via NIP-04', docs: 'https://docs.openclaw.ai/channels/nostr' },
-  { name: 'Tlon Messenger', icon: tlonIcon, color: '#FFFFFF', desc: 'P2P ownership-first chat', docs: 'https://docs.urbit.org' },
+  { name: 'Tlon Messenger', icon: tlonIcon, color: 'currentColor', desc: 'P2P ownership-first chat', docs: 'https://docs.urbit.org' },
   { name: 'Zalo', icon: siIcon(siZalo), color: '#0068FF', desc: 'Zalo Bot API', docs: 'https://docs.openclaw.ai/channels/zalo' },
   { name: 'Zalo Personal', icon: siIcon(siZalo), color: '#0068FF', desc: 'Personal account via QR login', docs: 'https://docs.openclaw.ai/channels/zalouser' },
   { name: 'WebChat', icon: 'lucide:globe', color: '#00E5CC', desc: 'Browser-based UI', docs: 'https://docs.openclaw.ai/webchat' },
@@ -91,19 +91,19 @@ const modelProviders = [
   { name: 'OpenAI', icon: 'lucide:bot', color: '#00A67E', desc: 'GPT-4, GPT-5, o1', docs: 'https://docs.openclaw.ai/models' },
   { name: 'Google', icon: siIcon(siGoogle), color: '#4285F4', desc: 'Gemini 2.5 Pro/Flash', docs: 'https://docs.openclaw.ai/models' },
   { name: 'MiniMax', icon: minimaxIcon, color: '#E91E63', desc: 'MiniMax-M2.1', docs: 'https://docs.openclaw.ai/providers/minimax' },
-  { name: 'xAI', icon: siIcon(siX), color: '#FFFFFF', desc: 'Grok 3 & 4', docs: 'https://docs.openclaw.ai/models' },
-  { name: 'Vercel AI Gateway', icon: siIcon(siVercel), color: '#FFFFFF', desc: 'Hundreds of models, 1 API key', docs: 'https://docs.openclaw.ai/providers/vercel-ai-gateway' },
+  { name: 'xAI', icon: siIcon(siX), color: 'currentColor', desc: 'Grok 3 & 4', docs: 'https://docs.openclaw.ai/models' },
+  { name: 'Vercel AI Gateway', icon: siIcon(siVercel), color: 'currentColor', desc: 'Hundreds of models, 1 API key', docs: 'https://docs.openclaw.ai/providers/vercel-ai-gateway' },
   { name: 'OpenRouter', icon: 'lucide:zap', color: '#6366F1', desc: 'Unified API gateway', docs: 'https://docs.openclaw.ai/models' },
   { name: 'Mistral', icon: siIcon(siMistralai), color: '#FF7000', desc: 'Mistral Large & Codestral', docs: 'https://docs.openclaw.ai/models' },
   { name: 'DeepSeek', icon: 'lucide:brain', color: '#4D6BFE', desc: 'DeepSeek V3 & R1', docs: 'https://docs.openclaw.ai/models' },
   { name: 'GLM', icon: 'lucide:message-circle', color: '#00D4AA', desc: 'ChatGLM models', docs: 'https://docs.openclaw.ai/models' },
   { name: 'Perplexity', icon: siIcon(siPerplexity), color: '#20B8CD', desc: 'Search-augmented AI', docs: 'https://docs.openclaw.ai/models' },
   { name: 'Hugging Face', icon: siIcon(siHuggingface), color: '#FFD21E', desc: 'Open-source models', docs: 'https://docs.openclaw.ai/models' },
-  { name: 'Local Models', icon: siIcon(siOllama), color: '#FFFFFF', desc: 'Ollama, LM Studio', docs: 'https://docs.openclaw.ai/models' },
+  { name: 'Local Models', icon: siIcon(siOllama), color: 'currentColor', desc: 'Ollama, LM Studio', docs: 'https://docs.openclaw.ai/models' },
 ];
 
 const companionApps = [
-  { name: 'macOS', icon: siIcon(siMacos), color: '#FFFFFF', desc: 'Menu bar app + Voice Wake', docs: 'https://docs.openclaw.ai/macos' },
+  { name: 'macOS', icon: siIcon(siMacos), color: 'currentColor', desc: 'Menu bar app + Voice Wake', docs: 'https://docs.openclaw.ai/macos' },
   { name: 'iOS', icon: siIcon(siIos), color: '#007AFF', desc: 'Canvas, camera, Voice Wake', docs: 'https://docs.openclaw.ai/ios' },
   { name: 'Android', icon: siIcon(siAndroid), color: '#34A853', desc: 'Canvas, camera, screen', docs: 'https://docs.openclaw.ai/android' },
   { name: 'Windows', icon: 'lucide:monitor', color: '#0078D4', desc: 'WSL2 recommended', docs: 'https://docs.openclaw.ai/windows' },
@@ -114,16 +114,16 @@ const productivityApps = [
   { name: 'Apple Notes', icon: 'lucide:sticky-note', color: '#FFCC00', desc: 'Native macOS/iOS notes', docs: 'https://clawhub.ai/skills/apple-notes' },
   { name: 'Apple Reminders', icon: 'lucide:check-square', color: '#FF9500', desc: 'Task management', docs: 'https://clawhub.ai/skills/apple-reminders' },
   { name: 'Things 3', icon: 'lucide:list-todo', color: '#4A90D9', desc: 'GTD task manager', docs: 'https://clawhub.ai/skills/things-mac' },
-  { name: 'Notion', icon: siIcon(siNotion), color: '#FFFFFF', desc: 'Workspace & databases', docs: 'https://clawhub.ai/skills' },
+  { name: 'Notion', icon: siIcon(siNotion), color: 'currentColor', desc: 'Workspace & databases', docs: 'https://clawhub.ai/skills' },
   { name: 'Obsidian', icon: siIcon(siObsidian), color: '#7C3AED', desc: 'Knowledge graph notes', docs: 'https://clawhub.ai/skills/obsidian' },
   { name: 'Bear Notes', icon: 'lucide:pen-tool', color: '#DD4C4F', desc: 'Markdown notes', docs: 'https://clawhub.ai/skills' },
   { name: 'Trello', icon: siIcon(siTrello), color: '#0079BF', desc: 'Kanban boards', docs: 'https://clawhub.ai/skills/trello' },
-  { name: 'GitHub', icon: siIcon(siGithub), color: '#FFFFFF', desc: 'Code, issues, PRs', docs: 'https://clawhub.ai/skills' },
+  { name: 'GitHub', icon: siIcon(siGithub), color: 'currentColor', desc: 'Code, issues, PRs', docs: 'https://clawhub.ai/skills' },
 ];
 
 const musicAudio = [
   { name: 'Spotify', icon: siIcon(siSpotify), color: '#1DB954', desc: 'Music playback control', docs: 'https://clawhub.ai/skills/spotify-player' },
-  { name: 'Sonos', icon: siIcon(siSonos), color: '#FFFFFF', desc: 'Multi-room audio', docs: 'https://clawhub.ai/skills/sonoscli' },
+  { name: 'Sonos', icon: siIcon(siSonos), color: 'currentColor', desc: 'Multi-room audio', docs: 'https://clawhub.ai/skills/sonoscli' },
   { name: 'Shazam', icon: siIcon(siShazam), color: '#0088FF', desc: 'Song recognition', docs: 'https://clawhub.ai/skills/songsee' },
 ];
 
@@ -152,7 +152,7 @@ const mediaCreative = [
 ];
 
 const socialComms = [
-  { name: 'Twitter/X', icon: siIcon(siX), color: '#FFFFFF', desc: 'Tweet, reply, search', docs: 'https://clawhub.ai/skills/bird' },
+  { name: 'Twitter/X', icon: siIcon(siX), color: 'currentColor', desc: 'Tweet, reply, search', docs: 'https://clawhub.ai/skills/bird' },
   { name: 'Email', icon: 'lucide:mail', color: '#D44638', desc: 'Send & read emails', docs: 'https://clawhub.ai/skills/himalaya' },
 ];
 
diff --git a/src/pages/shoutouts.astro b/src/pages/shoutouts.astro
index b2c7ceb..a9dd3b2 100644
--- a/src/pages/shoutouts.astro
+++ b/src/pages/shoutouts.astro
@@ -164,7 +164,7 @@ const allTestimonials = [...testimonials, ...extraTestimonials];
     padding: 20px;
     border-radius: 14px;
     border: 1px solid var(--border-subtle);
-    background: rgba(10, 15, 26, 0.7);
+    background: var(--surface-card-strong);
     backdrop-filter: blur(8px);
     text-decoration: none;
     color: var(--text-primary);
@@ -174,7 +174,7 @@ const allTestimonials = [...testimonials, ...extraTestimonials];
   .shoutout-card:hover {
     border-color: var(--coral-bright);
     transform: translateY(-3px);
-    box-shadow: 0 12px 32px rgba(255, 77, 77, 0.15);
+    box-shadow: 0 12px 32px var(--shadow-coral-soft);
   }
 
   .shoutout-avatar {