diff --git a/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css b/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css
index 390a130d4..6064a86cd 100644
--- a/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css
+++ b/Client/src/Components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css
@@ -1,22 +1,5 @@
-:root {
-  --update-subscription-color-0: #101828;
-  --update-subscription-color-1: #475467;
-  --update-subscription-color-2: #fff;
-  --update-subscription-color-3: #eaecf0;
-  --update-subscription-color-4: #7f56d9;
-  --update-subscription-color-5: #1570ef;
-  --update-subscription-color-6: #344054;
-  --update-subscription-color-7: #d0d5dd;
-  --update-subscription-padding-0: 12px 16px;
-  --update-subscription-margin-right: 12px;
-  --update-subscription-font-size: 13px;
-  --update-subscription-radius-0: 4px;
-  --spacing-1: 16px;
-  --spacing-2: 20px;
-}
-
 .update-subscription {
-  margin: var(--spacing-2);
+  margin: 20px;
 }
 
 .update-subscription,
@@ -33,7 +16,7 @@
 .subscription-dialog-title {
   font-size: 1rem;
   font-weight: 700;
-  color: var(--update-subscription-color-0);
+  color: var(--env-var-color-1);
 }
 
 .v-spacing-small {
@@ -46,7 +29,7 @@
 
 .subscription-dialog-text {
   font-size: 13px;
-  color: var(--update-subscription-color-1);
+  color: var(--env-var-color-2);
 }
 
 .subscription-dialog-controls {
@@ -54,28 +37,28 @@
 }
 
 .controls-negative {
-  padding: var(--update-subscription-padding-0);
-  margin-right: var(--update-subscription-margin-right);
-  border-radius: var(--update-subscription-radius-0);
-  border: 1px solid var(--update-subscription-color-3);
-  background-color: var(--update-subscription-color-2);
-  font-size: var(--update-subscription-font-size);
+  padding: 12px 16px;
+  margin-right: 12px;
+  border-radius: var(--env-var-radius-1);
+  border: 1px solid var(--env-var-color-6);
+  background-color: var(--env-var-color-8);
+  font-size: var(--env-var-font-size-medium);
 }
 
 .controls-positive,
 .subscribe-button {
-  padding: var(--update-subscription-padding-0);
-  margin-right: var(--update-subscription-margin-right);
-  border-radius: var(--update-subscription-radius-0);
-  border: 1px solid var(--update-subscription-color-4);
-  background-color: var(--update-subscription-color-5);
-  color: var(--update-subscription-color-2);
-  font-size: var(--update-subscription-font-size);
+  padding: 12px 16px;
+  margin-right: 12px;
+  border-radius: var(--env-var-radius-1);
+  border: 1px solid var(--env-var-color-7);
+  background-color: var(--env-var-color-3);
+  color: var(--env-var-color-8);
+  font-size: var(--env-var-font-size-medium);
 }
 
 .update-subscription-title {
-  color: var(--update-subscription-color-6);
-  padding: 0 var(--spacing-2);
+  color: var(--env-var-color-5);
+  padding: 0 20px;
   font-weight: 700;
   font-size: 13px;
   margin-bottom: 10px;
@@ -83,17 +66,17 @@
 
 .subscription-email {
   display: flex;
-  padding: 0 var(--spacing-2);
+  padding: 0 20px;
 }
 
 .subscription-email-field {
   width: 290px;
   height: 24px;
-  border-radius: var(--update-subscription-radius-0);
-  border: 1px solid var(--update-subscription-color-7);
+  border-radius: var(--env-var-radius-1);
+  border: 1px solid var(--env-var-color-4);
   box-shadow: 0px 1px 2px 0px rgba(101, 182, 28, 0.05);
   padding: 5px 15px;
-  margin-right: var(--spacing-2);
+  margin-right: 20px;
 }
 
 .subscribe-button {
diff --git a/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css b/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css
index 92fbe352a..aff02ab46 100644
--- a/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css
+++ b/Client/src/Components/Announcements/AnnouncementsDualButton/announcementsDualButton.css
@@ -1,24 +1,11 @@
-:root {
-  --announcement-border-color: #d0d5dd;
-  --announcement-border-radius: 4px;
-  --announcement-border-radius-2: 8px;
-  --announcement-font-size-0: 13px;
-  --announcement-font-color-0: #344054;
-  --announcement-font-color-1: #475467;
-  --announcement-font-color-2: #1570ef;
-  --announcement-padding: 16px;
-  --info-icon-frame-color: #eaecf0;
-  --margin: 20px;
-}
-
 .announcement-without-tile {
-  margin: var(--margin);
+  margin: 20px;
   max-width: 343px;
   width: fit-content;
   display: flex;
-  border: 1px solid var(--announcement-border-color);
-  padding: var(--announcement-padding);
-  border-radius: var(--announcement-border-radius);
+  border: 1px solid var(--env-var-color-4);
+  padding: 16px;
+  border-radius: var(--env-var-radius-1);
 }
 
 .h-spacing {
@@ -26,13 +13,13 @@
 }
 
 .announcement-without-content-subject {
-  font-size: var(--announcement-font-size-0);
-  color: var(--announcement-font-color-0);
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-5);
   font-weight: 700;
   margin-bottom: 10px;
 }
 
 .announcement-without-content-body {
-  font-size: var(--announcement-font-size-0);
-  color: var(--announcement-font-color-1);
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-2);
 }
diff --git a/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css b/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css
index 1f1659060..02f132374 100644
--- a/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css
+++ b/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css
@@ -1,71 +1,58 @@
-:root {
-  --announcement-border-color: #d0d5dd;
-  --announcement-border-radius: 4px;
-  --announcement-border-radius-2: 8px;
-  --announcement-font-size-0: 13px;
-  --announcement-font-color-0: #344054;
-  --announcement-font-color-1: #475467;
-  --announcement-font-color-2: #1570ef;
-  --announcement-padding: 16px;
-  --info-icon-frame-color: #eaecf0;
-  --tile-margin: 20px;
-}
-
 .announcement-tile {
-  margin: var(--tile-margin);
+  margin: 20px;
   width: fit-content;
   display: flex;
-  border: 1px solid var(--announcement-border-color);
-  padding: var(--announcement-padding);
-  border-radius: var(--announcement-border-radius);
+  border: 1px solid var(--env-var-color-4);
+  padding: 16px;
+  border-radius: var(--env-var-radius-1);
 }
 
 .info-icon-frame {
   display: flex;
-  width: 40px;
-  height: 40px;
-  border: 1px solid var(--info-icon-frame-color);
-  border-radius: var(--announcement-border-radius-2);
+  width: var(--env-var-default-2);
+  height: var(--env-var-default-2);
+  border: 1px solid var(--env-var-color-6);
+  border-radius: var(--env-var-radius-2);
   justify-content: center;
   align-items: center;
 }
 
 .announcement-content {
-  padding: 0 var(--announcement-padding);
+  padding: 0 16px;
 }
 
 .announcement-content-subject {
-  font-size: var(--announcement-font-size-0);
-  color: var(--announcement-font-color-0);
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-5);
   font-weight: 700;
   margin-bottom: 10px;
 }
 
 .announcement-content-body {
-  font-size: var(--announcement-font-size-0);
-  color: var(--announcement-font-color-1);
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-2);
   font-weight: 300;
 }
 
 .announcement-content-controllers {
   display: flex;
-  font-size: var(--announcement-font-size-0);
+  font-size: var(--env-var-font-size-medium);
   margin-top: 15px;
 }
 
 .controllers-button-esc {
-  font-size: var(--announcement-font-size-0);
+  font-size: var(--env-var-font-size-medium);
   font-weight: 600;
   margin-right: 12px;
 }
 
 .controllers-button-primary {
-  font-size: var(--announcement-font-size-0);
+  font-size: var(--env-var-font-size-medium);
   font-weight: 600;
-  color: var(--announcement-font-color-2);
+  color: var(--env-var-color-3);
 }
 
 .announcement-close {
-  width: 24px;
-  height: 24px;
+  width: var(--env-var-default-1);
+  height: var(--env-var-default-1);
 }
