diff --git a/frontend/src/components/home/BeforeAfter.tsx b/frontend/src/components/home/BeforeAfter.tsx
index c45dd75..a27ab6d 100644
--- a/frontend/src/components/home/BeforeAfter.tsx
+++ b/frontend/src/components/home/BeforeAfter.tsx
@@ -48,7 +48,7 @@ export function BeforeAfter() {
   }
 
   return (
-    <section className="bg-char py-24 lg:py-32" aria-labelledby="ba-title">
+    <section className="bg-ink py-24 lg:py-32" aria-labelledby="ba-title">
       <div className="mx-auto max-w-site px-6 lg:px-10">
         
         <SectionHeading
diff --git a/frontend/src/components/home/Faq.tsx b/frontend/src/components/home/Faq.tsx
index 3dc02d1..5e89737 100644
--- a/frontend/src/components/home/Faq.tsx
+++ b/frontend/src/components/home/Faq.tsx
@@ -11,13 +11,13 @@ type FaqProps = {
   hideHeading?: boolean;
 }
 
-export function Faq({ hideHeading = false }: FaqProps) {
+export function Faq({ hideHeading = false, tone = 'gray' }: FaqProps & { tone?: 'black' | 'gray' }) {
   const { faqs } = useSite()
   const { t } = useLang()
   const [open, setOpen] = useState<number | null>(0)
 
   return (
-    <section className="bg-ink py-24 lg:py-32" aria-labelledby="faq-title">
+    <section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="faq-title">
 
       <div className={hideHeading ? "mx-auto max-w-4xl px-6 lg:px-10" : "mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10"}>
 
diff --git a/frontend/src/components/home/FeaturedProjects.tsx b/frontend/src/components/home/FeaturedProjects.tsx
index 304f3ef..297de99 100644
--- a/frontend/src/components/home/FeaturedProjects.tsx
+++ b/frontend/src/components/home/FeaturedProjects.tsx
@@ -22,7 +22,7 @@ export function FeaturedProjects() {
     .sort((a, b) => FEATURED_TITLES.indexOf(a.title) - FEATURED_TITLES.indexOf(b.title))
 
   return (
-    <section className="bg-ink py-24 lg:py-32" aria-labelledby="projects-title">
+    <section className="bg-char py-24 lg:py-32" aria-labelledby="projects-title">
       <div className="mx-auto max-w-site px-6 lg:px-10">
         <SectionHeading title={heading.title} lead={heading.lead} headingKey="featured_projects" />
 
diff --git a/frontend/src/components/home/Services.tsx b/frontend/src/components/home/Services.tsx
index 09f9397..fc4a4c9 100644
--- a/frontend/src/components/home/Services.tsx
+++ b/frontend/src/components/home/Services.tsx
@@ -6,7 +6,7 @@ import { useFieldSaver } from '../../admin/AdminContext'
 import { InlineEdit } from '../admin/InlineEdit'
 import { AddItemButton, EditableItem } from '../../admin/Editable'
 
-export function Services() {
+export function Services({ tone = 'black' }: { tone?: 'black' | 'gray' } = {}) {
   const { services } = useSite()
   const heading = useSectionHeading('services')
   const save = useFieldSaver()
@@ -18,7 +18,7 @@ export function Services() {
     })
 
   return (
-    <section className="bg-ink py-24 lg:py-32" aria-labelledby="services-title">
+    <section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="services-title">
       <div className="mx-auto max-w-site px-6 lg:px-10">
         <Reveal className="max-w-2xl text-start">
 
diff --git a/frontend/src/components/home/Stats.tsx b/frontend/src/components/home/Stats.tsx
index 6a64629..926c2b5 100644
--- a/frontend/src/components/home/Stats.tsx
+++ b/frontend/src/components/home/Stats.tsx
@@ -65,13 +65,13 @@ function Counter({ value }: { value: string | number }) {
   return <span ref={ref}>{renderValue}</span>;
 }
 
-export function Stats() {
+export function Stats({ tone = 'black' }: { tone?: 'black' | 'gray' } = {}) {
   const { stats } = useSite();
   const { t } = useLang();
   const save = useFieldSaver();
 
   return (
-    <section className="bg-char py-16" aria-label={t('statsAria')}>
+    <section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-16`} aria-label={t('statsAria')}>
       <div className="mx-auto grid max-w-site grid-cols-2 gap-y-12 px-6 lg:grid-cols-4 lg:px-10">
         {stats.map((stat) =>
         <EditableItem key={stat.id} resource="stats" item={stat}>
diff --git a/frontend/src/components/home/Story.tsx b/frontend/src/components/home/Story.tsx
index 8cd985d..9c70c5a 100644
--- a/frontend/src/components/home/Story.tsx
+++ b/frontend/src/components/home/Story.tsx
@@ -14,9 +14,11 @@ type StoryProps = {
   showQuote?: boolean;
   alignTop?: boolean;
   children?: React.ReactNode;
+  /** پس‌زمینه: black = char (تیره) و gray = ink (روشن‌تر) — ریتم تناوب بخش‌ها */
+  tone?: 'black' | 'gray';
 }
 
-export function Story({ showLink = true, showLabel = true, showQuote = false, alignTop = false, children }: StoryProps) {
+export function Story({ showLink = true, showLabel = true, showQuote = false, alignTop = false, tone = 'gray', children }: StoryProps) {
   const { story } = useSite()
   const { href } = useLang()
   const save = useFieldSaver()
@@ -33,7 +35,7 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
   }
 
   return (
-    <section id="story" className="bg-ink py-24 lg:py-32" aria-labelledby="story-title">
+    <section id="story" className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="story-title">
       <div className={`mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-2 lg:px-10 ${alignTop ? 'items-start' : 'items-center'}`}>
         <div>
           {showLabel && (
diff --git a/frontend/src/components/home/Team.tsx b/frontend/src/components/home/Team.tsx
index 8a155f9..b63dd71 100644
--- a/frontend/src/components/home/Team.tsx
+++ b/frontend/src/components/home/Team.tsx
@@ -5,11 +5,11 @@ import { useSite } from '../../api'
 import { useLang } from '../../i18n/lang'
 import { AddItemButton, EditableItem } from '../../admin/Editable'
 
-export function Team() {
+export function Team({ tone = 'gray' }: { tone?: 'black' | 'gray' } = {}) {
   const { team } = useSite()
   const { t } = useLang()
   return (
-    <section className="bg-ink py-24 lg:py-32" aria-labelledby="team-title" >
+    <section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="team-title" >
       <div className="mx-auto max-w-site px-6 lg:px-10 ">
         <SectionHeading
           title={t('fallbackTeamTitle')}
diff --git a/frontend/src/components/home/Timeline.tsx b/frontend/src/components/home/Timeline.tsx
index 304c10c..cb6c02c 100644
--- a/frontend/src/components/home/Timeline.tsx
+++ b/frontend/src/components/home/Timeline.tsx
@@ -52,7 +52,7 @@ function Item({ item, index, featured = false, onLi }: { item: Milestone; index:
   )
 }
 
-export function Timeline() {
+export function Timeline({ tone = 'gray' }: { tone?: 'black' | 'gray' } = {}) {
   const { timeline } = useSite()
   const { t } = useLang()
   const ref = useRef<HTMLOListElement>(null)
@@ -85,7 +85,7 @@ export function Timeline() {
   }, [])
 
   return (
-    <section className="bg-char py-24 md:py-32" aria-labelledby="timeline-title">
+    <section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 md:py-32`} aria-labelledby="timeline-title">
       <div className="mx-auto w-full max-w-site px-6 lg:px-10">
 
         <div className="mb-16">
diff --git a/frontend/src/components/home/WhyUs.tsx b/frontend/src/components/home/WhyUs.tsx
index 4ae1d81..f8ae052 100644
--- a/frontend/src/components/home/WhyUs.tsx
+++ b/frontend/src/components/home/WhyUs.tsx
@@ -7,7 +7,7 @@ import { InlineEdit } from '../admin/InlineEdit';
 import { useFieldSaver } from '../../admin/AdminContext';
 import { useLang, formatNumber } from '../../i18n/lang';
 
-export function WhyUs() {
+export function WhyUs({ tone = 'black' }: { tone?: 'black' | 'gray' } = {}) {
   const { why_us } = useSite();
   const { lang } = useLang();
   const heading = useSectionHeading('why_us');
@@ -20,7 +20,7 @@ export function WhyUs() {
     });
 
   return (
-    <section className="bg-ink py-24 lg:py-32" aria-labelledby="why-title">
+    <section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="why-title">
       <div className="mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10">
         <div className="lg:col-span-5">
           <SectionHeading
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index 60e21fa..d1f1218 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -12,12 +12,12 @@ export function About() {
     <>
       <PageHero pageKey="about" />
 
-      <Story showLink={false} showLabel={false} showQuote={true} alignTop={true} />
+      <Story showLink={false} showLabel={false} showQuote={true} alignTop={true} tone="black" />
 
-      <Stats />
-      <Timeline />
-      <WhyUs />
-      <Team />
+      <Stats tone="gray" />
+      <Timeline tone="black" />
+      <WhyUs tone="gray" />
+      <Team tone="black" />
       <ContactSection />
     </>
   )
diff --git a/frontend/src/pages/ArticleDetail.tsx b/frontend/src/pages/ArticleDetail.tsx
index c0d9232..39d2bb0 100644
--- a/frontend/src/pages/ArticleDetail.tsx
+++ b/frontend/src/pages/ArticleDetail.tsx
@@ -166,7 +166,7 @@ export function ArticleDetail() {
         </div>
       </section>
 
-      <article className="bg-ink py-20 lg:py-28">
+      <article className="bg-char py-20 lg:py-28">
         <div className="mx-auto max-w-site px-6 lg:px-10">
           <div
             dir={dir}
@@ -214,7 +214,7 @@ export function ArticleDetail() {
         </div>
       </article>
 
-      <section className="bg-char py-20 lg:py-28" aria-label={t('relatedArticlesAria')}>
+      <section className="bg-ink py-20 lg:py-28" aria-label={t('relatedArticlesAria')}>
         <div className="mx-auto max-w-site px-6 lg:px-10">
           <h2 className="text-section font-bold text-ivory">{t('relatedArticles')}</h2>
           <div className="mt-6 h-px w-24 bg-copper/70" />
diff --git a/frontend/src/pages/Blog.tsx b/frontend/src/pages/Blog.tsx
index fd27eea..8a8be9c 100644
--- a/frontend/src/pages/Blog.tsx
+++ b/frontend/src/pages/Blog.tsx
@@ -46,7 +46,7 @@ export function Blog() {
     return (
       <>
         <PageHero pageKey="blog" />
-        <section className="bg-ink py-24 lg:py-32" aria-label={t('articlesAria')}>
+        <section className="bg-char py-24 lg:py-32" aria-label={t('articlesAria')}>
           <div className="mx-auto max-w-site px-6 text-center lg:px-10">
             <h2 className="text-3xl font-bold text-ivory">{t('blogEmpty')}</h2>
             <p className="mt-4 text-sm font-light text-ivory/60">
@@ -66,7 +66,7 @@ export function Blog() {
     <>
       <PageHero pageKey="blog" />
 
-      <section className="bg-ink py-24 lg:py-32" aria-label={t('articlesAria')}>
+      <section className="bg-char py-24 lg:py-32" aria-label={t('articlesAria')}>
         <div className="mx-auto max-w-site px-6 lg:px-10">
           <div className="mb-10 flex justify-start">{writeButton}</div>
           <Reveal>
diff --git a/frontend/src/pages/FaqPage.tsx b/frontend/src/pages/FaqPage.tsx
index c2849db..01da8df 100644
--- a/frontend/src/pages/FaqPage.tsx
+++ b/frontend/src/pages/FaqPage.tsx
@@ -8,7 +8,7 @@ export function FaqPage() {
     <>
       <PageHero pageKey="faq" />
 
-      <Faq hideHeading={true} />
+      <Faq hideHeading={true} tone="black" />
 
       <ContactSection />
     </>
diff --git a/frontend/src/pages/Investment.tsx b/frontend/src/pages/Investment.tsx
index ab34985..74292ca 100644
--- a/frontend/src/pages/Investment.tsx
+++ b/frontend/src/pages/Investment.tsx
@@ -15,7 +15,7 @@ export function Investment() {
     <>
       <PageHero pageKey="investment" />
 
-      <section className="bg-ink py-24 lg:py-32" aria-labelledby="models-title">
+      <section className="bg-char py-24 lg:py-32" aria-labelledby="models-title">
         <div className="mx-auto max-w-site px-6 lg:px-10">
           <SectionHeading title={heading.title} lead={heading.lead} align="center" />
           <div className="mt-14 grid gap-6 lg:grid-cols-3">
@@ -51,7 +51,7 @@ export function Investment() {
         </div>
       </section>
 
-      <Stats />
+      <Stats tone="gray" />
       <ContactSection />
     </>
   )
diff --git a/frontend/src/pages/ServicesPage.tsx b/frontend/src/pages/ServicesPage.tsx
index fb5743f..3a536aa 100644
--- a/frontend/src/pages/ServicesPage.tsx
+++ b/frontend/src/pages/ServicesPage.tsx
@@ -36,11 +36,11 @@ export function ServicesPage() {
         </div>
       </section>
 
-      <Services />
+      <Services tone="gray" />
 
 
 
-      <Faq />
+      <Faq tone="black" />
       <ContactSection />
     </>
   )