diff --git a/apps/www/components/CTABanner/index.tsx b/apps/www/components/CTABanner/index.tsx
index 731f3111051..d1313ad6e12 100644
--- a/apps/www/components/CTABanner/index.tsx
+++ b/apps/www/components/CTABanner/index.tsx
@@ -5,7 +5,7 @@ const CTABanner = (props: any) => {
   return (
     <div
       className={`
-        bg-scale-100 grid grid-cols-12 items-center gap-4 border-t py-32 text-center
+        bg-scale-200 grid grid-cols-12 items-center gap-4 border-t py-32 text-center
         ${darkerBg ? 'dark:bg-dark-900' : ''} px-16
       `}
     >
diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx
index dfbadd56928..721ea03c254 100644
--- a/apps/www/components/Nav/index.tsx
+++ b/apps/www/components/Nav/index.tsx
@@ -119,7 +119,7 @@ const Nav = () => {
     >
       <button
         className={[
-          'text-scale-900 focus:ring-brand-900 dark:bg-scale-100 dark:hover:bg-scale-300 inline-flex items-center justify-center rounded-md bg-gray-50 p-2 hover:bg-white focus:outline-none focus:ring-2 focus:ring-inset',
+          'text-scale-900 focus:ring-brand-900 dark:bg-scale-200 dark:hover:bg-scale-300 inline-flex items-center justify-center rounded-md bg-gray-50 p-2 hover:bg-white focus:outline-none focus:ring-2 focus:ring-inset',
           showLaunchWeekNavMode && '!bg-transparent border border-[#be9eea]',
         ].join(' ')}
         aria-expanded="false"
@@ -202,7 +202,7 @@ const Nav = () => {
       <div className="sticky top-0 z-40 transform" style={{ transform: 'translate3d(0,0,999px)' }}>
         <div
           className={[
-            'absolute inset-0 h-full w-full opacity-80 bg-scale-100',
+            'absolute inset-0 h-full w-full opacity-80 bg-scale-200',
             !showLaunchWeekNavMode && '!opacity-100 transition-opacity',
             showLaunchWeekNavMode && '!bg-transparent transition-all',
           ].join(' ')}
diff --git a/apps/www/components/UI/FlyOut.tsx b/apps/www/components/UI/FlyOut.tsx
index c6cffd418dd..ab9756cc1d0 100644
--- a/apps/www/components/UI/FlyOut.tsx
+++ b/apps/www/components/UI/FlyOut.tsx
@@ -39,10 +39,10 @@ const FlyOut = (props: Props) => {
               className="dark:border-scale-500 absolute inset-0 flex border-b sm:flex-col lg:flex-row"
               aria-hidden="true"
             >
-              <div className="dark:bg-scale-100 dark:border-scale-400 border-r bg-white sm:h-1/2 sm:w-full lg:h-full lg:w-1/2" />
+              <div className="dark:bg-scale-200 dark:border-scale-400 border-r bg-white sm:h-1/2 sm:w-full lg:h-full lg:w-1/2" />
               <div
                 className={`${
-                  singleBgColor ? 'dark:bg-scale-100 bg-white' : 'dark:bg-scale-200 bg-gray-50'
+                  singleBgColor ? 'dark:bg-scale-200 bg-white' : 'dark:bg-scale-200 bg-gray-50'
                 } sm:h-1/2 sm:w-full lg:h-full lg:w-1/2`}
               />
             </div>
diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css
index 3eea30763a2..340d3162840 100644
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/index.css
@@ -27,7 +27,7 @@ html {
 }
 
 body {
-  @apply bg-scale-100;
+  @apply bg-scale-200;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -152,7 +152,7 @@ h6:not(.overwrite) {
 }
 
 .section--bg {
-  @apply bg-scale-100 dark:bg-scale-100;
+  @apply bg-scale-100 dark:bg-scale-200;
   position: relative;
   height: 100%;
   width: 100%;