diff --git a/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css b/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css
index bc3427302..7a6e30b0a 100644
--- a/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css
+++ b/Client/src/Components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css
@@ -1,13 +1,7 @@
-:root {
-  --announcement-font-size-0: 13px;
-  --announcement-padding: 16px;
-  --margin: 20px;
-}
-
 .announcement-messagebar-body {
-  margin: var(--margin);
-  font-size: var(--announcement-font-size-0);
-  padding: 0 var(--announcement-padding) 0 0;
+  margin: 20px;
+  font-size: var(--env-var-font-size-medium);
+  padding: 0 16px 0 0;
   justify-content: center;
   align-items: center;
   margin: auto;
diff --git a/Client/src/Components/Check/check.css b/Client/src/Components/Check/check.css
index 284b79bda..17f372f2b 100644
--- a/Client/src/Components/Check/check.css
+++ b/Client/src/Components/Check/check.css
@@ -5,8 +5,8 @@
 }
 
 .check-icon {
-  width: 20px;
-  height: 20px;
+  width: var(--env-var-img-width-1);
+  height: var(--env-var-img-width-1);
 }
 
 .check-h-spacing {
@@ -14,7 +14,7 @@
 }
 
 .check-label {
-  font-size: 11px;
+  font-size: var(--env-var-font-size-small);
   font-weight: 600;
-  color: #475467;
+  color: var(--env-var-color-2);
 }
diff --git a/Client/src/Components/Checkbox/Checkbox.css b/Client/src/Components/Checkbox/Checkbox.css
index b77eac3d6..36a9a43be 100644
--- a/Client/src/Components/Checkbox/Checkbox.css
+++ b/Client/src/Components/Checkbox/Checkbox.css
@@ -1,12 +1,12 @@
 .checkbox-holder {
-  height: 20px;
+  height: var(--env-var-img-width-1);
   display: flex;
   align-items: center;
 }
 
 .checkbox {
-  width: 13px;
-  height: 13px;
+  width: var(--env-var-font-size-medium);
+  height: var(--env-var-font-size-medium);
   margin: 0;
   padding: 0;
   cursor: pointer;
@@ -14,8 +14,8 @@
 
 .checkbox-label {
   margin-left: 5px;
-  font-size: 13px;
-  color: #344054;
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-5);
   font-weight: 600;
   cursor: pointer;
 }
diff --git a/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css b/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
index 92ac7f5d6..e4ff13a7c 100644
--- a/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
+++ b/Client/src/Components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
@@ -1,11 +1,3 @@
-:root {
-  --popup-color-border-0: #f2f2f2;
-  --popup-color-0: #101828;
-  --popup-color-1: #475467;
-  --color-0: #1570ef;
-  --color-1: #175cd3;
-}
-
 .dual-button-popup-modal-holder {
   width: 380px;
   height: 130px;
@@ -13,19 +5,19 @@
   padding: 30px;
   box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03),
     0px 20px 24px -4px rgba(16, 24, 40, 0.08);
-  border: 1px solid var(--popup-color-border-0);
-  border-radius: 4px;
+  border: 1px solid var(--env-var-color-9);
+  border-radius: var(--env-var-radius-1);
 }
 
 .dual-button-popup-modal-subject {
-  color: var(--popup-color-0);
+  color: var(--env-var-color-1);
   font-weight: bolder;
   font-size: 16px;
 }
 
 .dual-button-popup-modal-description {
-  color: var(--popup-color-1);
-  font-size: 13px;
+  color: var(--env-var-color-2);
+  font-size: var(--env-var-font-size-medium);
   margin-top: 10px;
 }
 
@@ -42,19 +34,19 @@
   width: 145px;
   height: 35px;
   padding: 5px 20px;
-  background-color: var(--color-0);
-  border: 1px solid var(--color-1);
-  border-radius: 4px;
+  background-color: var(--env-var-color-3);
+  border: 1px solid var(--env-var-color-10);
+  border-radius: var(--env-var-radius-1);
   margin: 5px 0;
   margin-left: 20px;
-  color: white;
+  color: var(--env-var-color-8);
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--env-var-font-size-medium);
 }
 
 .transparent-discard-button {
   border: none;
   background-color: transparent;
   margin: 5px 10px;
-  font-size: 13px;
+  font-size: var(--env-var-font-size-medium);
 }
diff --git a/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css b/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css
index a1be3cd3a..be8930422 100644
--- a/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css
+++ b/Client/src/Components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css
@@ -1,16 +1,10 @@
-:root {
-  --popup-color-with-input-border-0: #f2f2f2;
-  --popup-color-with-input-border-1: #d0d5dd;
-  --popup-modal-with-input-title-color: #344054;
-}
-
 .popup-modal-holder {
   width: 480px;
   font-family: var(--popup-font-family-0);
   padding: 50px 40px;
-  border-radius: 4px;
+  border-radius: var(--env-var-radius-1);
   margin: 10px 20px;
-  border: 1px solid var(--popup-color-with-input-border-0);
+  border: 1px solid var(--env-var-color-9);
   box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03),
     0px 20px 24px -4px rgba(16, 24, 40, 0.08);
 }
