diff --git a/cubic.yaml b/cubic.yaml
index ceaf62262a8..52923b369b3 100644
--- a/cubic.yaml
+++ b/cubic.yaml
@@ -40,6 +40,14 @@ reviews:
     - Version files
 
     Approve if reasonably tested. Let humans handle edge cases.
+
+    ## Step 4: Design System Tokens
+
+    For any hard-coded visual values in CSS (colors, shadows, spacing), check
+    `@n8n/design-system/src/css/_primitives.scss` and
+    `@n8n/design-system/src/css/_tokens.scss` for an appropriate alternative.
+    If one exists, suggest using it. If none exist, ask why the hard-coded
+    value is required.
   custom_rules:
     - name: Tests
       description: |-
@@ -187,9 +195,15 @@ reviews:
         - Higher scrutiny for: expression engine, credential handling, code execution nodes, license enforcement, SSO integrations
         - Consider n8n's security audit categories: credentials, database, nodes, instance, filesystem risks
         - Community/custom nodes have higher risk profile than official nodes
+    - name: Design System Tokens
+      description: |-
+        For any hard-coded visual values in CSS (colors, shadows, spacing),
+        check `@n8n/design-system/src/css/_primitives.scss` and
+        `@n8n/design-system/src/css/_tokens.scss` for an appropriate alternative.
+        If one exists, suggest using it. If none exist, ask why the hard-coded
+        value is required.
 pr_descriptions:
   generate: false
   instructions: Each PR is supposed to have a limited scope. In your review, focus on changes made in the PR and avoid pointing out problems you found in the code that already existed.
 issues:
   fix_with_cubic_buttons: true
-
diff --git a/packages/frontend/@n8n/design-system/src/components/DateRangePicker/DateRangePicker.stories.ts b/packages/frontend/@n8n/design-system/src/components/DateRangePicker/DateRangePicker.stories.ts
index 3177e52f781..3b42d164e95 100644
--- a/packages/frontend/@n8n/design-system/src/components/DateRangePicker/DateRangePicker.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/DateRangePicker/DateRangePicker.stories.ts
@@ -4,7 +4,7 @@ import DateRangePicker from './DateRangePicker.vue';
 
 const meta = {
 	component: DateRangePicker,
-	title: 'Components v2/DateRangePicker',
+	title: 'Experimental/DateRangePicker',
 } satisfies Meta<typeof DateRangePicker>;
 
 export default meta;
