diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss
index 859c6af4a..34bd2dccb 100644
--- a/frontend/resources/styles/common/dependencies/colors.scss
+++ b/frontend/resources/styles/common/dependencies/colors.scss
@@ -8,7 +8,7 @@
 $db-primary: #18181a;
 $db-secondary: #000000;
 $db-tertiary: #212426;
-$db-cuaternary: #2e3434;
+$db-quaternary: #2e3434;
 
 $df-primary: #ffffff;
 $df-secondary: #8f9da3;
diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss
index 7f7538b91..6c47a842f 100644
--- a/frontend/resources/styles/common/refactor/color-defs.scss
+++ b/frontend/resources/styles/common/refactor/color-defs.scss
@@ -8,68 +8,85 @@
 
 :root {
   // DARK
-  --dark-gray-1: #1d1f20;
-  --dark-gray-2: #000000;
-  --dark-gray-2-30: #{color.change(#000000, $alpha: 0.3)};
-  --dark-gray-2-80: #{color.change(#000000, $alpha: 0.8)};
-  --dark-gray-3: #292c2d;
-  --dark-gray-4: #34393b;
-  --white: #fff;
-  --off-white: #aab5ba;
-  --off-white-40: #{color.change(#aab5ba, $alpha: 0.4)};
-  --green: #91fadb;
-  --green-30: rgba(145, 250, 219, 0.3);
-  --lilac: #bb97d8;
-  --pink: #ff6fe0;
-  --strong-green: #00d1b8;
-  --strong-green-10: #{color.change(#00d1b8, $alpha: 0.1)};
+  // Dark background
+  --db-primary: #18181a;
+  --db-secondary: #000000;
+  --db-secondary-30: #{color.change(#000000, $alpha: 0.3)};
+  --db-secondary-80: #{color.change(#000000, $alpha: 0.8)};
+  --db-tertiary: #212426;
+  --db-quaternary: #2e3434;
 
-  // NOTIFICATION
-  --dark-ok-color: var(--strong-green);
-  --dark-warning-color: #ff6432;
-  --dark-pending-color: var(--lilac);
-  --dark-error-color: #ff3277;
-  --default-presence-color: #dee563;
+  //Dark foreground
+  --df-primary: #ffffff;
+  --df-secondary: #8f9da3;
+  --df-secondary-40: #{color.change(#8f9da3, $alpha: 0.4)}; // TODO: Check if needed
+
+  //Dark accent
+  --da-primary: #7efff5;
+  --da-primary-muted: #426158;
+  --da-secondary: #bb97d8;
+  --da-tertiary: #00d1b8;
+  --da-tertiary-10: #{color.change(#00d1b8, $alpha: 0.1)};
+  --da-quaternary: #ff6fe0;
 
   // LIGHT
-  --light-gray-1: #fff;
-  --light-gray-2: #e8eaee;
-  --light-gray-2-30: #{color.change(#e8eaee, $alpha: 0.3)};
-  --light-gray-2-80: #{color.change(#e8eaee, $alpha: 0.8)};
-  --light-gray-3: #f3f4f6;
-  --light-gray-4: #eef0f2;
-  --black: #000;
-  --off-black: #495e74;
-  --off-black-40: #{color.change(#495e74, $alpha: 0.4)};
-  --purple: #6911d4;
-  --purple-30: rgba(105, 17, 212, 0.2);
-  --blue: #1345aa;
-  --strong-purple: #8c33eb;
-  --strong-purple-10: #{color.change(#8c33eb, $alpha: 0.1)};
+  // Light background
+  --lb-primary: #ffffff;
+  --lb-secondary: #e8eaee;
+  --lb-secondary-30: #{color.change(#e8eaee, $alpha: 0.3)};
+  --lb-secondary-80: #{color.change(#e8eaee, $alpha: 0.8)};
+  --lb-tertiary: #f3f4f6;
+  --lb-quaternary: #eef0f2;
 
-  // NOTIFICATION WILL CHANGE
-  --light-ok-color: var(--strong-green);
-  --light-warning-color: #ff9b49;
-  --light-pending-color: var(--lilac);
-  --light-error-color: #ff4986;
+  //Light foreground
+  --lf-primary: #000;
+  --lf-secondary: #495e74;
+  --lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)};
+
+  //Light accent
+  --la-primary: #6911d4;
+  --la-primary-muted: #e1d2f5;
+  --la-secondary: #1345aa;
+  --la-tertiary: #8c33eb;
+  --la-tertiary-10: #{color.change(#8c33eb, $alpha: 0.1)};
+  --la-quaternary: #ff6fe0;
+
+  // STATUS COLOR
+  --status-color-success-50: #f0f8ff;
+  --status-color-success-500: #2d9f8f;
+  --status-color-success-950: #0a2927;
+  --status-color-warning-50: #fff4ed;
+  --status-color-warning-500: #fe4811;
+  --status-color-warning-950: #440806;
+  --status-color-error-50: #fff0f3;
+  --status-color-error-500: #ff3277;
+  --status-color-error-950: #500124;
+  --status-color-info-50: #f0f8ff;
+  --status-color-info-500: #0e9be9;
+  --status-color-info-950: #082c49;
+  // Status color default will change with theme and will be defined on theme files
 
   //GENERIC
   --color-canvas: #e8e9ea;
 
+  // APP COLORS
+  --app-white: #ffffff;
+  --app-black: #000;
+
   // SOCIAL LOGIN BUTTONS
   --google-login-background: #4285f4;
   --google-login-background-hover: #{color.adjust(#4285f4, $lightness: -15%)};
-  --google-login-foreground: var(--white);
+  --google-login-foreground: var(--df-primary);
 
   --github-login-background: #4c4c4c;
   --github-login-background-hover: #{color.adjust(#4c4c4c, $lightness: -15%)};
-  --github-login-foreground: var(--white);
+  --github-login-foreground: var(--app-white);
 
   --oidc-login-background: #b3b3b3;
   --oidc-login-background-hover: #{color.adjust(#b3b3b3, $lightness: -15%)};
-  --oidc-login-foreground: var(--white);
+  --oidc-login-foreground: var(--app-white);
 
   --gitlab-login-background: #fc6d26;
   --gitlab-login-background-hover: #{color.adjust(#fc6d26, $lightness: -15%)};
-  --gitlab-login-foreground: var(--white);
+  --gitlab-login-foreground: var(--app-white);
 }
diff --git a/frontend/resources/styles/common/refactor/common-refactor.scss b/frontend/resources/styles/common/refactor/common-refactor.scss
index c1033735c..b06f8723e 100644
--- a/frontend/resources/styles/common/refactor/common-refactor.scss
+++ b/frontend/resources/styles/common/refactor/common-refactor.scss
@@ -23,13 +23,13 @@
 $db-primary: var(--color-background-primary);
 $db-secondary: var(--color-background-secondary);
 $db-tertiary: var(--color-background-tertiary);
-$db-cuaternary: var(--color-background-quaternary);
+$db-quaternary: var(--color-background-quaternary);
 $db-subtle: var(--color-background-subtle);
 $db-disabled: var(--color-background-disabled);
 
 $df-primary: var(--color-foreground-primary);
 $df-secondary: var(--color-foreground-secondary);