@@ -31,14 +25,14 @@
 
 .popup-modal-input-title {
   margin-bottom: 15px;
-  color: var(--popup-modal-with-input-title-color);
+  color: var(--env-var-color-5);
 }
 
 .popup-modal-text-field {
   width: 100%;
   height: 35px;
-  border: 1px solid var(--popup-color-with-input-border-1);
-  border-radius: 4px;
+  border: 1px solid var(--env-var-color-4);
+  border-radius: var(--env-var-radius-1);
 }
 
 .popup-modal-controllers {
@@ -54,8 +48,8 @@
   width: 145px;
   height: 35px;
   padding: 5px 20px;
-  border: 1px solid var(--popup-color-with-input-border-1);
-  border-radius: 4px;
+  border: 1px solid var(--env-var-color-4);
+  border-radius: var(--env-var-radius-1);
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--env-var-font-size-medium);
 }
diff --git a/Client/src/Components/TextFields/Description/descriptionTextField.css b/Client/src/Components/TextFields/Description/descriptionTextField.css
index 28616863e..e86727452 100644
--- a/Client/src/Components/TextFields/Description/descriptionTextField.css
+++ b/Client/src/Components/TextFields/Description/descriptionTextField.css
@@ -1,32 +1,64 @@
 :root {
-  --color-title-1: #344054;
-  --text-field-margin-0: 10px 20px;
-  --description-color-0: #344054;
+  --env-var-color-1: #101828;
+  --env-var-color-2: #475467;
+  --env-var-color-3: #1570ef;
+
+  --env-var-color-4: #d0d5dd;
+  --env-var-color-5: #344054;
+  --env-var-color-6: #eaecf0;
+  --env-var-color-7: #7f56d9;
+  --env-var-color-8: #fff;
+  --env-var-color-9: #f2f2f2;
+  --env-var-color-10: #175cd3;
+
+  --env-var-radius-1: 4px;
+  --env-var-radius-2: 8px;
+
+  --env-var-width-1: 100vw;
+  --env-var-width-2: 360px;
+
+  --env-var-height-1: 100vh;
+
+  --env-var-spacing-1: 12px;
+  --env-var-spacing-2: 24px;
+  --env-var-spacing-3: 32px;
+  --env-var-spacing-4: 40px;
+
+  --env-var-font-size-small: 11px;
+  --env-var-font-size-medium: 13px;
+  --env-var-font-size-medium-plus: 14px;
+  --env-var-font-size-large: 16px;
+  --env-var-font-size-xlarge: 30px;
+
+  --env-var-img-width-1: 20px;
+
+  --env-var-default-1: 24px;
+  --env-var-default-2: 40px;
 }
 
 .description-field-holder {
-  margin: var(--text-field-margin-0);
+  margin: 10px 20px;
   margin-top: 20px;
 }
 
 .text-field-title {
-  color: var(--color-title-1);
+  color: var(--env-var-color-5);
   font-weight: bold;
   margin-bottom: 10px;
-  font-size: 13px;
-  color: var(--description-color-0);
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-5);
   font-weight: bold;
 }
 
 .description-field-area {
   min-width: 320px;
-  font-size: 13px;
+  font-size: var(--env-var-font-size-medium);
   border-radius: 8px;
 }
 
 .description-field-label {
   margin-top: 10px;
-  font-size: 11px;
+  font-size: var(--env-var-font-size-small);
 }
 
 .with-error {
@@ -36,10 +68,10 @@
 #description-field-area-helper-text {
   margin-left: 0;
   margin-top: 10px;
-  font-size: 11px;
+  font-size: var(--env-var-font-size-small);
 }
 
 #description-field-area {
   min-width: 320px;
-  font-size: 13px;
+  font-size: var(--env-var-font-size-medium);
 }
diff --git a/Client/src/Components/TextFields/Email/emailTextField.css b/Client/src/Components/TextFields/Email/emailTextField.css
index 05ca4c07f..e89ef8ffc 100644
--- a/Client/src/Components/TextFields/Email/emailTextField.css
+++ b/Client/src/Components/TextFields/Email/emailTextField.css
@@ -1,6 +1,39 @@
 :root {
-  --textfield-color-0: #344054;
-  --textfield-font-size: 13px;
+  --env-var-color-1: #101828;
+  --env-var-color-2: #475467;
+  --env-var-color-3: #1570ef;
+
+  --env-var-color-4: #d0d5dd;
+  --env-var-color-5: #344054;
+  --env-var-color-6: #eaecf0;
+  --env-var-color-7: #7f56d9;
+  --env-var-color-8: #fff;
+  --env-var-color-9: #f2f2f2;
+  --env-var-color-10: #175cd3;
+
+  --env-var-radius-1: 4px;
+  --env-var-radius-2: 8px;
+
+  --env-var-width-1: 100vw;
+  --env-var-width-2: 360px;
+
+  --env-var-height-1: 100vh;
+
+  --env-var-spacing-1: 12px;
+  --env-var-spacing-2: 24px;
+  --env-var-spacing-3: 32px;
+  --env-var-spacing-4: 40px;
+
+  --env-var-font-size-small: 11px;
+  --env-var-font-size-medium: 13px;
+  --env-var-font-size-medium-plus: 14px;
+  --env-var-font-size-large: 16px;
+  --env-var-font-size-xlarge: 30px;
+
+  --env-var-img-width-1: 20px;
+
+  --env-var-default-1: 24px;
+  --env-var-default-2: 40px;
 }
 
 .email-text-field {
@@ -11,24 +44,24 @@
 #outlined-basic {
   width: 320px;
   height: 14px;
-  font-size: var(--textfield-font-size);
+  font-size: var(--env-var-font-size-medium);
   padding: 8px 12px;
 }
 
 .email-text-field-title {
-  font-size: var(--textfield-font-size);
-  color: var(--textfield-color-0);
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-5);
   font-weight: bold;
 }
 
 .email-text-field-input {
-  font-size: var(--textfield-font-size);
+  font-size: var(--env-var-font-size-medium);
 }
 
 #outlined-basic-helper-text {
   margin-left: 0;
   margin-top: 10px;
