diff --git a/packages/components/src/components/link/link.scss b/packages/components/src/components/link/link.scss
index 933004a4c58..36e03da43f4 100644
--- a/packages/components/src/components/link/link.scss
+++ b/packages/components/src/components/link/link.scss
@@ -15,6 +15,7 @@
 }
 
 .db-link {
+	@extend %default-fg-transition;
 	@extend %db-link-height;
 	inline-size: fit-content;
 	align-items: center;
diff --git a/packages/foundations/scss/db-ui-foundations.scss b/packages/foundations/scss/db-ui-foundations.scss
index e28f99c6e70..79144f91422 100644
--- a/packages/foundations/scss/db-ui-foundations.scss
+++ b/packages/foundations/scss/db-ui-foundations.scss
@@ -19,10 +19,10 @@
 
 [class^="db-"],
 [class^="db-"] * {
-	@extend %default-color-transition;
+	@extend %default-transition;
 
 	::before,
 	::after {
-		@extend %default-color-transition;
+		@extend %default-transition;
 	}
 }
diff --git a/packages/foundations/scss/helpers/_component.scss b/packages/foundations/scss/helpers/_component.scss
index e7b3a9f2ccc..403ff400a84 100644
--- a/packages/foundations/scss/helpers/_component.scss
+++ b/packages/foundations/scss/helpers/_component.scss
@@ -32,7 +32,7 @@ $default-mobile-header-height: functions.to-rem(56);
 	border-radius: $default-border-radius;
 }
 
-%default-color-transition {
+%default-transition {
 	transition:
 		outline
 			var(
@@ -40,7 +40,16 @@ $default-mobile-header-height: functions.to-rem(56);
 				#{var-todo.$db-transition-duration-ultra-fast}
 			),
 		background-color
-			var(--db-transition-color, #{var-todo.$db-transition-color}),
+			var(--db-transition-color, #{var-todo.$db-transition-color});
+}
+
+%default-fg-transition {
+	transition:
+		outline
+			var(
+				--db-transition-duration-ultra-fast,
+				#{var-todo.$db-transition-duration-ultra-fast}
+			),
 		color var(--db-transition-color, #{var-todo.$db-transition-color});
 }