refactor(editor): Change UI and monospace fonts (#13839)

2025-12-16 17:46:45 +00:00 · 2025-03-17 21:13:57 +01:00
parent bda068880e
commit eb91111ddf
83 changed files with 153 additions and 146 deletions
--- a/packages/frontend/@n8n/chat/src/css/markdown.scss
+++ b/packages/frontend/@n8n/chat/src/css/markdown.scss
@@ -122,15 +122,7 @@ body {
 	kbd,
 	samp {
 		font-family:
-			/* macOS 10.10+ */
-			'Menlo',
-			/* Windows 6+ */ 'Consolas',
-			/* Android 4+ */ 'Roboto Mono',
-			/* Ubuntu 10.10+ */ 'Ubuntu Monospace',
-			/* KDE Plasma 5+ */ 'Noto Mono',
-			/* KDE Plasma 4+ */ 'Oxygen Mono',
-			/* Linux/OpenOffice fallback */ 'Liberation Mono',
-			/* fallback */ monospace,
+			var(--font-family-monospace),
 			/* macOS emoji */ 'Apple Color Emoji',
 			/* Windows emoji */ 'Segoe UI Emoji',
 			/* Windows emoji */ 'Segoe UI Symbol',
@@ -155,7 +147,7 @@ body {
 	*/
 	b,
 	strong {
-		font-weight: bolder;
+		font-weight: var(--font-weight-bold);
 	}

 	/*
@@ -466,7 +458,7 @@ body {
 		display: block;
 		font-size: 1em;
 		font-style: italic;
-		font-weight: normal;
+		font-weight: var(--font-weight-regular);
 		line-height: 1.3;
 		margin-top: 0.3em;
 	}
@@ -510,7 +502,7 @@ body {
 	*/
 	ins {
 		text-decoration: none;
-		font-weight: bolder;
+		font-weight: var(--font-weight-bold);
 	}

 	blockquote {
--- a/packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.vue
@@ -228,7 +228,7 @@ const alertBoxClassNames = computed(() => {
 .title {
 	font-size: $alert-title-font-size;
 	line-height: 18px;
-	font-weight: bold;
+	font-weight: var(--font-weight-bold);
 }

 .description {
--- a/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue
@@ -351,7 +351,7 @@ const handleTooltipClose = () => {
 	.item * {
 		color: var(--color-text-base);
 		font-size: var(--font-size-2xs);
-		font-weight: 600;
+		font-weight: var(--font-weight-bold);
 	}

 	.item a:hover * {
--- a/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.scss
+++ b/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.scss
@@ -12,7 +12,7 @@
 	border: var(--border-width-base) $button-border-color var(--border-style-base) unquote($important);
 	color: $button-font-color unquote($important);
 	background-color: $button-background-color unquote($important);
-	font-weight: var(--font-weight-bold) unquote($important);
+	font-weight: var(--font-weight-medium) unquote($important);
 	border-radius: $button-border-radius unquote($important);
 	padding: $button-padding-vertical $button-padding-horizontal unquote($important);
 	font-size: $button-font-size unquote($important);
--- a/packages/frontend/@n8n/design-system/src/components/N8nInfoTip/InfoTip.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nInfoTip/InfoTip.vue
@@ -114,7 +114,7 @@ const iconData = computed<{ icon: IconMap[keyof IconMap]; color: IconColor }>(()
 }

 .bold {
-	font-weight: var(--font-weight-bold);
+	font-weight: var(--font-weight-medium);
 }

 .note {
--- a/packages/frontend/@n8n/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue
@@ -126,7 +126,7 @@ const { t } = useI18n();
 	margin-right: var(--node-icon-margin-right, var(--spacing-s));
 }
 .name {
-	font-weight: var(--node-creator-name-weight, var(--font-weight-bold));
+	font-weight: var(--node-creator-name-weight, var(--font-weight-medium));
 	font-size: var(--node-creator-name-size, var(--font-size-s));
 	line-height: 1.115rem;
 }
@@ -134,7 +134,7 @@ const { t } = useI18n();
 	margin-top: var(--spacing-5xs);
 	font-size: var(--font-size-2xs);
 	line-height: 1rem;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	color: var(--node-creator-description-colos, var(--color-text-base));
 }

--- a/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.vue
@@ -117,7 +117,7 @@ const badgeStyleData = computed((): Record<string, string> => {
 	line-height: var(--node-icon-size, 26px);
 	font-size: 1.1em;
 	text-align: center;
-	font-weight: bold;
+	font-weight: var(--font-weight-bold);
 	font-size: 20px;
 }

--- a/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButton.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButton.vue
@@ -63,7 +63,7 @@ withDefaults(defineProps<RadioButtonProps>(), {
 	display: flex;
 	align-items: center;
 	border-radius: var(--border-radius-base);
-	font-weight: var(--font-weight-bold);
+	font-weight: var(--font-weight-medium);
 	color: var(--color-text-base);
 	transition: background-color 0.2s ease;
 	cursor: pointer;
--- a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue
@@ -139,7 +139,7 @@ const scrollRight = () => scroll(50);

 .tabs {
 	color: var(--color-text-base);
-	font-weight: var(--font-weight-bold);
+	font-weight: var(--font-weight-medium);
 	display: flex;
 	align-items: center;
 	width: 100%;
--- a/packages/frontend/@n8n/design-system/src/components/N8nText/Text.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nText/Text.vue
@@ -49,7 +49,7 @@ const classes = computed(() => {

 <style lang="scss" module>
 .bold {
-	font-weight: var(--font-weight-bold);
+	font-weight: var(--font-weight-medium);
 }

 .regular {
--- a/packages/frontend/@n8n/design-system/src/css/_tokens.scss
+++ b/packages/frontend/@n8n/design-system/src/css/_tokens.scss
@@ -622,9 +622,10 @@
 	--font-line-height-xloose: 1.5;

 	--font-weight-regular: 400;
+	--font-weight-medium: 500;
 	--font-weight-bold: 600;
-	--font-family: 'Open Sans', sans-serif;
-	--font-family-monospace: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+	--font-family: InterVariable, sans-serif;
+	--font-family-monospace: CommitMono, ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;

 	--spacing-5xs: 0.125rem;
 	--spacing-4xs: 0.25rem;
--- a/packages/frontend/@n8n/design-system/src/css/alert.scss
+++ b/packages/frontend/@n8n/design-system/src/css/alert.scss
@@ -116,7 +116,7 @@
 		font-size: var.$alert-title-font-size;
 		line-height: 18px;
 		@include mixins.when(bold) {
-			font-weight: bold;
+			font-weight: var(--font-weight-bold);
 		}
 	}

--- a/packages/frontend/@n8n/design-system/src/css/breadcrumb.scss
+++ b/packages/frontend/@n8n/design-system/src/css/breadcrumb.scss
@@ -9,12 +9,12 @@

 	@include mixins.e(separator) {
 		margin: 0 9px;
-		font-weight: bold;
+		font-weight: var(--font-weight-bold);
 		color: var(--color-text-lighter);

 		&[class*='icon'] {
 			margin: 0 6px;
-			font-weight: normal;
+			font-weight: var(--font-weight-regular);
 		}
 	}

@@ -26,7 +26,7 @@

 			&.is-link,
 			& a {
-				font-weight: bold;
+				font-weight: var(--font-weight-bold);
 				text-decoration: none;
 				transition: var.$color-transition-base;
 				color: var(--color-text-dark);
@@ -43,7 +43,7 @@
 			.el-breadcrumb__inner a {
 				&,
 				&:hover {
-					font-weight: normal;
+					font-weight: var(--font-weight-regular);
 					color: var(--color-text-dark);
 					cursor: text;
 				}
--- a/packages/frontend/@n8n/design-system/src/css/calendar.scss
+++ b/packages/frontend/@n8n/design-system/src/css/calendar.scss
@@ -29,7 +29,7 @@
 	thead th {
 		padding: 12px 0;
 		color: var(--color-text-dark);
-		font-weight: normal;
+		font-weight: var(--font-weight-regular);
 	}

 	&:not(.is-range) {
--- a/packages/frontend/@n8n/design-system/src/css/cascader-panel.scss
+++ b/packages/frontend/@n8n/design-system/src/css/cascader-panel.scss
@@ -77,7 +77,7 @@
 	&.is-selectable.in-checked-path,
 	&.is-active {
 		color: var.$cascader-menu-selected-font-color;
-		font-weight: bold;
+		font-weight: var(--font-weight-bold);
 	}

 	&:not(.is-disabled) {
--- a/packages/frontend/@n8n/design-system/src/css/cascader.scss
+++ b/packages/frontend/@n8n/design-system/src/css/cascader.scss
@@ -152,7 +152,7 @@

 		&.is-checked {
 			color: var.$cascader-menu-selected-font-color;
-			font-weight: bold;
+			font-weight: var(--font-weight-bold);
 		}

 		> span {
--- a/packages/frontend/@n8n/design-system/src/css/collapse.scss
+++ b/packages/frontend/@n8n/design-system/src/css/collapse.scss
@@ -23,13 +23,13 @@
 		cursor: pointer;
 		border-bottom: 1px solid var.$collapse-border-color;
 		font-size: var.$collapse-header-font-size;
-		font-weight: 500;
+		font-weight: var(--font-weight-medium);
 		transition: border-bottom-color 0.3s;
 		outline: none;
 		@include mixins.e(arrow) {
 			margin: 0 8px 0 auto;
 			transition: transform 0.3s;
-			font-weight: 400;
+			font-weight: var(--font-weight-regular);
 			@include mixins.when(active) {
 				transform: rotate(90deg);
 			}
--- a/packages/frontend/@n8n/design-system/src/css/date-picker/date-picker.scss
+++ b/packages/frontend/@n8n/design-system/src/css/date-picker/date-picker.scss
@@ -59,7 +59,7 @@

 	@include mixins.e(header-label) {
 		font-size: 16px;
-		font-weight: 500;
+		font-weight: var(--font-weight-medium);
 		padding: 0 5px;
 		line-height: 22px;
 		text-align: center;
--- a/packages/frontend/@n8n/design-system/src/css/date-picker/date-range-picker.scss
+++ b/packages/frontend/@n8n/design-system/src/css/date-picker/date-range-picker.scss
@@ -36,7 +36,7 @@

 		div {
 			font-size: 16px;
-			font-weight: 500;
+			font-weight: var(--font-weight-medium);
 			margin-right: 50px;
 		}
 	}
--- a/packages/frontend/@n8n/design-system/src/css/date-picker/date-table.scss
+++ b/packages/frontend/@n8n/design-system/src/css/date-picker/date-table.scss
@@ -68,7 +68,7 @@
 			position: relative;
 			span {
 				color: var(--color-primary);
-				font-weight: bold;
+				font-weight: var(--font-weight-bold);
 			}
 			&.start-date span,
 			&.end-date span {
@@ -145,7 +145,7 @@
 	th {
 		padding: 5px;
 		color: var.$datepicker-header-font-color;
-		font-weight: 400;
+		font-weight: var(--font-weight-regular);
 		border-bottom: solid 1px var(--border-color-light);
 	}
 }
--- a/packages/frontend/@n8n/design-system/src/css/date-picker/month-table.scss
+++ b/packages/frontend/@n8n/design-system/src/css/date-picker/month-table.scss
@@ -18,7 +18,7 @@
 		&.today {
 			.cell {
 				color: var(--color-primary);
-				font-weight: bold;
+				font-weight: var(--font-weight-bold);
 			}
 			&.start-date .cell,
 			&.end-date .cell {
--- a/packages/frontend/@n8n/design-system/src/css/date-picker/time-picker.scss
+++ b/packages/frontend/@n8n/design-system/src/css/date-picker/time-picker.scss
@@ -80,7 +80,7 @@
 		color: var(--color-text-dark);

 		&.confirm {
-			font-weight: 800;
+			font-weight: var(--font-weight-bold);
 			color: var.$datepicker-active-color;
 		}
 	}
--- a/packages/frontend/@n8n/design-system/src/css/date-picker/time-spinner.scss
+++ b/packages/frontend/@n8n/design-system/src/css/date-picker/time-spinner.scss
@@ -99,7 +99,7 @@

 		&.active:not(.disabled) {
 			color: var(--color-text-dark);
-			font-weight: bold;
+			font-weight: var(--font-weight-bold);
 		}

 		&.disabled {
--- a/packages/frontend/@n8n/design-system/src/css/date-picker/year-table.scss
+++ b/packages/frontend/@n8n/design-system/src/css/date-picker/year-table.scss
@@ -18,7 +18,7 @@
 		&.today {
 			.cell {
 				color: var(--color-primary);
-				font-weight: bold;
+				font-weight: var(--font-weight-bold);
 			}
 		}

--- a/packages/frontend/@n8n/design-system/src/css/divider.scss
+++ b/packages/frontend/@n8n/design-system/src/css/divider.scss
@@ -25,7 +25,7 @@
 		position: absolute;
 		background-color: var.$color-white;
 		padding: 0 20px;
-		font-weight: 500;
+		font-weight: var(--font-weight-medium);
 		color: var(--color-text-dark);
 		font-size: 14px;

--- a/packages/frontend/@n8n/design-system/src/css/fonts/CommitMonoVariable.woff2
+++ b/packages/frontend/@n8n/design-system/src/css/fonts/CommitMonoVariable.woff2
--- a/packages/frontend/@n8n/design-system/src/css/fonts/InterVariable-Italic.woff2
+++ b/packages/frontend/@n8n/design-system/src/css/fonts/InterVariable-Italic.woff2
--- a/packages/frontend/@n8n/design-system/src/css/fonts/InterVariable.woff2
+++ b/packages/frontend/@n8n/design-system/src/css/fonts/InterVariable.woff2
--- a/packages/frontend/@n8n/design-system/src/css/fonts/fonts.scss
+++ b/packages/frontend/@n8n/design-system/src/css/fonts/fonts.scss
@@ -0,0 +1,21 @@
+@font-face {
+	font-family: InterVariable;
+	font-style: normal;
+	font-weight: 100 900;
+	font-display: swap;
+	src: url('fonts/InterVariable.woff2') format('woff2');
+}
+@font-face {
+	font-family: InterVariable;
+	font-style: italic;
+	font-weight: 100 900;
+	font-display: swap;
+	src: url('fonts/InterVariable-Italic.woff2') format('woff2');
+}
+@font-face {
+	font-family: CommitMono;
+	font-style: italic;
+	font-weight: 100 900;
+	font-display: swap;
+	src: url('fonts/CommitMonoVariable.woff2') format('woff2');
+}
--- a/packages/frontend/@n8n/design-system/src/css/icon.scss
+++ b/packages/frontend/@n8n/design-system/src/css/icon.scss
@@ -5,7 +5,7 @@
 	src:
 		url('#{var.$font-path}/element-icons.woff') format('woff'),
 		/* chrome, firefox */ url('#{var.$font-path}/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-	font-weight: normal;
+	font-weight: var(--font-weight-regular);
 	font-display: var.$font-display;
 	font-style: normal;
 }
@@ -16,7 +16,7 @@
 	font-family: 'element-icons' !important;
 	speak: none;
 	font-style: normal;
-	font-weight: normal;
+	font-weight: var(--font-weight-regular);
 	font-variant: normal;
 	text-transform: none;
 	line-height: 1;
--- a/packages/frontend/@n8n/design-system/src/css/index.scss
+++ b/packages/frontend/@n8n/design-system/src/css/index.scss
@@ -3,6 +3,7 @@
@use './tokens.dark.scss' as dark;
@use './reset.scss';
@use './base.scss';
+@use './fonts/fonts.scss';
@use './pagination.scss';
@use './dialog.scss';
@use './display.scss';
--- a/packages/frontend/@n8n/design-system/src/css/notification.scss
+++ b/packages/frontend/@n8n/design-system/src/css/notification.scss
@@ -39,7 +39,7 @@

 	@include mixins.e(title) {
 		line-height: normal;
-		font-weight: bold;
+		font-weight: var(--font-weight-bold);
 		font-size: var.$notification-title-font-size;
 		color: var.$notification-title-color;
 		margin: 0;
--- a/packages/frontend/@n8n/design-system/src/css/option.scss
+++ b/packages/frontend/@n8n/design-system/src/css/option.scss
@@ -34,7 +34,7 @@

 		&.selected {
 			color: var.$select-option-selected-font-color;
-			font-weight: bold;
+			font-weight: var(--font-weight-bold);
 		}
 	}
 }
--- a/packages/frontend/@n8n/design-system/src/css/page-header.scss
+++ b/packages/frontend/@n8n/design-system/src/css/page-header.scss
@@ -30,7 +30,7 @@

 		@include mixins.e(title) {
 			font-size: 14px;
-			font-weight: 500;
+			font-weight: var(--font-weight-medium);
 		}
 	}

--- a/packages/frontend/@n8n/design-system/src/css/pagination.scss
+++ b/packages/frontend/@n8n/design-system/src/css/pagination.scss
@@ -7,7 +7,7 @@
 	white-space: nowrap;
 	padding: 2px 5px;
 	color: var.$pagination-font-color;
-	font-weight: bold;
+	font-weight: var(--font-weight-bold);
 	@include utils.utils-clearfix;

 	span:not([class*='suffix']),
@@ -80,7 +80,7 @@
 			font-size: 12px;
 			width: 12px;
 			height: 12px;
-			font-weight: bold;
+			font-weight: var(--font-weight-bold);

 			svg {
 				width: 12px;
@@ -143,7 +143,7 @@

 	@include mixins.e(sizes) {
 		margin: 0 10px 0 0;
-		font-weight: normal;
+		font-weight: var(--font-weight-regular);
 		color: var(--color-text-dark);

 		.el-input .el-input__inner {
@@ -158,13 +158,13 @@

 	@include mixins.e(total) {
 		margin-right: 10px;
-		font-weight: normal;
+		font-weight: var(--font-weight-regular);
 		color: var(--color-text-dark);
 	}

 	@include mixins.e(jump) {
 		margin-left: 24px;
-		font-weight: normal;
+		font-weight: var(--font-weight-regular);
 		color: var(--color-text-dark);

 		.el-input__inner {
--- a/packages/frontend/@n8n/design-system/src/css/reset.scss
+++ b/packages/frontend/@n8n/design-system/src/css/reset.scss
@@ -210,7 +210,7 @@ mark {
 	background-color: var(--color-text-highlight-background);
 	color: var(--color-text-dark);
 	font-style: italic;
-	font-weight: bold;
+	font-weight: var(--font-weight-bold);
 }

 del {
--- a/packages/frontend/@n8n/design-system/src/css/select-dropdown.scss
+++ b/packages/frontend/@n8n/design-system/src/css/select-dropdown.scss
@@ -28,7 +28,7 @@
 				font-family: 'element-icons';
 				content: '\e6da';
 				font-size: 12px;
-				font-weight: bold;
+				font-weight: var(--font-weight-bold);
 				-webkit-font-smoothing: antialiased;
 				-moz-osx-font-smoothing: grayscale;
 			}
--- a/packages/frontend/@n8n/design-system/src/css/select.scss
+++ b/packages/frontend/@n8n/design-system/src/css/select.scss
@@ -147,7 +147,7 @@
 		background-color: var(--color-foreground-base);
 		color: var(--color-text-dark);
 		border-radius: 20px;
-		font-weight: 400;
+		font-weight: var(--font-weight-regular);

 		&__close.el-icon-close {
 			background-color: var(--color-text-light);
--- a/packages/frontend/@n8n/design-system/src/css/step.scss
+++ b/packages/frontend/@n8n/design-system/src/css/step.scss
@@ -80,13 +80,13 @@
 		display: inline-block;
 		user-select: none;
 		text-align: center;
-		font-weight: bold;
+		font-weight: var(--font-weight-bold);
 		line-height: 1;
 		color: inherit;

 		&[class*='el-icon']:not(.is-status) {
 			font-size: 25px;
-			font-weight: normal;
+			font-weight: var(--font-weight-regular);
 		}

 		// 组件自身表示状态的图标
@@ -122,7 +122,7 @@
 		line-height: 38px;

 		@include mixins.when(process) {
-			font-weight: bold;
+			font-weight: var(--font-weight-bold);
 			color: var(--color-text-dark);
 		}

@@ -148,7 +148,7 @@
 		margin-top: -5px;
 		font-size: 12px;
 		line-height: 20px;
-		font-weight: normal;
+		font-weight: var(--font-weight-regular);

 		@include mixins.when(process) {
 			color: var(--color-text-dark);
--- a/packages/frontend/@n8n/design-system/src/css/switch.scss
+++ b/packages/frontend/@n8n/design-system/src/css/switch.scss
@@ -24,7 +24,7 @@
 		height: var.$switch-height;
 		display: inline-block;
 		font-size: var.$switch-font-size;
-		font-weight: 500;
+		font-weight: var(--font-weight-medium);
 		cursor: pointer;
 		vertical-align: middle;
 		color: var(--color-text-dark);
--- a/packages/frontend/@n8n/design-system/src/css/table.scss
+++ b/packages/frontend/@n8n/design-system/src/css/table.scss
@@ -109,7 +109,7 @@

 	thead {
 		color: var.$table-header-font-color;
-		font-weight: 500;
+		font-weight: var(--font-weight-medium);

 		&.is-group {
 			th {
--- a/packages/frontend/@n8n/design-system/src/css/tabs.scss
+++ b/packages/frontend/@n8n/design-system/src/css/tabs.scss
@@ -100,7 +100,7 @@
 		display: inline-block;
 		list-style: none;
 		font-size: 14px;
-		font-weight: 500;
+		font-weight: var(--font-weight-medium);
 		color: var(--color-text-dark);
 		position: relative;

--- a/packages/frontend/@n8n/design-system/src/css/time-select.scss
+++ b/packages/frontend/@n8n/design-system/src/css/time-select.scss
@@ -22,7 +22,7 @@

 .time-select-item.selected:not(.disabled) {
 	color: var(--color-primary);
-	font-weight: bold;
+	font-weight: var(--font-weight-bold);
 }

 .time-select-item.disabled {
@@ -32,6 +32,6 @@

 .time-select-item:hover {
 	background-color: var.$background-color-base;
-	font-weight: bold;
+	font-weight: var(--font-weight-bold);
 	cursor: pointer;
 }
--- a/packages/frontend/@n8n/design-system/src/css/transfer.scss
+++ b/packages/frontend/@n8n/design-system/src/css/transfer.scss
@@ -169,14 +169,14 @@
 			.el-checkbox__label {
 				font-size: 16px;
 				color: var(--color-text-dark);
-				font-weight: normal;
+				font-weight: var(--font-weight-regular);

 				span {
 					position: absolute;
 					right: 15px;
 					color: var(--color-text-light);
 					font-size: 12px;
-					font-weight: normal;
+					font-weight: var(--font-weight-regular);
 				}
 			}
 		}
--- a/packages/frontend/@n8n/design-system/src/css/upload.scss
+++ b/packages/frontend/@n8n/design-system/src/css/upload.scss
@@ -592,7 +592,7 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		font-weight: normal;
+		font-weight: var(--font-weight-regular);
 		text-align: left;
 		padding: 0 10px;
 		margin: 0;
--- a/packages/frontend/@n8n/design-system/theme/preview/docs.min.css
+++ b/packages/frontend/@n8n/design-system/theme/preview/docs.min.css
@@ -175,7 +175,7 @@
 	line-height: 1;
 	margin: 0 0 20px;
 	padding: 0;
-	font-weight: 700;
+	font-weight: var(--font-weight-bold);
 }
 .footer .footer-social .elementdoc {
 	transition: 0.3s;
@@ -257,7 +257,7 @@
 }
 .algolia-search .algolia-highlight {
 	color: #409eff;
-	font-weight: 700;
+	font-weight: var(--font-weight-bold);
 }
 .algolia-search .algolia-search-title {
 	font-size: 14px;
@@ -334,7 +334,7 @@
 }
 #v3-banner a[data-v-70469f40] {
 	color: #fff;
-	font-weight: 700;
+	font-weight: var(--font-weight-bold);
 }
 .header[data-v-70469f40] {
 	height: 80px;
@@ -359,7 +359,7 @@
 	margin: 0;
 	float: left;
 	font-size: 32px;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 }
 .header h1 a[data-v-70469f40] {
 	color: #333;
@@ -447,7 +447,7 @@
 }
 .header .nav-item.lang-item .nav-lang.active[data-v-70469f40],
 .header .nav-item:last-child .nav-lang.active[data-v-70469f40] {
-	font-weight: 700;
+	font-weight: var(--font-weight-bold);
 	color: #409eff;
 }
 .header .nav-item a[data-v-70469f40] {
@@ -596,7 +596,7 @@
 	display: block;
 	position: relative;
 	transition: 0.15s ease-out;
-	font-weight: 700;
+	font-weight: var(--font-weight-bold);
 }
 .side-nav .nav-item a.active {
 	color: #409eff;
@@ -610,7 +610,7 @@
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 }
 .side-nav .nav-item .nav-item a.active,
 .side-nav .nav-item .nav-item a:hover {
@@ -621,7 +621,7 @@
 }
 .side-nav .nav-item.sponsors > a {
 	color: #777;
-	font-weight: 300;
+	font-weight: var(--font-weight-regular);
 	font-size: 14px;
 }
 .side-nav .nav-item.sponsors .nav-item {
@@ -1831,7 +1831,7 @@ html {
 		Microsoft YaHei,
 		SimSun,
 		sans-serif;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	-webkit-font-smoothing: antialiased;
 	-webkit-tap-highlight-color: transparent;
 }
@@ -1918,7 +1918,7 @@ textarea {
 .page-container h3,
 .page-container h4,
 .page-container h5 {
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	color: #1f2f3d;
 }
 .page-container h2:hover a,
@@ -1999,7 +1999,7 @@ textarea {
 			format('woff'),
 		url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxmb250IGlkPSJpY29tb29uIiBob3Jpei1hZHYteD0iMTAyNCI+PGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiLz48Z2x5cGggaG9yaXotYWR2LXg9IjUxMiIvPjxnbHlwaCB1bmljb2RlPSLupIAiIGdseXBoLW5hbWU9InJhdGUtZmFjZS1vZmYiIGQ9Ik0wIDQ0OGMwIDI4Mi43NjYgMjI5LjIzNCA1MTIgNTEyIDUxMnM1MTItMjI5LjIzNCA1MTItNTEyYzAtMjgyLjc2Ni0yMjkuMjM0LTUxMi01MTItNTEyUzAgMTY1LjIzNCAwIDQ0OHptOTQ3LjIgMGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMlM3Ni44IDY4OC4zNTEgNzYuOCA0NDggMjcxLjY0OSAxMi44IDUxMiAxMi44IDk0Ny4yIDIwNy42NDkgOTQ3LjIgNDQ4ek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek0zNjEuMTQzIDI4MS42QzMzOC40MzIgMjgxLjYgMzIwIDI2Mi45NjMgMzIwIDI0MHMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0QzY4NS41NjggMTk4LjQgNzA0IDIxNy4wMzcgNzA0IDI0MHMtMTguNDMyIDQxLjYtNDEuMTQzIDQxLjZIMzYxLjE0M3oiLz48Z2x5cGggdW5pY29kZT0i7qSBIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMSIgZD0iTTUxMi4wMDEgOTYwQzIyOS4yMyA5NjAgMCA3MzAuNzcgMCA0NDcuOTk4IDAgMTY1LjIyOCAyMjkuMjMtNjQgNTEyLjAwMS02NCA3OTQuNzctNjQgMTAyNCAxNjUuMjI3IDEwMjQgNDQ3Ljk5OFM3OTQuNzcgOTYwIDUxMi4wMDEgOTYwek0yOTQuNCA1ODguODUzQzI5NC40IDYxNy4xIDMxNy4xMjYgNjQwIDM0NS42IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em0zMzIuOCAwQzYyNy4yIDYxNy4xIDY0OS45MjYgNjQwIDY3OC40IDY0MGMyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3em02Ny4zMjktNDA3LjY1NmwtMy40MjIgMS4yMTZjLTU2LjE1IDI3Ljg3Mi0xMTYuMzg4IDQyLjA0Ny0xNzguODgyIDQyLjA0Ny02NC41NTYgMC0xMjUuNjExLTE0LjMxNi0xODEuNTE1LTQyLjQ1bC0zLjM4Mi0xLjEzMmMtMi4xMDItLjYyOC00Ljk0NS0xLjUyOS04LjQ4OS0xLjUyOS0yMC41NTQgMC0zNy4yMzkgMTguMjktMzcuMjM5IDQwLjczNCAwIDEwLjY1NSA0LjU3MSAyMS4zNjEgMTIuMTE0IDI5LjM5OWwtLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiLz48Z2x5cGggdW5pY29kZT0i7qSCIiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMiIgZD0iTTUxMi02NEMyMjkuMjM0LTY0IDAgMTY1LjIzNCAwIDQ0OHMyMjkuMjM0IDUxMiA1MTIgNTEyYzI4Mi43NjYgMCA1MTItMjI5LjIzNCA1MTItNTEyUzc5NC43NjYtNjQgNTEyLTY0ek0yOTQuNCA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3ptMzMyLjggMHYtNTEuMzA3YzAtMjguNDgyIDIyLjkyMy01MS4xNDcgNTEuMi01MS4xNDcgMjguNDc0IDAgNTEuMiAyMi44OTkgNTEuMiA1MS4xNDd2NTEuMzA3YzAgMjguNDgyLTIyLjkyMyA1MS4xNDctNTEuMiA1MS4xNDctMjguNDc0IDAtNTEuMi0yMi44OTktNTEuMi01MS4xNDd6TTM2MS4xNDMgMjgxLjZDMzM4LjQzMiAyODEuNiAzMjAgMjYyLjk2MyAzMjAgMjQwczE4LjQzMi00MS42IDQxLjE0My00MS42aDMwMS43MTRDNjg1LjU2OCAxOTguNCA3MDQgMjE3LjAzNyA3MDQgMjQwcy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNkgzNjEuMTQzeiIvPjxnbHlwaCB1bmljb2RlPSLupIMiIGdseXBoLW5hbWU9InJhdGUtZmFjZS0zIiBkPSJNNTEyLjAwMSA5NjBDMjI5LjIzMSA5NjAgMCA3MzAuNzcgMCA0NDguMDAxUzIyOS4yMy02NCA1MTIuMDAxLTY0Qzc5NC43NzEtNjQgMTAyNCAxNjUuMjMgMTAyNCA0NDcuOTk5Uzc5NC43NzEgOTYwIDUxMi4wMDEgOTYwem0zMDUuNDk0LTY1NC40MzVhNDAuNDA2IDQwLjQwNiAwIDAgMC0xLjU2OS00LjM1IDQwLjg1IDQwLjg1IDAgMCAwLTIuMzE3LTQuNTU2Qzc1Ny45NzggMTg5LjA0NiA2NDQuMDkxIDExNS4yIDUxMi4yODYgMTE1LjJsLS4yODYuMDAyLS4yODYtLjAwMmMtMTMxLjgwNCAwLTI0NS42OTMgNzMuODQ1LTMwMS4zMjMgMTgxLjQ1OWE0MC44NSA0MC44NSAwIDAgMC0yLjMxNyA0LjU1NiA0MC4zMjggNDAuMzI4IDAgMCAwLTEuNTY5IDQuMzUgNDAuMzE3IDQwLjMxNyAwIDAgMC0xLjcwNSAxMS41OTcgNDAuMzE0IDQwLjMxNCAwIDAgMCA0LjM3MiAxOC4yODJjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWguNjc2QzMyNi45MDQgMjUzLjk5MSA0MTIuNjI0IDE5Ny45IDUxMiAxOTcuNzkyYzk5LjM3NS4xMDggMTg1LjA5NSA1Ni4yIDIyNi41MDcgMTM3LjY1MmguNjc2YzYuODk3IDEzLjYwMSAyMS4yMzkgMjIuOTU1IDM3LjgyMyAyMi45NTVzMzAuOTI3LTkuMzU1IDM3LjgyMi0yMi45NTVhNDAuMjk4IDQwLjI5OCAwIDAgMCA0LjM3Mi0xOC4yODJjMC00LjAyOS0uNjAyLTcuOTE4LTEuNzA1LTExLjU5N3pNNjI3LjIgNTg4Ljg1M0M2MjcuMiA2MTcuMSA2NDkuOTI2IDY0MCA2NzguNCA2NDBjMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3ptLTMzMi44IDBDMjk0LjQgNjE3LjEgMzE3LjEyNiA2NDAgMzQ1LjYgNjQwYzI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6Ii8+PC9mb250PjwvZGVmcz48L3N2Zz4=)
 			format('svg');
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	font-style: normal;
 }
 [class*=' icon-'],
@@ -2007,7 +2007,7 @@ textarea {
 	font-family: icomoon !important;
 	speak: none;
 	font-style: normal;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	font-variant: normal;
 	text-transform: none;
 	line-height: 1;
@@ -2204,7 +2204,7 @@ input {
 }
 .component-preview .title {
 	font-size: 18px;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	padding: 0 20px;
 }
 .component-preview .paragraph {
@@ -2342,7 +2342,7 @@ input {
 	width: 100%;
 }
 .theme-card-item .info .title {
-	font-weight: 700;
+	font-weight: var(--font-weight-bold);
 	font-size: 16px;
 	color: #303133;
 	padding: 0 12px;
@@ -2350,7 +2350,7 @@ input {
 }
 .theme-card-item .info .right {
 	float: right;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	font-size: 14px;
 	color: #909399;
 }
--- a/packages/frontend/editor-ui/package.json
+++ b/packages/frontend/editor-ui/package.json
@@ -30,7 +30,6 @@
    "@codemirror/state": "^6.4.1",
    "@codemirror/view": "^6.26.3",
    "@dagrejs/dagre": "^1.1.4",
-    "@fontsource/open-sans": "^4.5.0",
    "@lezer/common": "1.1.0",
    "@n8n/api-types": "workspace:*",
    "@n8n/chat": "workspace:*",
--- a/packages/frontend/editor-ui/src/components/ApiKeyCard.vue
+++ b/packages/frontend/editor-ui/src/components/ApiKeyCard.vue
@@ -60,9 +60,9 @@ const getExpirationTime = (apiKey: ApiKey): string => {
 	<n8n-card :class="$style.cardLink" data-test-id="api-key-card" @click="onAction('edit')">
 		<template #header>
 			<div>
-				<n8n-heading tag="h2" bold :class="$style.cardHeading">
+				<n8n-text tag="h2" bold :class="$style.cardHeading">
 					{{ apiKey.label }}
-				</n8n-heading>
+				</n8n-text>
 				<div :class="[$style.cardDescription]">
 					<n8n-text :color="!hasApiKeyExpired(apiKey) ? 'text-light' : 'warning'" size="small">
 						<span>{{ getExpirationTime(apiKey) }}</span>
--- a/packages/frontend/editor-ui/src/components/Badge.vue
+++ b/packages/frontend/editor-ui/src/components/Badge.vue
@@ -29,7 +29,7 @@ export default {
 	font-size: 11px;
 	line-height: 18px;
 	max-height: 18px;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	display: flex;
 	align-items: center;
 	padding: 2px 4px;
--- a/packages/frontend/editor-ui/src/components/CanvasChat/components/ChatLogsPanel.vue
+++ b/packages/frontend/editor-ui/src/components/CanvasChat/components/ChatLogsPanel.vue
@@ -56,7 +56,7 @@ const locale = useI18n();
 	align-items: center;

 	span {
-		font-weight: 100;
+		font-weight: var(--font-weight-regular);
 	}
 }
 .logsWrapper {
--- a/packages/frontend/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue
+++ b/packages/frontend/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue
@@ -251,7 +251,7 @@ async function copySessionId() {
 }
 .chatHeader {
 	font-size: var(--font-size-s);
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	line-height: 18px;
 	text-align: left;
 	border-bottom: 1px solid var(--color-foreground-base);
@@ -262,7 +262,7 @@ async function copySessionId() {
 	align-items: center;
 }
 .chatTitle {
-	font-weight: 600;
+	font-weight: var(--font-weight-medium);
 }
 .session {
 	display: flex;
--- a/packages/frontend/editor-ui/src/components/CodeNodeEditor/theme.ts
+++ b/packages/frontend/editor-ui/src/components/CodeNodeEditor/theme.ts
@@ -12,7 +12,7 @@ import { tags } from '@lezer/highlight';

 const BASE_STYLING = {
 	fontSize: '0.8em',
-	fontFamily: "Menlo, Consolas, 'DejaVu Sans Mono', monospace !important",
+	fontFamily: 'var(--font-family-monospace)',
 	maxHeight: '400px',
 	tooltip: {
 		maxWidth: '250px',
--- a/packages/frontend/editor-ui/src/components/CredentialCard.vue
+++ b/packages/frontend/editor-ui/src/components/CredentialCard.vue
@@ -134,7 +134,7 @@ function moveResource() {
 			<CredentialIcon :credential-type-name="credentialType?.name ?? ''" />
 		</template>
 		<template #header>
-			<n8n-heading tag="h2" bold :class="$style.cardHeading">
+			<n8n-text tag="h2" bold :class="$style.cardHeading">
 				{{ data.name }}
 				<N8nBadge v-if="readOnly" class="ml-3xs" theme="tertiary" bold>
 					{{ locale.baseText('credentials.item.readonly') }}
@@ -142,7 +142,7 @@ function moveResource() {
 				<N8nBadge v-if="needsSetup" class="ml-3xs" theme="warning">
 					{{ locale.baseText('credentials.item.needsSetup') }}
 				</N8nBadge>
-			</n8n-heading>
+			</n8n-text>
 		</template>
 		<div :class="$style.cardDescription">
 			<n8n-text color="text-light" size="small">
--- a/packages/frontend/editor-ui/src/components/Error/NodeErrorView.vue
+++ b/packages/frontend/editor-ui/src/components/Error/NodeErrorView.vue
@@ -665,7 +665,7 @@ async function onAskAssistantClick() {
 		padding: var(--spacing-2xs) var(--spacing-s);
 		border-bottom: 1px solid var(--color-danger-tint-1);
 		font-size: var(--font-size-3xs);
-		font-weight: var(--font-weight-bold);
+		font-weight: var(--font-weight-medium);
 		background-color: var(--color-danger-tint-2);
 		border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
 		color: var(--color-danger);
@@ -678,7 +678,7 @@ async function onAskAssistantClick() {
 		gap: var(--spacing-xs);
 		padding: var(--spacing-xs) var(--spacing-s) var(--spacing-3xs) var(--spacing-s);
 		color: var(--color-danger);
-		font-weight: var(--font-weight-bold);
+		font-weight: var(--font-weight-medium);
 		font-size: var(--font-size-s);
 	}

--- a/packages/frontend/editor-ui/src/components/FilterConditions/OperatorSelect.vue
+++ b/packages/frontend/editor-ui/src/components/FilterConditions/OperatorSelect.vue
@@ -143,7 +143,7 @@ function onGroupSelect(group: string) {
 	cursor: pointer;

 	&.suggested {
-		font-weight: 800;
+		font-weight: var(--font-weight-bold);
 	}

 	&:hover {
--- a/packages/frontend/editor-ui/src/components/InlineNameEdit.vue
+++ b/packages/frontend/editor-ui/src/components/InlineNameEdit.vue
@@ -118,7 +118,7 @@ onClickOutside(nameInput, disableNameEdit);
 	position: relative;
 	min-height: 22px;
 	max-height: v-bind(maxHeight);
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);

 	&.editing {
 		width: 100%;
@@ -158,6 +158,6 @@ onClickOutside(nameInput, disableNameEdit);
 	font-size: var(--font-size-2xs);
 	color: var(--color-text-light);
 	margin-left: 4px;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 }
 </style>
--- a/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -290,7 +290,7 @@ function hideGithubButton() {
 	display: flex;
 	align-items: center;
 	font-size: 0.9em;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	overflow: auto;
 }

--- a/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -715,7 +715,7 @@ $--header-spacing: 20px;

 .activator {
 	color: $custom-font-dark;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	font-size: 13px;
 	line-height: $--text-line-height;
 	align-items: center;
@@ -729,7 +729,7 @@ $--header-spacing: 20px;
 	font-size: 12px;
 	padding: 20px 0; // to be more clickable
 	color: $custom-font-very-light;
-	font-weight: 600;
+	font-weight: var(--font-weight-bold);
 	white-space: nowrap;

 	&:hover {
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue
@@ -21,7 +21,7 @@ defineProps<Props>();
 	letter-spacing: 1px;
 	padding-top: var(--spacing-s);
 	font-style: normal;
-	font-weight: 700;
+	font-weight: var(--font-weight-bold);
 	font-size: 10px;
 	line-height: 12px;
 	text-transform: uppercase;
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
@@ -72,7 +72,7 @@ const i18n = useI18n();
 	height: 100%;
 	border-left: 1px solid $node-creator-border-color;
 	flex-direction: column;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	display: flex;
 	align-items: center;
 	align-content: center;
--- a/packages/frontend/editor-ui/src/components/NodeTitle.vue
+++ b/packages/frontend/editor-ui/src/components/NodeTitle.vue
@@ -90,7 +90,7 @@ function onRename() {

 <style lang="scss" module>
 .container {
-	font-weight: var(--font-weight-bold);
+	font-weight: var(--font-weight-medium);
 	display: flex;
 	font-size: var(--font-size-m);
 	line-height: var(--font-line-height-compact);
--- a/packages/frontend/editor-ui/src/components/NodeWebhooks.vue
+++ b/packages/frontend/editor-ui/src/components/NodeWebhooks.vue
@@ -228,7 +228,7 @@ watch(

 	.headline {
 		color: $color-primary;
-		font-weight: 600;
+		font-weight: var(--font-weight-bold);
 		font-size: var(--font-size-2xs);
 	}
 }
--- a/packages/frontend/editor-ui/src/components/ParameterInput.vue
+++ b/packages/frontend/editor-ui/src/components/ParameterInput.vue
@@ -1788,7 +1788,7 @@ onUpdated(async () => {
 	padding-right: 20px;

 	.option-headline {
-		font-weight: var(--font-weight-bold);
+		font-weight: var(--font-weight-medium);
 		line-height: var(--font-line-height-regular);
 		overflow-wrap: break-word;
 	}
--- a/packages/frontend/editor-ui/src/components/Projects/ProjectSharingInfo.vue
+++ b/packages/frontend/editor-ui/src/components/Projects/ProjectSharingInfo.vue
@@ -61,7 +61,7 @@ const projectIcon = computed(() => {
 	p {
 		font-size: var(--font-size-s);
 		color: var(--color-text-dark);
-		font-weight: var(--font-weight-bold);
+		font-weight: var(--font-weight-medium);
 		line-height: var(--font-line-height-loose);
 	}

--- a/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
+++ b/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
@@ -416,7 +416,7 @@ defineExpose({ isWithinDropdown });
 }

 .addResourceText {
-	font-weight: bold;
+	font-weight: var(--font-weight-bold);
 }

 .addResourceIcon {
--- a/packages/frontend/editor-ui/src/components/RunData.vue
+++ b/packages/frontend/editor-ui/src/components/RunData.vue
@@ -2325,7 +2325,7 @@ defineExpose({ enterEditMode });
 	color: black;
 	border-radius: var(--border-radius-base);
 	padding: 0 1px;
-	font-weight: normal;
+	font-weight: var(--font-weight-regular);
 	font-style: normal;
 }
 </style>
--- a/packages/frontend/editor-ui/src/components/SaveButton.vue
+++ b/packages/frontend/editor-ui/src/components/SaveButton.vue
@@ -79,7 +79,7 @@ const shortcutTooltipLabel = computed(() => {
 .saved {
 	color: $custom-font-very-light;
 	font-size: 12px;
-	font-weight: 600;
+	font-weight: var(--font-weight-bold);
 	line-height: 12px;
 	text-align: center;
 	padding: var(--spacing-2xs) var(--spacing-2xs);
--- a/packages/frontend/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
+++ b/packages/frontend/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
@@ -566,7 +566,7 @@ function callEventBus(event: string, data: unknown) {

 .cardTitle {
 	font-size: 14px;
-	font-weight: bold;
+	font-weight: var(--font-weight-bold);
 }

 .header {
--- a/packages/frontend/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/frontend/editor-ui/src/components/TagsDropdown.vue
@@ -352,7 +352,7 @@ onClickOutside(
 		padding: $--item-padding;
 		margin: 0;
 		line-height: $--item-line-height;
-		font-weight: 400;
+		font-weight: var(--font-weight-regular);
 		font-size: $--item-font-size;

 		&.is-disabled {
@@ -361,7 +361,7 @@ onClickOutside(
 		}

 		&.selected {
-			font-weight: bold;
+			font-weight: var(--font-weight-bold);

 			> span {
 				display: inline-block;
--- a/packages/frontend/editor-ui/src/components/TestDefinition/shared/TestTableBase.vue
+++ b/packages/frontend/editor-ui/src/components/TestDefinition/shared/TestTableBase.vue
@@ -198,7 +198,7 @@ defineSlots<{
 	overflow: hidden;
 	text-overflow: ellipsis;
 	font-size: 12px;
-	font-weight: 600;
+	font-weight: var(--font-weight-bold);
 	color: var(--color-text-base);
 }

--- a/packages/frontend/editor-ui/src/components/UpdatesPanel.vue
+++ b/packages/frontend/editor-ui/src/components/UpdatesPanel.vue
@@ -84,7 +84,7 @@ const i18n = useI18n();
 	font-size: 24px;
 	line-height: 24px;
 	color: $updates-panel-text-color;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 }

 .description {
@@ -96,7 +96,7 @@ const i18n = useI18n();
 		font-size: 16px;
 		line-height: 22px;
 		color: $updates-panel-description-text-color;
-		font-weight: 400;
+		font-weight: var(--font-weight-regular);
 		margin: 0 0 16px 0;
 	}

--- a/packages/frontend/editor-ui/src/components/VersionCard.vue
+++ b/packages/frontend/editor-ui/src/components/VersionCard.vue
@@ -103,7 +103,7 @@ const nodeName = (node: IVersionNode): string => {
 }

 .name {
-	font-weight: 600;
+	font-weight: var(--font-weight-bold);
 	font-size: 16px;
 	line-height: 18px;
 	color: $version-card-name-text-color;
@@ -117,7 +117,7 @@ const nodeName = (node: IVersionNode): string => {

 .description {
 	font-size: 14px;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	line-height: 19px;
 	color: $version-card-description-text-color;
 }
@@ -125,7 +125,7 @@ const nodeName = (node: IVersionNode): string => {
 .release-date {
 	font-size: 12px;
 	line-height: 18px;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	color: $version-card-release-date-text-color;
 }

--- a/packages/frontend/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowCard.vue
@@ -256,12 +256,12 @@ const emitWorkflowActiveToggle = (value: { id: string; active: boolean }) => {
 <template>
 	<n8n-card :class="$style.cardLink" data-test-id="workflow-card" @click="onClick">
 		<template #header>
-			<n8n-heading tag="h2" bold :class="$style.cardHeading" data-test-id="workflow-card-name">
+			<n8n-text tag="h2" bold :class="$style.cardHeading" data-test-id="workflow-card-name">
 				{{ data.name }}
 				<N8nBadge v-if="!workflowPermissions.update" class="ml-3xs" theme="tertiary" bold>
 					{{ locale.baseText('workflows.item.readonly') }}
 				</N8nBadge>
-			</n8n-heading>
+			</n8n-text>
 		</template>
 		<div :class="$style.cardDescription">
 			<n8n-text color="text-light" size="small">
--- a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue
@@ -89,7 +89,7 @@ function onClick() {

 .label {
 	width: max-content;
-	font-weight: var(--font-weight-bold);
+	font-weight: var(--font-weight-medium);
 	font-size: var(--font-size-m);
 	line-height: var(--font-line-height-xloose);
 	color: var(--color-text-dark);
--- a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -313,7 +313,7 @@ function onActivate() {
 	-webkit-line-clamp: 2;
 	overflow: hidden;
 	overflow-wrap: anywhere;
-	font-weight: var(--font-weight-bold);
+	font-weight: var(--font-weight-medium);
 	line-height: var(--font-line-height-compact);
 }

@@ -326,7 +326,7 @@ function onActivate() {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	line-height: var(--font-line-height-compact);
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 }

 .statusIcons {
--- a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue
@@ -104,7 +104,7 @@ const dirtiness = computed(() =>
 	display: flex;
 	align-items: center;
 	gap: var(--spacing-5xs);
-	font-weight: 600;
+	font-weight: var(--font-weight-bold);
 }

 .runData {
--- a/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationPanel.ee.vue
+++ b/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationPanel.ee.vue
@@ -278,7 +278,7 @@ const onTagsEditEsc = () => {
 	}

 	.key {
-		font-weight: bold;
+		font-weight: var(--font-weight-bold);
 	}
 }

--- a/packages/frontend/editor-ui/src/main.ts
+++ b/packages/frontend/editor-ui/src/main.ts
@@ -12,10 +12,6 @@ import '@n8n/design-system/css/index.scss';

 import './n8n-theme.scss';

-import '@fontsource/open-sans/latin-400.css';
-import '@fontsource/open-sans/latin-600.css';
-import '@fontsource/open-sans/latin-700.css';
-
 import App from '@/App.vue';
 import router from './router';

--- a/packages/frontend/editor-ui/src/n8n-theme.scss
+++ b/packages/frontend/editor-ui/src/n8n-theme.scss
@@ -15,7 +15,7 @@
 }
 .text-light {
 	color: $custom-font-light;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 }

 // Dialog
@@ -52,7 +52,7 @@
 			width: 50px;
 			.el-dialog__close {
 				color: var(--color-foreground-xlight);
-				font-weight: 400;
+				font-weight: var(--font-weight-regular);
 			}
 			.el-dialog__close:hover {
 				transform: scale(1.2);
@@ -121,7 +121,7 @@
 	outline: none;
 }
 .el-tabs__item.is-active {
-	font-weight: bold;
+	font-weight: var(--font-weight-bold);
 }

 .el-tabs__content {
@@ -186,7 +186,7 @@
 .tags-container {
 	.el-select-tags-wrapper .el-tag {
 		font-size: 12px;
-		font-weight: 400;
+		font-weight: var(--font-weight-regular);
 		display: flex;
 		align-items: center;

--- a/packages/frontend/editor-ui/src/views/CanvasAddButton.vue
+++ b/packages/frontend/editor-ui/src/views/CanvasAddButton.vue
@@ -86,7 +86,7 @@ const containerCssVars = computed(() => ({

 .label {
 	width: max-content;
-	font-weight: var(--font-weight-bold);
+	font-weight: var(--font-weight-medium);
 	font-size: var(--font-size-m);
 	line-height: var(--font-line-height-xloose);
 	color: var(--color-text-dark);
--- a/packages/frontend/editor-ui/src/views/SettingsLogStreamingView.vue
+++ b/packages/frontend/editor-ui/src/views/SettingsLogStreamingView.vue
@@ -174,7 +174,7 @@ async function onEdit(destinationId?: string) {
 					{{ i18n.baseText(`settings.log-streaming.heading`) }}
 				</n8n-heading>
 				<template v-if="environment !== 'production'">
-					<strong class="ml-m">Disable License ({{ environment }})&nbsp;</strong>
+					<span class="ml-m">Disable License ({{ environment }})&nbsp;</span>
 					<el-switch v-model="disableLicense" size="large" data-test-id="disable-license-toggle" />
 				</template>
 			</div>
--- a/packages/frontend/editor-ui/src/views/SettingsSso.vue
+++ b/packages/frontend/editor-ui/src/views/SettingsSso.vue
@@ -298,7 +298,7 @@ onMounted(async () => {
 	> label {
 		display: inline-block;
 		font-size: var(--font-size-s);
-		font-weight: var(--font-weight-bold);
+		font-weight: var(--font-weight-medium);
 		padding: 0 0 var(--spacing-2xs);
 	}

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1580,9 +1580,6 @@ importers:
      '@dagrejs/dagre':
        specifier: ^1.1.4
        version: 1.1.4
-      '@fontsource/open-sans':
-        specifier: ^4.5.0
-        version: 4.5.12
      '@fortawesome/fontawesome-svg-core':
        specifier: '*'
        version: 1.2.36
@@ -3552,9 +3549,6 @@ packages:
  '@floating-ui/dom@1.4.5':
    resolution: {integrity: sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==}

-  '@fontsource/open-sans@4.5.12':
-    resolution: {integrity: sha512-WKCexsVbOECJUSOgG7GnrUxe+3ds4Sa1yhsTjSnszI+0TaJvMZnDnn5YDKwA/KwLbkZqCaV3nvMTH97jJuxWNA==}
-
  '@fortawesome/fontawesome-common-types@0.2.36':
    resolution: {integrity: sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==}
    engines: {node: '>=6'}
@@ -13375,6 +13369,9 @@ packages:
  vue-component-type-helpers@2.2.8:
    resolution: {integrity: sha512-4bjIsC284coDO9om4HPA62M7wfsTvcmZyzdfR0aUlFXqq4tXxM1APyXpNVxPC8QazKw9OhmZNHBVDA6ODaZsrA==}

+  vue-component-type-helpers@3.0.0-alpha.2:
+    resolution: {integrity: sha512-dv9YzsuJFLnpRNxKU0exwIlCIA/v+rXrgCsEtaENsFJLPFMw1Sr4IRctilwfjnjCzoJGgGACHRZfxo6ZwlH2fQ==}
+
  vue-demi@0.14.10:
    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
    engines: {node: '>=12'}
@@ -15960,8 +15957,6 @@ snapshots:
    dependencies:
      '@floating-ui/core': 1.3.1

-  '@fontsource/open-sans@4.5.12': {}
-
  '@fortawesome/fontawesome-common-types@0.2.36': {}

  '@fortawesome/fontawesome-common-types@6.2.0': {}
@@ -18428,7 +18423,7 @@ snapshots:
      ts-dedent: 2.2.0
      type-fest: 2.19.0
      vue: 3.5.13(typescript@5.8.2)
-      vue-component-type-helpers: 2.2.8
+      vue-component-type-helpers: 3.0.0-alpha.2

  '@supabase/auth-js@2.65.0':
    dependencies:
@@ -27741,6 +27736,8 @@ snapshots:

  vue-component-type-helpers@2.2.8: {}

+  vue-component-type-helpers@3.0.0-alpha.2: {}
+
  vue-demi@0.14.10(vue@3.5.13(typescript@5.8.2)):
    dependencies:
      vue: 3.5.13(typescript@5.8.2)