-  font-size: 11px;
+  font-size: var(--env-var-font-size-small);
 }
 
 .text-field-icon {
diff --git a/Client/src/Components/TextFields/Password/passwordTextField.css b/Client/src/Components/TextFields/Password/passwordTextField.css
index 01ea94445..99efdc12b 100644
--- a/Client/src/Components/TextFields/Password/passwordTextField.css
+++ b/Client/src/Components/TextFields/Password/passwordTextField.css
@@ -1,5 +1,39 @@
 :root {
-  --textfield-color-0: #344054;
+  --env-var-color-1: #101828;
+  --env-var-color-2: #475467;
+  --env-var-color-3: #1570ef;
+
+  --env-var-color-4: #d0d5dd;
+  --env-var-color-5: #344054;
+  --env-var-color-6: #eaecf0;
+  --env-var-color-7: #7f56d9;
+  --env-var-color-8: #fff;
+  --env-var-color-9: #f2f2f2;
+  --env-var-color-10: #175cd3;
+
+  --env-var-radius-1: 4px;
+  --env-var-radius-2: 8px;
+
+  --env-var-width-1: 100vw;
+  --env-var-width-2: 360px;
+
+  --env-var-height-1: 100vh;
+
+  --env-var-spacing-1: 12px;
+  --env-var-spacing-2: 24px;
+  --env-var-spacing-3: 32px;
+  --env-var-spacing-4: 40px;
+
+  --env-var-font-size-small: 11px;
+  --env-var-font-size-medium: 13px;
+  --env-var-font-size-medium-plus: 14px;
+  --env-var-font-size-large: 16px;
+  --env-var-font-size-xlarge: 30px;
+
+  --env-var-img-width-1: 20px;
+
+  --env-var-default-1: 24px;
+  --env-var-default-2: 40px;
 }
 
 .password-text-field {
@@ -10,20 +44,20 @@
 #outlined-basic {
   width: 320px;
   height: 14px;
-  font-size: 13px;
+  font-size: var(--env-var-font-size-medium);
   padding: 8px 12px;
 }
 
 .password-text-field-title {
-  font-size: 13px;
-  color: var(--textfield-color-0);
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-5);
   font-weight: bold;
 }
 
 #outlined-basic-helper-text {
   margin-left: 0;
   margin-top: 10px;
-  font-size: 11px;
+  font-size: var(--env-var-font-size-small);
 }
 
 .text-field-icon {
diff --git a/Client/src/Components/TextFields/Text/textField.css b/Client/src/Components/TextFields/Text/textField.css
index e69de29bb..79d7ecec1 100644
--- a/Client/src/Components/TextFields/Text/textField.css
+++ b/Client/src/Components/TextFields/Text/textField.css
@@ -0,0 +1,37 @@
+:root {
+  --env-var-color-1: #101828;
+  --env-var-color-2: #475467;
+  --env-var-color-3: #1570ef;
+
+  --env-var-color-4: #d0d5dd;
+  --env-var-color-5: #344054;
+  --env-var-color-6: #eaecf0;
+  --env-var-color-7: #7f56d9;
+  --env-var-color-8: #fff;
+  --env-var-color-9: #f2f2f2;
+  --env-var-color-10: #175cd3;
+
+  --env-var-radius-1: 4px;
+  --env-var-radius-2: 8px;
+
+  --env-var-width-1: 100vw;
+  --env-var-width-2: 360px;
+
+  --env-var-height-1: 100vh;
+
+  --env-var-spacing-1: 12px;
+  --env-var-spacing-2: 24px;
+  --env-var-spacing-3: 32px;
+  --env-var-spacing-4: 40px;
+
+  --env-var-font-size-small: 11px;
+  --env-var-font-size-medium: 13px;
+  --env-var-font-size-medium-plus: 14px;
+  --env-var-font-size-large: 16px;
+  --env-var-font-size-xlarge: 30px;
+
+  --env-var-img-width-1: 20px;
+
+  --env-var-default-1: 24px;
+  --env-var-default-2: 40px;
+}
diff --git a/Client/src/Components/TextFields/Website/websiteTextField.css b/Client/src/Components/TextFields/Website/websiteTextField.css
index 66cdf4fa4..b1004695c 100644
--- a/Client/src/Components/TextFields/Website/websiteTextField.css
+++ b/Client/src/Components/TextFields/Website/websiteTextField.css
@@ -1,17 +1,46 @@
 :root {
-  --website-color-0: #344054;
-  --border-color: #d0d5dd;
-  --label-font-color: #475467;
-  --icon-color: #98a2b3;
-  --text-field-margin-0: 10px 20px;
-  --text-field-margin-1: 10px 20px 5px;
+  --env-var-color-1: #101828;
+  --env-var-color-2: #475467;
+  --env-var-color-3: #1570ef;
+
+  --env-var-color-4: #d0d5dd;
+  --env-var-color-5: #344054;
+  --env-var-color-6: #eaecf0;
+  --env-var-color-7: #7f56d9;
+  --env-var-color-8: #fff;
+  --env-var-color-9: #f2f2f2;
+  --env-var-color-10: #175cd3;
+
+  --env-var-radius-1: 4px;
+  --env-var-radius-2: 8px;
+
+  --env-var-width-1: 100vw;
+  --env-var-width-2: 360px;
+
+  --env-var-height-1: 100vh;
+
+  --env-var-spacing-1: 12px;
+  --env-var-spacing-2: 24px;
+  --env-var-spacing-3: 32px;
+  --env-var-spacing-4: 40px;
+
+  --env-var-font-size-small: 11px;
+  --env-var-font-size-medium: 13px;
+  --env-var-font-size-medium-plus: 14px;
+  --env-var-font-size-large: 16px;
+  --env-var-font-size-xlarge: 30px;
+
+  --env-var-img-width-1: 20px;
+
+  --env-var-default-1: 24px;
+  --env-var-default-2: 40px;
 }
 
 .website-textfield-title {
   margin: 0 20px;
   margin-top: 30px;
   font-size: 13px;
-  color: var(--website-color-0);
+  color: var(--env-var-color-5);
   font-weight: bold;
 }
 
@@ -19,17 +48,17 @@
   display: flex;
   align-items: center;
   position: relative;
-  margin: var(--text-field-margin-1);
+  margin: 10px 20px 5px;
 }
 
 .website-textfield-hint {
-  margin: var(--text-field-margin-0);
+  margin: 10px 20px;
   font-size: 11px;
 }
 
 .website-label {
   padding: 6px 20px 6px 10px;
-  border: solid 1px var(--border-color);
+  border: solid 1px var(--env-var-color-4);
   border-right: none;
   border-radius: 4px 0 0 4px;
   font-size: 13px;
@@ -37,21 +66,21 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--label-font-color);
+  color: var(--env-var-color-2);
 }
 
 .website-url {
   width: 248px;
   height: 31.5px;
   padding: 0px 15px;
-  border: solid 1px var(--border-color);
+  border: solid 1px var(--env-var-color-4);
 }
 
 .website-icon-holder {
   width: 40px;
   height: 33px;
   padding: 5px;
-  border: solid 1px var(--border-color);
+  border: solid 1px var(--env-var-color-4);
   border-left: none;
   text-align: center;
   display: flex;
@@ -61,7 +90,7 @@
 
 .copy-to-clipboard-button {
   padding: 5.5px 20px 6px 10px;
-  border: solid 1px var(--border-color);
+  border: solid 1px var(--env-var-color-4);
   border-left: none;
   border-radius: 0 8px 8px 0;
   font-size: 13px;
@@ -69,7 +98,7 @@
   display: flex;
   justify-content: space-evenly;
   align-items: center;
-  color: var(--label-font-color);
+  color: var(--env-var-color-2);
   cursor: pointer;
 }
 
diff --git a/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css b/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css
index 1b1adf507..3efe67643 100644
--- a/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css
+++ b/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css
@@ -1,17 +1,49 @@
 :root {
-  --tooltip-color-0: #d0d5dd;
-  --tooltip-margin: 5px;
-  --tooltip-font-size: 12px;
+  --env-var-color-1: #101828;
+  --env-var-color-2: #475467;
+  --env-var-color-3: #1570ef;
+
+  --env-var-color-4: #d0d5dd;
+  --env-var-color-5: #344054;
+  --env-var-color-6: #eaecf0;
+  --env-var-color-7: #7f56d9;
+  --env-var-color-8: #fff;
+  --env-var-color-9: #f2f2f2;
+  --env-var-color-10: #175cd3;
+
+  --env-var-radius-1: 4px;
+  --env-var-radius-2: 8px;
+
+  --env-var-width-1: 100vw;
+  --env-var-width-2: 360px;
+
+  --env-var-height-1: 100vh;
+
+  --env-var-spacing-1: 12px;
+  --env-var-spacing-2: 24px;
+  --env-var-spacing-3: 32px;
+  --env-var-spacing-4: 40px;
+
+  --env-var-font-size-small: 11px;
+  --env-var-font-size-medium: 13px;
+  --env-var-font-size-medium-plus: 14px;
+  --env-var-font-size-large: 16px;
+  --env-var-font-size-xlarge: 30px;
+
+  --env-var-img-width-1: 20px;
+
+  --env-var-default-1: 24px;
+  --env-var-default-2: 40px;
 }
 
 .tooltip-title {
-  font-size: var(--tooltip-font-size);
+  font-size: var(--env-var-font-size-medium);
   font-weight: bold;
-  margin: var(--tooltip-margin);
+  margin: 5px;
 }
 
 .tooltip-description {
-  font-size: var(--tooltip-font-size);
-  color: var(--tooltip-color-0);
-  margin: var(--tooltip-margin);
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-4);
+  margin: 5px;
 }
