diff --git a/app/components/HeaderTab.js b/app/components/HeaderTab.js
index 6e1e18a..0756504 100644
--- a/app/components/HeaderTab.js
+++ b/app/components/HeaderTab.js
@@ -10,7 +10,7 @@ export default function HeaderTab({
 
   return (
     <div
-      className={`HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-scale-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${stretchClasses} ${className}`}
+      className={`HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-inverse-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-scale-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${stretchClasses} ${className}`}
       {...props}
     >
       {children}
diff --git a/app/components/HeroBanner.js b/app/components/HeroBanner.js
index e68f3c7..af595c9 100644
--- a/app/components/HeroBanner.js
+++ b/app/components/HeroBanner.js
@@ -8,7 +8,7 @@ const HeroBanner = ({ title, subtitle, description, ctaText, ctaHref }) => {
     <section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]">
       <div className="flex flex-col gap-[var(--spacing-scale-010)]">
         {/* Frame container for content */}
-        <div className="bg-[var(--color-surface-default-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[var(--radius-measures-radius-medium)] rounded-br-[var(--radius-measures-radius-medium)] rounded-bl-[var(--radius-measures-radius-medium)] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden">
+        <div className="bg-[var(--color-surface-inverse-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[var(--radius-measures-radius-medium)] rounded-br-[var(--radius-measures-radius-medium)] rounded-bl-[var(--radius-measures-radius-medium)] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden">
           {/* DECORATIONS (behind content) */}
           <HeroDecor
             className="pointer-events-none absolute z-0
diff --git a/app/tailwind.css b/app/tailwind.css
index a05ba7e..df97465 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -372,7 +372,7 @@
   --color-surface-default-brand-lavender: var(--color-lavender-lavender200);
   --color-surface-default-brand-lighter-accent: var(--color-yellow-yellow100);
   --color-surface-default-brand-lime: var(--color-lime-lime100);
-  --color-surface-default-brand-primary: var(--color-yellow-yellow50);
+  --color-surface-default-brand-primary: var(--color-yellow-yellow100);
   --color-surface-default-brand-royal: var(--color-royal-blue-royal-blue50);
   --color-surface-default-brand-rust: var(--color-rust-rust100);
   --color-surface-default-brand-teal: var(--color-teal-teal50);
@@ -389,7 +389,7 @@
   --color-surface-default-utility-warning: var(--color-yellow-yellow500);
 
   --color-surface-inverse-brand-accent: var(--color-yellow-yellow100);
-  --color-surface-inverse-brand-primary: var(--color-yellow-yellow100);
+  --color-surface-inverse-brand-primary: var(--color-yellow-yellow50);
   --color-surface-inverse-brand-secondary: var(--color-rust-rust300);
   --color-surface-inverse-primary: var(--color-gray-000);
   --color-surface-inverse-secondary: var(--color-gray-100);