diff --git a/src/OnboardingSPA/components/Accordion/stylesheet.scss b/src/OnboardingSPA/components/Accordion/stylesheet.scss
index 26dab1ae9..2dacfccff 100644
--- a/src/OnboardingSPA/components/Accordion/stylesheet.scss
+++ b/src/OnboardingSPA/components/Accordion/stylesheet.scss
@@ -1,34 +1,34 @@
 .nfd-onboarding-accordion {
-    border: $border-width solid var(--nfd-onboarding-dark);
-    margin-bottom: $grid-unit-05;
-    margin-top: $grid-unit-05;
-    opacity: 0.8;
-    padding: $border-width;
-    transition: opacity 233ms ease;
-    @include reduce-motion("transition");
+	border: $border-width solid var(--nfd-onboarding-contrast);
+	margin-bottom: $grid-unit-05;
+	margin-top: $grid-unit-05;
+	opacity: 0.8;
+	padding: $border-width;
+	transition: opacity 233ms ease;
 
-    &:hover,
-    &:focus,
-    &[open] {
-        opacity: 1;
-    }
+	@include reduce-motion("transition");
 
-    &__summary {
-        background-color: var(--nfd-onboarding-light);
-        color: var(--nfd-onboarding-dark);
-        cursor: pointer;
-        font-weight: 700;
-        padding: $grid-unit-05 $grid-unit-10;
+	&:hover,
+	&:focus,
+	&[open] {
+		opacity: 1;
+	}
 
-        p {
-            display: inline;
-        }
-    }
+	&__summary {
+		background-color: var(--nfd-onboarding-base);
+		color: var(--nfd-onboarding-contrast);
+		cursor: pointer;
+		font-weight: 700;
+		padding: $grid-unit-05 $grid-unit-10;
 
-    &__content {
-        margin: 0 $grid-unit-20;
-        padding: $grid-unit-10 0;
-        color: var(--nfd-onboarding-dark);
-    }
+		p {
+			display: inline;
+		}
+	}
 
-}
\ No newline at end of file
+	&__content {
+		margin: 0 $grid-unit-20;
+		padding: $grid-unit-10 0;
+		color: var(--nfd-onboarding-contrast);
+	}
+}
diff --git a/src/OnboardingSPA/components/App/index.js b/src/OnboardingSPA/components/App/index.js
index f489bfd2f..73faaa137 100644
--- a/src/OnboardingSPA/components/App/index.js
+++ b/src/OnboardingSPA/components/App/index.js
@@ -238,7 +238,7 @@ const App = () => {
 
 	return (
 		<Fragment>
-			<FullscreenMode isActive={ true } />\
+			<FullscreenMode isActive={ true } />
 			<SlotFillProvider>
 				<NewfoldInterfaceSkeleton
 					className={ classNames(
diff --git a/src/OnboardingSPA/components/Button/ButtonBlue/stylesheet.scss b/src/OnboardingSPA/components/Button/ButtonBlue/stylesheet.scss
index 3ce2b592a..bdfcda874 100644
--- a/src/OnboardingSPA/components/Button/ButtonBlue/stylesheet.scss
+++ b/src/OnboardingSPA/components/Button/ButtonBlue/stylesheet.scss
@@ -1,4 +1,3 @@
-$button-blue-text-color : #fff;
 
 .nfd-onboarding-button {
 
@@ -6,7 +5,7 @@ $button-blue-text-color : #fff;
 		justify-content: center;
 		align-items: center;
 		width: 100%;
-		color: $button-blue-text-color;
+		color: var(--nfd-onboarding-white);
 		height: 36px;
 		border: none;
 		margin: 10px 0;
diff --git a/src/OnboardingSPA/components/Button/ButtonWhite/stylesheet.scss b/src/OnboardingSPA/components/Button/ButtonWhite/stylesheet.scss
index 3071a9cd9..729f5e5a0 100644
--- a/src/OnboardingSPA/components/Button/ButtonWhite/stylesheet.scss
+++ b/src/OnboardingSPA/components/Button/ButtonWhite/stylesheet.scss
@@ -1,4 +1,3 @@
-$button-white-background-color : #fff;
 
 .nfd-onboarding-button {
 
@@ -6,7 +5,7 @@ $button-white-background-color : #fff;
 		justify-content: center;
 		align-items: center;
 		width: 100%;
-		background: $button-white-background-color;
+		background: var(--nfd-onboarding-white);
 		color: var(--wp-admin-theme-color);
 		border: 1px solid var(--wp-admin-theme-color);
 		height: 36px;
diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss
index fa438ee21..f63bad775 100644
--- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss
+++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/stylesheet.scss
@@ -1,10 +1,3 @@
-/*COLOR VARIABLES*/
-$white-offset: rgb(224, 224, 224);
-$main-color-dark: var(--wp-admin-theme-color);
-$main-color-light: var(--nfd-onboarding-white);
-$main-color: var(--nfd-onboarding-highlighted--rgb);
-$main-border-main: var(--nfd-onboarding-primary-alt);
-$box-shadow: var(--nfd-onboarding-light-gray-highlighted);
 
 .checkbox-item {
 
@@ -15,8 +8,8 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
 	margin: 12px;
 	padding: 16px;
 	margin-top: 16px;
-	background: $main-color-light;
-	border: 1px solid $white-offset;
+	background: var(--nfd-onboarding-white);
+	border: 1px solid var(--nfd-onboarding-light-gray-6);
 	width: clamp(15rem, 25vw, 35rem);
 	box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295);
 
@@ -50,11 +43,11 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
 			justify-content: center;
 
 			&--selected {
-				background: $main-color-dark !important;
+				background: var(--wp-admin-theme-color) !important;
 			}
 
 			&--shown {
-				background: #f0f0f0;
+				background: var(--nfd-onboarding-light-gray);
 			}
 		}
 
@@ -72,7 +65,7 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
 				font-size: clamp(0.9rem, 2vw, 1rem);
 
 				&--selected {
-					color: $main-color-dark;
+					color: var(--wp-admin-theme-color);
 				}
 			}
 
@@ -96,18 +89,18 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
 	}
 
 	&--selected {
-		background: rgba($main-color, 0.2);
-		border: 1px solid rgba($main-color, 0.6);
-		box-shadow: 0 2px 8px 2px rgba($white-offset, 0.8);
+		background: rgba(var(--nfd-onboarding-highlighted--rgb), 0.2);
+		border: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.6);
+		box-shadow: 0 2px 8px 2px rgba(224, 224, 224, 0.8);
 	}
 
 	&--shown {
 		border-bottom: none;
-		background: $box-shadow;
+		background: var(--nfd-onboarding-light-gray-highlighted);
 		border-radius: 2px 2px 0 0;
-		border-top: 1px solid rgba($main-color, 0.1);
-		border-left: 1px solid rgba($main-color, 0.1);
-		border-right: 1px solid rgba($main-color, 0.1);
+		border-top: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
+		border-left: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
+		border-right: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
 	}
 
 	&__dropdown {
@@ -123,14 +116,14 @@ $box-shadow: var(--nfd-onboarding-light-gray-highlighted);
 		margin-top: -12px;
 		position: absolute;
 		font-style: italic;
-		background: $box-shadow;
+		background: var(--nfd-onboarding-light-gray-highlighted);
 		border-radius: 0 0 2px 2px;
 		transform-origin: top center;
 		width: clamp(15rem, 25vw, 35rem);
 		font-size: clamp(0.82rem, 2vw, 0.9rem);
-		border-left: 1px solid rgba($main-color, 0.1);
-		border-right: 1px solid rgba($main-color, 0.1);
-		border-bottom: 1px solid rgba($main-color, 0.1);
-		box-shadow: 0 11px 8px -3px rgba($main-color, 0.37);
+		border-left: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
+		border-right: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
+		border-bottom: 1px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.1);
+		box-shadow: 0 11px 8px -3px rgba(var(--nfd-onboarding-highlighted--rgb), 0.37);
 	}
 }
diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss
index 46837e114..395cadece 100644
--- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss
+++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss
@@ -1,19 +1,13 @@
-/*COLOR VARIABLES*/
-$white-offset: rgb(224, 224, 224);
-$main-color-light: var(--nfd-onboarding-white);
-$grey-color: #f6f7f8;
-
 .checkbox-skeleton-item {
 	height: 45px;
 	margin: 12px;
 	padding: 16px;
 	margin-top: 16px;
-	border: 0.5px solid $white-offset;
+	border: 0.5px solid var(--nfd-onboarding-light-gray-6);
 	cursor: not-allowed;
 	width: clamp(15rem, 25vw, 35rem);
 	box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295);
-	background: $grey-color;
+	background: var(--nfd-onboarding-light-gray-7);
 	background-repeat: no-repeat;
-	background-image:
- linear-gradient(to right, $grey-color 0%, $main-color-grey 20%, $grey-color 40%, $grey-color 100%);
+	background-image: linear-gradient(to right, var(--nfd-onboarding-light-gray-7) 0%, var(--nfd-onboarding-light-gray) 20%, var(--nfd-onboarding-light-gray-7) 40%, var(--nfd-onboarding-light-gray-7) 100%);
 }
diff --git a/src/OnboardingSPA/components/Content/stylesheet.scss b/src/OnboardingSPA/components/Content/stylesheet.scss
index f3f5f13c8..49d63c26e 100644
--- a/src/OnboardingSPA/components/Content/stylesheet.scss
+++ b/src/OnboardingSPA/components/Content/stylesheet.scss
@@ -1,4 +1,4 @@
 .interface-interface-skeleton__content {
-    background-color: var(--nfd-onboarding-content-bg);
-    color: var(--nfd-onboarding-content-fg);
-}
\ No newline at end of file
+	background-color: var(--nfd-onboarding-content-base);
+	color: var(--nfd-onboarding-content-contrast);
+}
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
index 0696ab634..03badebc4 100644
--- a/src/OnboardingSPA/components/Drawer/stylesheet.scss
+++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -1,6 +1,6 @@
 .nfd-onboarding-drawer__toggle {
 	align-items: center;
-	background: var(--nfd-onboarding-drawer-bg);
+	background: var(--nfd-onboarding-drawer-base);
 	border-radius: 0;
 	display: flex;
 	position: absolute;
@@ -13,9 +13,9 @@
 
 	&-button {
 		align-items: center;
-		background: var(--nfd-onboarding-drawer-bg);
+		background: var(--nfd-onboarding-drawer-base);
 		border-radius: 0;
-		color: var(--nfd-onboarding-drawer-fg);
+		color: var(--nfd-onboarding-drawer-contrast);
 		height: $header-height + $border-width;
 		width: $header-height;
 		z-index: 1;
@@ -26,7 +26,7 @@
 
 			&:hover,
 			&:active {
-				color: var(--nfd-onboarding-drawer-fg);
+				color: var(--nfd-onboarding-drawer-contrast);
 			}
 
 			&.is-suppressed {
@@ -49,7 +49,7 @@
 				bottom: 9px;
 				left: 9px;
 				border-radius: $radius-block-ui + $border-width + $border-width;
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--nfd-onboarding-drawer-bg);
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--nfd-onboarding-drawer-base);
 			}
 
 			&:hover::before {
@@ -57,7 +57,7 @@
 			}
 
 			&:focus::before {
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(var(--nfd-onboarding-drawer-fg), 0.1);
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(var(--nfd-onboarding-drawer-contrast), 0.1);
 			}
 		}
 	}