diff --git a/Client/src/Pages/CheckEmail/index.css b/Client/src/Pages/CheckEmail/index.css
index db564e0ec..dac0a0a0d 100644
--- a/Client/src/Pages/CheckEmail/index.css
+++ b/Client/src/Pages/CheckEmail/index.css
@@ -1,32 +1,12 @@
-:root {
-  --spacing-1: 15px;
-  --spacing-2: 20px;
-  --spacing-3: 25px;
-  --textfield-font-size: 13px;
-
-  --check-email-page-width-1: 100vw;
-  --check-email-page-height-1: 100vh;
-
-  --check-email-form-width-1: 360px;
-  --check-email-form-height-1: 526px;
-
-  --logo-width-1: 20px;
-  --check-email-font-size-medium: 13px;
-
-  --check-email-color-1: #101828;
-  --check-email-color-2: #1570ef;
-  --check-email-color-3: #475467;
-}
-
 .check-email-page {
-  width: 100vw;
+  width: var(--env-var-width-1);
   display: flex;
   justify-content: center;
-  min-height: 100vh;
+  min-height: var(--env-var-height-1);
 }
 
 .check-email-form {
-  width: 360px;
+  width: var(--env-var-width-2);
   margin: 90px auto;
 }
 
@@ -37,27 +17,27 @@
 }
 
 .check-email-v-gap-large {
-  height: 32px;
+  height: var(--env-var-spacing-3);
 }
 
 .check-email-v-gap-medium {
-  height: 24px;
+  height: var(--env-var-spacing-2);
 }
 
 .check-email-v-gap-small {
-  height: 12px;
+  height: var(--env-var-spacing-1);
 }
 
 .check-email-form-heading {
-  font-size: 16px;
+  font-size: var(--env-var-font-size-large);
   font-weight: 700;
-  color: var(--check-email-color-1);
+  color: var(--env-var-color-1);
 }
 
 .check-email-form-subheading {
-  font-size: 13px;
+  font-size: var(--env-var-font-size-medium);
   font-weight: 400;
-  color: var(--check-email-color-3);
+  color: var(--env-var-color-2);
 }
 
 .check-email-form-subheading span {
@@ -65,20 +45,20 @@
 }
 
 .check-email-body {
-  width: 360px;
+  width: var(--env-var-width-2);
 }
 
 .check-email-resend {
-  font-size: 13px;
+  font-size: var(--env-var-font-size-medium);
   font-weight: 400;
-  color: var(--check-email-color-3);
+  color: var(--env-var-color-2);
   text-align: center;
   cursor: pointer;
 }
 
 .check-email-resend span {
   font-weight: 700;
-  color: var(--check-email-color-2);
+  color: var(--env-var-color-3);
 }
 
 .check-email-back-button {
@@ -88,15 +68,16 @@
 }
 
 .check-email-back-button-img {
-  width: 20px;
-  height: 20px;
+  width: var(--env-var-img-width-1);
+  height: var(--env-var-img-width-1);
   margin-right: 5px;
   align-items: center;
 }
 
 .check-email-back-button-text {
-  font-size: 13px;
+  height: var(--env-var-img-width-1);
+  font-size: var(--env-var-font-size-medium);
   font-weight: 500;
-  color: var(--check-email-color-3);
+  color: var(--env-var-color-2);
   align-items: center;
 }
