diff --git a/packages/design-system/src/components/N8nButton/Button.scss b/packages/design-system/src/components/N8nButton/Button.scss
index 7458dc6377e25..40ad0a7997989 100644
--- a/packages/design-system/src/components/N8nButton/Button.scss
+++ b/packages/design-system/src/components/N8nButton/Button.scss
@@ -53,7 +53,7 @@
 		}
 	}
 
-	&:focus {
+	&:focus:not(:active, .active) {
 		color: $button-focus-font-color unquote($important);
 		border-color: $button-focus-border-color unquote($important);
 		background-color: $button-focus-background-color unquote($important);
@@ -119,16 +119,16 @@
 	--button-background-color: var(--color-button-secondary-background);
 
 	--button-hover-font-color: var(--color-button-secondary-hover-active-focus-font);
-	--button-hover-border-color: var(--color-button-secondary-hover-active-border);
+	--button-hover-border-color: var(--color-button-secondary-hover-active-focus-border);
 	--button-hover-background-color: var(--color-button-secondary-hover-background);
 
 	--button-active-font-color: var(--color-button-secondary-hover-active-focus-font);
-	--button-active-border-color: var(--color-button-secondary-hover-active-border);
-	--button-active-background-color: var(--color-button-secondary-active-background);
+	--button-active-border-color: var(--color-button-secondary-hover-active-focus-border);
+	--button-active-background-color: var(--color-button-secondary-active-focus-background);
 
 	--button-focus-font-color: var(--color-button-secondary-hover-active-focus-font);
-	--button-focus-border-color: var(--color-button-secondary-border);
-	--button-focus-background-color: var(--color-button-secondary-background);
+	--button-focus-border-color: var(--color-button-secondary-hover-active-focus-border);
+	--button-focus-background-color: var(--color-button-secondary-active-focus-background);
 	--button-focus-outline-color: var(--color-button-secondary-focus-outline);
 
 	--button-disabled-font-color: var(--color-button-secondary-disabled-font);
diff --git a/packages/design-system/src/css/_primitives.scss b/packages/design-system/src/css/_primitives.scss
index fe02c267e3c2a..57cc87f580bce 100644
--- a/packages/design-system/src/css/_primitives.scss
+++ b/packages/design-system/src/css/_primitives.scss
@@ -25,7 +25,9 @@
 	--prim-gray-25: hsl(var(--prim-gray-h), 50%, 97.5%);
 	--prim-gray-10: hsl(var(--prim-gray-h), 50%, 99%);
 	--prim-gray-0-alpha-075: hsla(var(--prim-gray-h), 50%, 100%, 0.75);
+	--prim-gray-0-alpha-030: hsla(var(--prim-gray-h), 50%, 100%, 0.3);
 	--prim-gray-0-alpha-025: hsla(var(--prim-gray-h), 50%, 100%, 0.25);
+	--prim-gray-0-alpha-010: hsla(var(--prim-gray-h), 50%, 100%, 0.1);
 	--prim-gray-0: hsl(var(--prim-gray-h), 50%, 100%);
 
 	// Color Primary
@@ -54,6 +56,18 @@
 		var(--prim-color-primary-l),
 		0.1
 	);
+	--prim-color-primary-alpha-035: hsla(
+		var(--prim-color-primary-h),
+		var(--prim-color-primary-s),
+		var(--prim-color-primary-l),
+		0.35
+	);
+	--prim-color-primary-alpha-050: hsla(
+		var(--prim-color-primary-h),
+		var(--prim-color-primary-s),
+		var(--prim-color-primary-l),
+		0.5
+	);
 	--prim-color-primary-tint-100: hsl(
 		var(--prim-color-primary-h),
 		var(--prim-color-primary-s),
@@ -69,6 +83,11 @@
 		var(--prim-color-primary-s),
 		calc(var(--prim-color-primary-l) + 25%)
 	);
+	--prim-color-primary-tint-270: hsl(
+		var(--prim-color-primary-h),
+		var(--prim-color-primary-s),
+		calc(var(--prim-color-primary-l) + 27%)
+	);
 	--prim-color-primary-tint-300: hsl(
 		var(--prim-color-primary-h),
 		var(--prim-color-primary-s),
diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
index 3380015000585..cce44df6c6679 100644
--- a/packages/design-system/src/css/_tokens.dark.scss
+++ b/packages/design-system/src/css/_tokens.dark.scss
@@ -22,6 +22,7 @@
 	--color-background-dark: var(--prim-gray-70);
 	--color-background-medium: var(--prim-gray-540);
 	--color-background-base: var(--prim-gray-670);
+	--color-background-light-base: var(--prim-gray-780);
 	--color-background-light: var(--prim-gray-820);
 	--color-background-xlight: var(--prim-gray-740);
 
@@ -118,16 +119,31 @@
 	--color-variables-usage-syntax-bg: var(--prim-color-alt-a-alpha-025);
 
 	// Button primary
-	--color-button-primary-disabled-font: var(--prim-gray-0-alpha-025);
+	--color-button-primary-focus-outline: var(--prim-color-primary-alpha-035);
+	--color-button-primary-disabled-font: var(--prim-gray-0-alpha-030);
 	--color-button-primary-disabled-border: transparent;
-	--color-button-primary-disabled-background: var(--prim-color-primary-shade-300);
+	--color-button-primary-disabled-background: var(--prim-color-primary-alpha-050);
 
 	// Button secondary
-	--color-button-secondary-border: var(--prim-gray-420);
+	--color-button-secondary-font: var(--prim-gray-70);
+	--color-button-secondary-border: var(--prim-gray-70);
+	--color-button-secondary-background: transparent;
+	--color-button-secondary-hover-active-focus-font: var(--prim-color-primary-tint-100);
+	--color-button-secondary-hover-background: transparent;
+	--color-button-secondary-active-focus-background: var(--prim-color-primary-alpha-010);
+	--color-button-secondary-focus-outline: var(--prim-color-primary-alpha-035);
+	--color-button-secondary-disabled-font: var(--prim-gray-0-alpha-030);
+	--color-button-secondary-disabled-border: var(--prim-gray-0-alpha-030);
 
 	// Text button
 	--color-text-button-secondary-font: var(--prim-gray-320);
 
+	// Node Creator Button
+	--color-button-node-creator-border-font: var(--color-button-secondary-font);
+	--color-button-node-creator-hover-font: var(--color-button-secondary-hover-active-focus-font);
+	--color-button-node-creator-hover-border: var(--prim-color-primary);
+	--color-button-node-creator-background: var(--prim-color-primary-alpha-010);
+
 	// Table
 	--color-table-header-background: var(--prim-gray-740);
 	--color-table-row-background: var(--prim-gray-820);
diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
index ab3797781d3c7..7278517474b16 100644
--- a/packages/design-system/src/css/_tokens.scss
+++ b/packages/design-system/src/css/_tokens.scss
@@ -156,8 +156,8 @@
 	--color-button-primary-border: var(--prim-color-primary);
 	--color-button-primary-background: var(--prim-color-primary);
 	--color-button-primary-hover-active-border: var(--prim-color-primary-shade-100);
-	--color-button-primary-hover-active-background: var(--prim-color-primary-shade-100);
-	--color-button-primary-focus-outline: var(--prim-color-primary-tint-200);
+	--color-button-primary-hover-active-focus-background: var(--prim-color-primary-shade-100);
+	--color-button-primary-focus-outline: var(--prim-color-primary-alpha-035);
 	--color-button-primary-disabled-font: var(--prim-gray-0-alpha-075);
 	--color-button-primary-disabled-border: var(--prim-color-primary-tint-200);
 	--color-button-primary-disabled-background: var(--prim-color-primary-tint-200);
@@ -166,10 +166,10 @@
 	--color-button-secondary-font: var(--prim-gray-670);
 	--color-button-secondary-border: var(--prim-gray-320);
 	--color-button-secondary-background: var(--prim-gray-0);
-	--color-button-secondary-hover-active-focus-font: var(--prim-color-primary);
-	--color-button-secondary-hover-active-border: var(--prim-color-primary);
+	--color-button-secondary-hover-active-focus-font: var(--prim-color-primary-shade-100);
+	--color-button-secondary-hover-active-focus-border: var(--prim-color-primary);
 	--color-button-secondary-hover-background: var(--prim-color-primary-tint-300);
-	--color-button-secondary-active-background: var(--prim-color-primary-tint-250);
+	--color-button-secondary-active-focus-background: var(--prim-color-primary-tint-270);
 	--color-button-secondary-focus-outline: var(--prim-gray-120);
 	--color-button-secondary-disabled-font: var(--prim-gray-200);
 	--color-button-secondary-disabled-border: var(--prim-gray-200);
@@ -187,7 +187,8 @@
 
 	// Node Creator Button
 	--color-button-node-creator-border-font: var(--prim-gray-540);
-	--color-button-node-creator-hover-border-font: var(--prim-color-primary);
+	--color-button-node-creator-hover-font: var(--prim-color-primary);
+	--color-button-node-creator-hover-border: var(--prim-color-primary);
 	--color-button-node-creator-background: var(--prim-gray-0);
 
 	// Table
diff --git a/packages/design-system/src/css/common/var.scss b/packages/design-system/src/css/common/var.scss
index b138ec33b9e47..aa1fddd8424fd 100644
--- a/packages/design-system/src/css/common/var.scss
+++ b/packages/design-system/src/css/common/var.scss
@@ -70,7 +70,7 @@ $border-radius-circle: 100%;
 
 /* Outline
 -------------------------- */
-$focus-outline-width: 2px;
+$focus-outline-width: 3px;
 
 /* Box shadow
 -------------------------- */
@@ -551,7 +551,7 @@ $button-hover-border-color: var(
 );
 $button-hover-background-color: var(
 	--button-hover-background-color,
-	var(--color-button-primary-hover-active-background)
+	var(--color-button-primary-hover-active-focus-background)
 );
 
 // Active
@@ -562,7 +562,7 @@ $button-active-border-color: var(
 );
 $button-active-background-color: var(
 	--button-active-background-color,
-	var(--color-button-primary-hover-active-background)
+	var(--color-button-primary-hover-active-focus-background)
 );
 
 // Focus
@@ -570,7 +570,7 @@ $button-focus-font-color: var(--button-focus-font-color, var(--color-button-prim
 $button-focus-border-color: var(--button-focus-border-color, var(--color-button-primary-border));
 $button-focus-background-color: var(
 	--button-focus-background-color,
-	var(--color-button-primary-background)
+	var(--color-button-primary-hover-active-focus-background)
 );
 $button-focus-outline-color: var(
 	--button-focus-outline-color,
diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue
index a30cd243de2f6..88038a18f7e07 100644
--- a/packages/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -182,8 +182,8 @@ function nodeTypeSelected(nodeTypes: string[]) {
 		color: var(--color-button-node-creator-border-font);
 
 		&:hover {
-			border-color: var(--color-button-node-creator-hover-border-font);
-			color: var(--color-button-node-creator-hover-border-font);
+			color: var(--color-button-node-creator-hover-font);
+			border-color: var(--color-button-node-creator-hover-border);
 			background: var(--color-button-node-creator-background);
 		}
 	}