diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css
index 12d713b..99f115a 100644
--- a/styles/10-components-interactive-elements.css
+++ b/styles/10-components-interactive-elements.css
@@ -164,13 +164,13 @@
     }
 
     .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button[aria-selected="true"] {
-      background: var(--surface-tab-selected);
-      color: var(--text-tab-selected);
+      background: var(--surface-tab-unselected);
+      color: var(--text-tab-unselected);
     }
 
     .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button[aria-selected="false"] {
-      background: var(--surface-tab-unselected);
-      color: var(--text-tab-unselected);
+      background: var(--surface-tab-selected);
+      color: var(--text-tab-selected);
     }
 
     .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="true"] {
@@ -179,8 +179,8 @@
     }
 
     .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="false"] {
-      background: var(--surface-tab-compact-unselected);
-      color: var(--text-control-default);
+      background: var(--surface-tab-selected);
+      color: var(--text-tab-selected);
     }
 
     .sg-tab-button-group[data-component-size="compact"] .sg-tab-button[aria-selected="false"] {