diff --git a/Client/src/Pages/ForgotPassword/index.css b/Client/src/Pages/ForgotPassword/index.css
index 1308bc3d2..acb24e6e9 100644
--- a/Client/src/Pages/ForgotPassword/index.css
+++ b/Client/src/Pages/ForgotPassword/index.css
@@ -1,33 +1,12 @@
-:root {
-  --spacing-1: 15px;
-  --spacing-2: 20px;
-  --spacing-3: 25px;
-  --textfield-font-size: 13px;
-
-  --forgot-password-page-width-1: 100vw;
-  --forgot-password-page-height-1: 100vh;
-
-  --forgot-password-form-width-1: 360px;
-  --forgot-password-form-height-1: 526px;
-
-  --logo-width-1: 20px;
-  --forgot-font-size-medium: 13px;
-
-  --forgot-color-1: #101828;
-  --forgot-color-2: #1570ef;
-  --forgot-color-3: #475467;
-}
-
 .forgot-password-page {
-  width: var(--forgot-password-page-width-1);
+  width: var(--env-var-width-1);
   display: flex;
   justify-content: center;
-  min-height: var(--forgot-password-page-height-1);
+  min-height: var(--env-var-height-1);
 }
 
 .forgot-password-form {
-  width: var(--forgot-password-form-width-1);
-  height: var(--forgot-password-form-height-1);
+  width: var(--env-var-width-2);
   margin: 90px auto;
 }
 
@@ -42,37 +21,37 @@
 }
 
 .forgot-password-v-gap-large {
-  height: 32px;
+  height: var(--env-var-spacing-3);
 }
 
 .forgot-password-v-gap-medium {
-  height: 24px;
+  height: var(--env-var-spacing-2);
 }
 
 .forgot-password-v-gap-small {
-  height: 12px;
+  height: var(--env-var-spacing-1);
 }
 
 .forgot-password-form-heading {
-  font-size: 16px;
+  font-size: var(--env-var-font-size-large);
   font-weight: 700;
-  color: #101828;
+  color: var(--env-var-color-1);
 }
 
 .forgot-password-form-subheading {
-  font-size: 13px;
+  font-size: var(--env-var-font-size-medium);
   font-weight: 500;
-  color: var(--forgot-color-3);
+  color: var(--env-var-color-2);
 }
 
 .forgot-password-body {
-  width: 360px;
+  width: var(--env-var-width-2);
 }
 
 #forgot-password-email-input {
   width: 308px;
   height: 11px;
-  font-size: var(--textfield-font-size);
+  font-size: var(--env-var-font-size-medium);
 }
 
 .forgot-password-back-button {
@@ -82,13 +61,13 @@
 }
 
 .forgot-password-back-button-img {
-  width: 20px;
-  height: 20px;
+  width: var(--env-var-img-width-1);
+  height: var(--env-var-img-width-1);
   margin-right: 5px;
 }
 
 .forgot-password-back-button-text {
-  font-size: 13px;
+  font-size: var(--env-var-font-size-medium);
   font-weight: 500;
-  color: var(--forgot-color-3);
+  color: var(--env-var-color-2);
 }
diff --git a/Client/src/Pages/Login/index.css b/Client/src/Pages/Login/index.css
index c823e2a6a..68c1df5e2 100644
--- a/Client/src/Pages/Login/index.css
+++ b/Client/src/Pages/Login/index.css
@@ -1,34 +1,13 @@
-:root {
-  --spacing-1: 15px;
-  --spacing-2: 20px;
-  --spacing-3: 25px;
-  --textfield-font-size: 13px;
-
-  --login-page-width-1: 100vw;
-  --login-page-height-1: 100vh;
-
-  --login-form-width-1: 360px;
-  --login-form-height-1: 526px;
-
-  --logo-width-1: 20px;
-  --login-font-size-medium: 13px;
-
-  --login-color-1: #101828;
-  --login-color-2: #1570ef;
-  --login-color-3: #475467;
-}
-
 .login-page {
-  width: var(--login-page-width-1);
+  width: var(--env-var-width-1);
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: var(--login-page-height-1);
+  min-height: var(--env-var-height-1);
 }
 
 .login-form {
-  width: var(--login-form-width-1);
-  height: var(--login-form-height-1);
+  width: var(--env-var-width-2);
   margin: 90px auto;
 }
 
@@ -43,27 +22,27 @@
 }
 
 .login-form-v-spacing {
-  height: var(--spacing-1);
+  height: var(--env-var-spacing-1);
 }
 
 .login-form-v2-spacing {
-  height: var(--spacing-2);
+  height: var(--env-var-spacing-2);
 }
 
 .login-form-v3-spacing {
-  height: var(--spacing-3);
+  height: var(--env-var-spacing-3);
 }
 
 .login-form-heading {
-  font-size: 30px;
+  font-size: var(--env-var-font-size-xlarge);
   font-weight: 700;
-  color: var(--login-color-1);
+  color: var(--env-var-color-1);
 }
 
 #login-email-input {
   width: 308px;
   height: 11px;
-  font-size: var(--textfield-font-size);
+  font-size: var(--env-var-font-size-medium);
 }
 
 .login-form-password-options {
@@ -73,15 +52,15 @@
 }
 
 .login-form-forgot-password {
-  color: var(--login-color-2);
+  color: var(--env-var-color-3);
   font-weight: 600;
   cursor: pointer;
-  font-size: var(--login-font-size-medium);
+  font-size: var(--env-var-font-size-medium);
 }
 
 .google-enter {
-  width: var(--logo-width-1);
-  height: var(--logo-width-1);
+  width: var(--env-var-img-width-1);
+  height: var(--env-var-img-width-1);
   margin-right: 10px;
 }
 
@@ -89,14 +68,15 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--login-color-3);
-  font-size: var(--login-font-size-medium);
+  color: var(--env-var-color-2);
+  font-size: var(--env-var-font-size-medium);
   font-weight: 600;
 }
 
 .new-account-option-span {
   margin-left: 5px;
-  color: var(--login-color-2);
-  font-size: 14px;
+  color: var(--env-var-color-3);
+  font-size: var(--env-var-font-size-medium);
   cursor: pointer;
+  font-weight: 700;
 }