@@ -68,8 +68,8 @@
 	position: relative;
 	width: 0;
 	overflow: auto;
-	background: var(--nfd-onboarding-drawer-bg);
-	color: var(--nfd-onboarding-drawer-fg);
+	background: var(--nfd-onboarding-drawer-base);
+	color: var(--nfd-onboarding-drawer-contrast);
 	transition: width 100ms linear;
 
 	@include reduce-motion("transition");
@@ -116,7 +116,7 @@
 		overflow-x: hidden;
 		overflow-y: auto;
 		height: calc(100% - #{$header-height});
-		background-color: var(--nfd-onboarding-drawer-bg);
+		background-color: var(--nfd-onboarding-drawer-base);
 		-ms-overflow-style: none;
 		scrollbar-width: none;
 
@@ -127,10 +127,10 @@
 
 	&-inside {
 		padding: 0 $grid-unit-20;
-		color: var(--nfd-onboarding-drawer-fg);
+		color: var(--nfd-onboarding-drawer-contrast);
 
 		h2 {
-			color: var(--nfd-onboarding-drawer-fg);
+			color: var(--nfd-onboarding-drawer-contrast);
 		}
 	}
 
@@ -138,7 +138,7 @@
 		display: flex;
 		padding: $grid-unit-10 $grid-unit-20;
 		text-decoration: none;
-		color: var(--nfd-onboarding-light);
+		color: var(--nfd-onboarding-base);
 		align-items: center;
 		border-radius: 2px;
 		transition: background-color 100ms linear;
@@ -156,16 +156,16 @@
 		&:focus {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			outline: 3px solid transparent;
-			color: var(--nfd-onboarding-drawer-fg);
+			color: var(--nfd-onboarding-drawer-contrast);
 		}
 
 		&:hover {
-			color: var(--nfd-onboarding-drawer-fg);
+			color: var(--nfd-onboarding-drawer-contrast);
 		}
 
 		&.active {
 			background-color: var(--nfd-onboarding-primary);
-			color: var(--nfd-onboarding-light);
+			color: var(--nfd-onboarding-base);
 
 			svg {
 				fill: var(--nfd-onboarding-drawer-icon-active-fill);
@@ -174,7 +174,7 @@
 	}
 
 	.components-button.nfd-onboarding-drawer__panel-back.is-tertiary {
-		color: var(--nfd-onboarding-drawer-fg);
+		color: var(--nfd-onboarding-drawer-contrast);
 		opacity: 0.7;
 		height: $button-size;
 		margin-top: $grid-unit-30;
@@ -199,7 +199,7 @@
 		margin: $grid-unit-30 0;
 
 		h3 {
-			color: var(--nfd-onboarding-drawer-fg);
+			color: var(--nfd-onboarding-drawer-contrast);
 			font-size: 20.28px;
 			line-height: 1.2;
 			padding: $grid-unit-05 $grid-unit-10 $grid-unit-05 $grid-unit-20;
@@ -215,7 +215,7 @@
 	&-menu-item {
 		display: block;
 		width: 100%;
-		color: var(--nfd-onboarding-drawer-fg);
+		color: var(--nfd-onboarding-drawer-contrast);
 		font-size: 14px;
 		line-height: 20px;
 	}
@@ -229,13 +229,6 @@
 	}
 }
 
-/*COLOR VARIABLES*/
-$main-color-dark: var(--nfd-onboarding-dark);
-$main-color-light: var(--nfd-onboarding-white);
-$main-border-light: var(--nfd-onboarding-border);
-$main-border-main: var(--nfd-onboarding-primary-alt);
-$main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
-
 .theme-styles-preview--drawer__list__item__live-preview-container .live-preview__container-custom {
 	width: 100%;
 	overflow: hidden;
@@ -288,7 +281,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 					height: 15px;
 					display: flex;
 					align-items: center;
-					background-color: #ccc;
+					background-color: var(--nfd-onboarding-light-gray-8);
 					justify-content: space-between;
 					border: 1px solid transparent;
 
@@ -318,10 +311,10 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 						align-items: center;
 						justify-content: center;
 						background-clip: padding-box;
-						background-color: $main-border-main;
+						background-color: var(--nfd-onboarding-primary-alt);
 
 						&__path {
-							fill: $main-color-light;
+							fill: var(--nfd-onboarding-white);
 							transform: scale(0.7);
 						}
 					}
@@ -357,11 +350,11 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 		text-align: center;
 		align-items: center;
 		justify-content: center;
-		background-color: $main-color-light;
+		background-color: var(--nfd-onboarding-white);
 		color: var(--nfd-onboarding-primary);
 
 		&:hover {
-			color: $black;
+			color: var(--nfd-onboarding-black);
 			background-color: #ededed;
 		}
 	}
@@ -422,7 +415,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 		}
 
 		&__text {
-			color: $main-color-dark;
+			color: var(--nfd-onboarding-black);
 			font-size: 12px;
 			font-weight: 700;
 			line-height: 16px;
@@ -442,7 +435,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 	width: 88%;
 	margin: 30px 2px;
 	padding: 20px 16px;
-	background: $main-border-main;
+	background: var(--nfd-onboarding-primary-alt);
 
 	&__top {
 		display: flex;
@@ -469,11 +462,11 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 
 		&-row {
 			height: 50px;
-			color: $main-color-dark;
+			color: var(--nfd-onboarding-black);
 			display: flex;
 			cursor: pointer;
 			align-items: center;
-			background-color: $main-color-light;
+			background-color: var(--nfd-onboarding-white);
 			justify-content: flex-start;
 			border: 0.5px solid rgba(0, 0, 0, 0.3);
 
@@ -488,7 +481,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 				border: 1px solid rgba(0, 0, 0, 0.3);
 
 				&_selected_border {
-					box-shadow: 0 0 5px 3px rgba($main-border-main--rgb, 0.5);
+					box-shadow: 0 0 5px 3px rgba(var(--nfd-onboarding-highlighted--rgb), 0.5);
 				}
 			}
 		}
@@ -498,14 +491,14 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 		width: 25px;
 		height: 25px;
 		display: flex;
-		color: $main-color-dark;
+		color: var(--nfd-onboarding-black);
 		cursor: pointer;
 		font-weight: 900;
 		border-radius: 50%;
 		align-items: center;
 		justify-content: center;
-		border: 1px solid $main-color-dark;
-		background-color: $main-color-light;
+		border: 1px solid var(--nfd-onboarding-black);
+		background-color: var(--nfd-onboarding-white);
 	}
 }
 
@@ -518,13 +511,13 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 		width: 40%;
 		height: 30px;
 		display: flex;
-		color: $main-color-dark;
+		color: var(--nfd-onboarding-black);
 		cursor: pointer;
 		margin-left: 4px;
 		text-align: center;
 		align-items: center;
 		justify-content: center;
