From 15dac7f8766751f6bfa3b137f6e08ad40e4dca4b Mon Sep 17 00:00:00 2001
From: jimi <1847930177@qq.com>
Date: Sun, 8 Mar 2026 21:02:42 +0800
Subject: [PATCH] style: switch storefront theme palette

---
 frontend/src/App.css                   |  2 +-
 frontend/src/components/AuthModal.css  | 24 +++++-----
 frontend/src/components/Categories.css |  8 ++--
 frontend/src/components/Categories.jsx |  2 +-
 frontend/src/components/Designers.css  |  6 +--
 frontend/src/components/Designers.jsx  |  2 +-
 frontend/src/components/Festival.css   |  8 ++--
 frontend/src/components/Footer.css     | 10 ++---
 frontend/src/components/Footer.jsx     |  4 +-
 frontend/src/components/Header.css     | 61 +++++++++++++-------------
 frontend/src/components/Header.jsx     |  4 +-
 frontend/src/components/Hero.css       | 12 ++---
 frontend/src/components/Works.css      | 14 +++---
 frontend/src/index.css                 | 16 +++----
 frontend/src/pages/CategoryDetail.jsx  |  2 +-
 frontend/src/pages/Help.css            |  6 +--
 frontend/src/pages/Help.jsx            |  2 +-
 frontend/src/pages/Protocol.css        |  8 ++--
 frontend/src/pages/WorkDetail.css      | 24 +++++-----
 frontend/src/pages/WorkDetail.jsx      |  4 +-
 20 files changed, 109 insertions(+), 110 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index d3c42df..d404dba 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -30,7 +30,7 @@ body {
 }
 
 .ant-btn-primary:hover {
-  background: linear-gradient(135deg, #f07869 0%, #df5545 100%) !important;
+  background: linear-gradient(135deg, #3b8c86 0%, #21635f 100%) !important;
   border-color: transparent !important;
 }
 
diff --git a/frontend/src/components/AuthModal.css b/frontend/src/components/AuthModal.css
index 8b0936a..f45a83d 100644
--- a/frontend/src/components/AuthModal.css
+++ b/frontend/src/components/AuthModal.css
@@ -21,7 +21,7 @@
 }
 
 .close-icon:hover {
-  color: #ff5a5a;
+  color: var(--brand);
 }
 
 .auth-modal-content {
@@ -62,7 +62,7 @@
 .auth-input:hover,
 .auth-input:focus,
 .auth-input.ant-input-affix-wrapper-focused {
-  border-color: #ff5a5a;
+  border-color: var(--brand);
   box-shadow: 0 0 0 2px rgba(255, 90, 90, 0.1);
 }
 
@@ -82,12 +82,12 @@
 }
 
 .form-options .ant-checkbox-checked .ant-checkbox-inner {
-  background-color: #ff5a5a;
-  border-color: #ff5a5a;
+  background-color: var(--brand);
+  border-color: var(--brand);
 }
 
 .forgot-link {
-  color: #ff5a5a;
+  color: var(--brand);
   font-size: 14px;
 }
 
@@ -100,7 +100,7 @@
   border-radius: 24px;
   font-size: 16px;
   font-weight: 500;
-  background: linear-gradient(135deg, #ff5a5a 0%, #ff8080 100%);
+  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
   border: none;
   box-shadow: 0 4px 12px rgba(255, 90, 90, 0.3);
   transition: all 0.3s;
@@ -179,7 +179,7 @@
 }
 
 .switch-link {
-  color: #ff5a5a;
+  color: var(--brand);
   font-weight: 500;
   margin-left: 4px;
   cursor: pointer;
@@ -205,8 +205,8 @@
   font-size: 14px;
   white-space: nowrap;
   padding: 0 16px;
-  border-color: #ff5a5a;
-  color: #ff5a5a;
+  border-color: var(--brand);
+  color: var(--brand);
 }
 
 .verify-btn:hover:not(:disabled) {
@@ -226,7 +226,7 @@
 }
 
 .agreement-checkbox a {
-  color: #ff5a5a;
+  color: var(--brand);
 }
 
 .agreement-checkbox a:hover {
@@ -234,8 +234,8 @@
 }
 
 .agreement-checkbox .ant-checkbox-checked .ant-checkbox-inner {
-  background-color: #ff5a5a;
-  border-color: #ff5a5a;
+  background-color: var(--brand);
+  border-color: var(--brand);
 }
 
 /* Animation */
diff --git a/frontend/src/components/Categories.css b/frontend/src/components/Categories.css
index b8cf98b..5ffc133 100644
--- a/frontend/src/components/Categories.css
+++ b/frontend/src/components/Categories.css
@@ -30,7 +30,7 @@
   padding: 7px 12px;
   border-radius: 999px;
   background: rgba(239, 106, 91, 0.1);
-  color: #d84e3f;
+  color: var(--brand-strong);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -82,9 +82,9 @@
 }
 
 .scroll-btn.ant-btn:hover {
-  color: #ef6a5b !important;
+  color: var(--brand) !important;
   border-color: rgba(239, 106, 91, 0.4) !important;
-  background: #fff4ef !important;
+  background: var(--brand-soft) !important;
 }
 
 .categories-scroll {
@@ -192,7 +192,7 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  color: #ef6a5b;
+  color: var(--brand);
   font-size: 13px;
   font-weight: 700;
 }
