diff --git a/packages/design-system/src/components/N8nSpinner/Spinner.vue b/packages/design-system/src/components/N8nSpinner/Spinner.vue
index a6f277ab19..4da73997b6 100644
--- a/packages/design-system/src/components/N8nSpinner/Spinner.vue
+++ b/packages/design-system/src/components/N8nSpinner/Spinner.vue
@@ -50,7 +50,7 @@ export default {
   position: absolute;
   width: 48px;
   height: 48px;
-  border: 4px solid #fff;
+  border: 4px solid var(--color-foreground-xlight);
   border-radius: 50%;
   animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
   border-color: var(--color-primary) transparent transparent transparent;
diff --git a/packages/design-system/theme/src/_tokens.dark.scss b/packages/design-system/theme/src/_tokens.dark.scss
index 7e03a21e3f..4bc642e549 100644
--- a/packages/design-system/theme/src/_tokens.dark.scss
+++ b/packages/design-system/theme/src/_tokens.dark.scss
@@ -1,296 +1,316 @@
 @use 'sass:math';
 
 @mixin theme {
-  --color-primary-h: 7;
-  --color-primary-s: 100%;
-  --color-primary-l: 68%;
-  --color-primary: hsl(
-				  var(--color-primary-h),
-				  var(--color-primary-s),
-				  var(--color-primary-l)
-  );
+	--color-primary-h: 7;
+	--color-primary-s: 100%;
+	--color-primary-l: 68%;
+	--color-primary: hsl(
+		var(--color-primary-h),
+		var(--color-primary-s),
+		var(--color-primary-l)
+	);
 
-  --color-primary-tint-1-l: 18%;
-  --color-primary-tint-1: hsl(
-				  var(--color-primary-h),
-				  var(--color-primary-s),
-				  var(--color-primary-tint-1-l)
-  );
+	--color-primary-tint-1-l: 18%;
+	--color-primary-tint-1: hsl(
+		var(--color-primary-h),
+		var(--color-primary-s),
+		var(--color-primary-tint-1-l)
+	);
 
-  --color-primary-tint-2-l: 9%;
-  --color-primary-tint-2: hsl(
-				  var(--color-primary-h),
-				  var(--color-primary-s),
-				  var(--color-primary-tint-2-l)
-  );
+	--color-primary-tint-2-l: 9%;
+	--color-primary-tint-2: hsl(
+		var(--color-primary-h),
+		var(--color-primary-s),
+		var(--color-primary-tint-2-l)
+	);
 
-  --color-primary-tint-3-l: 3%;
-  --color-primary-tint-3: hsl(
-				  var(--color-primary-h),
-				  var(--color-primary-s),
-				  var(--color-primary-tint-3-l)
-  );
+	--color-primary-tint-3-l: 3%;
+	--color-primary-tint-3: hsl(
+		var(--color-primary-h),
+		var(--color-primary-s),
+		var(--color-primary-tint-3-l)
+	);
 
-  --color-primary-shade-1-l: 89%;
-  --color-primary-shade-1: hsl(
-				  var(--color-primary-h),
-				  var(--color-primary-s),
-				  var(--color-primary-shade-1-l)
-  );
+	--color-primary-shade-1-l: 89%;
+	--color-primary-shade-1: hsl(
+		var(--color-primary-h),
+		var(--color-primary-s),
+		var(--color-primary-shade-1-l)
+	);
 
-  --color-secondary-h: 247;
-  --color-secondary-s: 100%;
-  --color-secondary-l: 35%;
-  --color-secondary: hsl(
-				  var(--color-secondary-h),
-				  var(--color-secondary-s),
-				  var(--color-secondary-l)
-  );
+	--color-secondary-h: 247;
+	--color-secondary-s: 100%;
+	--color-secondary-l: 55%;
+	--color-secondary: hsl(
+		var(--color-secondary-h),
+		var(--color-secondary-s),
+		var(--color-secondary-l)
+	);
 
-  --color-success-h: 150;
-  --color-success-s: 74%;
-  --color-success-l: 60%;
-  --color-success: hsl(
-				  var(--color-success-h),
-				  var(--color-success-s),
-				  var(--color-success-l)
-  );
+	--color-success-h: 150;
+	--color-success-s: 74%;
+	--color-success-l: 60%;
+	--color-success: hsl(
+		var(--color-success-h),
+		var(--color-success-s),
+		var(--color-success-l)
+	);
 
-  --color-success-tint-1-l: 12%;
-  --color-success-tint-1: hsl(
-				  var(--color-success-h),
-				  var(--color-success-s),
-				  var(--color-success-tint-1-l)
-  );
+	--color-success-tint-1-l: 12%;
+	--color-success-tint-1: hsl(
+		var(--color-success-h),
+		var(--color-success-s),
+		var(--color-success-tint-1-l)
+	);
 
-  --color-success-tint-2-l: 3%;
-  --color-success-tint-2: hsl(
-				  var(--color-success-h),
-				  var(--color-success-s),
-				  var(--color-success-tint-2-l)
-  );
+	--color-success-tint-2-l: 3%;
+	--color-success-tint-2: hsl(
+		var(--color-success-h),
+		var(--color-success-s),
+		var(--color-success-tint-2-l)
+	);
 
-  --color-warning-h: 36;
-  --color-warning-s: 77%;
-  --color-warning-l: 43%;
-  --color-warning: hsl(
-				  var(--color-warning-h),
-				  var(--color-warning-s),
-				  var(--color-warning-l)
-  );
+	--color-warning-h: 36;
+	--color-warning-s: 77%;
+	--color-warning-l: 43%;
+	--color-warning: hsl(
+		var(--color-warning-h),
+		var(--color-warning-s),
+		var(--color-warning-l)
+	);
 
-  --color-warning-tint-1-l: 12%;
-  --color-warning-tint-1: hsl(
-				  var(--color-warning-h),
-				  var(--color-warning-s),
-				  var(--color-warning-tint-1-l)
-  );
+	--color-warning-tint-1-l: 12%;
+	--color-warning-tint-1: hsl(
+		var(--color-warning-h),
+		var(--color-warning-s),
+		var(--color-warning-tint-1-l)
+	);
 
-  --color-warning-tint-2-l: 4%;
-  --color-warning-tint-2: hsl(
-				  var(--color-warning-h),
-				  var(--color-warning-s),
-				  var(--color-warning-tint-2-l)
-  );
+	--color-warning-tint-2-l: 4%;
+	--color-warning-tint-2: hsl(
+		var(--color-warning-h),
+		var(--color-warning-s),
+		var(--color-warning-tint-2-l)
+	);
 
-  --color-danger-h: 0;
-  --color-danger-s: 88%;
-  --color-danger-l: 35%;
-  --color-danger: hsl(
-				  var(--color-danger-h),
-				  var(--color-danger-s),
-				  var(--color-danger-l)
-  );
+	--color-danger-h: 0;
+	--color-danger-s: 88%;
+	--color-danger-l: 35%;
+	--color-danger: hsl(
+		var(--color-danger-h),
+		var(--color-danger-s),
+		var(--color-danger-l)
+	);
 
-  --color-danger-tint-1-l: 8%;
-  --color-danger-tint-1: hsl(
-				  var(--color-danger-h),
-				  var(--color-danger-s),
-				  var(--color-danger-tint-1-l)
-  );
+	--color-danger-tint-1-l: 8%;
+	--color-danger-tint-1: hsl(
+		var(--color-danger-h),
+		var(--color-danger-s),
+		var(--color-danger-tint-1-l)
+	);
 
-  --color-danger-tint-2-l: 3%;
-  --color-danger-tint-2: hsl(
-				  var(--color-danger-h),
-				  var(--color-danger-s),
-				  var(--color-danger-tint-2-l)
-  );
+	--color-danger-tint-2-l: 3%;
+	--color-danger-tint-2: hsl(
+		var(--color-danger-h),
+		var(--color-danger-s),
+		var(--color-danger-tint-2-l)
+	);
 
-  --color-info-h: 220;
-  --color-info-s: 4%;
-  --color-info-l: 42%;
-  --color-info: hsl(
-				  var(--color-info-h),
-				  var(--color-info-s),
-				  var(--color-info-l)
-  );
+	--color-info-h: 220;
+	--color-info-s: 4%;
+	--color-info-l: 82%;
+	--color-info: hsl(
+		var(--color-info-h),
+		var(--color-info-s),
+		var(--color-info-l)
+	);
 
-  --color-info-tint-1-l: 12%;
-  --color-info-tint-1: hsl(
-				  var(--color-info-h),
-				  var(--color-info-s),
-				  var(--color-info-tint-1-l)
-  );
+	--color-info-tint-1-l: 12%;
+	--color-info-tint-1: hsl(
+		var(--color-info-h),
+		var(--color-info-s),
+		var(--color-info-tint-1-l)
+	);
 
-  --color-info-tint-2-l: 4%;
-  --color-info-tint-2: hsl(
-				  var(--color-info-h),
-				  var(--color-info-s),
-				  var(--color-info-tint-2-l)
-  );
+	--color-info-tint-2-l: 4%;
+	--color-info-tint-2: hsl(
+		var(--color-info-h),
+		var(--color-info-s),
+		var(--color-info-tint-2-l)
+	);
 
-  --color-grey-h: 228;
-  --color-grey-s: 10%;
-  --color-grey-l: 80%;
-  --color-grey: hsl(
-				  var(--color-grey-h),
-				  var(--color-grey-s),
-				  var(--color-grey-l)
-  );
+	--color-text-dark-h: 0;
+	--color-text-dark-s: 0%;
+	--color-text-dark-l: 100%;
+	--color-text-dark: hsl(
+		var(--color-text-dark-h),
+		var(--color-text-dark-s),
+		var(--color-text-dark-l)
+	);
 
-  --color-light-grey-h: 220;
-  --color-light-grey-s: 20%;
-  --color-light-grey-l: 88%;
-  --color-light-grey: hsl(
-				  var(--color-light-grey-h),
-				  var(--color-light-grey-s),
-				  var(--color-light-grey-l)
-  );
+	--color-text-base-h: 240;
+	--color-text-base-s: 4%;
+	--color-text-base-l: 70%;
+	--color-text-base: hsl(
+		var(--color-text-base-h),
+		var(--color-text-base-s),
+		var(--color-text-base-l)
+	);
 
-  --color-neutral-h: 228;
-  --color-neutral-s: 10%;
-  --color-neutral-l: 50%;
-  --color-neutral: hsl(
-				  var(--color-neutral-h),
-				  var(--color-neutral-s),
-				  var(--color-neutral-l)
-  );
+	--color-text-light-h: 220;
+	--color-text-light-s: 4%;
+	--color-text-light-l: 82%;
+	--color-text-light: hsl(
+		var(--color-text-light-h),
+		var(--color-text-light-s),
+		var(--color-text-light-l)
+	);
 
-  --color-text-dark-h: 0;
-  --color-text-dark-s: 0%;
-  --color-text-dark-l: 100%;
-  --color-text-dark: hsl(
-				  var(--color-text-dark-h),
-				  var(--color-text-dark-s),
-				  var(--color-text-dark-l)
-  );
+	--color-text-lighter-h: 222;
+	--color-text-lighter-s: 17%;
+	--color-text-lighter-l: 92%;
+	--color-text-lighter: hsl(
+		var(--color-text-lighter-h),
+		var(--color-text-lighter-s),
+		var(--color-text-lighter-l)
+	);
 
-  --color-text-base-h: 240;
-  --color-text-base-s: 4%;
-  --color-text-base-l: 49%;
-  --color-text-base: hsl(
-				  var(--color-text-base-h),
-				  var(--color-text-base-s),
-				  var(--color-text-base-l)
-  );
+	--color-text-xlight-h: 0;
+	--color-text-xlight-s: 0%;
+	--color-text-xlight-l: 100%;
+	--color-text-xlight: hsl(
+		var(--color-text-xlight-h),
+		var(--color-text-xlight-s),
+		var(--color-text-xlight-l)
+	);
 
-  --color-text-light-h: 220;
-  --color-text-light-s: 4%;
-  --color-text-light-l: 42%;
-  --color-text-light: hsl(
-				  var(--color-text-light-h),
-				  var(--color-text-light-s),
-				  var(--color-text-light-l)
-  );
+	--color-foreground-base-h: 220;
+	--color-foreground-base-s: 20%;
+	--color-foreground-base-l: 30%;
+	--color-foreground-base: hsl(
+		var(--color-foreground-base-h),
+		var(--color-foreground-base-s),
+		var(--color-foreground-base-l)
+	);
 
-  --color-text-lighter-h: 222;
-  --color-text-lighter-s: 17%;
-  --color-text-lighter-l: 12%;
-  --color-text-lighter: hsl(
-				  var(--color-text-lighter-h),
-				  var(--color-text-lighter-s),
-				  var(--color-text-lighter-l)
-  );
+	--color-foreground-light-h: 0;
+	--color-foreground-light-s: 0%;
+	--color-foreground-light-l: 7%;
+	--color-foreground-light: hsl(
+		var(--color-foreground-light-h),
+		var(--color-foreground-light-s),
+		var(--color-foreground-light-l)
+	);
 
-  --color-text-xlight-h: 0;
-  --color-text-xlight-s: 0%;
-  --color-text-xlight-l: 100%;
-  --color-text-xlight: hsl(
-				  var(--color-text-xlight-h),
-				  var(--color-text-xlight-s),
-				  var(--color-text-xlight-l)
-  );
+	--color-foreground-xlight-h: 0;
+	--color-foreground-xlight-s: 0%;
+	--color-foreground-xlight-l: 0%;
+	--color-foreground-xlight: hsl(
+		var(--color-foreground-xlight-h),
+		var(--color-foreground-xlight-s),
+		var(--color-foreground-xlight-l)
+	);
 
-  --color-foreground-base-h: 220;
-  --color-foreground-base-s: 20%;
-  --color-foreground-base-l: 12%;
-  --color-foreground-base: hsl(
-				  var(--color-foreground-base-h),
-				  var(--color-foreground-base-s),
-				  var(--color-foreground-base-l)
-  );
+	--color-background-dark-h: 0;
+	--color-background-dark-s: 0%;
+	--color-background-dark-l: 100%;
+	--color-background-dark: hsl(
+		var(--color-background-dark-h),
+		var(--color-background-dark-s),
+		var(--color-background-dark-l)
+	);
 
-  --color-foreground-light-h: 0;
-  --color-foreground-light-s: 0%;
-  --color-foreground-light-l: 7%;
-  --color-foreground-light: hsl(
-				  var(--color-foreground-light-h),
-				  var(--color-foreground-light-s),
-				  var(--color-foreground-light-l)
-  );
+	--color-background-base-h: 0;
+	--color-background-base-s: 0%;
+	--color-background-base-l: 10%;
+	--color-background-base: hsl(
+		var(--color-background-base-h),
+		var(--color-background-base-s),
+		var(--color-background-base-l)
+	);
 
-  --color-foreground-xlight-h: 0;
-  --color-foreground-xlight-s: 0%;
-  --color-foreground-xlight-l: 0%;
-  --color-foreground-xlight: hsl(
-				  var(--color-foreground-xlight-h),
-				  var(--color-foreground-xlight-s),
-				  var(--color-foreground-xlight-l)
-  );
+	--color-background-light-h: 220;
+	--color-background-light-s: 27%;
+	--color-background-light-l: 0%;
+	--color-background-light: hsl(
+		var(--color-background-light-h),
+		var(--color-background-light-s),
+		var(--color-background-light-l)
+	);
 
-  --color-background-dark-h: 0;
-  --color-background-dark-s: 0%;
-  --color-background-dark-l: 100%;
-  --color-background-dark: hsl(
-				  var(--color-background-dark-h),
-				  var(--color-background-dark-s),
-				  var(--color-background-dark-l)
-  );
+	--color-background-lighter-h: 0;
+	--color-background-lighter-s: 0%;
+	--color-background-lighter-l: 36%;
+	--color-background-lighter: hsl(
+		var(--color-background-lighter-h),
+		var(--color-background-lighter-s),
+		var(--color-background-lighter-l)
+	);
 
-  --color-background-base-h: 252;
-  --color-background-base-s: 71%;
-  --color-background-base-l: 99%;
-  --color-background-base: hsl(
-				  var(--color-background-base-h),
-				  var(--color-background-base-s),
-				  var(--color-background-base-l)
-  );
+	--color-background-xlight-h: 240;
+	--color-background-xlight-s: 4%;
+	--color-background-xlight-l: 19%;
+	--color-background-xlight: hsl(
+		var(--color-background-xlight-h),
+		var(--color-background-xlight-s),
+		var(--color-background-xlight-l)
+	);
 
-  --color-background-light-h: 220;
-  --color-background-light-s: 27%;
-  --color-background-light-l: 98%;
-  --color-background-light: hsl(
-				  var(--color-background-light-h),
-				  var(--color-background-light-s),
-				  var(--color-background-light-l)
-  );
+	--color-canvas-dot-h: 204;
+	--color-canvas-dot-s: 15.6%;
+	--color-canvas-dot-l: 87.5%;
+	--color-canvas-dot: hsl(
+		var(--color-canvas-dot-h),
+		var(--color-canvas-dot-s),
+		var(--color-canvas-dot-l)
+	);
 
-  --color-background-lighter-h: 220;
-  --color-background-lighter-s: 30%;
-  --color-background-lighter-l: 96%;
-  --color-background-lighter: hsl(
-				  var(--color-background-lighter-h),
-				  var(--color-background-lighter-s),
-				  var(--color-background-lighter-l)
-  );
+	--color-canvas-background-h: 90;
+	--color-canvas-background-s: 10%;
+	--color-canvas-background-l: 0%;
+	--color-canvas-background: hsl(
+		var(--color-canvas-background-h),
+		var(--color-canvas-background-s),
+		var(--color-canvas-background-l)
+	);
 
-  --color-background-xlight-h: 240;
-  --color-background-xlight-s: 4%;
-  --color-background-xlight-l: 19%;
-  --color-background-xlight: hsl(
-				  var(--color-background-xlight-h),
-				  var(--color-background-xlight-s),
-				  var(--color-background-xlight-l)
-  );
+	--color-sticky-default-background-h: 46;
+	--color-sticky-default-background-s: 100%;
+	--color-sticky-default-background-l: 12%;
+	--color-sticky-default-background: hsl(
+		var(--color-sticky-default-background-h),
+		var(--color-sticky-default-background-s),
+		var(--color-sticky-default-background-l)
+	);
+
+	--color-sticky-default-border-h: 43;
+	--color-sticky-default-border-s: 75%;
+	--color-sticky-default-border-l: 80%;
+	--color-sticky-default-border: hsl(
+		var(--color-sticky-default-border-h),
+		var(--color-sticky-default-border-s),
+		var(--color-sticky-default-border-l)
+	);
+
+	--color-json-default: #5045A1;
+	--color-json-null:  var(--color-danger);
+	--color-json-boolean: #1d8ce0;
+	--color-json-number: #1d8ce0;
+	--color-json-string: #726b9f;
+	--color-json-key: var(--color-text-dark);
+	--color-json-brackets: var(--color-text-dark);
+	--color-json-brackets-hover: #1890ff;
+	--color-json-line: #bfcbd9;
+	--color-json-highlight: hsl(226, 13%, 71%);
 
   // Generated Color Shades from 50 to 950
   // Not yet used in design system
   @each $color in ('neutral', 'success', 'warning', 'danger') {
-	@each $shade in (50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950) {
-	  --color-#{$color}-#{$shade}-l: #{math.div($shade, 10)}#{'%'};
-	  --color-#{$color}-#{$shade}: hsl(var(--color-#{$color}-h), var(--color-#{$color}-s), var(--color-#{$color}-#{$shade}-l));
+		@each $shade in (50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950) {
+			--color-#{$color}-#{$shade}-l: #{math.div($shade, 10)}#{'%'};
+			--color-#{$color}-#{$shade}: hsl(var(--color-#{$color}-h), var(--color-#{$color}-s), var(--color-#{$color}-#{$shade}-l));
+		}
 	}
-  }
 }
 
 body.theme-dark {
diff --git a/packages/design-system/theme/src/autocomplete.scss b/packages/design-system/theme/src/autocomplete.scss
index 8918538677..aa4fef994f 100644
--- a/packages/design-system/theme/src/autocomplete.scss
+++ b/packages/design-system/theme/src/autocomplete.scss
@@ -65,7 +65,7 @@
 			height: 100px;
 			line-height: 100px;
 			font-size: 20px;
-			color: #999;
+			color: var(--color-text-light);
 			@include utils.utils-vertical-center;
 
 			&:hover {
diff --git a/packages/design-system/theme/src/calendar.scss b/packages/design-system/theme/src/calendar.scss
index 16c9af63ab..4c2275f262 100644
--- a/packages/design-system/theme/src/calendar.scss
+++ b/packages/design-system/theme/src/calendar.scss
@@ -3,7 +3,7 @@
 @use "button-group";
 
 @include mixins.b(calendar) {
-	background-color: #fff;
+	background-color: var(--color-foreground-xlight);
 
 	@include mixins.e(header) {
 		display: flex;
diff --git a/packages/design-system/theme/src/common/var.scss b/packages/design-system/theme/src/common/var.scss
index e82fc39c9b..ef00d9d1de 100644
--- a/packages/design-system/theme/src/common/var.scss
+++ b/packages/design-system/theme/src/common/var.scss
@@ -17,8 +17,8 @@ $color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 
 /* Color
 -------------------------- */
-$color-white: #ffffff;
-$color-black: #000000;
+$color-white: var(--color-foreground-xlight);
+$color-black: var(--color-foreground-dark);
 
 $color-primary-light-1: function.lightness(
 				--color-primary-h,
@@ -275,7 +275,7 @@ $disabled-border-base: var(--disabled-border, var(--border-color-base));
 
 /* Icon
 -------------------------- */
-$icon-color: #666;
+$icon-color: var(--color-text-base);
 $icon-color-base: var(--color-info);
 
 /* Checkbox
@@ -412,7 +412,7 @@ $select-font-size: $font-size-base;
 $select-close-hover-color: var(--color-text-light);
 
 $select-input-color: var(--color-text-lighter);
-$select-multiple-input-color: #666;
+$select-multiple-input-color: var(--color-text-base);
 /// color||Color|0
 $select-input-focus-border-color: var(--color-secondary);
 /// fontSize||Font|1
@@ -434,7 +434,7 @@ $select-group-font-size: 12px;
 
 $select-dropdown-background: $color-white;
 $select-dropdown-shadow: $box-shadow-light;
-$select-dropdown-empty-color: #999;
+$select-dropdown-empty-color: var(--color-text-light);
 /// height||Other|4
 $select-dropdown-max-height: 274px;
 $select-dropdown-padding: 6px 0;
@@ -986,7 +986,7 @@ $datepicker-inrange-hover-background-color: var(--border-color-light);
 $datepicker-active-color: var(--color-primary);
 /// color||Color|0
 $datepicker-hover-font-color: var(--color-primary);
-$datepicker-cell-hover-color: #fff;
+$datepicker-cell-hover-color: var(--color-foreground-xlight);
 
 /* Loading
 --------------------------*/
@@ -1128,7 +1128,7 @@ $form-label-font-size: $font-size-base;
 /* Avatar
 --------------------------*/
 /// color||Color|0
-$avatar-font-color: #fff;
+$avatar-font-color: var(--color-text-xlight);
 /// color||Color|0
 $avatar-background-color: #c0c4cc;
 /// fontSize||Font Size|1
diff --git a/packages/design-system/theme/src/date-picker/picker-panel.scss b/packages/design-system/theme/src/date-picker/picker-panel.scss
index fbf001a78a..d46c7b51e3 100644
--- a/packages/design-system/theme/src/date-picker/picker-panel.scss
+++ b/packages/design-system/theme/src/date-picker/picker-panel.scss
@@ -68,7 +68,7 @@
 		font-size: 12px;
 
 		&[disabled] {
-			color: #cccccc;
+			color: var(--color-text-lighter);
 			cursor: not-allowed;
 		}
 	}
diff --git a/packages/design-system/theme/src/image.scss b/packages/design-system/theme/src/image.scss
index a60c853beb..67acaa14c2 100644
--- a/packages/design-system/theme/src/image.scss
+++ b/packages/design-system/theme/src/image.scss
@@ -73,7 +73,7 @@
 		width: 40px;
 		height: 40px;
 		font-size: 24px;
-		color: #fff;
+		color: var(--color-foreground-xlight);
 		background-color: #606266;
 	}
 
@@ -93,7 +93,7 @@
 		height: 44px;
 		padding: 0 23px;
 		background-color: #606266;
-		border-color: #fff;
+		border-color: var(--color-foreground-xlight);
 		border-radius: 22px;
 
 		@include mixins.e(actions__inner) {
@@ -102,7 +102,7 @@
 			text-align: justify;
 			cursor: default;
 			font-size: 23px;
-			color: #fff;
+			color: var(--color-foreground-xlight);
 			display: flex;
 			align-items: center;
 			justify-content: space-around;
@@ -115,9 +115,9 @@
 		width: 44px;
 		height: 44px;
 		font-size: 24px;
-		color: #fff;
+		color: var(--color-foreground-xlight);
 		background-color: #606266;
-		border-color: #fff;
+		border-color: var(--color-foreground-xlight);
 		left: 40px;
 	}
 
@@ -127,9 +127,9 @@
 		width: 44px;
 		height: 44px;
 		font-size: 24px;
-		color: #fff;
+		color: var(--color-foreground-xlight);
 		background-color: #606266;
-		border-color: #fff;
+		border-color: var(--color-foreground-xlight);
 		right: 40px;
 		text-indent: 2px;
 	}
diff --git a/packages/design-system/theme/src/menu.scss b/packages/design-system/theme/src/menu.scss
index 2aa1043375..730dd8b582 100644
--- a/packages/design-system/theme/src/menu.scss
+++ b/packages/design-system/theme/src/menu.scss
@@ -68,7 +68,7 @@
 
 			&:not(.is-disabled):hover,
 			&:not(.is-disabled):focus {
-				background-color: #fff;
+				background-color: var(--color-foreground-xlight);
 			}
 		}
 		& > .el-submenu {
@@ -96,7 +96,7 @@
 				color: var(--color-text-light);
 
 				&:hover {
-					background-color: #fff;
+					background-color: var(--color-foreground-xlight);
 				}
 			}
 			& .el-submenu__icon-arrow {
diff --git a/packages/design-system/theme/src/mixins/mixins.scss b/packages/design-system/theme/src/mixins/mixins.scss
index b13964a0bd..726cbacb58 100644
--- a/packages/design-system/theme/src/mixins/mixins.scss
+++ b/packages/design-system/theme/src/mixins/mixins.scss
@@ -21,7 +21,7 @@
  -------------------------- */
 @mixin scroll-bar {
 	$scrollbar-thumb-background: #b4bccc;
-	$scrollbar-track-background: #fff;
+	$scrollbar-track-background: var(--color-foreground-xlight);
 
 	&::-webkit-scrollbar {
 		z-index: 11;
diff --git a/packages/design-system/theme/src/table.scss b/packages/design-system/theme/src/table.scss
index 55f37a3d8d..daf5fa801c 100644
--- a/packages/design-system/theme/src/table.scss
+++ b/packages/design-system/theme/src/table.scss
@@ -44,7 +44,7 @@
 	@include mixins.e(expand-icon) {
 		position: relative;
 		cursor: pointer;
-		color: #666;
+		color: var(--color-text-base);
 		font-size: 12px;
 		transition: transform 0.2s ease-in-out;
 		height: 20px;
@@ -461,12 +461,12 @@
 		left: 7px;
 
 		&.ascending {
-			border-bottom-color: var(--color-text-lighter);
+			border-bottom-color: var(--color-text-light);
 			top: 5px;
 		}
 
 		&.descending {
-			border-top-color: var(--color-text-lighter);
+			border-top-color: var(--color-text-light);
 			bottom: 7px;
 		}
 	}
diff --git a/packages/design-system/theme/src/tabs.scss b/packages/design-system/theme/src/tabs.scss
index c9adeac71d..b5bb3ccd50 100644
--- a/packages/design-system/theme/src/tabs.scss
+++ b/packages/design-system/theme/src/tabs.scss
@@ -405,7 +405,7 @@
 			}
 			.el-tabs__item.is-left.is-active {
 				border: 1px solid var(--border-color-base);
-				border-right-color: #fff;
+				border-right-color: var(--color-foreground-xlight);
 				border-left: none;
 				border-bottom: none;
 
@@ -477,7 +477,7 @@
 			}
 			.el-tabs__item.is-right.is-active {
 				border: 1px solid var(--border-color-base);
-				border-left-color: #fff;
+				border-left-color: var(--color-foreground-xlight);
 				border-right: none;
 				border-bottom: none;
 
diff --git a/packages/design-system/theme/src/tree.scss b/packages/design-system/theme/src/tree.scss
index eea1c38453..df5495af4f 100644
--- a/packages/design-system/theme/src/tree.scss
+++ b/packages/design-system/theme/src/tree.scss
@@ -48,7 +48,7 @@
 	@include mixins.when(drop-inner) {
 		> .el-tree-node__content .el-tree-node__label {
 			background-color: var(--color-primary);
-			color: #fff;
+			color: var(--color-foreground-xlight);
 		}
 	}
 
diff --git a/packages/design-system/theme/src/upload.scss b/packages/design-system/theme/src/upload.scss
index 8f5ee22656..c4f7ecbe5a 100644
--- a/packages/design-system/theme/src/upload.scss
+++ b/packages/design-system/theme/src/upload.scss
@@ -60,7 +60,7 @@
 }
 
 @include mixins.b(upload-dragger) {
-	background-color: #fff;
+	background-color: var(--color-foreground-xlight);
 	border: 1px dashed #d9d9d9;
 	border-radius: 6px;
 	box-sizing: border-box;
@@ -276,7 +276,7 @@
 
 		.el-upload-list__item {
 			overflow: hidden;
-			background-color: #fff;
+			background-color: var(--color-foreground-xlight);
 			border: 1px solid #c0ccda;
 			border-radius: 6px;
 			box-sizing: border-box;
@@ -339,7 +339,7 @@
 			top: 0;
 			cursor: default;
 			text-align: center;
-			color: #fff;
+			color: var(--color-foreground-xlight);
 			opacity: 0;
 			font-size: 20px;
 			background-color: rgba(0, 0, 0, 0.5);
@@ -391,7 +391,7 @@
 		.el-upload-list__item {
 			overflow: hidden;
 			z-index: 0;
-			background-color: #fff;
+			background-color: var(--color-foreground-xlight);
 			border: 1px solid #c0ccda;
 			border-radius: 6px;
 			box-sizing: border-box;
@@ -462,7 +462,7 @@
 			background: #13ce66;
 			text-align: center;
 			transform: rotate(45deg);
-			box-shadow: 0 1px 1px #ccc;
+			box-shadow: 0 1px 1px var(--color-text-light);
 
 			i {
 				font-size: 12px;
@@ -510,7 +510,7 @@
 			font-size: 12px;
 			margin-top: 11px;
 			transform: rotate(-45deg);
-			color: #fff;
+			color: var(--color-foreground-xlight);
 		}
 	}
 
diff --git a/packages/editor-ui/src/components/BinaryDataDisplay.vue b/packages/editor-ui/src/components/BinaryDataDisplay.vue
index 458ede49bb..0bc125b75c 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplay.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplay.vue
@@ -117,7 +117,7 @@ export default mixins(
 	}
 
 	.binary-data {
-		background-color: #fff;
+		background-color: var(--color-foreground-xlight);
 
 		&.image {
 			max-height: calc(100% - 1em);
diff --git a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
index d15e7913f6..0caa82c2ff 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
@@ -68,7 +68,7 @@ export default mixins(
 <style lang="scss">
 
 .binary-data {
-    background-color: #fff;
+    background-color: var(--color-foreground-xlight);
 
     &.image {
         max-height: calc(100% - 1em);
diff --git a/packages/editor-ui/src/components/CollectionsCarousel.vue b/packages/editor-ui/src/components/CollectionsCarousel.vue
index 0c5d7dde1a..5022803570 100644
--- a/packages/editor-ui/src/components/CollectionsCarousel.vue
+++ b/packages/editor-ui/src/components/CollectionsCarousel.vue
@@ -142,7 +142,9 @@ export default mixins(genericHelpers).extend({
 
 	&:after {
 		left: 27px;
-		background: linear-gradient(270deg, rgba(255, 255, 255, 0.25) 0%, rgba(248, 249, 251, 1) 86%);
+		background: linear-gradient(270deg,
+			hsla(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l), 50%),
+			hsla(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l), 100%));
 	}
 }
 
@@ -151,7 +153,9 @@ export default mixins(genericHelpers).extend({
 	right: -30px;
 	&:after {
 		right: 27px;
-		background: linear-gradient(270deg,rgba(248, 249, 251, 1) 25%, rgba(255, 255, 255, 0.25) 100%);
+		background: linear-gradient(90deg,
+			hsla(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l), 50%),
+			hsla(var(--color-background-light-h), var(--color-background-light-s), var(--color-background-light-l), 100%));
 	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/Error/NodeErrorView.vue b/packages/editor-ui/src/components/Error/NodeErrorView.vue
index b36fdeafbf..af4cc6fcc1 100644
--- a/packages/editor-ui/src/components/Error/NodeErrorView.vue
+++ b/packages/editor-ui/src/components/Error/NodeErrorView.vue
@@ -259,7 +259,7 @@ details[open] {
 }
 
 .el-divider__text {
-	background-color: #f9f9f9;
+	background-color: var(--color-background-light);
 }
 
 .box-card {
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index f5c53d7150..915555ca7f 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -803,11 +803,11 @@ export default mixins(
 <style lang="scss">
 
 .currently-running {
-	background-color: $--color-primary-light !important;
+	background-color: var(--color-primary-tint-3) !important;
 }
 
 .el-table tr:hover.currently-running td {
-	background-color: darken($--color-primary-light, 3% ) !important;
+	background-color: var(--color-primary-tint-2) !important;
 }
 
 </style>
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
index 9766005e0b..b91690f937 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
@@ -58,7 +58,7 @@ div.el-input {
 
 	&:hover {
 		input:not(:focus) {
-			border: $--custom-input-border-shadow
+			border: 1px solid var(--color-text-lighter);
 		}
 	}
 }
diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue
index 04ab433199..c4813d4202 100644
--- a/packages/editor-ui/src/components/ExpressionEdit.vue
+++ b/packages/editor-ui/src/components/ExpressionEdit.vue
@@ -211,7 +211,7 @@ export default mixins(
 	}
 
 	.right-side {
-		background-color: #f9f9f9;
+		background-color: var(--color-background-light);
 		border-top-right-radius: 8px;
 		border-bottom-right-radius: 8px;
 	}
@@ -222,7 +222,7 @@ export default mixins(
 	border-top-left-radius: 8px;
 
 	background-color: var(--color-background-base);
-	color: #555;
+	color: var(--color-text-dark);
 	border-bottom: 1px solid $--color-primary;
 	margin-bottom: 1em;
 
diff --git a/packages/editor-ui/src/components/ExpressionInput.vue b/packages/editor-ui/src/components/ExpressionInput.vue
index 874ba9bcbd..d68e45c7d8 100644
--- a/packages/editor-ui/src/components/ExpressionInput.vue
+++ b/packages/editor-ui/src/components/ExpressionInput.vue
@@ -304,8 +304,8 @@ export default mixins(
 
 .variable-value {
 	font-weight: bold;
-	color: #000;
-	background-color: #c0c0c0;
+	color: var(--color-text-dark);
+	background-color: var(--color-text-base);
 	padding: 3px;
 	border-radius: 3px;
 }
@@ -315,21 +315,21 @@ export default mixins(
 	left: -3px;
 	top: -8px;
 	display: none;
-	color: #fff;
+	color: var(--color-text-xlight);
 	font-weight: bold;
 	padding: 2px 4px;
 }
 
 .variable-wrapper:hover .variable-delete {
 	display: inline;
-	background-color: #AA2200;
+	background-color: var(--color-danger);
 	border-radius: 5px;
 }
 
 .variable {
 	font-weight: bold;
 	color: #000;
-	background-color: #c0c0c0;
+	background-color: var(--color-text-base);
 	padding: 3px;
 	border-radius: 3px;
 	margin: 0 2px;
@@ -339,11 +339,11 @@ export default mixins(
 	}
 
 	&.invalid {
-		background-color: #e25e5e;
+		background-color: var(--color-danger);
 	}
 
 	&.valid {
-		background-color: #37ac37;
+		background-color: var(--color-success);
 	}
 
 }
diff --git a/packages/editor-ui/src/components/HoverableNodeIcon.vue b/packages/editor-ui/src/components/HoverableNodeIcon.vue
index 8f50471441..ea5ab6922d 100644
--- a/packages/editor-ui/src/components/HoverableNodeIcon.vue
+++ b/packages/editor-ui/src/components/HoverableNodeIcon.vue
@@ -92,7 +92,7 @@ export default Vue.extend({
 				'line-height': this.size + 'px',
 				'border-radius': this.circle ? '50%' : '2px',
 				...(this.disabled && {
-					color: '#ccc',
+					color: 'var(--color-text-light)',
 					'-webkit-filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
 					filter: 'contrast(40%) brightness(1.5) grayscale(100%)',
 				}),
diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index 4097b89044..c76322fb66 100644
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -57,7 +57,7 @@ export default mixins(
 .main-header {
 	position: fixed;
 	top: 0;
-	background-color: #fff;
+	background-color: var(--color-background-xlight);
 	height: 65px;
 	width: 100%;
 	box-sizing: border-box;
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 62721a7729..886aa265ce 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -647,7 +647,7 @@ export default mixins(
 		height: 35px;
 		line-height: 35px;
 		color: $--custom-dialog-text-color;
-		--menu-item-hover-fill: #fff0ef;
+		--menu-item-hover-fill: var(--color-primary-tint-3);
 
 		.item-title {
 			position: absolute;
@@ -667,7 +667,7 @@ export default mixins(
 	.el-menu {
 		border: none;
 		font-size: 14px;
-		--menu-item-hover-fill: #fff0ef;
+		--menu-item-hover-fill: var(--color-primary-tint-3);
 
 		.el-menu--collapse {
 			width: 75px;
@@ -718,7 +718,7 @@ export default mixins(
 
 	.el-menu-item {
 		a {
-			color: #666;
+			color: var(--color-text-base);
 
 			&.primary-item {
 				color: $--color-primary;
@@ -758,7 +758,7 @@ export default mixins(
 	line-height: 24px;
 	height: 20px;
 	width: 20px;
-	background-color: #fff;
+	background-color: var(--color-foreground-xlight);
 	border: none;
 	border-radius: 15px;
 
@@ -789,7 +789,7 @@ export default mixins(
 	top: -3px;
 	left: 5px;
 	font-weight: bold;
-	color: #fff;
+	color: var(--color-foreground-xlight);
 	text-decoration: none;
 }
 
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index f0ef115173..9f5a20e44b 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -485,7 +485,7 @@ export default mixins(
 			background-color: var(--color-background-xlight);
 
 			&.executing {
-				background-color: $--color-primary-light !important;
+				background-color: var(--color-primary-tint-3) !important;
 
 				.node-executing-info {
 					display: inline-block;
@@ -515,7 +515,7 @@ export default mixins(
 			font-size: 3.75em;
 			line-height: 1.65em;
 			text-align: center;
-			color: rgba($--color-primary, 0.7);
+			color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.7);
 		}
 
 		.node-icon {
diff --git a/packages/editor-ui/src/components/NodeCreator/SearchBar.vue b/packages/editor-ui/src/components/NodeCreator/SearchBar.vue
index 531e608e72..4d007a591f 100644
--- a/packages/editor-ui/src/components/NodeCreator/SearchBar.vue
+++ b/packages/editor-ui/src/components/NodeCreator/SearchBar.vue
@@ -88,6 +88,8 @@ export default mixins(externalHooks).extend({
 		outline: none;
 		font-size: 18px;
 		-webkit-appearance: none;
+		background-color: var(--color-background-xlight);
+		color: var(--color-text-dark);
 
 		&::placeholder,
 		&::-webkit-input-placeholder {
@@ -126,4 +128,4 @@ export default mixins(externalHooks).extend({
 		justify-content: center;
 	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/editor-ui/src/components/NodeIcon.vue b/packages/editor-ui/src/components/NodeIcon.vue
index 721177242d..6ff2e910a0 100644
--- a/packages/editor-ui/src/components/NodeIcon.vue
+++ b/packages/editor-ui/src/components/NodeIcon.vue
@@ -55,7 +55,7 @@ export default Vue.extend({
 				'line-height': this.size + 'px',
 				'border-radius': this.circle ? '50%': '2px',
 				...(this.disabled && {
-					color: '#ccc',
+					color: 'var(--color-text-light)',
 					'-webkit-filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
 					'filter': 'contrast(40%) brightness(1.5) grayscale(100%)',
 				}),
diff --git a/packages/editor-ui/src/components/NodeWebhooks.vue b/packages/editor-ui/src/components/NodeWebhooks.vue
index 6b2e83568d..f92210155e 100644
--- a/packages/editor-ui/src/components/NodeWebhooks.vue
+++ b/packages/editor-ui/src/components/NodeWebhooks.vue
@@ -113,7 +113,7 @@ export default mixins(
 .webhoooks {
 	padding-bottom: var(--spacing-xs);
 	margin: var(--spacing-xs) 0;
-	border-bottom: 1px solid #ccc;
+	border-bottom: 1px solid var(--color-text-lighter);
 
 	.headline {
 		color: $--color-primary;
@@ -139,7 +139,7 @@ export default mixins(
 	border-radius: 2px;
 	font-size: var(--font-size-2xs);
 	font-weight: var(--font-weight-bold);
-	color: #fff;
+	color: var(--color-foreground-xlight);
 }
 
 .minimize-icon {
@@ -192,7 +192,7 @@ export default mixins(
 	white-space: normal;
 	overflow: visible;
 	text-overflow: initial;
-	color: #404040;
+	color: var(--color-text-dark);
 	text-align: left;
 	direction: ltr;
 	word-break: break-all;
@@ -202,7 +202,7 @@ export default mixins(
 	line-height: 1.5;
 	position: relative;
 	margin-top: var(--spacing-xs);
-	background-color: #fff;
+	background-color: var(--color-foreground-xlight);
 	border-radius: 3px;
 }
 </style>
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 7ba1b7efe6..9e65a9e5de 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -1067,7 +1067,7 @@ export default mixins(
 }
 
 .el-dropdown {
-	color: #999;
+	color: var(--color-text-light);
 }
 
 .list-option {
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 452a8a80aa..bc89d73dab 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -361,7 +361,7 @@ export default mixins(
 	}
 
 	.parameter-notice {
-		background-color: #fff5d3;
+		background-color: var(--color-warning-tint-2);
 		color: $--custom-font-black;
 		margin: 0.3em 0;
 		padding: 0.7em;
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 2c44aaf36b..3f4cf326dc 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1447,7 +1447,7 @@ export default mixins(
 	display: inline-block;
 	width: 300px;
 	overflow: hidden;
-	background-color: #fff;
+	background-color: var(--color-foreground-xlight);
 	margin-right: var(--spacing-s);
 	margin-bottom: var(--spacing-s);
 	border-radius: var(--border-radius-base);
@@ -1461,7 +1461,7 @@ export default mixins(
 	font-size: 1.2em;
 	padding-bottom: 0.5em;
 	margin-bottom: 0.5em;
-	border-bottom: 1px solid #ccc;
+	border-bottom: 1px solid var(--color-text-light);
 }
 
 .binaryButtonContainer {
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index e478ddfb85..8a3b340bda 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -308,7 +308,7 @@ $--max-input-height: 60px;
 
 	li {
 		height: $--item-height;
-		background-color: white;
+		background-color: var(--color-foreground-xlight);
 		padding: $--item-padding;
 		margin: 0;
 		line-height: $--item-line-height;
diff --git a/packages/editor-ui/src/n8n-theme-variables.scss b/packages/editor-ui/src/n8n-theme-variables.scss
index e372d47a01..864c70a82b 100644
--- a/packages/editor-ui/src/n8n-theme-variables.scss
+++ b/packages/editor-ui/src/n8n-theme-variables.scss
@@ -1,57 +1,41 @@
 // Primary Theme Color
-$--color-primary: #ff6d5a;
-$--color-primary-light: #fbebed;
+$--color-primary: var(--color-primary);
 
 // Dialog
-$--custom-dialog-text-color: #666;
-$--custom-dialog-background: #fff;
+$--custom-dialog-text-color: var(--color-text-dark);
+$--custom-dialog-background: var(--color-background-xlight);
 
-$--custom-font-black: #000;
-$--custom-font-dark: #595e67;
-$--custom-font-light: #777;
-$--custom-font-very-light: #999;
+$--custom-font-black: var(--color-text-dark);
+$--custom-font-dark: var(--color-text-dark);
+$--custom-font-light: var(--color-text-light);
+$--custom-font-very-light: var(--color-text-light);
 
-$--custom-header-background: #384d5b;
-
-$--custom-expression-text: #996688;
-$--custom-expression-background: #f7f5ff;
-
-$--custom-window-sidebar-top : #fff5f2;
+$--custom-expression-text: var(--color-secondary);
+$--custom-expression-background: var(--color-background-lighter);
 
 // Badge
-$--badge-danger-color: #f45959;
-$--badge-danger-background-color: #fef0f0;
-$--badge-danger-border-color: #fde2e2;
-$--badge-warning-background-color: rgba(255, 229, 100, 0.3);
-$--badge-warning-color: #6b5900;
+$--badge-danger-color: var(--color-danger);
+$--badge-danger-background-color: var(--color-primary-tint-3);
+$--badge-danger-border-color: var(--color-primary-tint-2);
+$--badge-warning-background-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), .3);
+$--badge-warning-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), .3);;
+$--badge-warning-color: var(--color-text-dark);
 
 // Warning tooltip
-$--warning-tooltip-color: #ff8080;
-
-// Table
-$--custom-table-background-main: $--custom-header-background;
-$--custom-table-background-stripe-color: #f6f6f6;
-$--custom-table-background-hover-color: #e9f0f4;
-
-$--custom-input-background: #f0f0f0;
-$--custom-input-background-disabled: #ccc;
-$--custom-input-font: #333;
-$--custom-input-border-color: #dcdfe6;
-$--custom-input-font-disabled: #555;
-$--custom-input-border-shadow: 1px solid $--custom-input-border-color;
+$--warning-tooltip-color: var(--color-danger);
 
 $--header-height: 65px;
 
 // sidebar
 $--sidebar-width: 65px;
 $--sidebar-expanded-width: 200px;
-$--sidebar-inactive-color: #909399;
+$--sidebar-inactive-color: var(--color-foreground-xdark);
 $--sidebar-active-color: $--color-primary;
 
 // gifts notification
 $--gift-notification-active-color: $--color-primary;
 $--gift-notification-inner-color: $--color-primary;
-$--gift-notification-outer-color: #fff;
+$--gift-notification-outer-color: var(--color-text-xlight);
 
 // based on element.io breakpoints
 $--breakpoint-2xs: 600px;
@@ -61,48 +45,47 @@ $--breakpoint-md: 1200px;
 $--breakpoint-lg: 1920px;
 
 // tags
-$--tag-background-color: #dce1e9;
-$--tag-text-color: #3d3f46;
-$--tag-close-background-color: #717782;
-$--tag-close-background-hover-color: #3d3f46;
+$--tag-background-color: var(--color-foreground-base);
+$--tag-text-color: var(--color-text-dark);
+$--tag-close-background-color: var(--color-text-light);
+$--tag-close-background-hover-color: var(--color-text-dark);
 
 // Node creator
 $--node-creator-width: 385px;
-$--node-creator-text-color: #555;
-$--node-creator-select-background-color: #f2f4f8;
-$--node-creator-background-color: #fff;
-$--node-creator-search-background-color: #fff;
-$--node-creator-border-color: #dbdfe7;
-$--node-creator-item-hover-border-color: #8d939c;
-$--node-creator-arrow-color: #8d939c;
-$--node-creator-no-results-background-color: #f8f9fb;
-$--node-creator-close-button-color: #fff;
-$--node-creator-search-clear-background-color: #8d939c;
-$--node-creator-search-clear-background-color-hover: #3d3f46;
-$--node-creator-search-placeholder-color: #909399;
-$--node-creator-subcategory-panel-header-bacground-color: #f2f4f8;
-$--node-creator-description-color: #7d7d87;
+$--node-creator-text-color: var(--color-text-dark);
+$--node-creator-select-background-color: var(--color-background-base);
+$--node-creator-background-color: var(--color-background-xlight);
+$--node-creator-search-background-color: var(--color-background-xlight);
+$--node-creator-border-color: var(--color-foreground-base);
+$--node-creator-item-hover-border-color: var(--color-text-light);
+$--node-creator-arrow-color: var(--color-text-light);
+$--node-creator-no-results-background-color: var(--color-background-xlight);
+$--node-creator-close-button-color: var(--color-text-xlight);
+$--node-creator-search-clear-background-color: var(--color-text-light);
+$--node-creator-search-clear-background-color-hover: var(--color-text-base);
+$--node-creator-search-placeholder-color: var(--color-text-light);
+$--node-creator-subcategory-panel-header-bacground-color: var(--color-background-base);
+$--node-creator-description-color: var(--color-text-base);
 
 // trigger icon
-$--trigger-icon-border-color: #dcdfe6;
-$--trigger-icon-background-color: #fff;
+$--trigger-icon-border-color: var(--color-text-lighter);
+$--trigger-icon-background-color: var(--color-background-xlight);
 
 // drawer
-$--drawer-background-color: #fff;
+$--drawer-background-color: var(--color-background-xlight);
 
 // updates-panel
 $--updates-panel-info-url-color: $--color-primary;
-$--updates-panel-border: 1px #dbdfe7 solid;
-$--updates-panel-dark-background-color: #f8f9fb;
-$--updates-panel-description-text-color: #7d7d87;
-$--updates-panel-text-color: #555;
+$--updates-panel-border: var(--border-base);
+$--updates-panel-dark-background-color: var(--color-background-lighter);
+$--updates-panel-description-text-color: var(--color-text-base);
+$--updates-panel-text-color: var(--color-text-dark);
 
 // versions card
-$--version-card-name-text-color: #666;
-$--version-card-background-color: #fff;
-$--version-card-border: 1px #dbdfe7 solid;
-$--version-card-description-text-color: #7d7d87;
-$--version-card-release-date-text-color: #909399;
-$--version-card-box-shadow-color: rgba(109, 48, 40, 0.07);
-
+$--version-card-name-text-color: var(--color-text-base);
+$--version-card-background-color: var(--color-background-xlight);
+$--version-card-border: var(--border-base);
+$--version-card-description-text-color: var(--color-text-base);
+$--version-card-release-date-text-color: var(--color-foreground-xdark);
+$--version-card-box-shadow-color: hsla(var(--color-background-dark-h), var(--color-background-dark-s), var(--color-background-dark-l), .07);
 
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index c44517d37b..04f2c0b698 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -34,8 +34,8 @@
 			position: absolute;
 			top: 0;
 			right: -50px;
-			color: #fff;
-			background-color: $--custom-table-background-main;
+			color: var(--color-foreground-xlight);
+			background-color: var(--color-background-dark);
 			border-radius: 0 18px 18px 0;
 			z-index: 110;
 			font-size: 1.7em;
@@ -44,7 +44,7 @@
 			height: 50px;
 			width: 50px;
 			.el-dialog__close {
-				color: #fff;
+				color: var(--color-foreground-xlight);
 				font-weight: 400;
 			}
 			.el-dialog__close:hover {
@@ -83,31 +83,31 @@
 // Table
 .el-table {
 	thead th {
-		color: #fff;
-		background-color: $--custom-table-background-main;
+		color: var(--color-text-base);
+		background-color: var(--color-background-base);
 	}
 	tr {
-		color: #555;
+		color: var(--color-text-dark);
 
 		td {
 			border: none;
 		}
 	}
 	.tr {
-		color: #555;
+		color: var(--color-text-dark);
 	}
 }
 .el-table--striped {
 	.el-table__body {
 		tr.el-table__row--striped {
-			background-color: $--custom-table-background-stripe-color;
+			background-color: var(--color-background-light);
 			td {
 				background: none;
 			}
 		}
 		tr.el-table__row:hover,
 		tr.el-table__row:hover > td {
-			background-color: $--custom-table-background-hover-color;
+			background-color: var(--color-primary-tint-3);
 		}
 	}
 }
@@ -127,7 +127,7 @@
 
 // Loading Indicator
 .el-loading-mask {
-	background-color: #fff;
+	background-color: var(--color-foreground-xlight);
 	opacity: 0.8;
 }
 
@@ -137,15 +137,15 @@
 .el-pagination .btn-prev,
 .el-pagination .btn-next {
 	background: none;
-	color: #555;
+	color: var(--color-text-dark);
 }
 .el-pagination button:disabled {
 	background: none;
-	color: $--custom-input-background-disabled;
+	color: var(--color-text-lighter);
 }
 .el-pager li.btn-quicknext,
 .el-pager li.btn-quickprev {
-	color: #555;
+	color: var(--color-text-dark);
 }
 
 // Notification
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index f44c59d4f1..e2c1e9a5a0 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -3260,7 +3260,7 @@ export default mixins(
 }
 
 .drop-add-node-label {
-	color: #555;
+	color: var(--color-text-dark);
 	font-weight: 600;
 	font-size: 0.8em;
 	text-align: center;