diff --git a/packages/frontend/@n8n/design-system/src/components/IconTextButton/IconTextButton.stories.ts b/packages/frontend/@n8n/design-system/src/components/IconTextButton/IconTextButton.stories.ts
index 7fb555c9feb..d49643877df 100644
--- a/packages/frontend/@n8n/design-system/src/components/IconTextButton/IconTextButton.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/IconTextButton/IconTextButton.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import IconTextButton from './IconTextButton.vue';
 
 export default {
-	title: 'Atoms/IconTextButton',
+	title: 'Core/IconTextButton',
 	component: IconTextButton,
 	argTypes: {
 		icon: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.stories.ts
index d7aa4a8bf71..626137960ad 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.stories.ts
@@ -6,7 +6,7 @@ import N8nLink from '../N8nLink';
 import N8nText from '../N8nText';
 
 export default {
-	title: 'Atoms/ActionBox',
+	title: 'Core/ActionBox',
 	component: N8nActionBox,
 	argTypes: {
 		calloutTheme: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts
index 57b2b54fd2e..b70f515cef8 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nActionDropdown from './ActionDropdown.vue';
 
 export default {
-	title: 'Atoms/ActionDropdown',
+	title: 'Core/ActionDropdown',
 	component: N8nActionDropdown,
 	argTypes: {
 		placement: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts
index 6aedd411a4d..e1a2757679b 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nActionToggle from './ActionToggle.vue';
 
 export default {
-	title: 'Atoms/ActionToggle',
+	title: 'Core/ActionToggle',
 	component: N8nActionToggle,
 	argTypes: {
 		placement: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.stories.ts
index 15ea52c491d..2e22d8f831a 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.stories.ts
@@ -4,7 +4,7 @@ import N8nAlert from './Alert.vue';
 import N8nIcon from '../N8nIcon';
 
 export default {
-	title: 'Atoms/Alert',
+	title: 'Core/Alert',
 	component: N8nAlert,
 	argTypes: {
 		type: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nAlertDialog/AlertDialog.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nAlertDialog/AlertDialog.stories.ts
index 9b8c3198d14..62b30440b8e 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nAlertDialog/AlertDialog.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nAlertDialog/AlertDialog.stories.ts
@@ -5,7 +5,7 @@ import { N8nAlertDialog } from '@n8n/design-system/components/N8nAlertDialog';
 import N8nButton from '@n8n/design-system/components/N8nButton/Button.vue';
 
 const meta = {
-	title: 'Components/N8nAlertDialog',
+	title: 'Core/AlertDialog',
 	component: N8nAlertDialog,
 	parameters: {
 		docs: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nAvatar/Avatar.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nAvatar/Avatar.stories.ts
index 8cd47ef300b..6f61ccb7906 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nAvatar/Avatar.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nAvatar/Avatar.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nAvatar from './Avatar.vue';
 
 export default {
-	title: 'Atoms/Avatar',
+	title: 'Core/Avatar',
 	component: N8nAvatar,
 	argTypes: {
 		size: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nBadge/Badge.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nBadge/Badge.stories.ts
index ed6fa212ec6..1b4044424da 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nBadge/Badge.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nBadge/Badge.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nBadge from './Badge.vue';
 
 export default {
-	title: 'Atoms/Badge',
+	title: 'Core/Badge',
 	component: N8nBadge,
 	argTypes: {
 		theme: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nBlockUi/BlockUi.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nBlockUi/BlockUi.stories.ts
index c297bbecd57..3cbee3a06df 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nBlockUi/BlockUi.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nBlockUi/BlockUi.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nBlockUi from './BlockUi.vue';
 
 export default {
-	title: 'Atoms/BlockUI',
+	title: 'Core/BlockUI',
 	component: N8nBlockUi,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.stories.ts
index 7b7a6ee5c43..671fc907449 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.stories.ts
@@ -9,7 +9,7 @@ import ActionToggle from '../N8nActionToggle/ActionToggle.vue';
 import Tags from '../N8nTags/Tags.vue';
 
 export default {
-	title: 'Atoms/Breadcrumbs',
+	title: 'Core/Breadcrumbs',
 	component: Breadcrumbs,
 	argTypes: {
 		items: { control: 'object' },
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts
index b1d4438a77d..a29dd753081 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts
@@ -4,7 +4,7 @@ import N8nButton from './Button.vue';
 import N8nIcon from '../N8nIcon/Icon.vue';
 
 const meta = {
-	title: 'Atoms/Button',
+	title: 'Core/Button',
 	component: N8nButton,
 	argTypes: {
 		variant: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue
index b0862c1bab9..d0b9d6b4b2a 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue
@@ -186,35 +186,35 @@ const handleClick = (event: MouseEvent) => {
 	}
 
 	&.xsmall {
-		--button--height: 1.5rem;
+		--button--height: var(--height--xs);
 		--button--padding: 0 var(--spacing--2xs);
 		--button--radius: var(--radius--3xs);
 		--button--font-size: var(--font-size--2xs);
 	}
 
 	&.small {
-		--button--height: 1.75rem;
+		--button--height: var(--height--sm);
 		--button--padding: 0 var(--spacing--xs);
 		--button--radius: var(--radius--3xs);
 		--button--font-size: var(--font-size--xs);
 	}
 
 	&.medium {
-		--button--height: 2rem;
+		--button--height: var(--height--md);
 		--button--padding: 0 var(--spacing--xs);
 		--button--radius: var(--radius--3xs);
 		--button--font-size: var(--font-size--sm);
 	}
 
 	&.large {
-		--button--height: 2.25rem;
+		--button--height: var(--height--lg);
 		--button--padding: 0 var(--spacing--sm);
 		--button--radius: var(--radius--2xs);
 		--button--font-size: var(--font-size--sm);
 	}
 
 	&.xlarge {
-		--button--height: 2.5rem;
+		--button--height: var(--height--xl);
 		--button--padding: 0 var(--spacing--sm);
 		--button--radius: var(--radius--xs);
 		--button--font-size: var(--font-size--md);
@@ -251,7 +251,7 @@ const handleClick = (event: MouseEvent) => {
 		);
 		--button--shadow:
 			0 1px 3px light-dark(var(--color--black-alpha-100), var(--color--black-alpha-300)),
-			0 0 0 1px light-dark(transparent, var(--color--black-alpha-100));
+			0 0 0 1.5px light-dark(transparent, var(--color--black-alpha-100));
 		--button--shadow--hover:
 			0 1px 3px 0 light-dark(var(--color--black-alpha-200), var(--color--black-alpha-300)),
 			0 0 0 1px light-dark(transparent, var(--color--black-alpha-100));
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.stories.ts
index 7c92f2e41db..ed8ca08c4eb 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.stories.ts
@@ -5,7 +5,7 @@ import N8nLink from '../N8nLink';
 import N8nText from '../N8nText';
 
 export default {
-	title: 'Atoms/Callout',
+	title: 'Core/Callout',
 	component: N8nCallout,
 	argTypes: {
 		theme: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCard/Card.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nCard/Card.stories.ts
index e6362c7e1ee..3abd0d5fdbd 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nCard/Card.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nCard/Card.stories.ts
@@ -6,7 +6,7 @@ import N8nIcon from '../N8nIcon/Icon.vue';
 import N8nText from '../N8nText/Text.vue';
 
 export default {
-	title: 'Atoms/Card',
+	title: 'Core/Card',
 	component: N8nCard,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCircleLoader/CircleLoader.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nCircleLoader/CircleLoader.stories.ts
index e95ce8ec2f3..cf9882a99fb 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nCircleLoader/CircleLoader.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nCircleLoader/CircleLoader.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nCircleLoader from './CircleLoader.vue';
 
 export default {
-	title: 'Atoms/CircleLoader',
+	title: 'Core/CircleLoader',
 	component: N8nCircleLoader,
 	argTypes: {
 		radius: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCollapsiblePanel/CollapsiblePanel.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nCollapsiblePanel/CollapsiblePanel.stories.ts
index 0fe399adfd1..1333d90251c 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nCollapsiblePanel/CollapsiblePanel.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nCollapsiblePanel/CollapsiblePanel.stories.ts
@@ -9,7 +9,7 @@ import N8nOption from '../N8nOption';
 import N8nSelect from '../N8nSelect';
 
 export default {
-	title: 'Atoms/CollapsiblePanel',
+	title: 'Core/CollapsiblePanel',
 	component: N8nCollapsiblePanel,
 	argTypes: {
 		modelValue: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nColorPicker/ColorPicker.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nColorPicker/ColorPicker.stories.ts
index 80ac5f2778b..0b6fdf67d4f 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nColorPicker/ColorPicker.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nColorPicker/ColorPicker.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nColorPicker from './ColorPicker.vue';
 
 export default {
-	title: 'Atoms/ColorPicker',
+	title: 'Core/ColorPicker',
 	component: N8nColorPicker,
 	argTypes: {
 		disabled: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.stories.ts
index 3137995e085..cd525327c4c 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.stories.ts
@@ -101,7 +101,7 @@ const sampleItems = [
 ];
 
 export default {
-	title: 'Molecules/CommandBar',
+	title: 'Core/CommandBar',
 	component: N8nCommandBar,
 	argTypes: {
 		placeholder: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nDatatable/Datatable.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nDatatable/Datatable.stories.ts
index effe228810a..ab462dcead8 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nDatatable/Datatable.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nDatatable/Datatable.stories.ts
@@ -4,7 +4,7 @@ import { rows, columns } from './__tests__/data';
 import N8nDatatable from './Datatable.vue';
 
 export default {
-	title: 'Atoms/Datatable',
+	title: 'Core/Datatable',
 	component: N8nDatatable,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nDialog/Dialog.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nDialog/Dialog.stories.ts
index 78cb5cee4b1..20607145688 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nDialog/Dialog.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nDialog/Dialog.stories.ts
@@ -13,7 +13,7 @@ import {
 } from '@n8n/design-system/components/N8nDialog';
 
 const meta = {
-	title: 'Components/Dialog',
+	title: 'Core/Dialog',
 	// Use N8nDialog as component; docgen may have issues with reka-ui imports but types must match
 	component: N8nDialog,
 	parameters: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nDropdown/Dropdown.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nDropdown/Dropdown.stories.ts
index 48caa2ace6c..faad32938a3 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nDropdown/Dropdown.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nDropdown/Dropdown.stories.ts
@@ -7,7 +7,7 @@ import N8nDropdown from './Dropdown.vue';
 import type { N8nDropdownOption } from './Dropdown.vue';
 
 export default {
-	title: 'Atoms/Dropdown',
+	title: 'Core/Dropdown',
 	component: N8nDropdown,
 	argTypes: {},
 	parameters: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nExternalLink/ExternalLink.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nExternalLink/ExternalLink.stories.ts
index 2b048186dff..677ab7d9323 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nExternalLink/ExternalLink.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nExternalLink/ExternalLink.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nExternalLink from './ExternalLink.vue';
 
 export default {
-	title: 'Atoms/ExternalLink',
+	title: 'Core/ExternalLink',
 	component: N8nExternalLink,
 	argTypes: {
 		size: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.stories.ts
index 5b6a866e336..31f88700dec 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nFormBox from './FormBox.vue';
 
 export default {
-	title: 'Modules/FormBox',
+	title: 'Core/FormBox',
 	component: N8nFormBox,
 	argTypes: {},
 	parameters: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.stories.ts
index 75566133f3a..d5f725d5379 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nFormInput from './FormInput.vue';
 
 export default {
-	title: 'Modules/FormInput',
+	title: 'Core/FormInput',
 	component: N8nFormInput,
 	argTypes: {},
 };
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.stories.ts
index 254d2d0d8d1..9c2b05077ad 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nFormInputs from './FormInputs.vue';
 
 export default {
-	title: 'Modules/FormInputs',
+	title: 'Core/FormInputs',
 	component: N8nFormInputs,
 	argTypes: {},
 	parameters: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nHeading/Heading.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nHeading/Heading.stories.ts
index 6a00731479d..6b011f573a2 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nHeading/Heading.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nHeading/Heading.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nHeading from './Heading.vue';
 
 export default {
-	title: 'Atoms/Heading',
+	title: 'Core/Heading',
 	component: N8nHeading,
 	argTypes: {
 		size: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.stories.ts
index 33c36abe79d..185c018a6cd 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nIcon from './Icon.vue';
 
 export default {
-	title: 'Atoms/Icon',
+	title: 'Core/Icon',
 	component: N8nIcon,
 	argTypes: {
 		icon: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.stories.ts
index 949abec41bd..b1d1dac2863 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nIconButton from './IconButton.vue';
 
 export default {
-	title: 'Atoms/Icon Button',
+	title: 'Core/Icon Button',
 	component: N8nIconButton,
 	argTypes: {
 		type: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.stories.ts
index da0a1f5ac71..32c7dbf6b72 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.stories.ts
@@ -5,7 +5,7 @@ import N8nIconPicker from './IconPicker.vue';
 import { type IconOrEmoji } from './types';
 
 export default {
-	title: 'Atoms/Icon Picker',
+	title: 'Core/Icon Picker',
 	component: N8nIconPicker,
 	argTypes: {
 		buttonTooltip: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.stories.ts
index 45a506ce0e6..b4c2f073980 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nInfoAccordion from './InfoAccordion.vue';
 
 export default {
-	title: 'Atoms/Info Accordion',
+	title: 'Core/Info Accordion',
 	component: N8nInfoAccordion,
 	argTypes: {},
 	parameters: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInfoTip/InfoTip.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nInfoTip/InfoTip.stories.ts
index dbdb2807b50..bab78722ce2 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nInfoTip/InfoTip.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nInfoTip/InfoTip.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nInfoTip from './InfoTip.vue';
 
 export default {
-	title: 'Atoms/InfoTip',
+	title: 'Core/InfoTip',
 	component: N8nInfoTip,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.stories.ts
index 435c7745fde..e76c89c20f3 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import InlineTextEdit from './InlineTextEdit.vue';
 
 export default {
-	title: 'Atoms/InlineTextEdit',
+	title: 'Core/InlineTextEdit',
 	component: InlineTextEdit,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInput/Input.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nInput/Input.stories.ts
index 9842c81b2bc..f405fb6b239 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nInput/Input.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nInput/Input.stories.ts
@@ -1,14 +1,69 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { ref } from 'vue';
 
+import N8nButton from '@n8n/design-system/components/N8nButton/Button.vue';
 import N8nIcon from '@n8n/design-system/components/N8nIcon/Icon.vue';
 
 import Input from './Input.vue';
+import type { InputProps } from './Input.types';
 import './Input.stories.css';
 
 const meta = {
-	title: 'Atoms/Input',
+	title: 'Core/Input',
 	component: Input,
+	argTypes: {
+		type: {
+			control: 'select',
+			options: ['text', 'textarea', 'password', 'number', 'email'],
+		},
+		size: {
+			control: 'select',
+			options: ['xlarge', 'large', 'medium', 'small', 'mini'],
+		},
+		disabled: {
+			control: 'boolean',
+		},
+		readonly: {
+			control: 'boolean',
+		},
+		clearable: {
+			control: 'boolean',
+		},
+		autosize: {
+			control: 'boolean',
+		},
+		autofocus: {
+			control: 'boolean',
+		},
+		rows: {
+			control: 'number',
+		},
+		maxlength: {
+			control: 'number',
+		},
+		placeholder: {
+			control: 'text',
+		},
+		modelValue: {
+			control: 'text',
+		},
+		autocomplete: {
+			control: 'select',
+			options: [
+				'off',
+				'on',
+				'new-password',
+				'current-password',
+				'given-name',
+				'family-name',
+				'one-time-code',
+				'email',
+			],
+		},
+		name: {
+			control: 'text',
+		},
+	},
 	parameters: {
 		docs: {
 			source: { type: 'dynamic' },
@@ -20,7 +75,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Text = {
-	render: (args) => ({
+	render: (args: InputProps) => ({
 		components: { Input },
 		setup() {
 			const value = ref(args.modelValue);
@@ -40,7 +95,7 @@ export const Text = {
 } satisfies Story;
 
 export const TextareaFixedRows = {
-	render: (args) => ({
+	render: (args: InputProps) => ({
 		components: { Input },
 		setup() {
 			const value = ref(args.modelValue);
@@ -61,7 +116,7 @@ export const TextareaFixedRows = {
 } satisfies Story;
 
 export const TextareaAutosize = {
-	render: (args) => ({
+	render: (args: InputProps) => ({
 		components: { Input },
 		setup() {
 			const value = ref(args.modelValue);
@@ -82,7 +137,7 @@ export const TextareaAutosize = {
 } satisfies Story;
 
 export const TextareaAutosizeMinMax = {
-	render: (args) => ({
+	render: (args: InputProps) => ({
 		components: { Input },
 		setup() {
 			const value = ref(args.modelValue);
@@ -103,7 +158,7 @@ export const TextareaAutosizeMinMax = {
 } satisfies Story;
 
 export const Password = {
-	render: (args) => ({
+	render: (args: InputProps) => ({
 		components: { Input },
 		setup() {
 			const value = ref(args.modelValue);
@@ -123,7 +178,7 @@ export const Password = {
 } satisfies Story;
 
 export const WithPrefixSlot = {
-	render: (args) => ({
+	render: (args: InputProps) => ({
 		components: { Input, N8nIcon },
 		setup() {
 			const value = ref(args.modelValue);
@@ -146,7 +201,7 @@ export const WithPrefixSlot = {
 } satisfies Story;
 
 export const WithSuffixSlot = {
-	render: (args) => ({
+	render: (args: InputProps) => ({
 		components: { Input, N8nIcon },
 		setup() {
 			const value = ref(args.modelValue);
@@ -169,7 +224,7 @@ export const WithSuffixSlot = {
 } satisfies Story;
 
 export const WithPrefixAndSuffixSlots = {
-	render: (args) => ({
+	render: (args: InputProps) => ({
 		components: { Input, N8nIcon },
 		setup() {
 			const value = ref(args.modelValue);
@@ -195,7 +250,7 @@ export const WithPrefixAndSuffixSlots = {
 } satisfies Story;
 
 export const Clearable = {
-	render: (args) => ({
+	render: (args: InputProps) => ({
 		components: { Input },
 		setup() {
 			const value = ref(args.modelValue);
@@ -215,7 +270,7 @@ export const Clearable = {
 } satisfies Story;
 
 export const Disabled = {
-	render: (args) => ({
+	render: (args: InputProps) => ({
 		components: { Input },
 		setup() {
 			const value = ref(args.modelValue);
@@ -236,7 +291,7 @@ export const Disabled = {
 } satisfies Story;
 
 export const Sizes = {
-	render: (args) => ({
+	render: (args: InputProps) => ({
 		components: { Input },
 		setup() {
 			const value = ref(args.modelValue);
@@ -244,16 +299,38 @@ export const Sizes = {
 		},
 		template: `
 		<div class="input-story-container">
-			<h3>xlarge (48px)</h3>
-			<Input v-bind="args" v-model="value" size="xlarge" />
-			<h3 class="input-story-section">large (40px) - default</h3>
-			<Input v-bind="args" v-model="value" size="large" />
-			<h3 class="input-story-section">medium (36px)</h3>
-			<Input v-bind="args" v-model="value" size="medium" />
-			<h3 class="input-story-section">small (28px)</h3>
-			<Input v-bind="args" v-model="value" size="small" />
-			<h3 class="input-story-section">mini (22px)</h3>
-			<Input v-bind="args" v-model="value" size="mini" />
+			<div style="display: flex; gap: var(--spacing--md); align-items: flex-start;">
+				<div style="display: grid; gap: var(--spacing--3xs);">
+					<Input v-bind="args" v-model="value" size="xlarge" />
+					<span style="font-size: var(--font-size--2xs); color: var(--color--text--tint-1);">
+						xlarge (40px)
+					</span>
+				</div>
+				<div style="display: grid; gap: var(--spacing--3xs);">
+					<Input v-bind="args" v-model="value" size="large" />
+					<span style="font-size: var(--font-size--2xs); color: var(--color--text--tint-1);">
+						large (36px)
+					</span>
+				</div>
+				<div style="display: grid; gap: var(--spacing--3xs);">
+					<Input v-bind="args" v-model="value" size="medium" />
+					<span style="font-size: var(--font-size--2xs); color: var(--color--text--tint-1);">
+						medium (32px)
+					</span>
+				</div>
+				<div style="display: grid; gap: var(--spacing--3xs);">
+					<Input v-bind="args" v-model="value" size="small" />
+					<span style="font-size: var(--font-size--2xs); color: var(--color--text--tint-1);">
+						small (28px)
+					</span>
+				</div>
+				<div style="display: grid; gap: var(--spacing--3xs);">
+					<Input v-bind="args" v-model="value" size="mini" />
+					<span style="font-size: var(--font-size--2xs); color: var(--color--text--tint-1);">
+						mini (24px)
+					</span>
+				</div>
+			</div>
 		</div>
 		`,
 	}),
@@ -262,3 +339,33 @@ export const Sizes = {
 		modelValue: '',
 	},
 } satisfies Story;
+
+export const InlineWithButton = {
+	render: (args: InputProps) => ({
+		components: { Input, N8nButton },
+		setup() {
+			const primaryValue = ref(args.modelValue);
+			const secondaryValue = ref('');
+			return { args, primaryValue, secondaryValue };
+		},
+		template: `
+		<div class="input-story-container">
+			<div style="display: flex; gap: var(--spacing--2xs); align-items: center; width: 100%;">
+				<Input v-bind="args" v-model="primaryValue" placeholder="Search workflows" />
+				<N8nButton variant="solid" size="large">Search</N8nButton>
+			</div>
+			<div
+				style="display: flex; gap: var(--spacing--2xs); align-items: center; width: 100%; margin-top: var(--spacing--sm);"
+			>
+				<Input v-bind="args" v-model="secondaryValue" size="medium" placeholder="Invite by email" />
+				<N8nButton variant="subtle" size="medium">Invite</N8nButton>
+			</div>
+		</div>
+		`,
+	}),
+	args: {
+		placeholder: 'Search workflows',
+		modelValue: '',
+		size: 'large',
+	},
+} satisfies Story;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInput/Input.vue b/packages/frontend/@n8n/design-system/src/components/N8nInput/Input.vue
index 418d09b673b..d7d09a13760 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nInput/Input.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nInput/Input.vue
@@ -377,11 +377,64 @@ defineExpose({ focus, blur, select });
 </template>
 
 <style module lang="scss">
+@use '../../css/mixins/focus';
+
 .inputContainer {
 	display: inline-flex;
 	align-items: center;
 	width: 100%;
 	gap: var(--spacing--3xs);
+
+	--input--height: var(--height--lg);
+	--input--radius: var(--radius--2xs);
+	--input--font-size: var(--font-size--sm);
+
+	--input--color--background: light-dark(var(--color--neutral-white), var(--color--neutral-800));
+	--input--shadow: 0 0 0 0 transparent;
+	--input--shadow--hover: 0 0 0 0 transparent;
+	--input--shadow--focus: 0 0 0 0 transparent;
+	--input--border-color: light-dark(var(--color--black-alpha-200), var(--color--white-alpha-100));
+	--input--border-color--hover: light-dark(
+		var(--color--black-alpha-200),
+		var(--color--white-alpha-200)
+	);
+	--input--border-color--focus: light-dark(
+		var(--color--black-alpha-300),
+		var(--color--white-alpha-300)
+	);
+	--input--border--shadow: 0 0 0 1px var(--input--border-color);
+	--input--border--shadow--hover: 0 0 0 1px var(--input--border-color--hover);
+	--input--border--shadow--focus: 0 0 0 1px var(--input--border-color--focus);
+
+	&.xlarge {
+		--input--height: var(--height--xl);
+		--input--radius: var(--radius--2xs);
+		--input--font-size: var(--font-size--md);
+	}
+
+	&.large {
+		--input--height: var(--height--lg);
+		--input--radius: var(--radius--2xs);
+		--input--font-size: var(--font-size--sm);
+	}
+
+	&.medium {
+		--input--height: var(--height--md);
+		--input--radius: var(--radius--3xs);
+		--input--font-size: var(--font-size--sm);
+	}
+
+	&.small {
+		--input--height: var(--height--sm);
+		--input--radius: var(--radius--3xs);
+		--input--font-size: var(--font-size--xs);
+	}
+
+	&.mini {
+		--input--height: var(--height--xs);
+		--input--radius: var(--radius--3xs);
+		--input--font-size: var(--font-size--2xs);
+	}
 }
 
 .inputWrapper {
@@ -389,36 +442,31 @@ defineExpose({ focus, blur, select });
 	align-items: center;
 	flex: 1;
 	min-width: 0;
-	gap: var(--spacing--3xs);
-	border-radius: var(--input--radius--top-left, var(--input--radius, var(--radius)))
-		var(--input--radius--top-right, var(--input--radius, var(--radius)))
-		var(--input--radius--bottom-right, var(--input--radius, var(--radius)))
-		var(--input--radius--bottom-left, var(--input--radius, var(--radius)));
-	border: var(--input--border-width, var(--border-width))
-		var(--input--border-style, var(--border-style)) var(--input--border-color, var(--border-color));
-	background-color: var(--input--color--background, var(--color--background--light-2));
+	gap: var(--spacing--xs);
+	padding: 0 var(--spacing--xs);
+	border-radius: var(--input--radius);
+	background-color: var(--input--color--background);
+	box-shadow: var(--input--shadow), var(--input--border--shadow);
+
+	@include focus.focus-within-ring;
 
 	&:hover:not(.disabled):not(:focus-within) {
-		border-color: var(--input--border-color--hover, var(--color--foreground--shade-1));
+		box-shadow: var(--input--shadow--hover), var(--input--border--shadow--hover);
 	}
 
 	&:focus-within {
-		border-color: var(--input--border-color--focus, var(--color--secondary));
+		box-shadow: var(--input--shadow--focus), var(--input--border--shadow--focus);
 	}
 
 	&.disabled {
-		background-color: var(--color--background--light-3);
 		cursor: not-allowed;
 		opacity: 0.6;
 	}
-
-	&.readonly {
-		background-color: var(--color--background--light-3);
-	}
 }
 
 .isTextarea {
 	align-items: flex-start;
+	padding-inline: 0;
 }
 
 .disabled {
@@ -439,90 +487,21 @@ defineExpose({ focus, blur, select });
 	border-bottom-right-radius: 0;
 }
 
-/* Size variants - padding on wrapper, height on input */
-.xlarge .inputWrapper {
-	padding: 0 var(--spacing--xs);
-}
-
-.xlarge .input {
-	min-height: 48px;
-	font-size: var(--input--font-size, var(--font-size--md));
-}
-
-.xlarge .textarea {
-	padding: var(--spacing--2xs) 0;
-	font-size: var(--input--font-size, var(--font-size--md));
-}
-
-.large .inputWrapper {
-	padding: 0 var(--spacing--xs);
-}
-
-.large .input {
-	min-height: 40px;
-	font-size: var(--input--font-size, var(--font-size--sm));
-}
-
-.large .textarea {
-	padding: var(--spacing--2xs) 0;
-	font-size: var(--input--font-size, var(--font-size--sm));
-}
-
-.medium .inputWrapper {
-	padding: 0 var(--spacing--2xs);
-}
-
-.medium .input {
-	min-height: 36px;
-	font-size: var(--input--font-size, var(--font-size--sm));
-}
-
-.medium .textarea {
-	padding: var(--spacing--2xs) 0;
-	font-size: var(--input--font-size, var(--font-size--sm));
-}
-
-.small .inputWrapper {
-	padding: 0 var(--spacing--2xs);
-}
-
-.small .input {
-	min-height: 28px;
-	font-size: var(--input--font-size, var(--font-size--2xs));
-}
-
-.small .textarea {
-	padding: var(--spacing--2xs) 0;
-	font-size: var(--input--font-size, var(--font-size--2xs));
-}
-
-.mini .inputWrapper {
-	padding: 0 var(--spacing--3xs);
-}
-
-.mini .input {
-	min-height: 22px;
-	font-size: var(--input--font-size, var(--font-size--3xs));
-}
-
-.mini .textarea {
-	padding: var(--spacing--3xs) 0;
-	font-size: var(--input--font-size, var(--font-size--3xs));
-}
-
 .input {
 	flex: 1;
 	min-width: 0;
+	min-height: var(--input--height);
 	padding: 0;
 	border: none;
 	background: transparent;
 	outline: none;
 	font-family: inherit;
-	color: var(--color--text--shade-1);
+	font-size: var(--input--font-size, var(--font-size--md));
+	color: var(--color--text);
 }
 
-.input::placeholder {
-	color: var(--color--text--tint-1);
+.input:placeholder {
+	color: var(--color--text--subtler);
 }
 
 .input:read-only {
@@ -531,23 +510,24 @@ defineExpose({ focus, blur, select });
 
 .input:disabled {
 	cursor: not-allowed;
-	color: var(--color--text--tint-1);
+	color: var(--color--text--subtler);
 }
 
 .textarea {
 	flex: 1;
 	min-width: 0;
 	resize: vertical;
+	padding: var(--spacing--xs);
 	line-height: var(--line-height--md);
 	border: none;
 	background: transparent;
 	outline: none;
 	font-family: inherit;
-	color: var(--color--text--shade-1);
+	font-size: var(--input--font-size, var(--font-size--base));
 }
 
 .textarea::placeholder {
-	color: var(--color--text--tint-1);
+	color: var(--color--text--subtler);
 }
 
 .textarea:read-only {
@@ -556,7 +536,7 @@ defineExpose({ focus, blur, select });
 
 .textarea:disabled {
 	cursor: not-allowed;
-	color: var(--color--text--tint-1);
+	color: var(--color--text--subtler);
 }
 
 .prefix,
@@ -564,7 +544,13 @@ defineExpose({ focus, blur, select });
 	display: flex;
 	align-items: center;
 	flex-shrink: 0;
-	color: var(--color--text--tint-1);
+	color: var(--color--text);
+	opacity: 0.7;
+
+	svg {
+		width: var(--spacing--sm);
+		height: var(--spacing--sm);
+	}
 }
 
 .clearButton {
@@ -594,8 +580,7 @@ defineExpose({ focus, blur, select });
 	display: flex;
 	align-items: center;
 	flex-shrink: 0;
-	color: var(--color--text--tint-1);
-	background-color: var(--color--background--light-3);
+	background-color: light-dark(var(--color--neutral-150), var(--color--neutral-800));
 	padding: 0 var(--spacing--xs);
 }
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.stories.ts
index ecb79c13a11..a270a2f0501 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.stories.ts
@@ -4,7 +4,7 @@ import N8nInputLabel from './InputLabel.vue';
 import N8nInput from '../N8nInput';
 
 export default {
-	title: 'Atoms/Input Label',
+	title: 'Core/Input Label',
 	component: N8nInputLabel,
 	argTypes: {},
 	parameters: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInputNumber/InputNumber.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nInputNumber/InputNumber.stories.ts
index 7425fc02541..169b9a87ca1 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nInputNumber/InputNumber.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nInputNumber/InputNumber.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nInputNumber from './InputNumber.vue';
 
 export default {
-	title: 'Atoms/Input Number',
+	title: 'Core/Input Number',
 	component: N8nInputNumber,
 	argTypes: {
 		placeholder: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nKeyboardShortcut/KeyboardShortcut.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nKeyboardShortcut/KeyboardShortcut.stories.ts
index 07d6fd7312d..d00bcff0141 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nKeyboardShortcut/KeyboardShortcut.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nKeyboardShortcut/KeyboardShortcut.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nKeyboardShorcut from './N8nKeyboardShortcut.vue';
 
 export default {
-	title: 'Atoms/KeyboardShortcut',
+	title: 'Core/KeyboardShortcut',
 	component: N8nKeyboardShorcut,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nLink/Link.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nLink/Link.stories.ts
index 80914f21754..b3e6352fded 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nLink/Link.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nLink/Link.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nLink from './Link.vue';
 
 export default {
-	title: 'Atoms/Link',
+	title: 'Core/Link',
 	component: N8nLink,
 	argTypes: {
 		size: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nLoading/Loading.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nLoading/Loading.stories.ts
index 08f98da1566..dad08bb0ff6 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nLoading/Loading.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nLoading/Loading.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nLoading from './Loading.vue';
 
 export default {
-	title: 'Atoms/Loading',
+	title: 'Core/Loading',
 	component: N8nLoading,
 	argTypes: {
 		animated: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nLogo/Logo.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nLogo/Logo.stories.ts
index 93b62a3eccf..d9150841cd8 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nLogo/Logo.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nLogo/Logo.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nLogo from './Logo.vue';
 
 export default {
-	title: 'Atoms/Logo',
+	title: 'Core/Logo',
 	component: N8nLogo,
 	argTypes: {
 		size: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.stories.ts
index 5c6e5683a96..26fc1af8c0d 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nMarkdown from './Markdown.vue';
 
 export default {
-	title: 'Atoms/Markdown',
+	title: 'Core/Markdown',
 	component: N8nMarkdown,
 	argTypes: {
 		content: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nMenuItem/MenuItem.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
index d8007fae82c..200ad59540f 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
@@ -4,7 +4,7 @@ import { ElMenu } from 'element-plus';
 import N8nMenuItem from '.';
 
 export default {
-	title: 'Atoms/MenuItem',
+	title: 'Core/MenuItem',
 	component: N8nMenuItem,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.stories.ts
index 6057048abe4..cf7b6eb4929 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import NavigationDropdown from './NavigationDropdown.vue';
 
 export default {
-	title: 'Atoms/NavigationDropdown',
+	title: 'Core/NavigationDropdown',
 	component: NavigationDropdown,
 	argTypes: {},
 };
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.stories.ts
index 2c9ab5000e3..3ef6211fa24 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nNodeCreatorNode from './NodeCreatorNode.vue';
 
 export default {
-	title: 'Modules/Node Creator Node',
+	title: 'Core/Node Creator Node',
 	component: N8nNodeCreatorNode,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.stories.ts
index 952755453de..54ecad52a99 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nNodeIcon from './NodeIcon.vue';
 
 export default {
-	title: 'Atoms/NodeIcon',
+	title: 'Core/NodeIcon',
 	component: N8nNodeIcon,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nNotice/Notice.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nNotice/Notice.stories.ts
index 24cc0572f02..4a65ea75fb0 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nNotice/Notice.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nNotice/Notice.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nNotice from './Notice.vue';
 
 export default {
-	title: 'Atoms/Notice',
+	title: 'Core/Notice',
 	component: N8nNotice,
 	argTypes: {
 		theme: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPagination/Pagination.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nPagination/Pagination.stories.ts
index f71f71ae35b..c8fab22bfb0 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nPagination/Pagination.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nPagination/Pagination.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nPagination from './Pagination.vue';
 
 export default {
-	title: 'Atoms/Pagination',
+	title: 'Core/Pagination',
 	component: N8nPagination,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPopover/Popover.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nPopover/Popover.stories.ts
index 6c7bd82c018..8775839ea3d 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nPopover/Popover.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nPopover/Popover.stories.ts
@@ -6,7 +6,7 @@ import N8nButton from '../N8nButton/Button.vue';
 import N8nInput from '../N8nInput/Input.vue';
 
 export default {
-	title: 'Atoms/Popover',
+	title: 'Core/Popover',
 	component: N8nPopover,
 	argTypes: {
 		enableScrolling: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.stories.ts
index ea32114ae44..6d9153151e1 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nPromptInput/N8nPromptInput.stories.ts
@@ -5,7 +5,7 @@ import { ref } from 'vue';
 import N8nPromptInput from './N8nPromptInput.vue';
 
 export default {
-	title: 'Atoms/PromptInput',
+	title: 'Core/PromptInput',
 	component: N8nPromptInput,
 	argTypes: {
 		modelValue: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPromptInputSuggestions/N8nPromptInputSuggestions.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nPromptInputSuggestions/N8nPromptInputSuggestions.stories.ts
index a128975b50f..b6644583974 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nPromptInputSuggestions/N8nPromptInputSuggestions.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nPromptInputSuggestions/N8nPromptInputSuggestions.stories.ts
@@ -5,7 +5,7 @@ import type { WorkflowSuggestion } from '../../types/assistant';
 import N8nPromptInput from '../N8nPromptInput';
 
 export default {
-	title: 'Assistant/PromptInputSuggestions',
+	title: 'Core/PromptInputSuggestions',
 	component: N8nPromptInputSuggestions,
 	argTypes: {
 		suggestionClick: { action: 'suggestion-clicked' },
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nPulse/Pulse.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nPulse/Pulse.stories.ts
index 2a2b8ddcbe2..05da388699b 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nPulse/Pulse.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nPulse/Pulse.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nPulse from './Pulse.vue';
 
 export default {
-	title: 'Atoms/Pulse',
+	title: 'Core/Pulse',
 	component: N8nPulse,
 	argTypes: {},
 	parameters: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
index a7231861ced..49da4c260a4 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nRadioButtons from './RadioButtons.vue';
 
 export default {
-	title: 'Atoms/RadioButtons',
+	title: 'Core/RadioButtons',
 	component: N8nRadioButtons,
 	argTypes: {
 		size: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nRecycleScroller/RecycleScroller.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nRecycleScroller/RecycleScroller.stories.ts
index 29e7c726383..4cedb991baa 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nRecycleScroller/RecycleScroller.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nRecycleScroller/RecycleScroller.stories.ts
@@ -4,7 +4,7 @@ import type { ComponentInstance } from 'vue';
 import N8nRecycleScroller from './RecycleScroller.vue';
 
 export default {
-	title: 'Atoms/RecycleScroller',
+	title: 'Core/RecycleScroller',
 	component: N8nRecycleScroller,
 	argTypes: {},
 };
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.ts
index 3280625fe97..fe77cfeaea9 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.ts
@@ -11,7 +11,7 @@ interface ResizeData extends ActionOptions {
 }
 
 export default {
-	title: 'Atoms/ResizeWrapper',
+	title: 'Core/ResizeWrapper',
 	component: N8nResizeWrapper,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nResizeableSticky/ResizeableSticky.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nResizeableSticky/ResizeableSticky.stories.ts
index c5bd2495c50..8c11b8de275 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nResizeableSticky/ResizeableSticky.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nResizeableSticky/ResizeableSticky.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nResizeableSticky from './ResizeableSticky.vue';
 
 export default {
-	title: 'Atoms/ResizeableSticky',
+	title: 'Core/ResizeableSticky',
 	component: N8nResizeableSticky,
 	argTypes: {
 		content: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.stories.ts
index 7c10f17a4fb..c283439454f 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nScrollArea from './N8nScrollArea.vue';
 
 export default {
-	title: 'Atoms/ScrollArea',
+	title: 'Core/ScrollArea',
 	component: N8nScrollArea,
 	argTypes: {
 		type: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.stories.ts
index cdb79a5d27f..1a36941e743 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.stories.ts
@@ -6,7 +6,7 @@ import N8nIcon from '../N8nIcon';
 import N8nOption from '../N8nOption';
 
 export default {
-	title: 'Atoms/Select',
+	title: 'Core/Select',
 	component: N8nSelect,
 	argTypes: {
 		disabled: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.stories.ts
index 369540474e2..e34e926808e 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nSelectableList from './SelectableList.vue';
 
 export default {
-	title: 'Modules/SelectableList',
+	title: 'Core/SelectableList',
 	component: N8nSelectableList,
 	argTypes: {},
 	parameters: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts
index 46b982cad10..350b2e5ea81 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSendStopButton/N8nSendStopButton.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nSendStopButton from './N8nSendStopButton.vue';
 
 export default {
-	title: 'Atoms/SendStopButton',
+	title: 'Core/SendStopButton',
 	component: N8nSendStopButton,
 	argTypes: {
 		streaming: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.stories.ts
index e5215ece791..63685107df9 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nSpinner from './Spinner.vue';
 
 export default {
-	title: 'Atoms/Spinner',
+	title: 'Core/Spinner',
 	component: N8nSpinner,
 	argTypes: {
 		size: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSticky/Sticky.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nSticky/Sticky.stories.ts
index 34ce645dadf..2010971dc4d 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nSticky/Sticky.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSticky/Sticky.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nSticky from './Sticky.vue';
 
 export default {
-	title: 'Atoms/Sticky',
+	title: 'Core/Sticky',
 	component: N8nSticky,
 	argTypes: {
 		content: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSuggestedActions/SuggestedActions.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nSuggestedActions/SuggestedActions.stories.ts
index e58ccab5076..d09ea7e3f26 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nSuggestedActions/SuggestedActions.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSuggestedActions/SuggestedActions.stories.ts
@@ -5,7 +5,7 @@ import type { SuggestedActionsProps } from './SuggestedActions.vue';
 import N8nSuggestedActions from './SuggestedActions.vue';
 
 export default {
-	title: 'Modules/SuggestedActions',
+	title: 'Core/SuggestedActions',
 	component: N8nSuggestedActions,
 	argTypes: {
 		open: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts
index 2525c722cae..fc9e677fe9d 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts
@@ -5,7 +5,7 @@ import N8nTabs from './Tabs.vue';
 import type { TabOptions } from '../../types/tabs';
 
 export default {
-	title: 'Atoms/Tabs',
+	title: 'Core/Tabs',
 	component: N8nTabs,
 	argTypes: {},
 	parameters: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTag/Tag.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nTag/Tag.stories.ts
index f431655a334..f68e37bf99b 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nTag/Tag.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTag/Tag.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nTag from './Tag.vue';
 
 export default {
-	title: 'Atoms/Tag',
+	title: 'Core/Tag',
 	component: N8nTag,
 	argTypes: {
 		text: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTags/Tags.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nTags/Tags.stories.ts
index e9346623d85..8c4d0890592 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nTags/Tags.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTags/Tags.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nTags from './Tags.vue';
 
 export default {
-	title: 'Atoms/Tags',
+	title: 'Core/Tags',
 	component: N8nTags,
 	argTypes: {},
 };
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nText/Text.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nText/Text.stories.ts
index 9f310959e93..04d7a69db85 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nText/Text.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nText/Text.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nText from './Text.vue';
 
 export default {
-	title: 'Atoms/Text',
+	title: 'Core/Text',
 	component: N8nText,
 	argTypes: {
 		size: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.stories.ts
index d9f91b74e6f..5bb702a7cea 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.stories.ts
@@ -8,7 +8,7 @@ import N8nIcon from '@n8n/design-system/components/N8nIcon/Icon.vue';
 import Tooltip from './Tooltip.vue';
 
 const meta = {
-	title: 'Atoms/Tooltip',
+	title: 'Core/Tooltip',
 	component: Tooltip,
 	parameters: {
 		docs: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTree/Tree.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nTree/Tree.stories.ts
index 98d6c54c301..e38e785968e 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nTree/Tree.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTree/Tree.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nTree from './Tree.vue';
 
 export default {
-	title: 'Atoms/Tree',
+	title: 'Core/Tree',
 	component: N8nTree,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.stories.ts
index 0b89cfbd3a5..9e8a9ad29aa 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.stories.ts
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nUserInfo from './UserInfo.vue';
 
 export default {
-	title: 'Modules/UserInfo',
+	title: 'Core/UserInfo',
 	component: N8nUserInfo,
 	parameters: {
 		backgrounds: { default: '--color--background--light-2' },
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.stories.ts
index 16bb1b5c8ee..fadc2f08b5b 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.stories.ts
@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nUserSelect from './UserSelect.vue';
 
 export default {
-	title: 'Modules/UserSelect',
+	title: 'Core/UserSelect',
 	component: N8nUserSelect,
 	argTypes: {},
 	parameters: {
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.stories.ts
index 7e953b3b6d0..3b239a49848 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.stories.ts
@@ -4,7 +4,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import UserStack from './UserStack.vue';
 
 export default {
-	title: 'Modules/UserStack',
+	title: 'Core/UserStack',
 	component: UserStack,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.stories.ts
index 84bf88523e7..f99ac9e7f5b 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.stories.ts
@@ -6,7 +6,7 @@ import type { IUser } from '@n8n/design-system/types';
 import N8nUsersList from './UsersList.vue';
 
 export default {
-	title: 'Modules/UsersList',
+	title: 'Core/UsersList',
 	component: N8nUsersList,
 	argTypes: {},
 	parameters: {
diff --git a/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.stories.ts b/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.stories.ts
index 7458a4a417b..cfb1bc3d976 100644
--- a/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.stories.ts
@@ -14,7 +14,7 @@ interface StoryArgs {
 }
 
 export default {
-	title: 'Modules/TableHeaderControlsButton',
+	title: 'Tables/TableHeaderControlsButton',
 	component: TableHeaderControlsButton,
 };
 
diff --git a/packages/frontend/@n8n/design-system/src/css/_primitives.scss b/packages/frontend/@n8n/design-system/src/css/_primitives.scss
index dbe03a13dcc..8ee78a548cb 100644
--- a/packages/frontend/@n8n/design-system/src/css/_primitives.scss
+++ b/packages/frontend/@n8n/design-system/src/css/_primitives.scss
@@ -1,8 +1,3 @@
-/** Primitive Colors
-/** The primitives should not be used directly in components and other UI elements.
-/** They can be only mapped to tokens.
-/** Tokens should be used instead in components and other UI elements **/
-
 @mixin primitives {
 	--color--white-alpha-100: hsla(220, 1%, 100%, 0.1);
 	--color--white-alpha-200: hsla(220, 1%, 100%, 0.15);
@@ -207,6 +202,26 @@
 	--radius--xl: 1.5rem; /** 24px **/
 	--radius--2xl: 2rem; /** 32px **/
 	--radius--full: 9999px;
+
+	--height--5xs: 0.5rem; /** 8px **/
+	--height--4xs: 0.75rem; /** 12px **/
+	--height--3xs: 1rem; /** 16px **/
+	--height--2xs: 1.25rem; /** 20px **/
+	--height--xs: 1.5rem; /** 24px **/
+	--height--sm: 1.75rem; /** 28px **/
+	--height--md: 2rem; /** 32px **/
+	--height--lg: 2.25rem; /** 36px **/
+	--height--xl: 2.5rem; /** 40px **/
+	--height--2xl: 3rem; /** 48px **/
+	--height--3xl: 3.5rem; /** 56px **/
+	--height--4xl: 4rem; /** 64px **/
+	--height--5xl: 6rem; /** 96px **/
+
+	--duration--snappy: 0.15;
+	--duration--base: 0.3;
+	--easing--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+	--easing--ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	--easing--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 :root {
diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.new.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.dark.new.scss
deleted file mode 100644
index 4f819886091..00000000000
--- a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.new.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-// To be completed
-/* stylelint-disable */
-@mixin theme {
-	// Brand
-	--background--brand: var(--color--orange-300);
-	--background--brand--hover: var(--color--orange-400);
-	--background--brand--active: var(--color--orange-500);
-	--background--brand--focus: var(--color--orange-400);
-	--background--brand--disabled: var(--color--neutral-800);
-
-	// Surface
-	--background--surface: var(--color--neutral-900);
-	--background--surface--hover: var(--color--neutral-750);
-	--background--surface--active: var(--color--neutral-600);
-	--background--surface--focus: var(--color--neutral-750);
-	--background--surface--disabled: var(--color--neutral-800);
-
-	// Border
-	--border-color--subtle: var(--color--white-alpha-100);
-	--border-color: var(--color--white-alpha-200);
-	--border-color--strong: var(--color--white-alpha-300);
-
-	// Icon
-	--icon-color--subtle: var(--color--neutral-600);
-	--icon-color: var(--color--neutral-300);
-	--icon-color--strong: var(--color--neutral-white);
-
-	// Text
-	--text-color: var(--color--neutral-white);
-	--text-color--subtle: var(--color--neutral-250);
-	--text-color--subtler: var(--color--neutral-400);
-
-	// Success
-	--background--success: var(--color--green-950);
-	--border-color--success: var(--color--green-800);
-	--text-color--success: var(--color--green-50);
-	--icon-color--success: var(--color--green-50);
-
-	// Warning
-	--background--warning: var(--color--yellow-900);
-	--border-color--warning: var(--color--yellow-800);
-	--text-color--warning: var(--color--yellow-100);
-	--icon-color--warning: var(--color--yellow-100);
-
-	// Danger
-	--background--danger: var(--color--red-950);
-	--border-color--danger: var(--color--red-800);
-	--text-color--danger: var(--color--red-50);
-	--icon-color--danger: var(--color--red-50);
-
-	// Info
-	--background--info: var(--color--blue-900);
-	--border-color--info: var(--color--blue-800);
-	--text-color--info: var(--color--blue-50);
-	--icon-color--info: var(--color--blue-50);
-
-	// Inverse
-	--background--inverse: var(--color--neutral-white);
-	--border-color--inverse: var(--color--neutral-200);
-	--text-color--inverse: var(--color--neutral-800);
-	--icon-color--inverse: var(--color--neutral-800);
-}
-
-body[data-theme='dark'] {
-	@include theme;
-	color-scheme: dark;
-}
-
-@media (prefers-color-scheme: dark) {
-	body:not([data-theme]) {
-		@include theme;
-		color-scheme: dark;
-	}
-}
diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss
deleted file mode 100644
index 4df8fcb1b09..00000000000
--- a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss
+++ /dev/null
@@ -1,560 +0,0 @@
-@use 'sass:math';
-
-@mixin theme {
-	// Primary tokens
-	--color--danger: var(--color--red-400);
-
-	// Text
-	--color--text--shade-1: var(--color--neutral-125);
-	--color--text: var(--color--neutral-250);
-	--color--text--tint-1: var(--color--neutral-300);
-	--color--text--tint-2: var(--color--neutral-600);
-	--color--text--tint-3: var(--color--neutral-800);
-	--color--text--danger: var(--color--red-400);
-
-	// Foreground
-	--color--foreground--shade-2: var(--color--neutral-400);
-	--color--foreground--shade-1: var(--color--neutral-700);
-	--color--foreground: var(--color--neutral-800);
-	--color--foreground--tint-1: var(--color--neutral-850);
-	--color--foreground--tint-2: var(--color--neutral-950);
-
-	// Background
-	--color--background--shade-2: var(--color--neutral-150);
-	--color--background--shade-1: var(--color--neutral-600);
-	--color--background: var(--color--neutral-700);
-	--color--background--light-1: var(--color--neutral-850);
-	--color--background--light-2: var(--color--neutral-950);
-	--color--background--light-3: var(--color--neutral-900);
-
-	--shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.1);
-	--shadow--dark: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
-	--shadow--light: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
-
-	// Secondary tokens
-
-	// AI Assistant
-	--assistant--color--highlight-1: #8c90f2;
-	--assistant--color--highlight-2: #a977f0;
-	--assistant--color--highlight-3: #f0778b;
-	--assistant--button--color--background--gradient: linear-gradient(#2e2e2e, #2e2e2e);
-	--assistant--button--color--background--gradient--hover: linear-gradient(#383839, #383839);
-	--assistant--button--color--background--gradient--active: linear-gradient(#414244, #414244);
-	--assistant--button--color--background--hover: var(
-		--assistant--button--color--background--gradient--hover
-	);
-	--assistant--button--color--background--active: var(
-		--assistant--button--color--background--gradient--active
-	);
-
-	--assistant--color--highlight-gradient: linear-gradient(
-		105deg,
-		var(--assistant--color--highlight-1) 0%,
-		var(--assistant--color--highlight-2) 50%,
-		var(--assistant--color--highlight-3) 100%
-	);
-	--assistant--color--highlight-gradient--reverse: linear-gradient(
-		105deg,
-		var(--assistant--color--highlight-3) 0%,
-		var(--assistant--color--highlight-2) 50%,
-		var(--assistant--color--highlight-1) 100%
-	);
-
-	// AI Chat text and icon colors
-	--assistant--color--text--subtle: var(--color--neutral-250);
-	--assistant--icon-color--subtle: var(--color--neutral-250);
-	--assistant--color--text: var(--color--neutral-white);
-	--assistant--color--text--user-bubble: #f0f3f9;
-	--assistant--color--background--user-bubble: var(--color--neutral-800);
-
-	// LangChain
-	--lm-chat--messages--color--background: var(--color--neutral-950);
-	--lm-chat--bot--color--background: var(--color--neutral-850);
-	--lm-chat--bot--border-color: var(--color--neutral-500);
-	--lm-chat--user--color--background: var(--color--green-700);
-	--lm-chat--user--border-color: var(--color--green-600);
-
-	// Canvas
-	--canvas--color--background: var(--color--neutral-950);
-	--canvas--dot--color: var(--color--neutral-700);
-	--canvas--read-only-line--color: var(--color--neutral-900);
-	--canvas--color--selected: var(--color--white-alpha-400);
-	--canvas--color--selected-transparent: var(--canvas--color--selected);
-	--canvas--label--color: var(--color--neutral-500);
-	--canvas--label--color--background: oklch(from var(--canvas--color--background) l c h / 0.85);
-
-	// Nodes
-	--node--color--background: var(--color--neutral-850);
-	--node--color--background--executing: var(--color--neutral-700);
-	--node--color--background--executing-1: var(--color--neutral-700);
-	--node--border-color--pinned: var(--color--purple-500);
-	--node--type-main--color: var(--color--neutral-400);
-
-	// Sticky
-	--sticky--color--background: var(--color--yellow-900);
-	--sticky--border-color: var(--color--yellow-800);
-	--sticky--color--text: var(--color--neutral-125);
-	--sticky--code--color--text: var(--color--purple-300);
-	--sticky--code--color--background: var(--color--neutral-150-alpha-100);
-
-	--sticky--color--background--variant-1: var(--color--yellow-900);
-	--sticky--border-color--variant-1: var(--color--yellow-800);
-	--sticky--color--background--variant-2: var(--color--gold-900);
-	--sticky--border-color--variant-2: var(--color--gold-800);
-	--sticky--color--background--variant-3: var(--color--red-950);
-	--sticky--border-color--variant-3: var(--color--red-900);
-	--sticky--color--background--variant-4: var(--color--green-950);
-	--sticky--border-color--variant-4: var(--color--green-900);
-	--sticky--color--background--variant-5: var(--color--blue-900);
-	--sticky--border-color--variant-5: var(--color--blue-800);
-	--sticky--color--background--variant-6: var(--color--purple-950);
-	--sticky--border-color--variant-6: var(--color--purple-800);
-	--sticky--color--background--variant-7: var(--color--neutral-900);
-	--sticky--border-color--variant-7: var(--color--neutral-800);
-
-	// NodeIcon
-	--node--icon--color--neutral: var(--color--neutral-200);
-	--node--icon--color--black: var(--color--neutral-200);
-	--node--icon--color--blue: #898fff;
-	--node--icon--color--light-blue: #58abff;
-	--node--icon--color--dark-blue: #7ba7ff;
-	--node--icon--color--orange-red: var(--color--orange-300);
-	--node--icon--color--pink-red: #f85d82;
-	--node--icon--color--red: var(--color--red-400);
-	--node--icon--color--light-green: #20b69e;
-	--node--icon--color--green: #38cb7a;
-	--node--icon--color--dark-green: #86decc;
-	--node--icon--color--purple: #9b6dd5;
-	--node--icon--color--crimson: #f188a2;
-
-	// Expressions, autocomplete, infobox
-	--expression-editor--resolvable--color--foreground--valid: var(--color--green-300);
-	--expression-editor--resolvable--color--background--valid: var(--color--green-alpha-200);
-	--expression-editor--resolvable--color--foreground--invalid: var(--color--red-300);
-	--expression-editor--resolvable--color--background--invalid: var(--color--red-alpha-020);
-	--expression-editor--resolvable--color--foreground--pending: var(--color--text);
-	--expression-editor--resolvable--color--background--pending: var(--color--neutral-150-alpha-100);
-	--expression-editor--color--background: var(--color--neutral-900);
-	--expression-editor--modal--color--background: var(--color--neutral-900);
-	--expression-editor--syntax-example--color: var(--color--neutral-700);
-	--autocomplete--item--color--selected: var(--color--purple-400);
-	--autocomplete--section-header--border-color: var(--color--neutral-600);
-	--autocomplete--infobox--color--background: var(--color--neutral-900);
-	--autocomplete--infobox--examples--border-color: var(--color--neutral-700);
-
-	// Code
-	--code-tags--string--color: #9ecbff;
-	--code-tags--regex--color: #9ecbff;
-	--code-tags--primitive--color: #79b8ff;
-	--code-tags--keyword--color: #f97583;
-	--code-tags--variable--color: #79b8ff;
-	--code-tags--parameter--color: #e1e4e8;
-	--code-tags--function--color: #b392f0;
-	--code-tags--constant--color: #79b8ff;
-	--code-tags--property--color: #79b8ff;
-	--code-tags--type--color: #b392f0;
-	--code-tags--class--color: #b392f0;
-	--code-tags--heading--color: #79b8ff;
-	--code-tags--invalid--color: #f97583;
-	--code-tags--comment--color: #6a737d;
-	--json--color: var(--color--purple-400);
-	--json--null--color: var(--color--danger);
-	--json--boolean--color: var(--color--green-600);
-	--json--number--color: var(--color--green-600);
-	--json--string--color: var(--color--purple-400);
-	--json--key--color: var(--color--text--shade-1);
-	--json--brackets--color: var(--color--neutral-700);
-	--json--brackets--color--hover: var(--color--blue-400);
-	--json--line--color: var(--color--neutral-250);
-	--json--highlight--color: var(--color--background);
-	--code--color--background: var(--color--neutral-950);
-	--code--color--background--readonly: var(--color--neutral-850);
-	--code--line-highlight--color: var(--color--neutral-300-alpha-100);
-	--code--color--foreground: var(--color--neutral-150);
-	--code--caret--color: var(--color--neutral-50);
-	--code--selection--color: #3392ff44;
-	--code--selection--color--highlight: #17e5e633;
-	--code--gutter--color--background: var(--color--neutral-950);
-	--code--gutter--color--foreground: var(--color--neutral-300);
-	--code--gutter--color--foreground--active: var(--color--neutral-50);
-	--code--indentation-marker--color: var(--color--neutral-850);
-	--code--indentation-marker--color--active: var(--color--neutral-700);
-	--line-break--color: var(--color--neutral-400);
-	--code--line-break--color: var(--color--purple-500);
-
-	// Tag
-	--tag--color--background: var(--color--neutral-700);
-	--tag--color--background--hover: var(--color--neutral-600);
-	--tag--border-color: var(--color--neutral-800);
-	--tag--border-color--hover: var(--color--neutral-700);
-	--tag--color--text: var(--color--text--shade-1);
-
-	// Variables
-	--variables-usage--color--text: var(--color--green-300);
-	--variables-usage--syntax--color--background: var(--color--green-alpha-200);
-
-	// Button primary
-	--button--outline-color--primary--focus: var(--color--orange-alpha-300);
-	--button--color--text--primary--disabled: var(--color--white-alpha-500);
-	--button--border-color--primary--disabled: transparent;
-	--button--color--background--primary--disabled: var(--color--orange-alpha-500);
-
-	// Button secondary
-	--button--color--text--secondary: var(--color--neutral-150);
-	--button--border-color--secondary: var(--color--foreground);
-	--button--color--background--secondary: var(--color--background--light-2);
-	--button--color--text--secondary--hover-active-focus: var(--color--orange-250);
-	--button--color--background--secondary--hover: var(--color--background--light-2);
-	--button--color--background--secondary--active-focus: var(--color--orange-alpha-100);
-	--button--outline-color--secondary--focus: var(--color--orange-alpha-300);
-	--button--color--text--secondary--disabled: var(--color--white-alpha-500);
-	--button--border-color--secondary--disabled: var(--color--foreground);
-
-	// Button highlight
-	--button--color--text--highlight: var(--color--neutral-300);
-	--button--border-color--highlight: transparent;
-	--button--color--background--highlight: transparent;
-	--button--color--text--highlight--hover-active-focus: var(--color--orange-400);
-	--button--border-color--highlight--hover-active-focus: var(--color--neutral-700);
-	--button--color--background--highlight--hover: var(--color--neutral-700);
-	--button--color--background--highlight--active-focus: var(--color--neutral-700);
-	--button--outline-color--highlight--focus: var(--color--neutral-700);
-	--button--color--text--highlight--disabled: var(--color--neutral-600);
-	--button--border-color--highlight--disabled: transparent;
-
-	// Button highlight-fill
-	--button--color--text--highlight-fill: var(--color--text--shade-1);
-	--button--border-color--highlight-fill: transparent;
-	--button--color--background--highlight-fill: var(--color--background);
-	--button--color--text--highlight-fill--hover-active-focus: var(--color--primary);
-	--button--border-color--highlight-fill--hover-active-focus: transparent;
-	--button--color--background--highlight-fill--hover: var(--color--background);
-	--button--color--background--highlight-fill--active-focus: var(--color--background);
-	--button--outline-color--highlight-fill--focus: var(--color--neutral-700);
-	--button--color--text--highlight-fill--disabled: var(--color--neutral-600);
-	--button--border-color--highlight-fill--disabled: transparent;
-	--button--color--background--highlight-fill--disabled: var(--color--background);
-
-	// Button success, warning, danger
-	--button--color--text--danger: var(--color--neutral-white);
-	--button--border-color--danger: transparent;
-	--button--outline-color--danger--focus: var(--color--red-300);
-	--button--color--text--danger--disabled: var(--color--white-alpha-400);
-	--button--border-color--danger--disabled: transparent;
-	--button--color--background--danger--disabled: var(--color--red-alpha-020);
-
-	// Text button
-	--text-button--color--text--secondary: var(--color--neutral-300);
-
-	// Node Creator Button
-	--node-creator--button--color--text: var(--button--color--text--secondary);
-	--node-creator--button--color--text--hover: var(
-		--button--color--text--secondary--hover-active-focus
-	);
-	--node-creator--button--border-color--hover: var(--color--orange-300);
-	--node-creator--button--color--background: var(--color--orange-alpha-100);
-
-	// Table
-	--table--header--color--background: var(--color--neutral-850);
-	--table--row--color--background: var(--color--neutral-950);
-	--table--row--color--background--even: var(--color--neutral-900);
-	--table--row--color--background--hover: var(--color--neutral-850);
-	--table--row--color--background--highlight: var(--color--warning--tint-1);
-
-	// Notification
-	--notification--color--background: var(--color--neutral-850);
-
-	// Execution
-	--execution-card--color--background: var(--color--foreground--tint-1);
-	--execution-card--color--background--hover: var(--color--foreground);
-	--execution-selector--color--background: var(--color--background--shade-2);
-	--execution-selector--color--text: var(--color--text--tint-3);
-	--execution-select-all--color--text: var(--color--text);
-	--execution-card--color--text--waiting: var(--color--purple-500);
-
-	// NDV
-	--run-data--color--background: var(--color--neutral-900);
-	--ndvv2--run-data--color--background: var(--color--neutral-900);
-	--ndv--droppable-parameter--color: var(--color--orange-300);
-	--ndv--droppable-parameter--color--background: var(--color--orange-alpha-100);
-	--ndv--droppable-parameter--color--background--active: var(--color--green-alpha-100);
-	--ndv--back--color--text: var(--color--neutral-white);
-	--ndv--background--color: var(--color--background--light-1);
-	--ndv--header--color: var(--color--neutral-750);
-
-	// Notice
-	--notice--border-color--warning: var(--color--gold-200);
-	--notice--color--background--warning: var(--color--gold-alpha-020);
-	--notice--color--text: var(--color--neutral-white);
-
-	// Callout
-	--callout--border-color--info: var(--color--foreground);
-	--callout--color--background--info: var(--color--neutral-900);
-	--callout--color--text--info: var(--color--neutral-white);
-	--callout--border-color--success: var(--color--success);
-	--callout--color--background--success: var(--color--green-900);
-	--callout--color--text--success: var(--color--neutral-white);
-	--callout--border-color--warning: var(--color--warning);
-	--callout--color--background--warning: var(--color--gold-800);
-	--callout--color--text--warning: var(--color--neutral-white);
-	--callout--border-color--danger: var(--color--red-800);
-	--callout--color--background--danger: var(--color--red-950);
-	--callout--color--text--danger: var(--color--neutral-white);
-	--callout--icon-color--danger: var(--color--danger);
-	--callout--border-color--secondary: var(--color--secondary);
-	--callout--color--background--secondary: var(--color--purple-alpha-200);
-	--callout--color--text--secondary: var(--color--neutral-white);
-
-	// Dialogs and overlays
-	--dialog--color--background: var(--color--neutral-900);
-	--dialog--overlay--color--background: var(--color--slate-alpha-700);
-	--dialog--overlay--color--background--dark: var(--color--black-alpha-600);
-
-	// Avatar
-	--avatar--color--text: var(--color--neutral-white);
-
-	// NPS Survey
-	--nps-survey--color--background: var(--color--neutral-850);
-	--nps-survey--color--text: var(--color--neutral-white);
-
-	// Switch (Activation, boolean)
-	--switch--color--background: var(--color--neutral-950);
-	--switch--border-color: var(--color--neutral-700);
-	--switch--toggle--color: var(--color--neutral-125);
-
-	// Action Dropdown
-	--action-dropdown--item--color--background--active: var(--color--background--light-3);
-
-	// Input Triple
-	--input-triple--color--background: var(--color--neutral-900);
-
-	// Node error
-	--node--error-output--color--text: var(--color--danger);
-
-	// MFA Recovery codes
-	--mfa--recovery-code--color--background: var(--color--background--light-3);
-	--mfa--recovery-code--color: var(--color--text--shade-1);
-	--mfa--lose-access--color--text: var(--color--danger);
-
-	// Text highlight
-	--text-highlight--color--background: var(--color--yellow-700);
-
-	// AI
-	--node-type--color--background--l: 20%;
-	--node-type--supplemental--label--color--h: 235;
-	--node-type--supplemental--label--color--s: 28%;
-	--node-type--supplemental--label--color--l: 40%;
-	--node-type--supplemental--color--h: 235;
-	--node-type--supplemental--color--s: 13%;
-	--node-type--supplemental--color--l: 60%;
-	--node-type--supplemental--label--color: hsl(
-		var(--node-type--supplemental--label--color--h),
-		var(--node-type--supplemental--label--color--s),
-		var(--node-type--supplemental--label--color--l)
-	);
-	--node-type--supplemental--icon--color: var(--color--foreground--shade-1);
-	--node-type--supplemental--color: hsl(
-		var(--node-type--supplemental--color--h),
-		var(--node-type--supplemental--color--s),
-		var(--node-type--supplemental--color--l)
-	);
-	--node-type--supplemental--color--background: hsl(
-		var(--node-type--supplemental--color--h),
-		var(--node-type--supplemental--color--s),
-		var(--node-type--color--background--l)
-	);
-	--node-type--supplemental--connector--color: var(--color--foreground--shade-1);
-	--node-type--ai-chain--color--h: var(--node-type--supplemental--color--h);
-	--node-type--ai-chain--color--s: var(--node-type--supplemental--color--s);
-	--node-type--ai-chain--color--l: var(--node-type--supplemental--color--l);
-	--node-type--ai-chain--color: hsl(
-		var(--node-type--ai-chain--color--h),
-		var(--node-type--ai-chain--color--s),
-		var(--node-type--ai-chain--color--l)
-	);
-	--node-type--chain--color--background: hsl(
-		var(--node-type--ai-chain--color--h),
-		var(--node-type--ai-chain--color--s),
-		var(--node-type--color--background--l)
-	);
-	--node-type--ai-document--color--h: var(--node-type--supplemental--color--h);
-	--node-type--ai-document--color--s: var(--node-type--supplemental--color--s);
-	--node-type--ai-document--color--l: var(--node-type--supplemental--color--l);
-	--node-type--ai-document--color: hsl(
-		var(--node-type--ai-document--color--h),
-		var(--node-type--ai-document--color--s),
-		var(--node-type--ai-document--color--l)
-	);
-	--node-type--ai-document--color--background: hsl(
-		var(--node-type--ai-document--color--h),
-		var(--node-type--ai-document--color--s),
-		var(--node-type--color--background--l)
-	);
-	--node-type--ai-embedding--color--h: var(--node-type--supplemental--color--h);
-	--node-type--ai-embedding--color--s: var(--node-type--supplemental--color--s);
-	--node-type--ai-embedding--color--l: var(--node-type--supplemental--color--l);
-	--node-type--ai-embedding--color: hsl(
-		var(--node-type--ai-embedding--color--h),
-		var(--node-type--ai-embedding--color--s),
-		var(--node-type--ai-embedding--color--l)
-	);
-	--node-type--ai-embedding--color--background: hsl(
-		var(--node-type--ai-embedding--color--h),
-		var(--node-type--ai-embedding--color--s),
-		var(--node-type--color--background--l)
-	);
-	--node-type--ai-language-model--color--h: var(--node-type--supplemental--color--h);
-	--node-type--ai-language-model--color--s: var(--node-type--supplemental--color--s);
-	--node-type--ai-language-model--color--l: var(--node-type--supplemental--color--l);
-	--node-type--ai-language-model--color: hsl(
-		var(--node-type--ai-language-model--color--h),
-		var(--node-type--ai-language-model--color--s),
-		var(--node-type--ai-language-model--color--l)
-	);
-	--node-type--ai-language-model--color--background: hsl(
-		var(--node-type--ai-language-model--color--h),
-		var(--node-type--ai-language-model--color--s),
-		var(--node-type--color--background--l)
-	);
-	--node-type--ai-memory--color--h: var(--node-type--supplemental--color--h);
-	--node-type--ai-memory--color--s: var(--node-type--supplemental--color--s);
-	--node-type--ai-memory--color--l: var(--node-type--supplemental--color--l);
-	--node-type--ai-memory--color: hsl(
-		var(--node-type--ai-memory--color--h),
-		var(--node-type--ai-memory--color--s),
-		var(--node-type--ai-memory--color--l)
-	);
-	--node-type--ai-memory--color--background: hsl(
-		var(--node-type--ai-memory--color--h),
-		var(--node-type--ai-memory--color--s),
-		var(--node-type--color--background--l)
-	);
-	--node-type--ai-output-parser--color--h: var(--node-type--supplemental--color--h);
-	--node-type--ai-output-parser--color--s: var(--node-type--supplemental--color--s);
-	--node-type--ai-output-parser--color--l: var(--node-type--supplemental--color--l);
-	--node-type--ai-output-parser--color: hsl(
-		var(--node-type--ai-output-parser--color--h),
-		var(--node-type--ai-output-parser--color--s),
-		var(--node-type--ai-output-parser--color--l)
-	);
-	--node-type--ai-output-parser--color--background: hsl(
-		var(--node-type--ai-output-parser--color--h),
-		var(--node-type--ai-output-parser--color--s),
-		var(--node-type--color--background--l)
-	);
-	--node-type--ai-tool--color--h: var(--node-type--supplemental--color--h);
-	--node-type--ai-tool--color--s: var(--node-type--supplemental--color--s);
-	--node-type--ai-tool--color--l: var(--node-type--supplemental--color--l);
-	--node-type--ai-tool--color: hsl(
-		var(--node-type--ai-tool--color--h),
-		var(--node-type--ai-tool--color--s),
-		var(--node-type--ai-tool--color--l)
-	);
-	--node-type--ai-tool--color--background: hsl(
-		var(--node-type--ai-tool--color--h),
-		var(--node-type--ai-tool--color--s),
-		var(--node-type--color--background--l)
-	);
-	--node-type--ai-retriever--color--h: var(--node-type--supplemental--color--h);
-	--node-type--ai-retriever--color--s: var(--node-type--supplemental--color--s);
-	--node-type--ai-retriever--color--l: var(--node-type--supplemental--color--l);
-	--node-type--ai-retriever--color: hsl(
-		var(--node-type--ai-retriever--color--h),
-		var(--node-type--ai-retriever--color--s),
-		var(--node-type--ai-retriever--color--l)
-	);
-	--node-type--ai-retriever--color--background: hsl(
-		var(--node-type--ai-retriever--color--h),
-		var(--node-type--ai-retriever--color--s),
-		var(--node-type--color--background--l)
-	);
-	--node-type--ai-text-splitter--color--h: var(--node-type--supplemental--color--h);
-	--node-type--ai-text-splitter--color--s: var(--node-type--supplemental--color--s);
-	--node-type--ai-text-splitter--color--l: var(--node-type--supplemental--color--l);
-	--node-type--ai-text-splitter--color: hsl(
-		var(--node-type--ai-text-splitter--color--h),
-		var(--node-type--ai-text-splitter--color--s),
-		var(--node-type--ai-text-splitter--color--l)
-	);
-	--node-type--ai-text-splitter--color--background: hsl(
-		var(--node-type--ai-text-splitter--color--h),
-		var(--node-type--ai-text-splitter--color--s),
-		var(--node-type--color--background--l)
-	);
-	--node-type--ai-vector-retriever--color--h: var(--node-type--supplemental--color--h);
-	--node-type--ai-vector-retriever--color--s: var(--node-type--supplemental--color--s);
-	--node-type--ai-vector-retriever--color--l: var(--node-type--supplemental--color--l);
-	--node-type--ai-vector-retriever--color: hsl(
-		var(--node-type--ai-vector-retriever--color--h),
-		var(--node-type--ai-vector-retriever--color--s),
-		var(--node-type--ai-vector-retriever--color--l)
-	);
-	--node-type--ai-vector-retriever--color--background: hsl(
-		var(--node-type--ai-vector-retriever--color--h),
-		var(--node-type--ai-vector-retriever--color--s),
-		var(--node-type--color--background--l)
-	);
-	--node-type--ai-vector-store--color--h: var(--node-type--supplemental--color--h);
-	--node-type--ai-vector-store--color--s: var(--node-type--supplemental--color--s);
-	--node-type--ai-vector-store--color--l: var(--node-type--supplemental--color--l);
-	--node-type--ai-vector-store--color: hsl(
-		var(--node-type--ai-vector-store--color--h),
-		var(--node-type--ai-vector-store--color--s),
-		var(--node-type--ai-vector-store--color--l)
-	);
-	--node-type--ai-vector-store--color--background: hsl(
-		var(--node-type--ai-vector-store--color--h),
-		var(--node-type--ai-vector-store--color--s),
-		var(--node-type--color--background--l)
-	);
-
-	// Diff colors (dark theme overrides)
-	--diff--color--new: #38cb7a;
-	--diff--color--new--light: #43674f;
-	--diff--color--new--faint: #3a463e;
-	--diff--color--modified: #d6a625;
-	--diff--color--modified--light: #6a5c38;
-	--diff--color--modified--faint: #464236;
-	--diff--color--deleted: #fb887a;
-	--diff--color--deleted--light: #7a524e;
-	--diff--color--deleted--faint: #4d3e3d;
-
-	// Various
-	--color--info--tint-1: var(--color--neutral-400);
-	--color--info--tint-2: var(--color--neutral-850);
-	--border-color: var(--color--foreground);
-	--border-color--light: var(--color--foreground--tint-1);
-	--border: var(--border-width) var(--border-style) var(--color--foreground);
-	--node-type--supplemental--label--color--l: 100%;
-	--node-type--supplemental--label--color: hsl(
-		var(--node-type--supplemental--label--color--h),
-		var(--node-type--supplemental--label--color--s),
-		var(--node-type--supplemental--label--color--l)
-	);
-	--node--configurable-name--color: var(--color--text--shade-1);
-	--link--color--secondary: var(--color--purple-400);
-	--link--color--secondary--hover: var(--color--purple-500);
-	// Params
-	--icon--color: var(--color--text--tint-1);
-	--icon--color--hover: var(--color--orange-300);
-
-	--menu--color--background: var(--color--neutral-900);
-	--menu--color--background--hover: var(--color--neutral-700);
-	--menu--color--background--active: var(--color--neutral-700);
-
-	/* Ag Grid */
-	--grid--row--color--background--selected: var(--color--purple-900);
-
-	--command-bar-item--color--background--hover: var(--color--background--light-1);
-	--command-bar--shadow: 0 15px 45px 0 hsla(0, 0%, 0%, 0.25), 0 5px 10px 0 hsla(0, 0%, 0%, 0.15);
-}
-
-body[data-theme='dark'] {
-	@include theme;
-}
-
-@media (prefers-color-scheme: dark) {
-	body:not([data-theme]) {
-		@include theme;
-	}
-}
diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.new.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.new.scss
deleted file mode 100644
index ae0e038b475..00000000000
--- a/packages/frontend/@n8n/design-system/src/css/_tokens.new.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-/* stylelint-disable */
-@mixin theme {
-	--background--brand: var(--color--orange-400);
-	--background--brand--hover: var(--color--orange-500);
-	--background--brand--active: var(--color--orange-600);
-	--background--brand--focus: var(--color--orange-400);
-	--background--brand--disabled: var(--color--neutral-200);
-
-	--background--surface: var(--color--neutral-white);
-	--background--surface--hover: var(--color--neutral-100);
-	--background--surface--active: var(--color--neutral-125);
-	--background--surface--focus: var(--color--neutral-100);
-	--background--surface--disabled: var(--color--neutral-200);
-
-	--border-color: var(--color--black-alpha-200);
-	--border-color--subtle: var(--color--black-alpha-100);
-	--border-color--strong: var(--color--black-alpha-300);
-	--border-color--stronger: var(--color--black-alpha-400);
-
-	--icon-color--subtle: var(--color--neutral-200);
-	--icon-color: var(--color--neutral-500);
-	--icon-color--strong: var(--color--neutral-800);
-
-	--text-color: var(--color--neutral-800);
-	--text-color--subtle: var(--color--neutral-500);
-	--text-color--subtler: var(--color--neutral-200);
-
-	--background--success: var(--color--green-50);
-	--border-color--success: var(--color--green-200);
-	--text-color--success: var(--color--green-800);
-	--icon-color--success: var(--color--green-800);
-
-	--background--warning: var(--color--yellow-100);
-	--border-color--warning: var(--color--yellow-200);
-	--text-color--warning: var(--color--yellow-800);
-	--icon-color--warning: var(--color--yellow-800);
-
-	--background--danger: var(--color--red-50);
-	--border-color--danger: var(--color--red-200);
-	--text-color--danger: var(--color--red-800);
-	--icon-color--danger: var(--color--red-800);
-
-	--background--info: var(--color--blue-50);
-	--border-color--info: var(--color--blue-200);
-	--text-color--info: var(--color--blue-800);
-	--icon-color--info: var(--color--blue-800);
-
-	--background--inverse: var(--color--neutral-900);
-	--border-color--inverse: var(--color--neutral-700);
-	--text-color--inverse: var(--color--neutral-100);
-	--icon-color--inverse: var(--color--neutral-100);
-}
-
-:root {
-	@include theme;
-}
diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.scss
index 4c93750d4a0..12e2a9571fe 100644
--- a/packages/frontend/@n8n/design-system/src/css/_tokens.scss
+++ b/packages/frontend/@n8n/design-system/src/css/_tokens.scss
@@ -26,7 +26,7 @@
 	/* stylelint-disable-next-line @n8n/css-var-naming */
 	--color--primary--l: 68%;
 
-	// Primary tokens
+	// Legacy tokens (kept for compatibility)
 
 	// Primary
 	/* stylelint-disable-next-line @n8n/css-var-naming */
@@ -78,7 +78,7 @@
 	/* stylelint-disable-next-line @n8n/css-var-naming */
 	--color--danger--shade-1: var(--color-danger-shade-1, var(--color--red-700));
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--danger: var(--color-danger, var(--color--red-600));
+	--color--danger: light-dark(var(--color-danger, var(--color--red-600)), var(--color--red-400));
 	/* stylelint-disable-next-line @n8n/css-var-naming */
 	--color--danger--tint-1: var(--color-danger-light, var(--color--red-400));
 	/* stylelint-disable-next-line @n8n/css-var-naming */
@@ -90,53 +90,108 @@
 
 	// Text
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--text--shade-1: var(--color-text-dark, var(--color--neutral-850));
+	--color--text--shade-1: light-dark(
+		var(--color-text-dark, var(--color--neutral-850)),
+		var(--color--neutral-125)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--text: var(--color-text-base, var(--color--neutral-600));
+	--color--text: light-dark(
+		var(--color-text-base, var(--color--neutral-600)),
+		var(--color--neutral-250)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--text--tint-1: var(--color-text-light, var(--color--neutral-400));
+	--color--text--tint-1: light-dark(
+		var(--color-text-light, var(--color--neutral-400)),
+		var(--color--neutral-300)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--text--tint-2: var(--color-text-lighter, var(--color--neutral-200));
+	--color--text--tint-2: light-dark(
+		var(--color-text-lighter, var(--color--neutral-200)),
+		var(--color--neutral-600)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--text--tint-3: var(--color-text-xlight, var(--color--neutral-white));
+	--color--text--tint-3: light-dark(
+		var(--color-text-xlight, var(--color--neutral-white)),
+		var(--color--neutral-800)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--text--danger: var(--color-text-danger, var(--color--red-600));
+	--color--text--danger: light-dark(
+		var(--color-text-danger, var(--color--red-600)),
+		var(--color--red-400)
+	);
 
 	// Foreground
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--foreground--shade-2: var(--color-foreground-xdark, var(--color--neutral-500));
+	--color--foreground--shade-2: light-dark(
+		var(--color-foreground-xdark, var(--color--neutral-500)),
+		var(--color--neutral-400)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--foreground--shade-1: var(--color-foreground-dark, var(--color--neutral-250));
+	--color--foreground--shade-1: light-dark(
+		var(--color-foreground-dark, var(--color--neutral-250)),
+		var(--color--neutral-700)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--foreground: var(--color-foreground-base, var(--color--neutral-200));
+	--color--foreground: light-dark(
+		var(--color-foreground-base, var(--color--neutral-200)),
+		var(--color--neutral-800)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--foreground--tint-1: var(--color-foreground-light, var(--color--neutral-150));
+	--color--foreground--tint-1: light-dark(
+		var(--color-foreground-light, var(--color--neutral-150)),
+		var(--color--neutral-850)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--foreground--tint-2: var(--color-foreground-xlight, var(--color--neutral-white));
+	--color--foreground--tint-2: light-dark(
+		var(--color-foreground-xlight, var(--color--neutral-white)),
+		var(--color--neutral-950)
+	);
 
 	// Background
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--background--shade-2: var(--color-background-dark, var(--color--neutral-950));
+	--color--background--shade-2: light-dark(
+		var(--color-background-dark, var(--color--neutral-950)),
+		var(--color--neutral-150)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--background--shade-1: var(--color-background-medium, var(--color--neutral-200));
+	--color--background--shade-1: light-dark(
+		var(--color-background-medium, var(--color--neutral-200)),
+		var(--color--neutral-600)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--background: var(--color-background-base, var(--color--neutral-125));
+	--color--background: light-dark(
+		var(--color-background-base, var(--color--neutral-125)),
+		var(--color--neutral-700)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--background--light-1: var(--color-background-light-base, var(--color--neutral-100));
+	--color--background--light-1: light-dark(
+		var(--color-background-light-base, var(--color--neutral-100)),
+		var(--color--neutral-850)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--background--light-2: var(--color-background-light, var(--color--neutral-50));
+	--color--background--light-2: light-dark(
+		var(--color-background-light, var(--color--neutral-50)),
+		var(--color--neutral-950)
+	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--color--background--light-3: var(--color-background-xlight, var(--color--neutral-white));
+	--color--background--light-3: light-dark(
+		var(--color-background-xlight, var(--color--neutral-white)),
+		var(--color--neutral-900)
+	);
 
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--shadow: var(--box-shadow-base, 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04));
+	--shadow: var(
+		--box-shadow-base,
+		0 2px 4px var(--color--black-alpha-200),
+		0 0 6px var(--color--black-alpha-100)
+	);
 	--shadow--dark: var(
 		/* stylelint-disable-next-line @n8n/css-var-naming */ --box-shadow-dark,
-		0 2px 4px rgba(0, 0, 0, 0.12),
-		0 0 6px rgba(0, 0, 0, 0.12)
+		0 2px 4px var(--color--black-alpha-200),
+		0 0 6px var(--color--black-alpha-200)
 	);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--shadow--light: var(--box-shadow-light, 0 2px 12px 0 rgba(0, 0, 0, 0.07));
+	--shadow--light: var(--box-shadow-light, 0 2px 12px 0 var(--color--black-alpha-100));
 	--shadow--card-hover: 0 2px 8px rgba(68, 28, 23, 0.1);
 
 	/* stylelint-disable-next-line @n8n/css-var-naming */
@@ -148,7 +203,6 @@
 	/* stylelint-disable-next-line @n8n/css-var-naming */
 	--radius--sm: var(--border-radius-small, 2px);
 	/* stylelint-disable-next-line @n8n/css-var-naming */
-	--border-color: var(--border-color-base, var(--color--foreground));
 	/* stylelint-disable-next-line @n8n/css-var-naming */
 	--border-color--light: var(--border-color-light, var(--color--foreground--tint-1));
 
@@ -159,8 +213,75 @@
 	/* stylelint-disable-next-line @n8n/css-var-naming */
 	--border: var(--border-base, var(--border-width) var(--border-style) var(--color--foreground));
 
+	/* stylelint-disable @n8n/css-var-naming */
+	// New semantic tokens (preferred)
+
+	--background--brand: light-dark(var(--color--orange-400), var(--color--orange-300));
+	--background--brand--hover: light-dark(var(--color--orange-500), var(--color--orange-400));
+	--background--brand--active: light-dark(var(--color--orange-600), var(--color--orange-500));
+	--background--brand--focus: light-dark(var(--color--orange-400), var(--color--orange-400));
+	--background--brand--disabled: light-dark(var(--color--neutral-200), var(--color--neutral-800));
+
+	--background--surface: light-dark(var(--color--neutral-white), var(--color--neutral-900));
+	--background--surface--hover: light-dark(var(--color--neutral-100), var(--color--neutral-750));
+	--background--surface--active: light-dark(var(--color--neutral-125), var(--color--neutral-600));
+	--background--surface--focus: light-dark(var(--color--neutral-100), var(--color--neutral-750));
+	--background--surface--disabled: light-dark(var(--color--neutral-200), var(--color--neutral-800));
+
+	--border-color: light-dark(
+		var(--border-color-base, var(--color--black-alpha-200)),
+		var(--border-color-base, var(--color--white-alpha-200))
+	);
+	--border-color--subtle: light-dark(var(--color--black-alpha-100), var(--color--white-alpha-100));
+	--border-color--strong: light-dark(var(--color--black-alpha-300), var(--color--white-alpha-300));
+	--border-color--stronger: light-dark(
+		var(--color--black-alpha-400),
+		var(--color--white-alpha-400)
+	);
+
+	--icon-color--subtle: light-dark(var(--color--neutral-200), var(--color--neutral-600));
+	--icon-color: light-dark(var(--color--neutral-500), var(--color--neutral-300));
+	--icon-color--strong: light-dark(var(--color--neutral-800), var(--color--neutral-white));
+
+	--text-color: light-dark(var(--color--neutral-900), var(--color--neutral-white));
+	--text-color--subtle: light-dark(var(--color--neutral-700), var(--color--neutral-200));
+	--text-color--subtler: light-dark(var(--color--neutral-500), var(--color--neutral-400));
+
+	--background--success: light-dark(var(--color--green-50), var(--color--green-950));
+	--border-color--success: light-dark(var(--color--green-200), var(--color--green-800));
+	--text-color--success: light-dark(var(--color--green-800), var(--color--green-50));
+	--icon-color--success: light-dark(var(--color--green-800), var(--color--green-50));
+
+	--background--warning: light-dark(var(--color--yellow-100), var(--color--yellow-900));
+	--border-color--warning: light-dark(var(--color--yellow-200), var(--color--yellow-800));
+	--text-color--warning: light-dark(var(--color--yellow-800), var(--color--yellow-100));
+	--icon-color--warning: light-dark(var(--color--yellow-800), var(--color--yellow-100));
+
+	--background--danger: light-dark(var(--color--red-50), var(--color--red-950));
+	--border-color--danger: light-dark(var(--color--red-200), var(--color--red-800));
+	--text-color--danger: light-dark(var(--color--red-800), var(--color--red-50));
+	--icon-color--danger: light-dark(var(--color--red-800), var(--color--red-50));
+
+	--background--info: light-dark(var(--color--blue-50), var(--color--blue-900));
+	--border-color--info: light-dark(var(--color--blue-200), var(--color--blue-800));
+	--text-color--info: light-dark(var(--color--blue-800), var(--color--blue-50));
+	--icon-color--info: light-dark(var(--color--blue-800), var(--color--blue-50));
+
+	--background--inverse: light-dark(var(--color--neutral-900), var(--color--neutral-white));
+	--border-color--inverse: light-dark(var(--color--neutral-700), var(--color--neutral-200));
+	--text-color--inverse: light-dark(var(--color--neutral-100), var(--color--neutral-800));
+	--icon-color--inverse: light-dark(var(--color--neutral-100), var(--color--neutral-800));
+
+	--focus--border-width: 2px;
+	--focus--border-color: light-dark(var(--color--neutral-900), var(--color--neutral-100));
+	/* stylelint-enable @n8n/css-var-naming */
+
 	// Secondary tokens
 
+	--color--text: light-dark(var(--color--neutral-900), var(--color--neutral-white));
+	--color--text--subtle: light-dark(var(--color--neutral-700), var(--color--neutral-200));
+	--color--text--subtler: light-dark(var(--color--neutral-500), var(--color--neutral-400));
+
 	// LangChain
 	--lm-chat--messages--color--background: var(--color--background);
 	--lm-chat--bot--color--background: var(--color--neutral-white);
@@ -240,7 +361,7 @@
 	--assistant--color--text--subtle: var(--color--neutral-500);
 	--assistant--icon-color--subtle: var(--color--neutral-500);
 	--assistant--color--text: var(--color--neutral-800);
-	--assistant--color--text--user-bubble: #414244;
+	--assistant--color--text--user-bubble: var(--color--neutral-750);
 	--assistant--color--background--user-bubble: var(--color--neutral-150);
 	--assistant--text-message--collapsed--max-height: 200px;
 
@@ -264,11 +385,11 @@
 	--node--icon--color--light-blue: #5fabf7;
 	--node--icon--color--dark-blue: #353f6e;
 	--node--icon--color--orange: #ff965a;
-	--node--icon--color--orange-red: #ff6d5a;
+	--node--icon--color--orange-red: var(--color--orange-300);
 	--node--icon--color--pink-red: #ea4b71;
 	--node--icon--color--red: var(--color--red-600);
 	--node--icon--color--light-green: #31c4ab;
-	--node--icon--color--green: #108e49;
+	--node--icon--color--green: var(--color--mint-700);
 	--node--icon--color--dark-green: #157562;
 	--node--icon--color--azure: #54b8c9;
 	--node--icon--color--purple: #539;
@@ -295,7 +416,7 @@
 	--code-tags--primitive--color: #005cc5;
 	--code-tags--keyword--color: #d73a49;
 	--code-tags--variable--color: #005cc5;
-	--code-tags--parameter--color: #24292e;
+	--code-tags--parameter--color: var(--color--neutral-850);
 	--code-tags--function--color: #6f42c1;
 	--code-tags--constant--color: #005cc5;
 	--code-tags--property--color: #005cc5;
@@ -698,10 +819,10 @@
 	--diff--color--new--faint: #ddfbe7;
 	--diff--color--modified: #bf941f;
 	--diff--color--modified--light: #f3dca1;
-	--diff--color--modified--faint: #fbf1d4;
+	--diff--color--modified--faint: var(--color--yellow-100);
 	--diff--color--deleted: #f51f32;
-	--diff--color--deleted--light: #fad3d0;
-	--diff--color--deleted--faint: #ffedec;
+	--diff--color--deleted--light: var(--color--red-200);
+	--diff--color--deleted--faint: var(--color--red-50);
 
 	// Various
 	--avatar--color--accent-1: var(--color--neutral-200);
@@ -730,115 +851,540 @@
 
 	--command-bar-item--color--background--hover: var(--color--background);
 	--command-bar-item--height: 40px;
-	--command-bar--shadow: 0 15px 45px 0 hsla(0, 0%, 0%, 0.13), 0 5px 10px 0 hsla(0, 0%, 0%, 0.08);
+	--command-bar--shadow:
+		0 15px 45px 0 var(--color--black-alpha-200), 0 5px 10px 0 var(--color--black-alpha-200);
 
 	// Animation
-	--animation--duration: 0.3s;
-	--animation--duration--snappy: 0.2s;
-	// Spring easing, generated at https://animejs.com/easing-editor/spring/default preset:snappy mode:perceived bounce:0.15
-	--animation--easing: linear(
-		0,
-		0.0088,
-		0.0327,
-		0.068,
-		0.1117,
-		0.1614,
-		0.2149,
-		0.2706,
-		0.327,
-		0.3831,
-		0.4379,
-		0.4907,
-		0.5412,
-		0.5889,
-		0.6336,
-		0.6751,
-		0.7135,
-		0.7487,
-		0.7809,
-		0.81,
-		0.8362,
-		0.8597,
-		0.8807,
-		0.8994,
-		0.9158,
-		0.9302,
-		0.9428,
-		0.9537,
-		0.9632,
-		0.9712,
-		0.9781,
-		0.9839,
-		0.9888,
-		0.9928,
-		0.9961,
-		0.9988,
-		1.001,
-		1.0026,
-		1.0039,
-		1.0049,
-		1.0055,
-		1.006,
-		1.0062,
-		1.0063,
-		1.0062,
-		1.0061,
-		1.0059,
-		1.0056,
-		1.0053,
-		1.005,
-		1.0046,
-		1.0043,
-		1.0039,
-		1.0036,
-		1.0032,
-		1.0029,
-		1.0026,
-		1.0023,
-		1.0021,
-		1.0018,
-		1.0016,
-		1.0014,
-		1.0012,
-		1.0011,
-		1.0009,
-		1.0008,
-		1.0006,
-		1.0005,
-		1.0005,
-		1.0004,
-		1.0003,
-		1.0002,
-		1.0002,
-		1.0001,
-		1.0001,
-		1.0001,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1,
-		1
+	--animation--duration: var(--duration--base);
+	--animation--duration--snappy: var(--duration--snappy);
+	--animation--easing: var(--easing--ease-out);
+}
+
+@mixin theme-dark {
+	--shadow: 0 2px 4px var(--color--black-alpha-300), 0 0 6px var(--color--black-alpha-200);
+	--shadow--dark: 0 2px 4px var(--color--black-alpha-300), 0 0 6px var(--color--black-alpha-300);
+	--shadow--light: 0 2px 12px 0 var(--color--black-alpha-300);
+
+	// Secondary tokens
+
+	// AI Assistant
+	--assistant--color--highlight-1: #8c90f2;
+	--assistant--color--highlight-2: #a977f0;
+	--assistant--color--highlight-3: #f0778b;
+	--assistant--button--color--background--gradient: linear-gradient(
+		var(--color--neutral-850),
+		var(--color--neutral-850)
+	);
+	--assistant--button--color--background--gradient--hover: linear-gradient(#383839, #383839);
+	--assistant--button--color--background--gradient--active: linear-gradient(
+		var(--color--neutral-750),
+		var(--color--neutral-750)
+	);
+	--assistant--button--color--background--hover: var(
+		--assistant--button--color--background--gradient--hover
+	);
+	--assistant--button--color--background--active: var(
+		--assistant--button--color--background--gradient--active
 	);
+
+	--assistant--color--highlight-gradient: linear-gradient(
+		105deg,
+		var(--assistant--color--highlight-1) 0%,
+		var(--assistant--color--highlight-2) 50%,
+		var(--assistant--color--highlight-3) 100%
+	);
+	--assistant--color--highlight-gradient--reverse: linear-gradient(
+		105deg,
+		var(--assistant--color--highlight-3) 0%,
+		var(--assistant--color--highlight-2) 50%,
+		var(--assistant--color--highlight-1) 100%
+	);
+
+	// AI Chat text and icon colors
+	--assistant--color--text--subtle: var(--color--neutral-250);
+	--assistant--icon-color--subtle: var(--color--neutral-250);
+	--assistant--color--text: var(--color--neutral-white);
+	--assistant--color--text--user-bubble: var(--color--blue-50);
+	--assistant--color--background--user-bubble: var(--color--neutral-800);
+
+	// LangChain
+	--lm-chat--messages--color--background: var(--color--neutral-950);
+	--lm-chat--bot--color--background: var(--color--neutral-850);
+	--lm-chat--bot--border-color: var(--color--neutral-500);
+	--lm-chat--user--color--background: var(--color--green-700);
+	--lm-chat--user--border-color: var(--color--green-600);
+
+	// Canvas
+	--canvas--color--background: var(--color--neutral-950);
+	--canvas--dot--color: var(--color--neutral-700);
+	--canvas--read-only-line--color: var(--color--neutral-900);
+	--canvas--color--selected: var(--color--white-alpha-400);
+	--canvas--color--selected-transparent: var(--canvas--color--selected);
+	--canvas--label--color: var(--color--neutral-500);
+	--canvas--label--color--background: oklch(from var(--canvas--color--background) l c h / 0.85);
+
+	// Nodes
+	--node--color--background: var(--color--neutral-850);
+	--node--color--background--executing: var(--color--neutral-700);
+	--node--color--background--executing-1: var(--color--neutral-700);
+	--node--border-color--pinned: var(--color--purple-500);
+	--node--type-main--color: var(--color--neutral-400);
+
+	// Sticky
+	--sticky--color--background: var(--color--yellow-900);
+	--sticky--border-color: var(--color--yellow-800);
+	--sticky--color--text: var(--color--neutral-125);
+	--sticky--code--color--text: var(--color--purple-300);
+	--sticky--code--color--background: var(--color--neutral-150-alpha-100);
+
+	--sticky--color--background--variant-1: var(--color--yellow-900);
+	--sticky--border-color--variant-1: var(--color--yellow-800);
+	--sticky--color--background--variant-2: var(--color--gold-900);
+	--sticky--border-color--variant-2: var(--color--gold-800);
+	--sticky--color--background--variant-3: var(--color--red-950);
+	--sticky--border-color--variant-3: var(--color--red-900);
+	--sticky--color--background--variant-4: var(--color--green-950);
+	--sticky--border-color--variant-4: var(--color--green-900);
+	--sticky--color--background--variant-5: var(--color--blue-900);
+	--sticky--border-color--variant-5: var(--color--blue-800);
+	--sticky--color--background--variant-6: var(--color--purple-950);
+	--sticky--border-color--variant-6: var(--color--purple-800);
+	--sticky--color--background--variant-7: var(--color--neutral-900);
+	--sticky--border-color--variant-7: var(--color--neutral-800);
+
+	// NodeIcon
+	--node--icon--color--neutral: var(--color--neutral-200);
+	--node--icon--color--black: var(--color--neutral-200);
+	--node--icon--color--blue: #898fff;
+	--node--icon--color--light-blue: #58abff;
+	--node--icon--color--dark-blue: #7ba7ff;
+	--node--icon--color--orange-red: var(--color--orange-300);
+	--node--icon--color--pink-red: #f85d82;
+	--node--icon--color--red: var(--color--red-400);
+	--node--icon--color--light-green: #20b69e;
+	--node--icon--color--green: var(--color--green-500);
+	--node--icon--color--dark-green: #86decc;
+	--node--icon--color--purple: #9b6dd5;
+	--node--icon--color--crimson: #f188a2;
+
+	// Expressions, autocomplete, infobox
+	--expression-editor--resolvable--color--foreground--valid: var(--color--green-300);
+	--expression-editor--resolvable--color--background--valid: var(--color--green-alpha-200);
+	--expression-editor--resolvable--color--foreground--invalid: var(--color--red-300);
+	--expression-editor--resolvable--color--background--invalid: var(--color--red-alpha-020);
+	--expression-editor--resolvable--color--foreground--pending: var(--color--text);
+	--expression-editor--resolvable--color--background--pending: var(--color--neutral-150-alpha-100);
+	--expression-editor--color--background: var(--color--neutral-900);
+	--expression-editor--modal--color--background: var(--color--neutral-900);
+	--expression-editor--syntax-example--color: var(--color--neutral-700);
+	--autocomplete--item--color--selected: var(--color--purple-400);
+	--autocomplete--section-header--border-color: var(--color--neutral-600);
+	--autocomplete--infobox--color--background: var(--color--neutral-900);
+	--autocomplete--infobox--examples--border-color: var(--color--neutral-700);
+
+	// Code
+	--code-tags--string--color: #9ecbff;
+	--code-tags--regex--color: #9ecbff;
+	--code-tags--primitive--color: #79b8ff;
+	--code-tags--keyword--color: #f97583;
+	--code-tags--variable--color: #79b8ff;
+	--code-tags--parameter--color: var(--color--slate-100);
+	--code-tags--function--color: #b392f0;
+	--code-tags--constant--color: #79b8ff;
+	--code-tags--property--color: #79b8ff;
+	--code-tags--type--color: #b392f0;
+	--code-tags--class--color: #b392f0;
+	--code-tags--heading--color: #79b8ff;
+	--code-tags--invalid--color: #f97583;
+	--code-tags--comment--color: #6a737d;
+	--json--color: var(--color--purple-400);
+	--json--null--color: var(--color--danger);
+	--json--boolean--color: var(--color--green-600);
+	--json--number--color: var(--color--green-600);
+	--json--string--color: var(--color--purple-400);
+	--json--key--color: var(--color--text--shade-1);
+	--json--brackets--color: var(--color--neutral-700);
+	--json--brackets--color--hover: var(--color--blue-400);
+	--json--line--color: var(--color--neutral-250);
+	--json--highlight--color: var(--color--background);
+	--code--color--background: var(--color--neutral-950);
+	--code--color--background--readonly: var(--color--neutral-850);
+	--code--line-highlight--color: var(--color--neutral-300-alpha-100);
+	--code--color--foreground: var(--color--neutral-150);
+	--code--caret--color: var(--color--neutral-50);
+	--code--selection--color: #3392ff44;
+	--code--selection--color--highlight: #17e5e633;
+	--code--gutter--color--background: var(--color--neutral-950);
+	--code--gutter--color--foreground: var(--color--neutral-300);
+	--code--gutter--color--foreground--active: var(--color--neutral-50);
+	--code--indentation-marker--color: var(--color--neutral-850);
+	--code--indentation-marker--color--active: var(--color--neutral-700);
+	--line-break--color: var(--color--neutral-400);
+	--code--line-break--color: var(--color--purple-500);
+
+	// Tag
+	--tag--color--background: var(--color--neutral-700);
+	--tag--color--background--hover: var(--color--neutral-600);
+	--tag--border-color: var(--color--neutral-800);
+	--tag--border-color--hover: var(--color--neutral-700);
+	--tag--color--text: var(--color--text--shade-1);
+
+	// Variables
+	--variables-usage--color--text: var(--color--green-300);
+	--variables-usage--syntax--color--background: var(--color--green-alpha-200);
+
+	// Button primary
+	--button--outline-color--primary--focus: var(--color--orange-alpha-300);
+	--button--color--text--primary--disabled: var(--color--white-alpha-500);
+	--button--border-color--primary--disabled: transparent;
+	--button--color--background--primary--disabled: var(--color--orange-alpha-500);
+
+	// Button secondary
+	--button--color--text--secondary: var(--color--neutral-150);
+	--button--border-color--secondary: var(--color--foreground);
+	--button--color--background--secondary: var(--color--background--light-2);
+	--button--color--text--secondary--hover-active-focus: var(--color--orange-250);
+	--button--color--background--secondary--hover: var(--color--background--light-2);
+	--button--color--background--secondary--active-focus: var(--color--orange-alpha-100);
+	--button--outline-color--secondary--focus: var(--color--orange-alpha-300);
+	--button--color--text--secondary--disabled: var(--color--white-alpha-500);
+	--button--border-color--secondary--disabled: var(--color--foreground);
+
+	// Button highlight
+	--button--color--text--highlight: var(--color--neutral-300);
+	--button--border-color--highlight: transparent;
+	--button--color--background--highlight: transparent;
+	--button--color--text--highlight--hover-active-focus: var(--color--orange-400);
+	--button--border-color--highlight--hover-active-focus: var(--color--neutral-700);
+	--button--color--background--highlight--hover: var(--color--neutral-700);
+	--button--color--background--highlight--active-focus: var(--color--neutral-700);
+	--button--outline-color--highlight--focus: var(--color--neutral-700);
+	--button--color--text--highlight--disabled: var(--color--neutral-600);
+	--button--border-color--highlight--disabled: transparent;
+
+	// Button highlight-fill
+	--button--color--text--highlight-fill: var(--color--text--shade-1);
+	--button--border-color--highlight-fill: transparent;
+	--button--color--background--highlight-fill: var(--color--background);
+	--button--color--text--highlight-fill--hover-active-focus: var(--color--primary);
+	--button--border-color--highlight-fill--hover-active-focus: transparent;
+	--button--color--background--highlight-fill--hover: var(--color--background);
+	--button--color--background--highlight-fill--active-focus: var(--color--background);
+	--button--outline-color--highlight-fill--focus: var(--color--neutral-700);
+	--button--color--text--highlight-fill--disabled: var(--color--neutral-600);
+	--button--border-color--highlight-fill--disabled: transparent;
+	--button--color--background--highlight-fill--disabled: var(--color--background);
+
+	// Button success, warning, danger
+	--button--color--text--danger: var(--color--neutral-white);
+	--button--border-color--danger: transparent;
+	--button--outline-color--danger--focus: var(--color--red-300);
+	--button--color--text--danger--disabled: var(--color--white-alpha-400);
+	--button--border-color--danger--disabled: transparent;
+	--button--color--background--danger--disabled: var(--color--red-alpha-020);
+
+	// Text button
+	--text-button--color--text--secondary: var(--color--neutral-300);
+
+	// Node Creator Button
+	--node-creator--button--color--text: var(--button--color--text--secondary);
+	--node-creator--button--color--text--hover: var(
+		--button--color--text--secondary--hover-active-focus
+	);
+	--node-creator--button--border-color--hover: var(--color--orange-300);
+	--node-creator--button--color--background: var(--color--orange-alpha-100);
+
+	// Table
+	--table--header--color--background: var(--color--neutral-850);
+	--table--row--color--background: var(--color--neutral-950);
+	--table--row--color--background--even: var(--color--neutral-900);
+	--table--row--color--background--hover: var(--color--neutral-850);
+	--table--row--color--background--highlight: var(--color--warning--tint-1);
+
+	// Notification
+	--notification--color--background: var(--color--neutral-850);
+
+	// Execution
+	--execution-card--color--background: var(--color--foreground--tint-1);
+	--execution-card--color--background--hover: var(--color--foreground);
+	--execution-selector--color--background: var(--color--background--shade-2);
+	--execution-selector--color--text: var(--color--text--tint-3);
+	--execution-select-all--color--text: var(--color--text);
+	--execution-card--color--text--waiting: var(--color--purple-500);
+
+	// NDV
+	--run-data--color--background: var(--color--neutral-900);
+	--ndvv2--run-data--color--background: var(--color--neutral-900);
+	--ndv--droppable-parameter--color: var(--color--orange-300);
+	--ndv--droppable-parameter--color--background: var(--color--orange-alpha-100);
+	--ndv--droppable-parameter--color--background--active: var(--color--green-alpha-100);
+	--ndv--back--color--text: var(--color--neutral-white);
+	--ndv--background--color: var(--color--background--light-1);
+	--ndv--header--color: var(--color--neutral-750);
+
+	// Notice
+	--notice--border-color--warning: var(--color--gold-200);
+	--notice--color--background--warning: var(--color--gold-alpha-020);
+	--notice--color--text: var(--color--neutral-white);
+
+	// Callout
+	--callout--border-color--info: var(--color--foreground);
+	--callout--color--background--info: var(--color--neutral-900);
+	--callout--color--text--info: var(--color--neutral-white);
+	--callout--border-color--success: var(--color--success);
+	--callout--color--background--success: var(--color--green-900);
+	--callout--color--text--success: var(--color--neutral-white);
+	--callout--border-color--warning: var(--color--warning);
+	--callout--color--background--warning: var(--color--gold-800);
+	--callout--color--text--warning: var(--color--neutral-white);
+	--callout--border-color--danger: var(--color--red-800);
+	--callout--color--background--danger: var(--color--red-950);
+	--callout--color--text--danger: var(--color--neutral-white);
+	--callout--icon-color--danger: var(--color--danger);
+	--callout--border-color--secondary: var(--color--secondary);
+	--callout--color--background--secondary: var(--color--purple-alpha-200);
+	--callout--color--text--secondary: var(--color--neutral-white);
+
+	// Dialogs and overlays
+	--dialog--color--background: var(--color--neutral-900);
+	--dialog--overlay--color--background: var(--color--slate-alpha-700);
+	--dialog--overlay--color--background--dark: var(--color--black-alpha-600);
+
+	// Avatar
+	--avatar--color--text: var(--color--neutral-white);
+
+	// NPS Survey
+	--nps-survey--color--background: var(--color--neutral-850);
+	--nps-survey--color--text: var(--color--neutral-white);
+
+	// Switch (Activation, boolean)
+	--switch--color--background: var(--color--neutral-950);
+	--switch--border-color: var(--color--neutral-700);
+	--switch--toggle--color: var(--color--neutral-125);
+
+	// Action Dropdown
+	--action-dropdown--item--color--background--active: var(--color--background--light-3);
+
+	// Input Triple
+	--input-triple--color--background: var(--color--neutral-900);
+
+	// Node error
+	--node--error-output--color--text: var(--color--danger);
+
+	// MFA Recovery codes
+	--mfa--recovery-code--color--background: var(--color--background--light-3);
+	--mfa--recovery-code--color: var(--color--text--shade-1);
+	--mfa--lose-access--color--text: var(--color--danger);
+
+	// Text highlight
+	--text-highlight--color--background: var(--color--yellow-700);
+
+	// AI
+	--node-type--color--background--l: 20%;
+	--node-type--supplemental--label--color--h: 235;
+	--node-type--supplemental--label--color--s: 28%;
+	--node-type--supplemental--label--color--l: 40%;
+	--node-type--supplemental--color--h: 235;
+	--node-type--supplemental--color--s: 13%;
+	--node-type--supplemental--color--l: 60%;
+	--node-type--supplemental--label--color: hsl(
+		var(--node-type--supplemental--label--color--h),
+		var(--node-type--supplemental--label--color--s),
+		var(--node-type--supplemental--label--color--l)
+	);
+	--node-type--supplemental--icon--color: var(--color--foreground--shade-1);
+	--node-type--supplemental--color: hsl(
+		var(--node-type--supplemental--color--h),
+		var(--node-type--supplemental--color--s),
+		var(--node-type--supplemental--color--l)
+	);
+	--node-type--supplemental--color--background: hsl(
+		var(--node-type--supplemental--color--h),
+		var(--node-type--supplemental--color--s),
+		var(--node-type--color--background--l)
+	);
+	--node-type--supplemental--connector--color: var(--color--foreground--shade-1);
+	--node-type--ai-chain--color--h: var(--node-type--supplemental--color--h);
+	--node-type--ai-chain--color--s: var(--node-type--supplemental--color--s);
+	--node-type--ai-chain--color--l: var(--node-type--supplemental--color--l);
+	--node-type--ai-chain--color: hsl(
+		var(--node-type--ai-chain--color--h),
+		var(--node-type--ai-chain--color--s),
+		var(--node-type--ai-chain--color--l)
+	);
+	--node-type--chain--color--background: hsl(
+		var(--node-type--ai-chain--color--h),
+		var(--node-type--ai-chain--color--s),
+		var(--node-type--color--background--l)
+	);
+	--node-type--ai-document--color--h: var(--node-type--supplemental--color--h);
+	--node-type--ai-document--color--s: var(--node-type--supplemental--color--s);
+	--node-type--ai-document--color--l: var(--node-type--supplemental--color--l);
+	--node-type--ai-document--color: hsl(
+		var(--node-type--ai-document--color--h),
+		var(--node-type--ai-document--color--s),
+		var(--node-type--ai-document--color--l)
+	);
+	--node-type--ai-document--color--background: hsl(
+		var(--node-type--ai-document--color--h),
+		var(--node-type--ai-document--color--s),
+		var(--node-type--color--background--l)
+	);
+	--node-type--ai-embedding--color--h: var(--node-type--supplemental--color--h);
+	--node-type--ai-embedding--color--s: var(--node-type--supplemental--color--s);
+	--node-type--ai-embedding--color--l: var(--node-type--supplemental--color--l);
+	--node-type--ai-embedding--color: hsl(
+		var(--node-type--ai-embedding--color--h),
+		var(--node-type--ai-embedding--color--s),
+		var(--node-type--ai-embedding--color--l)
+	);
+	--node-type--ai-embedding--color--background: hsl(
+		var(--node-type--ai-embedding--color--h),
+		var(--node-type--ai-embedding--color--s),
+		var(--node-type--color--background--l)
+	);
+	--node-type--ai-language-model--color--h: var(--node-type--supplemental--color--h);
+	--node-type--ai-language-model--color--s: var(--node-type--supplemental--color--s);
+	--node-type--ai-language-model--color--l: var(--node-type--supplemental--color--l);
+	--node-type--ai-language-model--color: hsl(
+		var(--node-type--ai-language-model--color--h),
+		var(--node-type--ai-language-model--color--s),
+		var(--node-type--ai-language-model--color--l)
+	);
+	--node-type--ai-language-model--color--background: hsl(
+		var(--node-type--ai-language-model--color--h),
+		var(--node-type--ai-language-model--color--s),
+		var(--node-type--color--background--l)
+	);
+	--node-type--ai-memory--color--h: var(--node-type--supplemental--color--h);
+	--node-type--ai-memory--color--s: var(--node-type--supplemental--color--s);
+	--node-type--ai-memory--color--l: var(--node-type--supplemental--color--l);
+	--node-type--ai-memory--color: hsl(
+		var(--node-type--ai-memory--color--h),
+		var(--node-type--ai-memory--color--s),
+		var(--node-type--ai-memory--color--l)
+	);
+	--node-type--ai-memory--color--background: hsl(
+		var(--node-type--ai-memory--color--h),
+		var(--node-type--ai-memory--color--s),
+		var(--node-type--color--background--l)
+	);
+	--node-type--ai-output-parser--color--h: var(--node-type--supplemental--color--h);
+	--node-type--ai-output-parser--color--s: var(--node-type--supplemental--color--s);
+	--node-type--ai-output-parser--color--l: var(--node-type--supplemental--color--l);
+	--node-type--ai-output-parser--color: hsl(
+		var(--node-type--ai-output-parser--color--h),
+		var(--node-type--ai-output-parser--color--s),
+		var(--node-type--ai-output-parser--color--l)
+	);
+	--node-type--ai-output-parser--color--background: hsl(
+		var(--node-type--ai-output-parser--color--h),
+		var(--node-type--ai-output-parser--color--s),
+		var(--node-type--color--background--l)
+	);
+	--node-type--ai-tool--color--h: var(--node-type--supplemental--color--h);
+	--node-type--ai-tool--color--s: var(--node-type--supplemental--color--s);
+	--node-type--ai-tool--color--l: var(--node-type--supplemental--color--l);
+	--node-type--ai-tool--color: hsl(
+		var(--node-type--ai-tool--color--h),
+		var(--node-type--ai-tool--color--s),
+		var(--node-type--ai-tool--color--l)
+	);
+	--node-type--ai-tool--color--background: hsl(
+		var(--node-type--ai-tool--color--h),
+		var(--node-type--ai-tool--color--s),
+		var(--node-type--color--background--l)
+	);
+	--node-type--ai-retriever--color--h: var(--node-type--supplemental--color--h);
+	--node-type--ai-retriever--color--s: var(--node-type--supplemental--color--s);
+	--node-type--ai-retriever--color--l: var(--node-type--supplemental--color--l);
+	--node-type--ai-retriever--color: hsl(
+		var(--node-type--ai-retriever--color--h),
+		var(--node-type--ai-retriever--color--s),
+		var(--node-type--ai-retriever--color--l)
+	);
+	--node-type--ai-retriever--color--background: hsl(
+		var(--node-type--ai-retriever--color--h),
+		var(--node-type--ai-retriever--color--s),
+		var(--node-type--color--background--l)
+	);
+	--node-type--ai-text-splitter--color--h: var(--node-type--supplemental--color--h);
+	--node-type--ai-text-splitter--color--s: var(--node-type--supplemental--color--s);
+	--node-type--ai-text-splitter--color--l: var(--node-type--supplemental--color--l);
+	--node-type--ai-text-splitter--color: hsl(
+		var(--node-type--ai-text-splitter--color--h),
+		var(--node-type--ai-text-splitter--color--s),
+		var(--node-type--ai-text-splitter--color--l)
+	);
+	--node-type--ai-text-splitter--color--background: hsl(
+		var(--node-type--ai-text-splitter--color--h),
+		var(--node-type--ai-text-splitter--color--s),
+		var(--node-type--color--background--l)
+	);
+	--node-type--ai-vector-retriever--color--h: var(--node-type--supplemental--color--h);
+	--node-type--ai-vector-retriever--color--s: var(--node-type--supplemental--color--s);
+	--node-type--ai-vector-retriever--color--l: var(--node-type--supplemental--color--l);
+	--node-type--ai-vector-retriever--color: hsl(
+		var(--node-type--ai-vector-retriever--color--h),
+		var(--node-type--ai-vector-retriever--color--s),
+		var(--node-type--ai-vector-retriever--color--l)
+	);
+	--node-type--ai-vector-retriever--color--background: hsl(
+		var(--node-type--ai-vector-retriever--color--h),
+		var(--node-type--ai-vector-retriever--color--s),
+		var(--node-type--color--background--l)
+	);
+	--node-type--ai-vector-store--color--h: var(--node-type--supplemental--color--h);
+	--node-type--ai-vector-store--color--s: var(--node-type--supplemental--color--s);
+	--node-type--ai-vector-store--color--l: var(--node-type--supplemental--color--l);
+	--node-type--ai-vector-store--color: hsl(
+		var(--node-type--ai-vector-store--color--h),
+		var(--node-type--ai-vector-store--color--s),
+		var(--node-type--ai-vector-store--color--l)
+	);
+	--node-type--ai-vector-store--color--background: hsl(
+		var(--node-type--ai-vector-store--color--h),
+		var(--node-type--ai-vector-store--color--s),
+		var(--node-type--color--background--l)
+	);
+
+	// Diff colors (dark theme overrides)
+	--diff--color--new: var(--color--green-500);
+	--diff--color--new--light: #43674f;
+	--diff--color--new--faint: #3a463e;
+	--diff--color--modified: #d6a625;
+	--diff--color--modified--light: #6a5c38;
+	--diff--color--modified--faint: #464236;
+	--diff--color--deleted: #fb887a;
+	--diff--color--deleted--light: #7a524e;
+	--diff--color--deleted--faint: #4d3e3d;
+
+	// Various
+	--color--info--tint-1: var(--color--neutral-400);
+	--color--info--tint-2: var(--color--neutral-850);
+	--node-type--supplemental--label--color--l: 100%;
+	--node-type--supplemental--label--color: hsl(
+		var(--node-type--supplemental--label--color--h),
+		var(--node-type--supplemental--label--color--s),
+		var(--node-type--supplemental--label--color--l)
+	);
+	--node--configurable-name--color: var(--color--text--shade-1);
+	--link--color--secondary: var(--color--purple-400);
+	--link--color--secondary--hover: var(--color--purple-500);
+	// Params
+	--icon--color: var(--color--text--tint-1);
+	--icon--color--hover: var(--color--orange-300);
+
+	--menu--color--background: var(--color--neutral-900);
+	--menu--color--background--hover: var(--color--neutral-700);
+	--menu--color--background--active: var(--color--neutral-700);
+
+	/* Ag Grid */
+	--grid--row--color--background--selected: var(--color--purple-900);
+
+	--command-bar-item--color--background--hover: var(--color--background--light-1);
+	--command-bar--shadow:
+		0 15px 45px 0 var(--color--black-alpha-400), 0 5px 10px 0 var(--color--black-alpha-200);
 }
 
 :root {
@@ -851,9 +1397,16 @@ body[data-theme='light'] {
 }
 
 body[data-theme='dark'] {
+	@include theme-dark;
 	color-scheme: dark;
 }
 
 body:not([data-theme]) {
 	color-scheme: light dark;
 }
+
+@media (prefers-color-scheme: dark) {
+	body:not([data-theme]) {
+		@include theme-dark;
+	}
+}
diff --git a/packages/frontend/@n8n/design-system/src/css/index.scss b/packages/frontend/@n8n/design-system/src/css/index.scss
index f1b4cc776ba..b9039b28538 100644
--- a/packages/frontend/@n8n/design-system/src/css/index.scss
+++ b/packages/frontend/@n8n/design-system/src/css/index.scss
@@ -1,6 +1,5 @@
 @use './primitives.scss';
 @use './tokens.scss';
-@use './tokens.dark.scss' as dark;
 @use './reset.scss';
 @use './base.scss';
 @use './fonts.scss';
diff --git a/packages/frontend/@n8n/design-system/src/v2/components/Checkbox/Checkbox.stories.ts b/packages/frontend/@n8n/design-system/src/v2/components/Checkbox/Checkbox.stories.ts
index 124d838af91..931962a85b9 100644
--- a/packages/frontend/@n8n/design-system/src/v2/components/Checkbox/Checkbox.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/v2/components/Checkbox/Checkbox.stories.ts
@@ -5,7 +5,7 @@ import { ref } from 'vue';
 import Checkbox from './Checkbox.vue';
 
 const meta = {
-	title: 'Components v2/Checkbox',
+	title: 'Experimental/Checkbox',
 	component: Checkbox,
 	parameters: {
 		docs: {
diff --git a/packages/frontend/@n8n/design-system/src/v2/components/DropdownMenu/DropdownMenu.stories.ts b/packages/frontend/@n8n/design-system/src/v2/components/DropdownMenu/DropdownMenu.stories.ts
index 4bd8a59586d..2d28143031e 100644
--- a/packages/frontend/@n8n/design-system/src/v2/components/DropdownMenu/DropdownMenu.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/v2/components/DropdownMenu/DropdownMenu.stories.ts
@@ -15,7 +15,7 @@ type GenericMeta<C> = Omit<Meta<C>, 'component'> & {
 };
 
 const meta = {
-	title: 'Components v2/DropdownMenu',
+	title: 'Experimental/DropdownMenu',
 	component: DropdownMenu,
 	parameters: {
 		docs: {
diff --git a/packages/frontend/@n8n/design-system/src/v2/components/InputNumber/InputNumber.stories.ts b/packages/frontend/@n8n/design-system/src/v2/components/InputNumber/InputNumber.stories.ts
index 858aeb363cf..2b742bbee6b 100644
--- a/packages/frontend/@n8n/design-system/src/v2/components/InputNumber/InputNumber.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/v2/components/InputNumber/InputNumber.stories.ts
@@ -6,7 +6,7 @@ import N8nIcon from '@n8n/design-system/components/N8nIcon/Icon.vue';
 import InputNumber from './InputNumber.vue';
 
 const meta = {
-	title: 'Components v2/InputNumber',
+	title: 'Experimental/InputNumber',
 	component: InputNumber,
 	parameters: {
 		docs: {
diff --git a/packages/frontend/@n8n/design-system/src/v2/components/Loading/Loading.stories.ts b/packages/frontend/@n8n/design-system/src/v2/components/Loading/Loading.stories.ts
index 1c434055dec..0a9c1b87349 100644
--- a/packages/frontend/@n8n/design-system/src/v2/components/Loading/Loading.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/v2/components/Loading/Loading.stories.ts
@@ -4,7 +4,7 @@ import { SKELETON_VARIANTS } from './Loading.types';
 import Loading from './Loading.vue';
 
 const meta = {
-	title: 'Components V2/Loading',
+	title: 'Experimental/Loading',
 	component: Loading,
 	parameters: {
 		docs: {
diff --git a/packages/frontend/@n8n/design-system/src/v2/components/Pagination/Pagination.stories.ts b/packages/frontend/@n8n/design-system/src/v2/components/Pagination/Pagination.stories.ts
index 543643b2f2f..95bf7285403 100644
--- a/packages/frontend/@n8n/design-system/src/v2/components/Pagination/Pagination.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/v2/components/Pagination/Pagination.stories.ts
@@ -5,7 +5,7 @@ import { ref } from 'vue';
 import Pagination from './Pagination.vue';
 
 export default {
-	title: 'Components v2/Pagination',
+	title: 'Experimental/Pagination',
 	component: Pagination,
 	tags: ['autodocs'],
 	argTypes: {
diff --git a/packages/frontend/@n8n/design-system/src/v2/components/Select/Select.stories.ts b/packages/frontend/@n8n/design-system/src/v2/components/Select/Select.stories.ts
index 51cb5059f9f..33cb0979ff4 100644
--- a/packages/frontend/@n8n/design-system/src/v2/components/Select/Select.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/v2/components/Select/Select.stories.ts
@@ -12,7 +12,7 @@ type GenericMeta<C> = Omit<Meta<C>, 'component'> & {
 };
 
 const meta = {
-	title: 'Components v2/Select',
+	title: 'Experimental/Select',
 	component: Select,
 	parameters: {
 		docs: {
diff --git a/packages/frontend/@n8n/design-system/src/v2/components/Switch/Switch.stories.ts b/packages/frontend/@n8n/design-system/src/v2/components/Switch/Switch.stories.ts
index b2b9322d318..77e63824077 100644
--- a/packages/frontend/@n8n/design-system/src/v2/components/Switch/Switch.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/v2/components/Switch/Switch.stories.ts
@@ -5,7 +5,7 @@ import { ref } from 'vue';
 import Switch from './Switch.vue';
 
 const meta = {
-	title: 'Components v2/Switch',
+	title: 'Experimental/Switch',
 	component: Switch,
 	parameters: {
 		docs: {
diff --git a/packages/frontend/@n8n/storybook/.storybook/preview.ts b/packages/frontend/@n8n/storybook/.storybook/preview.ts
index dbd3ff5321b..b3260c15d84 100644
--- a/packages/frontend/@n8n/storybook/.storybook/preview.ts
+++ b/packages/frontend/@n8n/storybook/.storybook/preview.ts
@@ -73,10 +73,12 @@ export const parameters = {
 				'Docs',
 				'Styleguide',
 				['Colors Primitives', 'Colors Tokens', 'Font', 'Spacing', 'Border'],
-				'Atoms',
-				'Modules',
+				'Core',
+				'Assistant',
 				'Chat',
-				'Editor',
+				'Tables',
+				'Utilities',
+				'Experimental',
 			],
 		},
 	},
diff --git a/packages/frontend/@n8n/storybook/.storybook/storybook.scss b/packages/frontend/@n8n/storybook/.storybook/storybook.scss
index dba457afd01..ffdcda2bf24 100644
--- a/packages/frontend/@n8n/storybook/.storybook/storybook.scss
+++ b/packages/frontend/@n8n/storybook/.storybook/storybook.scss
@@ -1,7 +1,6 @@
 @use '../../design-system/src/css/base.scss';
 @use '../../design-system/src/css/reset.scss';
 @use '../../design-system/src/css/index.scss';
-@use '../../design-system/src/css/_tokens.new.scss';
 
 .multi-container > * {
 	margin-bottom: 10px;