-$df-tertiary: var(--color-foreground-tertiary);
+$df-tertiary: var(--color-accent-quaternary);
 $da-primary: var(--color-accent-primary);
 $da-primary-muted: var(--color-accent-primary-muted);
 $da-secondary: var(--color-accent-secondary);
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index 184d86ba7..fe73cd6af 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -9,14 +9,13 @@
 .default {
   // BASE COLORS
   --canvas-background-color: var(--color-background-primary);
-  --canvas-fill-color: var(--canvas-color);
+  --canvas-fill-color: var(--color-canvas);
 
   --scrollbar-background-color: var(--color-foreground-secondary);
   --panel-background-color: var(--color-background-primary);
   --app-background: var(--color-background-primary);
   --loader-background: var(--color-background-primary);
   --panel-title-background-color: var(--color-background-secondary);
-  --presence-color: var(--default-presence-color);
 
   // BUTTONS
   --button-foreground-hover: var(--color-accent-primary);
@@ -76,8 +75,8 @@
   --button-radio-border-color-focus: var(--color-accent-primary);
   --button-radio-foreground-color-focus: var(--color-foreground-secondary);
 
-  --button-warning-background-color-rest: var(--warning-color);
-  --button-warning-border-color-rest: var(--warning-color);
+  --button-warning-background-color-rest: var(--status-color-warning-500);
+  --button-warning-border-color-rest: var(--status-color-warning-500);
   --button-warning-foreground-color-rest: var(--color-background-secondary);
 
   --button-disabled-background-color-rest: var(--color-background-disabled);
@@ -132,15 +131,16 @@
   --palette-button-shadow-final: transparent;
   --palette-handler-background-color: var(--color-background-quaternary);
 
-  --color-bullet-background-color: var(--white); // We don't want this color to change with palette
+  --color-bullet-background-color: var(--app-white); // We don't want this color to change with palette
   --color-bullet-border-color: var(--color-background-quaternary);
   --color-bullet-border-color-selected: var(--color-accent-primary);
 
   // ICONS
   --icon-foreground: var(--color-foreground-secondary);
+  --main-icon-foreground: var(--color-foreground-primary);
   --icon-foreground-hover: var(--color-foreground-primary);
-  --icon-foreground-accept: var(--ok-color);
-  --icon-foreground-discard: var(--error-color);
+  --icon-foreground-accept: var(--status-color-success-500);
+  --icon-foreground-discard: var(--status-color-error-500);
 
   // INPUTS, SELECTS, DROPDOWNS
 
@@ -164,7 +164,7 @@
   --input-background-color-disabled: var(--color-background-primary);
   --input-foreground-color-disabled: var(--color-foreground-secondary);
   --input-border-color-disabled: var(--color-background-quaternary);
-  --input-border-color-error: var(--error-color);
+  --input-border-color-error: var(--status-color-error-500);
   --input-border-color-success: var(--color-accent-primary);
   --input-details-color: var(--color-background-primary);
 
@@ -212,16 +212,16 @@
   --assets-title-background-color: var(--color-background-primary);
   --assets-item-background-color: var(--color-background-tertiary);
   --assets-item-background-color-hover: var(--color-background-quaternary);
-  --assets-item-name-background-color: var(--dark-gray-2-80); // TODO: penpot file has a non-existing token
+  --assets-item-name-background-color: var(--db-secondary-80); // TODO: penpot file has a non-existing token
   --assets-item-name-foreground-color: var(--color-foreground-secondary);
   --assets-item-name-foreground-color-hover: var(--color-foreground-primary);
   --assets-item-name-foreground-color-disabled: var(--color-foreground-disabled);
   --assets-item-border-color: var(--color-accent-primary);
   --assets-item-background-color-drag: var(--color-accent-primary-muted);
   --assets-item-border-color-drag: var(--color-accent-tertiary);
-  --assets-component-background-color: var(--white); // We don't want this color to change with palette
+  --assets-component-background-color: var(--app-white); // We don't want this color to change with palette
   --assets-component-background-color-disabled: var(
-    --off-white
+    --df-secondary;
   ); // We don't want this color to change with palette
   --assets-component-border-color: var(--color-background-tertiary);
   --assets-component-border-selected: var(--color-accent-tertiary);
@@ -236,6 +236,8 @@
   --library-content-foreground-color: var(--color-foreground-secondary);
 
   --dropdown-background-color: var(--color-background-tertiary);
+  --dropdown-separator-color: var(--color-background-primary);
+  --profile-drowpdown-background-color: var(--color-background-primary);
 
   --not-found-background-color: var(--color-background-tertiary);
   --not-found-foreground-color: var(--color-foreground-secondary);
@@ -271,42 +273,53 @@
   --comment-bullet-foreground-color-resolved: var(--color-foreground-secondary);
   --comment-bullet-border-color-resolved: var(--color-background-quaternary);
   --comment-modal-background-color: var(--color-background-primary);
+  --comment-thread-background-color-hover: var(--color-background-primary);
 
   // GRID LAYOUT
-  --grid-editor-marker-color: var(--color-foreground-tertiary);
-  --grid-editor-marker-text: var(--color-foreground-tertiary);
-  --grid-editor-area-background: var(--color-foreground-tertiary);
-  --grid-editor-area-text: var(--color-foreground-tertiary);
-  --grid-editor-line-color: var(--color-foreground-tertiary);
-  --grid-editor-plus-btn-foreground: var(--white);
-  --grid-editor-plus-btn-background: var(--color-foreground-tertiary);
+  --grid-editor-marker-color: var(--color-accent-quaternary);
+  --grid-editor-marker-text: var(--color-accent-quaternary);
+  --grid-editor-area-background: var(--color-accent-quaternary);
+  --grid-editor-area-text: var(--color-accent-quaternary);
+  --grid-editor-line-color: var(--color-accent-quaternary);
+  --grid-editor-plus-btn-foreground: var(--app-white);
+  --grid-editor-plus-btn-background: var(--color-accent-quaternary);
 
   // MODALS
   --modal-background-color: var(--color-background-primary);
   --modal-title-foreground-color: var(--color-foreground-primary);
   --modal-text-foreground-color: var(--color-foreground-secondary);
   --modal-hint-border-color: var(--color-background-quaternary);
-  --modal-button-background-color-error: var(--error-color);
+  --modal-button-background-color-error: var(--status-color-error-500);
   --modal-button-foreground-color-error: var(--color-foreground-primary);
   --modal-link-foreground-color: var(--color-accent-primary);
   --modal-border-color: var(--color-background-quaternary);
 
-  // ALERTS & STATUS
-  --alert-background-color-ok: var(--ok-color);
-  --alert-foreground-color-ok: var(--dark-gray-2); // We don't want this color to change with theme
-  --alert-background-color-warning: var(--warning-color);
-  --alert-foreground-color-warning: var(--white); // We don't want this color to change with theme
-  --alert-background-color-error: var(--error-color);
-  --alert-foreground-color-error: var(--white); // We don't want this color to change with theme
+  // ALERTS NOTIFICATION TOAST & STATUS WIDGET
+  --alert-background-color-success: var(--status-color-success-500);
+  --alert-foreground-color-success: var(--db-secondary); // We don't want this color to change with theme
+  --alert-background-color-warning: var(--status-color-warning-500);
+  --alert-foreground-color-warning: var(--app-white); // We don't want this color to change with theme
+  --alert-background-color-error: var(--status-color-error-500);
+  --alert-foreground-color-error: var(--app-white); // We don't want this color to change with theme
   --alert-background-color-neutral: var(--color-background-quaternary);
   --alert-foreground-color-neutral: var(--color-foreground-secondary);
   --alert-foreground-color-neutral-active: var(--color-foreground-primary);
 
-  --status-ok-background-color: var(--ok-color);
-  --status-warning-background-color: var(--warning-color);
-  --status-pending-background-color: var(--pending-color);
-  --status-error-background-color: var(--error-color);
-  --status-icon-foreground-color: var(--color-background-primary);
+  --notification-background-color-success: var();
+  --notification-foreground-color-success: var();
+  --notification-border-color-success: var();
+  --notification-foreground-color-default: var(--color-foreground-secondary);
+
+  --status-widget-background-color-success: var(--status-color-success-500);
+  --status-widget-background-color-warning: var(--status-color-warning-500);
+  --status-widget-background-color-pending: var(--status-color-pending-500);
+  --status-widget-background-color-error: var(--status-color-error-500);
+  --status-widget-icon-foreground-color: var(--color-background-primary); // TODO review
+
+  --element-foreground-success: var(--status-color-success-500);
+  --element-foreground-warning: var(--status-color-warning-500);
+  --element-foreground-pending: var(--status-color-info-500);
+  --element-foreground-error: var(--status-color-error-500);
 
   // INTERFACE ELEMENTS
   --search-bar-background-color: var(--color-background-primary);
diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss
index fd5ebd4f3..64dafa89b 100644
--- a/frontend/resources/styles/common/refactor/themes/default-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss
@@ -7,32 +7,27 @@
 @use "sass:meta";
 
 :root {
-  --color-background-primary: var(--dark-gray-1);
-  --color-background-secondary: var(--dark-gray-2);
-  --color-background-tertiary: var(--dark-gray-3);
-  --color-background-quaternary: var(--dark-gray-4);
-  --color-background-subtle: var(--dark-gray-2-30);
-  --color-background-disabled: var(--off-white);
-  --color-foreground-primary: var(--white);
-  --color-foreground-secondary: var(--off-white);
-  --color-foreground-tertiary: var(--pink);
-  --color-foreground-disabled: var(--off-white-40);
-  --color-accent-primary: var(--green);
-  --color-accent-primary-muted: var(--green-30);
-  --color-accent-secondary: var(--lilac);
-  --color-accent-tertiary: var(--strong-green);
-  --color-accent-tertiary-muted: var(--strong-green-10);
-  --color-component-highlight: var(--lilac);
+  --color-background-primary: var(--db-primary);
+  --color-background-secondary: var(--db-secondary);
+  --color-background-tertiary: var(--db-tertiary);
+  --color-background-quaternary: var(--db-quaternary);
+  --color-background-subtle: var(--db-secondary-30);
+  --color-background-disabled: var(--df-secondary);
+  --color-foreground-primary: var(--df-primary);
+  --color-foreground-secondary: var(--df-secondary);
+  --color-foreground-disabled: var(--df-secondary-40);
+  --color-accent-primary: var(--da-primary);
+  --color-accent-primary-muted: var(--da-primary-muted);
+  --color-accent-secondary: var(--da-secondary);
+  --color-accent-tertiary: var(--da-tertiary);
+  --color-accent-tertiary-muted: var(--da-tertiary-10);
+  --color-accent-quaternary: var(--da-quaternary);
+  --color-component-highlight: var(--da-secondary);
 
   --overlay-color: rgba(0, 0, 0, 0.4);
-  --ok-color: var(--dark-ok-color);
-  --warning-color: var(--dark-warning-color);
-  --pending-color: var(--dark-pending-color);
-  --error-color: var(--dark-error-color);
-  --canvas-color: var(--color-canvas);
 
-  --shadow-color: var(--dark-gray-2-30);
-  --radio-button-box-shadow: 0 0 0 1px var(--dark-gray-2-30) inset;
+  --shadow-color: var(--db-secondary-30);
+  --radio-button-box-shadow: 0 0 0 1px var(--db-secondary-30) inset;
 
   @include meta.load-css("hljs-dark-theme");
 }
diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss
index 9cee8c427..ba5fcb7a7 100644
--- a/frontend/resources/styles/common/refactor/themes/light-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss
@@ -7,32 +7,27 @@
 @use "sass:meta";
 
 .light {
-  --color-background-primary: var(--light-gray-1);
-  --color-background-secondary: var(--light-gray-2);
-  --color-background-tertiary: var(--light-gray-3);
-  --color-background-quaternary: var(--light-gray-4);
-  --color-background-subtle: var(--light-gray-2-30); //Whatch this¡¡
-  --color-background-disabled: var(--light-gray-4);
-  --color-foreground-primary: var(--black);
-  --color-foreground-secondary: var(--off-black);
-  --color-foreground-tertiary: var(--pink);
-  --color-foreground-disabled: var(--off-black-40);
-  --color-accent-primary: var(--purple);
-  --color-accent-primary-muted: var(--purple-30);
-  --color-accent-secondary: var(--blue);
-  --color-accent-tertiary: var(--strong-purple);
-  --color-accent-tertiary-muted: var(--strong-purple-10);
-  --color-component-highlight: var(--blue);
+  --color-background-primary: var(--lb-primary);
+  --color-background-secondary: var(--lb-secondary);
+  --color-background-tertiary: var(--lb-tertiary);
+  --color-background-quaternary: var(--lb-quaternary);
+  --color-background-subtle: var(--lb-secondary-30); //Whatch this¡¡
+  --color-background-disabled: var(--lb-quaternary);
+  --color-foreground-primary: var(--lf-primary);
+  --color-foreground-secondary: var(--lf-secondary);
+  --color-foreground-disabled: var(--lf-secondary-40);
+  --color-accent-primary: var(--la-primary);
+  --color-accent-primary-muted: var(--la-primary-muted);
+  --color-accent-secondary: var(--la-secondary);
+  --color-accent-tertiary: var(--la-tertiary);
+  --color-accent-tertiary-muted: var(--la-tertiary-10);
+  --color-accent-quaternary: var(--la-quaternary);
+  --color-component-highlight: var(--la-secondary);
 
   --overlay-color: rgba(255, 255, 255, 0.4);
-  --ok-color: var(--light-ok-color);
-  --warning-color: var(--light-warning-color);
-  --pending-color: var(--light-pending-color);
-  --error-color: var(--light-error-color);
-  --canvas-color: var(--color-canvas);
 
-  --shadow-color: var(--off-black-40);
-  --radio-button-box-shadow: 0 0 0 1px var(--light-gray-2) inset;
+  --shadow-color: var(--lf-secondary-40);
+  --radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset;
 
   @include meta.load-css("hljs-light-theme");
 }
diff --git a/frontend/src/app/main/constants.cljs b/frontend/src/app/main/constants.cljs
index 75fb6b8c8..31bd4dfd6 100644
--- a/frontend/src/app/main/constants.cljs
+++ b/frontend/src/app/main/constants.cljs
@@ -19,9 +19,9 @@
   "Default data for page metadata."
   {:grid-x-axis grid-x-axis
    :grid-y-axis grid-y-axis
-   :grid-color "var(--off-white)"
+   :grid-color "var(--df-secondary)"
    :grid-alignment true
-   :background "var(--white)"})
+   :background "var(--app-white)"})
 
 (def size-presets
   [{:name "APPLE"}
diff --git a/frontend/src/app/main/data/workspace/notifications.cljs b/frontend/src/app/main/data/workspace/notifications.cljs
index 0f5616fd2..6efa57439 100644
--- a/frontend/src/app/main/data/workspace/notifications.cljs
+++ b/frontend/src/app/main/data/workspace/notifications.cljs
@@ -124,17 +124,15 @@
 ;; --- Handle: Presence
 
 (def ^:private presence-palette
-  #{"#82e590" ; green
-    "#7ad7c5" ; blue-green
+  #{"#f49ef7" ; pink
     "#75cafc" ; blue
-    "#a9bdfa" ; blue-purple
+    "#fdcf79" ; gold
+    "#a9bdfa" ; indigo
+    "#faa6b7" ; red
     "#cbaaff" ; purple
-    "#f49ef7" ; pink
-    "#faa6b7" ; salmon
     "#f9b489" ; orange
-    "#fdcd79" ; soft-orange
     "#dee563" ; yellow -> default presence color
-    "#b1e96f" ; yellow-green
+    "#b1e96f" ; lemon
     })
 
 (defn handle-presence
@@ -145,7 +143,7 @@
                               (remove nil?))
                   used  (into #{} xfm presence)
                   avail (set/difference presence-palette used)]
-              (or (first avail) "var(--black)")))
+              (or (first avail) "var(--app-black)")))
 
           (update-color [color presence]
             (if (some? color)
diff --git a/frontend/src/app/main/ui/auth.scss b/frontend/src/app/main/ui/auth.scss
index ae955b062..2e5d45fc7 100644
--- a/frontend/src/app/main/ui/auth.scss
+++ b/frontend/src/app/main/ui/auth.scss
@@ -8,7 +8,7 @@
 
 .auth-section {
   align-items: center;
-  background: $db-primary;
+  background: var(--panel-background-color);
   display: grid;
   gap: $s-32;
   grid-template-columns: repeat(5, 1fr);
diff --git a/frontend/src/app/main/ui/auth/common.scss b/frontend/src/app/main/ui/auth/common.scss
index 9483f9ba5..db99ba8fa 100644
--- a/frontend/src/app/main/ui/auth/common.scss
+++ b/frontend/src/app/main/ui/auth/common.scss
@@ -19,7 +19,7 @@
 }
 
 .separator {
-  border-color: $db-cuaternary;
+  border-color: $db-quaternary;
   margin: $s-24 0;
 }
 
@@ -60,7 +60,7 @@
   flex-direction: column;
   gap: $s-12;
   padding: $s-24 0;
-  border-top: $s-1 solid $db-cuaternary;
+  border-top: $s-1 solid $db-quaternary;
 
   span {
     text-align: center;
@@ -111,7 +111,7 @@
   }
 
   &:hover {
-    color: var(--white);
+    color: var(--app-white);
   }
 }
 
diff --git a/frontend/src/app/main/ui/auth/register.scss b/frontend/src/app/main/ui/auth/register.scss
index 7fab883e1..9cbc00457 100644
--- a/frontend/src/app/main/ui/auth/register.scss
+++ b/frontend/src/app/main/ui/auth/register.scss
@@ -20,7 +20,7 @@
 }
 
 .notification-icon {
-  fill: $df-primary;
+  fill: var(--main-icon-foreground);
   display: flex;
   justify-content: center;
   margin-bottom: $s-32;
@@ -33,6 +33,6 @@
 .notification-text-email,
 .notification-text {
   font-size: $fs-16;
-  color: $df-secondary;
+  color: var(--notification-foreground-color-default);
   margin-bottom: $s-16;
 }
diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss
index 874a229ad..2c5e2275f 100644
--- a/frontend/src/app/main/ui/comments.scss
+++ b/frontend/src/app/main/ui/comments.scss
@@ -14,7 +14,7 @@
   padding: $s-8 $s-16;
 
   &:hover {
-    background: $db-primary;
+    background: var(--comment-thread-background-color-hover);
   }
 }
 
diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index 512ba312e..ccfc5cf0b 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/frontend/src/app/main/ui/components/forms.scss
@@ -325,7 +325,7 @@
           }
         }
         &.invalid {
-          background-color: var(--status-error-background-color);
+          background-color: var(--status-widget-background-color-error);
           .text {
             color: var(--alert-foreground-color-error);
           }
diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss
index 1f6621c91..0817253a6 100644
--- a/frontend/src/app/main/ui/components/select.scss
+++ b/frontend/src/app/main/ui/components/select.scss
@@ -48,7 +48,7 @@
     .separator {
       margin: 0;
       height: $s-12;
-      border-top: 1px solid $db-primary;
+      border-top: $s-1 solid var(--dropdown-separator-color);
     }
   }
   .checked-element {
diff --git a/frontend/src/app/main/ui/dashboard.scss b/frontend/src/app/main/ui/dashboard.scss
index fa287e7fa..fdf2d0d69 100644
--- a/frontend/src/app/main/ui/dashboard.scss
+++ b/frontend/src/app/main/ui/dashboard.scss
@@ -7,7 +7,7 @@
 @use "refactor/common-refactor.scss" as *;
 
 .dashboard {
-  background-color: $db-primary;
+  background-color: var(--app-background);
   display: grid;
   grid-template-columns: $s-40 $s-256 1fr;
   grid-template-rows: $s-52 1fr;
diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss
index 395d08005..bdfcca141 100644
--- a/frontend/src/app/main/ui/dashboard/comments.scss
+++ b/frontend/src/app/main/ui/dashboard/comments.scss
@@ -79,7 +79,7 @@
   }
 
   &:hover {
-    background-color: $db-cuaternary;
+    background-color: $db-quaternary;
 
     svg {
       stroke: $da-primary;
diff --git a/frontend/src/app/main/ui/dashboard/files.scss b/frontend/src/app/main/ui/dashboard/files.scss
index 9173bac11..4473dab6a 100644
--- a/frontend/src/app/main/ui/dashboard/files.scss
+++ b/frontend/src/app/main/ui/dashboard/files.scss
@@ -12,7 +12,7 @@
   margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid $db-cuaternary;
+  border-top: $s-1 solid $db-quaternary;
 
   &.dashboard-projects {
     user-select: none;
diff --git a/frontend/src/app/main/ui/dashboard/fonts.scss b/frontend/src/app/main/ui/dashboard/fonts.scss
index 6c8817fda..6543736c1 100644
--- a/frontend/src/app/main/ui/dashboard/fonts.scss
+++ b/frontend/src/app/main/ui/dashboard/fonts.scss
@@ -8,7 +8,7 @@
 @use "common/refactor/common-dashboard";
 
 .dashboard-fonts {
-  border-top: $s-1 solid $db-cuaternary;
+  border-top: $s-1 solid $db-quaternary;
   display: flex;
   flex-direction: column;
   padding-left: $s-120;
@@ -161,7 +161,7 @@
   .table-field {
     color: $df-primary;
     .variant {
-      background-color: $db-cuaternary;
+      background-color: $db-quaternary;
       border-radius: $br-8;
       margin-right: $s-4;
       padding-right: $s-4;
@@ -196,7 +196,7 @@
       &.failure {
         margin-right: $s-12;
         svg {
-          stroke: var(--warning-color);
+          stroke: var(--element-foreground-warning);
         }
       }
 
@@ -262,7 +262,7 @@
 
     background-color: $db-primary;
     border-radius: $br-12;
-    border: $s-1 solid $db-cuaternary;
+    border: $s-1 solid $db-quaternary;
     color: $df-primary;
     font-size: $fs-12;
 
@@ -289,9 +289,9 @@
       }
     }
     &.warning {
-      background-color: $db-cuaternary;
+      background-color: $db-quaternary;
       .icon svg {
-        stroke: var(--warning-color);
+        stroke: var(--element-foreground-warning);
       }
     }
   }
@@ -304,7 +304,7 @@
 .fonts-placeholder {
   align-items: center;
   border-radius: $br-8;
-  border: $s-1 solid $db-cuaternary;
+  border: $s-1 solid $db-quaternary;
   display: flex;
   flex-direction: column;
   height: $s-160;
diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index b8521d9c2..98b10ac72 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/frontend/src/app/main/ui/dashboard/grid.scss
@@ -280,7 +280,7 @@ $thumbnail-default-height: $s-168; // Default width
   }
 
   :global(svg#loader-pencil) {
-    stroke: $db-cuaternary;
+    stroke: $db-quaternary;
     width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
   }
 }
@@ -345,7 +345,7 @@ $thumbnail-default-height: $s-168; // Default width
     }
 
     svg {
-      background-color: var(--canvas-color);
+      background-color: var(--color-canvas);
       border-radius: $br-4;
       border: $s-2 solid transparent;
       height: $s-24;
diff --git a/frontend/src/app/main/ui/dashboard/import.scss b/frontend/src/app/main/ui/dashboard/import.scss
index fc726714e..e4b3a7bb7 100644
--- a/frontend/src/app/main/ui/dashboard/import.scss
+++ b/frontend/src/app/main/ui/dashboard/import.scss
@@ -39,8 +39,8 @@
   width: 100%;
   margin-bottom: $s-24;
   border-radius: $br-8;
-  background-color: var(--alert-background-color-ok);
-  color: var(--alert-foreground-color-ok);
+  background-color: var(--alert-background-color-success);
+  color: var(--alert-foreground-color-success);
 
   .icon {
     @include flexCenter;
@@ -48,7 +48,7 @@
     width: $s-24;
     svg {
       @extend .button-icon;
-      stroke: var(--alert-foreground-color-ok);
+      stroke: var(--alert-foreground-color-success);
     }
   }
   .message {
@@ -155,7 +155,7 @@
       }
       &.error {
         svg {
-          stroke: var(--status-error-color);
+          stroke: var(--element-foreground-error);
         }
       }
     }
@@ -163,46 +163,46 @@
 
   &.loading {
     .file-name {
-      color: var(--status-pending-color);
+      color: var(--element-foreground-pending);
       .file-icon {
         :global(#loader-pencil) {
-          color: var(--status-pending-color);
-          stroke: var(--status-pending-color);
-          fill: var(--status-pending-color);
+          color: var(--element-foreground-pending);
+          stroke: var(--element-foreground-pending);
+          fill: var(--element-foreground-pending);
         }
       }
     }
   }
   &.warning {
     .file-name {
-      color: var(--status-warning-color);
+      color: var(--element-foreground-warning);
       .file-icon svg {
-        stroke: var(--status-warning-color);
+        stroke: var(--element-foreground-warning);
       }
       .file-icon.icon-fill svg {
-        fill: var(--status-warning-color);
+        fill: var(--element-foreground-warning);
       }
     }
   }
   &.success {
     .file-name {
-      color: var(--status-success-color);
+      color: var(--element-foreground-success);
       .file-icon svg {
-        stroke: var(--status-success-color);
+        stroke: var(--element-foreground-success);
       }
       .file-icon.icon-fill svg {
-        fill: var(--status-success-color);
+        fill: var(--element-foreground-success);
       }
     }
   }
   &.error {
     .file-name {
-      color: var(--status-error-color);
+      color: var(--element-foreground-error);
       .file-icon svg {
-        stroke: var(--status-error-color);
+        stroke: var(--element-foreground-error);
       }
       .file-icon.icon-fill svg {
-        fill: var(--status-error-color);
+        fill: var(--element-foreground-error);
       }
     }
   }
diff --git a/frontend/src/app/main/ui/dashboard/inline_edition.scss b/frontend/src/app/main/ui/dashboard/inline_edition.scss
index 0c84951f9..b2d0276cd 100644
--- a/frontend/src/app/main/ui/dashboard/inline_edition.scss
+++ b/frontend/src/app/main/ui/dashboard/inline_edition.scss
@@ -15,7 +15,7 @@
 }
 
 input.element-title {
-  background-color: $db-primary;
+  background-color: var(--input-background-color-active);
   border-radius: $br-8;
   color: $df-primary;
   font-size: $fs-16;
@@ -47,7 +47,7 @@ input.element-title {
   }
   &:hover {
     svg {
-      fill: var(--warning-color);
+      fill: var(--element-foreground-warning);
     }
   }
 }
diff --git a/frontend/src/app/main/ui/dashboard/libraries.scss b/frontend/src/app/main/ui/dashboard/libraries.scss
index eb7864c9e..69660e4f0 100644
--- a/frontend/src/app/main/ui/dashboard/libraries.scss
+++ b/frontend/src/app/main/ui/dashboard/libraries.scss
@@ -12,7 +12,7 @@
   margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid $db-cuaternary;
+  border-top: $s-1 solid $db-quaternary;
 
   &.dashboard-projects {
     user-select: none;
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.scss b/frontend/src/app/main/ui/dashboard/placeholder.scss
index 829ad1d53..6f05ba000 100644
--- a/frontend/src/app/main/ui/dashboard/placeholder.scss
+++ b/frontend/src/app/main/ui/dashboard/placeholder.scss
@@ -34,7 +34,7 @@
       85% top;
     background-repeat: no-repeat;
     align-items: center;
-    border: $s-1 solid $db-cuaternary;
+    border: $s-1 solid $db-quaternary;
     border-radius: $br-4;
     display: flex;
     flex-direction: column;
@@ -75,7 +75,7 @@
 
     &:hover {
       border: $s-2 solid $da-tertiary;
-      background-color: $db-cuaternary;
+      background-color: $db-quaternary;
       color: $da-primary;
 
       svg {
diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss
index 48652ee37..4700ad366 100644
--- a/frontend/src/app/main/ui/dashboard/projects.scss
+++ b/frontend/src/app/main/ui/dashboard/projects.scss
@@ -12,7 +12,7 @@
   margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid $db-cuaternary;
+  border-top: $s-1 solid $db-quaternary;
 
   &.dashboard-projects {
     user-select: none;
diff --git a/frontend/src/app/main/ui/dashboard/search.scss b/frontend/src/app/main/ui/dashboard/search.scss
index 9eb379706..0922089ad 100644
--- a/frontend/src/app/main/ui/dashboard/search.scss
+++ b/frontend/src/app/main/ui/dashboard/search.scss
@@ -13,7 +13,7 @@
   margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid $db-cuaternary;
+  border-top: $s-1 solid $db-quaternary;
 
   &.dashboard-projects {
     user-select: none;
@@ -35,7 +35,7 @@
   flex-direction: column;
   height: $s-200;
   background: transparent;
-  border: $s-1 solid $db-cuaternary;
+  border: $s-1 solid $db-quaternary;
   border-radius: $br-8;
 
   .text {
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss
index 8c0520ea4..27b31d569 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.scss
+++ b/frontend/src/app/main/ui/dashboard/sidebar.scss
@@ -11,8 +11,8 @@
   grid-row: 1 / span 2;
   grid-column: 1 / span 2;
 
-  background-color: $db-primary;
-  border-right: $s-1 solid $db-cuaternary;
+  background-color: var(--panel-background-color);
+  border-right: $s-1 solid $db-quaternary;
   margin: 0 $s-16 0 0;
   padding: $s-16 0 0 0;
 
@@ -141,7 +141,7 @@
   position: absolute;
   z-index: $z-index-4;
   background-color: $db-tertiary;
-  border: $s-1 solid $db-cuaternary;
+  border: $s-1 solid $db-quaternary;
   border-radius: $br-8;
 
   .separator {
@@ -161,11 +161,11 @@
     padding: $s-6 $s-16;
 
     .warning {
-      color: var(--dark-warning-color);
+      color: var(--element-foreground-warning);
     }
 
     &:hover {
-      background-color: $db-cuaternary;
+      background-color: $db-quaternary;
     }
     svg {
       height: $s-12;
@@ -182,7 +182,7 @@
     li {
       color: $df-primary;
       &.warning {
-        color: var(--dark-warning-color);
+        color: var(--element-foreground-warning);
       }
     }
   }
@@ -191,7 +191,7 @@
 .teams-dropdown {
   background-color: $db-tertiary;
   border-radius: $br-8;
-  border: $s-1 solid $db-cuaternary;
+  border: $s-1 solid $db-quaternary;
   min-width: $s-248;
 
   left: 0;
@@ -212,7 +212,7 @@
     }
 
     &:hover {
-      background-color: $db-cuaternary;
+      background-color: $db-quaternary;
       .team-icon {
         &.new-team {
           background-color: $da-primary;
@@ -233,7 +233,7 @@
     }
 
     .new-team {
-      background-color: $db-cuaternary;
+      background-color: $db-quaternary;
     }
 
     &.action {
@@ -425,7 +425,7 @@
     }
 
     &.current {
-      background-color: $db-cuaternary;
+      background-color: $db-quaternary;
       .element-title {
         color: $da-primary;
       }
@@ -441,7 +441,7 @@
   position: relative;
 
   background-color: $db-tertiary;
-  border-top: $s-1 solid $db-cuaternary;
+  border-top: $s-1 solid $db-quaternary;
 
   .profile {
     align-items: center;
@@ -474,8 +474,7 @@
   .dropdown {
     left: $s-16;
     bottom: $s-44;
-
-    background-color: $db-primary;
+    background-color: var(--profile-drowpdown-background-color);
     border: $s-1 solid $db-tertiary;
     border-radius: $br-8;
     min-width: $s-252;
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index d593616b2..32afa09a0 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -12,7 +12,7 @@
   margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid $db-cuaternary;
+  border-top: $s-1 solid $db-quaternary;
 
   &.dashboard-projects {
     user-select: none;
@@ -41,7 +41,7 @@
   align-items: center;
   background-color: transparent;
   border-radius: $br-8;
-  border: $s-1 solid $db-cuaternary;
+  border: $s-1 solid $db-quaternary;
   color: $df-secondary;
   display: flex;
   flex-direction: column;
@@ -110,7 +110,7 @@
 .dropdown {
   background-color: $db-tertiary;
   border-radius: $br-8;
-  border: $s-1 solid $db-cuaternary;
+  border: $s-1 solid $db-quaternary;
   box-shadow: 0 $s-2 $s-8 rgba(0, 0, 0, 0.25);
   left: calc(-1 * $s-144);
   max-height: $s-480;
@@ -138,7 +138,7 @@
     color: $df-primary;
 
     &:hover {
-      background-color: $db-cuaternary;
+      background-color: $db-quaternary;
     }
 
     &.title {
@@ -156,7 +156,7 @@
     li {
       color: $df-primary;
       &.warning {
-        color: var(--warning-color);
+        color: var(--element-foreground-warning);
       }
     }
   }
@@ -237,7 +237,7 @@
         align-items: center;
         padding: $s-4 $s-8;
         font-size: $fs-14;
-        background-color: $db-cuaternary;
+        background-color: $db-quaternary;
         border-color: transparent;
         border-radius: $br-8;
       }
@@ -271,7 +271,7 @@
         text-transform: uppercase;
 
         &.pending {
-          background-color: var(--warning-color);
+          background-color: var(--status-color-warning-500);
         }
 
         &.expired {
@@ -303,7 +303,7 @@
         height: $s-16;
       }
       .failure svg {
-        fill: var(--warning-color);
+        fill: var(--element-foreground-warning);
         width: $s-16;
         height: $s-16;
       }
@@ -422,7 +422,7 @@
   align-items: center;
   flex-direction: column;
   margin-top: $s-16;
-  border: $s-1 solid $db-cuaternary;
+  border: $s-1 solid $db-quaternary;
   border-radius: $br-8;
   color: $df-secondary;
 }
diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss
index bec721aa6..f70618c45 100644
--- a/frontend/src/app/main/ui/dashboard/templates.scss
+++ b/frontend/src/app/main/ui/dashboard/templates.scss
@@ -41,7 +41,7 @@
       margin-right: $s-32;
       position: relative;
       z-index: 1;
-      background-color: $db-cuaternary;
+      background-color: $db-quaternary;
 
       span {
         display: inline-block;
@@ -107,7 +107,7 @@
     margin-left: $s-6;
     position: absolute;
     border-top-left-radius: $s-8;
-    background-color: $db-cuaternary;
+    background-color: $db-quaternary;
 
     .card-container {
       width: $s-276;
diff --git a/frontend/src/app/main/ui/debug/components_preview.cljs b/frontend/src/app/main/ui/debug/components_preview.cljs
index 5a841ac8e..e13ad747e 100644
--- a/frontend/src/app/main/ui/debug/components_preview.cljs
+++ b/frontend/src/app/main/ui/debug/components_preview.cljs
@@ -42,7 +42,7 @@
         colors ["var(--color-background-primary)"
                 "var(--color-background-secondary)"
                 "var(--color-background-tertiary)"
-                "var(--color-background-cuaternary)"
+                "var(--color-background-quaternary)"
                 "var(--color-foreground-primary)"
                 "var(--color-foreground-secondary)"
                 "var(--color-accent-primary)"
diff --git a/frontend/src/app/main/ui/export.scss b/frontend/src/app/main/ui/export.scss
index 847cf306f..cf72b301d 100644
--- a/frontend/src/app/main/ui/export.scss
+++ b/frontend/src/app/main/ui/export.scss
@@ -202,7 +202,7 @@
         height: 100%;
         min-height: $s-32;
         min-width: $s-32;
-        background-color: var(--white);
+        background-color: var(--app-white);
         border-radius: $br-6;
         margin: auto 0;
         img,
@@ -276,28 +276,27 @@
   }
   &.loading {
     .file-name {
-      color: var(--pending-color);
+      color: var(--element-foreground-pending);
       .file-icon svg:global(#loader-pencil) {
-        color: var(--pending-color);
-        stroke: var(--pending-color);
-        fill: var(--pending-color);
+        color: var(--element-foreground-pending);
+        stroke: var(--element-foreground-pending);
+        fill: var(--element-foreground-pending);
       }
     }
   }
   &.error {
     .file-name {
-      color: var(--error-color);
+      color: var(--element-foreground-error);
       .file-icon svg {
-        stroke: var(--error-color);
+        stroke: var(--element-foreground-error);
       }
     }
   }
-
   &.success {
     .file-name {
-      color: var(--ok-color);
+      color: var(--element-foreground-success);
       .file-icon svg {
-        stroke: var(--ok-color);
+        stroke: var(--element-foreground-success);
       }
     }
   }
diff --git a/frontend/src/app/main/ui/flex_controls/common.cljs b/frontend/src/app/main/ui/flex_controls/common.cljs
index 052e501ee..032760688 100644
--- a/frontend/src/app/main/ui/flex_controls/common.cljs
+++ b/frontend/src/app/main/ui/flex_controls/common.cljs
@@ -8,9 +8,9 @@
 ;; ------------------------------------------------
 
 (def font-size 11)
-(def distance-color "var(--color-distance)")
-(def distance-text-color "var(--color-white)")
-(def warning-color "var(--color-warning)")
+(def distance-color "var(--da-quaternary)")
+(def distance-text-color "var(--app-white)")
+(def warning-color "var(--status-color-warning-500)")
 (def flex-display-pill-width 40)
 (def flex-display-pill-height 20)
 (def flex-display-pill-border-radius 4)
diff --git a/frontend/src/app/main/ui/measurements.cljs b/frontend/src/app/main/ui/measurements.cljs
index 2719b9739..370830fdb 100644
--- a/frontend/src/app/main/ui/measurements.cljs
+++ b/frontend/src/app/main/ui/measurements.cljs
@@ -27,17 +27,17 @@
 (def select-guide-width 1)
 (def select-guide-dasharray 5)
 
-(def hover-color "var(--color-foreground-tertiary)")
+(def hover-color "var(--color-accent-quaternary)")
 
-(def size-display-color "var(--white)")
+(def size-display-color "var(--app-white)")
 (def size-display-opacity 0.7)
-(def size-display-text-color "var(--black)")
+(def size-display-text-color "var(--app-black)")
 (def size-display-width-min 50)
 (def size-display-width-max 75)
 (def size-display-height 16)
 
-(def distance-color "var(--color-foreground-tertiary)")
-(def distance-text-color "var(--white)")
+(def distance-color "var(--color-accent-quaternary)")
+(def distance-text-color "var(--app-white)")
 (def distance-border-radius 2)
 (def distance-pill-width 50)
 (def distance-pill-height 16)
diff --git a/frontend/src/app/main/ui/messages.scss b/frontend/src/app/main/ui/messages.scss
index 03ad9dfed..67e68c875 100644
--- a/frontend/src/app/main/ui/messages.scss
+++ b/frontend/src/app/main/ui/messages.scss
@@ -23,8 +23,8 @@
 }
 
 .success {
-  --bg-color: var(--alert-background-color-ok);
-  --fg-color: var(--alert-foreground-color-ok);
+  --bg-color: var(--alert-background-color-success);
+  --fg-color: var(--alert-foreground-color-success);
 }
 
 .info {
diff --git a/frontend/src/app/main/ui/settings.scss b/frontend/src/app/main/ui/settings.scss
index 2fc327282..6bae8499f 100644
--- a/frontend/src/app/main/ui/settings.scss
+++ b/frontend/src/app/main/ui/settings.scss
@@ -8,7 +8,7 @@
 @use "common/refactor/common-dashboard";
 
 .dashboard {
-  background-color: $db-primary;
+  background-color: var(--app-background);
   display: grid;
   grid-template-rows: $s-48 1fr;
   grid-template-columns: $s-40 $s-256 1fr;
@@ -28,7 +28,7 @@
   margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
-  border-top: $s-1 solid $db-cuaternary;
+  border-top: $s-1 solid $db-quaternary;
 
   &.dashboard-projects {
     user-select: none;
@@ -107,8 +107,8 @@
       }
       &.disabled {
         input {
-          background-color: $db-primary;
-          border-color: $db-cuaternary;
+          background-color: var(--input-background-color-disabled);
+          border-color: $db-quaternary;
           color: $df-secondary;
         }
       }
@@ -161,7 +161,7 @@
       color: $df-primary;
       &:hover {
         color: $da-primary;
-        background-color: $db-cuaternary;
+        background-color: $db-quaternary;
       }
     }
     hr {
diff --git a/frontend/src/app/main/ui/settings/access_tokens.scss b/frontend/src/app/main/ui/settings/access_tokens.scss
index 50bdef0af..44bfaf9c0 100644
--- a/frontend/src/app/main/ui/settings/access_tokens.scss
+++ b/frontend/src/app/main/ui/settings/access_tokens.scss
@@ -85,7 +85,7 @@
     .content {
       padding: $s-2 $s-6;
       &.expired {
-        background-color: var(--warning-color);
+        background-color: var(--status-color-warning-500);
         border-radius: $br-4;
         color: $db-secondary;
       }
@@ -149,7 +149,7 @@
 .access-tokens-empty {
   align-items: center;
   border-radius: $br-8;
-  border: $s-1 solid $db-cuaternary;
+  border: $s-1 solid $db-quaternary;
   color: $df-secondary;
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss
index 59e22acbb..666d648e6 100644
--- a/frontend/src/app/main/ui/settings/profile.scss
+++ b/frontend/src/app/main/ui/settings/profile.scss
@@ -39,7 +39,7 @@
       color: $df-primary;
       &:hover {
         color: $da-primary;
-        background-color: $db-cuaternary;
+        background-color: $db-quaternary;
       }
     }
     hr {
@@ -110,8 +110,8 @@
     }
     &.disabled {
       input {
-        background-color: $db-primary;
-        border-color: $db-cuaternary;
+        background-color: var(--input-background-color-disabled);
+        border-color: $db-quaternary;
         color: $df-secondary;
       }
     }
diff --git a/frontend/src/app/main/ui/settings/sidebar.scss b/frontend/src/app/main/ui/settings/sidebar.scss
index f0eb99029..afb7cb38f 100644
--- a/frontend/src/app/main/ui/settings/sidebar.scss
+++ b/frontend/src/app/main/ui/settings/sidebar.scss
@@ -7,8 +7,8 @@
 @use "common/refactor/common-refactor.scss" as *;
 
 .dashboard-sidebar {
-  background-color: $db-primary;
-  border-right: $s-1 solid $db-cuaternary;
+  background-color: var(--panel-background-color);
+  border-right: $s-1 solid $db-quaternary;
   display: flex;
   flex-direction: column;
   grid-column: 1 / span 2;
@@ -112,14 +112,14 @@
     }
 
     &:hover {
-      background-color: $db-cuaternary;
+      background-color: $db-quaternary;
       &::before {
         background-color: $df-primary;
       }
     }
 
     &.current {
-      background-color: $db-cuaternary;
+      background-color: $db-quaternary;
       color: $da-primary;
 
       a {
diff --git a/frontend/src/app/main/ui/shapes/grid_layout_viewer.cljs b/frontend/src/app/main/ui/shapes/grid_layout_viewer.cljs
index b0f2b3482..5cd437ead 100644
--- a/frontend/src/app/main/ui/shapes/grid_layout_viewer.cljs
+++ b/frontend/src/app/main/ui/shapes/grid_layout_viewer.cljs
@@ -38,11 +38,11 @@
              :y area-y
              :width area-width
              :height area-height
-             :style {:fill "var(--color-foreground-tertiary)"
+             :style {:fill "var(--color-accent-quaternary)"
                      :fill-opacity 0.3}}]
      [:text {:x area-text-x
              :y area-text-y
-             :style {:fill "var(--color-foreground-tertiary)"
+             :style {:fill "var(--color-accent-quaternary)"
                      :font-family "worksans"
                      :font-weight 600
                      :font-size 14
@@ -71,7 +71,7 @@
        :y (:y cell-origin)
        :width cell-width
        :height cell-height
-       :style {:stroke "var(--color-foreground-tertiary)"
+       :style {:stroke "var(--color-accent-quaternary)"
                :stroke-width 1.5
                :fill "none"}}]
 
diff --git a/frontend/src/app/main/ui/viewer/inspect/left_sidebar.scss b/frontend/src/app/main/ui/viewer/inspect/left_sidebar.scss
index 889d480ad..503b80907 100644
--- a/frontend/src/app/main/ui/viewer/inspect/left_sidebar.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/left_sidebar.scss
@@ -7,7 +7,7 @@
 @use "common/refactor/common-refactor.scss" as *;
 
 .settings-bar-left {
-  background-color: $db-primary;
+  background-color: var(--panel-background-color);
   height: 100%;
   width: $s-256;
 }
diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss
index e91cedb36..38e6836c8 100644
--- a/frontend/src/app/main/ui/workspace/libraries.scss
+++ b/frontend/src/app/main/ui/workspace/libraries.scss
@@ -190,7 +190,7 @@
             }
 
             & svg {
-              background-color: var(--canvas-color);
+              background-color: var(--color-canvas);
               border-radius: $br-4;
               border: $s-2 solid transparent;
               height: $s-24;
diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss
index 9eafbcb7d..a56f73629 100644
--- a/frontend/src/app/main/ui/workspace/right_header.scss
+++ b/frontend/src/app/main/ui/workspace/right_header.scss
@@ -188,16 +188,16 @@
     @extend .button-icon;
     height: $s-12;
     width: $s-12;
-    stroke: var(--status-icon-foreground-color);
+    stroke: var(--status-widget-icon-foreground-color);
   }
 }
 
 .pending-status {
-  background-color: var(--status-warning-background-color);
+  background-color: var(--status-widget-background-color-warning);
 }
 
 .saving-status {
-  background-color: var(--status-pending-background-color);
+  background-color: var(--status-widget-background-color-pending);
   svg {
     animation: spin-animation 1s infinite;
     animation-timing-function: linear;
@@ -205,11 +205,11 @@
 }
 
 .saved-status {
-  background-color: var(--status-ok-background-color);
+  background-color: var(--status-widget-background-color-success);
 }
 
 .error-status {
-  background-color: var(--status-error-background-color);
+  background-color: var(--status-widget-background-color-error);
 }
 
 .viewer-btn {
diff --git a/frontend/src/app/main/ui/workspace/shapes/path/common.cljs b/frontend/src/app/main/ui/workspace/shapes/path/common.cljs
index 8c13c3245..b6d976a9e 100644
--- a/frontend/src/app/main/ui/workspace/shapes/path/common.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/path/common.cljs
@@ -14,10 +14,10 @@
    [rumext.v2 :as mf]))
 
 (def primary-color "var(--color-accent-tertiary)")
-(def secondary-color "var(--color-foreground-tertiary)")
-(def black-color "var(--black)")
-(def white-color "var(--white)")
-(def gray-color "var(--off-white)")
+(def secondary-color "var(--color-accent-quaternary)")
+(def black-color "var(--app-black)")
+(def white-color "var(--app-white)")
+(def gray-color "var(--df-secondary)")
 
 (def current-edit-path-ref
   (l/derived
diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
index 0e910e7f5..59c2e3fc6 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
@@ -53,7 +53,7 @@
 .shape-title {
   font-size: $fs-14;
   padding-bottom: $s-4;
-  background: $db-cuaternary;
+  background: $db-quaternary;
   color: $df-primary;
   padding: $s-8;
   border-radius: $s-8;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
index cc51a740b..d52e12d33 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
@@ -359,7 +359,7 @@
     border-radius: $br-6;
 
     &:hover {
-      background: $db-cuaternary;
+      background: $db-quaternary;
     }
   }
 }
diff --git a/frontend/src/app/main/ui/workspace/viewport/gradients.cljs b/frontend/src/app/main/ui/workspace/viewport/gradients.cljs
index 584000980..e2bf517d1 100644
--- a/frontend/src/app/main/ui/workspace/viewport/gradients.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/gradients.cljs
@@ -22,13 +22,13 @@
    [rumext.v2 :as mf]))
 
 (def gradient-line-stroke-width 2)
-(def gradient-line-stroke-color "var(--white)")
+(def gradient-line-stroke-color "var(--app-white)")
 (def gradient-square-width 15)
 (def gradient-square-radius 2)
 (def gradient-square-stroke-width 2)
 (def gradient-width-handler-radius 5)
-(def gradient-width-handler-color "var(--white)")
-(def gradient-square-stroke-color "var(--white)")
+(def gradient-width-handler-color "var(--app-white)")
+(def gradient-square-stroke-color "var(--app-white)")
 (def gradient-square-stroke-color-selected "var(--color-accent-tertiary)")
 
 (mf/defc shadow [{:keys [id x y width height offset]}]
@@ -109,7 +109,7 @@
            :rx (/ gradient-square-radius zoom)
            :width (/ gradient-square-width zoom)
            :height (/ gradient-square-width zoom)
-           :stroke (if selected "var(--color-accent-tertiary)" "var(--white)")
+           :stroke (if selected "var(--color-accent-tertiary)" "var(--app-white)")
            :stroke-width (/ gradient-square-stroke-width zoom)
            :fill (:value color)
            :fill-opacity (:opacity color)
diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
index 9c50cc2f4..48c4186d4 100644
--- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
@@ -11,7 +11,7 @@
     fill: var(--grid-editor-marker-color);
   }
   .marker-text {
-    fill: var(--white);
+    fill: var(--app-white);
     font-size: calc($s-12 / var(--zoom));
     font-family: worksans;
   }
diff --git a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs
index f7a21f6df..4f46f4133 100644
--- a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs
@@ -131,7 +131,7 @@
      (when icon-pdata
        [:path {:fill stroke
                :stroke-width 2
-               :stroke "var(--white)"
+               :stroke "var(--app-white)"
                :d icon-pdata
                :transform (str
                            "scale(" inv-zoom ", " inv-zoom ") "
@@ -164,7 +164,7 @@
 
     (if-not selected?
       [:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
-       [:path {:stroke "var(--off-white)"
+       [:path {:stroke "var(--df-secondary)"
                :fill "none"
                :pointer-events "visible"
                :stroke-width (/ 2 zoom)
@@ -173,7 +173,7 @@
          [:& interaction-marker {:index index
                                  :x dest-x
                                  :y dest-y
-                                 :stroke "var(--off-white)"
+                                 :stroke "var(--df-secondary)"
                                  :action-type action-type
                                  :arrow-dir arrow-dir
                                  :zoom zoom}])]
@@ -257,7 +257,7 @@
            [:& (mf/provider embed/context) {:value false}
             [:& shape-wrapper {:shape dest-shape}]]]]
          [:path {:stroke "var(--color-accent-tertiary)"
-                 :fill "var(--black)"
+                 :fill "var(--app-black)"
                  :fill-opacity 0.5
                  :stroke-width 1
                  :d (dm/str "M" marker-x " " marker-y " "
diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.cljs b/frontend/src/app/main/ui/workspace/viewport/presence.cljs
index 0b4c7a091..ffd4a59bf 100644
--- a/frontend/src/app/main/ui/workspace/viewport/presence.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/presence.cljs
@@ -25,8 +25,8 @@
   [{:keys [session profile] :as props}]
   (let [zoom             (mf/deref refs/selected-zoom)
         point            (:point session)
-        background-color (:color session "var(--black)")
-        text-color       (:text-color session "var(--white)")
+        background-color (:color session "var(--app-black)")
+        text-color       (:text-color session "var(--app-white)")
         transform        (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 1 zoom))
         shown-name       (if (> (count (:fullname profile)) 16)
                            (str (str/slice (:fullname profile) 0 12) "...")
diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs
index a8202db7f..ed91e2b6c 100644
--- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/selection.cljs
@@ -213,7 +213,7 @@
                :style {:fillOpacity "1"
                        :strokeWidth "1px"
                        :vectorEffect "non-scaling-stroke"}
-               :fill "var(--white)"
+               :fill "var(--app-white)"
                :stroke color
                :cx cx'
                :cy cy'}]
@@ -279,7 +279,7 @@
                  :style {:fillOpacity 1
                          :stroke color
                          :strokeWidth "1px"
-                         :fill "var(--white)"
+                         :fill "var(--app-white)"
                          :vectorEffect "non-scaling-stroke"}
                  :data-position (name position)
                  :cx (+ x (/ length 2))
diff --git a/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs b/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs
index 273813a93..c903a1938 100644
--- a/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs
@@ -21,7 +21,7 @@
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-(def ^:private line-color "var(--color-foreground-tertiary)")
+(def ^:private line-color "var(--color-accent-quaternary)")
 (def ^:private segment-gap 2)
 (def ^:private segment-gap-side 5)
 
@@ -85,7 +85,7 @@
         [:text {:x (if (= coord :x) x (+ x (/ width 2)))
                 :y (- (+ y (/ (/ pill-text-height zoom) 2) (- (/ 6 zoom))) (if (= coord :x) (/ 2 zoom) 0))
                 :font-size (/ pill-text-font-size zoom)
-                :fill "var(--white)"
+                :fill "var(--app-white)"
                 :text-anchor "middle"}
          (fmt/format-number distance)]])
 
diff --git a/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs b/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs
index 3e5a0c190..d65ae80f0 100644
--- a/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs
@@ -16,7 +16,7 @@
    [beicon.v2.core :as rx]
    [rumext.v2 :as mf]))
 
-(def ^:private line-color "var(--color-foreground-tertiary)")
+(def ^:private line-color "var(--color-accent-quaternary)")
 (def ^:private line-opacity 0.6)
 (def ^:private line-width 1)