diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index 6e9fe4571c..ee74559d47 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -277,6 +277,24 @@
 		var(--color-background-xlight-l)
 	);
 
+	--color-canvas-dot-h: 204;
+	--color-canvas-dot-s: 13.2%;
+	--color-canvas-dot-l: 85.1%;
+	--color-canvas-dot: hsl(
+		var(--color-canvas-dot-h),
+		var(--color-canvas-dot-s),
+		var(--color-canvas-dot-l)
+	);
+
+	--color-canvas-background-h: 260;
+	--color-canvas-background-s: 100%;
+	--color-canvas-background-l: 99.4%;
+	--color-canvas-background: hsl(
+		var(--color-canvas-background-h),
+		var(--color-canvas-background-s),
+		var(--color-canvas-background-l)
+	);
+
 	--border-radius-xlarge: 12px;
 	--border-radius-large: 8px;
 	--border-radius-base: 4px;
diff --git a/packages/editor-ui/src/n8n-theme-variables.scss b/packages/editor-ui/src/n8n-theme-variables.scss
index 07ad2ea57d..22069e3ab8 100644
--- a/packages/editor-ui/src/n8n-theme-variables.scss
+++ b/packages/editor-ui/src/n8n-theme-variables.scss
@@ -28,8 +28,6 @@ $--badge-warning-color: #6b5900;
 // Warning tooltip
 $--warning-tooltip-color: #ff8080;
 
-$--custom-node-view-background : #FDFCFF;
-
 // Table
 $--custom-table-background-main: $--custom-header-background;
 $--custom-table-background-stripe-color: #f6f6f6;
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index cdcf0e531a..9afa036f2f 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -4,7 +4,7 @@
 
 
 body {
-	background-color: $--custom-node-view-background;
+	background-color: var(--color-canvas-background);
 }
 
 .clickable {
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 07dea2dd8a..6d6027c398 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -396,9 +396,10 @@ export default mixins(
 					'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`,
 				};
 				if (squareSize > 10.5) {
+					const dotColor = getStyleTokenValue('--color-canvas-dot');
 					return {
 						...styles,
-						'background-image': `radial-gradient(circle at ${dotPosition}px ${dotPosition}px, #D4DADE ${dotSize}px, transparent 0)`,
+						'background-image': `radial-gradient(circle at ${dotPosition}px ${dotPosition}px, ${dotColor} ${dotSize}px, transparent 0)`,
 					};
 				}
 				return styles;
@@ -1430,7 +1431,7 @@ export default mixins(
 					Endpoint: ['Dot', { radius: 5 }],
 					DragOptions: { cursor: 'pointer', zIndex: 5000 },
 					PaintStyle: { strokeWidth: 2, stroke: getStyleTokenValue('--color-foreground-dark')},
-					HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 },
+					HoverPaintStyle: { stroke: getStyleTokenValue('--color-primary'), lineWidth: 4 },
 					ConnectionOverlays: CONNECTOR_ARROW_OVERLAYS,
 					Container: '#node-view',
 				});
@@ -2753,7 +2754,7 @@ export default mixins(
 
 .connection-output-items-label {
 	border-radius: 7px;
-	background-color: rgba( $--custom-node-view-background, 1 );
+	background-color: var(--color-canvas-background);
 	font-size: 0.7em;
 	font-weight: var(--font-weight-regular);
 	line-height: 1.3em;
@@ -2787,7 +2788,7 @@ export default mixins(
 
 .node-input-endpoint-label,
 .node-output-endpoint-label {
-	background-color: $--custom-node-view-background;
+	background-color: var(--color-canvas-background);
 	border-radius: 7px;
 	font-size: 0.7em;
 	padding: 2px;