diff --git a/frontend/src/components/Categories.jsx b/frontend/src/components/Categories.jsx
index 09eaf22..b46be02 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, #ffb38a 0%, #ef6a5b 100%)',
+    gradient: 'linear-gradient(135deg, #78beb7 0%, #2f7d78 100%)',
     icon: <NotificationOutlined />,
   },
   {
diff --git a/frontend/src/components/Designers.css b/frontend/src/components/Designers.css
index 97d2c13..da07c08 100644
--- a/frontend/src/components/Designers.css
+++ b/frontend/src/components/Designers.css
@@ -25,7 +25,7 @@
   padding: 7px 12px;
   border-radius: 999px;
   background: rgba(239, 106, 91, 0.1);
-  color: #d84e3f;
+  color: var(--brand-strong);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -175,9 +175,9 @@
 }
 
 .follow-btn.ant-btn:hover {
-  color: #ef6a5b !important;
+  color: var(--brand) !important;
   border-color: rgba(239, 106, 91, 0.4) !important;
-  background: #fff4ef !important;
+  background: var(--brand-soft) !important;
 }
 
 @media (max-width: 900px) {
diff --git a/frontend/src/components/Designers.jsx b/frontend/src/components/Designers.jsx
index d530abf..bfef545 100644
--- a/frontend/src/components/Designers.jsx
+++ b/frontend/src/components/Designers.jsx
@@ -16,7 +16,7 @@ const designers = [
 ];
 
 const gradients = [
-  'linear-gradient(135deg, #ef6a5b 0%, #f4b254 100%)',
+  'linear-gradient(135deg, #2f7d78 0%, #76bcb3 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/Festival.css b/frontend/src/components/Festival.css
index 526732c..ded571f 100644
--- a/frontend/src/components/Festival.css
+++ b/frontend/src/components/Festival.css
@@ -30,7 +30,7 @@
   padding: 7px 12px;
   border-radius: 999px;
   background: rgba(239, 106, 91, 0.1);
-  color: #d84e3f;
+  color: var(--brand-strong);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -82,9 +82,9 @@
 }
 
 .festival-scroll-btn.ant-btn:hover {
-  color: #ef6a5b !important;
+  color: var(--brand) !important;
   border-color: rgba(239, 106, 91, 0.4) !important;
-  background: #fff4ef !important;
+  background: var(--brand-soft) !important;
 }
 
 .festival-scroll {
@@ -179,7 +179,7 @@
   padding: 6px 10px;
   border-radius: 999px;
   background: #fff3ea;
-  color: #d84e3f;
+  color: var(--brand-strong);
   font-size: 12px;
   font-weight: 700;
   white-space: nowrap;
diff --git a/frontend/src/components/Footer.css b/frontend/src/components/Footer.css
index de70930..c081ed9 100644
--- a/frontend/src/components/Footer.css
+++ b/frontend/src/components/Footer.css
@@ -74,7 +74,7 @@
   display: grid;
   place-items: center;
   background: #fff1e9;
-  color: #ef6a5b;
+  color: var(--brand);
   font-size: 18px;
 }
 
@@ -126,8 +126,8 @@
 
 .footer-link:hover {
   border-color: rgba(239, 106, 91, 0.32);
-  color: #ef6a5b;
-  background: #fff4ef;
+  color: var(--brand);
+  background: var(--brand-soft);
 }
 
 .footer-link .anticon {
@@ -154,7 +154,7 @@
   height: 52px;
   border-radius: 18px;
   background: linear-gradient(135deg, #fff1e9 0%, #ffe0d2 100%);
-  color: #ef6a5b;
+  color: var(--brand);
   display: grid;
   place-items: center;
   font-size: 24px;
@@ -188,7 +188,7 @@
 }
 
 .email-link {
-  color: #ef6a5b;
+  color: var(--brand);
   margin-left: 4px;
 }
 
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 6eafd28..898bc03 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="#ef6a5b"
+                  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="#ef6a5b"
+                  fill="#2f7d78"
                 />
               </svg>
               <div>
diff --git a/frontend/src/components/Header.css b/frontend/src/components/Header.css
index f291938..13c8fe6 100644
--- a/frontend/src/components/Header.css
+++ b/frontend/src/components/Header.css
@@ -39,7 +39,7 @@
 .logo-text {
   font-size: 20px;
   font-weight: 700;
-  color: #ef6a5b;
+  color: var(--brand);
 }
 
 .logo-domain {
@@ -66,22 +66,22 @@
 }
 
 .nav-item:hover {
-  color: #ef6a5b;
+  color: var(--brand);
 }
 
 .nav-new {
   position: relative;
 }
 
-.new-dot {
-  position: absolute;
-  top: -2px;
-  right: -8px;
-  width: 6px;
-  height: 6px;
-  background: #ff5a5a;
-  border-radius: 50%;
-}
+.new-dot {
+  position: absolute;
+  top: -2px;
+  right: -8px;
+  width: 6px;
+  height: 6px;
+  background: var(--brand);
+  border-radius: 50%;
+}
 
 .header-search {
   flex: 1;
@@ -94,12 +94,12 @@
   padding: 6px 16px;
 }
 
-.header-search .ant-input-affix-wrapper:hover,
-.header-search .ant-input-affix-wrapper:focus,
-.header-search .ant-input-affix-wrapper-focused {
-  border-color: #ff5a5a;
-  box-shadow: none;
-}
+.header-search .ant-input-affix-wrapper:hover,
+.header-search .ant-input-affix-wrapper:focus,
+.header-search .ant-input-affix-wrapper-focused {
+  border-color: var(--brand);
+  box-shadow: none;
+}
 
 .header-right {
   display: flex;
@@ -108,19 +108,18 @@
   flex-shrink: 0;
 }
 
-.btn-invite {
-  background: #ff5a5a;
-  background: linear-gradient(135deg, #ef6a5b 0%, #d84e3f 100%);
-  border-color: #ff5a5a;
+.btn-invite {
+  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
+  border-color: var(--brand);
   border-radius: 20px;
   padding: 4px 20px;
-  height: 36px;
-}
+  height: 36px;
+}
 
-.btn-invite:hover {
-  background: #ff7070 !important;
-  border-color: #ff7070 !important;
-}
+.btn-invite:hover {
+  background: linear-gradient(135deg, #3b8c86 0%, #21635f 100%) !important;
+  border-color: var(--brand) !important;
+}
 
 .btn-register {
   border-radius: 20px;
@@ -132,8 +131,8 @@
 }
 
 .btn-register:hover {
-  border-color: #ef6a5b !important;
-  color: #ef6a5b !important;
+  border-color: var(--brand) !important;
+  color: var(--brand) !important;
 }
 
 .btn-login {
@@ -146,8 +145,8 @@
 }
 
 .btn-login:hover {
-  border-color: #ef6a5b !important;
-  color: #ef6a5b !important;
+  border-color: var(--brand) !important;
+  color: var(--brand) !important;
 }
 
 @media (max-width: 1024px) {
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index 763a510..a69ab89 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="#ff5a5a"/>
-                <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="#ff5a5a"/>
+                <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"/>
               </svg>
               <span className="logo-text">图汇</span>
               <span className="logo-domain">DESIGN006.COM</span>
diff --git a/frontend/src/components/Hero.css b/frontend/src/components/Hero.css
index 126958f..8a426b2 100644
--- a/frontend/src/components/Hero.css
+++ b/frontend/src/components/Hero.css
@@ -69,7 +69,7 @@
 
 .hero-title span {
   display: block;
-  color: #ef6a5b;
+  color: var(--brand);
 }
 
 .hero-description {
@@ -129,7 +129,7 @@
   padding: 0 22px;
   border-radius: 999px;
   border: none;
-  background: linear-gradient(135deg, #ef6a5b 0%, #d84e3f 100%);
+  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
   box-shadow: 0 14px 30px rgba(216, 78, 63, 0.26);
   font-weight: 700;
 }
@@ -149,7 +149,7 @@
 }
 
 .hero-secondary-btn.ant-btn:hover {
-  color: #ef6a5b !important;
+  color: var(--brand) !important;
   border-color: rgba(239, 106, 91, 0.45) !important;
 }
 
@@ -178,9 +178,9 @@
 }
 
 .hero-tag.ant-tag:hover {
-  color: #ef6a5b;
+  color: var(--brand);
   border-color: rgba(239, 106, 91, 0.45);
-  background: #fff4ef;
+  background: var(--brand-soft);
 }
 
 .hero-stats {
@@ -253,7 +253,7 @@
 
 .hero-stage-label {
   background: rgba(239, 106, 91, 0.12);
-  color: #d84e3f;
+  color: var(--brand-strong);
 }
 
 .hero-stage-badge {
diff --git a/frontend/src/components/Works.css b/frontend/src/components/Works.css
index 4e10431..919f196 100644
--- a/frontend/src/components/Works.css
+++ b/frontend/src/components/Works.css
@@ -32,7 +32,7 @@
   padding: 7px 12px;
   border-radius: 999px;
   background: rgba(239, 106, 91, 0.1);
-  color: #d84e3f;
+  color: var(--brand-strong);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -70,8 +70,8 @@
 }
 
 .section-pill-accent {
-  background: linear-gradient(135deg, #fff0e7 0%, #ffe1d7 100%);
-  color: #d84e3f;
+  background: linear-gradient(135deg, #e7f5f2 0%, #d8eeea 100%);
+  color: var(--brand-strong);
 }
 
 .works-grid {
@@ -160,7 +160,7 @@
   border-radius: 999px;
   background: rgba(255, 250, 244, 0.92);
   border: 1px solid rgba(233, 218, 207, 0.92);
-  color: #d84e3f;
+  color: var(--brand-strong);
   font-size: 14px;
   font-weight: 700;
   backdrop-filter: blur(10px);
@@ -246,7 +246,7 @@
 }
 
 .work-price {
-  color: #db5748;
+  color: var(--brand);
   font-size: 24px;
   font-weight: 800;
   line-height: 1;
@@ -262,11 +262,11 @@
 }
 
 .work-card:hover .work-cta {
-  color: #ef6a5b;
+  color: var(--brand);
 }
 
 .works-section .ant-spin {
-  color: #ef6a5b;
+  color: var(--brand);
 }
 
 .works-section .ant-spin-text {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2215892..76c93e4 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,7 +1,7 @@
 :root {
-  --brand: #ef6a5b;
-  --brand-strong: #d84e3f;
-  --brand-soft: #fff0e7;
+  --brand: #2f7d78;
+  --brand-strong: #1d5a57;
+  --brand-soft: #e5f4f1;
   --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(239, 106, 91, 0.08), transparent 22%),
-    radial-gradient(circle at top right, rgba(244, 178, 84, 0.1), transparent 20%),
-    linear-gradient(180deg, #fffdf9 0%, #f8f2eb 100%);
+    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%);
   min-height: 100vh;
 }
 
@@ -48,12 +48,12 @@ a {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, #ef6a5b 0%, #d84e3f 100%);
+  background: linear-gradient(180deg, #2f7d78 0%, #1d5a57 100%);
   border-radius: 999px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(180deg, #e06152 0%, #cb4638 100%);
+  background: linear-gradient(180deg, #2a726d 0%, #174d4a 100%);
 }
 
 @keyframes fadeIn {
diff --git a/frontend/src/pages/CategoryDetail.jsx b/frontend/src/pages/CategoryDetail.jsx
index 8a1c7a6..594a638 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, #ffb38a 0%, #ef6a5b 100%)',
+      gradient: 'linear-gradient(135deg, #78beb7 0%, #2f7d78 100%)',
       description: '最适合首页承接的热门分类之一，覆盖促销、开业和节点营销素材。',
     },
     医美: {
diff --git a/frontend/src/pages/Help.css b/frontend/src/pages/Help.css
index 0d647f0..41303d4 100644
--- a/frontend/src/pages/Help.css
+++ b/frontend/src/pages/Help.css
@@ -57,7 +57,7 @@
   display: inline-block;
   width: 4px;
   height: 14px;
-  background: #ff5a5a;
+  background: var(--brand);
   margin-right: 8px;
   vertical-align: middle;
 }
@@ -106,7 +106,7 @@
 
 .highlight-box {
   background: #fff5f5;
-  border-left: 4px solid #ff5a5a;
+  border-left: 4px solid var(--brand);
   padding: 20px;
   margin: 24px 0;
   border-radius: 8px;
@@ -115,7 +115,7 @@
 .highlight-box h3 {
   font-size: 16px;
   font-weight: 600;
-  color: #ff5a5a;
+  color: var(--brand);
   margin-bottom: 12px;
 }
 
diff --git a/frontend/src/pages/Help.jsx b/frontend/src/pages/Help.jsx
index a309448..eaeb342 100644
--- a/frontend/src/pages/Help.jsx
+++ b/frontend/src/pages/Help.jsx
@@ -107,7 +107,7 @@ const Help = () => {
 
         <div className="protocol-content help-content">
           <h1>
-            <QuestionCircleOutlined style={{ marginRight: '12px', color: '#ff5a5a' }} />
+                <QuestionCircleOutlined style={{ marginRight: '12px', color: 'var(--brand)' }} />
             帮助中心
           </h1>
           
diff --git a/frontend/src/pages/Protocol.css b/frontend/src/pages/Protocol.css
index 0398c2b..9e3fd4b 100644
--- a/frontend/src/pages/Protocol.css
+++ b/frontend/src/pages/Protocol.css
@@ -50,12 +50,12 @@
 }
 
 .protocol-sidebar a:hover {
-  color: #ff5a5a;
+  color: var(--brand);
   background: #fff5f5;
 }
 
 .protocol-sidebar a.active {
-  color: #ff5a5a;
+  color: var(--brand);
   background: #fff5f5;
   font-weight: 500;
 }
@@ -74,7 +74,7 @@
   color: #333;
   margin-bottom: 24px;
   padding-bottom: 16px;
-  border-bottom: 2px solid #ff5a5a;
+  border-bottom: 2px solid var(--brand);
 }
 
 .protocol-content h2 {
@@ -119,7 +119,7 @@
   border-radius: 4px;
   font-family: 'Courier New', monospace;
   font-size: 13px;
-  color: #ff5a5a;
+  color: var(--brand);
 }
 
 .level-table {
diff --git a/frontend/src/pages/WorkDetail.css b/frontend/src/pages/WorkDetail.css
index 83efbbb..eea82b5 100644
--- a/frontend/src/pages/WorkDetail.css
+++ b/frontend/src/pages/WorkDetail.css
@@ -33,7 +33,7 @@
 }
 
 .breadcrumb a:hover {
-  color: #ef6a5b;
+  color: var(--brand);
 }
 
 .breadcrumb .current {
@@ -64,7 +64,7 @@
   padding: 8px 12px;
   border-radius: 999px;
   background: rgba(239, 106, 91, 0.1);
-  color: #d84e3f;
+  color: var(--brand-strong);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.08em;
@@ -149,8 +149,8 @@
 .preview-badge {
   padding: 8px 12px;
   border-radius: 999px;
-  background: #fff0e7;
-  color: #d84e3f;
+  background: var(--brand-soft);
+  color: var(--brand-strong);
   font-size: 12px;
   font-weight: 700;
 }
@@ -203,7 +203,7 @@
 }
 
 .preview-benefit .anticon {
-  color: #ef6a5b;
+  color: var(--brand);
   font-size: 16px;
   margin-top: 2px;
 }
@@ -322,7 +322,7 @@
 }
 
 .designer-level {
-  color: #ef6a5b;
+  color: var(--brand);
   margin-right: 4px;
 }
 
@@ -376,7 +376,7 @@
 }
 
 .price-value {
-  color: #da5748;
+  color: var(--brand);
   font-size: 40px;
   line-height: 1;
   font-weight: 800;
@@ -410,7 +410,7 @@
 }
 
 .info-value.highlight {
-  color: #db5748;
+  color: var(--brand);
 }
 
 .work-actions {
@@ -424,7 +424,7 @@
   height: 50px;
   border: none;
   border-radius: 18px;
-  background: linear-gradient(135deg, #ef6a5b 0%, #d84e3f 100%);
+  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
   box-shadow: 0 16px 30px rgba(216, 78, 63, 0.24);
   font-weight: 700;
 }
@@ -440,7 +440,7 @@
 
 .icon-btn.ant-btn:hover,
 .icon-btn.ant-btn.collected {
-  color: #ef6a5b;
+  color: var(--brand);
   border-color: rgba(239, 106, 91, 0.4);
 }
 
@@ -484,7 +484,7 @@
 .designer-level-badge {
   padding: 4px 10px;
   border-radius: 999px;
-  background: #ef6a5b;
+  background: var(--brand);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
@@ -572,7 +572,7 @@
 }
 
 .stat-row .anticon {
-  color: #ef6a5b;
+  color: var(--brand);
 }
 
 @media (max-width: 1200px) {
diff --git a/frontend/src/pages/WorkDetail.jsx b/frontend/src/pages/WorkDetail.jsx
index 92c273d..633b3ea 100644
--- a/frontend/src/pages/WorkDetail.jsx
+++ b/frontend/src/pages/WorkDetail.jsx
@@ -522,7 +522,7 @@ const WorkDetail = () => {
             <p>作品：{workData.title}</p>
             <p>
               价格：
-              <span style={{ color: '#ff5a5a', fontSize: '18px', fontWeight: 'bold' }}>
+              <span style={{ color: 'var(--brand)', fontSize: '18px', fontWeight: 'bold' }}>
                 ¥{workData.price}
               </span>
             </p>
@@ -542,7 +542,7 @@ const WorkDetail = () => {
               <QRCodeSVG value={paymentUrl} size={200} level="H" includeMargin />
             </div>
             <p style={{ marginTop: '20px', fontSize: '16px', fontWeight: 'bold' }}>
-              订单金额：<span style={{ color: '#ff5a5a' }}>¥{workData.price}</span>
+              订单金额：<span style={{ color: 'var(--brand)' }}>¥{workData.price}</span>
             </p>
             <p style={{ color: '#666', fontSize: '14px' }}>请使用微信或支付宝扫码支付</p>
             {checkingPayment && (