diff --git a/src/components/customErrorMessage/customErrorMessage.module.css b/src/components/customErrorMessage/customErrorMessage.module.css
index dbe82061b..bd3073107 100644
--- a/src/components/customErrorMessage/customErrorMessage.module.css
+++ b/src/components/customErrorMessage/customErrorMessage.module.css
@@ -23,9 +23,8 @@
   align-self: stretch;
 
   border-radius: 1rem;
-  border: 2px solid var(--primary-red-error);
-  background: var(--text-primary-light, #faf8f5);
-  /* TODO: update this color */
+  border: 2px solid var(--surface-red);
+  background: var(--text-primary-light, #fafafa);
 }
 
 .buttonWrapper {
diff --git a/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css b/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css
index fbab4355c..37110b330 100644
--- a/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css
+++ b/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css
@@ -8,7 +8,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: var(--primary-black);
+  background-color: var(--text-primary);
   border-radius: 12px;
   height: 125px;
   width: 50%;
diff --git a/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css b/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css
index f450815f1..648d799e4 100644
--- a/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css
+++ b/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css
@@ -5,13 +5,13 @@
 }
 
 .highlightCard {
-  border: 3px solid var(--primary-yellow-warning);
+  border: 3px solid var(--surface-yellow);
   border-radius: 0.25rem;
-  background-color: var(--primary-yellow-warning);
+  background-color: var(--surface-yellow);
 }
 
 .highlightCard .innerContent {
-  background-color: var(--primary-bg);
+  background-color: var(--background-bg-light-primary);
   border-radius: 1.5rem;
   padding: 1rem;
   height: 100%;
@@ -29,7 +29,7 @@
 }
 
 .highlightOutside {
-  background-color: var(--primary-yellow-warning);
+  background-color: var(--surface-yellow);
   color: var(--text-primary);
   display: inline-block;
   padding: 0.25rem 1.25rem;
diff --git a/src/components/customerCases/customerCase/sections/text/textSection.module.css b/src/components/customerCases/customerCase/sections/text/textSection.module.css
index 68abbdca2..9fa6b7f97 100644
--- a/src/components/customerCases/customerCase/sections/text/textSection.module.css
+++ b/src/components/customerCases/customerCase/sections/text/textSection.module.css
@@ -10,9 +10,9 @@
 }
 
 .content.framed {
-  border: 2px solid var(--primary-yellow-warning);
+  border: 2px solid var(--surface-yellow);
   border-radius: 0.25rem;
-  background-color: var(--primary-yellow-warning);
+  background-color: var(--surface-yellow);
 }
 
 .innerContent {
@@ -22,7 +22,7 @@
 }
 
 .framed .innerContent {
-  background-color: var(--primary-bg);
+  background-color: var(--background-bg-light-primary);
   border-radius: 1.25rem;
   padding: 1rem;
   height: fit-content;
diff --git a/src/components/employeeCard/employeeCard.module.css b/src/components/employeeCard/employeeCard.module.css
index 51e71c5c6..a49534326 100644
--- a/src/components/employeeCard/employeeCard.module.css
+++ b/src/components/employeeCard/employeeCard.module.css
@@ -8,7 +8,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: var(--primary-black);
+  background-color: var(--background-bg-dark);
   border-radius: 12px;
   height: 125px;
   width: 50%;
@@ -63,7 +63,7 @@
   max-width: var(--Text-paragraph, 537px);
   position: relative;
 
-  background-color: var(--primary-black);
+  background-color: var(--background-bg-dark);
   border-radius: var(--medium, 12px);
 }
 
diff --git a/src/components/forms/checkbox/checkbox.module.css b/src/components/forms/checkbox/checkbox.module.css
index 9dde2b58e..5d48a6f12 100644
--- a/src/components/forms/checkbox/checkbox.module.css
+++ b/src/components/forms/checkbox/checkbox.module.css
@@ -64,14 +64,14 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  color: var(--primary-red-error);
+  color: var(--surface-red);
   &::before {
     content: "";
     width: 1.25rem;
     height: 1.25rem;
     display: inline-block;
     -webkit-mask-size: cover;
-    background-color: var(--primary-red-error);
+    background-color: var(--surface-red);
     -webkit-mask: url("/_assets/alert-circle.svg") no-repeat 50% 50%;
   }
 
diff --git a/src/components/forms/inputField/inputField.module.css b/src/components/forms/inputField/inputField.module.css
index 72c22268d..bc43b41ae 100644
--- a/src/components/forms/inputField/inputField.module.css
+++ b/src/components/forms/inputField/inputField.module.css
@@ -27,14 +27,14 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  color: var(--primary-red-error);
+  color: var(--surface-red);
   &::before {
     content: "";
     width: 1.25rem;
     height: 1.25rem;
     display: inline-block;
     -webkit-mask-size: cover;
-    background-color: var(--primary-red-error);
+    background-color: var(--surface-red);
     -webkit-mask: url("/_assets/alert-circle.svg") no-repeat 50% 50%;
   }
 
diff --git a/src/components/forms/inputTextArea/inputTextArea.module.css b/src/components/forms/inputTextArea/inputTextArea.module.css
index b7413eb9a..f2ebcd45e 100644
--- a/src/components/forms/inputTextArea/inputTextArea.module.css
+++ b/src/components/forms/inputTextArea/inputTextArea.module.css
@@ -19,7 +19,7 @@
 
   border-radius: 0.5rem;
   border: 1px solid var(--background-bg-light-secondary, #ece1d3);
-  background: var(--text-primary-light, #fff);
+  background: var(--background-bg-light-primary, #fafafa);
   /* Todo: Update color */
   min-height: 10rem;
 }
@@ -28,14 +28,14 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  color: var(--primary-red-error);
+  color: var(--surface-red);
   &::before {
     content: "";
     width: 1.25rem;
     height: 1.25rem;
     display: inline-block;
     -webkit-mask-size: cover;
-    background-color: var(--primary-red-error);
+    background-color: var(--surface-red);
     -webkit-mask: url("/_assets/alert-circle.svg") no-repeat 50% 50%;
   }
 
diff --git a/src/components/link/link.module.css b/src/components/link/link.module.css
index f3e6894bb..0e37d7c2b 100644
--- a/src/components/link/link.module.css
+++ b/src/components/link/link.module.css
@@ -52,7 +52,7 @@
     height: 24px;
     display: inline-block;
     -webkit-mask-size: cover;
-    background-color: var(--primary-white);
+    background-color: var(--text-primary); 
     -webkit-mask: url("/_assets/arrow.svg") no-repeat 50% 50%;
   }
 }
diff --git a/src/components/navigation/header/header.module.css b/src/components/navigation/header/header.module.css
index 1ac4c2fec..948c2f6f4 100644
--- a/src/components/navigation/header/header.module.css
+++ b/src/components/navigation/header/header.module.css
@@ -170,6 +170,6 @@
 .logo {
   width: 130px;
   height: 37px;
-  background-color: var(--primary-white);
+  background-color: var(--background-bg-light-primary);
   -webkit-mask: url("/_assets/variant-logo.svg") no-repeat 50% 50%;
 }
diff --git a/src/components/sections/callToAction/callToAction.module.css b/src/components/sections/callToAction/callToAction.module.css
index 3b55abfda..5e17d3204 100644
--- a/src/components/sections/callToAction/callToAction.module.css
+++ b/src/components/sections/callToAction/callToAction.module.css
@@ -5,7 +5,7 @@
   text-align: center;
   gap: 1.5rem;
   padding: 5rem 2rem;
-  background: var(--primary-bg-dark);
+  background: var(--surface-green);
 
   @media (min-width: 640px) {
     padding: 5rem 3rem;
diff --git a/src/components/sections/employees/employees.module.css b/src/components/sections/employees/employees.module.css
index dd5f8c876..1fcb5cb0a 100644
--- a/src/components/sections/employees/employees.module.css
+++ b/src/components/sections/employees/employees.module.css
@@ -7,7 +7,7 @@
 }
 
 .header {
-  color: var(--primary-black);
+  color: var(--background-bg-light-primary);
   font-size: 48px;
   font-weight: 600;
   align-self: flex-start;