diff --git a/Client/src/Pages/NewPasswordConfirmed/index.css b/Client/src/Pages/NewPasswordConfirmed/index.css
index 15d9ee30e..39f8bcd68 100644
--- a/Client/src/Pages/NewPasswordConfirmed/index.css
+++ b/Client/src/Pages/NewPasswordConfirmed/index.css
@@ -1,18 +1,12 @@
-:root {
-  --password-confirmed-color-1: #101828;
-  --password-confirmed-color-2: #1570ef;
-  --password-confirmed-color-3: #475467;
-}
-
 .password-confirmed-page {
-  width: 100vw;
+  width: var(--env-var-width-1);
   display: flex;
   justify-content: center;
-  min-height: 100vh;
+  min-height: var(--env-var-height-1);
 }
 
 .password-confirmed-form {
-  width: 360px;
+  width: var(--env-var-width-2);
   margin: 90px auto;
 }
 
@@ -23,31 +17,31 @@
 }
 
 .password-confirmed-v-gap-large {
-  height: 32px;
+  height: var(--env-var-spacing-3);
 }
 
 .password-confirmed-v-gap-medium {
-  height: 24px;
+  height: var(--env-var-spacing-2);
 }
 
 .password-confirmed-v-gap-small {
-  height: 12px;
+  height: var(--env-var-spacing-1);
 }
 
 .password-confirmed-form-heading {
-  font-size: 16px;
+  font-size: var(--env-var-font-size-large);
   font-weight: 700;
-  color: var(--password-confirmed-color-1);
+  color: var(--env-var-color-1);
 }
 
 .password-confirmed-form-subheading {
-  font-size: 13px;
+  font-size: var(--env-var-font-size-medium);
   font-weight: 600;
-  color: var(--password-confirmed-color-3);
+  color: var(--env-var-color-2);
 }
 
 .password-confirmed-body {
-  width: 360px;
+  width: var(--env-var-width-2);
 }
 
 .password-confirmed-back-button {
@@ -58,16 +52,16 @@
 }
 
 .password-confirmed-back-button-img {
-  width: 20px;
-  height: 20px;
+  width: var(--env-var-img-width-1);
+  height: var(--env-var-img-width-1);
   margin-right: 5px;
   align-items: center;
 }
 
 .password-confirmed-back-button-text {
-  height: 20px;
-  font-size: 13px;
+  height: var(--env-var-img-width-1);
+  font-size: var(--env-var-font-size-medium);
   font-weight: 600;
-  color: var(--password-confirmed-color-3);
+  color: var(--env-var-color-2);
   text-align: center;
 }
diff --git a/Client/src/Pages/Register/index.css b/Client/src/Pages/Register/index.css
index 10b1694d5..8d4b99f1b 100644
--- a/Client/src/Pages/Register/index.css
+++ b/Client/src/Pages/Register/index.css
@@ -1,29 +1,12 @@
-:root {
-  --dimension-width-1: 100vw;
-  --dimension-width-2: 360px;
-
-  --dimension-height-1: 100vh;
-
-  --spacing-small: 12px;
-  --spacing-medium: 24px;
-  --spacing-large: 40px;
-
-  --font-size-small: 13px;
-  --font-size-medium: 16px;
-
-  --register-form-heading-color-1: #101828;
-  --register-form-subheading-color-1: #475467;
-}
-
 .register-page {
-  width: var(--dimension-width-1);
+  width: var(--env-var-width-1);
   display: flex;
   justify-content: center;
-  min-height: var(--dimension-height-1);
+  min-height: var(--env-var-height-1);
 }
 
 .register-form {
-  width: var(--dimension-width-2);
+  width: var(--env-var-width-2);
   margin: 140px auto;
 }
 
@@ -37,27 +20,23 @@
   margin: 0 auto;
 }
 
-.register-form-v-spacing-24px {
-  height: var(--spacing-medium);
+.register-form-v-spacing-large {
+  height: var(--env-var-spacing-3);
 }
 
-.register-form-v-spacing-12px {
-  height: var(--spacing-small);
-}
-
-.register-form-v-spacing-40px {
-  height: var(--spacing-large);
+.register-form-v-spacing-small {
+  height: var(--env-var-spacing-1);
 }
 
 .register-form-heading {
-  font-size: var(--spacing-medium);
+  font-size: var(--env-var-font-size-large);
   font-weight: 700;
-  color: var(--register-form-heading-color-1);
+  color: var(--env-var-color-1);
 }
 
 .register-form-subheading {
-  font-size: var(--spacing-small);
-  color: var(--register-form-subheading-color-1);
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-2);
   font-weight: 600;
 }
 
@@ -65,7 +44,7 @@
 #register-lastname-input,
 #register-email-input,
 #register-password-input {
-  font-size: var(--spacing-small);
+  font-size: var(--env-var-font-size-medium);
   width: 294px;
   height: 11px;
   padding: 12px 14px;
diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx
index 6409ad536..c533190be 100644
--- a/Client/src/Pages/Register/index.jsx
+++ b/Client/src/Pages/Register/index.jsx
@@ -20,12 +20,9 @@ const Register = () => {
             src={Logomark}
             alt="Logomark"
           />
-          <div className="register-form-v-spacing-24px" />
+          <div className="register-form-v-spacing-large" />
           <div className="register-form-heading">Create an account</div>
-          <div className="register-form-v-spacing-12px"></div>
-          <div className="register-form-subheading">
-            Start your 30-day free trial.
-          </div>
+          <div className="register-form-v-spacing-large"></div>
         </div>
         <div className="register-form-v-spacing-40px" />
         <div className="register-form-inputs">
@@ -60,7 +57,7 @@ const Register = () => {
         <div className="login-form-v2-spacing" />
         <div className="register-form-checks">
           <Check text="Must be at least 8 characters" />
-          <div className="register-form-v-spacing-12px"></div>
+          <div className="register-form-v-spacing-small"></div>
           <Check text="Must contain one special character" />
         </div>
         <div className="login-form-v2-spacing" />
diff --git a/Client/src/Pages/SetNewPassword/index.css b/Client/src/Pages/SetNewPassword/index.css
index 1eb504aad..183e8d21f 100644
--- a/Client/src/Pages/SetNewPassword/index.css
+++ b/Client/src/Pages/SetNewPassword/index.css
@@ -1,28 +1,12 @@
-:root {
-  --set-new-password-page-width-1: 100vw;
-  --set-new-password-page-height-1: 100vh;
-
-  --set-new-password-form-width-1: 360px;
-  --set-new-password-form-height-1: 526px;
-
-  --set-new-password-logo-width-1: 20px;
-  --set-new-password-font-size-medium: 13px;
-
-  --set-new-password-color-1: #101828;
-  --set-new-password-color-2: #1570ef;
-  --set-new-password-color-3: #475467;
-}
-
 .set-new-password-page {
-  width: var(--set-new-password-page-width-1);
+  width: var(--env-var-width-1);
   display: flex;
   justify-content: center;
-  min-height: var(--set-new-password-page-height-1);
+  min-height: var(--env-var-height-1);
 }
 
 .set-new-password-form {
-  width: var(--set-new-password-form-width-1);
-  min-height: var(--set-new-password-form-height-1);
+  width: var(--env-var-width-2);
   margin: 90px auto;
 }
 
@@ -33,30 +17,26 @@
 }
 
 .set-new-password-form-gap-large {
-  height: 32px;
+  height: var(--env-var-spacing-3);
 }
 
 .set-new-password-form-gap-medium {
-  height: 24px;
-}
-
-.set-new-password-form-gap-small-medium {
-  height: 20px;
+  height: var(--env-var-spacing-2);
 }
 
 .set-new-password-form-gap-small {
-  height: 12px;
+  height: var(--env-var-spacing-1);
 }
 
 .set-new-password-form-heading {
-  font-size: 16px;
-  color: #101828;
+  font-size: var(--env-var-font-size-large);
+  color: var(--env-var-color-1);
   font-weight: 700;
 }
 
 .set-new-password-form-subheading {
-  font-size: 13px;
-  color: var(--set-new-password-color-3);
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-2);
   font-weight: 600;
 }
 
@@ -68,16 +48,16 @@
 }
 
 .set-new-password-back-button-img {
-  width: 20px;
-  height: 20px;
+  width: var(--env-var-img-width-1);
+  height: var(--env-var-img-width-1);
   margin-right: 5px;
   align-items: center;
 }
 
 .set-new-password-back-button-text {
-  height: 20px;
-  font-size: 13px;
-  color: var(--set-new-password-color-3);
+  height: var(--env-var-img-width-1);
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-2);
   font-weight: 600;
   align-items: center;
 }
