diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
index 30b1d2ffd..3a1e8b2f9 100644
--- a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
+++ b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
@@ -1,4 +1,4 @@
-$background-color: var(--nfd-onboarding-admin-bar-background);
+$background-color: var(--nfd-onboarding-card-background);
 
 .nfd-sg-card {
 
diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
index fb1c725c0..a32bacc27 100644
--- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
@@ -1,4 +1,4 @@
-$background-color: var(--nfd-onboarding-admin-bar-background);
+$background-color: var(--nfd-onboarding-card-background);
 
 .nfd-sg-loader {
 
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
index 882a70347..700b00494 100644
--- a/src/OnboardingSPA/styles/_branding.scss
+++ b/src/OnboardingSPA/styles/_branding.scss
@@ -303,7 +303,8 @@ body {
 		--nfd-onboarding-secondary-rgb: 255, 255, 255;
 		--nfd-onboarding-admin-bar-color: #c3c4c7;
 		--nfd-onboarding-shimmer-color: 0, 0, 0;
-		--nfd-onboarding-admin-bar-background: #fff;
+		--nfd-onboarding-card-background: #fff;
+		--nfd-onboarding-admin-bar-background: #1d2327;
 		--nfd-onboarding-progress-bar-fill: #0060f0;
 		--nfd-onboarding-progress-bar-background: #d5d5d5;
 		--nfd-onboarding-site-logo-on-drag: rgba(53, 59, 64, 0.3);
@@ -317,6 +318,7 @@ body {
 		--nfd-onboarding-secondary: #000;
 		--nfd-onboarding-secondary-rgb: 0, 0, 0;
 		--nfd-onboarding-admin-bar-color: #c3c4c7;
+		--nfd-onboarding-card-background: #1d2327;
 		--nfd-onboarding-shimmer-color: 168, 239, 255;
 		--nfd-onboarding-admin-bar-background: #1d2327;
 		--nfd-onboarding-progress-bar-fill: #0060f0;