diff --git a/src/app/(marketing)/about/about-content-v4.tsx b/src/app/(marketing)/about/about-content-v4.tsx
index 5d03bde..711f909 100644
--- a/src/app/(marketing)/about/about-content-v4.tsx
+++ b/src/app/(marketing)/about/about-content-v4.tsx
@@ -48,7 +48,7 @@ function HeroSection({ data }: { data: AboutData }) {
   const titleLines = (data.heroTitle || '').split('\n');
 
   return (
-    <section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
+    <section className="relative min-h-[85vh] flex items-center overflow-hidden bg-bg-primary">
       <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
         <div className="max-w-4xl">
           <motion.div
@@ -163,7 +163,7 @@ function WhoWeAreSection({ data }: { data: AboutData }) {
   const values = data.coreValues ?? [];
 
   return (
-    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
+    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-primary">
       <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
         <div className="grid lg:grid-cols-12 gap-12 sm:gap-16 md:gap-20 items-start">
           <motion.div
@@ -305,7 +305,7 @@ function CertificationsSection({ data }: { data: AboutData }) {
   // 初创阶段无资质/伙伴数据时，如实呈现「建设中」状态而非隐藏整块（零编造）
   if (certifications.length === 0 && partners.length === 0) {
     return (
-      <section className="relative py-20 sm:py-28 md:py-32 overflow-hidden bg-white">
+      <section className="relative py-20 sm:py-28 md:py-32 overflow-hidden bg-bg-primary">
         <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
           <motion.div
             initial={{ opacity: 0, y: 30 }}
@@ -336,7 +336,7 @@ function CertificationsSection({ data }: { data: AboutData }) {
   }
 
   return (
-    <section className="relative py-20 sm:py-28 md:py-32 overflow-hidden bg-white">
+    <section className="relative py-20 sm:py-28 md:py-32 overflow-hidden bg-bg-primary">
       <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
         <div className="grid lg:grid-cols-2 gap-12 md:gap-16 lg:gap-20">
           {certifications.length > 0 && (
@@ -359,7 +359,7 @@ function CertificationsSection({ data }: { data: AboutData }) {
                   return (
                     <div
                       key={cert.name}
-                      className="p-5 sm:p-6 border border-border-primary bg-white hover:bg-bg-secondary hover:border-border-secondary transition-all duration-300"
+                      className="p-5 sm:p-6 border border-border-primary bg-bg-primary hover:bg-bg-secondary hover:border-border-secondary transition-all duration-300"
                     >
                       <div className="w-10 h-10 flex items-center justify-center mb-4 text-text-secondary">
                         <Icon className="w-5 h-5" />
@@ -390,7 +390,7 @@ function CertificationsSection({ data }: { data: AboutData }) {
                 {partners.map((partner) => (
                   <div
                     key={partner}
-                    className="aspect-[3/2] flex items-center justify-center border border-border-primary bg-white hover:bg-bg-secondary hover:border-border-secondary transition-all duration-300 group"
+                    className="aspect-[3/2] flex items-center justify-center border border-border-primary bg-bg-primary hover:bg-bg-secondary hover:border-border-secondary transition-all duration-300 group"
                   >
                     <span className="text-sm font-bold text-text-muted group-hover:text-text-secondary transition-colors duration-300">
                       {partner}
@@ -457,14 +457,14 @@ export default function AboutContentV4({ data }: { data: Record<string, unknown>
   // Empty state when no CMS data is available
   if (!data || Object.keys(data).length === 0) {
     return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-bg-primary flex items-center justify-center">
         <div className="text-text-muted text-lg">内容暂未发布</div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-white text-ink overflow-x-hidden">
+    <div className="min-h-screen bg-bg-primary text-ink overflow-x-hidden">
       <HeroSection data={aboutData} />
       <MetricsStrip data={aboutData} />
       <WhoWeAreSection data={aboutData} />
diff --git a/src/app/(marketing)/about/brand/brand-content.tsx b/src/app/(marketing)/about/brand/brand-content.tsx
index 303c816..ae8b7d9 100644
--- a/src/app/(marketing)/about/brand/brand-content.tsx
+++ b/src/app/(marketing)/about/brand/brand-content.tsx
@@ -66,9 +66,9 @@ const brandStats = [
 
 export default function BrandContent() {
   return (
-    <main className="min-h-screen bg-white overflow-x-hidden">
+    <main className="min-h-screen bg-bg-primary overflow-x-hidden">
       {/* ============ L1: Hero 品牌情感入口 ============ */}
-      <section className="relative min-h-[90vh] flex items-center overflow-hidden bg-white">
+      <section className="relative min-h-[90vh] flex items-center overflow-hidden bg-bg-primary">
         <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
           <div className="max-w-4xl">
             {/* 眉标 */}
@@ -161,7 +161,7 @@ export default function BrandContent() {
           <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
             {brandValues.map((item, i) => (
               <ScrollReveal key={item.title} delay={i * 0.1}>
-                <div className="group relative bg-white border border-border-primary p-8 h-full transition-all duration-300 hover:border-brand/20 hover:shadow-md">
+                <div className="group relative bg-bg-primary border border-border-primary p-8 h-full transition-all duration-300 hover:border-brand/20 hover:shadow-md">
                   <div className="absolute top-0 left-0 right-0 h-0.5 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
                   <div className="w-12 h-12 flex items-center justify-center bg-brand/[0.06] text-brand mb-6 transition-colors duration-300 group-hover:bg-brand group-hover:text-white">
                     <item.icon className="w-5 h-5" />
@@ -176,7 +176,7 @@ export default function BrandContent() {
       </section>
 
       {/* 品牌使命与愿景 */}
-      <section className="relative py-24 sm:py-32 md:py-40 overflow-hidden bg-white">
+      <section className="relative py-24 sm:py-32 md:py-40 overflow-hidden bg-bg-primary">
         <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
           <div className="grid lg:grid-cols-2 gap-16 lg:gap-20">
             {/* 使命 */}
@@ -299,7 +299,7 @@ export default function BrandContent() {
       </section>
 
       {/* 品牌实力 */}
-      <section className="relative py-24 sm:py-32 md:py-40 overflow-hidden bg-white">
+      <section className="relative py-24 sm:py-32 md:py-40 overflow-hidden bg-bg-primary">
         <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
           <ScrollReveal className="max-w-3xl mb-16 sm:mb-20">
             <div className="flex items-center gap-3 mb-6">
@@ -322,7 +322,7 @@ export default function BrandContent() {
               { icon: Globe, title: '多行业场景', desc: '方法论适配制造、零售、医疗、金融、教育、物流等多行业场景' },
             ].map((item, i) => (
               <ScrollReveal key={item.title} delay={i * 0.1}>
-                <div className="group relative bg-bg-secondary border border-border-primary p-8 h-full transition-all duration-300 hover:border-brand/20 hover:bg-white hover:shadow-sm">
+                <div className="group relative bg-bg-secondary border border-border-primary p-8 h-full transition-all duration-300 hover:border-brand/20 hover:bg-bg-primary hover:shadow-sm">
                   <div className="w-12 h-12 flex items-center justify-center bg-brand/[0.06] text-brand mb-6 transition-colors duration-300 group-hover:bg-brand group-hover:text-white">
                     <item.icon className="w-5 h-5" />
                   </div>