diff --git a/packages/website/src/components/HomeHero.astro b/packages/website/src/components/HomeHero.astro
index 3105cc0e9..b97d3e91b 100644
--- a/packages/website/src/components/HomeHero.astro
+++ b/packages/website/src/components/HomeHero.astro
@@ -16,24 +16,24 @@ const strings = getStrings(locale);
     --p-2: 0%;
     --p-3: 0%;
     --p-4: 0%;
-    --p-5: 0%;
+    --p-7: 0%;
 
     --g-1-dark: var(--blue-3);
-    --g-1-light: var(--blue-5);
+    --g-1-light: var(--blue-7);
     --g-2-dark: var(--violet-3);
-    --g-2-light: var(--violet-5);
+    --g-2-light: var(--violet-7);
     --g-3-dark: var(--purple-3);
-    --g-3-light: var(--purple-5);
+    --g-3-light: var(--purple-7);
     --g-4-dark: var(--crimson-3);
-    --g-4-light: var(--crimson-5);
-    --g-5-dark: var(--tomato-3);
-    --g-5-light: var(--tomato-5);
+    --g-4-light: var(--crimson-7);
+    --g-7-dark: var(--tomato-3);
+    --g-7-light: var(--tomato-7);
 
     --g-1: color-mix(in srgb, var(--g-1-dark), var(--g-1-light) var(--p-1));
     --g-2: color-mix(in srgb, var(--g-2-dark), var(--g-2-light) var(--p-2));
     --g-3: color-mix(in srgb, var(--g-3-dark), var(--g-3-light) var(--p-3));
     --g-4: color-mix(in srgb, var(--g-4-dark), var(--g-4-light) var(--p-4));
-    --g-5: color-mix(in srgb, var(--g-5-dark), var(--g-5-light) var(--p-5));
+    --g-7: color-mix(in srgb, var(--g-7-dark), var(--g-7-light) var(--p-7));
 
     background: linear-gradient(
       45deg,
@@ -41,34 +41,34 @@ const strings = getStrings(locale);
       var(--g-2),
       var(--g-3),
       var(--g-4),
-      var(--g-5)
+      var(--g-7)
     );
   }
 
   #home-hero[data-variant='pride'] {
     --g-1-dark: var(--crimson-3);
-    --g-1-light: var(--crimson-5);
+    --g-1-light: var(--crimson-7);
     --g-2-dark: var(--orange-3);
-    --g-2-light: var(--orange-5);
+    --g-2-light: var(--orange-7);
     --g-3-dark: var(--yellow-3);
-    --g-3-light: var(--yellow-5);
+    --g-3-light: var(--yellow-7);
     --g-4-dark: var(--blue-3);
-    --g-4-light: var(--blue-5);
-    --g-5-dark: var(--purple-3);
-    --g-5-light: var(--purple-5);
+    --g-4-light: var(--blue-7);
+    --g-7-dark: var(--purple-3);
+    --g-7-light: var(--purple-7);
   }
 
   #home-hero[data-variant='spooky'] {
     --g-1-dark: var(--orange-3);
-    --g-1-light: var(--orange-5);
+    --g-1-light: var(--orange-7);
     --g-2-dark: var(--tomato-3);
-    --g-2-light: var(--tomato-5);
+    --g-2-light: var(--tomato-7);
     --g-3-dark: var(--orange-3);
-    --g-3-light: var(--orange-5);
+    --g-3-light: var(--orange-7);
     --g-4-dark: var(--tomato-3);
-    --g-4-light: var(--tomato-5);
-    --g-5-dark: var(--orange-3);
-    --g-5-light: var(--orange-5);
+    --g-4-light: var(--tomato-7);
+    --g-7-dark: var(--orange-3);
+    --g-7-light: var(--orange-7);
   }
 </style>