diff --git a/packages/ui/src/v2/Badge/variants.ts b/packages/ui/src/v2/Badge/variants.ts
index 391419349..275005e0d 100644
--- a/packages/ui/src/v2/Badge/variants.ts
+++ b/packages/ui/src/v2/Badge/variants.ts
@@ -47,12 +47,15 @@ export const badge = tv({
   },
   compoundVariants: [
     // solid: filled step-9 background, white text (dark for light hues)
-    { variant: "solid", color: "neutral", class: "bg-sand-9 text-white" },
-    { variant: "solid", color: "gold", class: "bg-gold-9 text-white" },
-    { variant: "solid", color: "red", class: "bg-red-9 text-white" },
-    { variant: "solid", color: "green", class: "bg-green-9 text-white" },
-    { variant: "solid", color: "amber", class: "bg-amber-9 text-amber-12" },
-    { variant: "solid", color: "sky", class: "bg-sky-9 text-sky-12" },
+    // Gated on highContrast:false so the high-contrast rules below don't also
+    // apply (tailwind-variants/lite has no merge — both would emit and a static
+    // text-white would win, breaking dark mode).
+    { variant: "solid", color: "neutral", highContrast: false, class: "bg-sand-9 text-white" },
+    { variant: "solid", color: "gold", highContrast: false, class: "bg-gold-9 text-white" },
+    { variant: "solid", color: "red", highContrast: false, class: "bg-red-9 text-white" },
+    { variant: "solid", color: "green", highContrast: false, class: "bg-green-9 text-white" },
+    { variant: "solid", color: "amber", highContrast: false, class: "bg-amber-9 text-amber-12" },
+    { variant: "solid", color: "sky", highContrast: false, class: "bg-sky-9 text-sky-12" },
     { variant: "solid", color: "neutral", highContrast: true, class: "bg-sand-12 text-sand-1" },
     { variant: "solid", color: "gold", highContrast: true, class: "bg-gold-12 text-gold-1" },
     { variant: "solid", color: "red", highContrast: true, class: "bg-red-12 text-red-1" },
diff --git a/packages/ui/src/v2/Button/variants.ts b/packages/ui/src/v2/Button/variants.ts
index 8f7d9b7ae..d34ffbf94 100644
--- a/packages/ui/src/v2/Button/variants.ts
+++ b/packages/ui/src/v2/Button/variants.ts
@@ -62,12 +62,15 @@ export const button = tv({
   },
   compoundVariants: [
     // ── solid: filled step-9 background, white text (dark for light hues) ──
-    { variant: ["solid", "classic"], color: "neutral", class: "bg-sand-9 text-white hover:bg-sand-10" },
-    { variant: ["solid", "classic"], color: "gold", class: "bg-gold-9 text-white hover:bg-gold-10" },
-    { variant: ["solid", "classic"], color: "red", class: "bg-red-9 text-white hover:bg-red-10" },
-    { variant: ["solid", "classic"], color: "green", class: "bg-green-9 text-white hover:bg-green-10" },
-    { variant: ["solid", "classic"], color: "amber", class: "bg-amber-9 text-amber-12 hover:bg-amber-10" },
-    { variant: ["solid", "classic"], color: "sky", class: "bg-sky-9 text-sky-12 hover:bg-sky-10" },
+    // Gated on highContrast:false so the high-contrast rules below don't also
+    // apply (tailwind-variants/lite has no merge — both would emit and a static
+    // text-white would win, breaking dark mode).
+    { variant: ["solid", "classic"], color: "neutral", highContrast: false, class: "bg-sand-9 text-white hover:bg-sand-10" },
+    { variant: ["solid", "classic"], color: "gold", highContrast: false, class: "bg-gold-9 text-white hover:bg-gold-10" },
+    { variant: ["solid", "classic"], color: "red", highContrast: false, class: "bg-red-9 text-white hover:bg-red-10" },
+    { variant: ["solid", "classic"], color: "green", highContrast: false, class: "bg-green-9 text-white hover:bg-green-10" },
+    { variant: ["solid", "classic"], color: "amber", highContrast: false, class: "bg-amber-9 text-amber-12 hover:bg-amber-10" },
+    { variant: ["solid", "classic"], color: "sky", highContrast: false, class: "bg-sky-9 text-sky-12 hover:bg-sky-10" },
     // classic adds elevation over solid
     { variant: "classic", class: "shadow-2" },
     // solid high-contrast: step-12 background, step-1 text
diff --git a/packages/ui/src/v2/IconButton/variants.ts b/packages/ui/src/v2/IconButton/variants.ts
index 054d21510..a594490d9 100644
--- a/packages/ui/src/v2/IconButton/variants.ts
+++ b/packages/ui/src/v2/IconButton/variants.ts
@@ -56,12 +56,15 @@ export const iconButton = tv({
   },
   compoundVariants: [
     // solid / classic
-    { variant: ["solid", "classic"], color: "neutral", class: "bg-sand-9 text-white hover:bg-sand-10" },
-    { variant: ["solid", "classic"], color: "gold", class: "bg-gold-9 text-white hover:bg-gold-10" },
-    { variant: ["solid", "classic"], color: "red", class: "bg-red-9 text-white hover:bg-red-10" },
-    { variant: ["solid", "classic"], color: "green", class: "bg-green-9 text-white hover:bg-green-10" },
-    { variant: ["solid", "classic"], color: "amber", class: "bg-amber-9 text-amber-12 hover:bg-amber-10" },
-    { variant: ["solid", "classic"], color: "sky", class: "bg-sky-9 text-sky-12 hover:bg-sky-10" },
+    // Gated on highContrast:false so the high-contrast rules below don't also
+    // apply (tailwind-variants/lite has no merge — both would emit and a static
+    // text-white would win, breaking dark mode).
+    { variant: ["solid", "classic"], color: "neutral", highContrast: false, class: "bg-sand-9 text-white hover:bg-sand-10" },
+    { variant: ["solid", "classic"], color: "gold", highContrast: false, class: "bg-gold-9 text-white hover:bg-gold-10" },
+    { variant: ["solid", "classic"], color: "red", highContrast: false, class: "bg-red-9 text-white hover:bg-red-10" },
+    { variant: ["solid", "classic"], color: "green", highContrast: false, class: "bg-green-9 text-white hover:bg-green-10" },
+    { variant: ["solid", "classic"], color: "amber", highContrast: false, class: "bg-amber-9 text-amber-12 hover:bg-amber-10" },
+    { variant: ["solid", "classic"], color: "sky", highContrast: false, class: "bg-sky-9 text-sky-12 hover:bg-sky-10" },
     { variant: "classic", class: "shadow-2" },
     { variant: ["solid", "classic"], color: "neutral", highContrast: true, class: "bg-sand-12 text-sand-1 hover:bg-sand-12" },
     { variant: ["solid", "classic"], color: "gold", highContrast: true, class: "bg-gold-12 text-gold-1 hover:bg-gold-12" },