diff --git a/src/app/home-page/components/ArticleFeed.tsx b/src/app/home-page/components/ArticleFeed.tsx
index 54bba22..4c5f37a 100644
--- a/src/app/home-page/components/ArticleFeed.tsx
+++ b/src/app/home-page/components/ArticleFeed.tsx
@@ -372,7 +372,7 @@ export default function ArticleFeed() {
                 value={dateFrom}
                 onChange={(e) => { setDateFrom(e.target.value); setPage(1); }}
                 max={dateTo || undefined}
-                className="bg-[#FFFFFF] border border-[#DCE6F2] text-[#888] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#1D4ED8] transition-colors [color-scheme:dark]"
+                className="bg-[#FFFFFF] border border-[#DCE6F2] text-[#475569] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#1D4ED8] transition-colors"
                 title="From date"
                 aria-label="Filter articles from date"
               />
@@ -382,7 +382,7 @@ export default function ArticleFeed() {
                 value={dateTo}
                 onChange={(e) => { setDateTo(e.target.value); setPage(1); }}
                 min={dateFrom || undefined}
-                className="bg-[#FFFFFF] border border-[#DCE6F2] text-[#888] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#1D4ED8] transition-colors [color-scheme:dark]"
+                className="bg-[#FFFFFF] border border-[#DCE6F2] text-[#475569] text-xs font-body px-3 py-2 rounded-sm focus:outline-none focus:border-[#1D4ED8] transition-colors"
                 title="To date"
                 aria-label="Filter articles to date"
               />
diff --git a/src/app/home-page/components/FeaturedBento.tsx b/src/app/home-page/components/FeaturedBento.tsx
index ef92727..ffc2f4b 100644
--- a/src/app/home-page/components/FeaturedBento.tsx
+++ b/src/app/home-page/components/FeaturedBento.tsx
@@ -252,7 +252,7 @@ export default function FeaturedBento() {
                 </div>
               </div>
               <div className="p-2 md:p-2.5 flex-1 flex flex-col justify-between">
-                <h3 className="font-heading text-[#e0e0e0] text-[12px] md:text-[13px] font-bold leading-snug line-clamp-3 group-hover:text-[#1D4ED8] transition-colors duration-200 mb-1.5 md:mb-2">
+                <h3 className="font-heading text-[#0F172A] text-[12px] md:text-[13px] font-bold leading-snug line-clamp-3 group-hover:text-[#1D4ED8] transition-colors duration-200 mb-1.5 md:mb-2">
                   {article?.title}
                 </h3>
                 <span className="read-more inline-block text-[11px]">Read More »</span>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 9efa6b2..7492f9c 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -218,7 +218,7 @@ body {
   font-size: 12px;
   letter-spacing: 0.04em;
   text-transform: uppercase;
-  color: #cccccc;
+  color: var(--brand-text);
   text-decoration: none;
   padding: 4px 0;
   transition: color var(--transition-fast);