diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 6b01d991ffb277..8a04587407e72c 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -26,6 +26,7 @@
 -   `TabPanel`: Add interaction backgrounds to unselected tabs, preserve keyboard focus rings, and size neutral vertical selection lines to the content ([#84572](https://github.com/WordPress/gutenberg/pull/84572)).
 -   `Popover`: Use the design-system stroke color, border width, radius, and background on the default surface. `Dropdown` and `DropdownMenu` pick this up through `Popover` ([#84574](https://github.com/WordPress/gutenberg/pull/84574)).
 -   `Snackbar`: Keep snackbars that have an action on screen for 10 seconds instead of 6 before they are dismissed automatically ([#84842](https://github.com/WordPress/gutenberg/pull/84842)).
+-   `Tabs`: Show the tab panel's focus ring with the design system's outline instead of a legacy box-shadow ([#84914](https://github.com/WordPress/gutenberg/pull/84914)).
 
 ### Deprecations
 
diff --git a/packages/components/src/tabs/style.module.scss b/packages/components/src/tabs/style.module.scss
index f677820448511b..d5e6af40d02415 100644
--- a/packages/components/src/tabs/style.module.scss
+++ b/packages/components/src/tabs/style.module.scss
@@ -1,4 +1,5 @@
 @use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/mixins" as *;
 @use "../utils/theme-variables" as *;
 
 .tab-list {
@@ -214,16 +215,11 @@
 
 .tab-panel {
 	&:focus {
-		box-shadow: none;
 		outline: none;
 	}
 
 	&[data-focus-visible] {
-		box-shadow:
-			0 0 0 var(--wp-admin-border-width-focus)
-			$components-color-accent;
-		// Windows high contrast mode.
-		outline: 2px solid transparent;
+		@include outset-ring__focus();
 		outline-offset: 0;
 	}
 }