diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index 9a5cb4f..1289c89 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -4,19 +4,18 @@ import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
 
 export function Footer() {
   return (
-    <footer className="bg-[#1A1A1A] text-white">
+    <footer className="bg-[var(--color-bg-secondary)] border-t border-gray-800">
       <div className="container-custom py-16">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
-          {/* Company Info */}
           <div className="lg:col-span-1">
             <div className="flex items-center mb-6">
               <img src="/logo-white.svg" alt="四川睿新致远科技有限公司" className="h-12 w-auto" />
             </div>
-            <p className="text-[#8A8A8A] text-sm leading-relaxed mb-6">
+            <p className="text-gray-400 text-sm leading-relaxed mb-6">
               {COMPANY_INFO.description}
             </p>
             <div className="flex flex-col items-start gap-3">
-              <span className="text-[#8A8A8A] text-sm">关注微信公众号</span>
+              <span className="text-gray-500 text-sm">关注微信公众号</span>
               <div className="w-24 h-24 bg-white rounded-lg p-2">
                 <img
                   src="/images/qrcode-wechat.png"
@@ -27,7 +26,6 @@ export function Footer() {
             </div>
           </div>
 
-          {/* Quick Links */}
           <div>
             <h3 className="font-semibold text-lg mb-6 text-white">快速链接</h3>
             <ul className="space-y-3">
@@ -35,7 +33,7 @@ export function Footer() {
                 <li key={item.id}>
                   <a
                     href={item.href}
-                    className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors"
+                    className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"
                   >
                     {item.label}
                   </a>
@@ -44,64 +42,61 @@ export function Footer() {
             </ul>
           </div>
 
-          {/* Services */}
           <div>
             <h3 className="font-semibold text-lg mb-6 text-white">服务项目</h3>
             <ul className="space-y-3">
               <li>
-                <a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
+                <a href="#services" className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
                   软件开发
                 </a>
               </li>
               <li>
-                <a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
+                <a href="#services" className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
                   云服务
                 </a>
               </li>
               <li>
-                <a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
+                <a href="#services" className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
                   数据分析
                 </a>
               </li>
               <li>
-                <a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
+                <a href="#services" className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
                   信息安全
                 </a>
               </li>
             </ul>
           </div>
 
-          {/* Contact Info */}
           <div>
             <h3 className="font-semibold text-lg mb-6 text-white">联系方式</h3>
             <ul className="space-y-4">
               <li className="flex items-start gap-3">
-                <MapPin className="w-5 h-5 text-[#C41E3A] mt-0.5" />
-                <span className="text-[#8A8A8A]">{COMPANY_INFO.address}</span>
+                <MapPin className="w-5 h-5 text-[var(--color-tech-blue)] mt-0.5" />
+                <span className="text-gray-400">{COMPANY_INFO.address}</span>
               </li>
               <li className="flex items-center gap-3">
-                <Phone className="w-5 h-5 text-[#C41E3A]" />
-                <span className="text-[#8A8A8A]">{COMPANY_INFO.phone}</span>
+                <Phone className="w-5 h-5 text-[var(--color-tech-blue)]" />
+                <span className="text-gray-400">{COMPANY_INFO.phone}</span>
               </li>
               <li className="flex items-center gap-3">
-                <Mail className="w-5 h-5 text-[#C41E3A]" />
-                <span className="text-[#8A8A8A]">{COMPANY_INFO.email}</span>
+                <Mail className="w-5 h-5 text-[var(--color-tech-blue)]" />
+                <span className="text-gray-400">{COMPANY_INFO.email}</span>
               </li>
             </ul>
           </div>
         </div>
 
-        {/* Bottom */}
-        <div className="border-t border-white/10 mt-12 pt-8">
+        <div className="border-t border-gray-800 mt-12 pt-8">
           <div className="flex flex-col md:flex-row justify-between items-center gap-4">
-            <p className="text-[#8A8A8A] text-sm">
+            <p className="text-gray-500 text-sm">
               © {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
             </p>
             <div className="flex gap-6">
-              <Link href="#" className="text-[#8A8A8A] hover:text-[#C41E3A] text-sm transition-colors">
+              <Link href="#" className="text-gray-500 hover:text-[var(--color-tech-blue)] text-sm transition-colors">
                 隐私政策
               </Link>
-              <Link href="#" className="text-[#8A8A8A] hover:text-[#C41E3A] text-sm transition-colors">
+              <Link href="#" className="text-gray-500 hover:text-[var(--color-tech-blue)] text-sm transition-colors">
                 服务条款
               </Link>
             </div>