diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index d66d880..5b4373a 100644
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -53,7 +53,7 @@ export default async function BlogPost({ params }: { params: Promise<{ slug: str
                   href={post.mediumUrl}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="inline-flex items-center gap-2 px-4 py-2 bg-accent-orange text-on-accent-orange rounded-lg hover:bg-accent-orange-hover transition-colors text-sm font-semibold"
+                  className="inline-flex items-center gap-2 px-4 py-2 bg-btn-primary text-btn-primary-text rounded-lg hover:bg-btn-primary-hover transition-colors text-sm font-semibold"
                 >
                   <FaMedium className="w-4 h-4" />
                   Read on Medium
@@ -103,7 +103,7 @@ export default async function BlogPost({ params }: { params: Promise<{ slug: str
                   href={post.mediumUrl}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="inline-flex items-center gap-2 px-6 py-3 bg-accent-orange text-on-accent-orange rounded-lg hover:bg-accent-orange-hover transition-colors font-semibold"
+                  className="inline-flex items-center gap-2 px-6 py-3 bg-btn-primary text-btn-primary-text rounded-lg hover:bg-btn-primary-hover transition-colors font-semibold"
                 >
                   <FaMedium className="w-5 h-5" />
                   Continue reading on Medium
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index f433b16..584831f 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -46,8 +46,8 @@ export default function Contact() {
             <ScrollReveal>
             <div className="glass-card shine-effect rounded-xl p-6">
               <div className="flex items-center gap-4 mb-4">
-                <div className="w-12 h-12 bg-gradient-to-br from-accent to-accent-hover rounded-xl flex items-center justify-center icon-bounce shadow-lg">
-                  <FaEnvelope className="w-6 h-6 text-on-accent" />
+                <div className="w-12 h-12 bg-gradient-to-br from-btn-primary to-btn-primary-hover rounded-xl flex items-center justify-center icon-bounce shadow-lg">
+                  <FaEnvelope className="w-6 h-6 text-btn-primary-text" />
                 </div>
                 <h2 className="text-2xl font-semibold text-text-primary">Email</h2>
               </div>
@@ -83,8 +83,11 @@ export default function Contact() {
           <ScrollReveal delayMs={100}>
           <div className="glass-card shine-effect rounded-xl p-6">
             <div className="flex items-center gap-4 mb-4">
-              <div className="w-12 h-12 bg-gradient-to-br from-accent-orange to-accent-orange-hover rounded-xl flex items-center justify-center icon-bounce shadow-lg">
-                <FaLinkedin className="w-6 h-6 text-on-accent-orange" />
+              {/* Shares the same primary tokens as the Email badge above (rather
+                  than a fixed brand-orange) so the two contact channels read as
+                  one consistent color instead of an arbitrary blue/orange pair. */}
+              <div className="w-12 h-12 bg-gradient-to-br from-btn-primary to-btn-primary-hover rounded-xl flex items-center justify-center icon-bounce shadow-lg">
+                <FaLinkedin className="w-6 h-6 text-btn-primary-text" />
               </div>
               <h2 className="text-2xl font-semibold text-text-primary">LinkedIn</h2>
             </div>
diff --git a/app/globals.css b/app/globals.css
index 4f245ce..2b7b7c4 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -299,6 +299,27 @@ html[data-theme="xanga"] body a[class*="bg-accent"]:not([class*="hover:bg-accent
   color: var(--on-accent) !important;
 }
 
+/* Same fix for the shared "primary" badge/button tokens (bg-btn-primary,
+   text-btn-primary-text - see tailwind.config.ts) used by things like the
+   "Read on Medium" buttons so they resolve to the theme's primary hue
+   instead of being pinned to orange - those are also plain <a> tags, so
+   they'd otherwise inherit Xanga's blanket link color/hover-box styling. */
+html[data-theme="xanga"] body a[class*="bg-btn-primary"],
+html[data-theme="xanga"] body a[class*="bg-btn-primary"]:hover,
+html[data-theme="xanga"] body a[class*="bg-btn-primary"]:focus-visible {
+  color: var(--btn-primary-text) !important;
+  box-shadow: none !important;
+}
+html[data-theme="xanga"] body a[class*="bg-btn-primary"] *,
+html[data-theme="xanga"] body a[class*="bg-btn-primary"]:hover *,
+html[data-theme="xanga"] body a[class*="bg-btn-primary"]:focus-visible * {
+  color: var(--btn-primary-text) !important;
+}
+html[data-theme="xanga"] body a[class*="hover:bg-btn-primary-hover"]:hover,
+html[data-theme="xanga"] body a[class*="hover:bg-btn-primary-hover"]:focus-visible {
+  background-color: var(--btn-primary-to) !important;
+}
+
 /* Same problem outside the header: several buttons keep a permanent
    text-accent/text-text-primary/text-text-secondary class for their resting
    state, then switch their own background to --accent or --accent-orange on
@@ -347,8 +368,8 @@ html[data-theme="xanga"] body footer {
    forces a card-style background/border/padding onto them and, worse,
    !important-pins their background so hover:bg-accent can never actually
    show. */
-html[data-theme="xanga"] body [class*="rounded-lg"]:not([class*="bg-accent"]),
-html[data-theme="xanga"] body [class*="card"]:not([class*="bg-accent"]),
+html[data-theme="xanga"] body [class*="rounded-lg"]:not([class*="bg-accent"]):not([class*="bg-btn-primary"]),
+html[data-theme="xanga"] body [class*="card"]:not([class*="bg-accent"]):not([class*="bg-btn-primary"]),
 html[data-theme="xanga"] body article,
 html[data-theme="xanga"] body section {
   background-color: var(--bg-secondary) !important;
diff --git a/app/page.tsx b/app/page.tsx
index 43ab537..19bf42c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -99,7 +99,7 @@ export default function Home() {
             {/* Medium Card */}
             <div className="glass-card shine-effect rounded-xl p-8">
               <div className="flex items-center gap-4 mb-4">
-                <div className="w-14 h-14 bg-gradient-to-br from-accent-orange to-accent-orange-hover rounded-xl flex items-center justify-center text-on-accent-orange font-bold text-xl icon-bounce shadow-lg">
+                <div className="w-14 h-14 bg-gradient-to-br from-btn-primary to-btn-primary-hover rounded-xl flex items-center justify-center text-btn-primary-text font-bold text-xl icon-bounce shadow-lg">
                   M
                 </div>
                 <h3 className="text-3xl font-bold text-text-primary">Medium</h3>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d74cb06..b547927 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -34,6 +34,15 @@ const config: Config = {
         'accent-orange-hover': withOpacity('--accent-orange-hover'),
         'on-accent': withOpacity('--on-accent'),
         'on-accent-orange': withOpacity('--on-accent-orange'),
+        // Same "one hue per theme" tokens .gradient-btn uses (blue in light,
+        // orange in dark/xanga - see the --btn-primary-* comment in
+        // globals.css). Exposed as utilities so brand badges/buttons that
+        // aren't full .gradient-btn elements (e.g. contact page icon tiles,
+        // "Read on Medium" buttons) can share the exact same primary color
+        // instead of being locked to accent-orange and clashing with it.
+        'btn-primary': withOpacity('--btn-primary-from'),
+        'btn-primary-hover': withOpacity('--btn-primary-to'),
+        'btn-primary-text': withOpacity('--btn-primary-text'),
         'border': withOpacity('--border'),
         'link': withOpacity('--link'),
         'link-hover': withOpacity('--link-hover'),