refactor: convert all branding to monochrome (black/white/gray only)

public/install.sh

@@ -14,7 +14,7 @@
         --bg: #0a0a0a;
         --text: #e5e5e5;
         --muted: #737373;
-        --accent: #fd4444;
+        --accent: #ffffff;
         --border: #262626;
         --code-bg: #171717;
       }

src/components/AIPlatformSection.tsx

@@ -16,7 +16,7 @@ const AIPlatformSection = () => {
     <section className="relative py-20 sm:py-32 overflow-hidden">
       {/* Background elements - simplified */}
       <div className="absolute inset-0 bg-[var(--black)]" />
-      <div className="absolute inset-0 bg-gradient-to-b from-purple-900/5 to-black/90"></div>
+      <div className="absolute inset-0 bg-gradient-to-b from-neutral-800/5 to-black/90"></div>
       
       <GridLines spacing={60} opacity={0.2} color="rgba(147, 51, 234, 0.15)" />
       
@@ -29,7 +29,7 @@ const AIPlatformSection = () => {
           className="text-center mb-16"
         >
           <div className="flex justify-center mb-4">
-            <span className="inline-block px-4 py-1 rounded-full bg-purple-900/30 border border-purple-500/30 text-purple-300 text-sm font-medium">
+            <span className="inline-block px-4 py-1 rounded-full bg-neutral-800/30 border border-neutral-500/30 text-neutral-300 text-sm font-medium">
               Unified AI Development
             </span>
           </div>
@@ -97,7 +97,7 @@ const AIPlatformSection = () => {
         >
           <Button
             size="lg"
-            className="bg-gradient-to-r from-purple-700 to-blue-700 hover:from-purple-600 hover:to-blue-600 rounded-full"
+            className="bg-gradient-to-r from-neutral-700 to-neutral-700 hover:from-neutral-600 hover:to-neutral-600 rounded-full"
           >
             <a href="/ai" className="flex items-center">
               Explore the Platform <ArrowRight className="ml-2 h-5 w-5" />

src/components/CommandPalette.tsx

@@ -23,7 +23,7 @@ import {
   Command,
 } from "lucide-react";
 
-const BRAND_COLOR = "#fd4444";
+const BRAND_COLOR = "#ffffff";
 
 interface CommandItem {
   id: string;
@@ -237,12 +237,12 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({ isOpen, onClose }) => {
                           >
                             <div
                               className={`w-8 h-8 rounded-lg flex items-center justify-center ${
-                                isSelected ? "bg-[#fd4444]/20" : "bg-neutral-800"
+                                isSelected ? "bg-white/20" : "bg-neutral-800"
                               }`}
                             >
                               <Icon
                                 className={`w-4 h-4 ${
-                                  isSelected ? "text-[#fd4444]" : "text-neutral-500"
+                                  isSelected ? "text-white" : "text-neutral-500"
                                 }`}
                               />
                             </div>

src/components/Contact.tsx

@@ -42,7 +42,7 @@ const Contact = () => {
                     <input
                       type="text"
                       id="name"
-                      className="w-full px-4 py-2 bg-[var(--black)]/50 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                      className="w-full px-4 py-2 bg-[var(--black)]/50 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-500"
                       placeholder="Your name"
                     />
                   </div>
@@ -53,7 +53,7 @@ const Contact = () => {
                     <input
                       type="email"
                       id="email"
-                      className="w-full px-4 py-2 bg-[var(--black)]/50 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                      className="w-full px-4 py-2 bg-[var(--black)]/50 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-500"
                       placeholder="[email protected]"
                     />
                   </div>
@@ -66,7 +66,7 @@ const Contact = () => {
                   <input
                     type="text"
                     id="subject"
-                    className="w-full px-4 py-2 bg-[var(--black)]/50 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+                    className="w-full px-4 py-2 bg-[var(--black)]/50 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-500"
                     placeholder="What is this regarding?"
                   />
                 </div>
@@ -78,12 +78,12 @@ const Contact = () => {
                   <textarea
                     id="message"
                     rows={6}
-                    className="w-full px-4 py-2 bg-[var(--black)]/50 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 resize-none"
+                    className="w-full px-4 py-2 bg-[var(--black)]/50 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-500 resize-none"
                     placeholder="Tell us how we can help..."
                   />
                 </div>
                 
-                <Button type="submit" className="w-full flex items-center justify-center bg-purple-600 hover:bg-purple-700" size="sm">
+                <Button type="submit" className="w-full flex items-center justify-center bg-neutral-600 hover:bg-neutral-700" size="sm">
                   <Send className="mr-2 h-4 w-4" />
                   Send Message
                 </Button>
@@ -92,15 +92,15 @@ const Contact = () => {
             
             {/* Contact Information */}
             <div className="flex flex-col">
-              <div className="bg-gradient-to-br from-purple-900/30 to-blue-900/30 rounded-xl p-8 border border-purple-500/20 mb-8">
+              <div className="bg-gradient-to-br from-neutral-800/30 to-neutral-800/30 rounded-xl p-8 border border-neutral-500/20 mb-8">
                 <h2 className="text-2xl font-semibold mb-6">Contact Information</h2>
                 <div className="space-y-6">
                   <div className="flex items-start">
-                    <Mail className="h-6 w-6 text-purple-400 mr-4 mt-1" />
+                    <Mail className="h-6 w-6 text-neutral-400 mr-4 mt-1" />
                     <div>
                       <h3 className="font-medium">Email</h3>
                       <p className="text-neutral-300">
-                        <a href="mailto:[email protected]" className="hover:text-purple-400 transition-colors">
+                        <a href="mailto:[email protected]" className="hover:text-neutral-400 transition-colors">
                           info@hanzo.ai
                         </a>
                       </p>
@@ -108,11 +108,11 @@ const Contact = () => {
                   </div>
                   
                   <div className="flex items-start">
-                    <Phone className="h-6 w-6 text-purple-400 mr-4 mt-1" />
+                    <Phone className="h-6 w-6 text-neutral-400 mr-4 mt-1" />
                     <div>
                       <h3 className="font-medium">Phone</h3>
                       <p className="text-neutral-300">
-                        <a href="tel:+18005551234" className="hover:text-purple-400 transition-colors">
+                        <a href="tel:+18005551234" className="hover:text-neutral-400 transition-colors">
                           +1 (800) 555-1234
                         </a>
                       </p>
@@ -120,7 +120,7 @@ const Contact = () => {
                   </div>
                   
                   <div className="flex items-start">
-                    <MapPin className="h-6 w-6 text-purple-400 mr-4 mt-1" />
+                    <MapPin className="h-6 w-6 text-neutral-400 mr-4 mt-1" />
                     <div>
                       <h3 className="font-medium">Location</h3>
                       <p className="text-neutral-300">
@@ -141,32 +141,32 @@ const Contact = () => {
                 
                 <div className="space-y-4">
                   <a href="https://discord.gg/XthHQQj" className="flex items-center px-4 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
-                    <MessageSquare className="h-5 w-5 text-purple-400 mr-3" />
+                    <MessageSquare className="h-5 w-5 text-neutral-400 mr-3" />
                     <span>Join our Discord Community</span>
                   </a>
                   
                   <a href="https://github.com/hanzoai" className="flex items-center px-4 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
-                    <Github className="h-5 w-5 text-purple-400 mr-3" />
+                    <Github className="h-5 w-5 text-neutral-400 mr-3" />
                     <span>Follow us on GitHub</span>
                   </a>
                   
                   <a href="https://twitter.com/hanzoai" className="flex items-center px-4 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
-                    <Twitter className="h-5 w-5 text-purple-400 mr-3" />
+                    <Twitter className="h-5 w-5 text-neutral-400 mr-3" />
                     <span>Follow us on Twitter</span>
                   </a>
 
                   <a href="https://linkedin.com/company/hanzo-ai" className="flex items-center px-4 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
-                    <Linkedin className="h-5 w-5 text-purple-400 mr-3" />
+                    <Linkedin className="h-5 w-5 text-neutral-400 mr-3" />
                     <span>Connect on LinkedIn</span>
                   </a>
 
                   <a href="https://facebook.com/hanzo-inc" className="flex items-center px-4 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
-                    <Facebook className="h-5 w-5 text-purple-400 mr-3" />
+                    <Facebook className="h-5 w-5 text-neutral-400 mr-3" />
                     <span>Like us on Facebook</span>
                   </a>
 
                   <a href="https://instagram.com/hanzoai" className="flex items-center px-4 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors">
-                    <Instagram className="h-5 w-5 text-purple-400 mr-3" />
+                    <Instagram className="h-5 w-5 text-neutral-400 mr-3" />
                     <span>Follow us on Instagram</span>
                   </a>
                 </div>
@@ -180,7 +180,7 @@ const Contact = () => {
             <p className="text-neutral-300 mb-4">
               Can't find what you're looking for? Check our comprehensive FAQ section.
             </p>
-            <Button variant="outline" className="border-purple-500 text-[var(--white)] hover:bg-purple-900/20" size="sm">
+            <Button variant="outline" className="border-neutral-500 text-[var(--white)] hover:bg-neutral-800/20" size="sm">
               <a href="/pricing#faq">View FAQ</a>
             </Button>
           </div>

src/components/Features.tsx

@@ -41,37 +41,37 @@ const allFeatures = [{
 
 const industriesData = [{
   name: "Cloud",
-  icon: <Globe className="h-5 w-5 text-blue-400 mb-2" />,
+  icon: <Globe className="h-5 w-5 text-neutral-400 mb-2" />,
   image: "/img/a6b76d5c-59a9-4ba8-897e-69558005b6ed.png",
   description: "Cloud orchestration with rapid deployment"
 }, {
   name: "Cybersecurity",
-  icon: <Shield className="h-5 w-5 text-red-400 mb-2" />,
+  icon: <Shield className="h-5 w-5 text-neutral-400 mb-2" />,
   image: "/img/97902904-f9ea-475e-9c65-5664eab422e5.png",
   description: "Advanced security solutions for business"
 }, {
   name: "Data and Artificial Intelligence",
-  icon: <Brain className="h-5 w-5 text-purple-400 mb-2" />,
+  icon: <Brain className="h-5 w-5 text-neutral-400 mb-2" />,
   image: "/img/a31568fe-aa1f-4933-add1-b981564f25b9.png",
   description: "Cutting-edge AI solutions for business transformation"
 }, {
   name: "Digital Engineering and Manufacturing",
-  icon: <Code className="h-5 w-5 text-green-400 mb-2" />,
+  icon: <Code className="h-5 w-5 text-neutral-400 mb-2" />,
   image: "/img/a1e0f18b-41a7-4f58-ac3b-7272aa8e7a77.png",
   description: "Engineering solutions for manufacturing"
 }, {
   name: "Emerging Technology",
-  icon: <Cpu className="h-5 w-5 text-yellow-400 mb-2" />,
+  icon: <Cpu className="h-5 w-5 text-neutral-400 mb-2" />,
   image: "/img/41fa31ba-8c5b-4553-afeb-ba51591f7024.png",
   description: "Frontier technology solutions"
 }, {
   name: "Ecosystem Partners",
-  icon: <Network className="h-5 w-5 text-indigo-400 mb-2" />,
+  icon: <Network className="h-5 w-5 text-neutral-400 mb-2" />,
   image: "/img/96a9379c-acc3-4170-a96f-964fb8773dd3.png",
   description: "Collaborative partnership networks"
 }, {
   name: "Finance and Risk Management",
-  icon: <DollarSign className="h-5 w-5 text-green-400 mb-2" />,
+  icon: <DollarSign className="h-5 w-5 text-neutral-400 mb-2" />,
   image: "/img/22f3cbb5-8cd9-48e2-92bc-8b084da1f4ff.png",
   description: "Financial solutions and risk assessment"
 }, {
@@ -81,22 +81,22 @@ const industriesData = [{
   description: "Infrastructure development and capital management"
 }, {
   name: "Learning",
-  icon: <GraduationCap className="h-5 w-5 text-blue-400 mb-2" />,
+  icon: <GraduationCap className="h-5 w-5 text-neutral-400 mb-2" />,
   image: "/img/37d6bc13-a83a-4de2-a8d4-a67f2339598e.png",
   description: "Educational technology and learning solutions"
 }, {
   name: "Marketing and Experience",
-  icon: <Newspaper className="h-5 w-5 text-pink-400 mb-2" />,
+  icon: <Newspaper className="h-5 w-5 text-neutral-400 mb-2" />,
   image: "/img/96d1e3da-614a-4809-98e4-30d8a868dc11.png",
   description: "Marketing solutions and experience design"
 }, {
   name: "Metaverse",
-  icon: <LineChart className="h-5 w-5 text-cyan-400 mb-2" />,
+  icon: <LineChart className="h-5 w-5 text-neutral-400 mb-2" />,
   image: "/img/65ace6da-40cf-401a-9f0a-e3e757f00633.png",
   description: "Metaverse development and integration"
 }, {
   name: "Sales and Commerce",
-  icon: <ShoppingCart className="h-5 w-5 text-orange-400 mb-2" />,
+  icon: <ShoppingCart className="h-5 w-5 text-neutral-400 mb-2" />,
   image: "/placeholder.svg",
   description: "Sales enablement and commerce solutions"
 }];
@@ -147,16 +147,16 @@ const Features = () => {
   const displayedFeatures = allFeatures.slice(0, 16);
   const hasMoreFeatures = allFeatures.length > 16;
   const industryIcons = {
-    "Artificial Intelligence": <Brain className="h-5 w-5 text-purple-400 mb-2" />,
-    "Adtech": <Target className="h-5 w-5 text-blue-400 mb-2" />,
-    "Blockchain": <Blocks className="h-5 w-5 text-orange-400 mb-2" />,
-    "Cloud Computing": <Cloud className="h-5 w-5 text-cyan-400 mb-2" />,
-    "GPU": <Cpu className="h-5 w-5 text-red-400 mb-2" />,
+    "Artificial Intelligence": <Brain className="h-5 w-5 text-neutral-400 mb-2" />,
+    "Adtech": <Target className="h-5 w-5 text-neutral-400 mb-2" />,
+    "Blockchain": <Blocks className="h-5 w-5 text-neutral-400 mb-2" />,
+    "Cloud Computing": <Cloud className="h-5 w-5 text-neutral-400 mb-2" />,
+    "GPU": <Cpu className="h-5 w-5 text-neutral-400 mb-2" />,
     "Hardware": <HardDrive className="h-5 w-5 text-neutral-400 mb-2" />,
-    "Machine Learning": <Brain className="h-5 w-5 text-green-400 mb-2" />,
-    "Software": <Code className="h-5 w-5 text-yellow-400 mb-2" />,
-    "Cyber Security": <Shield className="h-5 w-5 text-pink-400 mb-2" />,
-    "Confidential Computing": <KeyRound className="h-5 w-5 text-indigo-400 mb-2" />
+    "Machine Learning": <Brain className="h-5 w-5 text-neutral-400 mb-2" />,
+    "Software": <Code className="h-5 w-5 text-neutral-400 mb-2" />,
+    "Cyber Security": <Shield className="h-5 w-5 text-neutral-400 mb-2" />,
+    "Confidential Computing": <KeyRound className="h-5 w-5 text-neutral-400 mb-2" />
   };
   const containerVariants = {
     hidden: {
@@ -319,7 +319,7 @@ const Features = () => {
           }} transition={{
             duration: 0.5
           }} className="mt-12 text-center">
-            <Button variant="ghost" onClick={() => window.location.href = '/solutions'} className="text-[var(--white)] hover:text-purple-400 transition-colors">
+            <Button variant="ghost" onClick={() => window.location.href = '/solutions'} className="text-[var(--white)] hover:text-neutral-400 transition-colors">
               View All Solutions
             </Button>
           </motion.div>}
@@ -337,7 +337,7 @@ const Features = () => {
           }} transition={{
             duration: 0.5
           }} className="text-center mb-12">
-            <h2 className="font-display text-[var(--white)] bg-gradient-to-r from-orange-400 via-purple-400 to-pink-400 bg-clip-text text-transparent text-4xl">
+            <h2 className="font-display text-[var(--white)] bg-gradient-to-r from-neutral-400 via-neutral-400 to-neutral-400 bg-clip-text text-transparent text-4xl">
               Hanzo has an impressive track record...
             </h2>
           </motion.div>

src/components/Footer.tsx

@@ -13,7 +13,7 @@ import {
 } from "lucide-react";
 import { useTheme } from "@/contexts/ThemeContext";
 
-const BRAND_COLOR = "#fd4444";
+const BRAND_COLOR = "#ffffff";
 
 // Footer navigation data matching the design
 const footerLinks = {
@@ -231,7 +231,7 @@ const Footer = () => {
                   className="absolute right-2 top-1/2 -translate-y-1/2 w-6 h-6 rounded flex items-center justify-center transition-colors hover:opacity-80"
                   style={{ backgroundColor: BRAND_COLOR }}
                 >
-                  <Send className="w-3 h-3 text-white" />
+                  <Send className="w-3 h-3 text-black" />
                 </button>
               </div>
 

src/components/GlobalChatWidget.tsx

@@ -15,7 +15,7 @@ import {
   Check,
 } from "lucide-react";
 
-const BRAND_COLOR = "#e11633";
+const BRAND_COLOR = "#ffffff";
 
 // Available Zen models for the dropdown
 const zenModels = [
@@ -330,7 +330,7 @@ const GlobalChatWidget = () => {
                               <div className="text-[10px] text-neutral-500">{model.description}</div>
                             </div>
                             {selectedModel.id === model.id && (
-                              <Check className="w-4 h-4 text-green-500" />
+                              <Check className="w-4 h-4 text-neutral-400" />
                             )}
                           </button>
                         ))}
@@ -379,7 +379,7 @@ const GlobalChatWidget = () => {
                   <div
                     className={`max-w-[85%] px-3 py-2 rounded-2xl text-sm ${
                       message.role === "user"
-                        ? "bg-[#fd4444] text-white rounded-br-md"
+                        ? "bg-white text-black rounded-br-md"
                         : "bg-neutral-800 text-neutral-200 rounded-bl-md"
                     }`}
                   >

src/components/Hero.tsx

@@ -47,8 +47,8 @@ const Hero = () => {
       
       {/* Background subtle gradient effects */}
       <div className="absolute inset-0">
-        <div className="absolute top-1/4 -left-64 w-96 h-96 bg-purple-900/30 rounded-full blur-3xl"></div>
-        <div className="absolute bottom-0 right-0 w-96 h-96 bg-blue-900/30 rounded-full blur-3xl transform translate-x-1/2 translate-y-1/2"></div>
+        <div className="absolute top-1/4 -left-64 w-96 h-96 bg-neutral-800/30 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-0 right-0 w-96 h-96 bg-neutral-800/30 rounded-full blur-3xl transform translate-x-1/2 translate-y-1/2"></div>
       </div>
 
       <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 md:py-20 w-full">

src/components/HeroPoem.tsx

@@ -11,7 +11,7 @@ const HeroPoem = () => {
     >
       <h1 className="text-4xl sm:text-5xl md:text-6xl font-display tracking-tight text-[var(--white)] leading-tight relative z-50 text-center">
         In the age of endless dreams,
-        <span className="block bg-gradient-to-r from-purple-400 to-violet-400 bg-clip-text text-transparent py-1 leading-relaxed">
+        <span className="block bg-gradient-to-r from-neutral-400 to-neutral-400 bg-clip-text text-transparent py-1 leading-relaxed">
           Ideas take flight on digital wings
         </span>
       </h1>

src/components/LastSupper.tsx

@@ -52,7 +52,7 @@ const LastSupper = ({ members }: { members: TeamMember[] }) => {
                     <Icon className="w-full h-full text-[var(--white)]" />
                   </div>
                   <p className="text-[var(--white)] font-medium">{member.name}</p>
-                  <p className="text-purple-400 text-sm">{member.role}</p>
+                  <p className="text-neutral-400 text-sm">{member.role}</p>
                 </motion.div>
               );
             })}

src/components/Products.tsx

@@ -174,7 +174,7 @@ const ChatExample = () => {
           <div 
             key={index} 
             className={`mb-3 p-2 rounded ${
-              msg.role === "user" ? "bg-blue-900/30 ml-12" : "bg-gray-800/50"
+              msg.role === "user" ? "bg-neutral-800/30 ml-12" : "bg-gray-800/50"
             }`}
           >
             <div className="text-xs text-neutral-400 mb-1">
@@ -185,9 +185,9 @@ const ChatExample = () => {
         ))}
         {isLoading && (
           <div className="flex items-center space-x-2 p-2">
-            <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
-            <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse delay-100"></div>
-            <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse delay-200"></div>
+            <div className="w-2 h-2 bg-neutral-600 rounded-full animate-pulse"></div>
+            <div className="w-2 h-2 bg-neutral-600 rounded-full animate-pulse delay-100"></div>
+            <div className="w-2 h-2 bg-neutral-600 rounded-full animate-pulse delay-200"></div>
           </div>
         )}
       </div>
@@ -197,9 +197,9 @@ const ChatExample = () => {
           value={message}
           onChange={(e) => setMessage(e.target.value)}
           placeholder="Ask Hanzo AI something..."
-          className="flex-1 bg-gray-800 text-[var(--white)] border border-gray-700 rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          className="flex-1 bg-gray-800 text-[var(--white)] border border-gray-700 rounded px-3 py-2 focus:outline-none focus:ring-1 focus:ring-neutral-500"
         />
-        <Button type="submit" disabled={isLoading} className="bg-blue-600 hover:bg-blue-500">
+        <Button type="submit" disabled={isLoading} className="bg-neutral-600 hover:bg-neutral-600">
           Send
         </Button>
       </form>
@@ -254,10 +254,10 @@ const Products = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="bg-gray-900/60 rounded-xl border border-gray-800 p-6 hover:border-blue-500/20 transition-colors"
+              className="bg-gray-900/60 rounded-xl border border-gray-800 p-6 hover:border-neutral-500/20 transition-colors"
             >
               <div className="flex items-center mb-4">
-                <div className="h-12 w-12 bg-blue-900/30 rounded-lg flex items-center justify-center mr-4">
+                <div className="h-12 w-12 bg-neutral-800/30 rounded-lg flex items-center justify-center mr-4">
                   {product.icon}
                 </div>
                 <h3 className="text-xl font-semibold text-[var(--white)]">{product.title}</h3>
@@ -269,7 +269,7 @@ const Products = () => {
               <ul className="space-y-2 mb-6">
                 {product.features.map((feature, fIndex) => (
                   <li key={fIndex} className="flex items-start">
-                    <span className="text-blue-400 mr-2 mt-1">{feature.icon}</span>
+                    <span className="text-neutral-400 mr-2 mt-1">{feature.icon}</span>
                     <span className="text-neutral-400 text-sm">{feature.text}</span>
                   </li>
                 ))}
@@ -303,7 +303,7 @@ const Products = () => {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.5, delay: products.length * 0.1 }}
-          className="mt-20 p-8 bg-gradient-to-r from-blue-900/40 via-purple-900/40 to-blue-900/40 rounded-xl ring-1 ring-white/10 hover:ring-white/30 transition-all duration-300"
+          className="mt-20 p-8 bg-gradient-to-r from-neutral-800/40 via-neutral-900/40 to-neutral-800/40 rounded-xl ring-1 ring-white/10 hover:ring-white/30 transition-all duration-300"
         >
           <div className="max-w-3xl mx-auto text-center">
             <h3 className="text-2xl font-semibold text-[var(--white)] mb-4">Ready to Start Building?</h3>

src/components/QuickStart.tsx

@@ -9,25 +9,25 @@ const quickApps = [{
   title: "AI Chat Assistant",
   description: "Launch your own ChatGPT-style AI assistant",
   glowColor: "group-hover:shadow-[0_0_30px_-5px_rgba(96,165,250,0.3)]",
-  borderColor: "group-hover:border-blue-400/30"
+  borderColor: "group-hover:border-neutral-400/30"
 }, {
   icon: <ShoppingCart className="h-6 w-6 text-[var(--white)]" />,
   title: "E-commerce Store",
   description: "Start selling products online in minutes",
   glowColor: "group-hover:shadow-[0_0_30px_-5px_rgba(74,222,128,0.3)]",
-  borderColor: "group-hover:border-green-400/30"
+  borderColor: "group-hover:border-neutral-400/30"
 }, {
   icon: <AppWindow className="h-6 w-6 text-[var(--white)]" />,
   title: "Web3 dApp",
   description: "Build a decentralized application",
   glowColor: "group-hover:shadow-[0_0_30px_-5px_rgba(167,139,250,0.3)]",
-  borderColor: "group-hover:border-purple-400/30"
+  borderColor: "group-hover:border-neutral-400/30"
 }, {
   icon: <Rocket className="h-6 w-6 text-[var(--white)]" />,
   title: "Custom App",
   description: "Start from scratch with our App Builder",
   glowColor: "group-hover:shadow-[0_0_30px_-5px_rgba(251,146,60,0.3)]",
-  borderColor: "group-hover:border-orange-400/30"
+  borderColor: "group-hover:border-neutral-400/30"
 }];
 
 const QuickStart = () => {

src/components/RegCFBanner.tsx

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 
 const RegCFBanner = () => {
   return (
-    <div className="sticky top-0 z-50 bg-gradient-to-r from-purple-900/90 to-blue-900/90 backdrop-blur-sm py-2 px-4 text-center text-white border-b border-white/10">
+    <div className="sticky top-0 z-50 bg-gradient-to-r from-neutral-800/90 to-neutral-800/90 backdrop-blur-sm py-2 px-4 text-center text-white border-b border-white/10">
       <div className="max-w-6xl mx-auto flex items-center justify-center md:justify-between flex-wrap gap-2">
         <p className="text-sm font-medium">
           Invest in the Future of AI Collaboration—Join Our $5M Reg CF Campaign on Republic.com

src/components/TeamSlack.tsx

@@ -48,7 +48,7 @@ const TeamSlack = () => {
             className="col-span-1 border-r border-gray-800 p-4"
           >
             <div className="flex items-center justify-between p-2 mb-4">
-              <h3 className="text-purple-400 font-semibold">Hanzo Team</h3>
+              <h3 className="text-neutral-400 font-semibold">Hanzo Team</h3>
               <ChevronDown className="w-4 h-4 text-neutral-400" />
             </div>
             <div className="space-y-2">
@@ -97,7 +97,7 @@ const TeamSlack = () => {
                   transition={{ duration: 0.4, delay: 0.7 + (idx * 0.2) }}
                   className="flex items-start gap-3"
                 >
-                  <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-violet-500 flex items-center justify-center text-[var(--white)] text-sm">
+                  <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-neutral-500 to-neutral-300 flex items-center justify-center text-[var(--white)] text-sm">
                     {msg.user[0]}
                   </div>
                   <div>

src/components/about/AboutHero.tsx

@@ -8,9 +8,9 @@ const AboutHero = () => {
   return (
     <section className="py-32 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
       {/* Background elements */}
-      <div className="absolute inset-0 bg-gradient-to-b from-purple-900/10 to-blue-900/10 opacity-30"></div>
-      <div className="absolute -top-40 -right-40 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
-      <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
+      <div className="absolute inset-0 bg-gradient-to-b from-neutral-800/10 to-neutral-800/10 opacity-30"></div>
+      <div className="absolute -top-40 -right-40 w-80 h-80 bg-neutral-600/10 rounded-full blur-3xl"></div>
+      <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-neutral-600/10 rounded-full blur-3xl"></div>
       
       <div className="max-w-5xl mx-auto relative z-10">
         <motion.div
@@ -19,12 +19,12 @@ const AboutHero = () => {
           transition={{ duration: 0.8 }}
           className="text-center"
         >
-          <span className="inline-block px-4 py-1 rounded-full bg-purple-900/30 border border-purple-500/30 text-purple-300 text-sm font-medium mb-6">
+          <span className="inline-block px-4 py-1 rounded-full bg-neutral-800/30 border border-neutral-500/30 text-neutral-300 text-sm font-medium mb-6">
             Our Journey
           </span>
           
           <h1 className="text-4xl md:text-6xl font-bold mb-6">
-            History and Evolution of <span className="text-purple-400">Hanzo Industries</span>
+            History and Evolution of <span className="text-neutral-400">Hanzo Industries</span>
           </h1>
           
           <p className="text-xl md:text-2xl text-neutral-300 max-w-3xl mx-auto mb-12">
@@ -34,7 +34,7 @@ const AboutHero = () => {
           <div className="flex flex-wrap justify-center gap-4 mb-12">
             <Button 
               size="lg"
-              className="bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-500 hover:to-purple-400 text-[var(--white)] px-8 py-6 rounded-lg text-lg font-medium"
+              className="bg-gradient-to-r from-neutral-600 to-neutral-500 hover:from-neutral-500 hover:to-neutral-400 text-[var(--white)] px-8 py-6 rounded-lg text-lg font-medium"
             >
               <a href="#timeline" className="flex items-center">
                 Explore Our Timeline
@@ -45,7 +45,7 @@ const AboutHero = () => {
             <Button 
               size="lg"
               variant="outline"
-              className="border-purple-600 text-[var(--white)] hover:bg-purple-600/10 px-8 py-6 rounded-lg text-lg font-medium"
+              className="border-neutral-600 text-[var(--white)] hover:bg-neutral-600/10 px-8 py-6 rounded-lg text-lg font-medium"
             >
               <a href="/zen" className="flex items-center">
                 The Zen of Hanzo

src/components/about/HistoryTimeline.tsx

@@ -9,7 +9,7 @@ const timelineEvents = [
     year: "2014-2016",
     title: "Origins: Verus Media & Crowdstart",
     description: "Zach Kelling founded Verus Media and launched Crowdstart, a platform to harness crowd-driven data and AI to help businesses grow.",
-    icon: <Rocket className="text-purple-400" />,
+    icon: <Rocket className="text-neutral-400" />,
     highlight: "Record-breaking product launches and significant crowdfunding success.",
     link: { text: "Learn about our platform", url: "/platform" }
   },
@@ -17,7 +17,7 @@ const timelineEvents = [
     year: "2016",
     title: "Reimagining as Hanzo",
     description: "The company formally incorporated as Hanzo AI, Inc., focusing on AI-powered marketing and development platforms.",
-    icon: <Stars className="text-blue-400" />,
+    icon: <Stars className="text-neutral-400" />,
     highlight: "Helped launch some of the most successful crowdsales in history.",
     link: { text: "View Hanzo AI", url: "/ai" }
   },
@@ -25,7 +25,7 @@ const timelineEvents = [
     year: "2017",
     title: "Techstars Acceleration",
     description: "Selected for the inaugural Techstars Kansas City accelerator cohort, sharpening focus on e-commerce SaaS.",
-    icon: <Trophy className="text-yellow-400" />,
+    icon: <Trophy className="text-neutral-400" />,
     highlight: "23 beta users and $42M in client sales by Demo Day.",
     link: { text: "Explore Commerce", url: "/commerce" }
   },
@@ -33,7 +33,7 @@ const timelineEvents = [
     year: "2018-2020",
     title: "AI Marketing & Blockchain",
     description: "Pivoted to AI marketing platform and blockchain technology, supporting tokenized crowdfunding.",
-    icon: <Coins className="text-green-400" />,
+    icon: <Coins className="text-neutral-400" />,
     highlight: "Co-founded the first SEC-approved crowdfunding token offering.",
     link: { text: "See our analytics", url: "/analytics" }
   },
@@ -41,7 +41,7 @@ const timelineEvents = [
     year: "2021-2023",
     title: "Product Innovation",
     description: "Launched Hanzo Dev, an AI-powered code editor and app builder translating natural language to live software.",
-    icon: <Code className="text-indigo-400" />,
+    icon: <Code className="text-neutral-400" />,
     highlight: "Open-sourced Hanzo Base, a powerful backend framework.",
     link: { text: "Try Hanzo Dev", url: "/dev" }
   },
@@ -49,7 +49,7 @@ const timelineEvents = [
     year: "2024-Present",
     title: "Strategic Partnerships",
     description: "Formed key alliances like Personas Social Inc. partnership to expand Keek's user base using Hanzo's AI.",
-    icon: <User2 className="text-pink-400" />,
+    icon: <User2 className="text-neutral-400" />,
     highlight: "Driven over $1B in revenues to clients using AI-powered marketing.",
     link: { text: "Meet Hanzo Bot", url: "/bot" }
   },
@@ -67,21 +67,21 @@ const TimelineEvent = ({ event, index }) => {
       className={`flex flex-col md:flex-row items-center gap-8 mb-16 ${isEven ? '' : 'md:flex-row-reverse'}`}
     >
       <div className="md:w-1/2">
-        <div className="bg-[var(--black)]/30 backdrop-blur-sm border border-purple-500/20 rounded-lg p-8 h-full">
+        <div className="bg-[var(--black)]/30 backdrop-blur-sm border border-neutral-500/20 rounded-lg p-8 h-full">
           <div className="flex items-center mb-4">
             <div className="p-3 rounded-full bg-gray-900 mr-4">
               {event.icon}
             </div>
             <div>
-              <span className="text-sm text-purple-400 font-semibold">{event.year}</span>
+              <span className="text-sm text-neutral-400 font-semibold">{event.year}</span>
               <h3 className="text-2xl font-bold">{event.title}</h3>
             </div>
           </div>
           <p className="text-neutral-300 mb-4">{event.description}</p>
-          <div className="bg-purple-900/20 border border-purple-500/20 rounded-lg p-4 mb-6">
-            <p className="text-purple-300 italic">"{event.highlight}"</p>
+          <div className="bg-neutral-800/20 border border-neutral-500/20 rounded-lg p-4 mb-6">
+            <p className="text-neutral-300 italic">"{event.highlight}"</p>
           </div>
-          <Button variant="outline" className="border-purple-500 text-[var(--white)] hover:bg-purple-500/10">
+          <Button variant="outline" className="border-neutral-500 text-[var(--white)] hover:bg-neutral-600/10">
             <a href={event.link.url}>{event.link.text}</a>
           </Button>
         </div>
@@ -89,10 +89,10 @@ const TimelineEvent = ({ event, index }) => {
       
       <div className="hidden md:block md:w-1/2 relative">
         <div className="absolute inset-0 flex items-center justify-center">
-          <div className="w-1 h-full bg-purple-500/30"></div>
+          <div className="w-1 h-full bg-neutral-600/30"></div>
         </div>
         <div className="relative flex justify-center">
-          <div className="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center">
+          <div className="w-12 h-12 rounded-full bg-neutral-600 flex items-center justify-center">
             <span className="text-[var(--white)] font-bold">{index + 1}</span>
           </div>
         </div>
@@ -113,7 +113,7 @@ const HistoryTimeline = () => {
           className="text-center mb-16"
         >
           <h2 className="text-3xl md:text-4xl font-bold mb-4">Our Journey Through Time</h2>
-          <div className="h-1 w-20 bg-purple-500 mx-auto mb-6"></div>
+          <div className="h-1 w-20 bg-neutral-600 mx-auto mb-6"></div>
           <p className="text-xl text-neutral-300 max-w-3xl mx-auto">
             From crowd-powered marketing to AI innovation, explore the key milestones
             that shaped Hanzo Industries.

src/components/about/OurStory.tsx

@@ -4,7 +4,7 @@ import { motion } from "framer-motion";
 
 const OurStory = () => {
   return (
-    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black/50 to-purple-900/10">
+    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black/50 to-neutral-800/10">
       <div className="max-w-5xl mx-auto">
         <motion.div
           initial={{ opacity: 0 }}
@@ -14,7 +14,7 @@ const OurStory = () => {
           className="text-center mb-12"
         >
           <h2 className="text-3xl md:text-4xl font-bold mb-4">Our Story</h2>
-          <div className="h-1 w-20 bg-purple-500 mx-auto"></div>
+          <div className="h-1 w-20 bg-neutral-600 mx-auto"></div>
         </motion.div>
         
         <motion.div
@@ -22,7 +22,7 @@ const OurStory = () => {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.6 }}
-          className="bg-[var(--black)]/30 backdrop-blur-sm border border-purple-500/20 rounded-lg p-8 mb-10"
+          className="bg-[var(--black)]/30 backdrop-blur-sm border border-neutral-500/20 rounded-lg p-8 mb-10"
         >
           <p className="text-neutral-300 md:text-lg leading-relaxed mb-6">
             Hanzo Industries, Inc. – originally known as Crowdstart under Verus Media – has undergone several transformations since its inception. 

src/components/about/SenseiMethod.tsx

@@ -15,7 +15,7 @@ const SenseiMethod = () => {
             viewport={{ once: true }}
             transition={{ duration: 0.6 }}
           >
-            <span className="inline-block px-4 py-1 rounded-full bg-purple-900/30 border border-purple-500/30 text-purple-300 text-sm font-medium mb-4">
+            <span className="inline-block px-4 py-1 rounded-full bg-neutral-800/30 border border-neutral-500/30 text-neutral-300 text-sm font-medium mb-4">
               Principles in Practice
             </span>
             <h2 className="text-3xl md:text-4xl font-bold mb-6">
@@ -28,8 +28,8 @@ const SenseiMethod = () => {
             
             <div className="space-y-6 mb-8">
               <div className="flex items-start">
-                <div className="p-2 bg-purple-900/30 rounded-lg mr-4">
-                  <Target className="h-6 w-6 text-purple-400" />
+                <div className="p-2 bg-neutral-800/30 rounded-lg mr-4">
+                  <Target className="h-6 w-6 text-neutral-400" />
                 </div>
                 <div>
                   <h3 className="text-xl font-semibold mb-1">Identify First-Principle Goals</h3>
@@ -38,8 +38,8 @@ const SenseiMethod = () => {
               </div>
               
               <div className="flex items-start">
-                <div className="p-2 bg-purple-900/30 rounded-lg mr-4">
-                  <Zap className="h-6 w-6 text-purple-400" />
+                <div className="p-2 bg-neutral-800/30 rounded-lg mr-4">
+                  <Zap className="h-6 w-6 text-neutral-400" />
                 </div>
                 <div>
                   <h3 className="text-xl font-semibold mb-1">Rapid Prototyping</h3>
@@ -48,8 +48,8 @@ const SenseiMethod = () => {
               </div>
               
               <div className="flex items-start">
-                <div className="p-2 bg-purple-900/30 rounded-lg mr-4">
-                  <BarChart3 className="h-6 w-6 text-purple-400" />
+                <div className="p-2 bg-neutral-800/30 rounded-lg mr-4">
+                  <BarChart3 className="h-6 w-6 text-neutral-400" />
                 </div>
                 <div>
                   <h3 className="text-xl font-semibold mb-1">Data-Driven Decisions</h3>
@@ -58,8 +58,8 @@ const SenseiMethod = () => {
               </div>
               
               <div className="flex items-start">
-                <div className="p-2 bg-purple-900/30 rounded-lg mr-4">
-                  <Users className="h-6 w-6 text-purple-400" />
+                <div className="p-2 bg-neutral-800/30 rounded-lg mr-4">
+                  <Users className="h-6 w-6 text-neutral-400" />
                 </div>
                 <div>
                   <h3 className="text-xl font-semibold mb-1">Sensei Mentorship</h3>
@@ -69,7 +69,7 @@ const SenseiMethod = () => {
             </div>
             
             <Button 
-              className="bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-500 hover:to-purple-400 text-[var(--white)]"
+              className="bg-gradient-to-r from-neutral-600 to-neutral-500 hover:from-neutral-500 hover:to-neutral-400 text-[var(--white)]"
             >
               <a href="https://sensei.group" target="_blank" rel="noopener noreferrer" className="flex items-center">
                 Visit Sensei Group
@@ -85,7 +85,7 @@ const SenseiMethod = () => {
             transition={{ duration: 0.6, delay: 0.2 }}
             className="relative"
           >
-            <div className="bg-gradient-to-br from-purple-500/20 to-blue-500/20 rounded-2xl p-1">
+            <div className="bg-gradient-to-br from-neutral-500/20 to-neutral-500/20 rounded-2xl p-1">
               <div className="bg-[var(--black)]/50 backdrop-blur-sm rounded-xl overflow-hidden">
                 <img 
                   src="/placeholder.svg" 
@@ -99,16 +99,16 @@ const SenseiMethod = () => {
                     launch groundbreaking products, and build scalable businesses.
                   </p>
                   <div className="flex flex-wrap gap-4">
-                    <div className="bg-purple-900/30 px-4 py-2 rounded-lg">
-                      <span className="text-2xl font-bold text-purple-300">$1B+</span>
+                    <div className="bg-neutral-800/30 px-4 py-2 rounded-lg">
+                      <span className="text-2xl font-bold text-neutral-300">$1B+</span>
                       <p className="text-sm text-neutral-400">Client Revenue</p>
                     </div>
-                    <div className="bg-blue-900/30 px-4 py-2 rounded-lg">
-                      <span className="text-2xl font-bold text-blue-300">100+</span>
+                    <div className="bg-neutral-800/30 px-4 py-2 rounded-lg">
+                      <span className="text-2xl font-bold text-neutral-300">100+</span>
                       <p className="text-sm text-neutral-400">Product Launches</p>
                     </div>
-                    <div className="bg-green-900/30 px-4 py-2 rounded-lg">
-                      <span className="text-2xl font-bold text-green-300">10+</span>
+                    <div className="bg-neutral-800/30 px-4 py-2 rounded-lg">
+                      <span className="text-2xl font-bold text-neutral-300">10+</span>
                       <p className="text-sm text-neutral-400">Years Experience</p>
                     </div>
                   </div>

src/components/about/ZenPrinciples.tsx

@@ -11,38 +11,38 @@ const principles = [
   {
     title: "Empower the Underdog",
     description: "Enable others to win. Democratize technology so small businesses and startups can compete with industry giants.",
-    icon: <Users className="h-10 w-10 text-purple-400" />,
+    icon: <Users className="h-10 w-10 text-neutral-400" />,
   },
   {
     title: "Data-Driven Everything",
     description: "Let data be your guide. Embrace analytics and AI as the foundation of decision-making.",
-    icon: <Database className="h-10 w-10 text-blue-400" />,
+    icon: <Database className="h-10 w-10 text-neutral-400" />,
   },
   {
     title: "Open Innovation",
     description: "Be open, share often. Openness accelerates growth—both for the company and its community.",
-    icon: <Share2 className="h-10 w-10 text-green-400" />,
+    icon: <Share2 className="h-10 w-10 text-neutral-400" />,
   },
   {
     title: "Adaptability",
     description: "Pivot with purpose. There is no failure, only feedback. Move quickly and strike in new directions when opportunity calls.",
-    icon: <RefreshCcw className="h-10 w-10 text-yellow-400" />,
+    icon: <RefreshCcw className="h-10 w-10 text-neutral-400" />,
   },
   {
     title: "Customer-Centric Growth",
     description: "Coach clients like a sensei. Treat each client as a long-term partner and guide them to success.",
-    icon: <Heart className="h-10 w-10 text-red-400" />,
+    icon: <Heart className="h-10 w-10 text-neutral-400" />,
   },
   {
     title: "First Principles Thinking",
     description: "See the invisible, do the impossible. Boil problems down to their essence and solve them in fundamentally better ways.",
-    icon: <BookOpen className="h-10 w-10 text-indigo-400" />,
+    icon: <BookOpen className="h-10 w-10 text-neutral-400" />,
   }
 ];
 
 const ZenPrinciples = () => {
   return (
-    <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-purple-950/20">
+    <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-neutral-950/20">
       <div className="max-w-7xl mx-auto">
         <motion.div
           initial={{ opacity: 0 }}
@@ -52,7 +52,7 @@ const ZenPrinciples = () => {
           className="text-center mb-16"
         >
           <h2 className="text-3xl md:text-4xl font-bold mb-4">The Zen of Hanzo</h2>
-          <div className="h-1 w-20 bg-purple-500 mx-auto mb-6"></div>
+          <div className="h-1 w-20 bg-neutral-600 mx-auto mb-6"></div>
           <p className="text-xl text-neutral-300 max-w-3xl mx-auto">
             Our guiding philosophy - a set of first principles and laws that act as our north star.
           </p>
@@ -66,7 +66,7 @@ const ZenPrinciples = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="bg-[var(--black)]/30 backdrop-blur-sm border border-purple-500/20 rounded-lg p-8 h-full"
+              className="bg-[var(--black)]/30 backdrop-blur-sm border border-neutral-500/20 rounded-lg p-8 h-full"
             >
               <div className="mb-6">{principle.icon}</div>
               <h3 className="text-2xl font-bold mb-4">{principle.title}</h3>
@@ -84,7 +84,7 @@ const ZenPrinciples = () => {
         >
           <Button 
             size="lg"
-            className="bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-500 hover:to-purple-400 text-[var(--white)] px-8 py-6 rounded-lg text-lg font-medium"
+            className="bg-gradient-to-r from-neutral-600 to-neutral-500 hover:from-neutral-500 hover:to-neutral-400 text-[var(--white)] px-8 py-6 rounded-lg text-lg font-medium"
           >
             <Link to="/philosophy" className="flex items-center">
               Explore The Full Zen Manifesto

src/components/account/AccountLayout.tsx

@@ -114,7 +114,7 @@ const AccountLayout = ({ children }: { children?: React.ReactNode }) => {
                   
                   <Button 
                     variant="ghost" 
-                    className="w-full justify-start text-red-400 hover:text-red-300 hover:bg-red-900/10 mt-6 p-3"
+                    className="w-full justify-start text-neutral-400 hover:text-neutral-300 hover:bg-neutral-800/10 mt-6 p-3"
                   >
                     <LogOut className="w-5 h-5 mr-3" />
                     Sign Out

src/components/ai-studio/Chat.tsx

@@ -27,7 +27,7 @@ const Chat = ({
             <div 
               className={`max-w-3xl p-3 rounded-lg ${
                 message.role === "user" 
-                  ? "bg-purple-600/30 border border-purple-500/30" 
+                  ? "bg-neutral-600/30 border border-neutral-500/30" 
                   : "bg-gray-800/60 border border-gray-700/50"
               }`}
             >
@@ -51,11 +51,11 @@ const Chat = ({
               value={promptText}
               onChange={(e) => setPromptText(e.target.value)}
               placeholder="Send a message..."
-              className="flex-1 bg-gray-800/50 border border-gray-700 rounded-l-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
+              className="flex-1 bg-gray-800/50 border border-gray-700 rounded-l-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-neutral-500"
             />
             <button 
               type="submit" 
-              className="rounded-l-none bg-purple-600 hover:bg-purple-700 px-4 py-2 text-[var(--white)] font-medium"
+              className="rounded-l-none bg-neutral-600 hover:bg-neutral-700 px-4 py-2 text-[var(--white)] font-medium"
             >
               Send
             </button>

src/components/ai-studio/Hero.tsx

@@ -4,7 +4,7 @@ import ChromeText from "@/components/ui/chrome-text";
 
 const Hero = () => {
   return (
-    <div className="bg-gradient-to-r from-indigo-900/20 to-purple-900/20 py-10 px-4">
+    <div className="bg-gradient-to-r from-neutral-900/20 to-neutral-800/20 py-10 px-4">
       <div className="max-w-7xl mx-auto">
         <ChromeText as="h1" className="text-4xl font-bold mb-2">
           Hanzo AI Studio

src/components/ai-studio/Sidebar.tsx

@@ -35,7 +35,7 @@ const Sidebar = ({
                 key={model.id}
                 onClick={() => setModelSelection(model.id)}
                 className={`w-full text-left px-3 py-2 rounded-md text-sm flex items-center ${
-                  modelSelection === model.id ? "bg-purple-900/50 text-[var(--white)]" : "text-neutral-300 hover:bg-gray-800"
+                  modelSelection === model.id ? "bg-neutral-800/50 text-[var(--white)]" : "text-neutral-300 hover:bg-gray-800"
                 }`}
               >
                 <Cpu className="w-4 h-4 mr-2" />

src/components/ai/CallToAction.tsx

@@ -9,8 +9,8 @@ const CallToAction = () => {
     <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-950 relative overflow-hidden">
       {/* Background elements */}
       <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
-        <div className="absolute top-0 left-0 w-2/3 h-1/2 bg-purple-900/5 rounded-full blur-3xl transform -translate-x-1/4 -translate-y-1/4"></div>
-        <div className="absolute bottom-0 right-0 w-full h-1/2 bg-blue-900/5 rounded-full blur-3xl transform translate-x-1/4 translate-y-1/4"></div>
+        <div className="absolute top-0 left-0 w-2/3 h-1/2 bg-neutral-800/5 rounded-full blur-3xl transform -translate-x-1/4 -translate-y-1/4"></div>
+        <div className="absolute bottom-0 right-0 w-full h-1/2 bg-neutral-800/5 rounded-full blur-3xl transform translate-x-1/4 translate-y-1/4"></div>
       </div>
 
       <div className="max-w-7xl mx-auto relative z-10">
@@ -37,7 +37,7 @@ const CallToAction = () => {
             transition={{ duration: 0.6, delay: 0.2 }}
             className="flex flex-col sm:flex-row gap-4"
           >
-            <Button size="lg" className="bg-purple-600 hover:bg-purple-700">
+            <Button size="lg" className="bg-neutral-600 hover:bg-neutral-700">
               Get Started Free
               <ArrowRight className="ml-2 h-4 w-4" />
             </Button>
@@ -55,42 +55,42 @@ const CallToAction = () => {
           className="grid grid-cols-1 md:grid-cols-3 gap-8"
         >
           <div className="bg-gray-900/30 border border-gray-800 rounded-xl p-8 hover:bg-gray-900/40 transition-colors">
-            <div className="h-12 w-12 rounded-lg bg-purple-900/30 flex items-center justify-center mb-6">
-              <BookOpen className="h-6 w-6 text-purple-400" />
+            <div className="h-12 w-12 rounded-lg bg-neutral-800/30 flex items-center justify-center mb-6">
+              <BookOpen className="h-6 w-6 text-neutral-400" />
             </div>
             <h3 className="text-xl font-semibold text-[var(--white)] mb-3">Documentation</h3>
             <p className="text-neutral-400 mb-6">
               Comprehensive guides, tutorials, and API references to help you build with Hanzo AI.
             </p>
-            <a href="#" className="flex items-center text-purple-400 hover:text-purple-300 group">
+            <a href="#" className="flex items-center text-neutral-400 hover:text-neutral-300 group">
               Explore Docs
               <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
             </a>
           </div>
 
           <div className="bg-gray-900/30 border border-gray-800 rounded-xl p-8 hover:bg-gray-900/40 transition-colors">
-            <div className="h-12 w-12 rounded-lg bg-purple-900/30 flex items-center justify-center mb-6">
-              <Code className="h-6 w-6 text-purple-400" />
+            <div className="h-12 w-12 rounded-lg bg-neutral-800/30 flex items-center justify-center mb-6">
+              <Code className="h-6 w-6 text-neutral-400" />
             </div>
             <h3 className="text-xl font-semibold text-[var(--white)] mb-3">Quickstart</h3>
             <p className="text-neutral-400 mb-6">
               Get up and running quickly with our step-by-step quickstart guides and example projects.
             </p>
-            <a href="#" className="flex items-center text-purple-400 hover:text-purple-300 group">
+            <a href="#" className="flex items-center text-neutral-400 hover:text-neutral-300 group">
               Try Quickstart
               <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
             </a>
           </div>
 
           <div className="bg-gray-900/30 border border-gray-800 rounded-xl p-8 hover:bg-gray-900/40 transition-colors">
-            <div className="h-12 w-12 rounded-lg bg-purple-900/30 flex items-center justify-center mb-6">
-              <MessageCircle className="h-6 w-6 text-purple-400" />
+            <div className="h-12 w-12 rounded-lg bg-neutral-800/30 flex items-center justify-center mb-6">
+              <MessageCircle className="h-6 w-6 text-neutral-400" />
             </div>
             <h3 className="text-xl font-semibold text-[var(--white)] mb-3">Community</h3>
             <p className="text-neutral-400 mb-6">
               Join our growing community of AI engineers, get support, and share your experiences.
             </p>
-            <a href="#" className="flex items-center text-purple-400 hover:text-purple-300 group">
+            <a href="#" className="flex items-center text-neutral-400 hover:text-neutral-300 group">
               Join Community
               <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
             </a>
@@ -102,7 +102,7 @@ const CallToAction = () => {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.6, delay: 0.4 }}
-          className="mt-20 border border-gray-800 rounded-xl p-6 bg-gradient-to-r from-purple-900/10 to-blue-900/10"
+          className="mt-20 border border-gray-800 rounded-xl p-6 bg-gradient-to-r from-neutral-800/10 to-neutral-800/10"
         >
           <div className="flex flex-col md:flex-row items-center justify-between">
             <div className="mb-6 md:mb-0">
@@ -110,7 +110,7 @@ const CallToAction = () => {
               <p className="text-neutral-300">Sign up for free and start building with Hanzo AI today.</p>
             </div>
             <div className="flex flex-col sm:flex-row gap-4">
-              <Button size="lg" className="bg-purple-600 hover:bg-purple-700">
+              <Button size="lg" className="bg-neutral-600 hover:bg-neutral-700">
                 Create Free Account
               </Button>
               <Button size="lg" variant="outline" className="text-[var(--white)]">

src/components/ai/Features.tsx

@@ -65,7 +65,7 @@ const Features = () => {
   return (
     <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gray-950 relative overflow-hidden">
       {/* Background gradient */}
-      <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-3/4 h-1/2 bg-purple-900/10 rounded-full blur-3xl"></div>
+      <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-3/4 h-1/2 bg-neutral-800/10 rounded-full blur-3xl"></div>
       
       <div className="max-w-7xl mx-auto relative z-10">
         <div className="text-center max-w-3xl mx-auto mb-20">
@@ -94,8 +94,8 @@ const Features = () => {
               transition={{ duration: 0.5, delay: index * 0.1 }}
               className="bg-gray-900/30 border border-gray-800 rounded-xl p-6 hover:bg-gray-900/50 transition-colors"
             >
-              <div className="h-12 w-12 rounded-lg bg-purple-900/30 flex items-center justify-center mb-4">
-                <feature.icon className="h-6 w-6 text-purple-400" />
+              <div className="h-12 w-12 rounded-lg bg-neutral-800/30 flex items-center justify-center mb-4">
+                <feature.icon className="h-6 w-6 text-neutral-400" />
               </div>
               <h3 className="text-xl font-semibold text-[var(--white)] mb-2">{feature.title}</h3>
               <p className="text-neutral-400">{feature.description}</p>

src/components/ai/HeroSection.tsx

@@ -15,7 +15,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Link } from "react-router-dom";
 
-const BRAND_COLOR = "#fd4444";
+const BRAND_COLOR = "#ffffff";
 
 // Quick action presets
 const chatPresets = [
@@ -45,7 +45,7 @@ const HeroSection = () => {
     <section className="relative min-h-[85vh] flex flex-col items-center justify-center overflow-hidden">
       {/* Subtle background gradient */}
       <div className="absolute inset-0 pointer-events-none">
-        <div className="absolute top-1/3 left-1/4 w-[600px] h-[600px] bg-[#fd4444]/5 rounded-full blur-[120px]"></div>
+        <div className="absolute top-1/3 left-1/4 w-[600px] h-[600px] bg-white/5 rounded-full blur-[120px]"></div>
         <div className="absolute bottom-1/3 right-1/4 w-[400px] h-[400px] bg-neutral-800/30 rounded-full blur-[100px]"></div>
       </div>
 
@@ -185,9 +185,9 @@ const HeroSection = () => {
                 </div>
 
                 {/* Visual - Checklist illustration */}
-                <div className="w-24 h-24 bg-[#fd4444]/10 rounded-xl flex flex-col items-start justify-center p-3 shrink-0">
+                <div className="w-24 h-24 bg-white/10 rounded-xl flex flex-col items-start justify-center p-3 shrink-0">
                   <div className="flex items-center gap-2 mb-2">
-                    <CheckSquare className="w-4 h-4 text-[#fd4444]" />
+                    <CheckSquare className="w-4 h-4 text-white" />
                     <div className="w-10 h-1.5 bg-neutral-700 rounded"></div>
                   </div>
                   <div className="flex items-center gap-2 mb-2">

src/components/ai/SupportedModels.tsx

@@ -7,7 +7,7 @@ import modelCategories from "./models/data/modelData";
 
 const SupportedModels = () => {
   return (
-    <section className="py-24 relative overflow-hidden bg-gradient-to-b from-black to-purple-950/20">
+    <section className="py-24 relative overflow-hidden bg-gradient-to-b from-black to-neutral-950/20">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <ModelHeader />
 

src/components/ai/Testimonials.tsx

@@ -29,7 +29,7 @@ const Testimonials = () => {
     <section className="py-24 px-4 sm:px-6 lg:px-8 bg-[var(--black)] relative overflow-hidden">
       {/* Background elements */}
       <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
-        <div className="absolute -bottom-64 -right-32 w-96 h-96 bg-purple-900/10 rounded-full blur-3xl"></div>
+        <div className="absolute -bottom-64 -right-32 w-96 h-96 bg-neutral-800/10 rounded-full blur-3xl"></div>
       </div>
 
       <div className="max-w-7xl mx-auto relative z-10">
@@ -58,10 +58,10 @@ const Testimonials = () => {
               transition={{ duration: 0.5, delay: index * 0.1 }}
               className="bg-gray-900/20 border border-gray-800 rounded-xl p-8 hover:bg-gray-900/30 transition-colors relative"
             >
-              <Quote className="absolute top-6 right-6 h-6 w-6 text-purple-500/40" />
+              <Quote className="absolute top-6 right-6 h-6 w-6 text-neutral-400/40" />
               <p className="text-neutral-300 mb-8 mt-4">"{testimonial.quote}"</p>
               <div className="flex items-center">
-                <div className="h-12 w-12 rounded-full bg-purple-900/30 overflow-hidden">
+                <div className="h-12 w-12 rounded-full bg-neutral-800/30 overflow-hidden">
                   <img 
                     src={testimonial.image} 
                     alt={testimonial.author}
@@ -95,15 +95,15 @@ const Testimonials = () => {
               </p>
               <div className="flex flex-wrap gap-4">
                 <div className="flex items-center bg-gray-800/50 rounded-full px-4 py-2">
-                  <div className="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
+                  <div className="w-2 h-2 rounded-full bg-neutral-500 mr-2"></div>
                   <span className="text-neutral-300 text-sm">4,500+ community members</span>
                 </div>
                 <div className="flex items-center bg-gray-800/50 rounded-full px-4 py-2">
-                  <div className="w-2 h-2 rounded-full bg-blue-500 mr-2"></div>
+                  <div className="w-2 h-2 rounded-full bg-neutral-600 mr-2"></div>
                   <span className="text-neutral-300 text-sm">Weekly office hours</span>
                 </div>
                 <div className="flex items-center bg-gray-800/50 rounded-full px-4 py-2">
-                  <div className="w-2 h-2 rounded-full bg-purple-500 mr-2"></div>
+                  <div className="w-2 h-2 rounded-full bg-neutral-600 mr-2"></div>
                   <span className="text-neutral-300 text-sm">Dedicated support team</span>
                 </div>
               </div>
@@ -113,12 +113,12 @@ const Testimonials = () => {
                 {[...Array(5)].map((_, i) => (
                   <div 
                     key={i} 
-                    className="h-12 w-12 rounded-full bg-purple-900/50 border-2 border-gray-900 flex items-center justify-center text-purple-300 text-sm font-medium"
+                    className="h-12 w-12 rounded-full bg-neutral-800/50 border-2 border-gray-900 flex items-center justify-center text-neutral-300 text-sm font-medium"
                   >
                     {["JS", "MK", "AL", "TN", "RW"][i]}
                   </div>
                 ))}
-                <div className="h-12 w-12 rounded-full bg-purple-600/30 border-2 border-gray-900 flex items-center justify-center text-[var(--white)] text-sm font-medium">
+                <div className="h-12 w-12 rounded-full bg-neutral-600/30 border-2 border-gray-900 flex items-center justify-center text-[var(--white)] text-sm font-medium">
                   +2.5k
                 </div>
               </div>

src/components/ai/TrustedBy.tsx

@@ -64,7 +64,7 @@ const TrustedBy = () => {
                 {[...Array(5)].map((_, i) => (
                   <svg 
                     key={i} 
-                    className="h-5 w-5 text-yellow-400" 
+                    className="h-5 w-5 text-neutral-400" 
                     fill="currentColor" 
                     viewBox="0 0 20 20"
                   >
@@ -78,7 +78,7 @@ const TrustedBy = () => {
               "Hanzo's AI platform has transformed our ability to ship AI features quickly. What used to take months now takes days."
             </p>
             <div className="flex items-center">
-              <div className="h-10 w-10 rounded-full bg-purple-900/50 flex items-center justify-center text-purple-300 font-bold">JD</div>
+              <div className="h-10 w-10 rounded-full bg-neutral-800/50 flex items-center justify-center text-neutral-300 font-bold">JD</div>
               <div className="ml-3">
                 <div className="text-[var(--white)] font-medium">Jane Doe</div>
                 <div className="text-neutral-400 text-sm">CTO, TechInnovate</div>
@@ -92,7 +92,7 @@ const TrustedBy = () => {
                 {[...Array(5)].map((_, i) => (
                   <svg 
                     key={i} 
-                    className="h-5 w-5 text-yellow-400" 
+                    className="h-5 w-5 text-neutral-400" 
                     fill="currentColor" 
                     viewBox="0 0 20 20"
                   >
@@ -106,7 +106,7 @@ const TrustedBy = () => {
               "The observability features are game-changing. We finally have full visibility into our AI systems in production."
             </p>
             <div className="flex items-center">
-              <div className="h-10 w-10 rounded-full bg-purple-900/50 flex items-center justify-center text-purple-300 font-bold">MS</div>
+              <div className="h-10 w-10 rounded-full bg-neutral-800/50 flex items-center justify-center text-neutral-300 font-bold">MS</div>
               <div className="ml-3">
                 <div className="text-[var(--white)] font-medium">Michael Smith</div>
                 <div className="text-neutral-400 text-sm">AI Lead, EnterpriseAI</div>
@@ -120,7 +120,7 @@ const TrustedBy = () => {
                 {[...Array(5)].map((_, i) => (
                   <svg 
                     key={i} 
-                    className="h-5 w-5 text-yellow-400" 
+                    className="h-5 w-5 text-neutral-400" 
                     fill="currentColor" 
                     viewBox="0 0 20 20"
                   >
@@ -134,7 +134,7 @@ const TrustedBy = () => {
               "Our team went from prototype to production in just days. The SDK is intuitive and the documentation is excellent."
             </p>
             <div className="flex items-center">
-              <div className="h-10 w-10 rounded-full bg-purple-900/50 flex items-center justify-center text-purple-300 font-bold">EJ</div>
+              <div className="h-10 w-10 rounded-full bg-neutral-800/50 flex items-center justify-center text-neutral-300 font-bold">EJ</div>
               <div className="ml-3">
                 <div className="text-[var(--white)] font-medium">Emma Johnson</div>
                 <div className="text-neutral-400 text-sm">VP Engineering, StartupX</div>

src/components/ai/UnifiedCapabilities.tsx

@@ -73,7 +73,7 @@ const capabilities = [
 const UnifiedCapabilities = () => {
   return (
     <section className="py-20 relative overflow-hidden">
-      <div className="absolute inset-0 bg-gradient-to-b from-blue-950/10 to-purple-950/10"></div>
+      <div className="absolute inset-0 bg-gradient-to-b from-neutral-950/10 to-neutral-950/10"></div>
       
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div className="text-center max-w-3xl mx-auto mb-16">
@@ -101,9 +101,9 @@ const UnifiedCapabilities = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ duration: 0.5, delay: index * 0.05 }}
-              className="bg-gradient-to-br from-purple-900/20 to-blue-900/20 border border-purple-500/20 rounded-xl p-6"
+              className="bg-gradient-to-br from-neutral-800/20 to-neutral-800/20 border border-neutral-500/20 rounded-xl p-6"
             >
-              <capability.icon className="h-8 w-8 text-purple-400 mb-4" />
+              <capability.icon className="h-8 w-8 text-neutral-400 mb-4" />
               <h3 className="text-xl font-bold text-[var(--white)] mb-2">{capability.title}</h3>
               <p className="text-neutral-300">{capability.description}</p>
             </motion.div>

src/components/ai/UseCases.tsx

@@ -9,43 +9,43 @@ const UseCases = () => {
       icon: MessageSquare,
       title: 'Conversational AI',
       description: 'Build intelligent chatbots, virtual assistants, and customer support agents with natural language understanding.',
-      color: 'bg-blue-500/20',
-      textColor: 'text-blue-400'
+      color: 'bg-neutral-600/20',
+      textColor: 'text-neutral-400'
     },
     {
       icon: Brain,
       title: 'Generative Content',
       description: 'Create text, images, code, and other content with AI-powered generation and customization.',
-      color: 'bg-purple-500/20',
-      textColor: 'text-purple-400'
+      color: 'bg-neutral-600/20',
+      textColor: 'text-neutral-400'
     },
     {
       icon: Search,
       title: 'Knowledge Retrieval',
       description: 'Implement semantic search, question answering, and information extraction from your data.',
-      color: 'bg-green-500/20',
-      textColor: 'text-green-400'
+      color: 'bg-neutral-500/20',
+      textColor: 'text-neutral-400'
     },
     {
       icon: Bot,
       title: 'Autonomous Agents',
       description: 'Deploy AI agents that can perform complex tasks, make decisions, and execute workflows autonomously.',
-      color: 'bg-pink-500/20',
-      textColor: 'text-pink-400'
+      color: 'bg-neutral-500/20',
+      textColor: 'text-neutral-400'
     },
     {
       icon: FileCode,
       title: 'Developer Tooling',
       description: 'Enhance your development workflow with AI-powered code generation, debugging, and documentation.',
-      color: 'bg-yellow-500/20',
-      textColor: 'text-yellow-400'
+      color: 'bg-neutral-500/20',
+      textColor: 'text-neutral-400'
     },
     {
       icon: Headphones,
       title: 'Voice & Speech',
       description: 'Convert speech to text, text to speech, and analyze voice interactions with advanced AI models.',
-      color: 'bg-red-500/20',
-      textColor: 'text-red-400'
+      color: 'bg-neutral-600/20',
+      textColor: 'text-neutral-400'
     }
   ];
 
@@ -53,8 +53,8 @@ const UseCases = () => {
     <section className="py-24 px-4 sm:px-6 lg:px-8 bg-[var(--black)] relative">
       {/* Background elements */}
       <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
-        <div className="absolute top-1/4 right-0 w-72 h-72 bg-purple-900/10 rounded-full blur-3xl"></div>
-        <div className="absolute bottom-0 left-0 w-96 h-96 bg-blue-900/10 rounded-full blur-3xl transform -translate-x-1/2 translate-y-1/2"></div>
+        <div className="absolute top-1/4 right-0 w-72 h-72 bg-neutral-800/10 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-0 left-0 w-96 h-96 bg-neutral-800/10 rounded-full blur-3xl transform -translate-x-1/2 translate-y-1/2"></div>
       </div>
 
       <div className="max-w-7xl mx-auto relative z-10">
@@ -132,14 +132,14 @@ console.log(response);`}
             </div>
             <div className="lg:w-1/2 bg-gray-950 p-8 flex flex-col">
               <h4 className="text-lg font-semibold text-[var(--white)] mb-4 flex items-center">
-                <BookOpen className="h-4 w-4 mr-2 text-purple-400" />
+                <BookOpen className="h-4 w-4 mr-2 text-neutral-400" />
                 Documentation Example
               </h4>
               <div className="flex flex-col h-full space-y-4 overflow-y-auto">
                 <div className="bg-gray-900 rounded-lg p-4">
                   <div className="flex items-center mb-2">
-                    <Database className="h-4 w-4 text-blue-400 mr-2" />
-                    <h5 className="text-blue-400 font-medium">Vector Search</h5>
+                    <Database className="h-4 w-4 text-neutral-400 mr-2" />
+                    <h5 className="text-neutral-400 font-medium">Vector Search</h5>
                   </div>
                   <pre className="text-xs text-neutral-300 overflow-x-auto">
 {`// Create a vector store
@@ -161,8 +161,8 @@ const results = await vectorStore.search(
 
                 <div className="bg-gray-900 rounded-lg p-4">
                   <div className="flex items-center mb-2">
-                    <Bot className="h-4 w-4 text-green-400 mr-2" />
-                    <h5 className="text-green-400 font-medium">AI Agents</h5>
+                    <Bot className="h-4 w-4 text-neutral-400 mr-2" />
+                    <h5 className="text-neutral-400 font-medium">AI Agents</h5>
                   </div>
                   <pre className="text-xs text-neutral-300 overflow-x-auto">
 {`// Create an agent with tools

src/components/ai/engineering-platform/AIEngineeringPlatform.tsx

@@ -11,7 +11,7 @@ const AIEngineeringPlatform: React.FC = () => {
     <section className="py-16 lg:py-24 relative">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-16">
-          <h2 className="text-3xl md:text-4xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400">
+          <h2 className="text-3xl md:text-4xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-neutral-400 to-neutral-400">
             AI Engineering Platform
           </h2>
           <p className="text-lg text-neutral-300 max-w-3xl mx-auto">

src/components/ai/engineering-platform/CloudInfrastructure.tsx

@@ -13,12 +13,12 @@ const CloudInfrastructure = () => {
       
       <div className="absolute inset-0 flex items-center justify-center">
         <motion.div 
-          className="relative h-20 w-20 rounded-xl bg-gray-900/70 border border-purple-500/30 flex items-center justify-center z-30"
+          className="relative h-20 w-20 rounded-xl bg-gray-900/70 border border-neutral-500/30 flex items-center justify-center z-30"
           initial={{ scale: 0 }}
           animate={{ scale: 1 }}
           transition={{ duration: 0.5 }}
         >
-          <BrainCog className="h-8 w-8 text-purple-400" />
+          <BrainCog className="h-8 w-8 text-neutral-400" />
         </motion.div>
         
         {[...Array(6)].map((_, i) => {
@@ -27,12 +27,12 @@ const CloudInfrastructure = () => {
           const x = Math.cos(angle) * distance;
           const y = Math.sin(angle) * distance;
           const icons = [
-            <Cloud key={0} className="h-5 w-5 text-purple-400" />,
-            <Server key={1} className="h-5 w-5 text-purple-400" />,
-            <Database key={2} className="h-5 w-5 text-purple-400" />,
-            <Monitor key={3} className="h-5 w-5 text-purple-400" />,
-            <Network key={4} className="h-5 w-5 text-purple-400" />,
-            <Activity key={5} className="h-5 w-5 text-purple-400" />
+            <Cloud key={0} className="h-5 w-5 text-neutral-400" />,
+            <Server key={1} className="h-5 w-5 text-neutral-400" />,
+            <Database key={2} className="h-5 w-5 text-neutral-400" />,
+            <Monitor key={3} className="h-5 w-5 text-neutral-400" />,
+            <Network key={4} className="h-5 w-5 text-neutral-400" />,
+            <Activity key={5} className="h-5 w-5 text-neutral-400" />
           ];
           
           return (
@@ -73,7 +73,7 @@ const CloudInfrastructure = () => {
           return (
             <motion.div
               key={`line-${i}`}
-              className="absolute h-0.5 bg-gradient-to-r from-purple-500/60 to-purple-500/10"
+              className="absolute h-0.5 bg-gradient-to-r from-neutral-500/60 to-neutral-500/10"
               style={{
                 width: 80,
                 transformOrigin: "left center",
@@ -105,7 +105,7 @@ const CloudInfrastructure = () => {
           return (
             <motion.div
               key={`particle-${i}`}
-              className="absolute h-1.5 w-1.5 rounded-full bg-purple-400"
+              className="absolute h-1.5 w-1.5 rounded-full bg-neutral-400"
               style={{
                 left: "50%",
                 top: "50%",

src/components/ai/engineering-platform/ExpandableFeatureCard.tsx

@@ -51,10 +51,10 @@ const ExpandableFeatureCard: React.FC<ExpandableFeatureCardProps> = ({
         </div>
         <button 
           onClick={toggleExpand}
-          className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${isExpanded ? 'bg-purple-600/30' : 'bg-gray-800/50 hover:bg-gray-700/50'}`}
+          className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${isExpanded ? 'bg-neutral-600/30' : 'bg-gray-800/50 hover:bg-gray-700/50'}`}
         >
           {isExpanded ? (
-            <Minus className="h-4 w-4 text-purple-300" />
+            <Minus className="h-4 w-4 text-neutral-300" />
           ) : (
             <Plus className="h-4 w-4 text-neutral-300" />
           )}

src/components/ai/engineering-platform/PlatformDashboard.tsx

@@ -14,27 +14,27 @@ const PlatformDashboard = () => {
       <div className="bg-gray-800/90 p-3 flex items-center justify-between">
         <div className="flex items-center space-x-2">
           <div className="flex space-x-1.5">
-            <div className="w-3 h-3 rounded-full bg-red-500"></div>
-            <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
-            <div className="w-3 h-3 rounded-full bg-green-500"></div>
+            <div className="w-3 h-3 rounded-full bg-neutral-600"></div>
+            <div className="w-3 h-3 rounded-full bg-neutral-500"></div>
+            <div className="w-3 h-3 rounded-full bg-neutral-500"></div>
           </div>
           <div className="text-xs text-neutral-400">Hanzo AI Engineering Platform</div>
         </div>
         <div className="flex space-x-3">
           <button 
-            className={`px-3 py-1 rounded-md text-xs ${activeSection === "models" ? "bg-purple-900/60 text-purple-200" : "bg-gray-800 text-neutral-400"}`} 
+            className={`px-3 py-1 rounded-md text-xs ${activeSection === "models" ? "bg-neutral-800/60 text-neutral-200" : "bg-gray-800 text-neutral-400"}`} 
             onClick={() => setActiveSection("models")}
           >
             AI Models
           </button>
           <button 
-            className={`px-3 py-1 rounded-md text-xs ${activeSection === "observability" ? "bg-purple-900/60 text-purple-200" : "bg-gray-800 text-neutral-400"}`} 
+            className={`px-3 py-1 rounded-md text-xs ${activeSection === "observability" ? "bg-neutral-800/60 text-neutral-200" : "bg-gray-800 text-neutral-400"}`} 
             onClick={() => setActiveSection("observability")}
           >
             Observability
           </button>
           <button 
-            className={`px-3 py-1 rounded-md text-xs ${activeSection === "analytics" ? "bg-purple-900/60 text-purple-200" : "bg-gray-800 text-neutral-400"}`} 
+            className={`px-3 py-1 rounded-md text-xs ${activeSection === "analytics" ? "bg-neutral-800/60 text-neutral-200" : "bg-gray-800 text-neutral-400"}`} 
             onClick={() => setActiveSection("analytics")}
           >
             Analytics

src/components/ai/engineering-platform/dashboard/AIModelsView.tsx

@@ -12,7 +12,7 @@ const AIModelsView = () => {
       <div className="flex items-center justify-between mb-4">
         <h3 className="text-sm font-medium text-[var(--white)]">AI Model Registry</h3>
         <div className="flex space-x-2">
-          <button className="px-2 py-1 bg-purple-600/40 rounded-md text-xs text-purple-200 flex items-center">
+          <button className="px-2 py-1 bg-neutral-600/40 rounded-md text-xs text-neutral-200 flex items-center">
             <BrainCog className="w-3 h-3 mr-1" />
             Deploy Model
           </button>
@@ -27,7 +27,7 @@ const AIModelsView = () => {
         {aiModels.map((model) => (
           <motion.div
             key={model.id}
-            className={`p-3 rounded-lg border ${selectedModel === model.id ? "bg-purple-900/20 border-purple-600/40" : "bg-gray-800/40 border-gray-700/40"} hover:bg-gray-800/60 transition-colors cursor-pointer`}
+            className={`p-3 rounded-lg border ${selectedModel === model.id ? "bg-neutral-800/20 border-neutral-600/40" : "bg-gray-800/40 border-gray-700/40"} hover:bg-gray-800/60 transition-colors cursor-pointer`}
             onClick={() => setSelectedModel(model.id)}
             whileHover={{ scale: 1.01 }}
             transition={{ duration: 0.2 }}
@@ -35,7 +35,7 @@ const AIModelsView = () => {
             <div className="flex items-start justify-between">
               <div>
                 <div className="flex items-center">
-                  <BrainCircuit className="w-4 h-4 text-purple-400 mr-2" />
+                  <BrainCircuit className="w-4 h-4 text-neutral-400 mr-2" />
                   <span className="font-medium text-[var(--white)] text-sm">{model.name}</span>
                   <span className="ml-2 px-1.5 py-0.5 bg-gray-700/60 rounded text-xs text-neutral-300">{model.type}</span>
                 </div>
@@ -44,11 +44,11 @@ const AIModelsView = () => {
               <div className="flex items-center space-x-4">
                 <div className="text-right">
                   <div className="text-xs text-neutral-400">Accuracy</div>
-                  <div className="text-sm font-medium text-green-400">{model.accuracy}%</div>
+                  <div className="text-sm font-medium text-neutral-400">{model.accuracy}%</div>
                 </div>
                 <div className="text-right">
                   <div className="text-xs text-neutral-400">Latency</div>
-                  <div className="text-sm font-medium text-blue-400">{model.latency}ms</div>
+                  <div className="text-sm font-medium text-neutral-400">{model.latency}ms</div>
                 </div>
               </div>
             </div>
@@ -68,7 +68,7 @@ const AIModelsView = () => {
                   <ServerCog className="w-3 h-3 mr-1.5" />
                   Fine-tune
                 </button>
-                <button className="px-2 py-1.5 bg-purple-600/30 rounded text-xs text-purple-200 flex items-center justify-center">
+                <button className="px-2 py-1.5 bg-neutral-600/30 rounded text-xs text-neutral-200 flex items-center justify-center">
                   <Zap className="w-3 h-3 mr-1.5" />
                   Deploy
                 </button>

src/components/ai/engineering-platform/dashboard/AnalyticsView.tsx

@@ -9,7 +9,7 @@ const AnalyticsView = () => {
       <div className="flex items-center justify-between mb-4">
         <h3 className="text-sm font-medium text-[var(--white)]">AI Analytics</h3>
         <div className="flex space-x-2">
-          <button className="px-2 py-1 bg-purple-600/40 rounded-md text-xs text-purple-200 flex items-center">
+          <button className="px-2 py-1 bg-neutral-600/40 rounded-md text-xs text-neutral-200 flex items-center">
             <BarChart className="w-3 h-3 mr-1" />
             Reports
           </button>
@@ -27,25 +27,25 @@ const AnalyticsView = () => {
             <div className="absolute inset-0">
               <div className="h-full w-full flex">
                 <motion.div 
-                  className="h-full bg-purple-600/70 rounded-l"
+                  className="h-full bg-neutral-600/70 rounded-l"
                   initial={{ width: 0 }}
                   animate={{ width: "42%" }}
                   transition={{ duration: 0.8, delay: 0.1 }}
                 />
                 <motion.div 
-                  className="h-full bg-blue-500/70"
+                  className="h-full bg-neutral-600/70"
                   initial={{ width: 0 }}
                   animate={{ width: "28%" }}
                   transition={{ duration: 0.8, delay: 0.3 }}
                 />
                 <motion.div 
-                  className="h-full bg-indigo-500/70"
+                  className="h-full bg-neutral-500/70"
                   initial={{ width: 0 }}
                   animate={{ width: "15%" }}
                   transition={{ duration: 0.8, delay: 0.5 }}
                 />
                 <motion.div 
-                  className="h-full bg-pink-500/70 rounded-r"
+                  className="h-full bg-neutral-500/70 rounded-r"
                   initial={{ width: 0 }}
                   animate={{ width: "15%" }}
                   transition={{ duration: 0.8, delay: 0.7 }}
@@ -55,19 +55,19 @@ const AnalyticsView = () => {
           </div>
           <div className="grid grid-cols-2 gap-2 mt-3">
             <div className="flex items-center">
-              <div className="w-2 h-2 rounded-full bg-purple-600 mr-2"></div>
+              <div className="w-2 h-2 rounded-full bg-neutral-600 mr-2"></div>
               <span className="text-xs text-neutral-300">GPT-4o (42%)</span>
             </div>
             <div className="flex items-center">
-              <div className="w-2 h-2 rounded-full bg-blue-500 mr-2"></div>
+              <div className="w-2 h-2 rounded-full bg-neutral-600 mr-2"></div>
               <span className="text-xs text-neutral-300">Claude 3 (28%)</span>
             </div>
             <div className="flex items-center">
-              <div className="w-2 h-2 rounded-full bg-indigo-500 mr-2"></div>
+              <div className="w-2 h-2 rounded-full bg-neutral-500 mr-2"></div>
               <span className="text-xs text-neutral-300">Llama 3 (15%)</span>
             </div>
             <div className="flex items-center">
-              <div className="w-2 h-2 rounded-full bg-pink-500 mr-2"></div>
+              <div className="w-2 h-2 rounded-full bg-neutral-500 mr-2"></div>
               <span className="text-xs text-neutral-300">Others (15%)</span>
             </div>
           </div>
@@ -79,7 +79,7 @@ const AnalyticsView = () => {
               {[35, 42, 38, 52, 45, 55, 47, 62, 48, 60, 53, 58].map((value, index) => (
                 <motion.div
                   key={index}
-                  className="bg-gradient-to-t from-purple-600/90 to-purple-400/50 rounded-t w-full"
+                  className="bg-gradient-to-t from-neutral-600/90 to-neutral-400/50 rounded-t w-full"
                   style={{ height: `${value}%` }}
                   initial={{ height: 0 }}
                   animate={{ height: `${value}%` }}
@@ -94,7 +94,7 @@ const AnalyticsView = () => {
             <span>Dec</span>
           </div>
           <div className="mt-1 text-xs text-neutral-300">
-            $1,245 spent this month - <span className="text-purple-400">14% under budget</span>
+            $1,245 spent this month - <span className="text-neutral-400">14% under budget</span>
           </div>
         </div>
       </div>
@@ -109,7 +109,7 @@ const AnalyticsView = () => {
             </div>
             <div className="w-full bg-gray-700/40 rounded-full h-1.5">
               <motion.div 
-                className="bg-green-500 h-1.5 rounded-full" 
+                className="bg-neutral-500 h-1.5 rounded-full" 
                 initial={{ width: 0 }}
                 animate={{ width: "89%" }}
                 transition={{ duration: 0.8 }}
@@ -123,7 +123,7 @@ const AnalyticsView = () => {
             </div>
             <div className="w-full bg-gray-700/40 rounded-full h-1.5">
               <motion.div 
-                className="bg-green-500 h-1.5 rounded-full" 
+                className="bg-neutral-500 h-1.5 rounded-full" 
                 initial={{ width: 0 }}
                 animate={{ width: "94%" }}
                 transition={{ duration: 0.8, delay: 0.2 }}
@@ -137,7 +137,7 @@ const AnalyticsView = () => {
             </div>
             <div className="w-full bg-gray-700/40 rounded-full h-1.5">
               <motion.div 
-                className="bg-green-500 h-1.5 rounded-full" 
+                className="bg-neutral-500 h-1.5 rounded-full" 
                 initial={{ width: 0 }}
                 animate={{ width: "99.8%" }}
                 transition={{ duration: 0.8, delay: 0.4 }}

src/components/ai/engineering-platform/dashboard/ObservabilityView.tsx

@@ -9,7 +9,7 @@ const ObservabilityView = () => {
       <div className="flex items-center justify-between mb-4">
         <h3 className="text-sm font-medium text-[var(--white)]">AI Observability Dashboard</h3>
         <div className="flex space-x-2">
-          <button className="px-2 py-1 bg-purple-600/40 rounded-md text-xs text-purple-200 flex items-center">
+          <button className="px-2 py-1 bg-neutral-600/40 rounded-md text-xs text-neutral-200 flex items-center">
             <Activity className="w-3 h-3 mr-1" />
             Real-time
           </button>
@@ -24,7 +24,7 @@ const ObservabilityView = () => {
         <div className="bg-gray-800/40 border border-gray-700/40 rounded-lg p-3">
           <div className="text-xs text-neutral-400 mb-1">Requests</div>
           <div className="text-lg font-medium text-[var(--white)]">3,452</div>
-          <div className="mt-1 text-xs text-green-400 flex items-center">
+          <div className="mt-1 text-xs text-neutral-400 flex items-center">
             <ChartLine className="w-3 h-3 mr-1" />
             +18% from yesterday
           </div>
@@ -32,7 +32,7 @@ const ObservabilityView = () => {
         <div className="bg-gray-800/40 border border-gray-700/40 rounded-lg p-3">
           <div className="text-xs text-neutral-400 mb-1">Avg. Latency</div>
           <div className="text-lg font-medium text-[var(--white)]">94ms</div>
-          <div className="mt-1 text-xs text-green-400 flex items-center">
+          <div className="mt-1 text-xs text-neutral-400 flex items-center">
             <ChartLine className="w-3 h-3 mr-1" />
             -12ms from yesterday
           </div>
@@ -40,7 +40,7 @@ const ObservabilityView = () => {
         <div className="bg-gray-800/40 border border-gray-700/40 rounded-lg p-3">
           <div className="text-xs text-neutral-400 mb-1">Error Rate</div>
           <div className="text-lg font-medium text-[var(--white)]">0.4%</div>
-          <div className="mt-1 text-xs text-green-400 flex items-center">
+          <div className="mt-1 text-xs text-neutral-400 flex items-center">
             <ChartLine className="w-3 h-3 mr-1" />
             -0.2% from yesterday
           </div>
@@ -53,7 +53,7 @@ const ObservabilityView = () => {
           {[35, 42, 38, 30, 45, 55, 47, 40, 48, 60, 53, 41, 48, 50, 58, 45, 43, 49, 55, 62].map((value, index) => (
             <motion.div
               key={index}
-              className="bg-purple-500/70 rounded-t w-full"
+              className="bg-neutral-600/70 rounded-t w-full"
               style={{ height: `${value}%` }}
               initial={{ height: 0 }}
               animate={{ height: `${value}%` }}
@@ -79,12 +79,12 @@ const ObservabilityView = () => {
           ].map((trace) => (
             <div key={trace.id} className="flex items-center justify-between text-xs p-1.5 rounded hover:bg-gray-700/30">
               <div className="flex items-center">
-                <div className={`w-1.5 h-1.5 rounded-full mr-2 ${trace.status === "success" ? "bg-green-500" : "bg-red-500"}`}></div>
+                <div className={`w-1.5 h-1.5 rounded-full mr-2 ${trace.status === "success" ? "bg-neutral-500" : "bg-neutral-600"}`}></div>
                 <span className="text-neutral-300">{trace.model}</span>
               </div>
               <div className="flex items-center space-x-3">
                 <span className="text-neutral-400">{trace.time}</span>
-                <span className={`${trace.status === "success" ? "text-blue-400" : "text-red-400"}`}>{trace.duration}</span>
+                <span className={`${trace.status === "success" ? "text-neutral-400" : "text-neutral-400"}`}>{trace.duration}</span>
               </div>
             </div>
           ))}

src/components/ai/models/AdditionalFeatures.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 
 const AdditionalFeatures = () => {
   return (
-    <div className="bg-gradient-to-r from-purple-900/20 to-blue-900/20 rounded-2xl p-8 border border-purple-500/30 mt-12">
+    <div className="bg-gradient-to-r from-neutral-800/20 to-neutral-800/20 rounded-2xl p-8 border border-neutral-500/30 mt-12">
       <h3 className="text-2xl font-bold text-[var(--white)] mb-4">Single API for Everything</h3>
       <p className="text-lg text-neutral-300 mb-8">
         Our unified API provides seamless access to all AI capabilities through a consistent, developer-friendly interface
@@ -14,7 +14,7 @@ const AdditionalFeatures = () => {
       
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         <div className="bg-[var(--black)]/30 p-4 rounded-lg">
-          <Brain className="h-8 w-8 text-purple-400 mb-3" />
+          <Brain className="h-8 w-8 text-neutral-400 mb-3" />
           <h4 className="text-lg font-semibold text-[var(--white)] mb-2">Model Routing</h4>
           <p className="text-sm text-neutral-300">
             Smart routing to optimal models based on task, cost, and performance requirements
@@ -22,7 +22,7 @@ const AdditionalFeatures = () => {
         </div>
         
         <div className="bg-[var(--black)]/30 p-4 rounded-lg">
-          <MessageSquare className="h-8 w-8 text-purple-400 mb-3" />
+          <MessageSquare className="h-8 w-8 text-neutral-400 mb-3" />
           <h4 className="text-lg font-semibold text-[var(--white)] mb-2">Document Processing</h4>
           <p className="text-sm text-neutral-300">
             Built-in document parsing, chunking, and semantic analysis capabilities
@@ -30,7 +30,7 @@ const AdditionalFeatures = () => {
         </div>
         
         <div className="bg-[var(--black)]/30 p-4 rounded-lg">
-          <Box className="h-8 w-8 text-purple-400 mb-3" />
+          <Box className="h-8 w-8 text-neutral-400 mb-3" />
           <h4 className="text-lg font-semibold text-[var(--white)] mb-2">Vector Search</h4>
           <p className="text-sm text-neutral-300">
             Integrated vector database for semantic search and retrieval augmented generation
@@ -38,7 +38,7 @@ const AdditionalFeatures = () => {
         </div>
         
         <div className="bg-[var(--black)]/30 p-4 rounded-lg">
-          <Database className="h-8 w-8 text-purple-400 mb-3" />
+          <Database className="h-8 w-8 text-neutral-400 mb-3" />
           <h4 className="text-lg font-semibold text-[var(--white)] mb-2">Knowledge Base</h4>
           <p className="text-sm text-neutral-300">
             Create, manage and query custom knowledge bases for your AI applications
@@ -47,7 +47,7 @@ const AdditionalFeatures = () => {
       </div>
 
       <div className="mt-8 text-center">
-        <Button className="bg-purple-600 hover:bg-purple-700 text-[var(--white)] px-6 py-2 text-lg">
+        <Button className="bg-neutral-600 hover:bg-neutral-700 text-[var(--white)] px-6 py-2 text-lg">
           Explore the API
         </Button>
       </div>

src/components/analytics/BuildForGrowth.tsx

@@ -23,19 +23,19 @@ const BuildForGrowth = () => {
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           {[
             {
-              icon: <TrendingUp className="h-8 w-8 text-purple-400" />,
+              icon: <TrendingUp className="h-8 w-8 text-neutral-400" />,
               title: "Conversion Optimization",
               description: "Identify and fix bottlenecks in your user journey to improve conversion rates.",
               metrics: "+27% average increase in conversions"
             },
             {
-              icon: <Users className="h-8 w-8 text-blue-400" />,
+              icon: <Users className="h-8 w-8 text-neutral-400" />,
               title: "Audience Insights",
               description: "Understand your users better with detailed demographics and behavior analysis.",
               metrics: "15M+ user profiles analyzed daily"
             },
             {
-              icon: <CreditCard className="h-8 w-8 text-green-400" />,
+              icon: <CreditCard className="h-8 w-8 text-neutral-400" />,
               title: "Revenue Impact",
               description: "See the direct financial impact of your optimization efforts in real-time.",
               metrics: "$1.2B+ in tracked revenue"
@@ -52,7 +52,7 @@ const BuildForGrowth = () => {
               <div className="mb-5">{item.icon}</div>
               <h3 className="text-xl font-bold mb-3">{item.title}</h3>
               <p className="text-neutral-400 mb-5">{item.description}</p>
-              <div className="text-sm font-medium px-3 py-1 bg-gray-800 rounded-full inline-block text-purple-300">
+              <div className="text-sm font-medium px-3 py-1 bg-gray-800 rounded-full inline-block text-neutral-300">
                 {item.metrics}
               </div>
             </motion.div>
@@ -66,7 +66,7 @@ const BuildForGrowth = () => {
           transition={{ duration: 0.5, delay: 0.3 }}
           className="mt-16 text-center"
         >
-          <a href="#learn-more" className="inline-flex items-center text-purple-400 hover:text-purple-300 transition-colors">
+          <a href="#learn-more" className="inline-flex items-center text-neutral-400 hover:text-neutral-300 transition-colors">
             Learn how our customers achieved growth <ArrowRight className="ml-2 h-4 w-4" />
           </a>
         </motion.div>

src/components/analytics/CallToAction.tsx

@@ -7,7 +7,7 @@ import { ArrowRight, LineChart } from "lucide-react";
 const CallToAction = () => {
   return (
     <section className="py-32 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900/30 to-black relative overflow-hidden">
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-purple-900/20 via-transparent to-transparent opacity-70"></div>
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-neutral-800/20 via-transparent to-transparent opacity-70"></div>
       
       <div className="max-w-6xl mx-auto relative z-10">
         <motion.div
@@ -17,7 +17,7 @@ const CallToAction = () => {
           transition={{ duration: 0.5 }}
           className="text-center mb-16"
         >
-          <div className="inline-flex items-center justify-center bg-purple-900/30 p-3 rounded-full border border-purple-500/30 text-purple-400 mb-6">
+          <div className="inline-flex items-center justify-center bg-neutral-800/30 p-3 rounded-full border border-neutral-500/30 text-neutral-400 mb-6">
             <LineChart className="h-10 w-10" />
           </div>
           <h2 className="text-3xl md:text-5xl font-bold mb-6">Start Analyzing Smarter, Today</h2>
@@ -30,7 +30,7 @@ const CallToAction = () => {
               whileHover={{ scale: 1.05 }}
               transition={{ type: "spring", stiffness: 400, damping: 10 }}
             >
-              <Button size="lg" className="text-lg px-10 py-6 bg-gradient-to-r from-purple-700 to-purple-500 hover:from-purple-600 hover:to-purple-400 border-none">
+              <Button size="lg" className="text-lg px-10 py-6 bg-gradient-to-r from-neutral-700 to-neutral-500 hover:from-neutral-600 hover:to-neutral-400 border-none">
                 Start Free Trial
               </Button>
             </motion.div>
@@ -69,7 +69,7 @@ const CallToAction = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="bg-gray-900/20 p-6 rounded-xl border border-gray-800 hover:border-purple-900/30 transition-colors"
+              className="bg-gray-900/20 p-6 rounded-xl border border-gray-800 hover:border-neutral-800/30 transition-colors"
             >
               <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
               <p className="text-neutral-400">{feature.description}</p>

src/components/analytics/CommerceAnalytics.tsx

@@ -19,7 +19,7 @@ const CommerceAnalytics = () => {
       className="py-32 px-4 sm:px-6 lg:px-8 bg-[var(--black)] relative overflow-hidden"
     >
       {/* Background gradient */}
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-900/10 to-blue-900/5 opacity-50"></div>
+      <div className="absolute inset-0 bg-gradient-to-br from-neutral-800/10 to-neutral-800/5 opacity-50"></div>
       
       {/* Content */}
       <div className="max-w-7xl mx-auto relative z-10">
@@ -63,7 +63,7 @@ const CommerceAnalytics = () => {
                 transition={{ duration: 0.5, delay: index * 0.1 }}
                 className="flex"
               >
-                <div className="mr-4 p-3 rounded-xl bg-gradient-to-br from-purple-500/20 to-blue-500/20 border border-purple-500/20 text-purple-400">
+                <div className="mr-4 p-3 rounded-xl bg-gradient-to-br from-neutral-500/20 to-neutral-500/20 border border-neutral-500/20 text-neutral-400">
                   {feature.icon}
                 </div>
                 <div>
@@ -80,7 +80,7 @@ const CommerceAnalytics = () => {
           >
             <div className="p-4 border-b border-gray-800">
               <div className="flex items-center">
-                <ShoppingCart className="h-5 w-5 text-purple-400 mr-2" />
+                <ShoppingCart className="h-5 w-5 text-neutral-400 mr-2" />
                 <span className="text-[var(--white)] font-medium">Commerce Dashboard</span>
               </div>
             </div>
@@ -94,7 +94,7 @@ const CommerceAnalytics = () => {
                     {[65, 80, 55, 90, 70, 85, 60].map((height, i) => (
                       <motion.div
                         key={i}
-                        className="w-6 bg-gradient-to-t from-purple-600 to-purple-400 rounded-t"
+                        className="w-6 bg-gradient-to-t from-neutral-600 to-neutral-400 rounded-t"
                         initial={{ height: 0 }}
                         whileInView={{ height: `${height}%` }}
                         viewport={{ once: true }}
@@ -109,7 +109,7 @@ const CommerceAnalytics = () => {
                 <div className="bg-gray-800/30 p-4 rounded-lg">
                   <div className="text-sm text-neutral-400">Conversion Rate</div>
                   <div className="text-2xl font-bold mt-2">4.78%</div>
-                  <div className="text-green-400 text-sm flex items-center mt-1">
+                  <div className="text-neutral-400 text-sm flex items-center mt-1">
                     <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
                     </svg>
@@ -119,7 +119,7 @@ const CommerceAnalytics = () => {
                 <div className="bg-gray-800/30 p-4 rounded-lg">
                   <div className="text-sm text-neutral-400">Avg. Order Value</div>
                   <div className="text-2xl font-bold mt-2">$87.32</div>
-                  <div className="text-green-400 text-sm flex items-center mt-1">
+                  <div className="text-neutral-400 text-sm flex items-center mt-1">
                     <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
                     </svg>
@@ -141,14 +141,14 @@ const CommerceAnalytics = () => {
                       <div className="flex items-center">
                         <div className="w-24 h-2 bg-gray-800 rounded-full mr-2 overflow-hidden">
                           <motion.div
-                            className="h-full bg-purple-500"
+                            className="h-full bg-neutral-600"
                             initial={{ width: 0 }}
                             whileInView={{ width: `${product.score}%` }}
                             viewport={{ once: true }}
                             transition={{ duration: 0.8, delay: 0.3 + i * 0.1 }}
                           ></motion.div>
                         </div>
-                        <span className="text-sm text-purple-400">{product.score}%</span>
+                        <span className="text-sm text-neutral-400">{product.score}%</span>
                       </div>
                     </div>
                   ))}

src/components/analytics/Community.tsx

@@ -102,7 +102,7 @@ const Community = () => {
                 className="bg-gray-900/50 rounded-xl p-8 border border-gray-800 text-center"
               >
                 <div className="flex justify-center mb-4">
-                  <div className="p-3 bg-purple-900/30 rounded-full border border-purple-900/30 text-purple-400">
+                  <div className="p-3 bg-neutral-800/30 rounded-full border border-neutral-800/30 text-neutral-400">
                     {item.icon}
                   </div>
                 </div>
@@ -132,7 +132,7 @@ const Community = () => {
               className="bg-gray-900/50 rounded-xl border border-gray-800 p-8"
             >
               <div className="flex items-center mb-6">
-                <Github className="h-6 w-6 text-purple-400 mr-3" />
+                <Github className="h-6 w-6 text-neutral-400 mr-3" />
                 <h3 className="text-2xl font-bold">Open Source</h3>
               </div>
               
@@ -176,7 +176,7 @@ const Community = () => {
               className="bg-gray-900/50 rounded-xl border border-gray-800 p-8"
             >
               <div className="flex items-center mb-6">
-                <BookOpen className="h-6 w-6 text-blue-400 mr-3" />
+                <BookOpen className="h-6 w-6 text-neutral-400 mr-3" />
                 <h3 className="text-2xl font-bold">Resources</h3>
               </div>
               

src/components/analytics/DeveloperFirst.tsx

@@ -90,7 +90,7 @@ const DeveloperFirst = () => {
   
   return (
     <section className="py-32 px-4 sm:px-6 lg:px-8 bg-[var(--black)] relative overflow-hidden">
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,_var(--tw-gradient-stops))] from-purple-900/20 via-transparent to-transparent"></div>
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,_var(--tw-gradient-stops))] from-neutral-800/20 via-transparent to-transparent"></div>
       
       <div className="max-w-7xl mx-auto relative z-10">
         <motion.div
@@ -115,27 +115,27 @@ const DeveloperFirst = () => {
               transition={{ duration: 0.5 }}
             >
               <div className="flex items-center mb-5">
-                <Layers className="h-6 w-6 text-purple-400 mr-3" />
+                <Layers className="h-6 w-6 text-neutral-400 mr-3" />
                 <h3 className="text-2xl font-bold">Designed for Developers</h3>
               </div>
               
               <ul className="space-y-4 mb-8">
                 <li className="flex">
-                  <div className="mr-3 text-purple-400">•</div>
+                  <div className="mr-3 text-neutral-400">•</div>
                   <div>
                     <span className="font-medium text-[var(--white)]">OpenTelemetry Integration</span>
                     <p className="text-neutral-400 mt-1">Seamlessly integrate with your existing observability stack.</p>
                   </div>
                 </li>
                 <li className="flex">
-                  <div className="mr-3 text-purple-400">•</div>
+                  <div className="mr-3 text-neutral-400">•</div>
                   <div>
                     <span className="font-medium text-[var(--white)]">API-first, highly customizable</span>
                     <p className="text-neutral-400 mt-1">Build exactly what you need with our flexible API.</p>
                   </div>
                 </li>
                 <li className="flex">
-                  <div className="mr-3 text-purple-400">•</div>
+                  <div className="mr-3 text-neutral-400">•</div>
                   <div>
                     <span className="font-medium text-[var(--white)]">Robust documentation and code examples</span>
                     <p className="text-neutral-400 mt-1">Comprehensive guides and examples to get you started quickly.</p>

src/components/analytics/HeroSection.tsx

@@ -15,7 +15,7 @@ const HeroSection = () => {
         {Array(20).fill(0).map((_, i) => (
           <motion.div
             key={i}
-            className="absolute h-1 w-1 rounded-full bg-purple-500"
+            className="absolute h-1 w-1 rounded-full bg-neutral-600"
             style={{
               left: `${Math.random() * 100}%`,
               top: `${Math.random() * 100}%`,
@@ -40,7 +40,7 @@ const HeroSection = () => {
           transition={{ duration: 0.6 }}
           className="mb-8 text-center"
         >
-          <div className="inline-block px-4 py-1 rounded-full bg-purple-900/30 border border-purple-500/30 text-purple-300 text-sm font-medium mb-6">
+          <div className="inline-block px-4 py-1 rounded-full bg-neutral-800/30 border border-neutral-500/30 text-neutral-300 text-sm font-medium mb-6">
             AI-Powered Analytics for Next-Generation Growth
           </div>
           <ChromeText as="h1" className="text-4xl md:text-6xl font-bold tracking-tight mb-6">
@@ -58,7 +58,7 @@ const HeroSection = () => {
           transition={{ duration: 0.6, delay: 0.3 }}
           className="flex flex-col sm:flex-row gap-4 justify-center mt-10"
         >
-          <Button size="lg" className="text-lg px-8 bg-gradient-to-r from-purple-700 to-purple-500 hover:from-purple-600 hover:to-purple-400 border-none">
+          <Button size="lg" className="text-lg px-8 bg-gradient-to-r from-neutral-700 to-neutral-500 hover:from-neutral-600 hover:to-neutral-400 border-none">
             <a href="#start-free-trial">Start Free Trial</a>
           </Button>
           <Button size="lg" variant="outline" className="text-lg px-8">
@@ -77,13 +77,13 @@ const HeroSection = () => {
           <div className="bg-gradient-to-br from-gray-900 to-black p-4 rounded-xl border border-gray-800 shadow-2xl overflow-hidden">
             <div className="flex items-center justify-between mb-4 border-b border-gray-800 pb-2">
               <div className="flex items-center">
-                <LineChart className="h-5 w-5 text-purple-400 mr-2" />
+                <LineChart className="h-5 w-5 text-neutral-400 mr-2" />
                 <span className="text-[var(--white)] font-medium">Hanzo Analytics Dashboard</span>
               </div>
               <div className="flex space-x-1">
-                <div className="w-3 h-3 rounded-full bg-red-500"></div>
-                <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
-                <div className="w-3 h-3 rounded-full bg-green-500"></div>
+                <div className="w-3 h-3 rounded-full bg-neutral-600"></div>
+                <div className="w-3 h-3 rounded-full bg-neutral-500"></div>
+                <div className="w-3 h-3 rounded-full bg-neutral-500"></div>
               </div>
             </div>
             <div className="grid grid-cols-3 gap-4">
@@ -98,7 +98,7 @@ const HeroSection = () => {
                     <motion.path
                       d="M0,50 L10,40 L20,45 L30,35 L40,38 L50,25 L60,30 L70,20 L80,15 L90,10 L100,5"
                       fill="none"
-                      stroke="#9b87f5"
+                      stroke="#a3a3a3"
                       strokeWidth="1"
                       initial={{ pathLength: 0 }}
                       animate={{ pathLength: 1 }}
@@ -107,7 +107,7 @@ const HeroSection = () => {
                     <motion.path
                       d="M0,50 L10,42 L20,40 L30,38 L40,30 L50,32 L60,25 L70,28 L80,20 L90,18 L100,15"
                       fill="none"
-                      stroke="#33C3F0"
+                      stroke="#a3a3a3"
                       strokeWidth="1"
                       initial={{ pathLength: 0 }}
                       animate={{ pathLength: 1 }}
@@ -127,7 +127,7 @@ const HeroSection = () => {
                   >
                     127,543
                   </motion.div>
-                  <div className="text-green-400 text-xs mt-1">+12.4% vs last week</div>
+                  <div className="text-neutral-400 text-xs mt-1">+12.4% vs last week</div>
                 </div>
                 <div className="bg-gray-800/50 rounded-lg p-4 h-[30%]">
                   <div className="text-sm text-neutral-400">Conversion Rate</div>
@@ -139,7 +139,7 @@ const HeroSection = () => {
                   >
                     4.87%
                   </motion.div>
-                  <div className="text-green-400 text-xs mt-1">+0.8% vs last week</div>
+                  <div className="text-neutral-400 text-xs mt-1">+0.8% vs last week</div>
                 </div>
                 <div className="bg-gray-800/50 rounded-lg p-4 h-[30%]">
                   <div className="text-sm text-neutral-400">Revenue</div>
@@ -151,7 +151,7 @@ const HeroSection = () => {
                   >
                     $45,892
                   </motion.div>
-                  <div className="text-green-400 text-xs mt-1">+15.2% vs last week</div>
+                  <div className="text-neutral-400 text-xs mt-1">+15.2% vs last week</div>
                 </div>
               </div>
             </div>

src/components/analytics/OpenSource.tsx

@@ -6,21 +6,21 @@ import { Button } from "@/components/ui/button";
 
 const statsItems = [
   { 
-    icon: <Download className="h-6 w-6 text-green-400" />,
+    icon: <Download className="h-6 w-6 text-neutral-400" />,
     value: 17,
     suffix: "M+",
     label: "Downloads",
     countUpDuration: 2
   },
   { 
-    icon: <Star className="h-6 w-6 text-yellow-400" />,
+    icon: <Star className="h-6 w-6 text-neutral-400" />,
     value: 25,
     suffix: "K+",
     label: "GitHub Stars",
     countUpDuration: 2.2
   },
   { 
-    icon: <Users className="h-6 w-6 text-blue-400" />,
+    icon: <Users className="h-6 w-6 text-neutral-400" />,
     value: 280,
     suffix: "+",
     label: "Contributors",
@@ -115,9 +115,9 @@ const OpenSource = () => {
           >
             <div className="flex items-center p-4 bg-gray-900 border-b border-gray-800">
               <div className="flex space-x-2 mr-4">
-                <div className="w-3 h-3 rounded-full bg-red-500"></div>
-                <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
-                <div className="w-3 h-3 rounded-full bg-green-500"></div>
+                <div className="w-3 h-3 rounded-full bg-neutral-600"></div>
+                <div className="w-3 h-3 rounded-full bg-neutral-500"></div>
+                <div className="w-3 h-3 rounded-full bg-neutral-500"></div>
               </div>
               <div className="flex-1 text-center text-neutral-300 text-sm">analytics.js</div>
             </div>
@@ -126,7 +126,7 @@ const OpenSource = () => {
               <div className="flex">
                 <div className="mr-4 text-neutral-600">1</div>
                 <div>
-                  <span className="text-blue-400">import</span> <span className="text-green-400">{'{'}</span> <span className="text-yellow-300">HanzoAnalytics</span> <span className="text-green-400">{'}'}</span> <span className="text-blue-400">from</span> <span className="text-orange-400">'hanzo-analytics'</span>;
+                  <span className="text-neutral-400">import</span> <span className="text-neutral-400">{'{'}</span> <span className="text-neutral-300">HanzoAnalytics</span> <span className="text-neutral-400">{'}'}</span> <span className="text-neutral-400">from</span> <span className="text-neutral-400">'hanzo-analytics'</span>;
                 </div>
               </div>
               <div className="flex">
@@ -135,12 +135,12 @@ const OpenSource = () => {
               </div>
               <div className="flex">
                 <div className="mr-4 text-neutral-600">3</div>
-                <div><span className="text-purple-400">// Initialize analytics with your project ID</span></div>
+                <div><span className="text-neutral-400">// Initialize analytics with your project ID</span></div>
               </div>
               <div className="flex">
                 <div className="mr-4 text-neutral-600">4</div>
                 <div>
-                  <span className="text-blue-400">const</span> analytics <span className="text-[var(--white)]">=</span> <span className="text-blue-400">new</span> <span className="text-yellow-300">HanzoAnalytics</span><span className="text-[var(--white)]">(</span><span className="text-orange-400">'YOUR_PROJECT_ID'</span><span className="text-[var(--white)]">);</span>
+                  <span className="text-neutral-400">const</span> analytics <span className="text-[var(--white)]">=</span> <span className="text-neutral-400">new</span> <span className="text-neutral-300">HanzoAnalytics</span><span className="text-[var(--white)]">(</span><span className="text-neutral-400">'YOUR_PROJECT_ID'</span><span className="text-[var(--white)]">);</span>
                 </div>
               </div>
               <div className="flex">
@@ -149,7 +149,7 @@ const OpenSource = () => {
               </div>
               <div className="flex">
                 <div className="mr-4 text-neutral-600">6</div>
-                <div><span className="text-purple-400">// Track page views automatically</span></div>
+                <div><span className="text-neutral-400">// Track page views automatically</span></div>
               </div>
               <div className="flex">
                 <div className="mr-4 text-neutral-600">7</div>
@@ -163,24 +163,24 @@ const OpenSource = () => {
               </div>
               <div className="flex">
                 <div className="mr-4 text-neutral-600">9</div>
-                <div><span className="text-purple-400">// Track custom events</span></div>
+                <div><span className="text-neutral-400">// Track custom events</span></div>
               </div>
               <div className="flex">
                 <div className="mr-4 text-neutral-600">10</div>
                 <div>
-                  <span className="text-[var(--white)]">analytics.track(</span><span className="text-orange-400">'button_click'</span><span className="text-[var(--white)]">, {'{'}</span>
+                  <span className="text-[var(--white)]">analytics.track(</span><span className="text-neutral-400">'button_click'</span><span className="text-[var(--white)]">, {'{'}</span>
                 </div>
               </div>
               <div className="flex">
                 <div className="mr-4 text-neutral-600">11</div>
                 <div>
-                  <span className="text-[var(--white)]">  buttonId: </span><span className="text-orange-400">'signup_button'</span><span className="text-[var(--white)]">,</span>
+                  <span className="text-[var(--white)]">  buttonId: </span><span className="text-neutral-400">'signup_button'</span><span className="text-[var(--white)]">,</span>
                 </div>
               </div>
               <div className="flex">
                 <div className="mr-4 text-neutral-600">12</div>
                 <div>
-                  <span className="text-[var(--white)]">  page: </span><span className="text-orange-400">'/home'</span>
+                  <span className="text-[var(--white)]">  page: </span><span className="text-neutral-400">'/home'</span>
                 </div>
               </div>
               <div className="flex">

src/components/analytics/Security.tsx

@@ -34,7 +34,7 @@ const Security = () => {
           className="text-center mb-16"
         >
           <div className="inline-flex items-center justify-center mb-4">
-            <ShieldCheck className="h-10 w-10 text-green-400" />
+            <ShieldCheck className="h-10 w-10 text-neutral-400" />
           </div>
           <h2 className="text-3xl md:text-5xl font-bold mb-6">Enterprise-Grade Security & Compliance</h2>
           <p className="text-xl text-neutral-300 max-w-3xl mx-auto">
@@ -52,8 +52,8 @@ const Security = () => {
           >
             <div className="bg-gradient-to-br from-gray-900 to-gray-900/50 rounded-xl border border-gray-800 p-6 h-full">
               <div className="flex justify-center mb-6">
-                <div className="p-3 bg-green-900/20 rounded-full border border-green-800/30">
-                  <Lock className="h-8 w-8 text-green-400" />
+                <div className="p-3 bg-neutral-800/20 rounded-full border border-neutral-800/30">
+                  <Lock className="h-8 w-8 text-neutral-400" />
                 </div>
               </div>
               
@@ -69,7 +69,7 @@ const Security = () => {
                     transition={{ duration: 0.3, delay: 0.1 * index }}
                     className="flex items-center"
                   >
-                    <CheckCircle className="h-5 w-5 text-green-400 mr-3 flex-shrink-0" />
+                    <CheckCircle className="h-5 w-5 text-neutral-400 mr-3 flex-shrink-0" />
                     <span className="text-neutral-300">{feature}</span>
                   </motion.li>
                 ))}
@@ -98,8 +98,8 @@ const Security = () => {
                     className="bg-gray-800/30 rounded-lg p-5 border border-gray-700"
                   >
                     <div className="flex items-center">
-                      <div className="mr-3 p-2 bg-green-900/30 rounded-full">
-                        <ShieldCheck className="h-6 w-6 text-green-400" />
+                      <div className="mr-3 p-2 bg-neutral-800/30 rounded-full">
+                        <ShieldCheck className="h-6 w-6 text-neutral-400" />
                       </div>
                       <h4 className="text-lg font-medium">{cert.name}</h4>
                     </div>
@@ -108,10 +108,10 @@ const Security = () => {
                 ))}
               </div>
               
-              <div className="mt-8 bg-blue-900/20 rounded-lg p-5 border border-blue-900/30">
+              <div className="mt-8 bg-neutral-800/20 rounded-lg p-5 border border-neutral-800/30">
                 <div className="flex">
-                  <div className="mr-4 p-2 bg-blue-900/30 rounded-full">
-                    <svg className="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <div className="mr-4 p-2 bg-neutral-800/30 rounded-full">
+                    <svg className="h-6 w-6 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
                   </div>
@@ -120,7 +120,7 @@ const Security = () => {
                     <p className="text-neutral-400">
                       We believe privacy is a fundamental right. Hanzo Analytics is designed with privacy-first principles and gives you full control over your data collection practices.
                     </p>
-                    <a href="#privacy-policy" className="inline-block mt-3 text-blue-400 hover:text-blue-300 transition-colors">
+                    <a href="#privacy-policy" className="inline-block mt-3 text-neutral-400 hover:text-neutral-300 transition-colors">
                       Read our privacy policy →
                     </a>
                   </div>

src/components/analytics/WebAnalytics.tsx

@@ -88,7 +88,7 @@ const WebAnalytics = () => {
 
   return (
     <section className="py-32 px-4 sm:px-6 lg:px-8 bg-[var(--black)] relative">
-      <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-purple-800 via-transparent to-transparent"></div>
+      <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-neutral-800 via-transparent to-transparent"></div>
       
       <div className="max-w-7xl mx-auto relative z-10">
         <motion.div
@@ -115,7 +115,7 @@ const WebAnalytics = () => {
                 transition={{ duration: 0.5, delay: index * 0.1 }}
                 className="flex"
               >
-                <div className="mr-4 mt-1 bg-purple-900/30 p-2 rounded-lg text-purple-400">
+                <div className="mr-4 mt-1 bg-neutral-800/30 p-2 rounded-lg text-neutral-400">
                   {feature.icon}
                 </div>
                 <div>
@@ -137,7 +137,7 @@ const WebAnalytics = () => {
             <div className="bg-gray-900/30 rounded-xl p-6 border border-gray-800">
               <div className="flex justify-between items-center mb-4">
                 <h3 className="text-lg font-medium">Live User Activity</h3>
-                <div className="bg-green-500 animate-pulse h-2 w-2 rounded-full"></div>
+                <div className="bg-neutral-500 animate-pulse h-2 w-2 rounded-full"></div>
               </div>
               
               <div className="h-80 w-full relative">
@@ -154,7 +154,7 @@ const WebAnalytics = () => {
                     {/* Chart lines */}
                     <motion.path
                       d="M0,80 C10,70 20,85 30,60 C40,40 50,55 60,30 C70,40 80,20 90,10 L100,20"
-                      stroke="#8B5CF6"
+                      stroke="#a3a3a3"
                       strokeWidth="2"
                       fill="none"
                       variants={lineVariants}
@@ -163,7 +163,7 @@ const WebAnalytics = () => {
                     />
                     <motion.path
                       d="M0,90 C15,80 25,75 35,70 C45,65 55,60 65,50 C75,70 85,60 95,40 L100,50"
-                      stroke="#33C3F0"
+                      stroke="#a3a3a3"
                       strokeWidth="2"
                       fill="none"
                       variants={lineVariants}
@@ -173,12 +173,12 @@ const WebAnalytics = () => {
                     
                     {/* Data points */}
                     {[
-                      { x: 30, y: 60, color: "#8B5CF6" },
-                      { x: 60, y: 30, color: "#8B5CF6" },
-                      { x: 90, y: 10, color: "#8B5CF6" },
-                      { x: 35, y: 70, color: "#33C3F0" },
-                      { x: 65, y: 50, color: "#33C3F0" },
-                      { x: 95, y: 40, color: "#33C3F0" }
+                      { x: 30, y: 60, color: "#a3a3a3" },
+                      { x: 60, y: 30, color: "#a3a3a3" },
+                      { x: 90, y: 10, color: "#a3a3a3" },
+                      { x: 35, y: 70, color: "#a3a3a3" },
+                      { x: 65, y: 50, color: "#a3a3a3" },
+                      { x: 95, y: 40, color: "#a3a3a3" }
                     ].map((point, i) => (
                       <motion.circle
                         key={i}
@@ -217,7 +217,7 @@ const WebAnalytics = () => {
                     <span>Users</span>
                     <span className="font-bold">876</span>
                   </div>
-                  <div className="text-green-400 text-right mt-1">+24.5%</div>
+                  <div className="text-neutral-400 text-right mt-1">+24.5%</div>
                 </motion.div>
               </div>
               

src/components/analytics/ai-powered/AIAnalysisDemo.tsx

@@ -16,7 +16,7 @@ const AIAnalysisDemo = () => {
       
       <div className="relative z-10">
         <div className="flex items-center mb-6">
-          <LineChart className="h-6 w-6 text-purple-400 mr-3" />
+          <LineChart className="h-6 w-6 text-neutral-400 mr-3" />
           <h3 className="text-2xl font-bold">AI Analysis in Action</h3>
         </div>
         
@@ -30,7 +30,7 @@ const AIAnalysisDemo = () => {
                   <motion.path
                     d="M0,80 C25,70 50,65 75,60 C100,55 125,50 150,55 C175,60 200,80 225,50 C250,20 275,35 300,30"
                     fill="none"
-                    stroke="#8B5CF6"
+                    stroke="#a3a3a3"
                     strokeWidth="2"
                     initial={{ pathLength: 0 }}
                     whileInView={{ pathLength: 1 }}
@@ -42,7 +42,7 @@ const AIAnalysisDemo = () => {
                   <motion.path
                     d="M200,80 C206,65 212,40 218,20 C224,30 230,45 236,50"
                     fill="none"
-                    stroke="#FF5733"
+                    stroke="#a3a3a3"
                     strokeWidth="3"
                     strokeDasharray="2,2"
                     initial={{ opacity: 0 }}
@@ -56,7 +56,7 @@ const AIAnalysisDemo = () => {
                     cx="218"
                     cy="20"
                     r="5"
-                    fill="#FF5733"
+                    fill="#a3a3a3"
                     initial={{ opacity: 0, scale: 0 }}
                     whileInView={{ opacity: 1, scale: 1 }}
                     viewport={{ once: true }}
@@ -66,7 +66,7 @@ const AIAnalysisDemo = () => {
                 
                 {/* Anomaly detection popup */}
                 <motion.div
-                  className="absolute top-4 right-8 bg-red-900/80 text-[var(--white)] text-xs rounded px-3 py-2 border border-red-700"
+                  className="absolute top-4 right-8 bg-neutral-800/80 text-[var(--white)] text-xs rounded px-3 py-2 border border-neutral-700"
                   initial={{ opacity: 0, y: -10 }}
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true }}
@@ -91,15 +91,15 @@ const AIAnalysisDemo = () => {
                 className="space-y-3"
               >
                 <div className="text-sm">
-                  <div className="font-medium text-red-400">Traffic Anomaly</div>
+                  <div className="font-medium text-neutral-400">Traffic Anomaly</div>
                   <div className="text-neutral-400">Unusual spike detected at 14:32 UTC</div>
                 </div>
                 <div className="text-sm">
-                  <div className="font-medium text-green-400">Conversion Opportunity</div>
+                  <div className="font-medium text-neutral-400">Conversion Opportunity</div>
                   <div className="text-neutral-400">Checkout abandonment 23% higher on mobile</div>
                 </div>
                 <div className="text-sm">
-                  <div className="font-medium text-blue-400">Performance Alert</div>
+                  <div className="font-medium text-neutral-400">Performance Alert</div>
                   <div className="text-neutral-400">API latency increased by 150ms</div>
                 </div>
               </motion.div>
@@ -110,13 +110,13 @@ const AIAnalysisDemo = () => {
               whileInView={{ opacity: 1 }}
               viewport={{ once: true }}
               transition={{ duration: 0.5, delay: 2.6 }}
-              className="bg-purple-900/20 rounded-lg p-5 border border-purple-900/30"
+              className="bg-neutral-800/20 rounded-lg p-5 border border-neutral-800/30"
             >
               <h4 className="text-lg font-medium mb-2">AI Recommendation</h4>
               <p className="text-sm text-neutral-300">
                 Based on the traffic pattern analysis, we recommend scaling your infrastructure in the US-West region for the next 3 hours.
               </p>
-              <button className="mt-3 text-sm bg-purple-700 hover:bg-purple-600 text-[var(--white)] px-3 py-1 rounded">
+              <button className="mt-3 text-sm bg-neutral-700 hover:bg-neutral-600 text-[var(--white)] px-3 py-1 rounded">
                 Apply Recommendation
               </button>
             </motion.div>

src/components/analytics/ai-powered/AIFeatureCard.tsx

@@ -24,7 +24,7 @@ const AIFeatureCard = ({ icon, title, description, delay, index }: AIFeatureCard
       initial="hidden"
       animate="hidden"
       transition={{ duration: 0.5, delay }}
-      className="bg-gradient-to-br from-gray-900/60 to-gray-900/40 rounded-xl p-8 border border-gray-800 hover:border-purple-900/50 transition-colors group"
+      className="bg-gradient-to-br from-gray-900/60 to-gray-900/40 rounded-xl p-8 border border-gray-800 hover:border-neutral-800/50 transition-colors group"
     >
       <div className="mb-5 transition-transform group-hover:scale-110 duration-300 transform-gpu">
         {icon}

src/components/analytics/ai-powered/AIFeatureList.tsx

@@ -10,19 +10,19 @@ const AIFeatureList = () => {
   
   const features = [
     {
-      icon: <Eye className="h-10 w-10 text-purple-400" />,
+      icon: <Eye className="h-10 w-10 text-neutral-400" />,
       title: "Real-time anomaly detection",
       description: "Automatically identify unusual patterns and potential issues before they impact your business.",
       delay: 0
     },
     {
-      icon: <AlertTriangle className="h-10 w-10 text-orange-400" />,
+      icon: <AlertTriangle className="h-10 w-10 text-neutral-400" />,
       title: "Predictive alerts and proactive monitoring",
       description: "Get alerted about potential problems before they occur with AI-powered predictive monitoring.",
       delay: 0.1
     },
     {
-      icon: <Zap className="h-10 w-10 text-blue-400" />,
+      icon: <Zap className="h-10 w-10 text-neutral-400" />,
       title: "Deep integration with Hanzo Cloud and Base",
       description: "Seamlessly connect your analytics with your entire infrastructure for comprehensive visibility.",
       delay: 0.2

src/components/analytics/ai-powered/index.tsx

@@ -7,7 +7,7 @@ import AIAnalysisDemo from "./AIAnalysisDemo";
 const AIPowered = () => {
   return (
     <section className="py-32 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-900/20 to-black relative overflow-hidden">
-      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-purple-900/10 via-transparent to-transparent"></div>
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-neutral-800/10 via-transparent to-transparent"></div>
       
       <div className="max-w-7xl mx-auto relative z-10">
         <AIPoweredHeader />

src/components/animations/AIFutureAnimation.tsx

@@ -14,7 +14,7 @@ const AIFutureAnimation: React.FC<AIFutureAnimationProps> = ({
   showButtons = true
 }) => {
   return (
-    <div className="w-full h-[500px] md:h-[600px] bg-[var(--black)] rounded-xl overflow-hidden shadow-2xl border border-purple-900/20">
+    <div className="w-full h-[500px] md:h-[600px] bg-[var(--black)] rounded-xl overflow-hidden shadow-2xl border border-neutral-800/20">
       <AITunnelAnimation 
         title={title}
         subtitle={subtitle}

src/components/animations/AITunnelContent.tsx

@@ -29,7 +29,7 @@ const AITunnelContent: React.FC<AITunnelContentProps> = ({
         
         {/* Glowing underline */}
         <motion.div 
-          className="h-[2px] bg-gradient-to-r from-purple-500/0 via-purple-500 to-purple-500/0 mx-auto"
+          className="h-[2px] bg-gradient-to-r from-neutral-500/0 via-neutral-500 to-neutral-500/0 mx-auto"
           style={{ width: '60%' }}
           animate={{
             opacity: [0.5, 1, 0.5],
@@ -62,7 +62,7 @@ const AITunnelContent: React.FC<AITunnelContentProps> = ({
           <Button 
             size="lg"
             radius="full"
-            className="text-lg px-8 bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-500 hover:to-purple-400 border-none"
+            className="text-lg px-8 bg-gradient-to-r from-neutral-600 to-neutral-500 hover:from-neutral-500 hover:to-neutral-400 border-none"
           >
             Start Building
           </Button>

src/components/animations/cloud-deployment/BackgroundGrid.tsx

@@ -36,7 +36,7 @@ const BackgroundGrid: React.FC<BackgroundGridProps> = ({ scanPoints }) => {
       {scanPoints.map((point, idx) => (
         <motion.div
           key={`point-${idx}`}
-          className="absolute h-1 w-1 rounded-full bg-blue-500/10" // Reduced opacity
+          className="absolute h-1 w-1 rounded-full bg-neutral-600/10" // Reduced opacity
           style={{ 
             left: `${point.x}%`, 
             top: `${point.y}%`,
@@ -61,7 +61,7 @@ const BackgroundGrid: React.FC<BackgroundGridProps> = ({ scanPoints }) => {
         <React.Fragment key={`connection-${idx}`}>
           {/* Static connection line - more subtle */}
           <div
-            className="absolute h-px bg-blue-400/5" // Reduced opacity
+            className="absolute h-px bg-neutral-400/5" // Reduced opacity
             style={{
               left: `${pair.from.x}%`,
               top: `${pair.from.y}%`,
@@ -73,7 +73,7 @@ const BackgroundGrid: React.FC<BackgroundGridProps> = ({ scanPoints }) => {
           
           {/* Animated traffic pulse - less frequent */}
           <motion.div
-            className="absolute h-1 w-1 rounded-full bg-blue-400/30" // Smaller and reduced opacity
+            className="absolute h-1 w-1 rounded-full bg-neutral-400/30" // Smaller and reduced opacity
             style={{
               left: `${pair.from.x}%`,
               top: `${pair.from.y}%`,

src/components/animations/cloud-deployment/CloudDeployment.tsx

@@ -24,7 +24,7 @@ const CloudDeployment: React.FC = () => {
   return (
     <div className="relative h-[460px] w-full overflow-hidden rounded-xl bg-[var(--black)]/90 border border-gray-800 shadow-lg">
       {/* Semi-transparent blue gradient overlay */}
-      <div className="absolute inset-0 bg-gradient-to-br from-blue-950/20 to-cyan-950/20 pointer-events-none"></div>
+      <div className="absolute inset-0 bg-gradient-to-br from-neutral-950/20 to-neutral-950/20 pointer-events-none"></div>
       
       {/* Zoom controls */}
       <ZoomControls />

src/components/animations/cloud-deployment/DeploymentNode.tsx

@@ -14,16 +14,16 @@ interface DeploymentNodeProps {
 const DeploymentNode: React.FC<DeploymentNodeProps> = ({ node, onClick }) => {
   const getNodeBackgroundClass = () => {
     switch(node.type) {
-      case 'app': return 'bg-purple-500/20 border border-purple-500/30';
-      case 'redis': return 'bg-red-500/20 border border-red-500/30';
-      case 'postgres': return 'bg-blue-500/20 border border-blue-500/30';
+      case 'app': return 'bg-neutral-600/20 border border-neutral-500/30';
+      case 'redis': return 'bg-neutral-600/20 border border-neutral-500/30';
+      case 'postgres': return 'bg-neutral-600/20 border border-neutral-500/30';
       case 'github': return 'bg-gray-500/20 border border-gray-500/30';
-      case 'volume': return 'bg-green-500/20 border border-green-500/30';
+      case 'volume': return 'bg-neutral-500/20 border border-neutral-500/30';
       case 'network': 
         return node.id === 'network-public' 
-          ? 'bg-yellow-500/20 border-2 border-yellow-500/50' // Highlighted yellow for public network
-          : 'bg-blue-500/20 border-2 border-yellow-400/40'; // Yellow outline for private network
-      default: return 'bg-purple-500/20 border border-purple-500/30';
+          ? 'bg-neutral-500/20 border-2 border-neutral-500/50' // Highlighted yellow for public network
+          : 'bg-neutral-600/20 border-2 border-neutral-400/40'; // Yellow outline for private network
+      default: return 'bg-neutral-600/20 border border-neutral-500/30';
     }
   };
 
@@ -52,18 +52,18 @@ const DeploymentNode: React.FC<DeploymentNodeProps> = ({ node, onClick }) => {
         {renderIcon(node.iconType, node.iconProps)}
         {node.status && (
           <div className="absolute -right-1 -bottom-1 rounded-full bg-gray-800 border border-gray-700 p-0.5">
-            {node.status === 'deployed' && <Check className="h-3 w-3 text-green-400" />}
+            {node.status === 'deployed' && <Check className="h-3 w-3 text-neutral-400" />}
             {node.status === 'pending' && (
               <motion.div 
                 animate={{ rotate: 360 }}
                 transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
               >
-                <svg className="h-3 w-3 text-blue-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <svg className="h-3 w-3 text-neutral-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 9.27455 20.9097 6.80375 19.1414 5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>
               </motion.div>
             )}
-            {node.status === 'error' && <X className="h-3 w-3 text-red-400" />}
+            {node.status === 'error' && <X className="h-3 w-3 text-neutral-400" />}
           </div>
         )}
       </div>

src/components/animations/cloud-deployment/NodeDetailsDialog.tsx

@@ -29,9 +29,9 @@ const NodeDetailsDialog: React.FC<NodeDetailsDialogProps> = ({ isOpen, onOpenCha
           <div className="grid grid-cols-2 gap-y-2 text-sm">
             <div className="text-neutral-400">Status</div>
             <div className="text-neutral-200">
-              {selectedNode.status === 'deployed' && <span className="text-green-400">Deployed</span>}
-              {selectedNode.status === 'pending' && <span className="text-blue-400">Pending</span>}
-              {selectedNode.status === 'error' && <span className="text-red-400">Failed</span>}
+              {selectedNode.status === 'deployed' && <span className="text-neutral-400">Deployed</span>}
+              {selectedNode.status === 'pending' && <span className="text-neutral-400">Pending</span>}
+              {selectedNode.status === 'error' && <span className="text-neutral-400">Failed</span>}
             </div>
             
             <div className="text-neutral-400">Type</div>
@@ -50,7 +50,7 @@ const NodeDetailsDialog: React.FC<NodeDetailsDialogProps> = ({ isOpen, onOpenCha
             Close
           </button>
           <button 
-            className="px-3 py-1.5 rounded bg-purple-600 hover:bg-purple-700 text-[var(--white)] text-sm"
+            className="px-3 py-1.5 rounded bg-neutral-600 hover:bg-neutral-700 text-[var(--white)] text-sm"
             onClick={() => onOpenChange(false)}
           >
             View Details

src/components/animations/cloud-deployment/Notifications.tsx

@@ -21,15 +21,15 @@ const Notifications: React.FC<NotificationsProps> = ({ notifications, onDismiss
             exit={{ opacity: 0, x: 20, scale: 0.95 }}
             className={`rounded-md p-3 shadow-lg ${
               notification.type === 'success' ? 'bg-gray-900/90 border border-gray-700' :
-              notification.type === 'error' ? 'bg-red-900/80 border border-red-700' :
-              'bg-blue-900/80 border border-blue-700'
+              notification.type === 'error' ? 'bg-neutral-800/80 border border-neutral-700' :
+              'bg-neutral-800/80 border border-neutral-700'
             }`}
           >
             <div className="flex items-start">
               <div className="flex-shrink-0 mt-0.5">
-                {notification.type === 'success' && <Check className="h-4 w-4 text-green-400" />}
-                {notification.type === 'error' && <X className="h-4 w-4 text-red-400" />}
-                {notification.type === 'info' && <Cloud className="h-4 w-4 text-blue-400" />}
+                {notification.type === 'success' && <Check className="h-4 w-4 text-neutral-400" />}
+                {notification.type === 'error' && <X className="h-4 w-4 text-neutral-400" />}
+                {notification.type === 'info' && <Cloud className="h-4 w-4 text-neutral-400" />}
               </div>
               <div className="ml-2">
                 <p className="text-sm font-medium text-neutral-100">{notification.title}</p>

src/components/animations/cloud-deployment/data/deploymentSequence.ts

@@ -8,7 +8,7 @@ export const initialNodes: NodeType[] = [
     type: "app",
     position: { x: 50, y: 50 },
     iconType: "cloud",
-    iconProps: { className: "h-7 w-7 text-purple-400" },
+    iconProps: { className: "h-7 w-7 text-neutral-400" },
     label: "Hanzo Cloud",
     active: true,
     status: "deployed",

src/components/animations/cloud-deployment/data/sequenceActions.ts

@@ -70,7 +70,7 @@ export const createPrivateNetwork = (
       type: "network",
       position: { x: 50, y: 30 },
       iconType: "network",
-      iconProps: { className: "h-5 w-5 text-blue-300" },
+      iconProps: { className: "h-5 w-5 text-neutral-300" },
       label: "private-network",
       active: true,
       status: "deployed",
@@ -108,7 +108,7 @@ export const createRedisNode = (
       type: "redis",
       position: { x: 75, y: 25 },
       iconType: "database",
-      iconProps: { className: "h-5 w-5 text-red-400" },
+      iconProps: { className: "h-5 w-5 text-neutral-400" },
       label: "redis",
       active: true,
       status: "pending",
@@ -162,7 +162,7 @@ export const createRedisVolume = (
       type: "volume",
       position: { x: 75, y: 26 },
       iconType: "hardDrive",
-      iconProps: { className: "h-5 w-5 text-green-300" },
+      iconProps: { className: "h-5 w-5 text-neutral-300" },
       label: "redis-data",
       active: true,
       status: "pending",
@@ -218,7 +218,7 @@ export const createPostgresNode = (
       type: "postgres",
       position: { x: 30, y: 70 },
       iconType: "database",
-      iconProps: { className: "h-5 w-5 text-blue-300" },
+      iconProps: { className: "h-5 w-5 text-neutral-300" },
       label: "postgres",
       active: true,
       status: "pending",
@@ -272,7 +272,7 @@ export const createPostgresVolume = (
       type: "volume",
       position: { x: 30, y: 71 },
       iconType: "hardDrive",
-      iconProps: { className: "h-5 w-5 text-green-300" },
+      iconProps: { className: "h-5 w-5 text-neutral-300" },
       label: "pg-data",
       active: true,
       status: "pending",
@@ -327,7 +327,7 @@ export const createPublicNetwork = (
       type: "network",
       position: { x: 18, y: 40 },
       iconType: "link2",
-      iconProps: { className: "h-5 w-5 text-yellow-300" },
+      iconProps: { className: "h-5 w-5 text-neutral-300" },
       label: "public-network",
       active: true,
       status: "pending",

src/components/auth/Login.tsx

@@ -84,7 +84,7 @@ const Login = () => {
             <div className="space-y-2">
               <div className="flex justify-between items-center">
                 <Label htmlFor="password">Password</Label>
-                <a href="/forgot-password" className="text-sm text-purple-400 hover:underline">
+                <a href="/forgot-password" className="text-sm text-neutral-400 hover:underline">
                   Forgot password?
                 </a>
               </div>
@@ -104,7 +104,7 @@ const Login = () => {
             
             <Button 
               type="submit" 
-              className="w-full mt-6 bg-purple-600 hover:bg-purple-700 text-[var(--white)]"
+              className="w-full mt-6 bg-neutral-600 hover:bg-neutral-700 text-[var(--white)]"
             >
               Sign In
               <ArrowRight className="ml-2 h-4 w-4" />
@@ -114,7 +114,7 @@ const Login = () => {
         
         <div className="text-center text-sm text-neutral-400">
           Don't have an account?{" "}
-          <a href="/signup" className="text-purple-400 hover:underline">
+          <a href="/signup" className="text-neutral-400 hover:underline">
             Sign up
           </a>
         </div>

src/components/auth/SignUp.tsx

@@ -148,7 +148,7 @@ const SignUp = () => {
                     onCheckedChange={handleCheckboxChange}
                   />
                   <Label htmlFor="terms" className="text-sm">
-                    I agree to the <a href="/terms" className="text-purple-400 hover:underline">Terms of Service</a> and <a href="/privacy" className="text-purple-400 hover:underline">Privacy Policy</a>
+                    I agree to the <a href="/terms" className="text-neutral-400 hover:underline">Terms of Service</a> and <a href="/privacy" className="text-neutral-400 hover:underline">Privacy Policy</a>
                   </Label>
                 </div>
               </>
@@ -199,7 +199,7 @@ const SignUp = () => {
             
             <Button 
               type="submit" 
-              className="w-full mt-6 bg-purple-600 hover:bg-purple-700 text-[var(--white)]"
+              className="w-full mt-6 bg-neutral-600 hover:bg-neutral-700 text-[var(--white)]"
             >
               {step === 1 ? 'Continue' : 'Create Account'}
               <ArrowRight className="ml-2 h-4 w-4" />
@@ -209,7 +209,7 @@ const SignUp = () => {
         
         <div className="text-center text-sm text-neutral-400">
           Already have an account?{" "}
-          <a href="/login" className="text-purple-400 hover:underline">
+          <a href="/login" className="text-neutral-400 hover:underline">
             Sign in
           </a>
         </div>

src/components/balancer/ArchitectureOverview.tsx

@@ -47,14 +47,14 @@ const ArchitectureOverview = () => {
               for automatic certificate generation. Hanzo Balancer's extensive features and capabilities make it 
               the comprehensive gateway to all your applications.
             </p>
-            <div className="bg-gradient-to-r from-purple-900/30 to-indigo-900/30 border border-purple-500/20 rounded-lg p-6">
+            <div className="bg-gradient-to-r from-neutral-800/30 to-neutral-900/30 border border-neutral-500/20 rounded-lg p-6">
               <h3 className="text-xl font-semibold mb-3">Maximize Uptime, Solve Issues Quickly</h3>
               <p className="text-neutral-300 mb-4">
                 Need support with Hanzo Balancer? Our team of experts is here to help 24/7/365!
               </p>
               <a 
                 href="#support" 
-                className="inline-block px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-md font-medium transition-colors"
+                className="inline-block px-4 py-2 bg-neutral-600 hover:bg-neutral-700 rounded-md font-medium transition-colors"
               >
                 REQUEST COMMERCIAL SUPPORT
               </a>

src/components/balancer/CallToAction.tsx

@@ -29,7 +29,7 @@ const CallToAction = () => {
             <Button 
               size="lg" 
               variant="outline"
-              className="w-full gap-2 border-purple-600 text-[var(--white)] hover:bg-purple-800/20"
+              className="w-full gap-2 border-neutral-600 text-[var(--white)] hover:bg-neutral-800/20"
             >
               <Github className="h-5 w-5" />
               View on GitHub
@@ -46,7 +46,7 @@ const CallToAction = () => {
             <Button 
               size="lg" 
               variant="outline"
-              className="w-full gap-2 border-purple-600 text-[var(--white)] hover:bg-purple-800/20"
+              className="w-full gap-2 border-neutral-600 text-[var(--white)] hover:bg-neutral-800/20"
             >
               <FileText className="h-5 w-5" />
               Learn more in Docs
@@ -63,7 +63,7 @@ const CallToAction = () => {
             <Button 
               size="lg" 
               variant="outline"
-              className="w-full gap-2 border-purple-600 text-[var(--white)] hover:bg-purple-800/20"
+              className="w-full gap-2 border-neutral-600 text-[var(--white)] hover:bg-neutral-800/20"
             >
               <Server className="h-5 w-5" />
               Get Commercial Support
@@ -84,15 +84,15 @@ const CallToAction = () => {
               <input 
                 type="email" 
                 placeholder="Enter your email" 
-                className="w-full px-4 py-2 bg-gray-800 rounded-md border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                className="w-full px-4 py-2 bg-gray-800 rounded-md border border-gray-700 focus:outline-none focus:ring-2 focus:ring-neutral-500"
               />
-              <Button className="bg-purple-600 hover:bg-purple-700">
+              <Button className="bg-neutral-600 hover:bg-neutral-700">
                 Subscribe
               </Button>
             </div>
             <div className="mt-2 text-left">
               <label className="inline-flex items-center">
-                <input type="checkbox" className="rounded bg-gray-800 border-gray-700 text-purple-600" />
+                <input type="checkbox" className="rounded bg-gray-800 border-gray-700 text-neutral-600" />
                 <span className="ml-2 text-sm text-neutral-400">
                   I agree to receive communications from Hanzo
                 </span>

src/components/balancer/CoreCapabilities.tsx

@@ -70,8 +70,8 @@ const CoreCapabilities = () => {
               transition={{ duration: 0.5, delay: index * 0.1 }}
               className="bg-gray-800/30 p-6 rounded-lg border border-gray-700/50"
             >
-              <div className="bg-purple-900/20 p-3 rounded-full w-fit mb-4">
-                <capability.icon className="h-6 w-6 text-purple-400" />
+              <div className="bg-neutral-800/20 p-3 rounded-full w-fit mb-4">
+                <capability.icon className="h-6 w-6 text-neutral-400" />
               </div>
               <h3 className="text-xl font-semibold mb-3">{capability.title}</h3>
               <p className="text-neutral-300">{capability.description}</p>

src/components/balancer/EnterpriseSolutions.tsx

@@ -30,8 +30,8 @@ const EnterpriseSolutions = () => {
             className="bg-gradient-to-br from-gray-800/40 to-gray-900/40 p-8 rounded-xl border border-gray-700/50"
           >
             <div className="flex items-start mb-6">
-              <div className="bg-purple-900/20 p-3 rounded-full mr-4">
-                <Shield className="h-6 w-6 text-purple-400" />
+              <div className="bg-neutral-800/20 p-3 rounded-full mr-4">
+                <Shield className="h-6 w-6 text-neutral-400" />
               </div>
               <div>
                 <h3 className="text-2xl font-semibold mb-2">Enhanced Security Suite</h3>
@@ -41,8 +41,8 @@ const EnterpriseSolutions = () => {
               </div>
             </div>
             <div className="flex items-start">
-              <div className="bg-purple-900/20 p-3 rounded-full mr-4">
-                <Building2 className="h-6 w-6 text-purple-400" />
+              <div className="bg-neutral-800/20 p-3 rounded-full mr-4">
+                <Building2 className="h-6 w-6 text-neutral-400" />
               </div>
               <div>
                 <h3 className="text-2xl font-semibold mb-2">High Availability Clustering</h3>
@@ -61,8 +61,8 @@ const EnterpriseSolutions = () => {
             className="bg-gradient-to-br from-gray-800/40 to-gray-900/40 p-8 rounded-xl border border-gray-700/50"
           >
             <div className="flex items-start mb-6">
-              <div className="bg-purple-900/20 p-3 rounded-full mr-4">
-                <FileCode className="h-6 w-6 text-purple-400" />
+              <div className="bg-neutral-800/20 p-3 rounded-full mr-4">
+                <FileCode className="h-6 w-6 text-neutral-400" />
               </div>
               <div>
                 <h3 className="text-2xl font-semibold mb-2">Advanced Traffic Policies</h3>
@@ -72,8 +72,8 @@ const EnterpriseSolutions = () => {
               </div>
             </div>
             <div className="flex items-start">
-              <div className="bg-purple-900/20 p-3 rounded-full mr-4">
-                <Users className="h-6 w-6 text-purple-400" />
+              <div className="bg-neutral-800/20 p-3 rounded-full mr-4">
+                <Users className="h-6 w-6 text-neutral-400" />
               </div>
               <div>
                 <h3 className="text-2xl font-semibold mb-2">Enterprise Support</h3>
@@ -94,7 +94,7 @@ const EnterpriseSolutions = () => {
         >
           <Button 
             size="lg" 
-            className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 px-8"
+            className="bg-gradient-to-r from-neutral-600 to-neutral-600 hover:from-neutral-700 hover:to-neutral-700 px-8"
           >
             Request Enterprise Demo
           </Button>

src/components/balancer/FeaturesOverview.tsx

@@ -60,7 +60,7 @@ const FeaturesOverview = () => {
             <p className="text-neutral-300">
               Watch our short demo video to see why our cloud native, GitOps-driven API Gateway is Developers' #1 choice.
             </p>
-            <a href="#watch-demo" className="inline-flex mt-4 text-purple-400 hover:text-purple-300">
+            <a href="#watch-demo" className="inline-flex mt-4 text-neutral-400 hover:text-neutral-300">
               Watch Demo Video
             </a>
           </motion.div>

src/components/balancer/HeroSection.tsx

@@ -8,9 +8,9 @@ const HeroSection = () => {
   return (
     <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
       {/* Background elements */}
-      <div className="absolute inset-0 bg-gradient-to-b from-purple-900/10 to-blue-900/10 opacity-30"></div>
-      <div className="absolute -top-40 -right-40 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
-      <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
+      <div className="absolute inset-0 bg-gradient-to-b from-neutral-800/10 to-neutral-800/10 opacity-30"></div>
+      <div className="absolute -top-40 -right-40 w-80 h-80 bg-neutral-600/10 rounded-full blur-3xl"></div>
+      <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-neutral-600/10 rounded-full blur-3xl"></div>
       
       <div className="max-w-7xl mx-auto relative z-10">
         <div className="text-center mb-12">
@@ -30,8 +30,8 @@ const HeroSection = () => {
           </div>
 
           <div className="mb-4">
-            <span className="text-purple-400 font-medium leading-relaxed">Hanzo Balancer v3.3 Is Now Available! 
-              <a href="#learn-more" className="ml-2 text-purple-300 underline">Learn More</a>
+            <span className="text-neutral-400 font-medium leading-relaxed">Hanzo Balancer v3.3 Is Now Available! 
+              <a href="#learn-more" className="ml-2 text-neutral-300 underline">Learn More</a>
             </span>
           </div>
           
@@ -42,7 +42,7 @@ const HeroSection = () => {
             className="text-4xl md:text-6xl font-bold mb-6 leading-tight"
           >
             The Cloud Native<br />
-            <span className="text-purple-400">Application Proxy</span>
+            <span className="text-neutral-400">Application Proxy</span>
           </motion.h1>
           
           <motion.p
@@ -62,7 +62,7 @@ const HeroSection = () => {
           >
             <Button 
               size="lg"
-              className="bg-purple-600 hover:bg-purple-700 text-[var(--white)] rounded-full py-6"
+              className="bg-neutral-600 hover:bg-neutral-700 text-[var(--white)] rounded-full py-6"
             >
               <span className="py-1 leading-relaxed">GET STARTED</span>
             </Button>

src/components/balancer/PlatformVision.tsx

@@ -6,17 +6,17 @@ import { Scale, Network, Shield } from "lucide-react";
 const PlatformVision = () => {
   const visionPoints = [
     {
-      icon: <Scale className="h-10 w-10 text-purple-400" />,
+      icon: <Scale className="h-10 w-10 text-neutral-400" />,
       title: "Intelligent Load Distribution",
       description: "Hanzo Balancer dynamically routes traffic based on real-time service health, load, and AI-driven insights to ensure optimal performance and resource utilization."
     },
     {
-      icon: <Network className="h-10 w-10 text-purple-400" />,
+      icon: <Network className="h-10 w-10 text-neutral-400" />,
       title: "Global Edge Network",
       description: "Deploy your services globally with our planetary-scale edge network, providing ultra-low latency and instant scaling for AI workloads anywhere in the world."
     },
     {
-      icon: <Shield className="h-10 w-10 text-purple-400" />,
+      icon: <Shield className="h-10 w-10 text-neutral-400" />,
       title: "Always-On Security",
       description: "Built-in Web Application Firewall (WAF), DDoS protection, and AI-powered threat detection ensure your services are secured against evolving cyber threats."
     }

src/components/balancer/Testimonials.tsx

@@ -41,11 +41,11 @@ const StarRating = ({ rating }) => {
   const stars = [];
 
   for (let i = 0; i < fullStars; i++) {
-    stars.push(<span key={`full-${i}`} className="text-yellow-400">★</span>);
+    stars.push(<span key={`full-${i}`} className="text-neutral-400">★</span>);
   }
 
   if (halfStar) {
-    stars.push(<span key="half" className="text-yellow-400">★</span>);
+    stars.push(<span key="half" className="text-neutral-400">★</span>);
   }
 
   const emptyStars = 5 - stars.length;
@@ -59,8 +59,8 @@ const StarRating = ({ rating }) => {
 const Testimonials = () => {
   return (
     <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900/30 relative overflow-hidden">
-      <div className="absolute -top-40 -right-40 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
-      <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
+      <div className="absolute -top-40 -right-40 w-80 h-80 bg-neutral-600/10 rounded-full blur-3xl"></div>
+      <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-neutral-600/10 rounded-full blur-3xl"></div>
       
       <div className="max-w-6xl mx-auto relative z-10">
         <motion.div

src/components/balancer/UseCases.tsx

@@ -43,12 +43,12 @@ const UseCaseCard = ({ useCase }) => {
       transition={{ duration: 0.5 }}
       className="bg-gray-800/30 border border-gray-700 rounded-lg p-6"
     >
-      <div className="bg-purple-800/30 w-12 h-12 rounded-full flex items-center justify-center mb-4">
-        <useCase.icon className="h-6 w-6 text-purple-400" />
+      <div className="bg-neutral-800/30 w-12 h-12 rounded-full flex items-center justify-center mb-4">
+        <useCase.icon className="h-6 w-6 text-neutral-400" />
       </div>
       <h3 className="text-xl font-semibold mb-3">{useCase.title}</h3>
       <p className="text-neutral-300 mb-4">{useCase.description}</p>
-      <a href={useCase.learnMoreLink} className="text-purple-400 hover:text-purple-300">
+      <a href={useCase.learnMoreLink} className="text-neutral-400 hover:text-neutral-300">
         Learn more
       </a>
     </motion.div>

src/components/base/CallToAction.tsx

@@ -6,7 +6,7 @@ import { ArrowRight } from "lucide-react";
 
 const CallToAction = () => {
   return (
-    <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-blue-950/30">
+    <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-neutral-950/30">
       <div className="max-w-5xl mx-auto text-center">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -23,7 +23,7 @@ const CallToAction = () => {
           </p>
           
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Button size="lg" radius="full" className="text-lg px-8 bg-blue-600 hover:bg-blue-700 text-[var(--white)]">
+            <Button size="lg" radius="full" className="text-lg px-8 bg-neutral-600 hover:bg-neutral-700 text-[var(--white)]">
               <span className="py-1 leading-relaxed">Start Building</span>
               <ArrowRight className="ml-2 h-5 w-5" />
             </Button>

src/components/base/Compliance.tsx

@@ -19,17 +19,17 @@ const Compliance = () => {
           <div className="flex flex-col md:flex-row items-center justify-between">
             <div className="mb-8 md:mb-0">
               <div className="flex items-center">
-                <Shield className="h-6 w-6 text-blue-400 mr-3" />
+                <Shield className="h-6 w-6 text-neutral-400 mr-3" />
                 <h2 className="text-2xl font-semibold text-[var(--white)]">Secure & Compliant</h2>
               </div>
               <div className="mt-4 flex flex-wrap gap-4">
-                <div className="flex items-center bg-blue-900/20 border border-blue-800/50 rounded-md px-3 py-1">
-                  <Lock className="h-4 w-4 text-blue-400 mr-2" />
-                  <span className="text-blue-300 text-sm">SOC2 Type 2 Certified</span>
+                <div className="flex items-center bg-neutral-800/20 border border-neutral-800/50 rounded-md px-3 py-1">
+                  <Lock className="h-4 w-4 text-neutral-400 mr-2" />
+                  <span className="text-neutral-300 text-sm">SOC2 Type 2 Certified</span>
                 </div>
-                <div className="flex items-center bg-blue-900/20 border border-blue-800/50 rounded-md px-3 py-1">
-                  <Lock className="h-4 w-4 text-blue-400 mr-2" />
-                  <span className="text-blue-300 text-sm">HIPAA Compliant</span>
+                <div className="flex items-center bg-neutral-800/20 border border-neutral-800/50 rounded-md px-3 py-1">
+                  <Lock className="h-4 w-4 text-neutral-400 mr-2" />
+                  <span className="text-neutral-300 text-sm">HIPAA Compliant</span>
                 </div>
               </div>
             </div>
@@ -50,35 +50,35 @@ const Compliance = () => {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5, delay: 0.2 }}
-            className="bg-gradient-to-r from-blue-900/20 to-purple-900/20 rounded-xl p-6 border border-blue-800/30"
+            className="bg-gradient-to-r from-neutral-800/20 to-neutral-800/20 rounded-xl p-6 border border-neutral-800/30"
           >
             <div className="flex items-center mb-4">
-              <Server className="h-6 w-6 text-purple-400 mr-3" />
+              <Server className="h-6 w-6 text-neutral-400 mr-3" />
               <h3 className="text-xl font-semibold text-[var(--white)]">Global Data Regions</h3>
             </div>
             
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
-              <div className="bg-blue-900/20 border border-blue-800/50 rounded-lg p-4">
-                <h4 className="font-medium text-blue-300 mb-2">United States (US)</h4>
+              <div className="bg-neutral-800/20 border border-neutral-800/50 rounded-lg p-4">
+                <h4 className="font-medium text-neutral-300 mb-2">United States (US)</h4>
                 <p className="text-neutral-300 text-sm mb-1">MCI - Kansas City</p>
                 <p className="text-neutral-400 text-xs">Hanzo Cloud region: us-central-1</p>
               </div>
               
-              <div className="bg-blue-900/20 border border-blue-800/50 rounded-lg p-4">
-                <h4 className="font-medium text-blue-300 mb-2">Canada (CA)</h4>
+              <div className="bg-neutral-800/20 border border-neutral-800/50 rounded-lg p-4">
+                <h4 className="font-medium text-neutral-300 mb-2">Canada (CA)</h4>
                 <p className="text-neutral-300 text-sm mb-1">YVR - Vancouver</p>
                 <p className="text-neutral-400 text-xs">Hanzo Cloud region: ca-west-1</p>
               </div>
               
-              <div className="bg-blue-900/20 border border-blue-800/50 rounded-lg p-4">
-                <h4 className="font-medium text-blue-300 mb-2">European Union (EU)</h4>
+              <div className="bg-neutral-800/20 border border-neutral-800/50 rounded-lg p-4">
+                <h4 className="font-medium text-neutral-300 mb-2">European Union (EU)</h4>
                 <p className="text-neutral-300 text-sm mb-1">BCN - Barcelona</p>
                 <p className="text-neutral-400 text-xs">Hanzo Cloud region: eu-west-1</p>
               </div>
             </div>
             
             <div className="mt-6 text-center">
-              <Button variant="outline" className="bg-blue-900/30 border-blue-700/50 hover:bg-blue-800/50 text-[var(--white)]">
+              <Button variant="outline" className="bg-neutral-800/30 border-neutral-700/50 hover:bg-neutral-800/50 text-[var(--white)]">
                 <Link to="/security">Learn More About Our Security</Link>
               </Button>
             </div>

src/components/base/DeveloperExperience.tsx

@@ -48,7 +48,7 @@ const DeveloperExperience = () => {
               {features.map((feature, index) => (
                 <div key={index} className="flex">
                   <div className="flex-shrink-0 mt-1">
-                    <div className="flex items-center justify-center h-10 w-10 rounded-md bg-blue-900/30 text-blue-400">
+                    <div className="flex items-center justify-center h-10 w-10 rounded-md bg-neutral-800/30 text-neutral-400">
                       <feature.icon className="h-6 w-6" />
                     </div>
                   </div>
@@ -71,21 +71,21 @@ const DeveloperExperience = () => {
             <div className="bg-gray-900/30 rounded-xl border border-gray-800 p-1 shadow-xl overflow-hidden">
               <div className="flex items-center bg-gray-900 rounded-t-lg px-4 py-2">
                 <div className="flex space-x-2">
-                  <div className="w-3 h-3 rounded-full bg-red-500"></div>
-                  <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
-                  <div className="w-3 h-3 rounded-full bg-green-500"></div>
+                  <div className="w-3 h-3 rounded-full bg-neutral-600"></div>
+                  <div className="w-3 h-3 rounded-full bg-neutral-500"></div>
+                  <div className="w-3 h-3 rounded-full bg-neutral-500"></div>
                 </div>
                 <div className="mx-auto text-neutral-400 text-sm">Terminal</div>
               </div>
               <div className="bg-gray-950 p-4 rounded-b-lg overflow-hidden">
                 <div className="font-mono text-sm">
                   <p className="text-neutral-400 mb-2">$ npx create-hanzo-app my-project</p>
-                  <p className="text-green-400 mb-2">Initializing Hanzo Base project...</p>
+                  <p className="text-neutral-400 mb-2">Initializing Hanzo Base project...</p>
                   <p className="text-neutral-400 mb-2">$ cd my-project && npm run dev</p>
-                  <p className="text-green-400 mb-2">✓ Hanzo Base server started on http://localhost:3000</p>
-                  <p className="text-green-400 mb-2">✓ Admin UI available at http://localhost:3000/admin</p>
+                  <p className="text-neutral-400 mb-2">✓ Hanzo Base server started on http://localhost:3000</p>
+                  <p className="text-neutral-400 mb-2">✓ Admin UI available at http://localhost:3000/admin</p>
                   <p className="text-neutral-400 mb-2">$ hanzo deploy</p>
-                  <p className="text-green-400">✓ Project deployed to https://my-project.hanzo.app</p>
+                  <p className="text-neutral-400">✓ Project deployed to https://my-project.hanzo.app</p>
                 </div>
               </div>
             </div>

src/components/base/FeatureCard.tsx

@@ -22,39 +22,39 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
 }) => {
   const colorClasses: Record<string, { bg: string, text: string, border: string }> = {
     blue: { 
-      bg: "bg-blue-900/20", 
-      text: "text-blue-400", 
-      border: "border-blue-800/50" 
+      bg: "bg-neutral-800/20", 
+      text: "text-neutral-400", 
+      border: "border-neutral-800/50" 
     },
     purple: { 
-      bg: "bg-purple-900/20", 
-      text: "text-purple-400", 
-      border: "border-purple-800/50" 
+      bg: "bg-neutral-800/20", 
+      text: "text-neutral-400", 
+      border: "border-neutral-800/50" 
     },
     green: { 
-      bg: "bg-green-900/20", 
-      text: "text-green-400", 
-      border: "border-green-800/50" 
+      bg: "bg-neutral-800/20", 
+      text: "text-neutral-400", 
+      border: "border-neutral-800/50" 
     },
     amber: { 
-      bg: "bg-amber-900/20", 
-      text: "text-amber-400", 
-      border: "border-amber-800/50" 
+      bg: "bg-neutral-800/20", 
+      text: "text-neutral-400", 
+      border: "border-neutral-800/50" 
     },
     indigo: { 
-      bg: "bg-indigo-900/20", 
-      text: "text-indigo-400", 
-      border: "border-indigo-800/50" 
+      bg: "bg-neutral-800/20", 
+      text: "text-neutral-400", 
+      border: "border-neutral-800/50" 
     },
     cyan: { 
-      bg: "bg-cyan-900/20", 
-      text: "text-cyan-400", 
-      border: "border-cyan-800/50" 
+      bg: "bg-neutral-800/20", 
+      text: "text-neutral-400", 
+      border: "border-neutral-800/50" 
     },
     rose: { 
-      bg: "bg-rose-900/20", 
-      text: "text-rose-400", 
-      border: "border-rose-800/50" 
+      bg: "bg-neutral-900/20", 
+      text: "text-neutral-400", 
+      border: "border-neutral-800/50" 
     },
   };
 

src/components/base/HeroSection.tsx

@@ -14,7 +14,7 @@ import {
   ExternalLink,
 } from "lucide-react";
 
-const BRAND_COLOR = "#fd4444";
+const BRAND_COLOR = "#ffffff";
 
 const FEATURES = [
   { id: "database", label: "Database", icon: Database },
@@ -99,9 +99,9 @@ channel.track({ user: 'user-123', online: true })`,
     <div className="rounded-xl border border-neutral-700 bg-neutral-900/95 backdrop-blur-sm overflow-hidden shadow-2xl">
       <div className="flex items-center gap-2 px-4 py-3 border-b border-neutral-800 bg-neutral-950">
         <div className="flex gap-1.5">
-          <div className="w-3 h-3 rounded-full bg-red-500/80" />
-          <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
-          <div className="w-3 h-3 rounded-full bg-green-500/80" />
+          <div className="w-3 h-3 rounded-full bg-neutral-600/80" />
+          <div className="w-3 h-3 rounded-full bg-neutral-500/80" />
+          <div className="w-3 h-3 rounded-full bg-neutral-500/80" />
         </div>
         <AnimatePresence mode="wait">
           <motion.span
@@ -200,7 +200,7 @@ const HeroSection = () => {
               <Link
                 to="/signup"
                 className="inline-flex items-center px-6 py-3 rounded-full font-medium transition-all hover:opacity-90 text-sm"
-                style={{ backgroundColor: BRAND_COLOR, color: "#ffffff" }}
+                style={{ backgroundColor: BRAND_COLOR, color: "#000000" }}
               >
                 Start building
                 <ArrowRight className="ml-2 h-4 w-4" />
@@ -228,7 +228,7 @@ const HeroSection = () => {
                   onClick={handleCopy}
                   className="text-neutral-500 hover:text-white transition-colors"
                 >
-                  {copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
+                  {copied ? <Check className="h-3.5 w-3.5 text-neutral-400" /> : <Copy className="h-3.5 w-3.5" />}
                 </button>
               </div>
             </motion.div>
@@ -249,7 +249,7 @@ const HeroSection = () => {
                     onClick={() => setActiveTab(feature.id)}
                     className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all ${
                       isActive
-                        ? "bg-[#fd4444] text-white"
+                        ? "bg-white text-black"
                         : "bg-neutral-900 border border-neutral-800 text-neutral-400 hover:text-white hover:border-neutral-700"
                     }`}
                   >

src/components/base/Infrastructure.tsx

@@ -28,7 +28,7 @@ const Infrastructure = () => {
             transition={{ duration: 0.5, delay: 0.1 }}
             className="bg-gray-800/30 border border-gray-700/50 rounded-lg p-6 text-center"
           >
-            <div className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-blue-900/30 text-blue-400 mb-5 mx-auto">
+            <div className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-neutral-800/30 text-neutral-400 mb-5 mx-auto">
               <Globe className="h-6 w-6" />
             </div>
             <h3 className="text-xl font-semibold text-[var(--white)] mb-3">Global Distribution</h3>
@@ -44,7 +44,7 @@ const Infrastructure = () => {
             transition={{ duration: 0.5, delay: 0.2 }}
             className="bg-gray-800/30 border border-gray-700/50 rounded-lg p-6 text-center"
           >
-            <div className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-blue-900/30 text-blue-400 mb-5 mx-auto">
+            <div className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-neutral-800/30 text-neutral-400 mb-5 mx-auto">
               <Zap className="h-6 w-6" />
             </div>
             <h3 className="text-xl font-semibold text-[var(--white)] mb-3">Automatic Scaling</h3>
@@ -60,7 +60,7 @@ const Infrastructure = () => {
             transition={{ duration: 0.5, delay: 0.3 }}
             className="bg-gray-800/30 border border-gray-700/50 rounded-lg p-6 text-center"
           >
-            <div className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-blue-900/30 text-blue-400 mb-5 mx-auto">
+            <div className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-neutral-800/30 text-neutral-400 mb-5 mx-auto">
               <Shield className="h-6 w-6" />
             </div>
             <h3 className="text-xl font-semibold text-[var(--white)] mb-3">High Redundancy</h3>
@@ -77,12 +77,12 @@ const Infrastructure = () => {
           transition={{ duration: 0.5, delay: 0.4 }}
           className="mt-16 relative"
         >
-          <div className="border border-blue-500/20 bg-blue-900/10 rounded-xl p-6 overflow-hidden relative">
+          <div className="border border-neutral-500/20 bg-neutral-800/10 rounded-xl p-6 overflow-hidden relative">
             <div className="grid grid-cols-5 gap-2 md:gap-3 mb-6">
               {Array.from({ length: 15 }).map((_, i) => (
                 <div
                   key={i}
-                  className="h-2 rounded-full bg-blue-500/30 animate-pulse"
+                  className="h-2 rounded-full bg-neutral-600/30 animate-pulse"
                   style={{
                     animationDelay: `${i * 0.1}s`,
                     animationDuration: `${2 + Math.random() * 3}s`
@@ -93,7 +93,7 @@ const Infrastructure = () => {
             
             <div className="flex flex-wrap justify-center gap-4">
               {["North America", "Europe", "Asia", "Australia", "South America"].map((region, i) => (
-                <div key={i} className="px-3 py-1 bg-blue-900/20 rounded-full text-blue-400 text-sm">
+                <div key={i} className="px-3 py-1 bg-neutral-800/20 rounded-full text-neutral-400 text-sm">
                   {region}
                 </div>
               ))}

src/components/base/Templates.tsx

@@ -9,37 +9,37 @@ const Templates = () => {
       title: "Stripe Subscriptions Starter",
       description: "Complete SaaS subscription management with Stripe integration",
       icon: CreditCard,
-      color: "from-purple-500 to-purple-700"
+      color: "from-neutral-500 to-neutral-700"
     },
     {
       title: "Next.js App Router with Authentication",
       description: "Secure, fast Next.js application with built-in authentication",
       icon: Globe,
-      color: "from-blue-500 to-blue-700"
+      color: "from-neutral-500 to-neutral-700"
     },
     {
       title: "AI Chatbot Template",
       description: "Intelligent chatbot with natural language processing capabilities",
       icon: MessageSquare,
-      color: "from-green-500 to-green-700"
+      color: "from-neutral-500 to-neutral-700"
     },
     {
       title: "LangChain and Next.js Starter",
       description: "LLM-powered application with LangChain and Next.js integration",
       icon: RefreshCw,
-      color: "from-amber-500 to-amber-700"
+      color: "from-neutral-500 to-neutral-700"
     },
     {
       title: "Flutter User Management",
       description: "Cross-platform Flutter app with complete user management",
       icon: Phone,
-      color: "from-cyan-500 to-cyan-700"
+      color: "from-neutral-500 to-neutral-700"
     },
     {
       title: "Expo React Native Starter",
       description: "Mobile-first React Native application with Expo framework",
       icon: Code,
-      color: "from-rose-500 to-rose-700"
+      color: "from-neutral-500 to-neutral-700"
     }
   ];
 

src/components/base/TrustedBy.tsx

@@ -20,7 +20,7 @@ const TrustedBy = () => {
           className="text-center mb-10"
         >
           <h2 className="text-2xl font-semibold text-[var(--white)] mb-2">Trusted Worldwide</h2>
-          <div className="w-20 h-1 bg-blue-500 mx-auto"></div>
+          <div className="w-20 h-1 bg-neutral-600 mx-auto"></div>
         </motion.div>
         
         <motion.div 
@@ -33,7 +33,7 @@ const TrustedBy = () => {
           {companies.map((company, index) => (
             <div 
               key={index} 
-              className="text-neutral-400 font-medium text-lg transition-colors hover:text-blue-400"
+              className="text-neutral-400 font-medium text-lg transition-colors hover:text-neutral-400"
             >
               {company}
             </div>

src/components/base/ai-engineering/featureData.ts

@@ -24,9 +24,9 @@ export const featureData: AIFeature[] = [
       { text: "Performance optimization for inference workloads" }
     ],
     delay: 0.1,
-    iconBgClass: "bg-purple-900/30",
-    iconTextClass: "text-purple-400",
-    bulletColor: "text-purple-400"
+    iconBgClass: "bg-neutral-800/30",
+    iconTextClass: "text-neutral-400",
+    bulletColor: "text-neutral-400"
   },
   {
     icon: React.createElement(Search, { className: "h-6 w-6" }),
@@ -38,9 +38,9 @@ export const featureData: AIFeature[] = [
       { text: "Hybrid search combining vector and traditional queries" }
     ],
     delay: 0.2,
-    iconBgClass: "bg-blue-900/30",
-    iconTextClass: "text-blue-400",
-    bulletColor: "text-blue-400"
+    iconBgClass: "bg-neutral-800/30",
+    iconTextClass: "text-neutral-400",
+    bulletColor: "text-neutral-400"
   },
   {
     icon: React.createElement(Database, { className: "h-6 w-6" }),
@@ -52,9 +52,9 @@ export const featureData: AIFeature[] = [
       { text: "Scalable batch and stream processing" }
     ],
     delay: 0.3,
-    iconBgClass: "bg-green-900/30",
-    iconTextClass: "text-green-400",
-    bulletColor: "text-green-400"
+    iconBgClass: "bg-neutral-800/30",
+    iconTextClass: "text-neutral-400",
+    bulletColor: "text-neutral-400"
   },
   {
     icon: React.createElement(Sparkles, { className: "h-6 w-6" }),
@@ -66,8 +66,8 @@ export const featureData: AIFeature[] = [
       { text: "Real-time anomaly detection and predictive analytics" }
     ],
     delay: 0.4,
-    iconBgClass: "bg-amber-900/30",
-    iconTextClass: "text-amber-400",
-    bulletColor: "text-amber-400"
+    iconBgClass: "bg-neutral-800/30",
+    iconTextClass: "text-neutral-400",
+    bulletColor: "text-neutral-400"
   }
 ];

src/components/billing/AddCreditsDialog.tsx

@@ -75,7 +75,7 @@ const AddCreditsDialog = ({ isOpen, onClose }: AddCreditsDialogProps) => {
               type="button"
               variant="outline"
               className={`${
-                creditAmount === amount ? 'border-purple-500 bg-purple-900/20' : ''
+                creditAmount === amount ? 'border-neutral-500 bg-neutral-800/20' : ''
               }`}
               onClick={() => setCreditAmount(amount)}
             >

src/components/billing/BillingHistory.tsx

@@ -24,11 +24,11 @@ const BillingHistory = () => {
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'Paid':
-        return 'bg-green-900/20 text-green-400';
+        return 'bg-neutral-800/20 text-neutral-400';
       case 'Pending':
-        return 'bg-yellow-900/20 text-yellow-400';
+        return 'bg-neutral-800/20 text-neutral-400';
       case 'Failed':
-        return 'bg-red-900/20 text-red-400';
+        return 'bg-neutral-800/20 text-neutral-400';
       default:
         return 'bg-gray-900/20 text-neutral-400';
     }

src/components/billing/PaymentMethods.tsx

@@ -27,9 +27,9 @@ const PaymentMethods = () => {
   const getCardIcon = (type: string) => {
     switch (type) {
       case 'visa':
-        return <div className="text-blue-500 font-bold text-xs">VISA</div>;
+        return <div className="text-neutral-400 font-bold text-xs">VISA</div>;
       case 'mastercard':
-        return <div className="text-red-500 font-bold text-xs">MC</div>;
+        return <div className="text-neutral-400 font-bold text-xs">MC</div>;
       default:
         return <CreditCard className="h-4 w-4 text-neutral-400" />;
     }
@@ -205,7 +205,7 @@ const PaymentMethods = () => {
             key={card.id} 
             className={`flex items-center justify-between p-4 rounded-lg border ${
               card.isDefault 
-                ? 'border-purple-500 bg-purple-900/10' 
+                ? 'border-neutral-500 bg-neutral-800/10' 
                 : 'border-gray-800 bg-gray-900/30'
             }`}
           >
@@ -217,7 +217,7 @@ const PaymentMethods = () => {
                 <div className="font-medium">
                   {card.type.charAt(0).toUpperCase() + card.type.slice(1)} ending in {card.last4}
                   {card.isDefault && (
-                    <span className="ml-2 text-xs bg-purple-900/50 text-purple-300 px-2 py-0.5 rounded-full">
+                    <span className="ml-2 text-xs bg-neutral-800/50 text-neutral-300 px-2 py-0.5 rounded-full">
                       Default
                     </span>
                   )}
@@ -244,7 +244,7 @@ const PaymentMethods = () => {
               <Button 
                 variant="ghost" 
                 size="sm" 
-                className="text-red-400 hover:text-red-300 hover:bg-red-900/20"
+                className="text-neutral-400 hover:text-neutral-300 hover:bg-neutral-800/20"
                 onClick={() => handleDeleteCard(card.id)}
               >
                 <Trash2 className="h-4 w-4" />

src/components/billing/PurchaseCreditsDialog.tsx

@@ -75,7 +75,7 @@ const PurchaseCreditsDialog = ({ open, onOpenChange }: PurchaseCreditsDialogProp
                   onClick={() => handleSelectAmount(amount)}
                   className={`${
                     selectedAmount === amount
-                      ? "bg-indigo-600 hover:bg-indigo-700 text-[var(--white)]"
+                      ? "bg-neutral-600 hover:bg-neutral-700 text-[var(--white)]"
                       : "border-gray-700 text-[var(--white)]"
                   }`}
                 >

src/components/billing/overview/CreditBalance.tsx

@@ -24,8 +24,8 @@ const CreditBalance = () => {
       </div>
       
       <div className="flex items-center">
-        <div className="h-16 w-16 bg-purple-900/30 rounded-full flex items-center justify-center mr-4">
-          <span className="text-2xl font-bold text-purple-300">$</span>
+        <div className="h-16 w-16 bg-neutral-800/30 rounded-full flex items-center justify-center mr-4">
+          <span className="text-2xl font-bold text-neutral-300">$</span>
         </div>
         <div>
           <div className="text-3xl font-bold">${billingInfo.credits.toFixed(2)}</div>

src/components/blockchain/BlockchainProductLayout.tsx

@@ -351,9 +351,9 @@ const BlockchainProductLayout: React.FC<BlockchainProductProps> = ({
             >
               <div className="flex items-center gap-2 px-4 py-3 border-b border-neutral-800 bg-neutral-950">
                 <div className="flex gap-1.5">
-                  <div className="w-3 h-3 rounded-full bg-red-500/80" />
-                  <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
-                  <div className="w-3 h-3 rounded-full bg-green-500/80" />
+                  <div className="w-3 h-3 rounded-full bg-neutral-600/80" />
+                  <div className="w-3 h-3 rounded-full bg-neutral-500/80" />
+                  <div className="w-3 h-3 rounded-full bg-neutral-500/80" />
                 </div>
                 <span className="ml-2 text-xs text-neutral-500 font-mono">{codeExample.filename}</span>
               </div>

src/components/chat/ChatWidget.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { MessageSquare, X, Send, ExternalLink, Bot } from "lucide-react";
 
-const BRAND_COLOR = "#e11633";
+const BRAND_COLOR = "#ffffff";
 
 // Quick action buttons
 const quickActions = [
@@ -210,7 +210,7 @@ const ChatWidget = () => {
                   <div
                     className={`max-w-[85%] rounded-xl px-3 py-2 text-sm ${
                       message.role === "user"
-                        ? "bg-[#fd4444] text-white"
+                        ? "bg-white text-black"
                         : "bg-neutral-900 text-neutral-300 border border-neutral-800"
                     }`}
                   >

src/components/cloud/CallToAction.tsx

@@ -7,9 +7,9 @@ import ChromeText from "@/components/ui/chrome-text";
 const CallToAction = () => {
   return (
     <section className="py-24 px-4 sm:px-6 lg:px-8 bg-[var(--black)] relative overflow-hidden">
-      <div className="absolute inset-0 bg-gradient-to-r from-purple-900/20 to-blue-900/20 opacity-30"></div>
-      <div className="absolute -top-40 -right-40 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
-      <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
+      <div className="absolute inset-0 bg-gradient-to-r from-neutral-800/20 to-neutral-800/20 opacity-30"></div>
+      <div className="absolute -top-40 -right-40 w-80 h-80 bg-neutral-600/10 rounded-full blur-3xl"></div>
+      <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-neutral-600/10 rounded-full blur-3xl"></div>
       
       <div className="max-w-5xl mx-auto relative z-10">
         <motion.div 
@@ -28,7 +28,7 @@ const CallToAction = () => {
           
           <Button 
             size="lg"
-            className="bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-500 hover:to-purple-400 text-[var(--white)] px-8 py-6 rounded-lg text-lg font-medium shadow-lg hover:shadow-xl transition-all"
+            className="bg-gradient-to-r from-neutral-600 to-neutral-500 hover:from-neutral-500 hover:to-neutral-400 text-[var(--white)] px-8 py-6 rounded-lg text-lg font-medium shadow-lg hover:shadow-xl transition-all"
           >
             <a href="https://dashboard.hanzo.cloud">Get Started Free →</a>
           </Button>

src/components/cloud/CloudHero.tsx

@@ -14,7 +14,7 @@ import {
   Copy,
 } from "lucide-react";
 
-const BRAND_COLOR = "#fd4444";
+const BRAND_COLOR = "#ffffff";
 
 const SERVICES = [
   { id: "compute", label: "Compute", icon: Server },
@@ -109,9 +109,9 @@ hanzo access grant [email protected] \\
     <div className="rounded-xl border border-neutral-700 bg-neutral-900/95 backdrop-blur-sm overflow-hidden shadow-2xl">
       <div className="flex items-center gap-2 px-4 py-3 border-b border-neutral-800 bg-neutral-950">
         <div className="flex gap-1.5">
-          <div className="w-3 h-3 rounded-full bg-red-500/80" />
-          <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
-          <div className="w-3 h-3 rounded-full bg-green-500/80" />
+          <div className="w-3 h-3 rounded-full bg-neutral-600/80" />
+          <div className="w-3 h-3 rounded-full bg-neutral-500/80" />
+          <div className="w-3 h-3 rounded-full bg-neutral-500/80" />
         </div>
         <AnimatePresence mode="wait">
           <motion.span
@@ -211,7 +211,7 @@ const CloudHero = () => {
               <Link
                 to="/signup"
                 className="inline-flex items-center px-6 py-3 rounded-full font-medium transition-all hover:opacity-90 text-sm"
-                style={{ backgroundColor: BRAND_COLOR, color: "#ffffff" }}
+                style={{ backgroundColor: BRAND_COLOR, color: "#000000" }}
               >
                 Start free
                 <ArrowRight className="ml-2 h-4 w-4" />
@@ -239,7 +239,7 @@ const CloudHero = () => {
                   onClick={handleCopy}
                   className="text-neutral-500 hover:text-white transition-colors"
                 >
-                  {copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
+                  {copied ? <Check className="h-3.5 w-3.5 text-neutral-400" /> : <Copy className="h-3.5 w-3.5" />}
                 </button>
               </div>
             </motion.div>
@@ -260,7 +260,7 @@ const CloudHero = () => {
                     onClick={() => setActiveService(service.id)}
                     className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all ${
                       isActive
-                        ? "bg-[#fd4444] text-white"
+                        ? "bg-white text-black"
                         : "bg-neutral-900 border border-neutral-800 text-neutral-400 hover:text-white hover:border-neutral-700"
                     }`}
                   >

src/components/cloud/EnterpriseFeatures.tsx

@@ -7,8 +7,8 @@ const EnterpriseFeatures = () => {
     <section id="infra-log" className="py-24 px-4 sm:px-6 lg:px-8 bg-[var(--black)] relative overflow-hidden">
       <div className="absolute inset-0 opacity-20">
         <div className="absolute inset-0 bg-grid-white/5 bg-[size:30px_30px]" />
-        <div className="absolute -top-40 -right-40 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl" />
-        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl" />
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-neutral-600/10 rounded-full blur-3xl" />
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-neutral-600/10 rounded-full blur-3xl" />
       </div>
       
       <div className="max-w-7xl mx-auto relative z-10">
@@ -23,23 +23,23 @@ const EnterpriseFeatures = () => {
             <div className="rounded-lg bg-gradient-to-br from-gray-900 to-black border border-gray-800 overflow-hidden shadow-2xl">
               <div className="bg-gray-800 py-2 px-4 flex items-center justify-between">
                 <div className="flex items-center space-x-2">
-                  <div className="w-3 h-3 rounded-full bg-red-500"></div>
-                  <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
-                  <div className="w-3 h-3 rounded-full bg-green-500"></div>
+                  <div className="w-3 h-3 rounded-full bg-neutral-600"></div>
+                  <div className="w-3 h-3 rounded-full bg-neutral-500"></div>
+                  <div className="w-3 h-3 rounded-full bg-neutral-500"></div>
                 </div>
                 <div className="text-neutral-400 text-sm">infrastructure.log</div>
               </div>
               <div className="p-4 font-mono text-sm text-neutral-300 max-h-[400px] overflow-y-auto">
                 <div className="text-neutral-500"># Hanzo Infrastructure Log</div>
-                <div className="text-green-400">[INFO] Sydney region: 12 new CPU machines online</div>
-                <div className="text-purple-400">[SCALING] Tokyo region: GPU cluster expanding</div>
-                <div className="text-blue-400">[NETWORK] Frankfurt: New 100Gbps uplink active</div>
-                <div className="text-yellow-400">[UPDATE] Global: System update scheduled for May 15</div>
-                <div className="text-green-400">[INFO] Amsterdam: Storage cluster expansion complete</div>
-                <div className="text-purple-400">[SCALING] São Paulo: 8 new CPU machines online</div>
-                <div className="text-blue-400">[NETWORK] New York: DDoS protection enhanced</div>
-                <div className="text-green-400">[INFO] Singapore: New edge region now available</div>
-                <div className="text-yellow-400">[UPDATE] Global: Network routes optimized</div>
+                <div className="text-neutral-400">[INFO] Sydney region: 12 new CPU machines online</div>
+                <div className="text-neutral-400">[SCALING] Tokyo region: GPU cluster expanding</div>
+                <div className="text-neutral-400">[NETWORK] Frankfurt: New 100Gbps uplink active</div>
+                <div className="text-neutral-400">[UPDATE] Global: System update scheduled for May 15</div>
+                <div className="text-neutral-400">[INFO] Amsterdam: Storage cluster expansion complete</div>
+                <div className="text-neutral-400">[SCALING] São Paulo: 8 new CPU machines online</div>
+                <div className="text-neutral-400">[NETWORK] New York: DDoS protection enhanced</div>
+                <div className="text-neutral-400">[INFO] Singapore: New edge region now available</div>
+                <div className="text-neutral-400">[UPDATE] Global: Network routes optimized</div>
               </div>
             </div>
           </div>
@@ -56,7 +56,7 @@ const EnterpriseFeatures = () => {
               initial={{ opacity: 0.9 }}
               whileHover={{ opacity: 1, scale: 1.02 }}
               transition={{ duration: 0.2 }}
-              className="inline-block px-6 py-3 rounded-lg bg-gradient-to-r from-purple-600 to-blue-600 text-[var(--white)] font-medium hover:shadow-lg hover:shadow-purple-500/20 transition-all"
+              className="inline-block px-6 py-3 rounded-lg bg-gradient-to-r from-neutral-600 to-neutral-600 text-[var(--white)] font-medium hover:shadow-lg hover:shadow-neutral-500/20 transition-all"
             >
               Learn More
             </motion.a>

src/components/cloud/Features.tsx

@@ -35,9 +35,9 @@ const Features = () => {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5 }}
-            className="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-purple-500/30 transition-colors"
+            className="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-neutral-500/30 transition-colors"
           >
-            <Globe className="w-12 h-12 text-purple-400 mb-6" />
+            <Globe className="w-12 h-12 text-neutral-400 mb-6" />
             <h3 className="text-xl font-bold mb-4">Global Reach</h3>
             <p className="text-neutral-300">
               Deploy in 35 regions, from Sydney to São Paulo, for sub-100ms response times and native-app feel no matter where your users are.
@@ -49,9 +49,9 @@ const Features = () => {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5, delay: 0.2 }}
-            className="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-purple-500/30 transition-colors"
+            className="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-neutral-500/30 transition-colors"
           >
-            <Server className="w-12 h-12 text-purple-400 mb-6" />
+            <Server className="w-12 h-12 text-neutral-400 mb-6" />
             <h3 className="text-xl font-bold mb-4">Instant Scaling</h3>
             <p className="text-neutral-300">
               Hanzo Machines start fast enough to handle HTTP requests, run only when you need them, and scale into tens of thousands of instances.
@@ -63,9 +63,9 @@ const Features = () => {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5, delay: 0.4 }}
-            className="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-purple-500/30 transition-colors"
+            className="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-neutral-500/30 transition-colors"
           >
-            <Cpu className="w-12 h-12 text-purple-400 mb-6" />
+            <Cpu className="w-12 h-12 text-neutral-400 mb-6" />
             <h3 className="text-xl font-bold mb-4">GPU Acceleration</h3>
             <p className="text-neutral-300">
               From LLMs to inferencing, hardware acceleration with the same developer experience as a simple CRUD app.
@@ -77,9 +77,9 @@ const Features = () => {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5, delay: 0.6 }}
-            className="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-purple-500/30 transition-colors"
+            className="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-neutral-500/30 transition-colors"
           >
-            <Database className="w-12 h-12 text-purple-400 mb-6" />
+            <Database className="w-12 h-12 text-neutral-400 mb-6" />
             <h3 className="text-xl font-bold mb-4">AI-Native Storage</h3>
             <p className="text-neutral-300">
               Vector databases, document stores, and relational databases optimized for AI workloads with automatic scaling.
@@ -91,9 +91,9 @@ const Features = () => {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5, delay: 0.8 }}
-            className="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-purple-500/30 transition-colors"
+            className="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-neutral-500/30 transition-colors"
           >
-            <Bot className="w-12 h-12 text-purple-400 mb-6" />
+            <Bot className="w-12 h-12 text-neutral-400 mb-6" />
             <h3 className="text-xl font-bold mb-4">Model Management</h3>
             <p className="text-neutral-300">
               Streamlined deployment and management of AI models with version control, A/B testing, and monitoring built-in.
@@ -105,9 +105,9 @@ const Features = () => {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5, delay: 1.0 }}
-            className="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-purple-500/30 transition-colors"
+            className="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-neutral-500/30 transition-colors"
           >
-            <Lock className="w-12 h-12 text-purple-400 mb-6" />
+            <Lock className="w-12 h-12 text-neutral-400 mb-6" />
             <h3 className="text-xl font-bold mb-4">Enterprise Security</h3>
             <p className="text-neutral-300">
               SOC 2, GDPR, and HIPAA compliant infrastructure with private networking, encryption, and audit logging.
@@ -120,10 +120,10 @@ const Features = () => {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.5, delay: 0.6 }}
-          className="mt-16 bg-purple-900/20 rounded-xl p-8 border border-purple-800/30"
+          className="mt-16 bg-neutral-800/20 rounded-xl p-8 border border-neutral-800/30"
         >
           <div className="flex flex-col md:flex-row items-center">
-            <Cloud className="w-14 h-14 text-purple-400 mb-6 md:mb-0 md:mr-8" />
+            <Cloud className="w-14 h-14 text-neutral-400 mb-6 md:mb-0 md:mr-8" />
             <div>
               <h3 className="text-xl font-bold mb-3">Built for AI Engineering</h3>
               <p className="text-neutral-300">
@@ -147,7 +147,7 @@ const Features = () => {
             </p>
             <div className="flex flex-col sm:flex-row justify-center gap-4">
               <Button
-                className="bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-500 hover:to-purple-400 text-[var(--white)]"
+                className="bg-gradient-to-r from-neutral-600 to-neutral-500 hover:from-neutral-500 hover:to-neutral-400 text-[var(--white)]"
               >
                 Contact Sales
               </Button>
@@ -161,7 +161,7 @@ const Features = () => {
             </div>
             
             <div className="mt-6 text-neutral-400 text-sm">
-              Looking for a free, self-hosted alternative? <a href="/platform" className="text-purple-400 hover:underline">Check out Hanzo Platform</a>
+              Looking for a free, self-hosted alternative? <a href="/platform" className="text-neutral-400 hover:underline">Check out Hanzo Platform</a>
             </div>
           </div>
         </motion.div>

src/components/cloud/HeroSection.tsx

@@ -11,7 +11,7 @@ const HeroSection = () => {
       <div className="absolute inset-0 bg-[var(--black)]" />
       
       {/* Enhanced background with subtle animated gradient */}
-      <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-black opacity-40"></div>
+      <div className="absolute inset-0 bg-gradient-to-br from-neutral-800/20 via-neutral-900/20 to-black opacity-40"></div>
       <div className="absolute top-0 left-0 w-full h-full bg-[url('/placeholder.svg')] bg-repeat opacity-5"></div>
       
       <div className="relative z-10 max-w-7xl mx-auto">
@@ -21,7 +21,7 @@ const HeroSection = () => {
           transition={{ duration: 0.6 }}
           className="mb-8 text-center"
         >
-          <div className="inline-block px-4 py-1 rounded-full bg-purple-900/30 border border-purple-500/30 text-purple-300 text-sm font-medium mb-6">
+          <div className="inline-block px-4 py-1 rounded-full bg-neutral-800/30 border border-neutral-500/30 text-neutral-300 text-sm font-medium mb-6">
             Hanzo Cloud - Built for Production
           </div>
           <ChromeText as="h1" className="text-4xl md:text-6xl font-bold tracking-tight mb-6">
@@ -39,14 +39,14 @@ const HeroSection = () => {
           transition={{ duration: 0.6, delay: 0.3 }}
           className="flex flex-col sm:flex-row gap-4 justify-center mt-10"
         >
-          <Button size="lg" className="text-lg px-8 bg-gradient-to-r from-purple-700 to-purple-500 hover:from-purple-600 hover:to-purple-400 border-none">
+          <Button size="lg" className="text-lg px-8 bg-gradient-to-r from-neutral-700 to-neutral-500 hover:from-neutral-600 hover:to-neutral-400 border-none">
             <a href="https://dashboard.hanzo.cloud">Deploy Now</a>
           </Button>
           
           <Button 
             variant="outline"
             size="lg" 
-            className="text-lg px-8 text-[var(--white)] border-purple-500/30 hover:bg-purple-900/20"
+            className="text-lg px-8 text-[var(--white)] border-neutral-500/30 hover:bg-neutral-800/20"
           >
             <a href="/platform">Try Open Source</a>
           </Button>
@@ -59,20 +59,20 @@ const HeroSection = () => {
           transition={{ duration: 0.6, delay: 0.5 }}
           className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto"
         >
-          <div className="bg-gray-900/30 border border-purple-500/20 rounded-xl p-6 text-center">
-            <Server className="h-8 w-8 text-purple-400 mx-auto mb-4" />
+          <div className="bg-gray-900/30 border border-neutral-500/20 rounded-xl p-6 text-center">
+            <Server className="h-8 w-8 text-neutral-400 mx-auto mb-4" />
             <h3 className="text-lg font-semibold mb-2">Global Infrastructure</h3>
             <p className="text-neutral-400 text-sm">35+ regions worldwide for ultra-low latency at the edge</p>
           </div>
           
-          <div className="bg-gray-900/30 border border-purple-500/20 rounded-xl p-6 text-center">
-            <Zap className="h-8 w-8 text-purple-400 mx-auto mb-4" />
+          <div className="bg-gray-900/30 border border-neutral-500/20 rounded-xl p-6 text-center">
+            <Zap className="h-8 w-8 text-neutral-400 mx-auto mb-4" />
             <h3 className="text-lg font-semibold mb-2">Instant Deployment</h3>
             <p className="text-neutral-400 text-sm">Deploy in seconds with push-button simplicity</p>
           </div>
           
-          <div className="bg-gray-900/30 border border-purple-500/20 rounded-xl p-6 text-center">
-            <Globe className="h-8 w-8 text-purple-400 mx-auto mb-4" />
+          <div className="bg-gray-900/30 border border-neutral-500/20 rounded-xl p-6 text-center">
+            <Globe className="h-8 w-8 text-neutral-400 mx-auto mb-4" />
             <h3 className="text-lg font-semibold mb-2">AI-Optimized</h3>
             <p className="text-neutral-400 text-sm">Purpose-built for complex AI workloads and inference</p>
           </div>

src/components/cloud/ProductCatalog.tsx

@@ -64,7 +64,7 @@ import {
   ChevronRight,
 } from "lucide-react";
 
-const BRAND_COLOR = "#fd4444";
+const BRAND_COLOR = "#ffffff";
 
 interface Product {
   name: string;
@@ -89,7 +89,7 @@ const CATEGORIES: Category[] = [
     name: "AI & Agents",
     description: "Build intelligent applications with foundation models and agent frameworks",
     icon: Brain,
-    color: "#8b5cf6",
+    color: "#a3a3a3",
     products: [
       { name: "Hanzo Models", description: "Foundation models API", icon: Brain, href: "/ai" },
       { name: "Zen", description: "Multimodal AI engine", icon: Sparkles, href: "/ai" },
@@ -107,7 +107,7 @@ const CATEGORIES: Category[] = [
     name: "Developer Tools",
     description: "Everything you need to build, test, and deploy applications",
     icon: Terminal,
-    color: "#f97316",
+    color: "#a3a3a3",
     products: [
       { name: "Hanzo Dev", description: "AI coding assistant", icon: Terminal, href: "/dev" },
       { name: "CLI", description: "Command line tools", icon: Terminal, href: "/download" },
@@ -125,7 +125,7 @@ const CATEGORIES: Category[] = [
     name: "App Platform",
     description: "Build and scale applications with managed backend services",
     icon: Layers,
-    color: "#10b981",
+    color: "#a3a3a3",
     products: [
       { name: "Hanzo Base", description: "Backend-as-a-Service", icon: Database, href: "/base" },
       { name: "Auth", description: "Authentication & SSO", icon: Shield, href: "/identity" },
@@ -143,7 +143,7 @@ const CATEGORIES: Category[] = [
     name: "Cloud Infrastructure",
     description: "Global infrastructure for compute, networking, and storage",
     icon: CloudCog,
-    color: "#3b82f6",
+    color: "#a3a3a3",
     products: [
       { name: "Edge", description: "Edge computing", icon: Globe, href: "/edge" },
       { name: "Gateway", description: "API gateway", icon: Router },
@@ -161,7 +161,7 @@ const CATEGORIES: Category[] = [
     name: "Databases & Search",
     description: "Managed databases, vector stores, and search engines",
     icon: Database,
-    color: "#06b6d4",
+    color: "#a3a3a3",
     products: [
       { name: "SQL", description: "PostgreSQL managed", icon: Table },
       { name: "SQL Vector", description: "pgvector enabled", icon: Table, href: "/vector" },
@@ -179,7 +179,7 @@ const CATEGORIES: Category[] = [
     name: "Integrations & Automation",
     description: "Connect systems and automate workflows across your stack",
     icon: Workflow,
-    color: "#ec4899",
+    color: "#a3a3a3",
     products: [
       { name: "Automations", description: "Workflow automation", icon: Workflow, href: "/automations" },
       { name: "Connectors", description: "Pre-built integrations", icon: Puzzle },
@@ -197,7 +197,7 @@ const CATEGORIES: Category[] = [
     name: "Security & Governance",
     description: "Enterprise security, compliance, and access management",
     icon: Shield,
-    color: "#ef4444",
+    color: "#a3a3a3",
     products: [
       { name: "IAM", description: "Identity & access", icon: Users },
       { name: "Policy", description: "Policy engine", icon: FileCheck },
@@ -215,7 +215,7 @@ const CATEGORIES: Category[] = [
     name: "Observability & Operations",
     description: "Monitor, debug, and operate your applications at scale",
     icon: Activity,
-    color: "#f59e0b",
+    color: "#a3a3a3",
     products: [
       { name: "Telemetry", description: "OpenTelemetry", icon: Activity, href: "/analytics" },
       { name: "Metrics", description: "Time-series metrics", icon: LineChart },
@@ -233,7 +233,7 @@ const CATEGORIES: Category[] = [
     name: "Hosting & Delivery",
     description: "Deploy and deliver applications globally with zero config",
     icon: Rocket,
-    color: "#14b8a6",
+    color: "#a3a3a3",
     products: [
       { name: "Deploy", description: "Git deployments", icon: Rocket },
       { name: "Containers", description: "Container hosting", icon: Container },
@@ -383,7 +383,7 @@ const ProductCatalog = () => {
             <Link
               to="/pricing"
               className="inline-flex items-center px-6 py-3 rounded-full font-medium transition-all hover:opacity-90 text-sm"
-              style={{ backgroundColor: BRAND_COLOR, color: "#fff" }}
+              style={{ backgroundColor: BRAND_COLOR, color: "#000" }}
             >
               View Pricing
               <ChevronRight className="ml-2 h-4 w-4" />

src/components/cloud/Regions.tsx

@@ -37,19 +37,19 @@ const Regions = () => {
             
             <div className="rounded-lg bg-gray-900/50 border border-gray-800 overflow-hidden">
               <div className="bg-gray-800 py-2 px-4 flex items-center space-x-2">
-                <div className="w-3 h-3 rounded-full bg-red-500"></div>
-                <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
-                <div className="w-3 h-3 rounded-full bg-green-500"></div>
+                <div className="w-3 h-3 rounded-full bg-neutral-600"></div>
+                <div className="w-3 h-3 rounded-full bg-neutral-500"></div>
+                <div className="w-3 h-3 rounded-full bg-neutral-500"></div>
                 <div className="text-neutral-400 text-sm">Terminal</div>
               </div>
               <div className="p-4 font-mono text-sm text-neutral-300">
-                <div className="text-green-400">$ hanzo deploy</div>
+                <div className="text-neutral-400">$ hanzo deploy</div>
                 <div className="text-neutral-400">Initializing deployment...</div>
                 <div className="text-neutral-400">Deploying to region: us-east-1</div>
                 <div className="text-neutral-400">Building container image...</div>
                 <div className="text-neutral-400">Pushing to registry...</div>
-                <div className="text-purple-400">✓ Deployed in 250ms</div>
-                <div className="text-neutral-400">Your app is live at: <span className="text-blue-400">https://myapp.hanzo.cloud</span></div>
+                <div className="text-neutral-400">✓ Deployed in 250ms</div>
+                <div className="text-neutral-400">Your app is live at: <span className="text-neutral-400">https://myapp.hanzo.cloud</span></div>
               </div>
             </div>
           </motion.div>
@@ -65,7 +65,7 @@ const Regions = () => {
               JavaScript, TypeScript, Bun, Deno—whatever your flavor, Hanzo Launch automatically detects your runtime and generates a VM with everything you need to run your app.
             </p>
             
-            <div className="p-6 rounded-lg bg-gradient-to-br from-purple-900/20 to-blue-900/20 border border-purple-800/30">
+            <div className="p-6 rounded-lg bg-gradient-to-br from-neutral-800/20 to-neutral-800/20 border border-neutral-800/30">
               <h4 className="text-xl font-bold mb-4">Real GPUs & CPUs on the Edge</h4>
               <p className="text-neutral-300">
                 Run workloads that require GPUs or lots of CPUs, memory, and storage in over 30 regions around the world—all interconnected by a private, encrypted WireGuard network that works out of the box.

src/components/cloud/Security.tsx

@@ -15,7 +15,7 @@ const Security = () => {
           transition={{ duration: 0.6 }}
           className="text-center mb-16"
         >
-          <Shield className="w-16 h-16 text-purple-400 mx-auto mb-6" />
+          <Shield className="w-16 h-16 text-neutral-400 mx-auto mb-6" />
           <h2 className="text-3xl md:text-4xl font-bold mb-6">
             Enterprise-Ready
           </h2>
@@ -42,7 +42,7 @@ const Security = () => {
                 "CI/CD Integration"
               ].map((feature, index) => (
                 <li key={index} className="flex items-start">
-                  <CheckCircle className="w-5 h-5 text-purple-400 mr-3 mt-1" />
+                  <CheckCircle className="w-5 h-5 text-neutral-400 mr-3 mt-1" />
                   <span className="text-neutral-300">{feature}</span>
                 </li>
               ))}
@@ -56,8 +56,8 @@ const Security = () => {
             transition={{ duration: 0.5, delay: 0.2 }}
             className="flex-1"
           >
-            <div className="bg-gradient-to-br from-purple-900/20 to-blue-900/20 rounded-xl p-8 border border-purple-800/30">
-              <Lock className="w-12 h-12 text-purple-400 mb-6" />
+            <div className="bg-gradient-to-br from-neutral-800/20 to-neutral-800/20 rounded-xl p-8 border border-neutral-800/30">
+              <Lock className="w-12 h-12 text-neutral-400 mb-6" />
               <h3 className="text-xl font-bold mb-4">Hanzo.io Security</h3>
               <p className="text-neutral-300 mb-8">
                 Our security team works around the clock to ensure your applications and data are protected. We employ industry-leading practices and regularly undergo independent security audits.

src/components/cloud/TechStack.tsx

@@ -26,7 +26,7 @@ const TechStack = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ duration: 0.3, delay: index * 0.1 }}
-              className="px-6 py-3 bg-gray-800/50 rounded-full border border-gray-700 hover:border-purple-500/50 hover:bg-gray-800 transition-colors"
+              className="px-6 py-3 bg-gray-800/50 rounded-full border border-gray-700 hover:border-neutral-500/50 hover:bg-gray-800 transition-colors"
             >
               {tech}
             </motion.div>

src/components/commerce/APIEndpoints.tsx

@@ -10,8 +10,8 @@ interface EndpointProps {
 
 const EndpointCard = ({ path, description }: EndpointProps) => {
   return (
-    <div className="bg-gray-900/40 border border-gray-800 rounded-lg p-4 hover:border-amber-500/30 transition-all duration-300">
-      <div className="font-mono text-sm text-amber-400 mb-2">{path}</div>
+    <div className="bg-gray-900/40 border border-gray-800 rounded-lg p-4 hover:border-neutral-500/30 transition-all duration-300">
+      <div className="font-mono text-sm text-neutral-400 mb-2">{path}</div>
       <p className="text-neutral-400 text-sm">{description}</p>
     </div>
   );
@@ -107,7 +107,7 @@ const APIEndpoints = () => {
     ]
   };
 
-  const tabClasses = "data-[state=active]:bg-amber-500/10 data-[state=active]:text-amber-400 border-b-0";
+  const tabClasses = "data-[state=active]:bg-neutral-500/10 data-[state=active]:text-neutral-400 border-b-0";
 
   return (
     <section className="py-16 bg-gradient-to-b from-black to-gray-900/30">
@@ -142,7 +142,7 @@ const APIEndpoints = () => {
             {Object.keys(endpointCategories).map((category) => (
               <TabsContent key={category} value={category} className="mt-0">
                 <div className="bg-gray-900/20 border border-gray-800 rounded-xl p-6">
-                  <h3 className="text-xl font-semibold mb-4 text-amber-400">
+                  <h3 className="text-xl font-semibold mb-4 text-neutral-400">
                     Hanzo {category.charAt(0).toUpperCase() + category.slice(1)} API Endpoints
                   </h3>
                   

src/components/commerce/CallToAction.tsx

@@ -15,11 +15,11 @@ const CallToAction = () => {
           
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center">
-              <ShoppingCart className="h-12 w-12 text-amber-400 mb-4" />
+              <ShoppingCart className="h-12 w-12 text-neutral-400 mb-4" />
               <h3 className="text-xl font-semibold mb-2">Start Selling</h3>
               <p className="text-neutral-400 mb-4 text-center">Launch your store with our easy-to-use platform</p>
               <Button 
-                className="mt-auto bg-amber-500 hover:bg-amber-600 text-black"
+                className="mt-auto bg-neutral-500 hover:bg-neutral-600 text-black"
                 onClick={() => window.open('https://console.hanzo.ai', '_blank')}
               >
                 Get Started <ArrowRight className="ml-2 h-4 w-4" />
@@ -27,11 +27,11 @@ const CallToAction = () => {
             </div>
             
             <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center">
-              <Book className="h-12 w-12 text-amber-400 mb-4" />
+              <Book className="h-12 w-12 text-neutral-400 mb-4" />
               <h3 className="text-xl font-semibold mb-2">Documentation</h3>
               <p className="text-neutral-400 mb-4 text-center">Explore our guides and API references</p>
               <Button 
-                className="mt-auto bg-amber-500 hover:bg-amber-600 text-black"
+                className="mt-auto bg-neutral-500 hover:bg-neutral-600 text-black"
                 onClick={() => window.open('https://docs.hanzo.ai/commerce', '_blank')}
               >
                 View Docs <ArrowRight className="ml-2 h-4 w-4" />
@@ -39,11 +39,11 @@ const CallToAction = () => {
             </div>
             
             <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-6 flex flex-col items-center">
-              <Code className="h-12 w-12 text-amber-400 mb-4" />
+              <Code className="h-12 w-12 text-neutral-400 mb-4" />
               <h3 className="text-xl font-semibold mb-2">For Developers</h3>
               <p className="text-neutral-400 mb-4 text-center">Integrate our APIs into your applications</p>
               <Button 
-                className="mt-auto bg-amber-500 hover:bg-amber-600 text-black"
+                className="mt-auto bg-neutral-500 hover:bg-neutral-600 text-black"
                 onClick={() => window.open('https://docs.hanzo.ai/api', '_blank')}
               >
                 API Reference <ArrowRight className="ml-2 h-4 w-4" />
@@ -52,14 +52,14 @@ const CallToAction = () => {
           </div>
         </div>
         
-        <div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-6 text-center max-w-3xl mx-auto">
+        <div className="bg-neutral-500/10 border border-neutral-500/30 rounded-lg p-6 text-center max-w-3xl mx-auto">
           <h3 className="text-xl font-semibold mb-3">Need a Custom Solution?</h3>
           <p className="text-neutral-300 mb-6">
             Our team of experts can help you design and implement a tailored e-commerce solution for your unique business needs.
           </p>
           <Button 
             variant="outline" 
-            className="border-amber-500/50 text-amber-400 hover:bg-amber-500/10"
+            className="border-neutral-500/50 text-neutral-400 hover:bg-neutral-500/10"
             onClick={() => window.open('https://hanzo.ai/contact', '_blank')}
           >
             Contact Sales

src/components/commerce/Features.tsx

@@ -13,8 +13,8 @@ interface FeatureCardProps {
 
 const FeatureCard = ({ icon, title, description }: FeatureCardProps) => {
   return (
-    <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-6 hover:border-amber-500/50 transition-colors duration-300">
-      <div className="bg-amber-500/10 p-3 rounded-lg w-fit mb-4">
+    <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-6 hover:border-neutral-500/50 transition-colors duration-300">
+      <div className="bg-neutral-500/10 p-3 rounded-lg w-fit mb-4">
         {icon}
       </div>
       <h3 className="text-xl font-semibold mb-2">{title}</h3>
@@ -26,52 +26,52 @@ const FeatureCard = ({ icon, title, description }: FeatureCardProps) => {
 const Features = () => {
   const features = [
     {
-      icon: <ShoppingCart className="h-6 w-6 text-amber-500" />,
+      icon: <ShoppingCart className="h-6 w-6 text-neutral-400" />,
       title: "Headless Shopping Carts",
       description: "Flexible cart management with customizable checkout flows for any frontend."
     },
     {
-      icon: <Package className="h-6 w-6 text-amber-500" />,
+      icon: <Package className="h-6 w-6 text-neutral-400" />,
       title: "Product Management",
       description: "Powerful catalog management with variants, collections, and custom attributes."
     },
     {
-      icon: <CreditCard className="h-6 w-6 text-amber-500" />,
+      icon: <CreditCard className="h-6 w-6 text-neutral-400" />,
       title: "Payment Processing",
       description: "Seamless integration with multiple payment gateways and subscription billing."
     },
     {
-      icon: <Gift className="h-6 w-6 text-amber-500" />,
+      icon: <Gift className="h-6 w-6 text-neutral-400" />,
       title: "Promotions & Discounts",
       description: "Create complex discount rules, coupons, and loyalty programs."
     },
     {
-      icon: <Tags className="h-6 w-6 text-amber-500" />,
+      icon: <Tags className="h-6 w-6 text-neutral-400" />,
       title: "Dynamic Pricing",
       description: "Implement sophisticated pricing strategies with targeted rules and segmentation."
     },
     {
-      icon: <BarChart className="h-6 w-6 text-amber-500" />,
+      icon: <BarChart className="h-6 w-6 text-neutral-400" />,
       title: "Analytics & Reporting",
       description: "Real-time insights into sales, inventory, customer behavior, and more."
     },
     {
-      icon: <Truck className="h-6 w-6 text-amber-500" />,
+      icon: <Truck className="h-6 w-6 text-neutral-400" />,
       title: "Order Management",
       description: "Complete visibility and control over the entire order lifecycle."
     },
     {
-      icon: <Globe className="h-6 w-6 text-amber-500" />,
+      icon: <Globe className="h-6 w-6 text-neutral-400" />,
       title: "Multi-channel Selling",
       description: "Sell across websites, mobile apps, social media, and marketplaces."
     },
     {
-      icon: <Shield className="h-6 w-6 text-amber-500" />,
+      icon: <Shield className="h-6 w-6 text-neutral-400" />,
       title: "Fraud Protection",
       description: "Advanced security features to protect your business and customers."
     },
     {
-      icon: <Database className="h-6 w-6 text-amber-500" />,
+      icon: <Database className="h-6 w-6 text-neutral-400" />,
       title: "Scalable Infrastructure",
       description: "Built for high-volume transactions with enterprise-grade reliability."
     }