diff --git a/packages/website/src/components/site-footer.tsx b/packages/website/src/components/site-footer.tsx
index 1ab11f9bdb..198a60c9ce 100644
--- a/packages/website/src/components/site-footer.tsx
+++ b/packages/website/src/components/site-footer.tsx
@@ -19,7 +19,7 @@ export function SiteFooter({ width = "default" }: SiteFooterProps) {
     <footer className={`${widthClasses} mx-auto mt-12 md:mt-16`}>
       <div className="border-t border-white/10 pt-8 pb-4 grid grid-cols-2 sm:grid-cols-5 gap-8 text-sm">
         <div className="space-y-3">
-          <p className="text-white/60 font-medium">Product</p>
+          <p className="text-extra-muted-foreground">Product</p>
           <div className="space-y-2">
             <a
               href="/blog"
@@ -80,7 +80,7 @@ export function SiteFooter({ width = "default" }: SiteFooterProps) {
           </div>
         </div>
         <div className="space-y-3">
-          <p className="text-white/60 font-medium">Agents</p>
+          <p className="text-extra-muted-foreground">Agents</p>
           <div className="space-y-2">
             <a
               href="/claude-code"
@@ -121,7 +121,7 @@ export function SiteFooter({ width = "default" }: SiteFooterProps) {
           </div>
         </div>
         <div className="space-y-3">
-          <p className="text-white/60 font-medium">Alternatives</p>
+          <p className="text-extra-muted-foreground">Alternatives</p>
           <div className="space-y-2">
             {alternatives.map((page) => (
               <a
@@ -135,7 +135,7 @@ export function SiteFooter({ width = "default" }: SiteFooterProps) {
           </div>
         </div>
         <div className="space-y-3">
-          <p className="text-white/60 font-medium">Community</p>
+          <p className="text-extra-muted-foreground">Community</p>
           <div className="space-y-2">
             <a
               href="https://discord.gg/jz8T2uahpH"
@@ -164,7 +164,7 @@ export function SiteFooter({ width = "default" }: SiteFooterProps) {
           </div>
         </div>
         <div className="space-y-3">
-          <p className="text-white/60 font-medium">Download</p>
+          <p className="text-extra-muted-foreground">Download</p>
           <div className="space-y-2">
             <a
               href={appStoreUrl}