diff --git a/Client/src/Pages/SetNewPassword/index.jsx b/Client/src/Pages/SetNewPassword/index.jsx
index 5f718f666..31e213c10 100644
--- a/Client/src/Pages/SetNewPassword/index.jsx
+++ b/Client/src/Pages/SetNewPassword/index.jsx
@@ -33,20 +33,20 @@ const SetNewPassword = () => {
             placeholder="••••••••"
             id="register-password-input"
           />
-          <div className="set-new-password-form-gap-small-medium"></div>
+          <div className="set-new-password-form-gap-medium"></div>
           <PasswordTextField
             label="Confirm password"
             error={false}
             placeholder="••••••••"
             id="register-password-input"
           />
-          <div className="set-new-password-form-gap-small-medium"></div>
+          <div className="set-new-password-form-gap-medium"></div>
           <div className="set-new-password-form-checks">
             <Check text="Must be at least 8 characters" />
             <div className="set-new-password-form-gap-small"></div>
             <Check text="Must contain one special character" />
           </div>
-          <div className="set-new-password-form-gap-small-medium"></div>
+          <div className="set-new-password-form-gap-medium"></div>
           <Button
             level="primary"
             label="Reset passwprd"
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index 068e24572..1f4e4de96 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -13,10 +13,20 @@ const labelPurple = "#6941C6";
 const labelGreen = "#067647";
 const labelRed = "#F04438";
 
-//Section colros
+// Section colors
 const sectionBorder = "#D0D5DD";
 const sectionBg = "#F8F9F8";
 
+// Other Colors
+const otherColorsBlackish = "#101828";
+const otherColorsBluishGray = "#344054";
+const otherColorsGraishWhite = "#eaecf0";
+const otherColorsPurple = "#7f56d9";
+const otherColorsWhite = "#fff";
+const otherColorsGraishWhiteLight = "#f2f2f2";
+const otherColorsStrongBlue = "#f2f2f2";
+
+
 // Global Font Family
 const fontFamilyDefault = '"Roboto", "Helvetica", "Arial", sans-serif';
 
@@ -51,6 +61,15 @@ const theme = createTheme({
       borderColor: sectionBorder,
       bgColor: sectionBg,
     },
+    otherColors: {
+      blackish: otherColorsBlackish,
+      bluishGray: otherColorsBluishGray,
+      graishWhite: otherColorsGraishWhite,
+      purple: otherColorsPurple,
+      white: otherColorsWhite,
+      graishWhiteLight: otherColorsGraishWhiteLight,
+      strongBlue: otherColorsStrongBlue,
+    },
   },
   font :{
     default: {
diff --git a/Client/src/index.css b/Client/src/index.css
index 18aa9a223..b44125b2e 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -11,6 +11,44 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  /* Generalized Stylings */
+
+  --env-var-color-1: #101828;
+  --env-var-color-2: #475467;
+  --env-var-color-3: #1570ef;
+
+  --env-var-color-4: #d0d5dd;
+  --env-var-color-5: #344054;
+  --env-var-color-6: #eaecf0;
+  --env-var-color-7: #7f56d9;
+  --env-var-color-8: #fff;
+  --env-var-color-9: #f2f2f2;
+  --env-var-color-10: #175cd3;
+
+  --env-var-radius-1: 4px;
+  --env-var-radius-2: 8px;
+
+  --env-var-width-1: 100vw;
+  --env-var-width-2: 360px;
+
+  --env-var-height-1: 100vh;
+
+  --env-var-spacing-1: 12px;
+  --env-var-spacing-2: 24px;
+  --env-var-spacing-3: 32px;
+  --env-var-spacing-4: 40px;
+
+  --env-var-font-size-small: 11px;
+  --env-var-font-size-medium: 13px;
+  --env-var-font-size-medium-plus: 14px;
+  --env-var-font-size-large: 16px;
+  --env-var-font-size-xlarge: 30px;
+
+  --env-var-img-width-1: 20px;
+
+  --env-var-default-1: 24px;
+  --env-var-default-2: 40px;
 }
 
 a {