-		background-color: $main-color-light;
+		background-color: var(--nfd-onboarding-white);
 
 		&:hover {
 			background-color: var(--nfd-onboarding-drawer-icon-fill);
@@ -535,7 +528,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 .font-palette {
 
 	&__icon {
-		color: $main-color-dark;
+		color: var(--nfd-onboarding-black);
 		font-weight: 700;
 		margin-right: 16px;
 	}
@@ -545,7 +538,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 	width: 88%;
 	margin: 30px 2px;
 	padding: 20px 16px;
-	background: $main-border-main;
+	background: var(--nfd-onboarding-primary-alt);
 
 	&--hidden {
 		display: none;
@@ -608,7 +601,7 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 					height: 0;
 					display: flex;
 					align-items: center;
-					background-color: #ccc;
+					background-color: var(--nfd-onboarding-light-gray-8);
 					justify-content: space-between;
 
 					&--selected {
@@ -621,10 +614,10 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 						align-items: center;
 						justify-content: center;
 						background-clip: padding-box;
-						background-color: $main-border-main;
+						background-color: var(--nfd-onboarding-primary-alt);
 
 						&__path {
-							fill: $main-color-light;
+							fill: var(--nfd-onboarding-white);
 							transform: scale(0.7);
 						}
 					}
diff --git a/src/OnboardingSPA/components/Header/stylesheet.scss b/src/OnboardingSPA/components/Header/stylesheet.scss
index 2d541d0c4..0d0b9da26 100644
--- a/src/OnboardingSPA/components/Header/stylesheet.scss
+++ b/src/OnboardingSPA/components/Header/stylesheet.scss
@@ -1,104 +1,112 @@
 .nfd-onboarding-header {
-    align-items: center;
-    background-color: var(--nfd-onboarding-header-bg);
-    color: var(--nfd-onboarding-header-fg);
-    h2, h3, h4 {
-        color: var(--nfd-onboarding-header-fg);
-    }
-    display: flex;
-    height: $header-height;
-    box-sizing: border-box;
-    width: 100%;
-    justify-content: space-between;
-
-    padding-right: $grid-unit-20;
-
-    body.is-fullscreen-mode & {
-        padding-left: $header-height;
-        transition: padding-left 20ms linear;
-        transition-delay: 80ms;
-        @include reduce-motion('transition');
-    }
-
-    &__start,
-    &__end {
-        display: flex;
-    }
-
-    &__start {
-        align-items: center;
-        margin-left: $grid-unit-20;
-    }
-
-    &__center {
-        display: flex;
-        align-items: center;
-        height: 100%;
-        flex-grow: 1;
-        justify-content: center;
-        min-width: 5px;
-        font-weight: 600;
-        font-size: 20px;
-        line-height: $grid-unit-30;
-        svg {
-            margin-right: $grid-unit-10;
-        }
-    }
-
-    &__end {
-        justify-content: flex-end;
-    }
-
-    &__step-navigation {
-        display: flex;
-        column-gap: $grid-unit-10;
-    }
-
-    &__step-progress {
-        &:-webkit-progress-inner-element {
-            background-color: #999;
-        }
-        &:-moz-progress-bar,
-        &:-webkit-progress-bar {
-            background-color: var(--nfd-onboarding-primary);
-        }
-    }
+	align-items: center;
+	background-color: var(--nfd-onboarding-header-base);
+	color: var(--nfd-onboarding-header-contrast);
+
+	h2,
+	h3,
+	h4 {
+		color: var(--nfd-onboarding-header-contrast);
+	}
+	display: flex;
+	height: $header-height;
+	box-sizing: border-box;
+	width: 100%;
+	justify-content: space-between;
+
+	padding-right: $grid-unit-20;
+
+	body.is-fullscreen-mode & {
+		padding-left: $header-height;
+		transition: padding-left 20ms linear;
+		transition-delay: 80ms;
+
+		@include reduce-motion("transition");
+	}
+
+	&__start,
+	&__end {
+		display: flex;
+	}
+
+	&__start {
+		align-items: center;
+		margin-left: $grid-unit-20;
+	}
+
+	&__center {
+		display: flex;
+		align-items: center;
+		height: 100%;
+		flex-grow: 1;
+		justify-content: center;
+		min-width: 5px;
+		font-weight: 600;
+		font-size: 20px;
+		line-height: $grid-unit-30;
+
+		svg {
+			margin-right: $grid-unit-10;
+		}
+	}
+
+	&__end {
+		justify-content: flex-end;
+	}
+
+	&__step-navigation {
+		display: flex;
+		column-gap: $grid-unit-10;
+	}
+
+	&__step-progress {
+
+		&:-webkit-progress-inner-element {
+			background-color: #999;
+		}
+
+		&:-moz-progress-bar,
+		&:-webkit-progress-bar {
+			background-color: var(--nfd-onboarding-primary);
+		}
+	}
 }
 
 .nfd-onboarding-skeleton.is-drawer-open {
-    .nfd-onboarding-header {
-        padding-left: 0;
-        transition: padding-left 20ms linear;
-        transition-delay: 0ms;
-        @include reduce-motion("transition");
-    }
+
+	.nfd-onboarding-header {
+		padding-left: 0;
+		transition: padding-left 20ms linear;
+		transition-delay: 0ms;
+
+		@include reduce-motion("transition");
+	}
 }
 
 .navigation-buttons {
-    font-size: 14px;
-    line-height: 40px;
-    align-items: center;
-    letter-spacing: 0.8px;
-    display: flex !important;
-    justify-content: space-evenly;
-    border-radius: 2px !important;
-    padding: 20px 14px !important; 
-
-    &_back {
-        padding-right: 22px !important;
-    }
-
-    &_next {
-        padding-left: 22px !important;
-    }
-
-    &_finish {
-        padding-left: 22px !important;
-    }
-
-    @media screen and (max-width: #{ ($break-medium) }) {
-        font-size: 13px;
-        padding: 15px 10px !important; 
-    }
-}
+	font-size: 14px;
+	line-height: 40px;
+	align-items: center;
+	letter-spacing: 0.8px;
+	display: flex !important;
+	justify-content: space-evenly;
+	border-radius: 2px !important;
+	padding: 20px 14px !important;
+
+	&_back {
+		padding-right: 22px !important;
+	}
+
+	&_next {
+		padding-left: 22px !important;
+	}
 
+	&_finish {
+		padding-left: 22px !important;
+	}
+
+	@media screen and (max-width: #{ ($break-medium) }) {
+		font-size: 13px;
+		padding: 15px 10px !important;
+	}
+}
diff --git a/src/OnboardingSPA/components/HeadingWithSubHeading/stylesheet.scss b/src/OnboardingSPA/components/HeadingWithSubHeading/stylesheet.scss
index daf7f201f..a25504f69 100644
--- a/src/OnboardingSPA/components/HeadingWithSubHeading/stylesheet.scss
+++ b/src/OnboardingSPA/components/HeadingWithSubHeading/stylesheet.scss
@@ -1,6 +1,3 @@
-/*COLOR VARIABLES*/
-$black: var(--nfd-onboarding-black);
-$primary-color: var(--nfd-onboarding-primary);
 
 .nfd-main-heading {
 	width: 96%;
@@ -10,13 +7,13 @@ $primary-color: var(--nfd-onboarding-primary);
 	&__title {
 		font-weight: 700;
 		text-align: center;
-		color: $primary-color;
+		color: var(--nfd-onboarding-primary);
 		margin: 35px !important;
 		font-size: clamp(1.6rem, 4vw, 3.6rem);
 	}
 
 	&__subtitle {
-		color: $black;
+		color: var(--nfd-onboarding-black);
 		font-weight: 400;
 		text-align: center;
 		font-size: clamp(0.85rem, 3.2vw, 1.7rem);
diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss
index 2a4d255d8..1ee2b924e 100644
--- a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss
+++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss
@@ -1,6 +1,4 @@
-$main-color-grey: var(--nfd-onboarding-light-gray);
 $main-color-grey-other: #e2e2e2;
-$main-color-light-rgb: var(--nfd-onboarding-white-rgb);
 
 .live-preview {
 
@@ -38,7 +36,7 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb);
 			cursor: not-allowed;
 			align-items: center;
 			flex-direction: column;
-			background-color: $main-color-grey;
+			background-color: var(--nfd-onboarding-light-gray);
 
 			&--box {
 				width: 90%;
@@ -67,8 +65,7 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb);
 				width: 100%;
 				height: 100%;
 				position: absolute;
-				background-image:
- linear-gradient(90deg, rgba($main-color-light-rgb, 0) 0, rgba($main-color-light-rgb, 0.4) 20%, rgba($main-color-light-rgb, 0.6) 60%, rgba($main-color-light-rgb, 0.4) 90%, rgba($main-color-light-rgb, 0.02) 100%, $main-color-grey);
+				background-image: linear-gradient(90deg, rgba(var(--nfd-onboarding-white-rgb), 0) 0, rgba(var(--nfd-onboarding-white-rgb), 0.4) 20%, rgba(var(--nfd-onboarding-white-rgb), 0.6) 60%, rgba(var(--nfd-onboarding-white-rgb), 0.4) 90%, rgba(var(--nfd-onboarding-white-rgb), 0.02) 100%, var(--nfd-onboarding-light-gray));
 			}
 		}
 	}
diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss
index 7249ef8db..2ee21e2b1 100644
--- a/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss
+++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss
@@ -1,8 +1,3 @@
-/*COLOR VARIABLES*/
-$main-color-dark: var(--nfd-onboarding-dark);
-$main-color-light: var(--nfd-onboarding-white);
-$main-border-light: var(--nfd-onboarding-border);
-$main-border-main: var(--nfd-onboarding-primary-alt);
 
 .live-preview--selectable-card {
 	flex: 1;
@@ -48,10 +43,10 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 			align-items: center;
 			justify-content: center;
 			background-clip: padding-box;
-			background-color: $main-border-main;
+			background-color: var(--nfd-onboarding-primary-alt);
 
 			&__path {
-				fill: $main-color-light;
+				fill: var(--nfd-onboarding-white);
 				transform: scale(0.7);
 			}
 		}
@@ -95,7 +90,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 				rgb(var(--wp-admin-theme-color-darker-10--rgb))
 
 				&__icon{
-				fill: $main-color-light;
+				fill: var(--nfd-onboarding-white);
 				font-size: 20px;
 				position: absolute;
 				top: 50%;
diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js
index c7bf3d46f..7562e070a 100644
--- a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js
+++ b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js
@@ -18,7 +18,6 @@ const SelectableCardWithInfo = ( {
 	description = false,
 	slug,
 } ) => {
-	const [ loadingParent, setIsLoadingParent ] = useState( true );
 	const [ showDescription, setShowDescription ] = useState( false );
 
 	const handleCheck = ( isChecked ) => {
@@ -32,13 +31,13 @@ const SelectableCardWithInfo = ( {
 			<div
 				className={ `${ className }__live-preview-container` }
 				onClick={ () => handleCheck( ! selected ) }
+				role="presentation"
 			>
 				<LivePreview
 					styling={ styling }
 					blockGrammer={ blockGrammer }
 					viewportWidth={ viewportWidth }
 					previewSettings={ previewSettings }
-					setIsLoadingParent={ setIsLoadingParent }
 					skeletonLoadingTime={ skeletonLoadingTime }
 				/>
 			</div>
diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/stylesheet.scss
index 1dfcf0724..eecf0cd28 100644
--- a/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/stylesheet.scss
+++ b/src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/stylesheet.scss
@@ -1,8 +1,3 @@
-/*COLOR VARIABLES*/
-$main-color-dark: var(--nfd-onboarding-dark);
-$main-color-light: var(--nfd-onboarding-white);
-$main-border-light: var(--nfd-onboarding-border);
-$main-border-main: var(--nfd-onboarding-primary-alt);
 
 .live-preview--selectable-card {
 	flex: 1;
diff --git a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss
index 11c59f1e7..1ba0db202 100644
--- a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss
+++ b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss
@@ -1,9 +1,5 @@
-$white: #fff;
-$black: #000;
 $browser-dark: #cacaca;
-$browser-light: #f2f2f2;
 $link-browser-color: #007017;
-$link-hover-color: var(--nfd-onboarding-link-hover-blue);
 $title-browser-color: #3858e9;
 
 .mini-preview {
@@ -53,7 +49,7 @@ $title-browser-color: #3858e9;
 .browser-content {
 	padding: 10px;
 	word-break: break-all;
-	background-color: $white;
+	background-color: var(--nfd-onboarding-white);
 
 	&_top-row {
 
@@ -72,15 +68,11 @@ $title-browser-color: #3858e9;
 			font-size: 1rem;
 			cursor: pointer;
 			color: $link-browser-color;
-
-			&:hover {
-				color: $link-hover-color;
-			}
 		}
 	}
 
 	&_desc {
-		color: $black;
+		color: var(--nfd-onboarding-black);
 		text-align: left;
 		max-width: 450px;
 		font-weight: 400;
@@ -141,7 +133,7 @@ $title-browser-color: #3858e9;
 			align-items: flex-end;
 
 			&_before {
-				background-color: $browser-light;
+				background-color: var(--nfd-onboarding-minipreview-base);
 
 				&-curve {
 					opacity: 1;
@@ -158,7 +150,7 @@ $title-browser-color: #3858e9;
 			}
 
 			&_after {
-				background-color: $browser-light;
+				background-color: var(--nfd-onboarding-minipreview-base);
 
 				&-curve {
 					opacity: 1;
@@ -184,7 +176,7 @@ $title-browser-color: #3858e9;
 				padding-right: 10px;
 				align-items: center;
 				border-radius: 8px 8px 0 0;
-				background-color: $browser-light;
+				background-color: var(--nfd-onboarding-minipreview-base);
 
 				&-text {
 					flex: 1;
@@ -195,21 +187,19 @@ $title-browser-color: #3858e9;
 					line-clamp: 1;
 					white-space: nowrap;
 					text-overflow: ellipsis;
-					background: -webkit-linear-gradient(left, #000 50%, #fff);
+					background: -webkit-linear-gradient(left, var(--nfd-onboarding-black) 50%, var(--nfd-onboarding-base));
 					background-clip: text;
 					-webkit-text-fill-color: transparent;
 				}
 			}
 		}
-
-
 	}
 
 	&-search {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background-color: $browser-light;
+		background-color: var(--nfd-onboarding-minipreview-base);
 
 		&__icons {
 			flex: 1;
@@ -226,7 +216,7 @@ $title-browser-color: #3858e9;
 				width: 100%;
 				font-size: 0.8rem;
 				border: none !important;
-				background-color: $white;
+				background-color: var(--nfd-onboarding-white);
 			}
 		}
 
diff --git a/src/OnboardingSPA/components/NeedHelpTag/stylesheet.scss b/src/OnboardingSPA/components/NeedHelpTag/stylesheet.scss
index 4cdf41e0a..defd93d33 100644
--- a/src/OnboardingSPA/components/NeedHelpTag/stylesheet.scss
+++ b/src/OnboardingSPA/components/NeedHelpTag/stylesheet.scss
@@ -1,13 +1,14 @@
 .nfd-card-need-help-tag {
-	color: black;
+	color: var(--nfd-onboarding-black);
 	padding: 20px;
 	font-weight: 200;
 	text-align: center;
 	font-style: italic;
 	font-size: clamp(0.6rem, 1.5vw, 0.9rem);
+
 	a {
 		text-decoration: none;
-		padding: 0px 0.4rem;
+		padding: 0 0.4rem;
 	}
 
 	@media (max-width: #{($break-medium)}) {
diff --git a/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss b/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss
index 8c77d18e9..bf49a52c8 100644
--- a/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss
+++ b/src/OnboardingSPA/components/NewfoldLargeCard/stylesheet.scss
@@ -3,7 +3,7 @@
 	max-width: 960px;
 	width: 60vw;
 	min-height: 60vh;
-	background: var(--nfd-onboarding-light);
+	background: var(--nfd-onboarding-base);
 	position: relative;
 	transform-style: preserve-3d;
 	align-items: center;
@@ -21,7 +21,7 @@
 
 	&::before {
 		content: "";
-		background: var(--nfd-onboarding-dark-icon) no-repeat;
+		background: var(--nfd-onboarding-contrast-icon) no-repeat;
 		width: 600px;
 		min-height: 500px;
 		transform: rotate(-14deg) translateZ(-1px);
@@ -36,12 +36,14 @@
 		transform-style: flat;
 		padding: 20px;
 		margin: 30px;
+
 		&::before {
 			display: none;
 		}
 	}
 
 	@media (min-width: #{ ($break-medium) }) and (max-width: 1300px) {
+
 		&::before {
 			width: 400px;
 			height: 350px;
@@ -53,6 +55,7 @@
 		max-width: 100%;
 		width: 50vw;
 		min-height: 960px;
+
 		&::before {
 			width: 860px;
 			min-height: 600px;
@@ -63,4 +66,4 @@
 	&not::before {
 		justify-content: center;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/OnboardingSPA/components/SelectableCard/stylesheet.scss b/src/OnboardingSPA/components/SelectableCard/stylesheet.scss
index 90ee0bf54..540fe1691 100644
--- a/src/OnboardingSPA/components/SelectableCard/stylesheet.scss
+++ b/src/OnboardingSPA/components/SelectableCard/stylesheet.scss
@@ -1,117 +1,109 @@
-/*COLOR VARIABLES*/
-$main-color-dark: var(--nfd-onboarding-dark);
-$main-color-light: var(--nfd-onboarding-white);
-$main-border-light: var(--nfd-onboarding-border);
-$main-border-main: var(--nfd-onboarding-primary-alt);
-$main-color: var(--nfd-onboarding-highlighted--rgb);
-
 /*BORDER RADIUS*/
 $radius: 0.2rem;
 
 .nfd-card {
-    display: flex;
-    cursor: pointer;
-    width: 290px;
-    padding-left: 10px;
-    margin-right: 10px;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    box-shadow: none !important;
-    background-color: transparent !important;
+	display: flex;
+	cursor: pointer;
+	width: 290px;
+	padding-left: 10px;
+	margin-right: 10px;
+	align-items: center;
+	flex-direction: column;
+	justify-content: center;
+	box-shadow: none !important;
+	background-color: transparent !important;
 
-    &__top_row {
-        width: 100%;
-        display: flex;
-        position: absolute;
-        align-items: center;
-        justify-content: center;
-    }
+	&__top_row {
+		width: 100%;
+		display: flex;
+		position: absolute;
+		align-items: center;
+		justify-content: center;
+	}
 
-    &__body {
-        height: 200px;
-        padding: 8px;
-        text-align: center;
-        margin-top: 50px;
-        border-radius: 6px;
-        margin-right: 15px;
-        padding-top: 20px;
-        border-radius: $radius;
-        background-color: transparent;
-        border: 1px solid rgba($main-border-light, 0.6);
+	&__body {
+		height: 200px;
+		padding: 8px;
+		text-align: center;
+		margin-top: 50px;
+		margin-right: 15px;
+		padding-top: 20px;
+		border-radius: $radius;
+		background-color: transparent;
+		border: 1px solid rgba(var(--nfd-onboarding-border), 0.6);
 
-        &_title {
-            font-weight: 700;
-            margin-top: 30px;
-            color: $main-color-dark;
-            padding: 14px 0px 10px 0px;
-            transition: color 300ms ease-in;
-            font-size: clamp(1rem, 2.5vw, 1.5rem);
-        }
-        
-        &_description {
-            font-weight: 400;
-            text-align: center;
-            letter-spacing: 0.5px;
-            color: $main-color-dark;
-            font-size: clamp(0.8rem, 2vw, 0.87rem);
-        }
-    }
-    &__icon{
-        flex: 1;
-        display: flex;
-        margin-top: 10px;
-        margin-right: -25px;
-        align-items: center;
-        justify-content: center;
+		&_title {
+			font-weight: 700;
+			margin-top: 30px;
+			color: var(--nfd-onboarding-contrast);
+			padding: 14px 0 10px 0;
+			transition: color 300ms ease-in;
+			font-size: clamp(1rem, 2.5vw, 1.5rem);
+		}
 
-        &_box {
-            width: 64px;
-            height: 64px;
-            border-radius: 50%;
-            text-align: center;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-clip: padding-box;
-            background-color: $main-color-dark;
-            border: 4px solid rgba($main-color, 0.10544);
+		&_description {
+			font-weight: 400;
+			text-align: center;
+			letter-spacing: 0.5px;
+			color: var(--nfd-onboarding-contrast);
+			font-size: clamp(0.8rem, 2vw, 0.87rem);
+		}
+	}
 
-            &-selected{
-                background-color: $main-border-main !important;
-            }
-        }
-    }
+	&__icon {
+		flex: 1;
+		display: flex;
+		margin-top: 10px;
+		margin-right: -25px;
+		align-items: center;
+		justify-content: center;
 
-    &__icon_selected{
-        width: 40px;
-        height: 40px;
-        display: flex;
-        border-radius: 50%;
-        align-items: center;
-        margin-top: 20px;
-        justify-content: center;
-        background-clip: padding-box;
-        background-color: $main-border-main;
+		&_box {
+			width: 64px;
+			height: 64px;
+			border-radius: 50%;
+			text-align: center;
+			background-position: center;
+			background-repeat: no-repeat;
+			background-clip: padding-box;
+			background-color: var(--nfd-onboarding-contrast);
+			border: 4px solid rgba(var(--nfd-onboarding-highlighted--rgb), 0.10544);
 
-        &_path {
-            fill: $main-color-light;
-            transform: scale(0.7);
-        }
-    }
+			&-selected {
+				background-color: var(--nfd-onboarding-primary-alt) !important;
+			}
+		}
+	}
 
-    &__icon_unselected {
-        width: 40px;
-        height: 40px;
-        opacity: 0;
-    }
-}
+	&__icon_selected {
+		width: 40px;
+		height: 40px;
+		display: flex;
+		border-radius: 50%;
+		align-items: center;
+		margin-top: 20px;
+		justify-content: center;
+		background-clip: padding-box;
+		background-color: var(--nfd-onboarding-primary-alt);
 
-.nfd-selected-card{
-    transition: all .2s ease-in-out;
-    background-color: rgba($main-color, 0.18) !important;
+		&_path {
+			fill: var(--nfd-onboarding-white);
+			transform: scale(0.7);
+		}
+	}
+
+	&__icon_unselected {
+		width: 40px;
+		height: 40px;
+		opacity: 0;
+	}
 }
 
-.nfd-selected-card-box{
-    transform: scale(1.05);
+.nfd-selected-card {
+	transition: all 0.2s ease-in-out;
+	background-color: rgba(var(--nfd-onboarding-highlighted--rgb), 0.18) !important;
 }
 
+.nfd-selected-card-box {
+	transform: scale(1.05);
+}
diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss
index 0b2022807..3525cf234 100644
--- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss
+++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss
@@ -1,159 +1,146 @@
-$grey-color: #f6f7f8;
-$main-color: var(--wp-admin-theme-color--rgb);
-$main-color-grey: var(--nfd-onboarding-light-gray);
-$main-color-light-rgb: var(--nfd-onboarding-white-rgb);
-
 .sidebar-skeleton {
-    width: 100%;
-    
-    &-divider {
-        width: 100%;
-        margin: 20px 0px;
-        border-top: 1px solid #bbb;
-    }
-
-    &-header {
-        width: 95%;
-        padding: 16px;
-
-        &-top {
-            width: 80%;
-            margin: 8px;
-            display: flex;
-            align-items: center;
-
-            &-profile {
-                width: 25px;
-                height: 25px;
-                margin-right: 15px;
-            }
-
-            &-header {
-                width: 40%;
-                height: 15px;
-            }
-        }
-
-        &-below {
-            width: 100%;
-            margin: 8px;
-            margin-left: 45px;
-
-            &-subheading-1 {
-                width: 70%;
-                margin: 4px;
-                height: 15px;
-            }
-
-            &-subheading-2 {
-                margin: 4px;
-                width: 50%;
-                height: 15px;
-            }
-        }
-    }
-
-    &-body {
-        width: 90%;
-        height: 250px;
-        display: flex;
-        padding: 16px;
-        margin-top: 20px;
-        margin-bottom: 20px;
-        align-items: center;
-        justify-content: center;
-
-        &-image{
-            width: 95%;
-            height: 100%
-        }
-    }
-
-    &-footer {
-        width: 85%;
-        margin: 8px;
-        padding: 16px;
-
-        &-line-1 {
-            width: 45%;
-            height: 15px;
-            margin-bottom: 15px
-        }
-
-        &-line-2 {
-            width: 70%;
-            height: 15px;
-            margin-bottom: 5px
-        }
-
-        &-line-3 {
-            width: 90%;
-            height: 15px;
-            margin-bottom: 5px
-        }
-
-        &-line-4 {
-            width: 80%;
-            height: 15px;
-            margin-bottom: 5px
-        }
-
-        &-line-5 {
-            width: 30%;
-            height: 15px;
-            margin-bottom: 5px
-        }
-
-        &-buttons {
-            width: 100%;
-            display: flex;
-            margin-top: 50px;
-            align-items: center;
-            flex-direction: column;
-            justify-content: center;
-
-            &-button-1 {
-                width: 100%;
-                margin: 8px;
-                height: 40px;
-                display: flex;
-                align-items: center;
-                margin-bottom: 20px;
-                justify-content: center;
-                border: 1px solid rgba($main-color, 0.4) !important;
-            }
-
-            &-button-2 {
-                width: 70%;
-                height: 15px;
-                background-color: rgba($main-color, 0.4) !important;
-            }
-
-            &-button-3 {
-                width: 30%;
-                height: 15px;
-                background-color: rgba($main-color, 0.4) !important;
-            }
-        }
-    }
+	width: 100%;
+
+	&-divider {
+		width: 100%;
+		margin: 20px 0;
+		border-top: 1px solid #bbb;
+	}
+
+	&-header {
+		width: 95%;
+		padding: 16px;
+
+		&-top {
+			width: 80%;
+			margin: 8px;
+			display: flex;
+			align-items: center;
+
+			&-profile {
+				width: 25px;
+				height: 25px;
+				margin-right: 15px;
+			}
+
+			&-header {
+				width: 40%;
+				height: 15px;
+			}
+		}
+
+		&-below {
+			width: 100%;
+			margin: 8px;
+			margin-left: 45px;
+
+			&-subheading-1 {
+				width: 70%;
+				margin: 4px;
+				height: 15px;
+			}
+
+			&-subheading-2 {
+				margin: 4px;
+				width: 50%;
+				height: 15px;
+			}
+		}
+	}
+
+	&-body {
+		width: 90%;
+		height: 250px;
+		display: flex;
+		padding: 16px;
+		margin-top: 20px;
+		margin-bottom: 20px;
+		align-items: center;
+		justify-content: center;
+
+		&-image {
+			width: 95%;
+			height: 100%;
+		}
+	}
+
+	&-footer {
+		width: 85%;
+		margin: 8px;
+		padding: 16px;
+
+		&-line-1 {
+			width: 45%;
+			height: 15px;
+			margin-bottom: 15px;
+		}
+
+		&-line-2 {
+			width: 70%;
+			height: 15px;
+			margin-bottom: 5px;
+		}
+
+		&-line-3 {
+			width: 90%;
+			height: 15px;
+			margin-bottom: 5px;
+		}
+
+		&-line-4 {
+			width: 80%;
+			height: 15px;
+			margin-bottom: 5px;
+		}
+
+		&-line-5 {
+			width: 30%;
+			height: 15px;
+			margin-bottom: 5px;
+		}
+
+		&-buttons {
+			width: 100%;
+			display: flex;
+			margin-top: 50px;
+			align-items: center;
+			flex-direction: column;
+			justify-content: center;
+
+			&-button-1 {
+				width: 100%;
+				margin: 8px;
+				height: 40px;
+				display: flex;
+				align-items: center;
+				margin-bottom: 20px;
+				justify-content: center;
+				border: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.4) !important;
+			}
+
+			&-button-2 {
+				width: 70%;
+				height: 15px;
+				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.4) !important;
+			}
+
+			&-button-3 {
+				width: 30%;
+				height: 15px;
+				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.4) !important;
+			}
+		}
+	}
 }
 
 .shimmer {
-    background: $grey-color;
-    background-repeat: no-repeat;
-    background-image: linear-gradient(to right, 
-                    $grey-color 0%, 
-                    $main-color-grey 20%, 
-                    $grey-color 40%, 
-                    $grey-color 100%);
+	background: var(--nfd-onboarding-light-gray-7);
+	background-repeat: no-repeat;
+	background-image: linear-gradient(to right, var(--nfd-onboarding-light-gray-7) 0%, var(--nfd-onboarding-light-gray) 20%, var(--nfd-onboarding-light-gray-7) 40%, var(--nfd-onboarding-light-gray-7) 100%);
 }
 
 .shimmer-1 {
-    background: rgba($main-color, 0.4);
-    background-repeat: no-repeat;
-    background-image: linear-gradient(to right,
-            rgba($main-color, 0.4) 0%,
-            rgba($main-color, 0.6) 20%,
-            rgba($main-color, 0.4) 40%,
-            rgba($main-color, 0.4) 100%);
-}
\ No newline at end of file
+	background: rgba(var(--wp-admin-theme-color--rgb), 0.4);
+	background-repeat: no-repeat;
+	background-image: linear-gradient(to right, rgba(var(--wp-admin-theme-color--rgb), 0.4) 0%, rgba(var(--wp-admin-theme-color--rgb), 0.6) 20%, rgba(var(--wp-admin-theme-color--rgb), 0.4) 40%, rgba(var(--wp-admin-theme-color--rgb), 0.4) 100%);
+}
diff --git a/src/OnboardingSPA/components/StepOverview/stylesheet.scss b/src/OnboardingSPA/components/StepOverview/stylesheet.scss
index 5161625c1..b9e39aec0 100644
--- a/src/OnboardingSPA/components/StepOverview/stylesheet.scss
+++ b/src/OnboardingSPA/components/StepOverview/stylesheet.scss
@@ -1,25 +1,30 @@
 .nfd-onboarding-overview {
-    width: 100%;
-    max-width: 960px;
-    background-color: var(--nfd-onboarding-light);
-    padding: 20px;
-    &__header {
-        display: flex;
-        align-items: center;
-        column-gap: 1rem;
-        &-icon {
-            display: flex;
-            place-items: center;
-            svg {
-                fill: var(--nfd-onboarding-primary);
-            }
-        }
-        &-heading {
-            margin: 0 0 6px 0;
-            color: var(--nfd-onboarding-dark);
-        }
-        &-subheading {
-            color: var(--nfd-onboarding-dark);
-        }
-    }
-}
\ No newline at end of file
+	width: 100%;
+	max-width: 960px;
+	background-color: var(--nfd-onboarding-base);
+	padding: 20px;
+
+	&__header {
+		display: flex;
+		align-items: center;
+		column-gap: 1rem;
+
+		&-icon {
+			display: flex;
+			place-items: center;
+
+			svg {
+				fill: var(--nfd-onboarding-primary);
+			}
+		}
+
+		&-heading {
+			margin: 0 0 6px 0;
+			color: var(--nfd-onboarding-contrast);
+		}
+
+		&-subheading {
+			color: var(--nfd-onboarding-contrast);
+		}
+	}
+}
diff --git a/src/OnboardingSPA/components/TextInput/stylesheet.scss b/src/OnboardingSPA/components/TextInput/stylesheet.scss
index a6d82d87c..18a61e49e 100644
--- a/src/OnboardingSPA/components/TextInput/stylesheet.scss
+++ b/src/OnboardingSPA/components/TextInput/stylesheet.scss
@@ -1,56 +1,55 @@
-$white: var(--nfd-onboarding-white);
 $error: rgba(255, 0, 0, 0.26);
-$border: #D6D6D6;
+$border: #d6d6d6;
 $letter-spacing: 0.5px;
 
 .nfd-input {
-    margin-bottom: 25px;
-    width: 100% !important;
-
-    &__field {
-        padding: 14px;
-        margin: 6px 0px;
-        font-size: 0.9rem;
-        letter-spacing: $letter-spacing;
-
-        width: 100%;
-        resize: none;
-        overflow: hidden;
-        border-radius: 6px;
-        max-height: 150px;
-        border: 1px solid $border;
-
-        &_error{
-            background-color: $error !important;
-        }
-    }
-    
-    &__label{
-        display: flex;
-        padding: 4px 2px;
-        align-items: center;
-        justify-content: space-between;
-
-        &_title{
-            margin: 0px;
-            font-size: 1rem;
-            font-weight: 500;
-            letter-spacing: $letter-spacing;
-        }
-
-        &_maxChar {
-            margin: 0px;
-            font-size: 0.81rem;
-            letter-spacing: $letter-spacing;
-        }
-    }
-
-    &__hint{
-        margin: 0px;
-        font-weight: 300;
-        font-size: 0.87rem;
-        padding: 0px 1.5px;
-        font-style: italic;
-        letter-spacing: $letter-spacing;
-    }
-}
\ No newline at end of file
+	margin-bottom: 25px;
+	width: 100% !important;
+
+	&__field {
+		padding: 14px;
+		margin: 6px 0;
+		font-size: 0.9rem;
+		letter-spacing: $letter-spacing;
+
+		width: 100%;
+		resize: none;
+		overflow: hidden;
+		border-radius: 6px;
+		max-height: 150px;
+		border: 1px solid $border;
+
+		&_error {
+			background-color: $error !important;
+		}
+	}
+
+	&__label {
+		display: flex;
+		padding: 4px 2px;
+		align-items: center;
+		justify-content: space-between;
+
+		&_title {
+			margin: 0;
+			font-size: 1rem;
+			font-weight: 500;
+			letter-spacing: $letter-spacing;
+		}
+
+		&_maxChar {
+			margin: 0;
+			font-size: 0.81rem;
+			letter-spacing: $letter-spacing;
+		}
+	}
+
+	&__hint {
+		margin: 0;
+		font-weight: 300;
+		font-size: 0.87rem;
+		padding: 0 1.5px;
+		font-style: italic;
+		letter-spacing: $letter-spacing;
+	}
+}
diff --git a/src/OnboardingSPA/components/Tooltip/stylesheet.scss b/src/OnboardingSPA/components/Tooltip/stylesheet.scss
index 3c55dd52f..68c711cbd 100644
--- a/src/OnboardingSPA/components/Tooltip/stylesheet.scss
+++ b/src/OnboardingSPA/components/Tooltip/stylesheet.scss
@@ -1,92 +1,91 @@
 
-$tooltip-text-color: white;
 $tooltip-background-color: rgba(0, 0, 0, 0.75);
 $tooltip-margin: 35px;
 $tooltip-arrow-size: 6px;
 
 /* Wrapping */
 .Tooltip-Wrapper {
-    display: inline-block;
-    position: relative;
-    width: 100%;
+	display: inline-block;
+	position: relative;
+	width: 100%;
 }
 
 /* Absolute positioning */
 .Tooltip-Tip {
-    position: absolute;
-    border-radius: 4px;
-    left: 50%;
-    transform: translateX(-40%);
-    padding: 6px;
-    color: $tooltip-text-color;
-    background: $tooltip-background-color;
-    font-size: 12px;
-    white-space: nowrap;
+	position: absolute;
+	border-radius: 4px;
+	left: 50%;
+	transform: translateX(-40%);
+	padding: 6px;
+	color: var(--nfd-onboarding-white);
+	background: $tooltip-background-color;
+	font-size: 12px;
+	white-space: nowrap;
 }
 
 /* CSS border triangles */
 .Tooltip-Tip::before {
-    content: " ";
-    left: 50%;
-    border: solid transparent;
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-    border-width: $tooltip-arrow-size;
-    margin-left: calc($tooltip-arrow-size * -1);
+	content: " ";
+	left: 50%;
+	border: solid transparent;
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+	border-width: $tooltip-arrow-size;
+	margin-left: calc($tooltip-arrow-size * -1);
 }
 
 /* Absolute positioning */
 .Tooltip-Tip.top {
-    top: calc($tooltip-margin * -1);
+	top: calc($tooltip-margin * -1);
 }
 
 /* CSS border triangles */
 .Tooltip-Tip.top::before {
-    top: 100%;
-    border-top-color: $tooltip-background-color;
+	top: 100%;
+	border-top-color: $tooltip-background-color;
 }
 
 /* Absolute positioning */
 .Tooltip-Tip.right {
-    left: calc(100% + $tooltip-margin);
-    top: 50%;
-    transform: translateX(0) translateY(-50%);
+	left: calc(100% + $tooltip-margin);
+	top: 50%;
+	transform: translateX(0) translateY(-50%);
 }
 
 /* CSS border triangles */
 .Tooltip-Tip.right::before {
-    left: calc($tooltip-arrow-size * -1);
-    top: 50%;
-    transform: translateX(0) translateY(-50%);
-    border-right-color: $tooltip-background-color;
+	left: calc($tooltip-arrow-size * -1);
+	top: 50%;
+	transform: translateX(0) translateY(-50%);
+	border-right-color: $tooltip-background-color;
 }
 
 /* Absolute positioning */
 .Tooltip-Tip.bottom {
-    bottom: calc($tooltip-margin * -1);
+	bottom: calc($tooltip-margin * -1);
 }
 
 /* CSS border triangles */
 .Tooltip-Tip.bottom::before {
-    bottom: 100%;
-    border-bottom-color: $tooltip-background-color;
+	bottom: 100%;
+	border-bottom-color: $tooltip-background-color;
 }
 
 /* Absolute positioning */
 .Tooltip-Tip.left {
-    left: auto;
-    right: calc(100% + $tooltip-margin);
-    top: 50%;
-    transform: translateX(0) translateY(-50%);
+	left: auto;
+	right: calc(100% + $tooltip-margin);
+	top: 50%;
+	transform: translateX(0) translateY(-50%);
 }
 
 /* CSS border triangles */
 .Tooltip-Tip.left::before {
-    left: auto;
-    right: calc($tooltip-arrow-size * -2);
-    top: 50%;
-    transform: translateX(0) translateY(-50%);
-    border-left-color: $tooltip-background-color;
-}
\ No newline at end of file
+	left: auto;
+	right: calc($tooltip-arrow-size * -2);
+	top: 50%;
+	transform: translateX(0) translateY(-50%);
+	border-left-color: $tooltip-background-color;
+}
diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss
index fbf135cca..e7bf3054a 100644
--- a/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss
@@ -13,7 +13,7 @@
 		height: 15px;
 		display: flex;
 		align-items: center;
-		background-color: #ccc;
+		background-color: var(--nfd-onboarding-light-gray-8);
 		justify-content: space-between;
 		border: 1px solid transparent;
 
diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss
index 4b15fe650..891a00c1b 100644
--- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/stylesheet.scss
@@ -13,7 +13,7 @@
 		height: 15px;
 		display: flex;
 		align-items: center;
-		background-color: #ccc;
+		background-color: var(--nfd-onboarding-light-gray-8);
 		justify-content: space-between;
 		border: 1px solid transparent;
 
diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss
index 8cfac5805..9a5b60ec5 100644
--- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss
@@ -1,8 +1,3 @@
-/*COLOR VARIABLES*/
-$main-color-dark: var(--nfd-onboarding-dark);
-$main-color-light: var(--nfd-onboarding-white);
-$main-border-light: var(--nfd-onboarding-border);
-$main-border-main: var(--nfd-onboarding-primary-alt);
 
 .homepage_preview {
 	display: flex;
@@ -67,10 +62,10 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 					align-items: center;
 					justify-content: center;
 					background-clip: padding-box;
-					background-color: $main-border-main;
+					background-color: var(--nfd-onboarding-primary-alt);
 
 					&__path {
-						fill: $main-color-light;
+						fill: var(--nfd-onboarding-white);
 						transform: scale(0.7);
 					}
 				}
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss
index cfee7714e..a2b821485 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss
@@ -1,8 +1,3 @@
-/*COLOR VARIABLES*/
-$main-color-dark: var(--nfd-onboarding-dark);
-$main-color-light: var(--nfd-onboarding-white);
-$main-border-light: var(--nfd-onboarding-border);
-$main-border-main: var(--nfd-onboarding-primary-alt);
 
 .theme-styles-menu {
 	display: flex;
@@ -67,10 +62,10 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 					align-items: center;
 					justify-content: center;
 					background-clip: padding-box;
-					background-color: $main-border-main;
+					background-color: var(--nfd-onboarding-primary-alt);
 
 					&__path {
-						fill: $main-color-light;
+						fill: var(--nfd-onboarding-white);
 						transform: scale(0.7);
 					}
 				}
@@ -114,7 +109,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
 					background-color: rgb(var(--wp-admin-theme-color-darker-10--rgb));
 
 					&__icon {
-						fill: $main-color-light;
+						fill: var(--nfd-onboarding-white);
 						font-size: 20px;
 						position: absolute;
 						top: 50%;
diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss
index d9d13f198..cae461124 100644
--- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/stylesheet.scss
@@ -63,7 +63,7 @@
 		height: 15px;
 		display: flex;
 		align-items: center;
-		background-color: #ccc;
+		background-color: var(--nfd-onboarding-light-gray-8);
 		justify-content: space-between;
 		border: 1px solid transparent;
 
diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
index 2117eb11f..ae288f4f4 100644
--- a/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/DesignTypography/stylesheet.scss
@@ -13,7 +13,7 @@
 		height: 15px;
 		display: flex;
 		align-items: center;
-		background-color: #ccc;
+		background-color: var(--nfd-onboarding-light-gray-8);
 		justify-content: space-between;
 		border: 1px solid transparent;
 
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss
index e61041c7d..0fc48734e 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/stylesheet.scss
@@ -5,20 +5,22 @@
 	flex-direction: column;
 
 	&-tabs label {
-		border: 1px solid var(--nfd-onboarding-light-gray-2);
+		border: 1px solid var(--nfd-onboarding-base-gray);
 		display: flex;
 		justify-content: flex-start;
 		padding: 10px 190px 10px 15px;
 		color: var(--nfd-onboarding-black);
-		background: var(--nfd-onboarding-light-gray);
+		background: var(--nfd-onboarding-base-gray);
 		font-weight: 350;
 		font-size: clamp(0.8rem, 1.5vw, 1.2rem);
 		line-height: 1.5;
 		margin: 5px;
 		white-space: nowrap;
+
 		@media (max-width: #{ ($break-medium) - 1 }) {
 			padding-right: 100px;
 		}
+
 		@media (min-width: 3700px) {
 			font-size: clamp(3.7rem, -0.27vw + 3.5rem, 3rem);
 			margin: 25px;
@@ -33,10 +35,11 @@
 	}
 
 	.components-radio-control {
+
 		&__input input {
-		display: none !important;
+			display: none !important;
 		}
-		margin: 32px 0px 48px;
+		margin: 32px 0 48px;
 		align-items: center;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss
index 5bcc674a0..27d72cf86 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/stylesheet.scss
@@ -1,3 +1,15 @@
+.nfd-card-category {
+	color: var(--nfd-onboarding-black);
+	padding: 1rem;
+	background-color: var(--nfd-onboarding-base-gray);
+	background-position: center;
+	display: inline-flex;
+	margin: auto 0 1rem 1rem;
+	border-radius: 2.5rem;
+	cursor: pointer;
+	align-items: center;
+}
+
 .nfd-setup-primary {
 
 	&-categories {
@@ -58,7 +70,7 @@
 
 	&.chosenPrimaryCategory {
 		background-color: var(--wp-admin-theme-color-darker-10);
-		color: var(--nfd-onboarding-light);
+		color: var(--nfd-onboarding-base);
 	}
 
 	&-wrapper {
@@ -83,7 +95,7 @@
 	&:hover {
 		transition: all 0.2s ease-in;
 		background-color: rgba($color: var(--wp-admin-theme-color-darker-10--rgb), $alpha: 0.7);
-		color: var(--nfd-onboarding-light);
+		color: var(--nfd-onboarding-base);
 
 		.nfd-card-pri-category-wrapper-icon {
 			transition: all 0.2s ease-in;
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss
index 6dc018d71..c45cbc502 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/stylesheet.scss
@@ -56,23 +56,23 @@
 	margin: auto 0.2rem 1.15rem 1rem;
 	background-position: center;
 	color: var(--nfd-onboarding-black);
-	background-color: var(--nfd-onboarding-light-gray-3);
+	background-color: var(--nfd-onboarding-base-gray);
 
 	&.chosenSecondaryCategory {
 		background-color: var(--wp-admin-theme-color-darker-10);
-		color: var(--nfd-onboarding-light);
+		color: var(--nfd-onboarding-base);
 	}
 
 	&:hover {
 		transition: all 0.2s ease-in;
 		background-color: rgba($color: var(--wp-admin-theme-color-darker-10--rgb), $alpha: 0.7);
-		color: var(--nfd-onboarding-light);
+		color: var(--nfd-onboarding-base);
 	}
 
 	&-wrapper {
 		display: inline-flex;
 		margin-bottom: 2rem;
-		border-bottom: 2px solid #00568c;
+		border-bottom: 2px solid var(--wp-admin-theme-color-darker-10);
 
 	}
 }
@@ -129,7 +129,7 @@
 
 		&-text {
 			display: inline-block;
-			color: var(--nfd-onboarding-dark);
+			color: var(--nfd-onboarding-black);
 			font-size: 0.85rem;
 			font-weight: 400;
 			margin: 0;
diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss
index 4a2bf0d2a..fc5907c62 100644
--- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/stylesheet.scss
@@ -1,135 +1,146 @@
 .nfd-onboarding-overview {
-    width: 100%;
-    max-width: 960px;
-    background-color: var(--nfd-onboarding-light);
-    padding: 20px;
-    &__header {
-        display: flex;
-        align-items: center;
-        column-gap: 1rem;
-        &-icon {
-            display: flex;
-            place-items: center;
-            svg {
-                fill: var(--nfd-onboarding-primary);
-            }
-        }
-        &-heading {
-            margin: 0 0 6px 0;
-            color: var(--nfd-onboarding-dark);
-        }
-        &-subheading {
-            color: var(--nfd-onboarding-dark);
-        }
-    }
-
-    &__tab-panel {
-        width: 90%;
-        padding-bottom: 40px;
-        color: var(--nfd-onboarding-dark);
-    }
+	width: 100%;
+	max-width: 960px;
+	background-color: var(--nfd-onboarding-base);
+	padding: 20px;
+
+	&__header {
+		display: flex;
+		align-items: center;
+		column-gap: 1rem;
+
+		&-icon {
+			display: flex;
+			place-items: center;
+
+			svg {
+				fill: var(--nfd-onboarding-primary);
+			}
+		}
+
+		&-heading {
+			margin: 0 0 6px 0;
+			color: var(--nfd-onboarding-contrast);
+		}
+
+		&-subheading {
+			color: var(--nfd-onboarding-contrast);
+		}
+	}
+
+	&__tab-panel {
+		width: 90%;
+		padding-bottom: 40px;
+		color: var(--nfd-onboarding-contrast);
+	}
 }
 
 .nfd-step-card-subheading {
-    display: flex;
-    justify-content: space-around;
+	display: flex;
+	justify-content: space-around;
 }
 
 .components-tab-panel__tabs {
-    justify-content: space-around;
-	@media screen and ( max-width: 480px ) {
-        width: 100%;
-    }
+	justify-content: space-around;
+
+	@media screen and (max-width: 480px) {
+		width: 100%;
+	}
 }
 
 .components-tab-panel__tabs > .components-button:focus:not(:disabled),
 .components-tab-panel__tabs > .components-button.is-pressed:focus:not(:disabled) {
-    box-shadow: inset 0 0 -($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color);
+	box-shadow: inset 0 0 - ($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color);
 }
 
 .components-tab-panel__tabs-item {
-    justify-content: center;
-    border-bottom: 1px solid #CCCCCC;
-    width: 100%;
-    font-size: clamp(0.55rem, 1vw + 0.3rem, 1rem);
-    line-height: 1.5;
-
-    &.is-active {
-        color: var(--wp-admin-theme-color);
-		box-shadow: inset 0 0 -($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color);
-    }
-
-    &.is-not-active {
-        box-shadow: none !important;
-    }
+	justify-content: center;
+	border-bottom: 1px solid var(--nfd-onboarding-light-gray-8);
+	width: 100%;
+	font-size: clamp(0.55rem, 1vw + 0.3rem, 1rem);
+	line-height: 1.5;
+
+	&.is-active {
+		color: var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 - ($border-width-tab - 0.5) 0 0 var(--wp-admin-theme-color);
+	}
+
+	&.is-not-active {
+		box-shadow: none !important;
+	}
 }
 
-.tab-data{
-    width: 100%;
-    padding-top: 40px;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    justify-content: space-between;
+.tab-data {
+	width: 100%;
+	padding-top: 40px;
+	display: flex;
+	flex-direction: row;
+	align-items: stretch;
+	justify-content: space-between;
 }
 
-.tab-text{
-    padding-right: 10px;
-    font-size:  clamp(0.88rem, 0.45rem + 0.76vw, 1.13rem);
-    line-height: 1.6;
+.tab-text {
+	padding-right: 10px;
+	font-size: clamp(0.88rem, 0.45rem + 0.76vw, 1.13rem);
+	line-height: 1.6;
 }
 
 .tab-img {
-    background-color: var(--nfd-onboarding-tertiary);
-    overflow: hidden;
+	background-color: var(--nfd-onboarding-tertiary);
+	overflow: hidden;
 }
 
-.tab-img-base {
-    background-size: contain;
-    background-repeat: no-repeat;
-    height: 228px;
-    width: clamp(180px, 50vw, 400px);
+%tab-img-base {
+	background-size: contain;
+	background-repeat: no-repeat;
+	height: 228px;
+	width: clamp(180px, 50vw, 400px);
 }
 
-.content-img{
-    @extend .tab-img-base;
-    background-image: var(--get-started-content-img);
+.content-img {
+
+	@extend %tab-img-base;
+	background-image: var(--get-started-content-img);
 }
 
-.features-img{
-    @extend .tab-img-base;
-    background-image: var(--get-started-features-img);
+.features-img {
+
+	@extend %tab-img-base;
+	background-image: var(--get-started-features-img);
 }
 
-.design-img{
-    @extend .tab-img-base;
-    background-image: var(--get-started-design-img);
+.design-img {
+
+	@extend %tab-img-base;
+	background-image: var(--get-started-design-img);
 }
 
 .welcome-card {
 	display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-    height: clamp(560px, 59vh, 800px);
-    width: 100%;
-    padding-bottom: 10px;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-around;
+	height: clamp(560px, 59vh, 800px);
+	width: 100%;
+	padding-bottom: 10px;
 }
 
-
 @media screen and ( max-width: #{ ($break-medium)} ) {
-    .tab-data {
-        flex-direction: column-reverse;
-        align-items: center;
-    }
-
-    .content-text {
-        text-align: center;
-        width: 100%;
-        min-height: 10px;
-    }
-
-    .content-img, .design-img, .features-img {
-        max-height: 100px;
-    }
+
+	.tab-data {
+		flex-direction: column-reverse;
+		align-items: center;
+	}
+
+	.content-text {
+		text-align: center;
+		width: 100%;
+		min-height: 10px;
+	}
+
+	.content-img,
+	.design-img,
+	.features-img {
+		max-height: 100px;
+	}
 }
diff --git a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss
index a69f91d6e..692c4d678 100644
--- a/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/WhatNext/stylesheet.scss
@@ -3,7 +3,7 @@
 .nfd-onboarding-overview {
 	width: 100%;
 	max-width: 960px;
-	background-color: var(--nfd-onboarding-light);
+	background-color: var(--nfd-onboarding-base);
 	padding: 20px;
 
 	&__header {
@@ -22,18 +22,18 @@
 
 		&-heading {
 			margin: 0 0 6px 0;
-			color: var(--nfd-onboarding-dark);
+			color: var(--nfd-onboarding-contrast);
 		}
 
 		&-subheading {
-			color: var(--nfd-onboarding-dark);
+			color: var(--nfd-onboarding-contrast);
 		}
 	}
 
 	&__tab-panel {
 		width: 90%;
 		padding-bottom: 40px;
-		color: var(--nfd-onboarding-dark);
+		color: var(--nfd-onboarding-contrast);
 	}
 }
 
@@ -57,7 +57,7 @@
 
 .components-tab-panel__tabs-item {
 	justify-content: center;
-	border-bottom: 1px solid #ccc;
+	border-bottom: 1px solid var(--nfd-onboarding-light-gray-8);
 	width: 100%;
 	font-size: clamp(0.55rem, 1vw + 0.3rem, 1rem);
 	line-height: 1.5;
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
index b644d6aa1..a9d5bdb7b 100644
--- a/src/OnboardingSPA/styles/_branding.scss
+++ b/src/OnboardingSPA/styles/_branding.scss
@@ -9,7 +9,7 @@ body {
 		--wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
 		--wp-admin-theme-color-darker-20: #1e1e1e;
 		--wp-admin-theme-color-darker-20--rgb: 0, 30, 30;
-		--nfd-onboarding-dark-icon: url(../../Brands/wordpress/dark.svg);
+		--nfd-onboarding-contrast-icon: url(../../Brands/wordpress/dark.svg);
 		--nfd-onboarding-icon: url(../../Brands/wordpress/icon.svg);
 		--nfd-onboarding-logo: url(../../Brands/wordpress/logo.svg);
 		--nfd-onboarding-primary: var(--wp-admin-theme-color);
@@ -25,9 +25,16 @@ body {
 		--nfd-onboarding-light-gray-3: #f2f2f2;
 		--nfd-onboarding-light-gray-4: #a7a7a7;
 		--nfd-onboarding-light-gray-5: #eee;
+		--nfd-onboarding-light-gray-6: rgb(224, 224, 224);
+		--nfd-onboarding-light-gray-7: #f6f7f8;
+		--nfd-onboarding-light-gray-8: #ccc;
 		--nfd-onboarding-light-gray-highlighted: #e2e9f4;
 		--nfd-onboarding-dark: var(--wp-admin-theme-color-darker-20);
 		--nfd-onboarding-border: 219, 219, 219;
+		--nfd-onboarding-base: var(--nfd-onboarding-light);
+		--nfd-onboarding-contrast: var(--nfd-onboarding-dark);
+		--nfd-onboarding-drawer-base: var(--nfd-onboarding-dark);
+		--nfd-onboarding-drawer-contrast: var(--nfd-onboarding-light);
 		--nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary);
 		--nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light);
 		--nfd-onboarding-loader-start: var(--nfd-onboarding-primary);
@@ -47,7 +54,7 @@ body {
 		--wp-admin-theme-color-darker-10--rgb: 28, 92, 186;
 		--wp-admin-theme-color-darker-20: #0242a0;
 		--wp-admin-theme-color-darker-20--rgb: 2, 66, 160;
-		--nfd-onboarding-dark-icon: url(../../Brands/bluehost/dark.svg);
+		--nfd-onboarding-contrast-icon: url(../../Brands/bluehost/dark.svg);
 		--nfd-onboarding-icon: url(../../Brands/bluehost/icon.svg);
 		--nfd-onboarding-logo: url(../../Brands/bluehost/logo.svg);
 		--nfd-onboarding-primary: #3575d3;
@@ -57,17 +64,22 @@ body {
 		--nfd-onboarding-secondary-alt: #304663;
 		--nfd-onboarding-tertiary: #7bb1fd;
 		--nfd-onboarding-tertiary-alt: #84c0fc;
-		--nfd-onboarding-light: #fff;
+		--nfd-onboarding-base: #fff;
 		--nfd-onboarding-light-gray: #f0f0f0;
 		--nfd-onboarding-light-gray-2: #efefef;
 		--nfd-onboarding-light-gray-3: #f2f2f2;
 		--nfd-onboarding-light-gray-4: #a7a7a7;
 		--nfd-onboarding-light-gray-5: #eee;
+		--nfd-onboarding-light-gray-6: rgb(224, 224, 224);
+		--nfd-onboarding-light-gray-7: #f6f7f8;
+		--nfd-onboarding-light-gray-8: #ccc;
 		--nfd-onboarding-light-gray-highlighted: #e2e9f4;
-		--nfd-onboarding-dark: #1d2a3b;
+		--nfd-onboarding-contrast: #1d2a3b;
+		--nfd-onboarding-drawer-base: var(--nfd-onboarding-contrast);
+		--nfd-onboarding-drawer-contrast: var(--nfd-onboarding-base);
 		--nfd-onboarding-border: 219, 219, 219;
 		--nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary);
-		--nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light);
+		--nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-base);
 		--nfd-onboarding-loader-start: var(--nfd-onboarding-primary);
 		--nfd-onboarding-loader-end: var(--nfd-onboarding-tertiary);
 		--nfd-onboarding-step-loader-icon: url(../../Brands/bluehost/step-loader-logo.svg);
@@ -100,7 +112,7 @@ body {
 		--wp-admin-theme-color-darker-10--rgb: 20, 133, 236;
 		--wp-admin-theme-color-darker-20: #1177d2;
 		--wp-admin-theme-color-darker-20--rgb: 17, 119, 210;
-		--nfd-onboarding-dark-icon: url(../../Brands/hostgator/dark.svg);
+		--nfd-onboarding-contrast-icon: url(../../Brands/hostgator/dark.svg);
 		--nfd-onboarding-icon: url(../../Brands/hostgator/icon.svg);
 		--nfd-onboarding-logo: url(../../Brands/hostgator/logo.svg);
 		--nfd-onboarding-primary: #2e93ee;
@@ -110,16 +122,21 @@ body {
 		--nfd-onboarding-secondary-alt: #363636;
 		--nfd-onboarding-tertiary: #ffcf00;
 		--nfd-onboarding-tertiary-alt: #ff9144;
-		--nfd-onboarding-light: #f5f6f8;
+		--nfd-onboarding-base: #f5f6f8;
 		--nfd-onboarding-light-gray: #f0f0f0;
 		--nfd-onboarding-light-gray-2: #efefef;
 		--nfd-onboarding-light-gray-3: #f2f2f2;
 		--nfd-onboarding-light-gray-4: #a7a7a7;
 		--nfd-onboarding-light-gray-5: #eee;
-		--nfd-onboarding-dark: #1e2044;
+		--nfd-onboarding-light-gray-6: rgb(224, 224, 224);
+		--nfd-onboarding-light-gray-7: #f6f7f8;
+		--nfd-onboarding-light-gray-8: #ccc;
+		--nfd-onboarding-contrast: #1e2044;
+		--nfd-onboarding-drawer-base: var(--nfd-onboarding-contrast);
+		--nfd-onboarding-drawer-contrast: var(--nfd-onboarding-base);
 		--nfd-onboarding-border: 245, 246, 248;
 		--nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary);
-		--nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light);
+		--nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-base);
 		--nfd-onboarding-loader-start: var(--nfd-onboarding-primary);
 		--nfd-onboarding-loader-end: var(--nfd-onboarding-tertiary);
 	}
@@ -131,7 +148,7 @@ body {
 		--wp-admin-theme-color-darker-10--rgb: 43, 92, 251;
 		--wp-admin-theme-color-darker-20: #0b44fb;
 		--wp-admin-theme-color-darker-20--rgb: 11, 68, 251;
-		--nfd-onboarding-dark-icon: url(../../Brands/webcom/dark.svg);
+		--nfd-onboarding-contrast-icon: url(../../Brands/webcom/dark.svg);
 		--nfd-onboarding-icon: url(../../Brands/webcom/icon.svg);
 		--nfd-onboarding-logo: url(../../Brands/webcom/logo.svg);
 		--nfd-onboarding-primary: #4b75fc;
@@ -141,13 +158,18 @@ body {
 		--nfd-onboarding-secondary-alt: #171003;
 		--nfd-onboarding-tertiary: #fed96a;
 		--nfd-onboarding-tertiary-alt: #fec101;
-		--nfd-onboarding-light: #fff;
+		--nfd-onboarding-base: #fff;
 		--nfd-onboarding-light-gray: #f0f0f0;
 		--nfd-onboarding-light-gray-2: #efefef;
 		--nfd-onboarding-light-gray-3: #f2f2f2;
 		--nfd-onboarding-light-gray-4: #a7a7a7;
 		--nfd-onboarding-light-gray-5: #eee;
-		--nfd-onboarding-dark: #000;
+		--nfd-onboarding-light-gray-6: rgb(224, 224, 224);
+		--nfd-onboarding-light-gray-7: #f6f7f8;
+		--nfd-onboarding-light-gray-8: #ccc;
+		--nfd-onboarding-contrast: #000;
+		--nfd-onboarding-drawer-base: var(--nfd-onboarding-contrast);
+		--nfd-onboarding-drawer-contrast: var(--nfd-onboarding-base);
 		--nfd-onboarding-border: 219, 219, 219;
 		--nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary-alt);
 		--nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-tertiary-alt);
@@ -162,7 +184,7 @@ body {
 		--wp-admin-theme-color-darker-10--rgb: 76, 117, 32;
 		--wp-admin-theme-color-darker-20: #43681d;
 		--wp-admin-theme-color-darker-20--rgb: 67, 104, 29;
-		--nfd-onboarding-dark-icon: url(../../Brands/crazy-domains/icon-empty.svg);
+		--nfd-onboarding-contrast-icon: url(../../Brands/crazy-domains/icon-empty.svg);
 		--nfd-onboarding-icon: url(../../Brands/crazy-domains/icon.svg);
 		--nfd-onboarding-logo: url(../../Brands/crazy-domains/logo.svg);
 		--nfd-onboarding-primary: var(--wp-admin-theme-color);
@@ -172,14 +194,17 @@ body {
 		--nfd-onboarding-secondary-alt: #1d2a3b;
 		--nfd-onboarding-tertiary: #196bde;
 		--nfd-onboarding-tertiary-alt: #c77d1c;
-		--nfd-onboarding-light: #fff;
+		--nfd-onboarding-base: #fff;
 		--nfd-onboarding-light-gray: #fcfff9;
 		--nfd-onboarding-light-gray-2: #fcfff9;
 		--nfd-onboarding-light-gray-3: #fcfff9;
 		--nfd-onboarding-light-gray-4: #5c5c5c;
-		--nfd-onboarding-light-gray-5: var(--nfd-onboarding-light);
+		--nfd-onboarding-light-gray-5: var(--nfd-onboarding-base);
+		--nfd-onboarding-light-gray-6: rgb(224, 224, 224);
+		--nfd-onboarding-light-gray-7: #f6f7f8;
+		--nfd-onboarding-light-gray-8: #ccc;
 		--nfd-onboarding-light-gray-highlighted: #e2e9f4;
-		--nfd-onboarding-dark: #1d2a3b;
+		--nfd-onboarding-contrast: #1d2a3b;
 		--nfd-onboarding-border: 219, 219, 219;
 		--nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-light-gray-4);
 		--nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-primary);
@@ -191,9 +216,9 @@ body {
 		--nfd-onboarding-step-what-next-img-1: url(../../Brands/crazy-domains/wp-admin.png);
 		--nfd-onboarding-step-what-next-img-2: url(../static/images/help.png);
 
-		--nfd-onboarding-drawer-bg: var(--nfd-onboarding-light);
-		--nfd-onboarding-drawer-fg: var(--nfd-onboarding-dark);
-		--nfd-onboarding-content-bg: var(--nfd-onboarding-light);
+		--nfd-onboarding-drawer-base: var(--nfd-onboarding-base);
+		--nfd-onboarding-drawer-contrast: var(--nfd-onboarding-contrast);
+		--nfd-onboarding-content-base: var(--nfd-onboarding-base);
 
 		.nfd-onboarding-drawer__toggle {
 			background-color: transparent;
@@ -223,14 +248,14 @@ body {
 				color: var(--nfd-onboarding-light-gray-4);
 
 				&.active {
-					background-color: var(--nfd-onboarding-drawer-bg);
+					background-color: var(--nfd-onboarding-drawer-base);
 					color: var(--nfd-onboarding-primary);
 					border-color: var(--nfd-onboarding-primary);
 				}
 			}
 
 			.custom-palette {
-				color: var(--nfd-onboarding-light);
+				color: var(--nfd-onboarding-base);
 			}
 
 			.drawer-palette--button {
@@ -240,7 +265,7 @@ body {
 					background-color: var(--nfd-onboarding-primary);
 
 					* {
-						color: var(--nfd-onboarding-light);
+						color: var(--nfd-onboarding-base);
 					}
 				}
 			}
@@ -249,7 +274,7 @@ body {
 		.nfd-onboarding-layout {
 
 			&.is-bg-primary {
-				background-color: var(--nfd-onboarding-light);
+				background-color: var(--nfd-onboarding-base);
 			}
 
 			.checkbox-item--selected {
diff --git a/src/OnboardingSPA/styles/_interface.scss b/src/OnboardingSPA/styles/_interface.scss
index 9b854da5a..75d7d1265 100644
--- a/src/OnboardingSPA/styles/_interface.scss
+++ b/src/OnboardingSPA/styles/_interface.scss
@@ -2,7 +2,7 @@ $header-height: 60px;
 $nav-sidebar-width: 300px;
 
 html.wp-toolbar {
-	background: $white;
+	background: var(--nfd-onboarding-white);
 }
 
 body {
@@ -25,13 +25,14 @@ body {
 	--nfd-onboarding-white: #fff;
 	--nfd-onboarding-white-rgb: 255, 255, 255;
 	--nfd-onboarding-black: #000;
-	--nfd-onboarding-header-bg: var(--nfd-onboarding-light);
-	--nfd-onboarding-header-fg: var(--nfd-onboarding-dark);
-	--nfd-onboarding-content-bg: var(--nfd-onboarding-light);
-	--nfd-onboarding-content-fg: var(--nfd-onboarding-dark);
-	--nfd-onboarding-drawer-bg: var(--nfd-onboarding-dark);
-	--nfd-onboarding-drawer-fg: var(--nfd-onboarding-light);
-	--nfd-onboarding-footer-fg: var(--nfd-onboarding-dark);
-	--nfd-onboarding-footer-bg: var(--nfd-onboarding-light);
-	--nfd-onboarding-link-hover-blue: #135e96;
+	--nfd-onboarding-header-base: var(--nfd-onboarding-light);
+	--nfd-onboarding-header-contrast: var(--nfd-onboarding-dark);
+	--nfd-onboarding-content-base: var(--nfd-onboarding-light);
+	--nfd-onboarding-content-contrast: var(--nfd-onboarding-dark);
+	--nfd-onboarding-drawer-base: var(--nfd-onboarding-dark);
+	--nfd-onboarding-drawer-contrast: var(--nfd-onboarding-light);
+	--nfd-onboarding-footer-contrast: var(--nfd-onboarding-dark);
+	--nfd-onboarding-footer-base: var(--nfd-onboarding-light);
+	--nfd-onboarding-minipreview-base: #f2f2f2;
+	--nfd-onboarding-base-gray: #f0f0f0;
 }
diff --git a/src/OnboardingSPA/styles/_utilities.scss b/src/OnboardingSPA/styles/_utilities.scss
index 29f5ee105..20ab33b55 100644
--- a/src/OnboardingSPA/styles/_utilities.scss
+++ b/src/OnboardingSPA/styles/_utilities.scss
@@ -13,7 +13,7 @@
 
 .is-bg-primary {
 	background-color: var(--nfd-onboarding-primary);
-	color: var(--nfd-onboarding-light);
+	color: var(--nfd-onboarding-base);
 }
 
 .center {
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index cd4eeed2d..cf1114385 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -56,7 +56,7 @@
 
 .nfd-onboarding-container {
 	display: flex;
-	background-color: $white;
+	background-color: var(--nfd-onboarding-white);
 
 	@include break-small {
 		bottom: 0;