diff --git a/frontend/src/App.css b/frontend/src/App.css
index d404dba..3b87eba 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -30,7 +30,7 @@ body {
 }
 
 .ant-btn-primary:hover {
-  background: linear-gradient(135deg, #3b8c86 0%, #21635f 100%) !important;
+  background: linear-gradient(135deg, #3c97ba 0%, #236b88 100%) !important;
   border-color: transparent !important;
 }
 
diff --git a/frontend/src/components/Categories.jsx b/frontend/src/components/Categories.jsx
index b46be02..99acd85 100644
--- a/frontend/src/components/Categories.jsx
+++ b/frontend/src/components/Categories.jsx
@@ -21,7 +21,7 @@ const categories = [
     count: '408131',
     description: '促销、开业、发布会等高频营销场景素材。',
     tag: '热点',
-    gradient: 'linear-gradient(135deg, #78beb7 0%, #2f7d78 100%)',
+    gradient: 'linear-gradient(135deg, #8ec4d8 0%, #2f87a8 100%)',
     icon: <NotificationOutlined />,
   },
   {
diff --git a/frontend/src/components/Designers.jsx b/frontend/src/components/Designers.jsx
index bfef545..bd6fd8f 100644
--- a/frontend/src/components/Designers.jsx
+++ b/frontend/src/components/Designers.jsx
@@ -16,7 +16,7 @@ const designers = [
 ];
 
 const gradients = [
-  'linear-gradient(135deg, #2f7d78 0%, #76bcb3 100%)',
+  'linear-gradient(135deg, #2f87a8 0%, #82bfd5 100%)',
   'linear-gradient(135deg, #4a8ee8 0%, #67d0df 100%)',
   'linear-gradient(135deg, #7d60c9 0%, #bd8eff 100%)',
   'linear-gradient(135deg, #2f8f73 0%, #86d6b2 100%)',
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 898bc03..f0b483c 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -37,11 +37,11 @@ const Footer = () => {
               <svg viewBox="0 0 40 24" className="footer-logo-icon" aria-hidden="true">
                 <path
                   d="M20 0c-5.5 0-10 4.5-10 10s4.5 10 10 10c2.8 0 5.3-1.1 7.1-2.9L20 10l7.1-7.1C25.3 1.1 22.8 0 20 0z"
-                  fill="#2f7d78"
+                  fill="#2f87a8"
                 />
                 <path
                   d="M30 4c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.5 0 10-4.5 10-10S35.5 4 30 4zm0 16c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
-                  fill="#2f7d78"
+                  fill="#2f87a8"
                 />
               </svg>
               <div>
diff --git a/frontend/src/components/Header.css b/frontend/src/components/Header.css
index 13c8fe6..0bd4646 100644
--- a/frontend/src/components/Header.css
+++ b/frontend/src/components/Header.css
@@ -117,7 +117,7 @@
 }
 
 .btn-invite:hover {
-  background: linear-gradient(135deg, #3b8c86 0%, #21635f 100%) !important;
+  background: linear-gradient(135deg, #3c97ba 0%, #236b88 100%) !important;
   border-color: var(--brand) !important;
 }
 
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index a69ab89..237dc56 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -82,8 +82,8 @@ const Header = () => {
           <div className="header-left">
             <a href="/" className="logo">
               <svg viewBox="0 0 40 24" className="logo-icon">
-                <path d="M20 0c-5.5 0-10 4.5-10 10s4.5 10 10 10c2.8 0 5.3-1.1 7.1-2.9L20 10l7.1-7.1C25.3 1.1 22.8 0 20 0z" fill="#2f7d78"/>
-                <path d="M30 4c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.5 0 10-4.5 10-10S35.5 4 30 4zm0 16c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" fill="#2f7d78"/>
+                <path d="M20 0c-5.5 0-10 4.5-10 10s4.5 10 10 10c2.8 0 5.3-1.1 7.1-2.9L20 10l7.1-7.1C25.3 1.1 22.8 0 20 0z" fill="#2f87a8"/>
+                <path d="M30 4c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.5 0 10-4.5 10-10S35.5 4 30 4zm0 16c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" fill="#2f87a8"/>
               </svg>
               <span className="logo-text">图汇</span>
               <span className="logo-domain">DESIGN006.COM</span>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 76c93e4..f0675ab 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,7 +1,7 @@
 :root {
-  --brand: #2f7d78;
-  --brand-strong: #1d5a57;
-  --brand-soft: #e5f4f1;
+  --brand: #2f87a8;
+  --brand-strong: #1f5f78;
+  --brand-soft: #e7f3f8;
   --ink: #241d17;
   --text: #5f5449;
   --muted: #8c8073;
@@ -27,9 +27,9 @@ body {
   line-height: 1.6;
   color: var(--ink);
   background:
-    radial-gradient(circle at top left, rgba(47, 125, 120, 0.12), transparent 22%),
-    radial-gradient(circle at top right, rgba(115, 170, 193, 0.14), transparent 20%),
-    linear-gradient(180deg, #f7fcfb 0%, #edf5f4 100%);
+    radial-gradient(circle at top left, rgba(47, 135, 168, 0.12), transparent 22%),
+    radial-gradient(circle at top right, rgba(135, 173, 193, 0.16), transparent 20%),
+    linear-gradient(180deg, #f8fbfd 0%, #eef4f7 100%);
   min-height: 100vh;
 }
 
@@ -48,12 +48,12 @@ a {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, #2f7d78 0%, #1d5a57 100%);
+  background: linear-gradient(180deg, #2f87a8 0%, #1f5f78 100%);
   border-radius: 999px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(180deg, #2a726d 0%, #174d4a 100%);
+  background: linear-gradient(180deg, #297997 0%, #184e62 100%);
 }
 
 @keyframes fadeIn {
diff --git a/frontend/src/pages/CategoryDetail.jsx b/frontend/src/pages/CategoryDetail.jsx
index 594a638..d49195f 100644
--- a/frontend/src/pages/CategoryDetail.jsx
+++ b/frontend/src/pages/CategoryDetail.jsx
@@ -38,7 +38,7 @@ const CategoryDetail = () => {
     },
     活动: {
       count: '408131',
-      gradient: 'linear-gradient(135deg, #78beb7 0%, #2f7d78 100%)',
+      gradient: 'linear-gradient(135deg, #8ec4d8 0%, #2f87a8 100%)',
       description: '最适合首页承接的热门分类之一，覆盖促销、开业和节点营销素材。',
     },
     医美: {