From 0746783e027ebe6715588a68db399a34e0211a96 Mon Sep 17 00:00:00 2001
From: Giulio Andreini <g.andreini@gmail.com>
Date: Wed, 1 Nov 2023 13:33:36 +0100
Subject: [PATCH] refactor(editor): Color palette updates, introduce dark mode
 (#6980)

Github issue / Community forum post (link here to close automatically):

---------

Co-authored-by: Mutasem <mutdmour@gmail.com>
---
 cypress/e2e/14-mapping.cy.ts                  |   8 +-
 cypress/e2e/18-user-management.cy.ts          |  19 +-
 cypress/pages/settings-personal.ts            |   7 +
 cypress/pages/sidebar/main-sidebar.ts         |   1 +
 packages/design-system/.storybook/preview.js  |   6 +-
 .../src/components/N8nAvatar/Avatar.vue       |   2 +-
 .../src/components/N8nButton/Button.scss      | 173 ++++-
 .../src/components/N8nButton/Button.vue       | 170 ++---
 .../src/components/N8nCallout/Callout.vue     |  57 +-
 .../src/components/N8nLink/Link.vue           |  13 +-
 .../src/components/N8nMarkdown/Markdown.vue   |  13 +-
 .../src/components/N8nMenu/Menu.vue           |   9 +
 .../src/components/N8nNotice/Notice.vue       |   6 +-
 .../src/components/N8nTag/Tag.vue             |   6 +-
 .../src/components/N8nText/Text.vue           |   2 +-
 .../design-system/src/css/_primitives.scss    | 347 ++++++++++
 .../design-system/src/css/_tokens.dark.scss   | 465 ++++---------
 packages/design-system/src/css/_tokens.scss   | 624 +++++++-----------
 .../design-system/src/css/common/var.scss     | 315 ++++-----
 packages/design-system/src/css/index.scss     |   1 +
 .../design-system/src/css/notification.scss   |   2 +-
 .../design-system/src/css/radio-button.scss   |   4 +-
 packages/design-system/src/css/skeleton.scss  |  14 +-
 packages/design-system/src/css/table.scss     |   2 +-
 packages/design-system/src/css/tag.scss       |  54 +-
 packages/design-system/src/css/upload.scss    |   2 +-
 .../src/styleguide/ColorCircles.vue           |  20 +-
 .../src/styleguide/colors.stories.mdx         |  88 +--
 .../styleguide/colorsprimitives.stories.mdx   | 183 +++++
 .../public/google-auth/disabled.dark.png      | Bin 0 -> 4897 bytes
 .../public/google-auth/focus.dark.png         | Bin 0 -> 8513 bytes
 .../public/google-auth/normal.dark.png        | Bin 0 -> 8001 bytes
 .../public/google-auth/pressed.dark.png       | Bin 0 -> 8483 bytes
 .../public/n8n-beta-logo-dark-mode.svg        |  20 +
 .../public/n8n-dev-logo-dark-mode.svg         |  11 +
 .../public/n8n-logo-expanded-dark-mode.svg    |  13 +
 .../public/n8n-nightly-logo-dark-mode.svg     |  11 +
 packages/editor-ui/src/App.vue                |  10 +-
 packages/editor-ui/src/Interface.ts           |   4 +
 packages/editor-ui/src/components/Banner.vue  |   2 +-
 .../src/components/CodeNodeEditor/theme.ts    |   2 +
 .../src/components/CollectionParameter.vue    |  20 +
 .../CredentialEdit/CredentialEdit.vue         |   7 +-
 .../CredentialEdit/GoogleAuthButton.vue       |  10 +-
 .../src/components/Error/NodeErrorView.vue    |   2 +-
 .../src/components/ExecutionsList.vue         |  19 +-
 .../ExecutionsView/ExecutionCard.vue          |  11 +-
 .../ExecutionsView/ExecutionPreview.vue       |  14 +-
 .../components/ExpressionEditorModal/theme.ts |   1 +
 .../components/ExpressionParameterInput.vue   |   8 +-
 .../components/FixedCollectionParameter.vue   |  22 +-
 .../src/components/HtmlEditor/theme.ts        |   2 +
 .../InlineExpressionEditorOutput.vue          |   8 +-
 .../InlineExpressionEditor/theme.ts           |   1 +
 .../editor-ui/src/components/MainSidebar.vue  |   2 +-
 .../components/MainSidebarSourceControl.vue   |   4 -
 packages/editor-ui/src/components/Node.vue    |  11 +-
 .../src/components/Node/NodeCreation.vue      |  10 +-
 .../Node/NodeCreator/NodeCreator.vue          |   2 +-
 .../Renderers/CategorizedItemsRenderer.vue    |   1 +
 .../src/components/NodeDetailsView.vue        |   4 +
 .../src/components/ParameterInput.vue         |   4 +-
 packages/editor-ui/src/components/RunData.vue |   2 +-
 .../editor-ui/src/components/RunDataJson.vue  |   1 -
 .../src/components/RunDataSchema.vue          |   1 -
 packages/editor-ui/src/components/Sticky.vue  |   7 +-
 .../src/components/TagsManager/NoTagsView.vue |  12 +-
 .../editor-ui/src/components/ValueSurvey.vue  |  11 +-
 .../editor-ui/src/components/VariablesRow.vue |   4 +-
 .../src/components/WorkflowActivator.vue      |   2 +-
 .../src/composables/useLoadingService.ts      |   2 +-
 .../editor-ui/src/mixins/genericHelpers.ts    |   2 +-
 .../editor-ui/src/n8n-theme-variables.scss    |   4 +-
 packages/editor-ui/src/n8n-theme.scss         |  30 +-
 .../src/plugins/i18n/locales/en.json          |   5 +
 .../editor-ui/src/plugins/telemetry/index.ts  |   4 +-
 packages/editor-ui/src/stores/ui.store.ts     |  49 +-
 .../src/styles/autocomplete-theme.scss        |   6 +-
 packages/editor-ui/src/utils/nodeViewUtils.ts |   2 +-
 .../src/views/SettingsPersonalView.vue        | 110 +--
 .../src/views/SettingsUsageAndPlan.vue        |   9 +-
 81 files changed, 1744 insertions(+), 1368 deletions(-)
 create mode 100644 packages/design-system/src/css/_primitives.scss
 create mode 100644 packages/design-system/src/styleguide/colorsprimitives.stories.mdx
 create mode 100644 packages/editor-ui/public/google-auth/disabled.dark.png
 create mode 100644 packages/editor-ui/public/google-auth/focus.dark.png
 create mode 100644 packages/editor-ui/public/google-auth/normal.dark.png
 create mode 100644 packages/editor-ui/public/google-auth/pressed.dark.png
 create mode 100644 packages/editor-ui/public/n8n-beta-logo-dark-mode.svg
 create mode 100644 packages/editor-ui/public/n8n-dev-logo-dark-mode.svg
 create mode 100644 packages/editor-ui/public/n8n-logo-expanded-dark-mode.svg
 create mode 100644 packages/editor-ui/public/n8n-nightly-logo-dark-mode.svg

diff --git a/cypress/e2e/14-mapping.cy.ts b/cypress/e2e/14-mapping.cy.ts
index ef3b3aeb601b4..af39f6898ba18 100644
--- a/cypress/e2e/14-mapping.cy.ts
+++ b/cypress/e2e/14-mapping.cy.ts
@@ -80,14 +80,14 @@ describe('Data mapping', () => {
 			.parameterExpressionPreview('value')
 			.should('include.text', '0')
 			.invoke('css', 'color')
-			.should('equal', 'rgb(125, 125, 135)');
+			.should('equal', 'rgb(113, 116, 122)');
 
 		ndv.getters.inputTbodyCell(2, 0).realHover();
 		ndv.getters
 			.parameterExpressionPreview('value')
 			.should('include.text', '1')
 			.invoke('css', 'color')
-			.should('equal', 'rgb(125, 125, 135)');
+			.should('equal', 'rgb(113, 116, 122)');
 
 		ndv.actions.execute();
 
@@ -96,14 +96,14 @@ describe('Data mapping', () => {
 			.parameterExpressionPreview('value')
 			.should('include.text', '0')
 			.invoke('css', 'color')
-			.should('equal', 'rgb(125, 125, 135)'); // todo update color
+			.should('equal', 'rgb(113, 116, 122)'); // todo update color
 
 		ndv.getters.outputTbodyCell(2, 0).realHover();
 		ndv.getters
 			.parameterExpressionPreview('value')
 			.should('include.text', '1')
 			.invoke('css', 'color')
-			.should('equal', 'rgb(125, 125, 135)');
+			.should('equal', 'rgb(113, 116, 122)');
 	});
 
 	it('maps expressions from json view', () => {
diff --git a/cypress/e2e/18-user-management.cy.ts b/cypress/e2e/18-user-management.cy.ts
index 8c714eaa6c77e..dcf32fd678b7c 100644
--- a/cypress/e2e/18-user-management.cy.ts
+++ b/cypress/e2e/18-user-management.cy.ts
@@ -1,5 +1,5 @@
 import { INSTANCE_MEMBERS, INSTANCE_OWNER } from '../constants';
-import { SettingsUsersPage, WorkflowPage } from '../pages';
+import { MainSidebar, SettingsSidebar, SettingsUsersPage, WorkflowPage } from '../pages';
 import { PersonalSettingsPage } from '../pages/settings-personal';
 
 /**
@@ -25,6 +25,8 @@ const updatedPersonalData = {
 const usersSettingsPage = new SettingsUsersPage();
 const workflowPage = new WorkflowPage();
 const personalSettingsPage = new PersonalSettingsPage();
+const settingsSidebar = new SettingsSidebar();
+const mainSidebar = new MainSidebar();
 
 describe('User Management', { disableAutoLogin: true }, () => {
 	before(() => cy.enableFeature('sharing'));
@@ -55,6 +57,21 @@ describe('User Management', { disableAutoLogin: true }, () => {
 		usersSettingsPage.getters.userActionsToggle(INSTANCE_MEMBERS[1].email).should('exist');
 	});
 
+	it('should be able to change theme', () => {
+		personalSettingsPage.actions.loginAndVisit(INSTANCE_OWNER.email, INSTANCE_OWNER.password);
+
+		personalSettingsPage.actions.changeTheme('Dark');
+		cy.get('body').should('have.attr', 'data-theme', 'dark');
+		settingsSidebar.actions.back();
+		mainSidebar.getters.logo().should('have.attr', 'src', '/n8n-dev-logo-dark-mode.svg');
+
+		cy.visit(personalSettingsPage.url);
+		personalSettingsPage.actions.changeTheme('Light');
+		cy.get('body').should('have.attr', 'data-theme', 'light');
+		settingsSidebar.actions.back();
+		mainSidebar.getters.logo().should('have.attr', 'src', '/n8n-dev-logo.svg');
+	});
+
 	it('should delete user and their data', () => {
 		usersSettingsPage.actions.loginAndVisit(INSTANCE_OWNER.email, INSTANCE_OWNER.password, true);
 		usersSettingsPage.actions.opedDeleteDialog(INSTANCE_MEMBERS[0].email);
diff --git a/cypress/pages/settings-personal.ts b/cypress/pages/settings-personal.ts
index 79cf58c752da3..716625beb5ab6 100644
--- a/cypress/pages/settings-personal.ts
+++ b/cypress/pages/settings-personal.ts
@@ -20,8 +20,15 @@ export class PersonalSettingsPage extends BasePage {
 		saveSettingsButton: () => cy.getByTestId('save-settings-button'),
 		enableMfaButton: () => cy.getByTestId('enable-mfa-button'),
 		disableMfaButton: () => cy.getByTestId('disable-mfa-button'),
+		themeSelector: () => cy.getByTestId('theme-select'),
+		selectOptionsVisible: () => cy.get('.el-select-dropdown:visible .el-select-dropdown__item'),
 	};
 	actions = {
+		changeTheme: (theme: 'System default' | 'Dark' | 'Light') => {
+			this.getters.themeSelector().click();
+			this.getters.selectOptionsVisible().should('have.length', 3);
+			this.getters.selectOptionsVisible().contains(theme).click();
+		},
 		loginAndVisit: (email: string, password: string) => {
 			cy.signin({ email, password });
 			cy.visit(this.url);
diff --git a/cypress/pages/sidebar/main-sidebar.ts b/cypress/pages/sidebar/main-sidebar.ts
index 1559d3da65c7f..5b134648ea4e1 100644
--- a/cypress/pages/sidebar/main-sidebar.ts
+++ b/cypress/pages/sidebar/main-sidebar.ts
@@ -13,6 +13,7 @@ export class MainSidebar extends BasePage {
 		credentials: () => this.getters.menuItem('Credentials'),
 		executions: () => this.getters.menuItem('Executions'),
 		userMenu: () => cy.get('div[class="action-dropdown-container"]'),
+		logo: () => cy.getByTestId('n8n-logo'),
 	};
 	actions = {
 		goToSettings: () => {
diff --git a/packages/design-system/.storybook/preview.js b/packages/design-system/.storybook/preview.js
index 49708b358aec6..8991fa4a0a59b 100644
--- a/packages/design-system/.storybook/preview.js
+++ b/packages/design-system/.storybook/preview.js
@@ -45,10 +45,6 @@ export const parameters = {
 				name: '--color-background-light',
 				value: 'var(--color-background-light)',
 			},
-			{
-				name: '--color-background-lighter',
-				value: 'var(--color-background-lighter)',
-			},
 			{
 				name: '--color-background-xlight',
 				value: 'var(--color-background-xlight)',
@@ -66,7 +62,7 @@ export const parameters = {
 	},
 	options: {
 		storySort: {
-			order: ['Docs', 'Styleguide', 'Atoms', 'Modules'],
+			order: ['Docs', 'Styleguide', ['Colors Primitives', 'Colors Tokens', 'Font', 'Spacing', 'Border'], 'Atoms', 'Modules'],
 		},
 	},
 };
diff --git a/packages/design-system/src/components/N8nAvatar/Avatar.vue b/packages/design-system/src/components/N8nAvatar/Avatar.vue
index 56ff8880e434a..a8f49733c00e3 100644
--- a/packages/design-system/src/components/N8nAvatar/Avatar.vue
+++ b/packages/design-system/src/components/N8nAvatar/Avatar.vue
@@ -89,7 +89,7 @@ export default defineComponent({
 	position: absolute;
 	font-size: var(--font-size-2xs);
 	font-weight: var(--font-weight-bold);
-	color: var(--color-text-xlight);
+	color: var(--color-avatar-font);
 	text-shadow: 0px 1px 6px rgba(25, 11, 9, 0.3);
 }
 
diff --git a/packages/design-system/src/components/N8nButton/Button.scss b/packages/design-system/src/components/N8nButton/Button.scss
index 32024e3c7fe05..7458dc6377e25 100644
--- a/packages/design-system/src/components/N8nButton/Button.scss
+++ b/packages/design-system/src/components/N8nButton/Button.scss
@@ -26,23 +26,72 @@
 
 	@include utils-user-select(none);
 
+	// Solution for a inside button
+	& a {
+		color: $button-font-color unquote($important);
+	}
+
 	&:hover {
-		color: $button-hover-color unquote($important);
+		color: $button-hover-font-color unquote($important);
 		border-color: $button-hover-border-color unquote($important);
 		background-color: $button-hover-background-color unquote($important);
-	}
 
-	&:focus {
-		border-color: $button-focus-outline-color unquote($important);
-		outline: $focus-outline-width solid $button-focus-outline-color unquote($important);
+		& a {
+			color: $button-hover-font-color unquote($important);
+		}
 	}
 
 	&:active,
 	&.active {
-		color: $button-active-color unquote($important);
+		color: $button-active-font-color unquote($important);
 		border-color: $button-active-border-color unquote($important);
 		background-color: $button-active-background-color unquote($important);
 		outline: none;
+
+		& a {
+			color: $button-active-font-color unquote($important);
+		}
+	}
+
+	&:focus {
+		color: $button-focus-font-color unquote($important);
+		border-color: $button-focus-border-color unquote($important);
+		background-color: $button-focus-background-color unquote($important);
+		outline: $focus-outline-width solid $button-focus-outline-color unquote($important);
+
+		& a {
+			color: $button-focus-font-color unquote($important);
+		}
+	}
+
+	&.disabled {
+		&,
+		&:hover,
+		&:active,
+		&:focus {
+			color: $button-disabled-font-color;
+			border-color: $button-disabled-border-color;
+			background-color: $button-disabled-background-color;
+
+			& a {
+				color: $button-disabled-font-color;
+			}
+		}
+	}
+
+	.loading {
+		&,
+		&:hover,
+		&:active,
+		&:focus {
+			color: $button-loading-font-color;
+			border-color: $button-loading-border-color;
+			background-color: $button-loading-background-color;
+
+			& a {
+				color: $button-loading-font-color;
+			}
+		}
 	}
 
 	&::-moz-focus-inner {
@@ -65,17 +114,109 @@
 }
 
 @mixin n8n-button-secondary {
-	--button-color: var(--color-primary);
-	--button-border-color: var(--color-primary);
-	--button-background-color: var(--color-background-xlight);
+	--button-font-color: var(--color-button-secondary-font);
+	--button-border-color: var(--color-button-secondary-border);
+	--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-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-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-outline-color: var(--color-button-secondary-focus-outline);
+
+	--button-disabled-font-color: var(--color-button-secondary-disabled-font);
+	--button-disabled-border-color: var(--color-button-secondary-disabled-border);
+	--button-disabled-background-color: var(--color-button-secondary-background);
+
+	--button-loading-font-color: var(--color-button-secondary-loading-font);
+	--button-loading-border-color: var(--color-button-secondary-loading-border);
+	--button-loading-background-color: var(--color-button-secondary-loading-background);
+}
+
+@mixin n8n-button-success {
+	--button-font-color: var(--color-button-success-font);
+	--button-border-color: var(--color-success);
+	--button-background-color: var(--color-success);
+
+	--button-hover-font-color: var(--color-button-success-font);
+	--button-hover-border-color: var(--color-success-shade-1);
+	--button-hover-background-color: var(--color-success-shade-1);
+
+	--button-active-font-color: var(--color-button-success-font);
+	--button-active-border-color: var(--color-success-shade-1);
+	--button-active-background-color: var(--color-success-shade-1);
+
+	--button-focus-font-color: var(--color-button-success-font);
+	--button-focus-border-color: var(--color-success);
+	--button-focus-background-color: var(--color-success);
+	--button-focus-outline-color: var(--color-success-light);
+
+	--button-disabled-font-color: var(--color-button-success-disabled-font);
+	--button-disabled-border-color: var(--color-success-tint-1);
+	--button-disabled-background-color: var(--color-success-tint-1);
+
+	--button-loading-font-color: var(--color-button-success-font);
+	--button-loading-border-color: var(--color-success);
+	--button-loading-background-color: var(--color-success);
+}
+
+@mixin n8n-button-warning {
+	--button-font-color: var(--color-button-warning-font);
+	--button-border-color: var(--color-warning);
+	--button-background-color: var(--color-warning);
+
+	--button-hover-font-color: var(--color-button-warning-font);
+	--button-hover-border-color: var(--color-warning-shade-1);
+	--button-hover-background-color: var(--color-warning-shade-1);
+
+	--button-active-font-color: var(--color-button-warning-font);
+	--button-active-border-color: var(--color-warning-shade-1);
+	--button-active-background-color: var(--color-warning-shade-1);
+
+	--button-focus-font-color: var(--color-button-warning-font);
+	--button-focus-border-color: var(--color-warning);
+	--button-focus-background-color: var(--color-warning);
+	--button-focus-outline-color: var(--color-warning-tint-1);
+
+	--button-disabled-font-color: var(--color-button-warning-disabled-font);
+	--button-disabled-border-color: var(--color-warning-tint-1);
+	--button-disabled-background-color: var(--color-warning-tint-1);
+
+	--button-loading-font-color: var(--color-button-warning-font);
+	--button-loading-border-color: var(--color-warning);
+	--button-loading-background-color: var(--color-warning);
+}
+
+@mixin n8n-button-danger {
+	--button-font-color: var(--color-button-danger-font);
+	--button-border-color: var(--color-danger);
+	--button-background-color: var(--color-danger);
+
+	--button-hover-font-color: var(--color-button-danger-font);
+	--button-hover-border-color: var(--color-danger-shade-1);
+	--button-hover-background-color: var(--color-danger-shade-1);
+
+	--button-active-font-color: var(--color-button-danger-font);
+	--button-active-border-color: var(--color-danger-shade-1);
+	--button-active-background-color: var(--color-danger-shade-1);
 
-	--button-active-background-color: var(--color-primary-tint-2);
-	--button-active-color: var(--color-primary);
-	--button-active-border-color: var(--color-primary);
+	--button-focus-font-color: var(--color-button-danger-font);
+	--button-focus-border-color: var(--color-danger);
+	--button-focus-background-color: var(--color-danger);
+	--button-focus-outline-color: var(--color-danger-tint-1);
 
-	--button-hover-background-color: var(--color-primary-tint-3);
-	--button-hover-color: var(--color-primary);
-	--button-hover-border-color: var(--color-primary);
+	--button-disabled-font-color: var(--color-button-danger-disabled-font);
+	--button-disabled-border-color: var(--color-danger-tint-1);
+	--button-disabled-background-color: var(--color-danger-tint-1);
 
-	--button-focus-outline-color: var(--color-primary-tint-1);
+	--button-loading-font-color: var(--color-button-danger-font);
+	--button-loading-border-color: var(--color-danger);
+	--button-loading-background-color: var(--color-danger);
 }
diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index a0bd861e2c4c0..346b33d68d9dd 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -136,84 +136,19 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
 }
 
 .tertiary {
-	font-weight: var(--font-weight-bold) !important;
-
-	--button-background-color: var(--color-background-xlight);
-	--button-color: var(--color-text-dark);
-	--button-border-color: var(--color-neutral-850);
-
-	--button-active-background-color: var(--color-primary-tint-2);
-	--button-active-color: var(--color-primary);
-	--button-active-border-color: var(--color-primary);
-
-	--button-hover-background-color: var(--color-neutral-950);
-	--button-hover-color: var(--color-text-dark);
-	--button-hover-border-color: var(--color-neutral-800);
-
-	--button-focus-outline-color: hsla(
-		var(--color-neutral-h),
-		var(--color-neutral-s),
-		var(--color-neutral-l),
-		0.2
-	);
+	@include n8n-button-secondary;
 }
 
 .success {
-	--button-background-color: var(--color-success);
-	--button-color: var(--color-text-xlight);
-	--button-border-color: var(--color-success);
-
-	--button-active-background-color: var(--color-success-350);
-	--button-active-border-color: var(--color-success-350);
-
-	--button-hover-background-color: var(--color-success-450);
-	--button-hover-border-color: var(--color-success-450);
-
-	--button-focus-outline-color: hsla(
-		var(--color-success-h),
-		var(--color-success-s),
-		var(--color-success-l),
-		0.33
-	);
+	@include n8n-button-success;
 }
 
 .warning {
-	--button-background-color: var(--color-warning);
-	--button-color: var(--color-text-xlight);
-	--button-border-color: var(--color-warning);
-
-	--button-active-background-color: var(--color-warning-500);
-	--button-active-border-color: var(--color-warning-500);
-
-	--button-hover-background-color: var(--color-warning-650);
-	--button-hover-border-color: var(--color-warning-650);
-
-	--button-focus-outline-color: hsla(
-		var(--color-warning-h),
-		var(--color-warning-s),
-		var(--color-warning-l),
-		0.33
-	);
+	@include n8n-button-warning;
 }
 
 .danger {
-	--button-background-color: var(--color-danger);
-	--button-color: var(--color-text-xlight);
-	--button-border-color: var(--color-danger);
-	--button-active-color: var(--color-text-xlight);
-
-	--button-active-background-color: var(--color-danger-600);
-	--button-active-border-color: var(--color-danger-600);
-
-	--button-hover-background-color: var(--color-danger-700);
-	--button-hover-border-color: var(--color-danger-700);
-
-	--button-focus-outline-color: hsla(
-		var(--color-danger-h),
-		var(--color-danger-s),
-		var(--color-danger-l),
-		0.33
-	);
+	@include n8n-button-danger;
 }
 
 /**
@@ -285,85 +220,98 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
 /**
  * Modifiers
  */
-
 .outline {
-	--button-color: var(--color-primary);
 	--button-background-color: transparent;
 	--button-disabled-background-color: transparent;
-	--button-active-background-color: transparent;
 
 	&.primary {
-		--button-color: var(--color-primary);
-		--button-border-color: var(--color-primary);
-		--button-active-background-color: var(--color-primary);
-	}
-
-	&.tertiary {
-		--button-color: var(--color-text-dark);
+		--button-font-color: var(--color-primary);
+		--button-disabled-font-color: var(--color-primary-tint-1);
+		--button-disabled-border-color: var(--color-primary-tint-1);
+		--button-disabled-background-color: transparent;
 	}
 
 	&.success {
-		--button-color: var(--color-success);
+		--button-font-color: var(--color-success);
 		--button-border-color: var(--color-success);
+		--button-hover-border-color: var(--color-success);
+		--button-hover-background-color: var(--color-success);
 		--button-active-background-color: var(--color-success);
+		--button-disabled-font-color: var(--color-success-light);
+		--button-disabled-border-color: var(--color-success-light);
+		--button-disabled-background-color: transparent;
 	}
 
 	&.warning {
-		--button-color: var(--color-warning);
+		--button-font-color: var(--color-warning);
 		--button-border-color: var(--color-warning);
+		--button-hover-border-color: var(--color-warning);
+		--button-hover-background-color: var(--color-warning);
 		--button-active-background-color: var(--color-warning);
+		--button-disabled-font-color: var(--color-warning-tint-1);
+		--button-disabled-border-color: var(--color-warning-tint-1);
+		--button-disabled-background-color: transparent;
 	}
 
 	&.danger {
-		--button-color: var(--color-danger);
+		--button-font-color: var(--color-danger);
 		--button-border-color: var(--color-danger);
+		--button-hover-border-color: var(--color-danger);
+		--button-hover-background-color: var(--color-danger);
 		--button-active-background-color: var(--color-danger);
+		--button-disabled-font-color: var(--color-danger-tint-1);
+		--button-disabled-border-color: var(--color-danger-tint-1);
+		--button-disabled-background-color: transparent;
 	}
 }
 
 .text {
-	--button-color: var(--color-text-light);
+	--button-font-color: var(--color-text-button-secondary-font);
 	--button-border-color: transparent;
 	--button-background-color: transparent;
-	--button-active-color: var(--color-text-light);
-	--button-active-background-color: transparent;
-	--button-active-border-color: transparent;
-	--button-hover-color: var(--color-text-light);
-	--button-hover-background-color: transparent;
 	--button-hover-border-color: transparent;
+	--button-hover-background-color: transparent;
+	--button-active-border-color: transparent;
+	--button-active-background-color: transparent;
+	--button-focus-border-color: transparent;
+	--button-focus-background-color: transparent;
+	--button-disabled-border-color: transparent;
+	--button-disabled-background-color: transparent;
 
-	&.primary {
-		--button-color: var(--color-primary);
-		--button-active-color: var(--color-primary);
-		--button-hover-color: var(--color-primary);
+	&:focus {
+		outline: 0;
 	}
 
-	&.secondary {
-		--button-color: var(--color-primary-tint-1);
-		--button-active-color: var(--color-primary-tint-1);
-		--button-hover-color: var(--color-primary-tint-1);
+	&.primary {
+		--button-font-color: var(--color-primary);
+		--button-hover-font-color: var(--color-primary-shade-1);
+		--button-active-font-color: var(--color-primary-shade-1);
+		--button-focus-font-color: var(--color-primary);
+		--button-disabled-font-color: var(--color-primary-tint-1);
 	}
 
 	&.success {
-		--button-color: var(--color-success);
-		--button-active-color: var(--color-success);
-		--button-hover-color: var(--color-success);
-	}
-
-	&.tertiary {
-		--button-hover-color: var(--color-primary);
+		--button-font-color: var(--color-success);
+		--button-hover-font-color: var(--color-success-shade-1);
+		--button-active-font-color: var(--color-success-shade-1);
+		--button-focus-font-color: var(--color-success);
+		--button-disabled-font-color: var(--color-success-light);
 	}
 
 	&.warning {
-		--button-color: var(--color-warning);
-		--button-active-color: var(--color-warning);
-		--button-hover-color: var(--color-warning);
+		--button-font-color: var(--color-warning);
+		--button-hover-font-color: var(--color-warning-shade-1);
+		--button-active-font-color: var(--color-warning-shade-1);
+		--button-focus-font-color: var(--color-warning);
+		--button-disabled-font-color: var(--color-warning-tint-1);
 	}
 
 	&.danger {
-		--button-color: var(--color-danger);
-		--button-active-color: var(--color-danger);
-		--button-hover-color: var(--color-danger);
+		--button-font-color: var(--color-danger);
+		--button-hover-font-color: var(--color-danger-shade-1);
+		--button-active-font-color: var(--color-danger-shade-1);
+		--button-focus-font-color: var(--color-danger);
+		--button-disabled-font-color: var(--color-danger-tint-1);
 	}
 
 	&:hover {
@@ -384,7 +332,6 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
 		right: -1px;
 		bottom: -1px;
 		border-radius: inherit;
-		background-color: $loading-overlay-background-color;
 	}
 }
 
@@ -395,9 +342,6 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
 	&:focus {
 		cursor: not-allowed;
 		background-image: none;
-		color: $button-disabled-font-color;
-		background-color: $button-disabled-background-color;
-		border-color: $button-disabled-border-color;
 	}
 }
 
diff --git a/packages/design-system/src/components/N8nCallout/Callout.vue b/packages/design-system/src/components/N8nCallout/Callout.vue
index 639380773f9bd..dfb98ab612b5a 100644
--- a/packages/design-system/src/components/N8nCallout/Callout.vue
+++ b/packages/design-system/src/components/N8nCallout/Callout.vue
@@ -93,6 +93,9 @@ export default defineComponent({
 	border: var(--border-width-base) var(--border-style-base);
 	align-items: center;
 	line-height: var(--font-line-height-loose);
+	border-color: var(--color-callout-info-border);
+	background-color: var(--color-callout-info-background);
+	color: var(--color-callout-info-font);
 
 	&.slim {
 		line-height: var(--font-line-height-loose);
@@ -111,27 +114,43 @@ export default defineComponent({
 
 .info,
 .custom {
-	border-color: var(--color-foreground-base);
-	background-color: var(--color-foreground-xlight);
-	color: var(--color-info);
-}
+	border-color: var(--color-callout-info-border);
+	background-color: var(--color-callout-info-background);
+	color: var(--color-callout-info-font);
 
-.warning {
-	border-color: var(--color-warning-tint-1);
-	background-color: var(--color-warning-tint-2);
-	color: var(--color-warning);
+	.icon {
+		color: var(--color-callout-info-icon);
+	}
 }
 
 .success {
-	border-color: var(--color-success-tint-1);
-	background-color: var(--color-success-tint-2);
-	color: var(--color-success);
+	border-color: var(--color-callout-success-border);
+	background-color: var(--color-callout-success-background);
+	color: var(--color-callout-success-font);
+
+	.icon {
+		color: var(--color-callout-success-icon);
+	}
+}
+
+.warning {
+	border-color: var(--color-callout-warning-border);
+	background-color: var(--color-callout-warning-background);
+	color: var(--color-callout-warning-font);
+
+	.icon {
+		color: var(--color-callout-warning-icon);
+	}
 }
 
 .danger {
-	border-color: var(--color-danger-tint-1);
-	background-color: var(--color-danger-tint-2);
-	color: var(--color-danger);
+	border-color: var(--color-callout-danger-border);
+	background-color: var(--color-callout-danger-background);
+	color: var(--color-callout-danger-font);
+
+	.icon {
+		color: var(--color-callout-danger-icon);
+	}
 }
 
 .icon {
@@ -142,8 +161,12 @@ export default defineComponent({
 .secondary {
 	font-size: var(--font-size-2xs);
 	font-weight: var(--font-weight-bold);
-	color: var(--color-secondary);
-	background-color: var(--color-secondary-tint-3);
-	border-color: var(--color-secondary-tint-1);
+	border-color: var(--color-callout-secondary-border);
+	background-color: var(--color-callout-secondary-background);
+	color: var(--color-callout-secondary-font);
+
+	.icon {
+		color: var(--color-callout-secondary-icon);
+	}
 }
 </style>
diff --git a/packages/design-system/src/components/N8nLink/Link.vue b/packages/design-system/src/components/N8nLink/Link.vue
index 998fd6319080e..472e7db77af9b 100644
--- a/packages/design-system/src/components/N8nLink/Link.vue
+++ b/packages/design-system/src/components/N8nLink/Link.vue
@@ -50,12 +50,13 @@ export default defineComponent({
 
 <style lang="scss" module>
 @import '../../utils';
+@import '../../css/common/var';
 
 .primary {
-	color: var(--color-primary);
+	color: $link-color;
 
 	&:active {
-		color: saturation(--color-primary-h, --color-primary-s, --color-primary-l, -(30%));
+		color: $link-color-active;
 	}
 }
 
@@ -63,11 +64,11 @@ export default defineComponent({
 	color: var(--color-text-base);
 
 	&:hover {
-		color: var(--color-primary);
+		color: $link-color;
 	}
 
 	&:active {
-		color: saturation(--color-primary-h, --color-primary-s, --color-primary-l, -(30%));
+		color: $link-color-active;
 	}
 }
 
@@ -75,7 +76,7 @@ export default defineComponent({
 	color: var(--color-danger);
 
 	&:active {
-		color: saturation(--color-danger-h, --color-danger-s, --color-danger-l, -(20%));
+		color: var(--color-danger-shade-1);
 	}
 }
 
@@ -83,7 +84,7 @@ export default defineComponent({
 	color: var(--color-secondary);
 
 	&:active {
-		color: saturation(--color-secondary-h, --color-secondary-s, --color-secondary-l, -(20%));
+		color: var(--color-secondary-shade-1);
 	}
 }
 
diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
index 09be1747242f6..456ff338bdfaa 100644
--- a/packages/design-system/src/components/N8nMarkdown/Markdown.vue
+++ b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
@@ -261,7 +261,16 @@ export default defineComponent({
 }
 
 .sticky {
-	color: var(--color-text-dark);
+	color: var(--color-sticky-font);
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		color: var(--color-sticky-font);
+	}
 
 	h1,
 	h2,
@@ -327,6 +336,8 @@ export default defineComponent({
 
 	img {
 		object-fit: contain;
+		margin-top: var(--spacing-xs);
+		margin-bottom: var(--spacing-2xs);
 
 		&[src*='#full-width'] {
 			width: 100%;
diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index b5ed60260a457..cbdce32f1beaa 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -4,6 +4,7 @@
 			['menu-container']: true,
 			[$style.container]: true,
 			[$style.menuCollapsed]: collapsed,
+			[$style.transparentBackground]: transparentBackground,
 		}"
 	>
 		<div v-if="$slots.header" :class="$style.menuHeader">
@@ -83,6 +84,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		transparentBackground: {
+			type: Boolean,
+			default: false,
+		},
 		mode: {
 			type: String,
 			default: 'router',
@@ -202,4 +207,8 @@ export default defineComponent({
 		display: none !important;
 	}
 }
+
+.transparentBackground {
+	background-color: transparent;
+}
 </style>
diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index 105280a103010..93a34cc810d3f 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -95,7 +95,7 @@ export default defineComponent({
 .notice {
 	font-size: var(--font-size-2xs);
 	display: flex;
-	color: var(--custom-font-black);
+	color: var(--color-notice-font);
 	margin: var(--notice-margin, var(--spacing-s) 0);
 	padding: var(--spacing-2xs);
 	background-color: var(--background-color);
@@ -111,8 +111,8 @@ export default defineComponent({
 }
 
 .warning {
-	--border-color: var(--color-warning-tint-1);
-	--background-color: var(--color-warning-tint-2);
+	--border-color: var(--color-notice-warning-border);
+	--background-color: var(--color-notice-warning-background);
 }
 
 .danger {
diff --git a/packages/design-system/src/components/N8nTag/Tag.vue b/packages/design-system/src/components/N8nTag/Tag.vue
index 95ba1f7dfcfa4..29849d12236b0 100644
--- a/packages/design-system/src/components/N8nTag/Tag.vue
+++ b/packages/design-system/src/components/N8nTag/Tag.vue
@@ -29,11 +29,7 @@ export default defineComponent({
 	transition: background-color 0.3s ease;
 
 	&:hover {
-		background-color: hsl(
-			var(--color-background-base-h),
-			var(--color-background-base-s),
-			calc(var(--color-background-base-l) - 4%)
-		);
+		background-color: var(--color-background-medium);
 	}
 }
 </style>
diff --git a/packages/design-system/src/components/N8nText/Text.vue b/packages/design-system/src/components/N8nText/Text.vue
index ab5e949bbe9df..7599828431b68 100644
--- a/packages/design-system/src/components/N8nText/Text.vue
+++ b/packages/design-system/src/components/N8nText/Text.vue
@@ -129,7 +129,7 @@ export default defineComponent({
 }
 
 .danger {
-	color: var(--color-danger);
+	color: var(--color-text-danger);
 }
 
 .success {
diff --git a/packages/design-system/src/css/_primitives.scss b/packages/design-system/src/css/_primitives.scss
new file mode 100644
index 0000000000000..348d10f1c96e6
--- /dev/null
+++ b/packages/design-system/src/css/_primitives.scss
@@ -0,0 +1,347 @@
+// Primitive Colors
+// Primitive colors shouldn't be used directly in components an other UI elements.
+// They can be only mapped to tokens.
+// Tokens should be used instead in components an other UI elements
+
+@mixin primitives {
+	// Gray
+	--prim-gray-h: 220;
+	--prim-gray-s: 30%;
+
+	--prim-gray-820: hsl(var(--prim-gray-h), 1%, 18%);
+	--prim-gray-800: hsl(var(--prim-gray-h), 1%, 20%);
+	--prim-gray-740: hsl(var(--prim-gray-h), 2%, 26%);
+	--prim-gray-670: hsl(var(--prim-gray-h), 2%, 33%);
+	--prim-gray-540: hsl(var(--prim-gray-h), 4%, 46%);
+	--prim-gray-490: hsl(var(--prim-gray-h), 3%, 51%);
+	--prim-gray-420: hsl(var(--prim-gray-h), 4%, 58%);
+	--prim-gray-320: hsl(var(--prim-gray-h), 10%, 68%);
+	--prim-gray-200: hsl(var(--prim-gray-h), 18%, 80%);
+	--prim-gray-120: hsl(var(--prim-gray-h), 25%, 88%);
+	--prim-gray-70: hsl(var(--prim-gray-h), 32%, 93%);
+	--prim-gray-40: hsl(var(--prim-gray-h), 40%, 96%);
+	--prim-gray-10: hsl(var(--prim-gray-h), 47%, 99%);
+	--prim-gray-0-alpha-075: hsla(var(--prim-gray-h), 50%, 100%, 0.75);
+	--prim-gray-0-alpha-025: hsla(var(--prim-gray-h), 50%, 100%, 0.25);
+	--prim-gray-0: hsl(var(--prim-gray-h), 50%, 100%);
+
+	// Color Primary
+	--prim-color-primary-h: 7;
+	--prim-color-primary-s: 100%;
+	--prim-color-primary-l: 68%;
+
+	--prim-color-primary-shade-100: hsl(
+		var(--prim-color-primary-h),
+		calc(var(--prim-color-primary-s) - 15%),
+		calc(var(--prim-color-primary-l) - 10%)
+	);
+	--prim-color-primary: hsl(
+		var(--prim-color-primary-h),
+		var(--prim-color-primary-s),
+		var(--prim-color-primary-l)
+	);
+	--prim-color-primary-alpha-04: hsla(
+		var(--prim-color-primary-h),
+		var(--prim-color-primary-s),
+		var(--prim-color-primary-l),
+		0.4
+	);
+	--prim-color-primary-tint-100: hsl(
+		var(--prim-color-primary-h),
+		var(--prim-color-primary-s),
+		calc(var(--prim-color-primary-l) + 10%)
+	);
+	--prim-color-primary-tint-200: hsl(
+		var(--prim-color-primary-h),
+		var(--prim-color-primary-s),
+		calc(var(--prim-color-primary-l) + 20%)
+	);
+	--prim-color-primary-tint-250: hsl(
+		var(--prim-color-primary-h),
+		var(--prim-color-primary-s),
+		calc(var(--prim-color-primary-l) + 25%)
+	);
+	--prim-color-primary-tint-300: hsl(
+		var(--prim-color-primary-h),
+		var(--prim-color-primary-s),
+		calc(var(--prim-color-primary-l) + 30%)
+	);
+
+	// Color Secondary
+	--prim-color-secondary-h: 247;
+	--prim-color-secondary-s: 49%;
+	--prim-color-secondary-l: 53%;
+
+	--prim-color-secondary-shade-100: hsl(
+		var(--prim-color-secondary-h),
+		var(--prim-color-secondary-s),
+		calc(var(--prim-color-secondary-l) - 10%)
+	);
+	--prim-color-secondary: hsl(
+		var(--prim-color-secondary-h),
+		var(--prim-color-secondary-s),
+		var(--prim-color-secondary-l)
+	);
+	--prim-color-secondary-alpha-025: hsla(
+		var(--prim-color-secondary-h),
+		var(--prim-color-secondary-s),
+		var(--prim-color-secondary-l),
+		0.25
+	);
+	--prim-color-secondary-tint-100: hsl(
+		var(--prim-color-secondary-h),
+		var(--prim-color-secondary-s),
+		calc(var(--prim-color-secondary-l) + 10%)
+	);
+	--prim-color-secondary-tint-200: hsl(
+		var(--prim-color-secondary-h),
+		var(--prim-color-secondary-s),
+		calc(var(--prim-color-secondary-l) + 20%)
+	);
+	--prim-color-secondary-tint-300: hsl(
+		var(--prim-color-secondary-h),
+		var(--prim-color-secondary-s),
+		calc(var(--prim-color-secondary-l) + 30%)
+	);
+	--prim-color-secondary-tint-400: hsl(
+		var(--prim-color-secondary-h),
+		var(--prim-color-secondary-s),
+		calc(var(--prim-color-secondary-l) + 40%)
+	);
+
+	// Color Alternate A
+	--prim-color-alt-a-h: 150;
+	--prim-color-alt-a-s: 60%;
+	--prim-color-alt-a-l: 40%;
+
+	--prim-color-alt-a-shade-100: hsl(
+		var(--prim-color-alt-a-h),
+		var(--prim-color-alt-a-s),
+		calc(var(--prim-color-alt-a-l) - 10%)
+	);
+	--prim-color-alt-a: hsl(
+		var(--prim-color-alt-a-h),
+		var(--prim-color-alt-a-s),
+		var(--prim-color-alt-a-l)
+	);
+	--prim-color-alt-a-alpha-025: hsl(
+		var(--prim-color-alt-a-h),
+		var(--prim-color-alt-a-s),
+		var(--prim-color-alt-a-l),
+		0.25
+	);
+	--prim-color-alt-a-tint-300: hsl(
+		var(--prim-color-alt-a-h),
+		var(--prim-color-alt-a-s),
+		calc(var(--prim-color-alt-a-l) + 30%)
+	);
+	--prim-color-alt-a-tint-400: hsl(
+		var(--prim-color-alt-a-h),
+		var(--prim-color-alt-a-s),
+		calc(var(--prim-color-alt-a-l) + 40%)
+	);
+	--prim-color-alt-a-tint-500: hsl(
+		var(--prim-color-alt-a-h),
+		var(--prim-color-alt-a-s),
+		calc(var(--prim-color-alt-a-l) + 50%)
+	);
+	--prim-color-alt-a-tint-550: hsl(
+		var(--prim-color-alt-a-h),
+		var(--prim-color-alt-a-s),
+		calc(var(--prim-color-alt-a-l) + 55%)
+	);
+
+	// Color Alternate B
+	--prim-color-alt-b-h: 36;
+	--prim-color-alt-b-s: 77%;
+	--prim-color-alt-b-l: 57%;
+
+	--prim-color-alt-b-shade-100: hsl(
+		var(--prim-color-alt-b-h),
+		var(--prim-color-alt-b-s),
+		calc(var(--prim-color-alt-b-l) - 10%)
+	);
+	--prim-color-alt-b: hsl(
+		var(--prim-color-alt-b-h),
+		var(--prim-color-alt-b-s),
+		var(--prim-color-alt-b-l)
+	);
+	--prim-color-alt-b-alpha-02: hsla(
+		var(--prim-color-alt-b-h),
+		var(--prim-color-alt-b-s),
+		var(--prim-color-alt-b-l),
+		0.2
+	);
+	--prim-color-alt-b-tint-250: hsl(
+		var(--prim-color-alt-b-h),
+		var(--prim-color-alt-b-s),
+		calc(var(--prim-color-alt-b-l) + 25%)
+	);
+	--prim-color-alt-b-tint-400: hsl(
+		var(--prim-color-alt-b-h),
+		var(--prim-color-alt-b-s),
+		calc(var(--prim-color-alt-b-l) + 40%)
+	);
+
+	// Color Alternate C
+	--prim-color-alt-c-h: 355;
+	--prim-color-alt-c-s: 83%;
+	--prim-color-alt-c-l: 52%;
+
+	--prim-color-alt-c-shade-100: hsl(
+		var(--prim-color-alt-c-h),
+		var(--prim-color-alt-c-s),
+		calc(var(--prim-color-alt-c-l) - 10%)
+	);
+	--prim-color-alt-c: hsl(
+		var(--prim-color-alt-c-h),
+		var(--prim-color-alt-c-s),
+		var(--prim-color-alt-c-l)
+	);
+	--prim-color-alt-c-alpha-02: hsl(
+		var(--prim-color-alt-c-h),
+		var(--prim-color-alt-c-s),
+		var(--prim-color-alt-c-l),
+		0.2
+	);
+	--prim-color-alt-c-tint-150: hsl(
+		var(--prim-color-alt-c-h),
+		var(--prim-color-alt-c-s),
+		calc(var(--prim-color-alt-c-l) + 15%)
+	);
+	--prim-color-alt-c-tint-250: hsl(
+		var(--prim-color-alt-c-h),
+		var(--prim-color-alt-c-s),
+		calc(var(--prim-color-alt-c-l) + 25%)
+	);
+	--prim-color-alt-c-tint-400: hsl(
+		var(--prim-color-alt-c-h),
+		var(--prim-color-alt-c-s),
+		calc(var(--prim-color-alt-c-l) + 40%)
+	);
+	--prim-color-alt-c-tint-450: hsl(
+		var(--prim-color-alt-c-h),
+		var(--prim-color-alt-c-s),
+		calc(var(--prim-color-alt-c-l) + 45%)
+	);
+
+	// Color Alternate D
+	--prim-color-alt-d-h: 46;
+	--prim-color-alt-d-s: 100%;
+	--prim-color-alt-d-l: 92%;
+
+	--prim-color-alt-d-shade-150: hsl(
+		var(--prim-color-alt-d-h),
+		var(--prim-color-alt-d-s),
+		calc(var(--prim-color-alt-d-l) - 15%)
+	);
+	--prim-color-alt-d: hsl(
+		var(--prim-color-alt-d-h),
+		var(--prim-color-alt-d-s),
+		var(--prim-color-alt-d-l)
+	);
+
+	// Color Alternate E
+	--prim-color-alt-e-h: 210;
+	--prim-color-alt-e-s: 67%;
+	--prim-color-alt-e-l: 57%;
+
+	--prim-color-alt-e-shade-150: hsl(
+		var(--prim-color-alt-e-h),
+		var(--prim-color-alt-e-s),
+		calc(var(--prim-color-alt-e-l) - 15%)
+	);
+	--prim-color-alt-e-shade-100: hsl(
+		var(--prim-color-alt-e-h),
+		var(--prim-color-alt-e-s),
+		calc(var(--prim-color-alt-e-l) - 10%)
+	);
+	--prim-color-alt-e: hsl(
+		var(--prim-color-alt-e-h),
+		var(--prim-color-alt-e-s),
+		var(--prim-color-alt-e-l)
+	);
+	--prim-color-alt-e-alpha-04: hsla(
+		var(--prim-color-alt-e-h),
+		var(--prim-color-alt-e-s),
+		var(--prim-color-alt-e-l),
+		0.4
+	);
+
+	// Color Alternate F
+	--prim-color-alt-f-h: 72;
+	--prim-color-alt-f-s: 100%;
+	--prim-color-alt-f-l: 27%;
+
+	--prim-color-alt-f: hsl(
+		var(--prim-color-alt-f-h),
+		var(--prim-color-alt-f-s),
+		var(--prim-color-alt-f-l)
+	);
+
+	--prim-color-alt-f-tint-150: hsl(
+		var(--prim-color-alt-f-h),
+		var(--prim-color-alt-f-s),
+		calc(var(--prim-color-alt-f-l) + 15%)
+	);
+
+	// Color Alternate G
+	--prim-color-alt-g-h: 276;
+	--prim-color-alt-g-s: 31%;
+	--prim-color-alt-g-l: 50%;
+
+	--prim-color-alt-g: hsl(
+		var(--prim-color-alt-g-h),
+		var(--prim-color-alt-g-s),
+		var(--prim-color-alt-g-l)
+	);
+
+	--prim-color-alt-g-tint-150: hsl(
+		var(--prim-color-alt-g-h),
+		var(--prim-color-alt-g-s),
+		calc(var(--prim-color-alt-g-l) + 15%)
+	);
+
+	// Color Alternate H
+	--prim-color-alt-h-h: 184;
+	--prim-color-alt-h-s: 44%;
+	--prim-color-alt-h-l: 43%;
+
+	--prim-color-alt-h: hsl(
+		var(--prim-color-alt-h-h),
+		var(--prim-color-alt-h-s),
+		var(--prim-color-alt-h-l)
+	);
+
+	// Color Alternate I
+	--prim-color-alt-i-h: 147;
+	--prim-color-alt-i-s: 83%;
+	--prim-color-alt-i-l: 44%;
+
+	--prim-color-alt-i: hsl(
+		var(--prim-color-alt-i-h),
+		var(--prim-color-alt-i-s),
+		var(--prim-color-alt-i-l)
+	);
+
+	// Color Alternate J
+	--prim-color-alt-j-h: 247;
+	--prim-color-alt-j-s: 10%;
+	--prim-color-alt-j-l: 30%;
+
+	--prim-color-alt-j: hsl(
+		var(--prim-color-alt-j-h),
+		var(--prim-color-alt-j-s),
+		var(--prim-color-alt-j-l)
+	);
+	--prim-color-alt-j-alpha-075: hsla(
+		var(--prim-color-alt-j-h),
+		var(--prim-color-alt-j-s),
+		var(--prim-color-alt-j-l),
+		0.75
+	);
+}
+
+:root {
+	@include primitives;
+}
diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
index 671eeead71bfd..5771a88a98885 100644
--- a/packages/design-system/src/css/_tokens.dark.scss
+++ b/packages/design-system/src/css/_tokens.dark.scss
@@ -1,334 +1,151 @@
 @use 'sass:math';
 
 @mixin theme {
-	--color-primary-h: 7;
-	--color-primary-s: 90%;
-	--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-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-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: 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-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-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-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-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-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-2-l: 4%;
-	--color-info-tint-2: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-tint-2-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-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-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-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-xlight-h: 0;
-	--color-text-xlight-s: 0%;
-	--color-text-xlight-l: 10%;
-	--color-text-xlight: hsl(
-		var(--color-text-xlight-h),
-		var(--color-text-xlight-s),
-		var(--color-text-xlight-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-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-foreground-xlight-h: 0;
-	--color-foreground-xlight-s: 0%;
-	--color-foreground-xlight-l: 10%;
-	--color-foreground-xlight: hsl(
-		var(--color-foreground-xlight-h),
-		var(--color-foreground-xlight-s),
-		var(--color-foreground-xlight-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-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-background-light-h: 220;
-	--color-background-light-s: 10%;
-	--color-background-light-l: 15%;
-	--color-background-light: hsl(
-		var(--color-background-light-h),
-		var(--color-background-light-s),
-		var(--color-background-light-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-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-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-canvas-background-h: 200;
-	--color-canvas-background-s: 10%;
-	--color-canvas-background-l: 10%;
-	--color-canvas-background: hsl(
-		var(--color-canvas-background-h),
-		var(--color-canvas-background-s),
-		var(--color-canvas-background-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: #dcdfea;
-
-	--color-code-background: #222020;
-	--color-code-background-readonly: #323230;
-	--color-code-foreground: #f8f8f2;
-	--color-code-caret: #f8f8f0;
-	--color-code-selection: #312b25;
-	--color-code-gutterBackground: #2d2a26;
-	--color-code-gutterForeground: #818080;
-	--color-code-lineHighlight: #312b25;
-	--color-code-tags-comment: #6272a4;
-	--color-code-tags-string: #f1fa8c;
-	--color-code-tags-primitive: #bd93f9;
-	--color-code-tags-keyword: #ff79c6;
-	--color-code-tags-operator: #ff79c6;
-	--color-code-tags-variable: #ea6465;
-	--color-code-tags-definition: #368da5;
+	// Primary tokens
+
+	// Text
+	--color-text-dark: var(--prim-gray-40);
+	--color-text-base: var(--prim-gray-200);
+	--color-text-light: var(--prim-gray-320);
+	--color-text-lighter: var(--prim-gray-740);
+	--color-text-xlight: var(--prim-gray-820);
+	--color-text-danger: var(--prim-color-alt-c-tint-150);
+
+	// Foreground
+	--color-foreground-xdark: var(--prim-gray-200);
+	--color-foreground-dark: var(--prim-gray-420);
+	--color-foreground-base: var(--prim-gray-670);
+	--color-foreground-light: var(--prim-gray-740);
+	--color-foreground-xlight: var(--prim-gray-820);
+
+	// Background
+	--color-background-dark: var(--prim-gray-70);
+	--color-background-medium: var(--prim-gray-540);
+	--color-background-base: var(--prim-gray-670);
+	--color-background-light: var(--prim-gray-820);
+	--color-background-xlight: var(--prim-gray-740);
+
+	// Secondary tokens
+
+	// Canvas
+	--color-canvas-background: var(--prim-gray-820);
+	--color-canvas-dot: var(--prim-gray-670);
+	--color-canvas-read-only-line: var(--prim-gray-800);
+	--color-canvas-node-background: var(--prim-gray-40);
+	--color-canvas-node-pinned-border: var(--prim-color-secondary-tint-100);
+	--color-canvas-selected: var(--prim-gray-0-alpha-025);
+	--node-type-main-color: var(--prim-gray-420);
+
+	// Expressions
+	--color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300);
+	--color-valid-resolvable-background: var(--prim-color-alt-a-alpha-025);
+	--color-invalid-resolvable-foreground: var(--prim-color-alt-c-tint-250);
+	--color-invalid-resolvable-background: var(--prim-color-alt-c-alpha-02);
+	--color-expression-editor-background: var(--prim-gray-800);
+	--color-expression-syntax-example: var(--prim-gray-670);
+
+	// Code
+	--color-code-tags-string: var(--prim-color-alt-f-tint-150);
+	--color-code-tags-primitive: var(--prim-color-alt-b-shade-100);
+	--color-code-tags-keyword: var(--prim-color-alt-g-tint-150);
+	--color-code-tags-operator: var(--prim-color-alt-h);
+	--color-code-tags-variable: var(--prim-color-primary-tint-100);
+	--color-code-tags-definition: var(--prim-color-alt-e);
+	--color-json-default: var(--prim-color-secondary-tint-200);
+	--color-json-null: var(--prim-color-alt-c-tint-150);
+	--color-json-boolean: var(--prim-color-alt-a);
+	--color-json-number: var(--prim-color-alt-a);
+	--color-json-string: var(--prim-color-secondary-tint-200);
+	--color-json-key: var(--prim-gray-670);
+	--color-json-brackets: var(--prim-gray-670);
+	--color-json-brackets-hover: var(--prim-color-alt-e);
+	--color-json-line: var(--prim-gray-200);
+	--color-json-highlight: var(--prim-gray-70);
+	--color-code-background: var(--prim-gray-800);
+	--color-code-background-readonly: var(--prim-gray-740);
+	--color-code-lineHighlight: var(--prim-gray-740);
+	--color-code-foreground: var(--prim-gray-70);
+	--color-code-caret: var(--prim-gray-10);
+	--color-code-selection: var(--prim-color-alt-e-alpha-04);
+	--color-code-gutterBackground: var(--prim-gray-670);
+	--color-code-gutterForeground: var(--prim-gray-320);
+	--color-code-tags-comment: var(--prim-gray-200);
+
+	// Variables
+	--color-variables-usage-font: var(--prim-color-alt-a-tint-300);
+	--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-disabled-border: transparent;
+	--color-button-primary-disabled-background: var(--prim-color-primary-alpha-04);
+
+	// Button secondary
+	--color-button-secondary-border: var(--prim-gray-420);
+
+	// Text button
+	--color-text-button-secondary-font: var(--prim-gray-320);
+
+	// Table
+	--color-table-header-background: var(--prim-gray-740);
+	--color-table-row-background: var(--prim-gray-820);
+	--color-table-row-even-background: var(--prim-gray-800);
+	--color-table-row-hover-background: var(--prim-gray-740);
+
+	// Notification
+	--color-notification-background: var(--prim-gray-740);
+
+	// NDV
+	--color-run-data-background: var(--prim-gray-800);
+	--color-ndv-droppable-parameter: var(--prim-color-primary);
+	--color-ndv-back-font: var(--prim-gray-0);
+	--color-ndv-ouptut-error-font: var(--prim-color-alt-c-tint-150);
+
+	// Notice
+	--color-notice-warning-border: var(--prim-color-alt-b-tint-250);
+	--color-notice-warning-background: var(--prim-color-alt-b-alpha-02);
+	--color-notice-font: var(--prim-gray-0);
+
+	// Callout
+	--color-callout-info-border: var(--prim-gray-420);
+	--color-callout-info-background: var(--prim-gray-740);
+	--color-callout-info-font: var(--prim-gray-0);
+	--color-callout-success-border: var(--color-success);
+	--color-callout-success-background: var(--prim-color-alt-a-alpha-025);
+	--color-callout-success-font: var(--prim-gray-0);
+	--color-callout-warning-border: var(--color-warning);
+	--color-callout-warning-background: var(--prim-color-alt-b-alpha-02);
+	--color-callout-warning-font: var(--prim-gray-0);
+	--color-callout-danger-border: var(--color-danger);
+	--color-callout-danger-background: var(--prim-color-alt-c-alpha-02);
+	--color-callout-danger-font: var(--prim-gray-0);
+	--color-callout-secondary-border: var(--color-secondary);
+	--color-callout-secondary-background: var(--prim-color-secondary-alpha-025);
+	--color-callout-secondary-font: var(--prim-gray-0);
+
+	// Dialog
+	--color-dialog-overlay-background: var(--prim-color-alt-j-alpha-075);
+	--color-dialog-overlay-background-dark: var(--prim-color-alt-j-alpha-075);
+
+	// Avatar
+	--color-avatar-font: var(--prim-gray-0);
+
+	// Value Survey
+	--color-value-survey-background: var(--prim-gray-740);
+	--color-value-survey-font: var(--prim-gray-0);
+
+	--border-color-base: var(--color-foreground-base);
+	--border-color-light: var(--color-foreground-light);
+
+	--border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+}
 
-	// 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)
-			);
-		}
-	}
+body[data-theme='dark'] {
+	@include theme;
 }
 
 @media (prefers-color-scheme: dark) {
-	body.theme-dark-beta {
+	body:not([data-theme]) {
 		@include theme;
 	}
 }
diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
index 1e8762c851358..cc58b8612832a 100644
--- a/packages/design-system/src/css/_tokens.scss
+++ b/packages/design-system/src/css/_tokens.scss
@@ -1,403 +1,233 @@
 @use 'sass:math';
 
 @mixin theme {
-	--color-primary-h: 6.9;
-	--color-primary-s: 100%;
-	--color-primary-l: 67.6%;
-	--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
-
-	--color-primary-tint-1-l: 88%;
-	--color-primary-tint-1: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-tint-1-l)
-	);
-
-	--color-primary-tint-2-l: 94.5%;
-	--color-primary-tint-2: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-tint-2-l)
-	);
-
-	--color-primary-tint-3-l: 96.9%;
-	--color-primary-tint-3: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-tint-3-l)
-	);
-
-	--color-primary-shade-1-l: 57.6%;
-	--color-primary-shade-1: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-shade-1-l)
-	);
-
-	--color-primary-shade-2-l: 23%;
-	--color-primary-shade-2: hsl(
-		var(--color-primary-h),
-		var(--color-primary-s),
-		var(--color-primary-shade-2-l)
-	);
-
-	--color-avatar-accent-1-h: 40;
-	--color-avatar-accent-1-s: 15.3%;
-	--color-avatar-accent-1-l: 88.4%;
-	--color-avatar-accent-1: hsl(
-		var(--color-avatar-accent-1-h),
-		var(--color-avatar-accent-1-s),
-		var(--color-avatar-accent-1-l)
-	);
-
-	--color-avatar-accent-2-h: 212;
-	--color-avatar-accent-2-s: 71%;
-	--color-avatar-accent-2-l: 48.6%;
-	--color-avatar-accent-2: hsl(
-		var(--color-avatar-accent-2-h),
-		var(--color-avatar-accent-2-s),
-		var(--color-avatar-accent-2-l)
-	);
-
-	--color-secondary-h: 247;
-	--color-secondary-s: 49%;
-	--color-secondary-l: 53%;
-	--color-secondary: hsl(
-		var(--color-secondary-h),
-		var(--color-secondary-s),
-		var(--color-secondary-l)
-	);
-
-	--color-secondary-tint-1-l: 85%;
-	--color-secondary-tint-1: hsl(
-		var(--color-secondary-h),
-		var(--color-secondary-s),
-		var(--color-secondary-tint-1-l)
-	);
-
-	--color-secondary-tint-2-l: 92%;
-	--color-secondary-tint-2: hsl(
-		var(--color-secondary-h),
-		var(--color-secondary-s),
-		var(--color-secondary-tint-2-l)
-	);
-
-	--color-secondary-tint-3-l: 95%;
-	--color-secondary-tint-3: hsl(
-		var(--color-secondary-h),
-		var(--color-secondary-s),
-		var(--color-secondary-tint-3-l)
-	);
-
-	--color-secondary-tint-4-l: 98%;
-	--color-secondary-tint-4: hsl(
-		var(--color-secondary-h),
-		var(--color-secondary-s),
-		var(--color-secondary-tint-4-l)
-	);
-
-	--color-success-h: 150.4;
-	--color-success-s: 60%;
-	--color-success-l: 40.4%;
-	--color-success: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
-
-	--color-success-tint-1-l: 90%;
-	--color-success-tint-1: hsl(
-		var(--color-success-h),
-		var(--color-success-s),
-		var(--color-success-tint-1-l)
-	);
-
-	--color-success-tint-2-l: 94.9%;
-	--color-success-tint-2: hsl(
-		var(--color-success-h),
-		var(--color-success-s),
-		var(--color-success-tint-2-l)
-	);
-
-	--color-success-light-h: 150;
-	--color-success-light-s: 54%;
-	--color-success-light-l: 70%;
-	--color-success-light: hsl(
-		var(--color-success-light-h),
-		var(--color-success-light-s),
-		var(--color-success-light-l)
-	);
-
-	--color-warning-h: 36;
-	--color-warning-s: 77%;
-	--color-warning-l: 57%;
-	--color-warning: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
-
-	--color-warning-tint-1-h: 35;
-	--color-warning-tint-1-s: 77%;
-	--color-warning-tint-1-l: 84%;
-	--color-warning-tint-1: hsl(
-		var(--color-warning-h),
-		var(--color-warning-s),
-		var(--color-warning-tint-1-l)
-	);
-
-	--color-warning-tint-2-h: 34;
-	--color-warning-tint-2-s: 80%;
-	--color-warning-tint-2-l: 96%;
-	--color-warning-tint-2: hsl(
-		var(--color-warning-tint-2-h),
-		var(--color-warning-tint-2-s),
-		var(--color-warning-tint-2-l)
-	);
-
-	--color-danger-h: 355;
-	--color-danger-s: 83%;
-	--color-danger-l: 52%;
-	--color-danger: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-
-	--color-danger-tint-1-l: 93.9%;
-	--color-danger-tint-1: hsl(
-		var(--color-danger-h),
-		var(--color-danger-s),
-		var(--color-danger-tint-1-l)
-	);
-	--color-danger-tint-2-l: 96.9%;
-	--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: 58%;
-	--color-info: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-
-	--color-info-tint-1-l: 88%;
-	--color-info-tint-1: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-tint-1-l));
-	--color-info-tint-2-l: 96%;
-	--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-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-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-dark-h: 0;
-	--color-text-dark-s: 0%;
-	--color-text-dark-l: 33.3%;
-	--color-text-dark: hsl(
-		var(--color-text-dark-h),
-		var(--color-text-dark-s),
-		var(--color-text-dark-l)
-	);
-
-	--color-text-base-h: 240;
-	--color-text-base-s: 4%;
-	--color-text-base-l: 51%;
-	--color-text-base: hsl(
-		var(--color-text-base-h),
-		var(--color-text-base-s),
-		var(--color-text-base-l)
-	);
-
-	--color-text-light-h: 220;
-	--color-text-light-s: 4.2%;
-	--color-text-light-l: 58.2%;
-	--color-text-light: hsl(
-		var(--color-text-light-h),
-		var(--color-text-light-s),
-		var(--color-text-light-l)
-	);
-
-	--color-text-lighter-h: 222;
-	--color-text-lighter-s: 16.7%;
-	--color-text-lighter-l: 88.2%;
-	--color-text-lighter: hsl(
-		var(--color-text-lighter-h),
-		var(--color-text-lighter-s),
-		var(--color-text-lighter-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-xdark-h: 220;
-	--color-foreground-xdark-s: 7.4%;
-	--color-foreground-xdark-l: 52.5%;
-	--color-foreground-xdark: hsl(
-		var(--color-foreground-xdark-h),
-		var(--color-foreground-xdark-s),
-		var(--color-foreground-xdark-l)
-	);
-
-	--color-foreground-dark-h: 228;
-	--color-foreground-dark-s: 9.6%;
-	--color-foreground-dark-l: 79.6%;
-	--color-foreground-dark: hsl(
-		var(--color-foreground-dark-h),
-		var(--color-foreground-dark-s),
-		var(--color-foreground-dark-l)
-	);
-
-	--color-foreground-base-h: 220;
-	--color-foreground-base-s: 20%;
-	--color-foreground-base-l: 88.2%;
-	--color-foreground-base: hsl(
-		var(--color-foreground-base-h),
-		var(--color-foreground-base-s),
-		var(--color-foreground-base-l)
-	);
-
-	--color-foreground-light-h: 0;
-	--color-foreground-light-s: 0%;
-	--color-foreground-light-l: 93.3%;
-	--color-foreground-light: hsl(
-		var(--color-foreground-light-h),
-		var(--color-foreground-light-s),
-		var(--color-foreground-light-l)
-	);
-
-	--color-foreground-xlight-h: 0;
-	--color-foreground-xlight-s: 0%;
-	--color-foreground-xlight-l: 100%;
-	--color-foreground-xlight: hsl(
-		var(--color-foreground-xlight-h),
-		var(--color-foreground-xlight-s),
-		var(--color-foreground-xlight-l)
-	);
-
-	--color-background-dark-h: 240;
-	--color-background-dark-s: 4.2%;
-	--color-background-dark-l: 18.8%;
-	--color-background-dark: hsl(
-		var(--color-background-dark-h),
-		var(--color-background-dark-s),
-		var(--color-background-dark-l)
-	);
-
-	--color-background-base-h: 220;
-	--color-background-base-s: 30%;
-	--color-background-base-l: 96.1%;
-	--color-background-base: hsl(
-		var(--color-background-base-h),
-		var(--color-background-base-s),
-		var(--color-background-base-l)
-	);
-
-	--color-background-light-h: 220;
-	--color-background-light-s: 60%;
-	--color-background-light-l: 99%;
-	--color-background-light: hsl(
-		var(--color-background-light-h),
-		var(--color-background-light-s),
-		var(--color-background-light-l)
-	);
-
-	--color-background-lighter-h: 252;
-	--color-background-lighter-s: 71.4%;
-	--color-background-lighter-l: 98.6%;
-	--color-background-lighter: hsl(
-		var(--color-background-lighter-h),
-		var(--color-background-lighter-s),
-		var(--color-background-lighter-l)
-	);
-
-	--color-background-xlight-h: 0;
-	--color-background-xlight-s: 0%;
-	--color-background-xlight-l: 100%;
-	--color-background-xlight: hsl(
-		var(--color-background-xlight-h),
-		var(--color-background-xlight-s),
-		var(--color-background-xlight-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-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)
-	);
-
-	--color-json-default: #5045a1;
-	--color-json-null: var(--color-danger);
-	--color-json-boolean: var(--color-success);
-	--color-json-number: var(--color-success);
-	--color-json-string: #5045a1;
-	--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: #e2e5ee;
-
-	--color-sticky-default-background-h: 46;
-	--color-sticky-default-background-s: 100%;
-	--color-sticky-default-background-l: 92%;
-	--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-code-background: #ffffff;
-	--color-code-background-readonly: #f5f2f0;
-	--color-code-foreground: #4d4d4c;
-	--color-code-caret: #aeafad;
-	--color-code-selection: #d6d6d6;
-	--color-code-gutterBackground: #ffffff;
-	--color-code-gutterForeground: #4d4d4c80;
-	--color-code-lineHighlight: #efefef;
-	--color-code-tags-comment: #8e908c;
-	--color-code-tags-string: #718c00;
-	--color-code-tags-primitive: #f5871f;
-	--color-code-tags-keyword: #8959a8;
-	--color-code-tags-operator: #3e999f;
-	--color-code-tags-variable: #c82829;
-	--color-code-tags-definition: #4271ae;
-
-	--color-expression-editor-background: #fff;
-	--color-valid-resolvable-foreground: #29a568;
-	--color-valid-resolvable-background: #e1f3d8;
-	--color-invalid-resolvable-foreground: #f45959;
-	--color-invalid-resolvable-background: #fef0f0;
-	--color-expression-syntax-example: #f0f0f0;
+	--color-primary-h: var(--prim-color-primary-h);
+	--color-primary-s: var(--prim-color-primary-s);
+	--color-primary-l: 68%;
+
+	// Primary tokens
+
+	// Primary
+	--color-primary-shade-1: var(--prim-color-primary-shade-100);
+	--color-primary: var(--prim-color-primary);
+	--color-primary-tint-1: var(--prim-color-primary-tint-200);
+	--color-primary-tint-2: var(--prim-color-primary-tint-250);
+	--color-primary-tint-3: var(--prim-color-primary-tint-300);
+
+	// Secondary
+	--color-secondary-shade-1: var(--prim-color-secondary-shade-100);
+	--color-secondary: var(--prim-color-secondary);
+	--color-secondary-tint-1: var(--prim-color-secondary-tint-300);
+	--color-secondary-tint-3: var(--prim-color-secondary-tint-400);
+
+	// Success
+	--color-success-shade-1: var(--prim-color-alt-a-shade-100);
+	--color-success: var(--prim-color-alt-a);
+	--color-success-light: var(--prim-color-alt-a-tint-300);
+	--color-success-light-2: var(--prim-color-alt-a-tint-400);
+	--color-success-tint-1: var(--prim-color-alt-a-tint-500);
+	--color-success-tint-2: var(--prim-color-alt-a-tint-550);
+
+	// Warning
+	--color-warning-shade-1: var(--prim-color-alt-b-shade-100);
+	--color-warning: var(--prim-color-alt-b);
+	--color-warning-tint-1: var(--prim-color-alt-b-tint-250);
+	--color-warning-tint-2: var(--prim-color-alt-b-tint-400);
+
+	// Danger
+	--color-danger-shade-1: var(--prim-color-alt-c-shade-100);
+	--color-danger: var(--prim-color-alt-c);
+	--color-danger-tint-1: var(--prim-color-alt-c-tint-400);
+	--color-danger-tint-2: var(--prim-color-alt-c-tint-450);
+
+	// Text
+	--color-text-dark: var(--prim-gray-740);
+	--color-text-base: var(--prim-gray-540);
+	--color-text-light: var(--prim-gray-420);
+	--color-text-lighter: var(--prim-gray-120);
+	--color-text-xlight: var(--prim-gray-0);
+	--color-text-danger: var(--prim-color-alt-c);
+
+	// Foreground
+	--color-foreground-xdark: var(--prim-gray-490);
+	--color-foreground-dark: var(--prim-gray-200);
+	--color-foreground-base: var(--prim-gray-120);
+	--color-foreground-light: var(--prim-gray-70);
+	--color-foreground-xlight: var(--prim-gray-0);
+
+	// Background
+	--color-background-dark: var(--prim-gray-820);
+	--color-background-medium: var(--prim-gray-120);
+	--color-background-base: var(--prim-gray-40);
+	--color-background-light: var(--prim-gray-10);
+	--color-background-xlight: var(--prim-gray-0);
+
+	// Secondary tokens
+
+	// Canvas
+	--color-canvas-background: var(--prim-gray-10);
+	--color-canvas-dot: var(--prim-gray-120);
+	--color-canvas-read-only-line: var(--prim-gray-40);
+	--color-canvas-node-background: var(--prim-gray-0);
+	--color-canvas-node-pinned-border: var(--color-secondary);
+	--color-canvas-selected: var(--prim-gray-70);
+	--node-type-main-color: var(--prim-gray-490);
+
+	// Sticky
+	--color-sticky-default-background: var(--prim-color-alt-d);
+	--color-sticky-default-border: var(--prim-color-alt-d-shade-150);
+	--color-sticky-font: var(--prim-gray-740);
+
+	// Expressions
+	--color-valid-resolvable-foreground: var(--prim-color-alt-a);
+	--color-valid-resolvable-background: var(--prim-color-alt-a-tint-500);
+	--color-invalid-resolvable-foreground: var(--prim-color-alt-c);
+	--color-invalid-resolvable-background: var(--prim-color-alt-c-tint-450);
+	--color-expression-editor-background: var(--prim-gray-0);
+	--color-expression-syntax-example: var(--prim-gray-40);
+
+	// Code
+	--color-code-tags-string: var(--prim-color-alt-f);
+	--color-code-tags-primitive: var(--prim-color-alt-b-shade-100);
+	--color-code-tags-keyword: var(--prim-color-alt-g);
+	--color-code-tags-operator: var(--prim-color-alt-h);
+	--color-code-tags-variable: var(--prim-color-alt-c-shade-100);
+	--color-code-tags-definition: var(--prim-color-alt-e-shade-150);
+	--color-json-default: var(--prim-color-secondary-shade-100);
+	--color-json-null: var(--prim-color-alt-c);
+	--color-json-boolean: var(--prim-color-alt-a);
+	--color-json-number: var(--prim-color-alt-a);
+	--color-json-string: var(--prim-color-secondary-shade-100);
+	--color-json-key: var(--prim-gray-670);
+	--color-json-brackets: var(--prim-gray-670);
+	--color-json-brackets-hover: var(--prim-color-alt-e);
+	--color-json-line: var(--prim-gray-200);
+	--color-json-highlight: var(--prim-gray-70);
+	--color-code-background: var(--prim-gray-0);
+	--color-code-background-readonly: var(--prim-gray-40);
+	--color-code-lineHighlight: var(--prim-gray-40);
+	--color-code-foreground: var(--prim-gray-670);
+	--color-code-caret: var(--prim-gray-420);
+	--color-code-selection: var(--prim-gray-120);
+	--color-code-gutterBackground: var(--prim-gray-0);
+	--color-code-gutterForeground: var(--prim-gray-320);
+	--color-code-tags-comment: var(--prim-gray-420);
+	--color-autocomplete-selected-background: var(--prim-color-alt-e);
+	--color-autocomplete-selected-font: var(--prim-gray-0);
+
+	// Variables
+	--color-variables-usage-font: var(--color-success);
+	--color-variables-usage-syntax-bg: var(--color-success-tint-2);
+
+	// Button primary
+	--color-button-primary-font: var(--prim-gray-0);
+	--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-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);
+
+	// Button secondary
+	--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-background: var(--prim-color-primary-tint-300);
+	--color-button-secondary-active-background: var(--prim-color-primary-tint-250);
+	--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);
+
+	// Button success, warning, danger
+	--color-button-success-font: var(--prim-gray-0);
+	--color-button-success-disabled-font: var(--prim-gray-0-alpha-075);
+	--color-button-warning-font: var(--color-text-xlight);
+	--color-button-warning-disabled-font: var(--prim-gray-0-alpha-075);
+	--color-button-danger-font: var(--color-text-xlight);
+	--color-button-danger-disabled-font: var(--prim-gray-0-alpha-075);
+
+	// Text button
+	--color-text-button-secondary-font: var(--prim-gray-670);
+
+	// 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-background: var(--prim-gray-0);
+
+	// Table
+	--color-table-header-background: var(--color-background-base);
+	--color-table-row-background: var(--color-background-xlight);
+	--color-table-row-even-background: var(--color-background-light);
+	--color-table-row-hover-background: var(--color-primary-tint-3);
+
+	// Notification
+	--color-notification-background: var(--color-background-xlight);
+
+	// Execution card
+	--execution-card-border-success: var(--prim-color-alt-a-tint-300);
+	--execution-card-border-error: var(--prim-color-alt-c-tint-250);
+	--execution-card-border-waiting: var(--prim-color-secondary-tint-300);
+	--execution-card-border-running: var(--prim-color-alt-b-tint-250);
+	--execution-card-border-unknown: var(--prim-gray-120);
+
+	// NDV
+	--color-run-data-background: var(--color-background-base);
+	--color-ndv-droppable-parameter: var(--color-secondary);
+	--color-ndv-back-font: var(--prim-gray-0);
+	--color-ndv-ouptut-error-font: var(--prim-color-alt-c);
+
+	// Notice
+	--color-notice-warning-border: var(--color-warning-tint-1);
+	--color-notice-warning-background: var(--color-warning-tint-2);
+	--color-notice-font: var(--color-text-base);
+
+	// Callout
+	--color-callout-info-border: var(--color-foreground-base);
+	--color-callout-info-background: var(--color-foreground-xlight);
+	--color-callout-info-font: var(--color-info);
+	--color-callout-info-icon: var(--color-info);
+	--color-callout-success-border: var(--color-success-light-2);
+	--color-callout-success-background: var(--color-success-tint-2);
+	--color-callout-success-font: var(--color-success);
+	--color-callout-success-icon: var(--color-success);
+	--color-callout-warning-border: var(--color-warning-tint-1);
+	--color-callout-warning-background: var(--color-warning-tint-2);
+	--color-callout-warning-font: var(--color-warning);
+	--color-callout-warning-icon: var(--color-warning);
+	--color-callout-danger-border: var(--color-danger-tint-1);
+	--color-callout-danger-background: var(--color-danger-tint-2);
+	--color-callout-danger-font: var(--color-danger);
+	--color-callout-danger-icon: var(--color-danger);
+	--color-callout-secondary-border: var(--color-secondary-tint-1);
+	--color-callout-secondary-background: var(--color-secondary-tint-3);
+	--color-callout-secondary-font: var(--color-secondary);
+	--color-callout-secondary-icon: var(--color-secondary);
+
+	// Dialog
+	--color-dialog-overlay-background: var(--prim-gray-0-alpha-075);
+	--color-dialog-overlay-background-dark: var(--prim-color-alt-j-alpha-075);
+
+	// Avatar
+	--color-avatar-font: var(--color-text-xlight);
+
+	// Value Survey
+	--color-value-survey-background: var(--prim-gray-740);
+	--color-value-survey-font: var(--prim-gray-0);
+
+	// Various
+	--color-avatar-accent-1: var(--prim-gray-120);
+	--color-avatar-accent-2: var(--prim-color-alt-e-shade-100);
+	--color-info: var(--prim-gray-420);
+	--color-info-tint-1: var(--prim-gray-120);
+	--color-info-tint-2: var(--prim-gray-40);
+	--color-grey: var(--prim-gray-200);
+	--color-light-grey: var(--prim-gray-120);
+	--color-neutral: var(--prim-gray-490);
+	--color-switch: var(--prim-color-alt-i);
 
 	// Generated Color Shades from 50 to 950
 	// Not yet used in design system
diff --git a/packages/design-system/src/css/common/var.scss b/packages/design-system/src/css/common/var.scss
index 24ea1e8cad5b1..6b81927a9dd51 100644
--- a/packages/design-system/src/css/common/var.scss
+++ b/packages/design-system/src/css/common/var.scss
@@ -21,162 +21,36 @@ $color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 $color-white: var(--color-foreground-xlight);
 $color-black: var(--color-foreground-dark);
 
-$color-primary-light-1: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	4%
-);
-$color-primary-light-2: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	8%
-);
-$color-primary-light-3: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	12%
-);
-$color-primary-light-4: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	16%
-);
-$color-primary-light-5: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	20%
-);
-$color-primary-light-6: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	24%
-);
-$color-primary-light-7: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	28%
-);
-$color-primary-light-8: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	32%
-);
-$color-primary-light-9: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	36%
-);
-$color-primary-light: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	30%
-);
-$color-primary-lighter: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	34%
-);
-
-$color-primary-shade-1: function.lightness(
-	--color-primary-h,
-	--color-primary-s,
-	--color-primary-l,
-	-(10)
-);
-
-$color-success-light-1: function.lightness(
-	--color-success-h,
-	--color-success-s,
-	--color-success-l,
-	4%
-);
-$color-success-light-3: function.lightness(
-	--color-success-h,
-	--color-success-s,
-	--color-success-l,
-	12%
-);
-$color-success-light-5: function.lightness(
-	--color-success-h,
-	--color-success-s,
-	--color-success-l,
-	20%
-);
-$color-success-light: function.lightness(
-	--color-success-h,
-	--color-success-s,
-	--color-success-l,
-	41%
-);
-$color-success-lighter: function.lightness(
-	--color-success-h,
-	--color-success-s,
-	--color-success-l,
-	48%
-);
-
-$color-warning-light-1: function.lightness(
-	--color-warning-h,
-	--color-warning-s,
-	--color-warning-l,
-	4%
-);
-$color-warning-light-3: function.lightness(
-	--color-warning-h,
-	--color-warning-s,
-	--color-warning-l,
-	12%
-);
-$color-warning-light-5: function.lightness(
-	--color-warning-h,
-	--color-warning-s,
-	--color-warning-l,
-	20%
-);
-$color-warning-light: function.lightness(
-	--color-warning-h,
-	--color-warning-s,
-	--color-warning-l,
-	34%
-);
-$color-warning-lighter: function.lightness(
-	--color-warning-h,
-	--color-warning-s,
-	--color-warning-l,
-	40%
-);
-
-$color-danger-light-1: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 4%);
-$color-danger-light-3: function.lightness(
-	--color-danger-h,
-	--color-danger-s,
-	--color-danger-l,
-	12%
-);
-$color-danger-light-5: function.lightness(
-	--color-danger-h,
-	--color-danger-s,
-	--color-danger-l,
-	20%
-);
-$color-danger-light: function.lightness(--color-danger-h, --color-danger-s, --color-danger-l, 24%);
+$color-primary-light-1: var(--color-primary);
+$color-primary-light-2: var(--prim-color-primary-tint-100); // ! TODO Token should be used here
+$color-primary-light-3: var(--prim-color-primary-tint-100); // ! TODO Token should be used here
+$color-primary-light-4: var(--color-primary-tint-1);
+$color-primary-light-5: var(--color-primary-tint-1);
+$color-primary-light-6: var(--color-primary-tint-2);
+$color-primary-light-9: var(--color-primary-tint-3);
+$color-primary-light: var(--color-primary-tint-3);
+$color-primary-lighter: var(--color-primary-tint-3);
+
+$color-success-light-1: var(--color-success);
+$color-success-light: var(--color-success-light);
+$color-success-lighter: var(--color-success-tint-1);
+
+$color-warning-light-1: var(--color-warning);
+$color-warning-light-3: var(--color-warning-tint-1);
+$color-warning-light-5: var(--color-warning-tint-1);
+$color-warning-light: var(--color-warning-tint-2);
+$color-warning-lighter: var(--color-warning-tint-2);
+
+$color-danger-light-1: var(--color-danger);
+$color-danger-light-3: var(--prim-color-alt-c-tint-150); // ! TODO Token should be used here
+$color-danger-light-5: var(--prim-color-alt-c-tint-150); // ! TODO Token should be used here
+$color-danger-light: var(--color-danger-tint-1);
 $color-danger-lighter: var(--color-danger-tint-2);
 
-$color-info-light-1: function.lightness(--color-info-h, --color-info-s, --color-info-l, 4%);
-$color-info-light-3: function.lightness(--color-info-h, --color-info-s, --color-info-l, 12%);
-$color-info-light-5: function.lightness(--color-info-h, --color-info-s, --color-info-l, 20%);
-$color-info-lighter: function.lightness(--color-info-h, --color-info-s, --color-info-l, 39%);
+$color-info-light-1: var(-color-info);
+$color-info-light-3: var(--prim-gray-320); // ! TODO Token should be used here
+$color-info-light-5: var(--prim-gray-200); // ! TODO Token should be used here
+$color-info-lighter: var(--color-info-tint-2);
 
 // Background
 /// color|1|Background Color|4
@@ -184,8 +58,9 @@ $background-color-base: var(--color-background-base);
 
 /* Link
 -------------------------- */
-$link-color: $color-primary-light-2;
-$link-hover-color: var(--color-primary);
+$link-color: var(--color-primary);
+$link-color-hover: var(--color-primary-shade-1);
+$link-color-active: var(--color-primary-shade-1);
 
 /* Border
 -------------------------- */
@@ -234,7 +109,7 @@ $font-size-extra-small: var(--font-size-2xs);
 $font-weight-primary: var(--font-weight-regular);
 /// fontLineHeight|1|Line Height|2
 $font-line-height-primary: 24px;
-$font-color-disabled-base: #bbb;
+$font-color-disabled-base: var(--color-text-light);
 
 /* z-index
 -------------------------- */
@@ -264,12 +139,12 @@ $checkbox-input-width: 14px;
 /// borderRadius||Border|2
 $checkbox-border-radius: var(--border-radius-small);
 /// color||Color|0
-$checkbox-background-color: $color-white;
+$checkbox-background-color: var(--color-background-xlight);
 $checkbox-input-border: var(--border-base);
 
 /// color||Color|0
 $checkbox-disabled-border-color: var(--border-color-base);
-$checkbox-disabled-input-fill: #edf2fc;
+$checkbox-disabled-input-fill: var(--color-background-base);
 $checkbox-disabled-icon-color: var(--color-text-lighter);
 
 $checkbox-disabled-checked-input-fill: var(--border-color-light);
@@ -310,7 +185,7 @@ $checkbox-bordered-mini-height: 28px;
 /// color||Color|0
 $checkbox-button-checked-background-color: var(--color-primary);
 /// color||Color|0
-$checkbox-button-checked-font-color: $color-white;
+$checkbox-button-checked-font-color: var(--color-text-xlight);
 /// color||Color|0
 $checkbox-button-checked-border-color: var(--color-primary);
 
@@ -327,12 +202,12 @@ $radio-input-width: 14px;
 /// borderRadius||Border|2
 $radio-input-border-radius: $border-radius-circle;
 /// color||Color|0
-$radio-input-background-color: $color-white;
+$radio-input-background-color: var(--color-background-xlight);
 $radio-input-border: var(--border-base);
 /// color||Color|0
 $radio-input-border-color: var(--border-color-base);
 /// color||Color|0
-$radio-icon-color: $color-white;
+$radio-icon-color: var(--color-text-xlight);
 
 $radio-disabled-input-border-color: $disabled-border-base;
 $radio-disabled-input-fill: $disabled-fill-base;
@@ -347,7 +222,7 @@ $radio-checked-font-color: var(--color-primary);
 /// color||Color|0
 $radio-checked-input-border-color: var(--color-primary);
 /// color||Color|0
-$radio-checked-input-background-color: $color-white;
+$radio-checked-input-background-color: var(--color-background-xlight);
 /// color||Color|0
 $radio-checked-icon-color: var(--color-primary);
 
@@ -373,7 +248,7 @@ $radio-button-font-size: $font-size-base;
 /// color||Color|0
 $radio-button-checked-background-color: var(--color-primary);
 /// color||Color|0
-$radio-button-checked-font-color: $color-white;
+$radio-button-checked-font-color: var(--color-background-xlight);
 /// color||Color|0
 $radio-button-checked-border-color: var(--color-primary);
 $radio-button-disabled-checked-fill: var(--border-color-light);
@@ -395,7 +270,7 @@ $select-input-font-size: 14px;
 
 $select-option-color: var(--color-text-dark);
 $select-option-disabled-color: var(--color-text-lighter);
-$select-option-disabled-background: $color-white;
+$select-option-disabled-background: var(--color-background-xlight);
 /// height||Other|4
 $select-option-height: 34px;
 $select-option-hover-background: $background-color-base;
@@ -468,7 +343,7 @@ $messagebox-danger-color: var(--color-danger);
 -------------------------- */
 $message-shadow: $box-shadow-base;
 $message-min-width: 380px;
-$message-background-color: #edf2fc;
+$message-background-color: var(--color-background-base);
 $message-padding: 16px 16px 16px 20px;
 /// color||Color|0
 $message-close-icon-color: var(--color-text-lighter);
@@ -585,7 +460,7 @@ $cascader-menu-shadow: $box-shadow-light;
 $cascader-node-background-hover: $background-color-base;
 $cascader-node-color-disabled: var(--color-text-lighter);
 $cascader-color-empty: var(--color-text-lighter);
-$cascader-tag-background: #f0f2f5;
+$cascader-tag-background: var(--color-background-base);
 
 /* Group
 -------------------------- */
@@ -599,7 +474,7 @@ $group-title-width: 66px;
 /* Tab
 -------------------------- */
 $tab-font-size: $font-size-base;
-$tab-border-line: 1px solid #e4e4e4;
+$tab-border-line: 1px solid var(--color-foreground-base);
 $tab-header-color-active: var(--color-text-light);
 $tab-header-color-hover: var(--color-text-dark);
 $tab-header-color: var(--color-text-dark);
@@ -612,14 +487,10 @@ $tab-vertical-header-count-fill: var(--color-text-light);
 /* Button
 -------------------------- */
 $button-font-size: var(--button-font-size, var(--font-size-s));
-
 $button-padding-vertical: var(--button-padding-vertical, var(--spacing-xs));
 $button-padding-horizontal: var(--button-padding-horizontal, var(--spacing-m));
-
 $button-border-radius: var(--button-border-radius, 4px);
 
-$button-border-color: var(--button-border-color, var(--color-primary));
-
 /// fontSize||Font|1
 $button-medium-font-size: $font-size-base;
 /// borderRadius||Border|2
@@ -644,42 +515,91 @@ $button-mini-padding-vertical: 7px;
 /// padding||Spacing|3
 $button-mini-padding-horizontal: 15px;
 
-$button-font-color: var(--button-color, var(--color-text-xlight));
-$button-background-color: var(--button-background-color, var(--color-primary));
+// All buttons colors (defaults to primary buttons style).
+// Default
+$button-font-color: var(--button-font-color, var(--color-button-primary-font));
+$button-border-color: var(--button-border-color, var(--color-button-primary-border));
+$button-background-color: var(--button-background-color, var(--color-button-primary-background));
+
+// Hover
+$button-hover-font-color: var(--button-hover-font-color, var(--color-button-primary-font));
+$button-hover-border-color: var(
+	--button-hover-border-color,
+	var(--color-button-primary-hover-active-border)
+);
+$button-hover-background-color: var(
+	--button-hover-background-color,
+	var(--color-button-primary-hover-active-background)
+);
 
-$button-active-color: var(--button-active-color, var(--color-text-xlight));
-$button-active-border-color: var(--button-active-border-color, var(--color-primary-shade-1));
+// Active
+$button-active-font-color: var(--button-active-font-color, var(--color-button-primary-font));
+$button-active-border-color: var(
+	--button-active-border-color,
+	var(--color-button-primary-hover-active-border)
+);
 $button-active-background-color: var(
 	--button-active-background-color,
-	var(--color-primary-shade-1)
+	var(--color-button-primary-hover-active-background)
 );
 
-$button-focus-outline-color: var(--button-focus-outline-color, var(--color-primary-tint-1));
+// Focus
+$button-focus-font-color: var(--button-focus-font-color, var(--color-button-primary-font));
+$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)
+);
+$button-focus-outline-color: var(
+	--button-focus-outline-color,
+	var(--color-button-primary-focus-outline)
+);
 
-$button-hover-color: var(--button-hover-color, var(--color-text-xlight));
-$button-hover-border-color: var(--button-hover-border-color, var(--color-primary-shade-1));
-$button-hover-background-color: var(--button-hover-background-color, var(--color-primary-shade-1));
+// Disabled
+$button-disabled-font-color: var(
+	--button-disabled-font-color,
+	var(--color-button-primary-disabled-font)
+);
+$button-disabled-border-color: var(
+	--button-disabled-border-color,
+	var(--color-button-primary-disabled-border)
+);
+$button-disabled-background-color: var(
+	--button-disabled-background-color,
+	var(--color-button-primary-disabled-background)
+);
+
+// Loading
+$button-loading-font-color: var(--button-loading-font-color, var(--color-button-primary-font));
+$button-loading-border-color: var(
+	--button-loading-border-color,
+	var(--color-button-primary-border)
+);
+$button-loading-background-color: var(
+	--button-loading-background-color,
+	var(--color-button-primary-background)
+);
 
 /// color||Color|0
-$button-default-font-color: var(--color-text-dark);
+$button-default-font-color: var(--color-text-dark); // ! Actually used by checkbox
 /// color||Color|0
-$button-default-background-color: $color-white;
+$button-default-background-color: $color-white; // ! Actually used by checkbox
 /// color||Color|0
-$button-default-border-color: var(--border-color-base);
+// $button-default-border-color: var(--border-color-base); // ! Never used
 
 /// color||Color|0
-$button-disabled-font-color: var(--button-disabled-color, var(--color-text-dark));
+// $button-disabled-font-color: var(--button-disabled-color, var(--color-text-dark));
 /// color||Color|0
-$button-disabled-background-color: var(--button-disabled-background-color, var(--color-light-grey));
+// $button-disabled-background-color: var(--button-disabled-background-color, var(--color-light-grey));
 /// color||Color|0
-$button-disabled-border-color: var(--button-disabled-border-color, var(--color-light-grey));
+// $button-disabled-border-color: var(--button-disabled-border-color, var(--color-light-grey));
 
 /// color||Color|0
-$button-primary-border-color: var(--color-primary);
+$button-primary-border-color: $button-border-color; // var(--color-primary);
 /// color||Color|0
-$button-primary-font-color: $color-white;
+$button-primary-font-color: $button-font-color; // $color-white;
 /// color||Color|0
-$button-primary-background-color: var(--color-primary);
+$button-primary-background-color: $button-background-color; // var(--color-primary);
 /// color||Color|0
 $button-success-border-color: var(--color-success);
 /// color||Color|0
@@ -716,7 +636,7 @@ $cascader-height: 200px;
 /* Switch
 -------------------------- */
 /// color||Color|0
-$switch-on-color: #13ce66;
+$switch-on-color: var(--color-switch);
 /// color||Color|0
 $switch-off-color: var(--color-text-light);
 /// fontSize||Font|1
@@ -749,8 +669,9 @@ $table-font-color: var(--color-text-dark);
 /// color||Color|0
 $table-header-font-color: var(--color-text-light);
 /// color||Color|0
-$table-row-hover-background-color: $background-color-base;
+$table-row-hover-background-color: var(--color-table-row-hover-background);
 $table-current-row-background-color: $color-primary-light-9;
+$table-row-striped-background-color: var(--color-table-row-even-background);
 /// color||Color|0
 $table-header-background-color: $color-white;
 $table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
@@ -780,7 +701,7 @@ $pagination-hover-color: var(--color-primary);
 /* Popup
 -------------------------- */
 /// color||Color|0
-$popup-modal-background-color: hsla(247, 14%, 30%, 0.75);
+$popup-modal-background-color: var(--color-dialog-overlay-background);
 /// opacity||Other|1
 $popup-modal-opacity: 0.65;
 
@@ -844,7 +765,7 @@ $tree-expand-icon-color: var(--color-text-lighter);
 /* Dropdown
 -------------------------- */
 $dropdown-menu-box-shadow: $box-shadow-light;
-$dropdown-menuItem-hover-fill: $color-primary-light-9;
+$dropdown-menuItem-hover-fill: var(--color-background-xlight);
 $dropdown-menuItem-hover-color: $link-color;
 
 /* Badge
@@ -934,7 +855,7 @@ $datepicker-off-font-color: var(--color-text-lighter);
 $datepicker-header-font-color: var(--color-text-dark);
 $datepicker-icon-color: var(--color-text-dark);
 $datepicker-border-color: $disabled-border-base;
-$datepicker-inner-border-color: #e4e4e4;
+$datepicker-inner-border-color: var(--color-foreground-base);
 /// color||Color|0
 $datepicker-inrange-background-color: var(--border-color-light);
 /// color||Color|0
@@ -1074,7 +995,7 @@ $link-info-font-color: var(--color-info);
 /// border||Other|4
 $calendar-border: $table-border;
 /// color||Other|4
-$calendar-selected-background-color: #f2f8fe;
+$calendar-selected-background-color: var(--color-background-base);
 $calendar-cell-width: 85px;
 
 /* Form
@@ -1087,7 +1008,7 @@ $form-label-font-size: $font-size-base;
 /// color||Color|0
 $avatar-font-color: var(--color-text-xlight);
 /// color||Color|0
-$avatar-background-color: #c0c4cc;
+$avatar-background-color: var(--color-foreground-dark);
 /// fontSize||Font Size|1
 $avatar-text-font-size: 14px;
 /// fontSize||Font Size|1
diff --git a/packages/design-system/src/css/index.scss b/packages/design-system/src/css/index.scss
index ab3010938644f..c37709df1b91c 100644
--- a/packages/design-system/src/css/index.scss
+++ b/packages/design-system/src/css/index.scss
@@ -1,3 +1,4 @@
+@use './primitives.scss';
 @use './tokens.scss';
 @use './tokens.dark.scss' as dark;
 @use './reset.scss';
diff --git a/packages/design-system/src/css/notification.scss b/packages/design-system/src/css/notification.scss
index d2dc68dd6522d..9ddd12ef9e777 100644
--- a/packages/design-system/src/css/notification.scss
+++ b/packages/design-system/src/css/notification.scss
@@ -9,7 +9,7 @@
 	box-sizing: border-box;
 	border: 1px solid var.$notification-border-color;
 	position: fixed;
-	background-color: var.$color-white;
+	background-color: var(--color-notification-background);
 	box-shadow: var.$notification-shadow;
 	transition:
 		opacity 0.3s,
diff --git a/packages/design-system/src/css/radio-button.scss b/packages/design-system/src/css/radio-button.scss
index 8cf3b3ae5f38c..c90cc7473ea37 100644
--- a/packages/design-system/src/css/radio-button.scss
+++ b/packages/design-system/src/css/radio-button.scss
@@ -12,11 +12,11 @@
 		line-height: 1;
 		white-space: nowrap;
 		vertical-align: middle;
-		background: var.$button-default-background-color;
+		background: var.$radio-input-background-color;
 		border: var(--border-base);
 		font-weight: var(--font-weight-bold);
 		border-left: 0;
-		color: var.$button-default-font-color;
+		color: var.$radio-font-color;
 		-webkit-appearance: none;
 		text-align: center;
 		box-sizing: border-box;
diff --git a/packages/design-system/src/css/skeleton.scss b/packages/design-system/src/css/skeleton.scss
index d0dda993f5c8f..3a0266e92c92b 100644
--- a/packages/design-system/src/css/skeleton.scss
+++ b/packages/design-system/src/css/skeleton.scss
@@ -40,6 +40,7 @@
 	-ms-flex-pack: center;
 	justify-content: center;
 	border-radius: 8px !important;
+	color: var(--color-foreground-dark);
 }
 
 .el-skeleton__image svg {
@@ -58,11 +59,16 @@
 		linear,
 		left top,
 		right top,
-		color-stop(25%, #f2f2f2),
-		color-stop(37%, #e6e6e6),
-		color-stop(63%, #f2f2f2)
+		color-stop(25%, var(--color-background-base)),
+		color-stop(37%, var(--color-background-medium)),
+		color-stop(63%, var(--color-background-base))
+	);
+	background: linear-gradient(
+		90deg,
+		var(--color-background-base) 25%,
+		var(--color-background-medium) 37%,
+		var(--color-background-base) 63%
 	);
-	background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
 	background-size: 400% 100%;
 	-webkit-animation: el-skeleton-loading 1.4s ease infinite;
 	animation: el-skeleton-loading 1.4s ease infinite;
diff --git a/packages/design-system/src/css/table.scss b/packages/design-system/src/css/table.scss
index b3cde7744ced0..ba3efdaf9cdff 100644
--- a/packages/design-system/src/css/table.scss
+++ b/packages/design-system/src/css/table.scss
@@ -489,7 +489,7 @@
 		& .el-table__body {
 			& tr.el-table__row--striped {
 				td {
-					background: #fafafa;
+					background: var.$table-row-striped-background-color;
 				}
 
 				&.current-row td {
diff --git a/packages/design-system/src/css/tag.scss b/packages/design-system/src/css/tag.scss
index 47d740fd4e752..a1634b5d4ab84 100644
--- a/packages/design-system/src/css/tag.scss
+++ b/packages/design-system/src/css/tag.scss
@@ -2,9 +2,9 @@
 @use './common/var';
 
 @mixin genTheme() {
-	background-color: var.$color-primary-lighter;
-	border-color: var.$color-primary-light-5;
-	color: var.$color-primary-light-1;
+	border-color: var(--color-callout-info-border);
+	background-color: var(--color-callout-info-background);
+	color: var(--color-callout-info-font);
 	font-weight: var(--font-weight-regular);
 
 	@include mixins.when(hit) {
@@ -20,14 +20,20 @@
 	}
 
 	&.el-tag--info {
-		background-color: var.$color-info-lighter;
-		border-color: var.$color-info-light-5;
-		color: var.$color-info-light-3;
+		border-color: var(--color-callout-info-border);
+		background-color: var(--color-callout-info-background);
+		color: var(--color-callout-info-font);
+		border-width: 1px;
+		border-style: solid;
 
 		@include mixins.when(hit) {
 			border-color: var.$tag-info-color;
 		}
 
+		.svg-inline--fa {
+			color: var(--color-callout-info-icon);
+		}
+
 		.el-tag__close {
 			color: var.$color-info-light-1;
 			&:hover {
@@ -38,9 +44,15 @@
 	}
 
 	&.el-tag--success {
-		background-color: var(--color-success-tint-2);
-		border-color: var(--color-success-tint-1);
-		color: var(--color-success);
+		border-color: var(--color-callout-success-border);
+		background-color: var(--color-callout-success-background);
+		color: var(--color-callout-success-font);
+		border-width: 1px;
+		border-style: solid;
+
+		.svg-inline--fa {
+			color: var(--color-callout-success-icon);
+		}
 
 		@include mixins.when(hit) {
 			border-color: var.$tag-success-color;
@@ -56,14 +68,20 @@
 	}
 
 	&.el-tag--warning {
-		background-color: var.$color-warning-lighter;
-		border-color: var.$color-warning-light-5;
-		color: var.$color-warning-light-3;
+		border-color: var(--color-callout-warning-border);
+		background-color: var(--color-callout-warning-background);
+		color: var(--color-callout-warning-font);
+		border-width: 1px;
+		border-style: solid;
 
 		@include mixins.when(hit) {
 			border-color: var.$tag-warning-color;
 		}
 
+		.svg-inline--fa {
+			color: var(--color-callout-warning-icon);
+		}
+
 		.el-tag__close {
 			color: var.$color-warning-light-1;
 			&:hover {
@@ -74,14 +92,20 @@
 	}
 
 	&.el-tag--danger {
-		background-color: var.$color-danger-lighter;
-		border-color: var.$color-danger-light-5;
-		color: var.$color-danger-light-3;
+		border-color: var(--color-callout-danger-border);
+		background-color: var(--color-callout-danger-background);
+		color: var(--color-callout-danger-font);
+		border-width: 1px;
+		border-style: solid;
 
 		@include mixins.when(hit) {
 			border-color: var.$tag-danger-color;
 		}
 
+		.svg-inline--fa {
+			color: var(--color-callout-danger-icon);
+		}
+
 		.el-tag__close {
 			color: var.$color-danger-light-1;
 			&:hover {
diff --git a/packages/design-system/src/css/upload.scss b/packages/design-system/src/css/upload.scss
index 89bc1c997fa36..0479771400cfa 100644
--- a/packages/design-system/src/css/upload.scss
+++ b/packages/design-system/src/css/upload.scss
@@ -195,7 +195,7 @@
 
 			.el-upload-list__item-name:hover,
 			.el-upload-list__item-name:focus {
-				color: var.$link-hover-color;
+				color: var.$link-color-hover;
 				cursor: pointer;
 			}
 
diff --git a/packages/design-system/src/styleguide/ColorCircles.vue b/packages/design-system/src/styleguide/ColorCircles.vue
index 5901e5366b9e5..e8efc3d9a7408 100644
--- a/packages/design-system/src/styleguide/ColorCircles.vue
+++ b/packages/design-system/src/styleguide/ColorCircles.vue
@@ -3,7 +3,7 @@
 		<div v-for="color in colors" :key="color" :class="$style.container">
 			<div :class="$style.circle" :style="{ backgroundColor: `var(${color})` }"></div>
 			<span>{{ color }}</span>
-			<span :class="$style.hsl">{{ hsl[color] }}</span>
+			<span :class="$style.hsl">{{ getHSLValue(color) }}</span>
 			<span :class="$style.color">{{ getHexValue(color) }}</span>
 		</div>
 	</div>
@@ -26,7 +26,22 @@ function hslToHex(h: number, s: number, l: number): string {
 	return `#${f(0)}${f(8)}${f(4)}`;
 }
 
+function resolveHSLCalc(hslString: string): string {
+	const calcRegex = /calc\(([^)]+)\)/;
+	const matchCalc = hslString.match(calcRegex);
+	if (!matchCalc) {
+		return hslString;
+	}
+	const expression = matchCalc[1];
+	const noPercentageExpression = expression.replace(/%/g, '');
+	const evaluation: number = eval(noPercentageExpression);
+	const finalPercentage = evaluation.toString() + '%';
+	const resolvedHslString = hslString.replace(calcRegex, finalPercentage);
+	return resolvedHslString;
+}
+
 function getHex(hsl: string): string {
+	hsl = resolveHSLCalc(hsl);
 	const colors = hsl
 		.replace('hsl(', '')
 		.replace(')', '')
@@ -87,6 +102,9 @@ export default defineComponent({
 		getHexValue(color: string) {
 			return getHex(this.hsl[color]);
 		},
+		getHSLValue(color: string) {
+			return resolveHSLCalc(this.hsl[color]);
+		},
 	},
 });
 </script>
diff --git a/packages/design-system/src/styleguide/colors.stories.mdx b/packages/design-system/src/styleguide/colors.stories.mdx
index 131a6950c0400..506f23f308c6e 100644
--- a/packages/design-system/src/styleguide/colors.stories.mdx
+++ b/packages/design-system/src/styleguide/colors.stories.mdx
@@ -2,7 +2,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
 import ColorCircles from './ColorCircles.vue';
 
 <Meta
-	title="Styleguide/Colors"
+	title="Styleguide/Colors Tokens"
 	parameters={{
 		design: {
 			type: 'figma',
@@ -31,7 +31,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="secondary">
 		{{
-			template: `<color-circles :colors="['--color-secondary', '--color-secondary-tint-1', '--color-secondary-tint-2', '--color-secondary-tint-3', '--color-secondary-tint-4']" />`,
+			template: `<color-circles :colors="['--color-secondary-shade-1', '--color-secondary', '--color-secondary-tint-1', '--color-secondary-tint-3']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -44,7 +44,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="success">
 		{{
-			template: `<color-circles :colors="['--color-success', '--color-success-tint-1', '--color-success-tint-2', '--color-success-light']" />`,
+			template: `<color-circles :colors="['--color-success-shade-1', '--color-success', '--color-success-light',  '--color-success-light-2', '--color-success-tint-1', '--color-success-tint-2']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -57,7 +57,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="warning">
 		{{
-			template: `<color-circles :colors="['--color-warning', '--color-warning-tint-1', '--color-warning-tint-2']" />`,
+			template: `<color-circles :colors="['--color-warning-shade-1', '--color-warning', '--color-warning-tint-1', '--color-warning-tint-2']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -70,33 +70,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="danger">
 		{{
-			template: `<color-circles :colors="['--color-danger', '--color-danger-tint-1', '--color-danger-tint-2']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Info
-
-<Canvas>
-	<Story name="info">
-		{{
-			template: `<color-circles :colors="['--color-info', '--color-info-tint-1', '--color-info-tint-2']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Neutral
-
-<Canvas>
-	<Story name="neutral">
-		{{
-			template: `<color-circles :colors="['--color-neutral']" />`,
+			template: `<color-circles :colors="['--color-danger-shade-1', '--color-danger', '--color-danger-tint-1', '--color-danger-tint-2']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -109,7 +83,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="text">
 		{{
-			template: `<color-circles :colors="['--color-text-dark', '--color-text-base', '--color-text-light', '--color-text-lighter', '--color-text-xlight']" />`,
+			template: `<color-circles :colors="['--color-text-dark', '--color-text-base', '--color-text-light', '--color-text-lighter', '--color-text-xlight', '--color-text-danger']" />`,
 			components: {
 				ColorCircles,
 			},
@@ -135,55 +109,7 @@ import ColorCircles from './ColorCircles.vue';
 <Canvas>
 	<Story name="background">
 		{{
-			template: `<color-circles :colors="['--color-background-dark', '--color-background-base', '--color-background-light', '--color-background-lighter', '--color-background-xlight']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Canvas
-
-<Canvas>
-	<Story name="canvas">
-		{{
-			template: `<color-circles :colors="['--color-canvas-background', '--color-canvas-dot']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="avatar">
-		{{
-			template: `<color-circles :colors="['--color-avatar-accent-1', '--color-avatar-accent-2']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="json">
-		{{
-			template: `<color-circles :colors="['--color-json-default', '--color-json-null', '--color-json-boolean', '--color-json-number', '--color-json-string', '--color-json-key', '--color-json-brackets', '--color-json-brackets-hover', '--color-json-line', '--color-json-highlight']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Sticky
-
-<Canvas>
-	<Story name="sticky">
-		{{
-			template: `<color-circles :colors="['--color-sticky-default-background', '--color-sticky-default-border']" />`,
+			template: `<color-circles :colors="['--color-background-dark', '--color-background-medium', '--color-background-base', '--color-background-light', '--color-background-xlight']" />`,
 			components: {
 				ColorCircles,
 			},
diff --git a/packages/design-system/src/styleguide/colorsprimitives.stories.mdx b/packages/design-system/src/styleguide/colorsprimitives.stories.mdx
new file mode 100644
index 0000000000000..4189e5ed6c720
--- /dev/null
+++ b/packages/design-system/src/styleguide/colorsprimitives.stories.mdx
@@ -0,0 +1,183 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import ColorCircles from './ColorCircles.vue';
+
+<Meta
+	title="Styleguide/Colors Primitives"
+	parameters={{
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
+		},
+	}}
+/>
+
+# Colors Primitives
+
+## Gray
+
+<Canvas>
+	<Story name="gray">
+		{{
+			template: `<color-circles :colors="['--prim-gray-820', '--prim-gray-800', '--prim-gray-740', '--prim-gray-670', '--prim-gray-540', '--prim-gray-490', '--prim-gray-420', '--prim-gray-320', '--prim-gray-200', '--prim-gray-120', '--prim-gray-70', '--prim-gray-40', '--prim-gray-10', '--prim-gray-0']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
+## Primary
+
+<Canvas>
+	<Story name="primary">
+		{{
+			template: `<color-circles :colors="['--prim-color-primary-shade-100', '--prim-color-primary', '--prim-color-primary-tint-100', '--prim-color-primary-tint-200', '--prim-color-primary-tint-250', '--prim-color-primary-tint-300']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
+## Secondary
+
+<Canvas>
+	<Story name="secondary">
+		{{
+			template: `<color-circles :colors="['--prim-color-secondary-shade-100', '--prim-color-secondary', '--prim-color-secondary-tint-100', '--prim-color-secondary-tint-200', '--prim-color-secondary-tint-300', '--prim-color-secondary-tint-400']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
+## Alternate A
+
+<Canvas>
+	<Story name="alternate-a">
+		{{
+			template: `<color-circles :colors="['--prim-color-alt-a-shade-100', '--prim-color-alt-a', '--prim-color-alt-a-tint-300', '--prim-color-alt-a-tint-400', '--prim-color-alt-a-tint-500', '--prim-color-alt-a-tint-550']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
+## Alternate B
+
+<Canvas>
+	<Story name="alternate-b">
+		{{
+			template: `<color-circles :colors="['--prim-color-alt-b-shade-100', '--prim-color-alt-b', '--prim-color-alt-b-tint-250', '--prim-color-alt-b-tint-400']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
+## Alternate C
+
+<Canvas>
+	<Story name="alternate-c">
+		{{
+			template: `<color-circles :colors="['--prim-color-alt-c-shade-100', '--prim-color-alt-c', '--prim-color-alt-c-tint-150', '--prim-color-alt-c-tint-250', '--prim-color-alt-c-tint-400', '--prim-color-alt-c-tint-450']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
+## Alternate D
+
+<Canvas>
+	<Story name="alternate-d">
+		{{
+			template: `<color-circles :colors="['--prim-color-alt-d-shade-150', '--prim-color-alt-d']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
+## Alternate E
+
+<Canvas>
+	<Story name="alternate-e">
+		{{
+			template: `<color-circles :colors="['--prim-color-alt-e-shade-150', '--prim-color-alt-e-shade-100', '--prim-color-alt-e']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
+## Alternate F
+
+<Canvas>
+	<Story name="alternate-f">
+		{{
+			template: `<color-circles :colors="['--prim-color-alt-f', '--prim-color-alt-f-tint-150']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
+## Alternate G
+
+<Canvas>
+	<Story name="alternate-g">
+		{{
+			template: `<color-circles :colors="['--prim-color-alt-g', '--prim-color-alt-g-tint-150']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
+## Alternate H
+
+<Canvas>
+	<Story name="alternate-h">
+		{{
+			template: `<color-circles :colors="['--prim-color-alt-h']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
+## Alternate I
+
+<Canvas>
+	<Story name="alternate-i">
+		{{
+			template: `<color-circles :colors="['--prim-color-alt-i']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
+
+## Alternate J
+
+<Canvas>
+	<Story name="alternate-j">
+		{{
+			template: `<color-circles :colors="['--prim-color-alt-j']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>
diff --git a/packages/editor-ui/public/google-auth/disabled.dark.png b/packages/editor-ui/public/google-auth/disabled.dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..485757f3746ba14ea86f7a1f8c1f91af077bee75
GIT binary patch
literal 4897
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

literal 0
HcmV?d00001

diff --git a/packages/editor-ui/public/google-auth/focus.dark.png b/packages/editor-ui/public/google-auth/focus.dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..369a6ca24df29d2c5c9ef4d28e330723eec0d7b6
GIT binary patch
literal 8513
zcmcJV^;cBw_xDLD=@O9ckOq<Np*s}mlJ16K0I4B{?(Xge0VSoon*ju+C5HZTbKjrm
zKX`sQvCfY7zOKF3I_ta+SWN|hiB5_R2M32KFDI=52M6!}e65fA>iK9rwC?_Vf_K#b
zNWxW*zdeA1qq>uqmeBHoKQcf|)S63sT-Q)^oU|LGVJWni5huWrmKqet;cF#VBH#-G
zx0-W0Fm9V?_S3PGNSbmFgOLjI-&k1gSjoO6)PJS*IvfKbXp$y^x8g$9^POYblg?a)
z&xy9SuDYAMF5i;~@8x>Oo#)BjG3e=T<F0V%n$O_1M-&|GcT`S<!Pf}qT$-BIOfPp)
z;z;le{>P{<58s-hmLARNF7Txmvwt#CqII?xff~sM;2I;n39JT)#}m%5gwQb;=NFb-
zCyEkn0m9c&Wx_XjqhWBy^yA(C#SaM#C_{{=1N_`b>|{VYvTTQ^0>hw%HBCc7htX;o
zucczUVjt7)F$%zK1TQWExZ&}l>g{a!CuFZ)lOoOHNiD?DJuu>Ss~x3E-^wzvDb}wp
zd|n3?7nb%iPZ^He!65%Af|t#W#i81|k1ey!=&jliwojja{7J(eCzd-fC!YTe(!Uno
zsOobcUg)_0AiN9oXRKIv<T)VLm~r{^>>Ge97ag!^^J8f};_<J$h(3L*e(51{%Sx8i
zb`0B2yo#7#tNNKP#rp(2X3D2`$e#Wik^UlY&4NWRyBLtJ-jl!{MyM+vG70PtUxMvR
zBGJjSTx(x+@=u;#O0Bz0FOQ&?{lV7&;bqwB$#FO8$mj_7%Cx0jG}wx8aiUi)av?ky
zuZD_>ibbr?F0f`mfpTVRLIV_G%h=MHK4DFw;Z(eJ_&L47qjOMaLiwzBUmpo641@js
zMF3mtT6V`*SP1*iLUEtgIWz3Oh5y#RKP+I=MHBUJwa7=T?XZuisNktUC4r@vT;EX%
z_z;3dkV`NeT6F1DPSqo`)%x-WU!xHCQgvDWvz`ICOrl6gDS&srl2{|z0%wCUmYlu3
z+_6iHLjN@Z4IrRZxaZ))Ovs;6<zDBArr@isp7G5Y$A7(aMimR0An)UlMOt1T`QI*O
zP*Dl2u^&a+d<gH(m`$ko@!W*ZdMB|El<toLdJSK+y8)0=VI5`_E?F-^tWe+?9zDLB
zaJ(dLr+qeEtJ7{%d9iK$3WpC8+N>ph$-0L7Y<j#{uFv>lyDSj^?k0CyjC|?Z<M3xw
zPdn{u{1@9Js_%UpSOSOr|40z`lzui9YGzpgzu0=<IQhA@WH}k^6`fQ8tk!%{LAPj)
zM>#+21ds~az*rfvRM)=|+dL_mv=KMSeTlw7CyMX740LqHQ(yc|#dE2^8@$R$8+w7?
z6-RI$VP6{sNH2|~?yWQUsbG7yaZbN$ahbBX@VmeX(*tJMFM1&sNazrl)So9va>x_>
z!(aOkO_9wO`02-;WHw`*iEA((FF?!)GdZO1U(GVP#%}kPOu>7Ay@IpjoL!~cE7|F0
zdkLt4s}l?iIH)kYHz5(?_Z$0X)cFyRsn5uiqpj}yt0tTMm$#~>ZbzY$9(I5Uqp_3I
z#t#xN8X|B5*%|$zlkcrkg-~uG?f09%F7tM#S<e&rONL+4;?hhO^*M(2THUvFoGaXl
zfF6YEVI)Su%Dpm{NcB?2t5(?6qMu|xA_|v-=NyA;?LZ#RA7<ld)wtyP#pYQ~an`9`
ziPSO&dy|dPs+MAyxiO!$u))Y1$8yZIftNd)TOxl}aCC%RYSy<un{xha)Vw>?44&`8
zIGTwbcaxhwIW80nF@%+sun1JA(A`pslh?J)eTQ(keS-ytMu%m^N*~{reY~foe3dep
z<*+?Ryu#_Ic;>cT!G3Ob#YC@>6j~#hdgu1WJDs%{t_Di!E)5LL`Te7mTH~7&y-_F_
z_III}@PR-d1c{hJG>6&0cG(YrTxRgHEiZO1%$7qmIr9Y7oyRKh&mz@xz4Y@hvh??G
z(yY;4$COma{Yi%%+cC3o3p8F`P8q9t9N7gA6*gFGQ5GP|zh``iqZNUrSQ}nMpXVT^
zbOFs@ix~Fr=uvvuqi-h@^YN}oDt#Eirw5)X#W_8;vEYIhiSh$DI?>r9;<}hDcF!pE
zCpn^!`&rgJ)PR!JC*~MKVqz*im??Lh&_n|A81BOrO<Cn86rS;!x<f|^w$hP}&4ip=
zi?ni#jR1@%HqC=+V*|<i(CWP1EfgM|Z{`DRi4Qv^u{)y!08`^qKPzgir(M;lG5s~I
zPM+%dn2kwZ9<ujd!Ppa*v7FI`rXx3%7=Lt?<s#+_wr}{R;!E|;2!!nA*Dm9nPLzvE
zkE9Yl&=6~Loi0+YoZ6MA=`ZsN4NDDt`>e>>EF5{EK%mrJPrz7Z)ldGXo%!Yqyc9Lc
z&}ium(?g!_7Fk<_kIOBy$q?Z}zTZ`5rQ8NfeqkvSar50;;>Fa&SCERt?K_ly0--2O
zBNE9KsM8~~^P@05ms;hmwA9ykeYZ`=Z}=x9JLsma);RE_^Z7^@?P`?rlHO~2*O#hJ
zOk2^|6r#~5`f}5!Q$DpdXvTHP+sI&^*w59L&`+`Jpvh+a8oc2C0|8;61+vG%#%}3P
zvpm8fdRDz#7E<!MCy7!I#L6)^Uexf~s1|7+M3{Dvpf_H}L;P&Z_P+Z`&QCFloPmYX
zBbcJfGM5S>`52DtBm=wH!CbXUk|QQFd9Uhwh|f=gx|>Y{b$i59OR))E<QrH&7vHur
z@={-aJ*@vwu0}X#m}#`DL{rNV<x7cSl67?UGtO`o1Rk6RSm?V323brH=dt(c)Es*)
z9X!t;nK6YIb5PN;SOA6CdPFZrR`_XicH9>YZ{%UijcM|_<5R(-B^;OduAkKAo7wad
z!k`T7BpnFvWwzXVcS%9^1m`&?lJ(RLcs*3ZY!_;^o(nx}2Fy5ILT=^5r6TCTd%nhO
zx%Mj-G~9K2p4up)zm@L6fnN!fMA*wk&+$HV*Fj!oDj>Ja==E@F2+6#C#{#Mkbo={(
z4FN({Z0aRbd72Jh5S>-0>=^sJ&O52^-i|j|c|$gB(s8jsTc-a-vrY0smVB`qx42HS
z-`@sM0ZYDYR&PsDZ$q{$`y;g&qq#Xlrxhs!YfW$(@FL73@|moJF7Za5>yh20FsBNI
zoHufo_}4u`If;tE_!Bh!{i7!zkz>5${f~5L9t3q4qsgRFRWZ7*A*!RCtg2Lbi0XO0
zgu*UDAx>$qcgTne1wdM*-PQ9nNQo(|Fv1MPK$QMPZRK@Myu?~&Civ?e=C>QeH>^D4
zuU!8?ukLvabhU<4of$5dKHg}tY^?i`b5u^(R%0L&>qc6Z4@})<+-0Lg84FVnIp!Xo
zlcQFaNgB_IC*Gfu{@hh*<EMbV={}`jFJZzvXygrZx3lJTX82KhfOk)23XzYP>lH}_
z8s;xG)dYQfY-FW2x#5Xq1658@hx%f^BVEYe`T?J=-A9~k-D&wSK*g3(Ubb;*QasjU
zeuzdInw>9O1+hEQ<&o~6bv9YOk>(Cu3~FPiAN@8Pw&na*$;-3RRQ(WnLU*08F<kgg
zI0IrqnWi|uB;!cZqIzvos=bVhmn^n-k>j2>ma`1~Ud+#iT~vns(`HYYvgva@nR_!f
zE)Po2L&7_>)gx+v@|BtQhfk}Elp5)#TbBs+!R;aQew9C_ap~riNl4INM`12<JzY8$
zwiN1hhR&aa!=R2%;3$*XnBV$z?_C;+yEA{o4<WGw=u~zyA4SL~9&~XcJs2ut^Ks2r
zU8^V)Vmy<TVRLV>mEJ)6n?4V<Zh4nDO9?j=>_g9Zmpfyf?vniV^|LCKi3f=B2Yl-u
z$Kdv=<!g=|-rp2lC~<yQXGpYnYuL&v%*AUm82WIRi<LJn3Y3ipm7|=1{M}{%f~)vu
zp$wPpTAv6<8;W!P(!b#x2=k6E6N~}-5;YdHw?sk{*zj1ig+X8Kn>STL40pP&zFbIR
zz|XiiU?h;zJh)Z+<)UEg7ea?q>K#Y;C8+qB7snZIhCA9+2HDfEUpKQ%1AYhu<J(}R
z!{aW{=_ds-?{rW5NNOC2|4H|6`bw(PkDgsET5Vb1KfcWkzQA{8u^#*Ki2SPBo8EU6
zzwSU`;Y{pksgiQu=`Ri9*D7ajI|ljYIjA43KpEy#=(rZ!KNDrEz_sI8)yl{$##|Ay
z_oD=M+M~?vpudmD4ylj%ETi<qx<#Rvm}95e!Vs3k>7ju}l!D9|Ia`}`G~J!#%>rIB
z9SR*H@d88#Y2keyQ@HXFZo6v>fQqJM=pM6&gej3m_E+6&4H}pcWL&&G60U*F)Y%xk
znW!pZZpuP)EnQrtETjTz{IXlO&yAo<>Z<+(hZg^-&A`aoO2gtc<$hwoE#x#eIUMA!
zQ?^62zyEjs%%l_iBYCId=bH`ekHnh4lnVF=enl1<PjjNNn%N}9F@7jI5#f#fSYDUN
zXTw*QGz%{xH>c_P4ZkK7D0qdh8hp^5#Z1dc5#iG^#akCT>*Dd=xG=(5`rhN=+uDY|
zfy7NhGUt|@a*L32%6WOV);sGj1iW9psE`j%@@2LiQ5V#!Z&h0RVytt(OX@Tg2PwA+
zm644^<Qd)k>N4d;@ccjEfbk)bewWS_!A+We@`aRCQo%kp3x;&OTFdKsKcK+WreeZK
zp(TxxC8MhNUw_}j+?QvIBI>Lk&bOw-BQqY@$gM=V_xE|NO|H85(2qq{hMH~Kf`$_M
zC?}^&&5lq^gu58>?#A2SnDe<++v1+UDW}vF9=ObgINdeTw+i%M2m&d_k@o|6qd|uX
zj*^%X9Cw_i$#W!^bqB6;Co|68-3@Es`w`!*(r3z=W6=nR_k7rJiEm(<sKq7lP$X!n
zgQOLKvEP45U7wk?IL23JK7AA#=A>3JXL!6TgUfD;GydI9=4GQ!Ml|@UIIz&x+ohe6
zOCXLH_{yY<9b+_PSaz01g@790dM~~#a@$An0bv<r3M$t8M5&tCv@MOD{cXUO%+7o?
zv)s6ikF_umnvSdT?RwHb$=0e{VHVjLF)e<)ROPh?5a7-A(8SM%-@02Av%*@qX}Llg
zcDhu@AF$+HmTie>?iZ()BcG~}>=Wsl6}Z$O8f42D1i<0?m8)lVTe|*u@NmBA8Xn%g
zxN0+vA=;`Z)qbPmt;z)ls|&W|xh~;+u&e2U%CewI62V*Jo?HnWM4~V}p1P6of1#tm
z<^SER?tP>KxO69#>pXG-#AebO7H2?4eb<QA0&mWOU?H^hmp@x2g>IS7Q-AuK?<5nM
z-!aO`v2}GP$eTkLY5R%hq1bBK{lQ*;Bg8W=WJZ0Kb6Y;>j)Kpig{sy~hwk!!dBcT;
zO9&<=n14(cc58eS7(`jNedEf_fZ1dsp}OHa^-0IXo!>J=W_!vCXub7KFuCWadbzz?
zZrCiq5t87~JDFc(zqnai6Q!r;iOWt26i&Cjc(T!}q%a0ezG;r@I^}eJQZxY=kvi3D
z5?aM%*Zdi0eDs^63v<I}oKJNPUvpR2sm3y0zSm(}$t|Ea;F1gB3*`6h^lB=yQzqs-
zTdfLRlHh+TD?YRb<i;zl%h;ICtdEm83Gtphkcu`$t35s{1V_onr!yj-AWDa8zQS$3
z@RigzMM3BoN~eXt!8KZna6)ocwj0O&s}Yk>`ap=sR!}Yn|C97ra5f%`^+NSx+n@Ua
zAPQah>-tx$^-dqCMN!r4^f<hzLz2|V%ieh|-n}8g&!mWa?@^ji@8OqfbCz6LELzV9
zr$tU2of0GJ;23@;y^RGhTXfT?GLS)(yg#91ET*cc^GHE_i{>#J4dgsYCEzK_k6*GB
z;74%}!#r{q8~Ou`!P7<D;cLNC$t+&QFhrlER8z#8@{}!o1H${H*?MbmgR}fyCepj1
zK2@Qe7_g#YH+&GT*ZTJ$oVP)l_WGN0<->3vlVXT?uu3S&zP(Ua?p7qH$MvPLmpNT5
zXZomRU2hrflV3(cZ2i0IsZd%%FNg7d9G19iaAG{LXq=FaIR|DegV8Ce2F6aD4eORi
ze@8Lt8o|peYK+Gf@#AZD+e*y`Wy-bnO#=2|GZq8Sd%w#wuO_Q#lX3d9jz(e#n!>Ug
z`LDRLF+p}lR{9NRYw(7hp<~GJ#Etb`8KryvV4Vc^Pxol=qsRB#>gJh4ute7q=1dJ^
z4@W}AmtE|~Nm?#psSm(EJmd|~Fjw5V7;T9hKS;+r5H@s;=cnaeB2y@0Xlbep#xmNM
z?T0ZHNd*|;p7xq3ZGLiXMyQ}%xx}E64$>6k03EenY_{N1Bs@Djo%WI5RdLISXIKn2
z1$)d<hX&MInOpyddMq%rHX_FP7~$7J*9_Q*g%Yh{w;*wDY5tT@1+^t_Hi0D6)rR}J
z@<ExQIZlN;34bqh-UFufh<qKzzq9Ha7m+PJU}D3k8lZwiw^sa_upx6+e59MVHk0V*
zHV5mwT+4>kU#?jz37zq!o0G$efxp2pY<;<8<+|BH|3LuC+NVz>UMc+URrw7*C&Kg*
znR-R0J{G1_GLfMRf=fQVEC%D<DES&b-#EOr_5Dq8{(9&!$Lm>S8A!%*n$qBc%5_s`
zWu2{a@>2k_7JAdNoU9giH3m}VApdFOp7*=2q<u^K+)J*V^=5F1oR9Rdr@`$g_%ery
z70<&q?AW{7(5L=E(1b*_B`Y|jigCNxo&(C*%i#$tX}`I|h8l1sdG0I~)S%4Zfk4xW
z!={K5ajochc{b2#2Ez2>W1t2Os8CR-KVVbYjwwIvfR4fUa&3At7hg`Vh&=Jo6m@c-
zRdt9zPsfg%xVBF|ht23}%E16PiYO4D|4G`d@8cBWycOVN{4HCRbh^R8p*tiAs=quW
zG|_p$k-<Hk&3}gz$eYp8S8etSVzC^ZF_6fV-=R7MSZlw6LksNL?TA4^q{%_5Ib6c)
znP7`7ltV*@iron}YAVoa8(?YD$TRQhy(V<c7=)@;^;(M+1k-<h3{9S#ij*N;BCE+y
z;mjg4viG%}L1xMQHRk(zaLYzbYgHqo_{K`tR7`hiMqcU4*tS{l3jhf4vL_;`i)|zs
zy3ttH+&^AmSYIdUm2;!~e7#&Z*FJT|UxmDAa1p>~+<{@_o9eb;Aohp5E;9=Ca2)gv
zJ4Qv}`cZB_Zd~z@iCE#WHNm-mXXpD&$s}am>rHzurX#Cq{K)5wObZguVX2H=eTb4M
zN5j0SsUevac9hf2G1S(o+1?XT_QvV!odp5BRrJ1z;L$~P99W`<f@5RBI+Yf*q>!y(
z)j1JkUTg3t@DJ&D|4Lpkyp}7BlVbgJRGrxP20(f>U59+I`l%5|PYdE9UA_K`%~{zV
zEt@(6X8rZ&bWmz%5SC$vM>FxnQ{SIdjTsV>#rTjh4-ue}X$ma{iRb$7K{f@WR-5`C
zM$7BfhJe*$@4wfo7s0cnCz1^Fe(_#g8;kpN&+q<j^;YN@$ye&!XK}rxVHdyf=YGQb
z&RHA{9?EUF7m5~|<-M)mvlGkiPQEo16XfKWzb=mYyP1}gk~=_eLFb?>{3m`KCFTq|
zg;A;!H%mX7k9{=iyma808-va_=u)%sCe#(E|AXWB6k7g~l3dPcQ14#TNS~Y-EE}mk
zF(-rn)0491Y0^LxjmLqhU!-8Sl~3y(P}Ph%$y?y4Hro#^%^>F3@BG9~J0?I(-yK=U
z?*V?VDHD<l?0RcYCWx}jml&7*G(S@lE%Kp0=cv)D@zh;cwTXVKKrg1){;GfP@zf6I
z%gmN-GUQVt2rlj{Yr7_E_)w2*;J3#;zM&iH3d$>gt^o$@Saa^b?HZ#>NP@*R>GIK6
zNyqSM2aK7MYb&qj1#i)lfbYbSX7~3GwZU&b8MRfZ1tYadzn#aQc7om;>)f7I@+gu`
z_K|}yO>W$q-D%NTMT1>`VUq08HA+N6G$T5qO>sUn5ER(i!tuFX{KUJ(x5=fGq!EI7
zLwFuAh0jCxgwF$2zGNr^F9b;)tCqBdrP@C}bYIbuov#gI-e2)yf{L4RgA+J!B$pfA
zO|<4Lu5nGq1=0lZ(~3Nb8#=eLQtYjt4qz27pA@EB6wWS^iO+rxDjKJv$q%2~o_Ioa
z1&{st#oNDK<gruRzOJ#Q<^k>_oKu%Q4a-POQm1|DKy-Ig)An01-m_vgLfh09%+BR8
zkfa&StjMs0&^eUP#t3%>VqbqaTat?Gg2;H7{<*AP`qXYl%02h1=z7L&hjt&4T;pV|
z5f|LtCCJNHhSw}sfJxa6q6<jEB8hqxCx%ixW<p93y~7}F(s8qyAB+DPz1`UWr`ssw
zwK&T(afjuJ`&i?1wSPok%kqC(&a16X_$`OHvZgrGSVzc=-TnNPh~=Q<gwz!{@SAP@
z9Ko{tabnTQ*mj^+D8m!_=pM7(Oc(=Iv-P1GvGU&f?FzYfpZFLsjxJ6HwtVnqrTC1m
za&v}J@dmSy80cWlT3x7Op_~w6RPit=*N#nhWXR8Tf~N3<n4!?Ckm%nsg<`ZnQ;znf
zySQYkzaiLDGlEz+j};v1dMZg{GhCqq@E_;U*%flE5P$mhQHcAjS`mf4r&CD-)H6j9
zz&ps>s7s04orYzEC)9LQCNteMCLma`Zi;eR)aZQLhIzr2<3U;#X!+i85^^*`fo|+w
zzAHF=xp9wEBz1e6C^TsebXW<c8nascDvL0+%Zdn_;*mI%GaKX(RiV2DZI=d1>({An
zTHSi>d7|QEuyOdtTfS$frZz-(R=UzdZ=l*)#K*m!_#47|(^VWPLy=CD7!-!>6%>8h
z<pd=zdH@*I$q9oVa?VSX{7xUl0JDNLIZDT~hI6R`R<C6*swEsjs>?SN0}Jnb>mnaT
zABwR~W<la(BuRaV&7_HkS%{xbk`fOO<tg-Kd`|t^PDEnMOMbDolp2CQ8VMpr@ec;@
z7vB6N0s%Um-NKr{*jbZ%={|aPIowLJPzijIJGn&(#{7A2EjC7X&DG)vEv%NfVH2~*
z@}JBYNTtff;XHv>n?%yxS<9^zV$wXdIZ?QcT;+Aqw<wpL0}OhKG&2evxp8f0bWs(_
zLrP21w3qKei{AkqF>ILX5UyFVYq0<F*Q?PuYH5Swg<AZ(){nkIkytqx=p!^e%ubWJ
zuJM@-1ET`FM5ZU9Pv3sbxXM-3{Q90-Q|b6o8yFXrU`f$NpYypgC+3l>na?j!70W-F
zD^L}CPU7AIdJ%6gAPh62-KlvM+Fy{VvIiD>bCRt;*co}ApGJ4(PAB1>SwQRP$X+yq
zeQ?Tl+rD6`*dA@yoXok<B^JOvNBWxK0fHz7RN%#_X<ViOma1HWGkel3@%^um^BxsT
zk|?6_cf&z2hKh4H2TI}-tGp(I6ufT0nek&^#~HTc1D<=d5ry&!V?W;<LnGELrr(A>
zyixD9GlD!)_ibSJLo|VW*;`+1ht}oWW|pi7F9Q;W87?G8#{zevdU4qCN9<Rv42qQ9
zDTToTSK?4oVnT$~K~1)NPY(?Arm-IR?!Kyu<6cXRCAZQ9C8RsH{>}1N!UDTKiFZO9
zcI8rkX3)Tw5kQ2AVVhGNY|Gbm$NJrkoR@0T0B(H~STZgXCsJz+qCtJ@pJNmeAmK;e
z8&Q3AsVf!oLk6t3ks-tr-{A!HBMdB&_C#b${O2v23zwxLA@8Sq5_{9>UC-YJ;qJRU
zM<5R9bG$_0C<6u;O?bY_0*m?I6C6Bx>KT4`(7E;5^bx$>8csivV#zNcaVfV8lg-x@
zI}rX`vY&aAhOZSx!6qdq*Q2F!7`pz%2lR<yi%6b9cq=5ED}cKxx?UvssFk%>314C+
z|FmJ+pK=nv(}qBKxRJ>6arw)G;@$S|gc1{<OD&jo{hE0SKEjyW@9iL6h{M#olBf@O
zw3G6vZ%2UNHp7h?+t`K#p8CLX-M77Wb(Rx=MY&|L&)7%b^NjJ+C8zA^I)NfnBO8d?
z^gzyH8zhFwT&~8!O_ksLnV2uMryndXf!9qw9BA<%=Oe~({slDtKTy_2{hc+tZEK+J
zU+ks#44)#K4_Y^0_|i`3Gc<B&b!Ph)ju1WbrF?rqc7d0m&z^lbWDalt<xBZ8&j`sX
z1A;OBf=L`uInREDk`0=^;7Kc7<86-RVrUT0KfEiJ>=|PH|4%6=b$^j1@;}%s0};1j
z_r&R@W4@=Jqj9uk7kw$h0cmyhn93jbW4w8SsER|nY^(a}i6eI(b_W}dab-Om`0GD>
ztmGNo={vP;x_O4m_fcX}Wo(H<J)9rzQlyj~9cDFFF{X(>)|tJOih~pG;>CRsS^uG{
zjg^@~N?oM5xO^|K-P5p?l<R1=DW||~fYv@l4VxYDML?7|5o)SW>!sRSIkEYiExHQv
zszc0PEKFM_5S5DA&;aADV5{%L^agT<2dL8ahovvw|3j3*NJzRE<JC`22Y&A+-PHck
z_v6TeI0Y7RZp0L1zVt=T1x)Qd(s;VndFNRJIwui%qo!<7AkmX}7<ZHY52<@5$7(oK
zz^;7Kh>4n^E(&<nPax%g;;2jBAvk8j2xUU@W*Wak`7DgmijhWoPA?OC+vz0YF{NhY
zKK1n(F)5GkzJ&P>fx~TLt|+HwB{Yet0m!M3^x(2Hs)Q-6s=Re<>mwA2Gw)CAqz|nr
z9F4tL-wG&`r|_u`(K09o<@$18JC}x42E$VRQ)G)nHA0RUuYlKWTDq<g5AzN6v*_$K
z+;;hK5VUec?~2oX8qRj=!@^r69hP&<7qg+(#6LGHiM!nb*t30U)Hi_$65=@Bzxm9Y
zq&0ye;k~}WgxfCiXF^0CGS=jMHRYn3GjbCrbC?_~d|5<DR*jR-IQ|t6TOn}%j98A$
zmFr~|YH4xm7E**IZ3`+4yQ$@jijAm`o{4do`#%C=#l$fXBAC&D-OCKUj#kAa5jfq|
zD+Pb~{@YYtTB<0I{0zqsQ6os{AuUmQ;fiNM7t^07#G*67PD$$+z2|=-;N)dgq^l*3
GgZ>ZvxJ3s5

literal 0
HcmV?d00001

diff --git a/packages/editor-ui/public/google-auth/normal.dark.png b/packages/editor-ui/public/google-auth/normal.dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..f27bb2433042aea5fc34e19fcf90944430ec331b
GIT binary patch
literal 8001
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

literal 0
HcmV?d00001

diff --git a/packages/editor-ui/public/google-auth/pressed.dark.png b/packages/editor-ui/public/google-auth/pressed.dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..4cb85e9b554a751b1cf7a7370bcbf85180c0fde7
GIT binary patch
literal 8483
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

literal 0
HcmV?d00001

diff --git a/packages/editor-ui/public/n8n-beta-logo-dark-mode.svg b/packages/editor-ui/public/n8n-beta-logo-dark-mode.svg
new file mode 100644
index 0000000000000..435361c802653
--- /dev/null
+++ b/packages/editor-ui/public/n8n-beta-logo-dark-mode.svg
@@ -0,0 +1,20 @@
+<svg width="201" height="40" viewBox="0 0 201 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1486_25932)">
+<mask id="mask0_1486_25932" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="143" height="40">
+<path d="M143 0H0V40H143V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1486_25932)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.9736 8C78.9736 12.4183 75.3919 16 70.9736 16C67.246 16 64.1138 13.4505 63.2257 10H52.0564C50.101 10 48.4323 11.4137 48.1108 13.3424L47.782 15.3152C47.4698 17.1883 46.5223 18.8185 45.1824 20C46.5223 21.1815 47.4698 22.8117 47.782 24.6848L48.1108 26.6576C48.4323 28.5863 50.101 30 52.0564 30H55.2257C56.1138 26.5495 59.246 24 62.9736 24C67.3919 24 70.9736 27.5817 70.9736 32C70.9736 36.4183 67.3919 40 62.9736 40C59.246 40 56.1138 37.4505 55.2257 34H52.0564C48.1457 34 44.8082 31.1727 44.1653 27.3152L43.8364 25.3424C43.515 23.4137 41.8462 22 39.8909 22H36.628C35.6294 25.2801 32.5802 27.6667 28.9736 27.6667C25.367 27.6667 22.3179 25.2801 21.3193 22H16.628C15.6294 25.2801 12.5802 27.6667 8.97363 27.6667C4.55536 27.6667 0.973633 24.0849 0.973633 19.6667C0.973633 15.2484 4.55536 11.6667 8.97363 11.6667C12.8204 11.6667 16.033 14.3817 16.7998 18H21.1475C21.9143 14.3817 25.1269 11.6667 28.9736 11.6667C32.8204 11.6667 36.033 14.3817 36.7998 18H39.8909C41.8462 18 43.515 16.5863 43.8364 14.6576L44.1653 12.6848C44.8082 8.8273 48.1457 6 52.0564 6H63.2257C64.1138 2.54955 67.246 0 70.9736 0C75.3919 0 78.9736 3.58172 78.9736 8ZM74.9736 8C74.9736 10.2091 73.1828 12 70.9736 12C68.7645 12 66.9736 10.2091 66.9736 8C66.9736 5.79086 68.7645 4 70.9736 4C73.1828 4 74.9736 5.79086 74.9736 8ZM8.97363 23.6667C11.1828 23.6667 12.9736 21.8758 12.9736 19.6667C12.9736 17.4575 11.1828 15.6667 8.97363 15.6667C6.76449 15.6667 4.97363 17.4575 4.97363 19.6667C4.97363 21.8758 6.76449 23.6667 8.97363 23.6667ZM28.9736 23.6667C31.1828 23.6667 32.9736 21.8758 32.9736 19.6667C32.9736 17.4575 31.1828 15.6667 28.9736 15.6667C26.7645 15.6667 24.9736 17.4575 24.9736 19.6667C24.9736 21.8758 26.7645 23.6667 28.9736 23.6667ZM62.9736 36C65.1828 36 66.9736 34.2091 66.9736 32C66.9736 29.7909 65.1828 28 62.9736 28C60.7645 28 58.9736 29.7909 58.9736 32C58.9736 34.2091 60.7645 36 62.9736 36Z" fill="#EA4B71"/>
+<path d="M86.9785 30.001H91.1554V21.1578C91.1554 18.2536 92.9175 16.981 94.908 16.981C96.8659 16.981 98.3996 18.2862 98.3996 20.962V30.001H102.576V20.1136C102.576 15.8389 100.096 13.3589 96.2133 13.3589C93.7659 13.3589 92.3954 14.3378 91.4164 15.6104H91.1554L90.7964 13.6852H86.9785V30.001Z" fill="white"/>
+<path d="M118.563 19.0041V18.8083C119.999 18.0904 121.435 16.8504 121.435 14.4031C121.435 10.8789 118.53 8.75781 114.517 8.75781C110.405 8.75781 107.468 11.0094 107.468 14.4683C107.468 16.8178 108.839 18.0904 110.34 18.8083V19.0041C108.676 19.5915 106.685 21.3536 106.685 24.2904C106.685 27.8473 109.622 30.3273 114.484 30.3273C119.346 30.3273 122.185 27.8473 122.185 24.2904C122.185 21.3536 120.227 19.6241 118.563 19.0041ZM114.484 11.7599C116.116 11.7599 117.323 12.8041 117.323 14.5662C117.323 16.3283 116.083 17.3726 114.484 17.3726C112.885 17.3726 111.547 16.3283 111.547 14.5662C111.547 12.7715 112.82 11.7599 114.484 11.7599ZM114.484 27.1947C112.591 27.1947 111.058 25.9873 111.058 23.9315C111.058 22.0715 112.33 20.6683 114.451 20.6683C116.54 20.6683 117.813 22.0389 117.813 23.9968C117.813 25.9873 116.344 27.1947 114.484 27.1947Z" fill="white"/>
+<path d="M126.428 30.001H130.605V21.1578C130.605 18.2536 132.367 16.981 134.358 16.981C136.316 16.981 137.849 18.2862 137.849 20.962V30.001H142.026V20.1136C142.026 15.8389 139.546 13.3589 135.663 13.3589C133.216 13.3589 131.845 14.3378 130.866 15.6104H130.605L130.246 13.6852H126.428V30.001Z" fill="white"/>
+</g>
+<path d="M198 12.5H157C155.343 12.5 154 13.8431 154 15.5V28.5C154 30.1569 155.343 31.5 157 31.5H198C199.657 31.5 201 30.1569 201 28.5V15.5C201 13.8431 199.657 12.5 198 12.5Z" fill="#EA4B71"/>
+<path d="M164.496 21.334C165.196 21.586 166.134 22.272 166.134 23.784C166.134 25.506 164.944 26.5 162.97 26.5H158.966V16.7H162.998C164.93 16.7 165.854 17.708 165.854 19.15C165.854 20.326 165.21 20.914 164.496 21.25V21.334ZM160.772 18.184V20.718H162.718C163.558 20.718 164.006 20.214 164.006 19.444C164.006 18.66 163.502 18.184 162.746 18.184H160.772ZM162.802 25.016C163.754 25.016 164.244 24.442 164.244 23.644C164.244 22.818 163.712 22.202 162.802 22.202H160.772V25.016H162.802ZM170.963 24.89H175.863V26.5H169.157V16.7H175.723V18.31H170.963V20.746H175.065V22.314H170.963V24.89ZM185.606 16.7V18.352H182.834V26.5H180.986V18.352H178.214V16.7H185.606ZM193.795 26.5L192.997 24.134H189.329L188.531 26.5H186.557L190.057 16.7H192.283L195.769 26.5H193.795ZM189.833 22.608H192.493L191.219 18.828H191.107L189.833 22.608Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1486_25932">
+<rect width="201" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/editor-ui/public/n8n-dev-logo-dark-mode.svg b/packages/editor-ui/public/n8n-dev-logo-dark-mode.svg
new file mode 100644
index 0000000000000..082462e55ee21
--- /dev/null
+++ b/packages/editor-ui/public/n8n-dev-logo-dark-mode.svg
@@ -0,0 +1,11 @@
+<svg width="240" height="40" viewBox="0 0 240 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1486_25943" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="143" height="40">
+<path d="M0 0H143V40H0V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1486_25943)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.974 7.99999C78.9759 9.94852 78.2666 11.8308 76.9792 13.2934C75.6919 14.7561 73.9149 15.6987 71.9819 15.9442C70.0489 16.1896 68.0927 15.7212 66.4806 14.6268C64.8685 13.5323 63.7112 11.8871 63.226 9.99999H52.056C51.1093 10.0001 50.1933 10.336 49.471 10.9479C48.7486 11.5599 48.2667 12.4082 48.111 13.342L47.782 15.315C47.4809 17.1296 46.5625 18.7845 45.182 20C46.5625 21.2155 47.4809 22.8704 47.782 24.685L48.111 26.658C48.2667 27.5918 48.7486 28.4401 49.471 29.052C50.1933 29.664 51.1093 29.9999 52.056 30H55.226C55.7128 28.1147 56.8704 26.4716 58.482 25.3788C60.0936 24.286 62.0484 23.8184 63.98 24.0638C65.9116 24.3091 67.6875 25.2505 68.9746 26.7115C70.2618 28.1725 70.972 30.0528 70.972 32C70.972 33.9471 70.2618 35.8274 68.9746 37.2885C67.6875 38.7495 65.9116 39.6909 63.98 39.9362C62.0484 40.1816 60.0936 39.714 58.482 38.6212C56.8704 37.5284 55.7128 35.8853 55.226 34H52.056C50.1624 33.9997 48.3304 33.3278 46.8857 32.1037C45.4409 30.8796 44.4772 29.1828 44.166 27.315L43.836 25.342C43.6803 24.4082 43.1984 23.5599 42.476 22.9479C41.7537 22.336 40.8377 22.0001 39.891 22H36.628C36.1269 23.6394 35.1128 25.0747 33.7348 26.0945C32.3568 27.1142 30.6878 27.6646 28.9735 27.6646C27.2592 27.6646 25.5902 27.1142 24.2122 26.0945C22.8342 25.0747 21.82 23.6394 21.319 22H16.628C16.0603 23.8624 14.8329 25.4538 13.1758 26.476C11.5187 27.4982 9.54577 27.881 7.62666 27.5527C5.70756 27.2244 3.97405 26.2075 2.75102 24.6926C1.52799 23.1777 0.899395 21.2687 0.983038 19.3236C1.06668 17.3784 1.85682 15.5305 3.20538 14.1261C4.55394 12.7218 6.36834 11.8575 8.30854 11.6951C10.2487 11.5327 12.1816 12.0835 13.7448 13.2442C15.308 14.4049 16.3942 16.0958 16.8 18H21.148C21.5311 16.2087 22.5172 14.603 23.9415 13.4511C25.3658 12.2992 27.1422 11.6708 28.974 11.6708C30.8058 11.6708 32.5822 12.2992 34.0065 13.4511C35.4308 14.603 36.4169 16.2087 36.8 18H39.89C40.8369 18.0001 41.7531 17.6643 42.4756 17.0524C43.1982 16.4404 43.6802 15.592 43.836 14.658L44.166 12.685C44.4772 10.8174 45.4408 9.12065 46.8853 7.8966C48.3298 6.67255 50.1616 6.00051 52.055 5.99999H63.225C63.7102 4.11284 64.8675 2.46765 66.4796 1.37321C68.0917 0.278773 70.0479 -0.189661 71.9809 0.0558311C73.9139 0.301323 75.6909 1.24386 76.9782 2.70654C78.2656 4.16921 78.9759 6.05146 78.974 7.99999ZM74.974 7.99999C74.974 9.06086 74.5526 10.0783 73.8024 10.8284C73.0523 11.5786 72.0349 12 70.974 12C69.9131 12 68.8957 11.5786 68.1456 10.8284C67.3954 10.0783 66.974 9.06086 66.974 7.99999C66.974 6.93913 67.3954 5.92171 68.1456 5.17156C68.8957 4.42142 69.9131 3.99999 70.974 3.99999C72.0349 3.99999 73.0523 4.42142 73.8024 5.17156C74.5526 5.92171 74.974 6.93913 74.974 7.99999ZM8.97399 23.667C10.0349 23.667 11.0523 23.2456 11.8024 22.4954C12.5526 21.7453 12.974 20.7279 12.974 19.667C12.974 18.6061 12.5526 17.5887 11.8024 16.8386C11.0523 16.0884 10.0349 15.667 8.97399 15.667C7.91312 15.667 6.89571 16.0884 6.14556 16.8386C5.39542 17.5887 4.97399 18.6061 4.97399 19.667C4.97399 20.7279 5.39542 21.7453 6.14556 22.4954C6.89571 23.2456 7.91312 23.667 8.97399 23.667ZM28.974 23.667C30.0349 23.667 31.0523 23.2456 31.8024 22.4954C32.5526 21.7453 32.974 20.7279 32.974 19.667C32.974 18.6061 32.5526 17.5887 31.8024 16.8386C31.0523 16.0884 30.0349 15.667 28.974 15.667C27.9131 15.667 26.8957 16.0884 26.1456 16.8386C25.3954 17.5887 24.974 18.6061 24.974 19.667C24.974 20.7279 25.3954 21.7453 26.1456 22.4954C26.8957 23.2456 27.9131 23.667 28.974 23.667ZM62.974 36C64.0349 36 65.0523 35.5786 65.8024 34.8284C66.5526 34.0783 66.974 33.0609 66.974 32C66.974 30.9391 66.5526 29.9217 65.8024 29.1716C65.0523 28.4214 64.0349 28 62.974 28C61.9131 28 60.8957 28.4214 60.1456 29.1716C59.3954 29.9217 58.974 30.9391 58.974 32C58.974 33.0609 59.3954 34.0783 60.1456 34.8284C60.8957 35.5786 61.9131 36 62.974 36Z" fill="#838383"/>
+<path d="M86.978 30.0009H91.155V21.1579C91.155 18.2539 92.917 16.9809 94.908 16.9809C96.866 16.9809 98.4 18.2859 98.4 20.9619V30.0009H102.576V20.1139C102.576 15.8389 100.096 13.3589 96.213 13.3589C93.766 13.3589 92.395 14.3379 91.416 15.6099H91.156L90.796 13.6849H86.98L86.978 30.0009ZM118.563 19.0039V18.8079C119.999 18.0899 121.435 16.8499 121.435 14.4029C121.435 10.8789 118.53 8.75793 114.517 8.75793C110.405 8.75793 107.468 11.0089 107.468 14.4679C107.468 16.8179 108.839 18.0899 110.34 18.8079V19.0039C109.257 19.396 108.323 20.1157 107.668 21.0631C107.013 22.0104 106.669 23.1383 106.685 24.2899C106.685 27.8469 109.622 30.3269 114.484 30.3269C119.346 30.3269 122.185 27.8469 122.185 24.2899C122.185 21.3539 120.227 19.6239 118.563 19.0039ZM114.484 11.7599C116.116 11.7599 117.323 12.8039 117.323 14.5659C117.323 16.3279 116.083 17.3729 114.484 17.3729C112.885 17.3729 111.547 16.3279 111.547 14.5659C111.547 12.7719 112.82 11.7599 114.484 11.7599ZM114.484 27.1949C112.591 27.1949 111.058 25.9869 111.058 23.9319C111.058 22.0719 112.33 20.6679 114.451 20.6679C116.54 20.6679 117.813 22.0379 117.813 23.9969C117.813 25.9869 116.344 27.1949 114.484 27.1949ZM126.428 30.0009H130.605V21.1579C130.605 18.2539 132.367 16.9809 134.358 16.9809C136.316 16.9809 137.849 18.2859 137.849 20.9619V30.0009H142.026V20.1139C142.026 15.8389 139.546 13.3589 135.663 13.3589C133.216 13.3589 131.845 14.3379 130.866 15.6099H130.605L130.246 13.6849H126.428V30.0009Z" fill="white"/>
+</g>
+<path d="M221.216 6.65698H159.716C157.231 6.65698 155.216 8.6717 155.216 11.157V30.657C155.216 33.1423 157.231 35.157 159.716 35.157H221.216C223.701 35.157 225.716 33.1423 225.716 30.657V11.157C225.716 8.6717 223.701 6.65698 221.216 6.65698Z" fill="#858585"/>
+<path d="M183.47 20.765C183.47 22.4964 183.241 23.924 182.782 25.048C182.331 26.172 181.715 27.05 180.935 27.682C180.156 28.3054 179.27 28.7444 178.277 28.999C177.292 29.253 176.271 29.38 175.212 29.38H170.609V12.322H174.917C176.008 12.322 177.063 12.437 178.08 12.667C179.106 12.8884 180.021 13.3027 180.825 13.91C181.637 14.5087 182.281 15.362 182.757 16.47C183.233 17.5694 183.47 19.001 183.47 20.765ZM179.286 20.765C179.286 19.2304 179.118 18.0694 178.782 17.282C178.453 16.494 178.002 15.9607 177.428 15.682C176.861 15.3954 176.221 15.252 175.508 15.252H174.646V26.463H175.508C176.255 26.463 176.911 26.303 177.477 25.983C178.044 25.655 178.487 25.0767 178.807 24.248C179.127 23.4194 179.287 22.2584 179.287 20.765H179.286ZM190.425 15.202V19.3H196.332V22.131H190.425V26.488H197.551V29.38H186.388V12.322H197.538L197.132 15.202H190.425ZM206.326 26.23L209.539 12.322H213.674L208.75 29.38H203.753L198.854 12.322H203.138L206.326 26.23Z" fill="white"/>
+</svg>
diff --git a/packages/editor-ui/public/n8n-logo-expanded-dark-mode.svg b/packages/editor-ui/public/n8n-logo-expanded-dark-mode.svg
new file mode 100644
index 0000000000000..5b6d83752e68c
--- /dev/null
+++ b/packages/editor-ui/public/n8n-logo-expanded-dark-mode.svg
@@ -0,0 +1,13 @@
+<svg width="58" height="16" viewBox="0 0 58 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1486_25927)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2 6.4C25.7089 6.4 24.4561 5.38018 24.1008 4H20.4331C19.651 4 18.9835 4.56546 18.8549 5.33696L18.7234 6.12608C18.5985 6.87531 18.2195 7.52738 17.6835 8C18.2195 8.47262 18.5985 9.12469 18.7234 9.87392L18.8549 10.663C18.9835 11.4345 19.651 12 20.4331 12H20.9008C21.2561 10.6198 22.5089 9.6 24 9.6C25.7673 9.6 27.2 11.0327 27.2 12.8C27.2 14.5673 25.7673 16 24 16C22.5089 16 21.256 14.9802 20.9008 13.6H20.4331C18.8688 13.6 17.5338 12.4691 17.2766 10.9261L17.1451 10.137C17.0165 9.36546 16.349 8.8 15.5669 8.8H14.2992C13.944 10.1802 12.6911 11.2 11.2 11.2C9.70893 11.2 8.45605 10.1802 8.10081 8.8H6.29919C5.94395 10.1802 4.69107 11.2 3.2 11.2C1.43269 11.2 0 9.76731 0 8C0 6.23269 1.43269 4.8 3.2 4.8C4.69107 4.8 5.94395 5.81982 6.29919 7.2H8.10081C8.45605 5.81982 9.70893 4.8 11.2 4.8C12.6911 4.8 13.944 5.81982 14.2992 7.2H15.5669C16.349 7.2 17.0165 6.63454 17.1451 5.86304L17.2766 5.07392C17.5338 3.53092 18.8688 2.4 20.4331 2.4H24.1008C24.456 1.01982 25.7089 0 27.2 0C28.9673 0 30.4 1.43269 30.4 3.2C30.4 4.96731 28.9673 6.4 27.2 6.4ZM27.2 4.8C28.0837 4.8 28.8 4.08366 28.8 3.2C28.8 2.31634 28.0837 1.6 27.2 1.6C26.3163 1.6 25.6 2.31634 25.6 3.2C25.6 4.08366 26.3163 4.8 27.2 4.8ZM3.2 9.6C4.08366 9.6 4.8 8.88366 4.8 8C4.8 7.11634 4.08366 6.4 3.2 6.4C2.31634 6.4 1.6 7.11634 1.6 8C1.6 8.88366 2.31634 9.6 3.2 9.6ZM12.8 8C12.8 8.88366 12.0837 9.6 11.2 9.6C10.3163 9.6 9.6 8.88366 9.6 8C9.6 7.11634 10.3163 6.4 11.2 6.4C12.0837 6.4 12.8 7.11634 12.8 8ZM25.6 12.8C25.6 13.6837 24.8837 14.4 24 14.4C23.1163 14.4 22.4 13.6837 22.4 12.8C22.4 11.9163 23.1163 11.2 24 11.2C24.8837 11.2 25.6 11.9163 25.6 12.8Z" fill="#EA4B71"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.0015 6.9183V6.84205C48.5598 6.56248 49.118 6.07957 49.118 5.12647C49.118 3.754 47.9888 2.92798 46.4282 2.92798C44.8296 2.92798 43.6877 3.80484 43.6877 5.15189C43.6877 6.06686 44.2206 6.56248 44.8042 6.84205V6.9183C44.1571 7.14705 43.3832 7.83328 43.3832 8.977C43.3832 10.3622 44.5251 11.328 46.4155 11.328C48.306 11.328 49.4098 10.3622 49.4098 8.977C49.4098 7.83328 48.6486 7.15975 48.0015 6.9183ZM46.4155 4.09712C47.0499 4.09712 47.5194 4.50378 47.5194 5.19001C47.5194 5.87624 47.0372 6.2829 46.4155 6.2829C45.7938 6.2829 45.2737 5.87624 45.2737 5.19001C45.2737 4.49107 45.7685 4.09712 46.4155 4.09712ZM46.4155 10.108C45.6797 10.108 45.0833 9.63782 45.0833 8.83721C45.0833 8.11285 45.5782 7.56641 46.4029 7.56641C47.2149 7.56641 47.7097 8.10015 47.7097 8.86263C47.7097 9.63782 47.1387 10.108 46.4155 10.108Z" fill="white"/>
+<path d="M51.3672 11.2009H52.9912V7.75707C52.9912 6.62606 53.6763 6.13044 54.4503 6.13044C55.2116 6.13044 55.8079 6.63876 55.8079 7.68082V11.2009H57.4319V7.35041C57.4319 5.68566 56.4676 4.71985 54.9578 4.71985C54.0062 4.71985 53.4733 5.10109 53.0927 5.59671H52.9912L52.8516 4.84693H51.3672V11.2009Z" fill="white"/>
+<path d="M36.9912 11.2009H35.3672V4.84693H36.8516L36.9912 5.59671H37.0927C37.4733 5.10109 38.0062 4.71985 38.9578 4.71985C40.4676 4.71985 41.4319 5.68566 41.4319 7.35041V11.2009H39.8079V7.68082C39.8079 6.63876 39.2116 6.13044 38.4503 6.13044C37.6763 6.13044 36.9912 6.62606 36.9912 7.75707V11.2009Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1486_25927">
+<rect width="58" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/editor-ui/public/n8n-nightly-logo-dark-mode.svg b/packages/editor-ui/public/n8n-nightly-logo-dark-mode.svg
new file mode 100644
index 0000000000000..997ffc65e17da
--- /dev/null
+++ b/packages/editor-ui/public/n8n-nightly-logo-dark-mode.svg
@@ -0,0 +1,11 @@
+<svg width="230" height="40" viewBox="0 0 230 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1486_25952" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="143" height="40">
+<path d="M0 0H143V40H0V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1486_25952)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.974 7.99999C78.9759 9.94852 78.2666 11.8308 76.9792 13.2934C75.6919 14.7561 73.9149 15.6987 71.9819 15.9442C70.0489 16.1896 68.0927 15.7212 66.4806 14.6268C64.8685 13.5323 63.7112 11.8871 63.226 9.99999H52.056C51.1093 10.0001 50.1933 10.336 49.471 10.9479C48.7486 11.5599 48.2667 12.4082 48.111 13.342L47.782 15.315C47.4809 17.1296 46.5625 18.7845 45.182 20C46.5625 21.2155 47.4809 22.8704 47.782 24.685L48.111 26.658C48.2667 27.5918 48.7486 28.4401 49.471 29.052C50.1933 29.664 51.1093 29.9999 52.056 30H55.226C55.7128 28.1147 56.8704 26.4716 58.482 25.3788C60.0936 24.286 62.0484 23.8184 63.98 24.0638C65.9116 24.3091 67.6875 25.2505 68.9746 26.7115C70.2618 28.1725 70.972 30.0528 70.972 32C70.972 33.9471 70.2618 35.8274 68.9746 37.2885C67.6875 38.7495 65.9116 39.6909 63.98 39.9362C62.0484 40.1816 60.0936 39.714 58.482 38.6212C56.8704 37.5284 55.7128 35.8853 55.226 34H52.056C50.1624 33.9997 48.3304 33.3278 46.8857 32.1037C45.4409 30.8796 44.4772 29.1828 44.166 27.315L43.836 25.342C43.6803 24.4082 43.1984 23.5599 42.476 22.9479C41.7537 22.336 40.8377 22.0001 39.891 22H36.628C36.1269 23.6394 35.1128 25.0747 33.7348 26.0945C32.3568 27.1142 30.6878 27.6646 28.9735 27.6646C27.2592 27.6646 25.5902 27.1142 24.2122 26.0945C22.8342 25.0747 21.82 23.6394 21.319 22H16.628C16.0603 23.8624 14.8329 25.4538 13.1758 26.476C11.5187 27.4982 9.54577 27.881 7.62666 27.5527C5.70756 27.2244 3.97405 26.2075 2.75102 24.6926C1.52799 23.1777 0.899395 21.2687 0.983038 19.3236C1.06668 17.3784 1.85682 15.5305 3.20538 14.1261C4.55394 12.7218 6.36834 11.8575 8.30854 11.6951C10.2487 11.5327 12.1816 12.0835 13.7448 13.2442C15.308 14.4049 16.3942 16.0958 16.8 18H21.148C21.5311 16.2087 22.5172 14.603 23.9415 13.4511C25.3658 12.2992 27.1422 11.6708 28.974 11.6708C30.8058 11.6708 32.5822 12.2992 34.0065 13.4511C35.4308 14.603 36.4169 16.2087 36.8 18H39.89C40.8369 18.0001 41.7531 17.6643 42.4756 17.0524C43.1982 16.4404 43.6802 15.592 43.836 14.658L44.166 12.685C44.4772 10.8174 45.4408 9.12065 46.8853 7.8966C48.3298 6.67255 50.1616 6.00051 52.055 5.99999H63.225C63.7102 4.11284 64.8675 2.46765 66.4796 1.37321C68.0917 0.278773 70.0479 -0.189661 71.9809 0.0558311C73.9139 0.301323 75.6909 1.24386 76.9782 2.70654C78.2656 4.16921 78.9759 6.05146 78.974 7.99999ZM74.974 7.99999C74.974 9.06086 74.5526 10.0783 73.8024 10.8284C73.0523 11.5786 72.0349 12 70.974 12C69.9131 12 68.8957 11.5786 68.1456 10.8284C67.3954 10.0783 66.974 9.06086 66.974 7.99999C66.974 6.93913 67.3954 5.92171 68.1456 5.17156C68.8957 4.42142 69.9131 3.99999 70.974 3.99999C72.0349 3.99999 73.0523 4.42142 73.8024 5.17156C74.5526 5.92171 74.974 6.93913 74.974 7.99999ZM8.97399 23.667C10.0349 23.667 11.0523 23.2456 11.8024 22.4954C12.5526 21.7453 12.974 20.7279 12.974 19.667C12.974 18.6061 12.5526 17.5887 11.8024 16.8386C11.0523 16.0884 10.0349 15.667 8.97399 15.667C7.91312 15.667 6.89571 16.0884 6.14556 16.8386C5.39542 17.5887 4.97399 18.6061 4.97399 19.667C4.97399 20.7279 5.39542 21.7453 6.14556 22.4954C6.89571 23.2456 7.91312 23.667 8.97399 23.667ZM28.974 23.667C30.0349 23.667 31.0523 23.2456 31.8024 22.4954C32.5526 21.7453 32.974 20.7279 32.974 19.667C32.974 18.6061 32.5526 17.5887 31.8024 16.8386C31.0523 16.0884 30.0349 15.667 28.974 15.667C27.9131 15.667 26.8957 16.0884 26.1456 16.8386C25.3954 17.5887 24.974 18.6061 24.974 19.667C24.974 20.7279 25.3954 21.7453 26.1456 22.4954C26.8957 23.2456 27.9131 23.667 28.974 23.667ZM62.974 36C64.0349 36 65.0523 35.5786 65.8024 34.8284C66.5526 34.0783 66.974 33.0609 66.974 32C66.974 30.9391 66.5526 29.9217 65.8024 29.1716C65.0523 28.4214 64.0349 28 62.974 28C61.9131 28 60.8957 28.4214 60.1456 29.1716C59.3954 29.9217 58.974 30.9391 58.974 32C58.974 33.0609 59.3954 34.0783 60.1456 34.8284C60.8957 35.5786 61.9131 36 62.974 36Z" fill="#EA4B71"/>
+<path d="M86.978 30.0009H91.155V21.1579C91.155 18.2539 92.917 16.9809 94.908 16.9809C96.866 16.9809 98.4 18.2859 98.4 20.9619V30.0009H102.576V20.1139C102.576 15.8389 100.096 13.3589 96.213 13.3589C93.766 13.3589 92.395 14.3379 91.416 15.6099H91.156L90.796 13.6849H86.98L86.978 30.0009ZM118.563 19.0039V18.8079C119.999 18.0899 121.435 16.8499 121.435 14.4029C121.435 10.8789 118.53 8.75793 114.517 8.75793C110.405 8.75793 107.468 11.0089 107.468 14.4679C107.468 16.8179 108.839 18.0899 110.34 18.8079V19.0039C109.257 19.396 108.323 20.1157 107.668 21.0631C107.013 22.0104 106.669 23.1383 106.685 24.2899C106.685 27.8469 109.622 30.3269 114.484 30.3269C119.346 30.3269 122.185 27.8469 122.185 24.2899C122.185 21.3539 120.227 19.6239 118.563 19.0039ZM114.484 11.7599C116.116 11.7599 117.323 12.8039 117.323 14.5659C117.323 16.3279 116.083 17.3729 114.484 17.3729C112.885 17.3729 111.547 16.3279 111.547 14.5659C111.547 12.7719 112.82 11.7599 114.484 11.7599ZM114.484 27.1949C112.591 27.1949 111.058 25.9869 111.058 23.9319C111.058 22.0719 112.33 20.6679 114.451 20.6679C116.54 20.6679 117.813 22.0379 117.813 23.9969C117.813 25.9869 116.344 27.1949 114.484 27.1949ZM126.428 30.0009H130.605V21.1579C130.605 18.2539 132.367 16.9809 134.358 16.9809C136.316 16.9809 137.849 18.2859 137.849 20.9619V30.0009H142.026V20.1139C142.026 15.8389 139.546 13.3589 135.663 13.3589C133.216 13.3589 131.845 14.3379 130.866 15.6099H130.605L130.246 13.6849H126.428V30.0009Z" fill="white"/>
+</g>
+<path d="M214.852 12.5H158.149C155.858 12.5 154 14.3576 154 16.649V27.351C154 29.6424 155.858 31.5 158.149 31.5H214.852C217.143 31.5 219.001 29.6424 219.001 27.351V16.649C219.001 14.3576 217.143 12.5 214.852 12.5Z" fill="#EA4B71"/>
+<path d="M162.985 26.3119L160.489 18.6879C160.53 18.9573 160.577 19.3039 160.632 19.7279C160.687 20.1473 160.732 20.6143 160.769 21.1289C160.81 21.6443 160.831 22.1799 160.831 22.7359V26.3119H158.923V16.8349H161.72L164.14 24.4179C164.067 23.9846 163.991 23.4309 163.914 22.7569C163.837 22.0823 163.798 21.3186 163.798 20.4659V16.8359H165.706V26.3119H162.985ZM173.596 16.8349V18.4759H171.641V24.6639H173.596V26.3119H167.443V24.6639H169.398V18.4759H167.443V16.8359L173.596 16.8349ZM179.073 26.5449C177.728 26.5449 176.7 26.1209 175.989 25.2729C175.282 24.4203 174.929 23.1803 174.929 21.5529C174.929 20.4776 175.125 19.5729 175.518 18.8389C175.91 18.1003 176.439 17.5419 177.104 17.1639C177.769 16.7853 178.512 16.5959 179.333 16.5959C180.026 16.5959 180.61 16.7029 181.083 16.9169C181.557 17.1316 181.979 17.4143 182.348 17.7649L181.172 18.9819C180.885 18.7266 180.61 18.5376 180.345 18.4149C180.08 18.2916 179.779 18.2299 179.442 18.2299C179.018 18.2299 178.64 18.3439 178.307 18.5719C177.979 18.7953 177.719 19.1533 177.527 19.6459C177.336 20.1333 177.241 20.7733 177.241 21.5659C177.241 22.3913 177.307 23.0479 177.439 23.5359C177.576 24.0239 177.781 24.3749 178.054 24.5889C178.327 24.7983 178.674 24.9029 179.094 24.9029C179.317 24.9029 179.527 24.8779 179.723 24.8279C179.919 24.7733 180.101 24.7026 180.27 24.6159V22.4499H179.08L178.861 20.8769H182.389V25.5879C181.916 25.8799 181.405 26.1126 180.858 26.2859C180.315 26.4593 179.72 26.5449 179.073 26.5449ZM188.078 26.3119V22.3189H185.781V26.3119H183.538V16.8349H185.781V20.4729H188.078V16.8349H190.321V26.3119H188.078ZM196.242 18.5519V26.3119H193.999V18.5519H191.339V16.8349H199.011L198.779 18.5519H196.242ZM200.508 26.3119V16.8349H202.751V24.5409H206.861L206.628 26.3119H200.508ZM212.665 22.7569V26.3119H210.423V22.7699L207.333 16.8349H209.787L211.585 20.9169L213.397 16.8349H215.756L212.665 22.7569Z" fill="white"/>
+</svg>
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 2450a45e7a846..fa1303626807e 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -35,13 +35,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
-import { useStorage } from '@vueuse/core';
 
 import BannerStack from '@/components/banners/BannerStack.vue';
 import Modals from '@/components/Modals.vue';
 import LoadingView from '@/views/LoadingView.vue';
 import Telemetry from '@/components/Telemetry.vue';
-import { HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from '@/constants';
+import { HIRING_BANNER, VIEWS } from '@/constants';
 
 import { userHelpers } from '@/mixins/userHelpers';
 import { loadLanguage } from '@/plugins/i18n';
@@ -212,12 +211,6 @@ export default defineComponent({
 			}
 			return;
 		},
-		setTheme() {
-			const theme = useStorage(LOCAL_STORAGE_THEME, undefined).value;
-			if (theme) {
-				window.document.body.classList.add(`theme-${theme}`);
-			}
-		},
 		async postAuthenticate() {
 			if (this.postAuthenticateDone) {
 				return;
@@ -235,7 +228,6 @@ export default defineComponent({
 		},
 	},
 	async created() {
-		this.setTheme();
 		await this.initialize();
 		this.logHiringBanner();
 		await this.authenticate();
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index ecd71cd7adc1d..1dc852bce10b5 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1121,6 +1121,7 @@ export interface UIState {
 	executionSidebarAutoRefresh: boolean;
 	bannersHeight: number;
 	bannerStack: BannerName[];
+	theme: ThemeOption;
 }
 
 export type IFakeDoor = {
@@ -1677,3 +1678,6 @@ export type ToggleNodeCreatorOptions = {
 	source?: NodeCreatorOpenSource;
 	nodeCreatorView?: string;
 };
+
+export type AppliedThemeOption = 'light' | 'dark';
+export type ThemeOption = AppliedThemeOption | 'system';
diff --git a/packages/editor-ui/src/components/Banner.vue b/packages/editor-ui/src/components/Banner.vue
index 45fd870516b00..c451fe5ef7a07 100644
--- a/packages/editor-ui/src/components/Banner.vue
+++ b/packages/editor-ui/src/components/Banner.vue
@@ -112,7 +112,7 @@ export default defineComponent({
 
 .dangerMessage {
 	composes: message;
-	color: var(--color-danger);
+	color: var(--color-callout-danger-font);
 }
 
 .banner {
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/theme.ts b/packages/editor-ui/src/components/CodeNodeEditor/theme.ts
index 3f76bb6fc8c5c..ffaaf0cd3598d 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/theme.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/theme.ts
@@ -61,6 +61,7 @@ export const codeNodeEditorTheme = ({
 		},
 		'&.cm-editor': {
 			...(isReadOnly ? { backgroundColor: 'var(--color-code-background-readonly)' } : {}),
+			borderColor: 'var(--border-color-base)',
 		},
 		'&.cm-editor.cm-focused': {
 			outline: 'none',
@@ -78,6 +79,7 @@ export const codeNodeEditorTheme = ({
 				: 'var(--color-code-gutterBackground)',
 			color: 'var(--color-code-gutterForeground)',
 			borderRadius: 'var(--border-radius-base)',
+			borderRightColor: 'var(--border-color-base)',
 		},
 		'.cm-tooltip': {
 			maxWidth: BASE_STYLING.tooltip.maxWidth,
diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
index 9ac581fb269f4..e8fe3283cf766 100644
--- a/packages/editor-ui/src/components/CollectionParameter.vue
+++ b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -208,7 +208,27 @@ export default defineComponent({
 		margin-top: var(--spacing-xs);
 
 		.button {
+			font-weight: var(--font-weight-normal);
+			--button-border-color: var(--color-foreground-base);
 			--button-background-color: var(--color-background-base);
+
+			--button-hover-font-color: var(--color-button-secondary-font);
+			--button-hover-border-color: var(--color-foreground-base);
+			--button-hover-background-color: var(--color-background-base);
+
+			--button-active-font-color: var(--color-button-secondary-font);
+			--button-active-border-color: var(--color-foreground-base);
+			--button-active-background-color: var(--color-background-base);
+
+			--button-focus-font-color: var(--color-button-secondary-font);
+			--button-focus-border-color: var(--color-foreground-base);
+			--button-focus-background-color: var(--color-background-base);
+
+			&:active,
+			&.active,
+			&:focus {
+				outline: none;
+			}
 		}
 	}
 
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index e05494f4ce9f6..c4f3de45c4224 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -53,7 +53,12 @@
 		<template #content>
 			<div :class="$style.container" data-test-id="credential-edit-dialog">
 				<div :class="$style.sidebar">
-					<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect"></n8n-menu>
+					<n8n-menu
+						mode="tabs"
+						:items="sidebarItems"
+						:transparentBackground="true"
+						@select="onTabSelect"
+					></n8n-menu>
 				</div>
 				<div v-if="activeTab === 'connection'" :class="$style.mainContent" ref="content">
 					<CredentialConfig
diff --git a/packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue b/packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue
index 309f021e86e17..b633369efb21c 100644
--- a/packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue
@@ -7,14 +7,16 @@
 </template>
 
 <script lang="ts" setup>
+import { useUIStore } from '@/stores';
 import { useRootStore } from '@/stores/n8nRoot.store';
 
 const { baseUrl } = useRootStore();
+const type = useUIStore().appliedTheme === 'dark' ? '.dark.png' : '.png';
 const googleAuthButtons = {
-	'--google-auth-btn-normal': `url(${baseUrl}google-auth/normal.png`,
-	'--google-auth-btn-focus': `url(${baseUrl}google-auth/focus.png`,
-	'--google-auth-btn-pressed': `url(${baseUrl}google-auth/pressed.png`,
-	'--google-auth-btn-disabled': `url(${baseUrl}google-auth/disabled.png`,
+	'--google-auth-btn-normal': `url(${baseUrl}google-auth/normal${type}`,
+	'--google-auth-btn-focus': `url(${baseUrl}google-auth/focus${type}`,
+	'--google-auth-btn-pressed': `url(${baseUrl}google-auth/pressed${type}`,
+	'--google-auth-btn-disabled': `url(${baseUrl}google-auth/disabled${type}`,
 };
 </script>
 
diff --git a/packages/editor-ui/src/components/Error/NodeErrorView.vue b/packages/editor-ui/src/components/Error/NodeErrorView.vue
index 965efcc39f61b..1fa91205239c6 100644
--- a/packages/editor-ui/src/components/Error/NodeErrorView.vue
+++ b/packages/editor-ui/src/components/Error/NodeErrorView.vue
@@ -271,7 +271,7 @@ export default defineComponent({
 }
 
 .error-message {
-	color: #ff0000;
+	color: var(--color-ndv-ouptut-error-font);
 	font-weight: bold;
 	font-size: 1.1rem;
 }
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index b5271d6ce70fa..2a1956481d284 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -1074,7 +1074,7 @@ export default defineComponent({
 		top: calc(var(--spacing-3xl) * -1);
 		z-index: 2;
 		padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
-		background: var(--color-background-base);
+		background: var(--color-table-header-background);
 
 		&:first-child {
 			padding-left: var(--spacing-s);
@@ -1085,7 +1085,7 @@ export default defineComponent({
 	td {
 		height: 100%;
 		padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
-		background: var(--color-background-xlight);
+		background: var(--color-table-row-background);
 
 		&:not(:first-child, :nth-last-child(-n + 3)) {
 			width: 100%;
@@ -1127,33 +1127,33 @@ export default defineComponent({
 		}
 
 		&:nth-child(even) td {
-			background: var(--color-background-light);
+			background: var(--color-table-row-even-background);
 		}
 
 		&:hover td {
-			background: var(--color-primary-tint-3);
+			background: var(--color-table-row-hover-background);
 		}
 
 		&.crashed td:first-child::before,
 		&.failed td:first-child::before {
-			background: hsl(var(--color-danger-h), 94%, 80%);
+			background: var(--execution-card-border-error);
 		}
 
 		&.success td:first-child::before {
-			background: hsl(var(--color-success-h), 60%, 70%);
+			background: var(--execution-card-border-success);
 		}
 
 		&.new td:first-child::before,
 		&.running td:first-child::before {
-			background: hsl(var(--color-warning-h), 94%, 80%);
+			background: var(--execution-card-border-running);
 		}
 
 		&.waiting td:first-child::before {
-			background: hsl(var(--color-secondary-h), 94%, 80%);
+			background: var(--execution-card-border-waiting);
 		}
 
 		&.unknown td:first-child::before {
-			background: var(--color-text-light);
+			background: var(--execution-card-border-unknown);
 		}
 	}
 }
@@ -1167,6 +1167,7 @@ export default defineComponent({
 .loadedAll {
 	text-align: center;
 	font-size: var(--font-size-s);
+	color: var(--color-text-light);
 	margin: var(--spacing-l) 0;
 }
 
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
index ba1a5558a9620..54058f63e8bfc 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
@@ -170,7 +170,7 @@ export default defineComponent({
 		}
 		&,
 		& .executionLink {
-			border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-warning-h), 94%, 80%);
+			border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-running);
 		}
 		.statusLabel,
 		.spinner {
@@ -181,15 +181,14 @@ export default defineComponent({
 	&.success {
 		&,
 		& .executionLink {
-			border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-success-h), 60%, 70%);
+			border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-success);
 		}
 	}
 
 	&.waiting {
 		&,
 		& .executionLink {
-			border-left: var(--spacing-4xs) var(--border-style-base)
-				hsl(var(--color-secondary-h), 94%, 80%);
+			border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-waiting);
 		}
 		.statusLabel {
 			color: var(--color-secondary);
@@ -199,7 +198,7 @@ export default defineComponent({
 	&.error {
 		&,
 		& .executionLink {
-			border-left: var(--spacing-4xs) var(--border-style-base) hsl(var(--color-danger-h), 94%, 80%);
+			border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-error);
 		}
 		.statusLabel {
 			color: var(--color-danger);
@@ -209,7 +208,7 @@ export default defineComponent({
 	&.unknown {
 		&,
 		& .executionLink {
-			border-left: var(--spacing-4xs) var(--border-style-base) var(--color-text-light);
+			border-left: var(--spacing-4xs) var(--border-style-base) var(--execution-card-border-unknown);
 		}
 	}
 }
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
index 5468f6831fded..be5c9c78d5900 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
@@ -296,19 +296,7 @@ export default defineComponent({
 }
 
 .debugLink {
-	padding: 0;
+	height: 42px;
 	margin-right: var(--spacing-xs);
-
-	&.secondary {
-		a span {
-			color: var(--color-primary-shade-1);
-		}
-	}
-
-	a span {
-		display: block;
-		padding: var(--spacing-xs) var(--spacing-m);
-		color: var(--color-text-xlight);
-	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/theme.ts b/packages/editor-ui/src/components/ExpressionEditorModal/theme.ts
index 5369f9c32ce0f..f47f7c1535ec3 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/theme.ts
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/theme.ts
@@ -18,6 +18,7 @@ const commonThemeProps = {
 		height: '220px',
 		padding: 'var(--spacing-xs)',
 		color: 'var(--input-font-color, var(--color-text-dark))',
+		caretColor: 'var(--color-code-caret)',
 	},
 	'.cm-line': {
 		padding: '0',
diff --git a/packages/editor-ui/src/components/ExpressionParameterInput.vue b/packages/editor-ui/src/components/ExpressionParameterInput.vue
index ad9093f180027..edc093af53446 100644
--- a/packages/editor-ui/src/components/ExpressionParameterInput.vue
+++ b/packages/editor-ui/src/components/ExpressionParameterInput.vue
@@ -164,6 +164,10 @@ export default defineComponent({
 .expression-parameter-input {
 	position: relative;
 
+	:global(.cm-editor) {
+		background-color: var(--color-code-background);
+	}
+
 	.all-sections {
 		height: 30px;
 		display: flex;
@@ -188,7 +192,7 @@ export default defineComponent({
 	position: absolute;
 	right: 0;
 	bottom: 0;
-	background-color: white;
+	background-color: var(--color-code-background);
 	padding: 3px;
 	line-height: 9px;
 	border: var(--border-base);
@@ -219,6 +223,6 @@ export default defineComponent({
 .focused > .expression-editor-modal-opener {
 	border-color: var(--color-secondary);
 	border-bottom-right-radius: 0;
-	background-color: white;
+	background-color: var(--color-code-background);
 }
 </style>
diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index 6c8fe3ae420a2..3ce36f6f5b484 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -347,8 +347,28 @@ export default defineComponent({
 	padding-left: var(--spacing-s);
 
 	:deep(.button) {
-		--button-background-color: var(--color-background-base);
+		font-weight: var(--font-weight-normal);
+		--button-font-color: var(--color-text-dark);
 		--button-border-color: var(--color-foreground-base);
+		--button-background-color: var(--color-background-base);
+
+		--button-hover-font-color: var(--color-text-dark);
+		--button-hover-border-color: var(--color-foreground-base);
+		--button-hover-background-color: var(--color-background-base);
+
+		--button-active-font-color: var(--color-text-dark);
+		--button-active-border-color: var(--color-foreground-base);
+		--button-active-background-color: var(--color-background-base);
+
+		--button-focus-font-color: var(--color-text-dark);
+		--button-focus-border-color: var(--color-foreground-base);
+		--button-focus-background-color: var(--color-background-base);
+
+		&:active,
+		&.active,
+		&:focus {
+			outline: none;
+		}
 	}
 }
 
diff --git a/packages/editor-ui/src/components/HtmlEditor/theme.ts b/packages/editor-ui/src/components/HtmlEditor/theme.ts
index 1fad0ff3eee01..78e90039ad13c 100644
--- a/packages/editor-ui/src/components/HtmlEditor/theme.ts
+++ b/packages/editor-ui/src/components/HtmlEditor/theme.ts
@@ -20,6 +20,7 @@ export const theme = ({ isReadOnly }: { isReadOnly: boolean }) => [
 		},
 		'&.cm-editor': {
 			...(isReadOnly ? { backgroundColor: 'var(--color-code-background-readonly)' } : {}),
+			borderColor: 'var(--border-color-base)',
 		},
 		'&.cm-editor.cm-focused': {
 			outline: '0',
@@ -40,6 +41,7 @@ export const theme = ({ isReadOnly }: { isReadOnly: boolean }) => [
 			color: 'var(--color-code-gutterForeground)',
 			borderTopLeftRadius: 'var(--border-radius-base)',
 			borderBottomLeftRadius: 'var(--border-radius-base)',
+			borderRightColor: 'var(--border-color-base)',
 		},
 		'.cm-scroller': {
 			overflow: 'auto',
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
index c98762658597a..e0020daf3d351 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue
@@ -140,7 +140,7 @@ export default defineComponent({
 	flex-direction: column;
 	position: absolute;
 	z-index: 2; // cover tooltips
-	background: white;
+	background: var(--color-code-background);
 	border: var(--border-base);
 	border-top: none;
 	width: 100%;
@@ -148,6 +148,10 @@ export default defineComponent({
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 
+	:global(.cm-editor) {
+		background-color: var(--color-code-background);
+	}
+
 	.header,
 	.body,
 	.footer {
@@ -179,7 +183,7 @@ export default defineComponent({
 			display: inline-block;
 			font-size: var(--font-size-2xs);
 			height: var(--font-size-m);
-			background-color: #f0f0f0;
+			background-color: var(--color-expression-syntax-example);
 			margin-left: var(--spacing-5xs);
 			margin-right: var(--spacing-5xs);
 		}
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/theme.ts b/packages/editor-ui/src/components/InlineExpressionEditor/theme.ts
index 0e11f5e8c92a1..3a92747e195e1 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/theme.ts
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/theme.ts
@@ -8,6 +8,7 @@ const commonThemeProps = {
 	'.cm-content': {
 		fontFamily: 'var(--font-family-monospace)',
 		color: 'var(--input-font-color, var(--color-text-dark))',
+		caretColor: 'var(--color-code-caret)',
 	},
 	'.cm-line': {
 		padding: '0',
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 50ce0f3025e7f..8412d7f87e5e8 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -18,7 +18,7 @@
 		<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
 			<template #header>
 				<div :class="$style.logo">
-					<img :src="logoPath" :class="$style.icon" alt="n8n" />
+					<img :src="logoPath" data-test-id="n8n-logo" :class="$style.icon" alt="n8n" />
 				</div>
 			</template>
 
diff --git a/packages/editor-ui/src/components/MainSidebarSourceControl.vue b/packages/editor-ui/src/components/MainSidebarSourceControl.vue
index 332dce0827539..f35a29e5549df 100644
--- a/packages/editor-ui/src/components/MainSidebarSourceControl.vue
+++ b/packages/editor-ui/src/components/MainSidebarSourceControl.vue
@@ -206,10 +206,6 @@ const goToSourceControlSetup = async () => {
 		display: none;
 	}
 
-	span {
-		color: var(--color-text-base);
-	}
-
 	button {
 		font-size: var(--font-size-3xs);
 	}
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 5f3cd36f2c956..9d20fb633ad94 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -502,7 +502,7 @@ export default defineComponent({
 					returnStyles['border-width'] = '2px';
 					returnStyles['border-style'] = 'solid';
 				} else if (this.waiting || this.showPinnedDataInfo) {
-					borderColor = getStyleTokenValue('--color-secondary');
+					borderColor = getStyleTokenValue('--color-canvas-node-pinned-border');
 				} else if (this.nodeExecutionStatus === 'unknown') {
 					borderColor = getStyleTokenValue('--color-foreground-xdark');
 				} else if (this.workflowDataItems) {
@@ -781,7 +781,7 @@ export default defineComponent({
 			height: 100%;
 			border: 2px solid var(--color-foreground-xdark);
 			border-radius: var(--border-radius-large);
-			background-color: $node-background-default;
+			background-color: var(--color-canvas-node-background);
 			&.executing {
 				background-color: $node-background-executing !important;
 
@@ -1045,12 +1045,7 @@ export default defineComponent({
 	--node--selected--box-shadow-radius: 8px;
 
 	display: block;
-	background-color: hsla(
-		var(--color-foreground-base-h),
-		var(--color-foreground-base-s),
-		var(--color-foreground-base-l),
-		60%
-	);
+	background-color: var(--color-canvas-selected);
 	border-radius: var(--border-radius-xlarge);
 	overflow: hidden;
 	position: absolute;
diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue
index dd8c7c5fc1917..04dea988f7fd3 100644
--- a/packages/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -170,13 +170,13 @@ function nodeTypeSelected(nodeTypes: string[]) {
 	pointer-events: all !important;
 
 	button {
-		border-color: var(--color-foreground-xdark);
-		color: var(--color-foreground-xdark);
+		border-color: var(--color-button-node-creator-border-font);
+		color: var(--color-button-node-creator-border-font);
 
 		&:hover {
-			border-color: var(--color-primary);
-			color: var(--color-primary);
-			background: var(--color-background-xlight);
+			border-color: var(--color-button-node-creator-hover-border-font);
+			color: var(--color-button-node-creator-hover-border-font);
+			background: var(--color-button-node-creator-background);
 		}
 	}
 }
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
index 68bf1ad64cbb6..a990dc9807bab 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
@@ -174,7 +174,7 @@ onBeforeUnmount(() => {
 	left: $sidebar-width;
 	opacity: 0;
 	z-index: 1;
-	background: var(--color-background-dark);
+	background: var(--color-dialog-overlay-background);
 	pointer-events: none;
 	transition: opacity 200ms ease-in-out;
 
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue b/packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
index 503ee6f54f2ff..9dad6d8d53632 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Renderers/CategorizedItemsRenderer.vue
@@ -133,6 +133,7 @@ registerKeyHook(`CategoryLeft_${props.category}`, {
 .mouseOverTooltip {
 	opacity: 0;
 	margin-left: var(--spacing-3xs);
+	color: var(--color-foreground-xdark);
 	&:hover {
 		color: var(--color-primary);
 	}
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 1585bf4171ac2..de1094d245fd8 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -783,6 +783,10 @@ $main-panel-width: 360px;
 	top: var(--spacing-xs);
 	left: var(--spacing-l);
 
+	span {
+		color: var(--color-ndv-back-font);
+	}
+
 	&:hover {
 		cursor: pointer;
 	}
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index a96688ed95d45..70a74d858b0c6 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -1302,7 +1302,7 @@ export default defineComponent({
 }
 
 .droppable {
-	--input-border-color: var(--color-secondary);
+	--input-border-color: var(--color-ndv-droppable-parameter);
 	--input-border-style: dashed;
 
 	textarea,
@@ -1378,7 +1378,7 @@ export default defineComponent({
 	position: absolute;
 	right: 0;
 	bottom: 0;
-	background-color: white;
+	background-color: var(--color-code-background);
 	padding: 3px;
 	line-height: 9px;
 	border: var(--border-base);
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 19843c48ef4fb..e16e9f416bdf5 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1509,7 +1509,7 @@ export default defineComponent({
 	position: relative;
 	width: 100%;
 	height: 100%;
-	background-color: var(--color-background-base);
+	background-color: var(--color-run-data-background);
 	display: flex;
 	flex-direction: column;
 }
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index 3043caeb77285..df7e6589d870d 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -210,7 +210,6 @@ export default defineComponent({
 	word-break: normal;
 	height: 100%;
 	padding-bottom: var(--spacing-3xl);
-	background-color: var(--color-background-base);
 
 	&:hover {
 		/* Shows .actionsGroup element from <run-data-json-actions /> child component */
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index 0c7eefb8875fc..a52f6dcaa22fe 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -111,7 +111,6 @@ const onDragEnd = (el: HTMLElement) => {
 	word-break: normal;
 	height: 100%;
 	width: 100%;
-	background-color: var(--color-background-base);
 
 	> div[class*='info'] {
 		padding: 0 var(--spacing-s);
diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
index 41b97a23b3cab..6c15d66ba317d 100644
--- a/packages/editor-ui/src/components/Sticky.vue
+++ b/packages/editor-ui/src/components/Sticky.vue
@@ -313,12 +313,7 @@ export default defineComponent({
 .select-sticky-background {
 	display: block;
 	position: absolute;
-	background-color: hsla(
-		var(--color-foreground-base-h),
-		var(--color-foreground-base-s),
-		var(--color-foreground-base-l),
-		60%
-	);
+	background-color: var(--color-canvas-selected);
 	border-radius: var(--border-radius-xlarge);
 	overflow: hidden;
 	height: calc(100% + 16px);
diff --git a/packages/editor-ui/src/components/TagsManager/NoTagsView.vue b/packages/editor-ui/src/components/TagsManager/NoTagsView.vue
index e9c64f1bd4b9f..074e647d1a1e7 100644
--- a/packages/editor-ui/src/components/TagsManager/NoTagsView.vue
+++ b/packages/editor-ui/src/components/TagsManager/NoTagsView.vue
@@ -3,8 +3,10 @@
 		<el-col class="notags" :span="16">
 			<div class="icon">🗄️</div>
 			<div>
-				<div class="headline">
-					{{ $locale.baseText('noTagsView.readyToOrganizeYourWorkflows') }}
+				<div class="mb-s">
+					<n8n-heading size="large">
+						{{ $locale.baseText('noTagsView.readyToOrganizeYourWorkflows') }}
+					</n8n-heading>
 				</div>
 				<div class="description">
 					{{ $locale.baseText('noTagsView.withWorkflowTagsYouReFree') }}
@@ -47,12 +49,6 @@ $--footer-spacing: 45px;
 	line-height: 14px;
 }
 
-.headline {
-	font-size: 17.6px;
-	color: black;
-	margin-bottom: 12px;
-}
-
 .description {
 	font-size: 14px;
 	line-height: 21px;
diff --git a/packages/editor-ui/src/components/ValueSurvey.vue b/packages/editor-ui/src/components/ValueSurvey.vue
index 2d3fb660c37d2..5344275d2d77e 100644
--- a/packages/editor-ui/src/components/ValueSurvey.vue
+++ b/packages/editor-ui/src/components/ValueSurvey.vue
@@ -200,6 +200,10 @@ export default defineComponent({
 		margin-top: 10px;
 		padding: 0 15px;
 	}
+
+	h2 {
+		color: var(--color-value-survey-font);
+	}
 }
 
 .content {
@@ -214,6 +218,9 @@ export default defineComponent({
 .wrapper {
 	display: flex;
 	flex-direction: column;
+	.text span {
+		color: var(--color-value-survey-font);
+	}
 }
 
 .buttons {
@@ -256,7 +263,7 @@ export default defineComponent({
 }
 
 .valueSurvey {
-	background: var(--color-background-dark);
+	background: var(--color-value-survey-background);
 	height: 120px;
 	top: auto;
 
@@ -278,7 +285,7 @@ export default defineComponent({
 			right: 16px;
 			position: absolute;
 			font-weight: var(--font-weight-bold);
-			color: var(--color-text-xlight);
+			color: var(--color-value-survey-font);
 
 			@media (max-width: $breakpoint-xs) {
 				top: 2px;
diff --git a/packages/editor-ui/src/components/VariablesRow.vue b/packages/editor-ui/src/components/VariablesRow.vue
index 03884b0848f94..670eaf4f66d31 100644
--- a/packages/editor-ui/src/components/VariablesRow.vue
+++ b/packages/editor-ui/src/components/VariablesRow.vue
@@ -264,8 +264,8 @@ function focusFirstInput() {
 
 .usageSyntax {
 	cursor: pointer;
-	background: var(--color-success-tint-2);
-	color: var(--color-success);
+	background: var(--color-variables-usage-syntax-bg);
+	color: var(--color-variables-usage-font);
 	font-family: var(--font-family-monospace);
 	font-size: var(--font-size-s);
 }
diff --git a/packages/editor-ui/src/components/WorkflowActivator.vue b/packages/editor-ui/src/components/WorkflowActivator.vue
index 3c40b9cad5c0e..b10796a705e2c 100644
--- a/packages/editor-ui/src/components/WorkflowActivator.vue
+++ b/packages/editor-ui/src/components/WorkflowActivator.vue
@@ -163,7 +163,7 @@ export default defineComponent({
 
 .could-not-be-started {
 	display: inline-block;
-	color: #ff4949;
+	color: var(--color-text-danger);
 	margin-left: 0.5em;
 }
 </style>
diff --git a/packages/editor-ui/src/composables/useLoadingService.ts b/packages/editor-ui/src/composables/useLoadingService.ts
index 2ec61c5d9452d..3ae53ed2c52a8 100644
--- a/packages/editor-ui/src/composables/useLoadingService.ts
+++ b/packages/editor-ui/src/composables/useLoadingService.ts
@@ -20,7 +20,7 @@ export function useLoadingService() {
 			lock: true,
 			text: text || i18n.baseText('genericHelpers.loading'),
 			spinner: 'el-icon-loading',
-			background: 'rgba(255, 255, 255, 0.8)',
+			background: 'var(--color-dialog-overlay-background)',
 		}) as unknown as LoadingService;
 	}
 
diff --git a/packages/editor-ui/src/mixins/genericHelpers.ts b/packages/editor-ui/src/mixins/genericHelpers.ts
index 4b28e9d04522a..52d50e9a78cf8 100644
--- a/packages/editor-ui/src/mixins/genericHelpers.ts
+++ b/packages/editor-ui/src/mixins/genericHelpers.ts
@@ -71,7 +71,7 @@ export const genericHelpers = defineComponent({
 				lock: true,
 				text: text || this.$locale.baseText('genericHelpers.loading'),
 				spinner: 'el-icon-loading',
-				background: 'rgba(255, 255, 255, 0.8)',
+				background: 'var(--color-dialog-overlay-background)',
 			});
 		},
 		setLoadingText(text: string) {
diff --git a/packages/editor-ui/src/n8n-theme-variables.scss b/packages/editor-ui/src/n8n-theme-variables.scss
index 356053b6217e3..b2040dba3e7ff 100644
--- a/packages/editor-ui/src/n8n-theme-variables.scss
+++ b/packages/editor-ui/src/n8n-theme-variables.scss
@@ -11,7 +11,7 @@ $custom-font-light: var(--color-text-light);
 $custom-font-very-light: var(--color-text-light);
 
 $custom-expression-text: var(--color-secondary);
-$custom-expression-background: var(--color-background-lighter);
+$custom-expression-background: var(--color-background-light);
 
 // Badge
 $badge-danger-color: var(--color-danger);
@@ -100,7 +100,7 @@ $drawer-background-color: var(--color-background-xlight);
 // updates-panel
 $updates-panel-info-url-color: $color-primary;
 $updates-panel-border: var(--border-base);
-$updates-panel-dark-background-color: var(--color-background-lighter);
+$updates-panel-dark-background-color: var(--color-background-light);
 $updates-panel-description-text-color: var(--color-text-base);
 $updates-panel-text-color: var(--color-text-dark);
 
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 2aaf36c07a7f7..49a5f9863d822 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -1,13 +1,6 @@
 :root {
 	--node-type-background-l: 95%;
-	--node-type-main-color-h: var(--color-foreground-xdark-h);
-	--node-type-main-color-s: var(--color-foreground-xdark-s);
-	--node-type-main-color-l: var(--color-foreground-xdark-l);
-	--node-type-main-color: hsl(
-		var(--node-type-main-color-h),
-		var(--node-type-main-color-s),
-		var(--node-type-main-color-l)
-	);
+
 	--node-type-supplemental-label-color-h: 235;
 	--node-type-supplemental-label-color-s: 28%;
 	--node-type-supplemental-label-color-l: 40%;
@@ -188,6 +181,12 @@
 	font-weight: 400;
 }
 
+// Dialog
+.el-overlay {
+	background-color: var(--color-dialog-overlay-background-dark);
+	backdrop-filter: blur(2px);
+}
+
 .el-dialog {
 	border: var(--border-base);
 	box-shadow: 0px 6px 16px rgb(68 28 23 / 6%);
@@ -280,20 +279,6 @@
 		color: var(--color-text-dark);
 	}
 }
-.el-table--striped {
-	.el-table__body {
-		tr.el-table__row--striped {
-			background-color: var(--color-background-light);
-			td {
-				background: none;
-			}
-		}
-		tr.el-table__row:hover,
-		tr.el-table__row:hover > td {
-			background-color: var(--color-primary-tint-3);
-		}
-	}
-}
 
 // Tabs
 .type-selector:focus,
@@ -416,6 +401,7 @@
 		&,
 		&:hover,
 		&:focus {
+			padding-left: 35px;
 			border-radius: var(--border-radius-base);
 			color: var(--color-text-dark);
 			background-color: var(--color-background-base);
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 5d5aa38746fc1..f1a2cd85de2d8 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2198,6 +2198,11 @@
 	"mfa.setup.step2.toast.setupFinished.error.message": "Error enabling two-factor authentication",
 	"mfa.setup.step2.toast.tokenExpired.error.message": "MFA token expired. Close the modal and enable MFA again",
 	"settings.personal.mfa.section.title": "Two-factor authentication (2FA)",
+	"settings.personal.personalisation": "Personalisation",
+	"settings.personal.theme": "Theme",
+	"settings.personal.theme.systemDefault": "System default",
+	"settings.personal.theme.light": "Light theme",
+	"settings.personal.theme.dark": "Dark theme",
 	"settings.personal.mfa.button.disabled.infobox": "Two-factor authentication is currently disabled.",
 	"settings.personal.mfa.button.enabled.infobox": "Two-factor authentication is currently enabled.",
 	"settings.personal.mfa.button.enabled": "Enable 2FA",
diff --git a/packages/editor-ui/src/plugins/telemetry/index.ts b/packages/editor-ui/src/plugins/telemetry/index.ts
index 5663f26f18573..fb445298ed781 100644
--- a/packages/editor-ui/src/plugins/telemetry/index.ts
+++ b/packages/editor-ui/src/plugins/telemetry/index.ts
@@ -14,7 +14,7 @@ import {
 	TELEGRAM_NODE_TYPE,
 } from '@/constants';
 import { usePostHog } from '@/stores/posthog.store';
-import { useNDVStore } from '@/stores';
+import { useNDVStore, useUIStore } from '@/stores';
 
 export class Telemetry {
 	private pageEventQueue: Array<{ route: RouteLocation }>;
@@ -128,6 +128,8 @@ export class Telemetry {
 				properties = route.meta.telemetry.getProperties(route);
 			}
 
+			properties.theme = useUIStore().appliedTheme;
+
 			const category = route.meta?.telemetry?.pageCategory || 'Editor';
 			this.rudderStack.page(category, pageName, properties);
 		} else {
diff --git a/packages/editor-ui/src/stores/ui.store.ts b/packages/editor-ui/src/stores/ui.store.ts
index 0a0de6faff6ee..7358971c8bd74 100644
--- a/packages/editor-ui/src/stores/ui.store.ts
+++ b/packages/editor-ui/src/stores/ui.store.ts
@@ -37,6 +37,7 @@ import {
 	DEBUG_PAYWALL_MODAL_KEY,
 	N8N_PRICING_PAGE_URL,
 	WORKFLOW_HISTORY_VERSION_RESTORE,
+	LOCAL_STORAGE_THEME,
 } from '@/constants';
 import type {
 	CloudUpdateLinkSourceType,
@@ -51,6 +52,8 @@ import type {
 	XYPosition,
 	Modals,
 	NewCredentialsModal,
+	ThemeOption,
+	AppliedThemeOption,
 } from '@/Interface';
 import { defineStore } from 'pinia';
 import { useRootStore } from '@/stores/n8nRoot.store';
@@ -63,10 +66,41 @@ import { getStyleTokenValue } from '@/utils/htmlUtils';
 import { dismissBannerPermanently } from '@/api/ui';
 import type { BannerName } from 'n8n-workflow';
 
+let savedTheme: ThemeOption = 'system';
+try {
+	const value = localStorage.getItem(LOCAL_STORAGE_THEME) as AppliedThemeOption;
+	if (['light', 'dark'].includes(value)) {
+		savedTheme = value;
+		addThemeToBody(value);
+	}
+} catch (e) {}
+
+function addThemeToBody(theme: AppliedThemeOption) {
+	window.document.body.setAttribute('data-theme', theme);
+}
+
+function updateTheme(theme: ThemeOption) {
+	if (theme === 'system') {
+		window.document.body.removeAttribute('data-theme');
+		localStorage.removeItem(LOCAL_STORAGE_THEME);
+	} else {
+		addThemeToBody(theme);
+		localStorage.setItem(LOCAL_STORAGE_THEME, theme);
+	}
+}
+
+function getPreferredTheme(): AppliedThemeOption {
+	const isDarkMode =
+		!!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)')?.matches;
+
+	return isDarkMode ? 'dark' : 'light';
+}
+
 export const useUIStore = defineStore(STORES.UI, {
 	state: (): UIState => ({
 		activeActions: [],
 		activeCredentialType: null,
+		theme: savedTheme,
 		modals: {
 			[ABOUT_MODAL_KEY]: {
 				open: false,
@@ -199,11 +233,16 @@ export const useUIStore = defineStore(STORES.UI, {
 		bannerStack: [],
 	}),
 	getters: {
-		logo() {
+		appliedTheme(): AppliedThemeOption {
+			return this.theme === 'system' ? getPreferredTheme() : this.theme;
+		},
+		logo(): string {
 			const { releaseChannel } = useSettingsStore().settings;
+			const type = this.appliedTheme === 'dark' ? '-dark-mode.svg' : '.svg';
+
 			return releaseChannel === 'stable'
-				? 'n8n-logo-expanded.svg'
-				: `n8n-${releaseChannel}-logo.svg`;
+				? `n8n-logo-expanded${type}`
+				: `n8n-${releaseChannel}-logo${type}`;
 		},
 		contextBasedTranslationKeys() {
 			const settingsStore = useSettingsStore();
@@ -377,6 +416,10 @@ export const useUIStore = defineStore(STORES.UI, {
 		},
 	},
 	actions: {
+		setTheme(theme: ThemeOption): void {
+			this.theme = theme;
+			updateTheme(theme);
+		},
 		setMode(name: keyof Modals, mode: string): void {
 			this.modals[name] = {
 				...this.modals[name],
diff --git a/packages/editor-ui/src/styles/autocomplete-theme.scss b/packages/editor-ui/src/styles/autocomplete-theme.scss
index 6eda8b76c81c7..fd6105a228e74 100644
--- a/packages/editor-ui/src/styles/autocomplete-theme.scss
+++ b/packages/editor-ui/src/styles/autocomplete-theme.scss
@@ -30,8 +30,12 @@
 	}
 }
 
+.ͼ2 .cm-tooltip-autocomplete ul li[aria-selected] {
+	background-color: var(--color-autocomplete-selected-background);
+}
+
 .ͼ2 .cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel {
-	color: var(--color-text-xlight) !important;
+	color: var(--color-autocomplete-selected-font) !important;
 	font-weight: 600;
 }
 
diff --git a/packages/editor-ui/src/utils/nodeViewUtils.ts b/packages/editor-ui/src/utils/nodeViewUtils.ts
index a44dd284974bc..682a1a31e0832 100644
--- a/packages/editor-ui/src/utils/nodeViewUtils.ts
+++ b/packages/editor-ui/src/utils/nodeViewUtils.ts
@@ -585,7 +585,7 @@ export const getBackgroundStyles = (
 	if (executionPreview) {
 		return {
 			'background-image':
-				'linear-gradient(135deg, #f9f9fb 25%, #ffffff 25%, #ffffff 50%, #f9f9fb 50%, #f9f9fb 75%, #ffffff 75%, #ffffff 100%)',
+				'linear-gradient(135deg, var(--color-canvas-read-only-line) 25%, var(--color-canvas-background) 25%, var(--color-canvas-background) 50%, var(--color-canvas-read-only-line) 50%, var(--color-canvas-read-only-line) 75%, var(--color-canvas-background) 75%, var(--color-canvas-background) 100%)',
 			'background-size': `${squareSize}px ${squareSize}px`,
 			'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`,
 		};
diff --git a/packages/editor-ui/src/views/SettingsPersonalView.vue b/packages/editor-ui/src/views/SettingsPersonalView.vue
index 5b31b811220b3..3fbaf4ab8c49d 100644
--- a/packages/editor-ui/src/views/SettingsPersonalView.vue
+++ b/packages/editor-ui/src/views/SettingsPersonalView.vue
@@ -16,7 +16,7 @@
 			</div>
 		</div>
 		<div>
-			<div :class="$style.sectionHeader">
+			<div class="mb-s">
 				<n8n-heading size="large">{{
 					i18n.baseText('settings.personal.basicInformation')
 				}}</n8n-heading>
@@ -33,10 +33,10 @@
 			</div>
 		</div>
 		<div v-if="!signInWithLdap && !signInWithSaml">
-			<div :class="$style.sectionHeader">
+			<div class="mb-s">
 				<n8n-heading size="large">{{ i18n.baseText('settings.personal.security') }}</n8n-heading>
 			</div>
-			<div>
+			<div class="mb-s">
 				<n8n-input-label :label="i18n.baseText('auth.password')">
 					<n8n-link @click="openPasswordModal" data-test-id="change-password-link">{{
 						i18n.baseText('auth.changePassword')
@@ -44,9 +44,8 @@
 				</n8n-input-label>
 			</div>
 			<div v-if="isMfaFeatureEnabled">
-				<div :class="$style.mfaSection">
-					<n8n-input-label :label="$locale.baseText('settings.personal.mfa.section.title')">
-					</n8n-input-label>
+				<div class="mb-xs">
+					<n8n-input-label :label="$locale.baseText('settings.personal.mfa.section.title')" />
 					<n8n-text :bold="false" :class="$style.infoText">
 						{{
 							mfaDisabled
@@ -58,26 +57,49 @@
 						</n8n-link>
 					</n8n-text>
 				</div>
-				<div :class="$style.mfaButtonContainer" v-if="mfaDisabled">
-					<n8n-button
-						:class="$style.button"
-						float="left"
-						type="tertiary"
-						:label="$locale.baseText('settings.personal.mfa.button.enabled')"
-						data-test-id="enable-mfa-button"
-						@click="onMfaEnableClick"
-					/>
-				</div>
-				<div v-else>
-					<n8n-button
-						:class="$style.disableMfaButton"
-						float="left"
-						type="tertiary"
-						:label="$locale.baseText('settings.personal.mfa.button.disabled')"
-						data-test-id="disable-mfa-button"
-						@click="onMfaDisableClick"
-					/>
-				</div>
+				<n8n-button
+					v-if="mfaDisabled"
+					:class="$style.button"
+					type="tertiary"
+					:label="$locale.baseText('settings.personal.mfa.button.enabled')"
+					data-test-id="enable-mfa-button"
+					@click="onMfaEnableClick"
+				/>
+				<n8n-button
+					v-else
+					:class="$style.disableMfaButton"
+					type="tertiary"
+					:label="$locale.baseText('settings.personal.mfa.button.disabled')"
+					data-test-id="disable-mfa-button"
+					@click="onMfaDisableClick"
+				/>
+			</div>
+		</div>
+		<div>
+			<div class="mb-s">
+				<n8n-heading size="large">{{
+					i18n.baseText('settings.personal.personalisation')
+				}}</n8n-heading>
+			</div>
+			<div>
+				<n8n-input-label :label="i18n.baseText('settings.personal.theme')">
+					<n8n-select
+						:class="$style.themeSelect"
+						data-test-id="theme-select"
+						size="small"
+						@update:modelValue="selectTheme"
+						:modelValue="currentTheme"
+						filterable
+					>
+						<n8n-option
+							v-for="item in themeOptions"
+							:key="item.name"
+							:label="$t(item.label)"
+							:value="item.name"
+						>
+						</n8n-option>
+					</n8n-select>
+				</n8n-input-label>
 			</div>
 		</div>
 		<div>
@@ -95,7 +117,7 @@
 
 <script lang="ts">
 import { useI18n, useToast } from '@/composables';
-import type { IFormInputs, IUser } from '@/Interface';
+import type { IFormInputs, IUser, ThemeOption } from '@/Interface';
 import { CHANGE_PASSWORD_MODAL_KEY, MFA_DOCS_URL, MFA_SETUP_MODAL_KEY } from '@/constants';
 import { useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
@@ -121,6 +143,20 @@ export default defineComponent({
 			formBus: createEventBus(),
 			readyToSubmit: false,
 			mfaDocsUrl: MFA_DOCS_URL,
+			themeOptions: [
+				{
+					name: 'system',
+					label: 'settings.personal.theme.systemDefault',
+				},
+				{
+					name: 'light',
+					label: 'settings.personal.theme.light',
+				},
+				{
+					name: 'dark',
+					label: 'settings.personal.theme.dark',
+				},
+			] as Array<{ name: ThemeOption; label: string }>,
 		};
 	},
 	mounted() {
@@ -186,8 +222,14 @@ export default defineComponent({
 		isMfaFeatureEnabled(): boolean {
 			return this.settingsStore.isMfaFeatureEnabled;
 		},
+		currentTheme(): ThemeOption {
+			return this.uiStore.theme;
+		},
 	},
 	methods: {
+		selectTheme(theme: ThemeOption) {
+			this.uiStore.setTheme(theme);
+		},
 		onInput() {
 			this.hasAnyChanges = true;
 		},
@@ -283,7 +325,6 @@ export default defineComponent({
 
 .disableMfaButton {
 	--button-color: var(--color-danger);
-	margin-top: var(--spacing-2xs);
 	> span {
 		font-weight: var(--font-weight-bold);
 	}
@@ -296,21 +337,12 @@ export default defineComponent({
 	}
 }
 
-.mfaSection {
-	margin-top: var(--spacing-l);
-}
-
 .infoText {
 	font-size: var(--font-size-2xs);
 	color: var(--color-text-light);
 }
 
-.sectionHeader {
-	margin-top: var(--spacing-2xl);
-	margin-bottom: var(--spacing-s);
-}
-
-.mfaButtonContainer {
-	margin-top: var(--spacing-2xs);
+.themeSelect {
+	max-width: 50%;
 }
 </style>
diff --git a/packages/editor-ui/src/views/SettingsUsageAndPlan.vue b/packages/editor-ui/src/views/SettingsUsageAndPlan.vue
index 5c755a62b2c72..409cc362b306a 100644
--- a/packages/editor-ui/src/views/SettingsUsageAndPlan.vue
+++ b/packages/editor-ui/src/views/SettingsUsageAndPlan.vue
@@ -188,7 +188,7 @@ const openPricingPage = () => {
 					type="tertiary"
 					size="large"
 				>
-					<strong>{{ locale.baseText('settings.usageAndPlan.button.activation') }}</strong>
+					<span>{{ locale.baseText('settings.usageAndPlan.button.activation') }}</span>
 				</n8n-button>
 				<n8n-button v-if="usageStore.managementToken" @click="onManagePlan" size="large">
 					<a :href="managePlanUrl" target="_blank">{{
@@ -319,13 +319,6 @@ div[class*='info'] > span > span:last-child {
 	line-height: 1.4;
 	padding: 0 0 0 var(--spacing-4xs);
 }
-
-.buttonTertiary {
-	&,
-	&:hover {
-		background: transparent;
-	}
-}
 </style>
 
 <style lang="scss" scoped>