diff --git a/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap b/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
index 77822b5b9e..7b7d8fe323 100644
--- a/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
+++ b/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
@@ -97,10 +97,10 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
 
 .c4 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -230,7 +230,7 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
 }
 
 .c21 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -260,13 +260,13 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
 }
 
 .c21:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c21:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c21[disabled] {
@@ -360,7 +360,7 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -402,7 +402,7 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -917,10 +917,10 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
 
 .c4 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -1050,7 +1050,7 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
 }
 
 .c21 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1080,13 +1080,13 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
 }
 
 .c21:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c21:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c21[disabled] {
@@ -1180,7 +1180,7 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1222,7 +1222,7 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1649,10 +1649,10 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
 
 .c4 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -1782,7 +1782,7 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
 }
 
 .c21 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1812,13 +1812,13 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
 }
 
 .c21:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c21:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c21[disabled] {
@@ -1912,7 +1912,7 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1954,7 +1954,7 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/react/src/components/breadcrumb/breadcrumb.test.tsx.snap b/packages/react/src/components/breadcrumb/breadcrumb.test.tsx.snap
index 4ebcfae9cb..0728a407f0 100644
--- a/packages/react/src/components/breadcrumb/breadcrumb.test.tsx.snap
+++ b/packages/react/src/components/breadcrumb/breadcrumb.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
 {
   "asFragment": [Function],
-  "baseElement": .c4 {
+  "baseElement": .c7 {
   box-sizing: border-box;
   position: fixed;
   z-index: 100000;
@@ -63,14 +63,57 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
 }
 
 .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   margin: 0;
   max-width: 100%;
   padding: 0;
   white-space: nowrap;
 }
 
+.c4 {
+  color: #60666E;
+}
+
+.c4:hover {
+  color: #000000;
+}
+
+.c4[disabled] {
+  color: #B7BBC2;
+}
+
+.c6 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #1B1C1E;
+  margin: 0 var(--spacing-1x);
+}
+
+.c5 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #60666E;
+  margin: 0 var(--spacing-1x);
+}
+
 .c1 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 
@@ -79,11 +122,6 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
   text-decoration: underline;
 }
 
-.c1:not(:last-child)::after {
-  content: '/';
-  margin: 0 var(--spacing-1x);
-}
-
 <body>
     <div>
       <nav
@@ -96,34 +134,52 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
             class="c1"
           >
             <a
-              class="c2 c3"
+              class="c2 c3 c4"
               href="/index"
               tabindex="0"
             >
               HOME
             </a>
+            <svg
+              class="c5"
+              color="currentColor"
+              focusable="false"
+              height="20"
+              width="20"
+            />
           </li>
           <li
             class="c1"
           >
             <a
-              class="c2 c3"
+              class="c2 c3 c4"
               href="/route"
               tabindex="0"
             >
               ROUTE
             </a>
+            <svg
+              class="c5"
+              color="currentColor"
+              focusable="false"
+              height="20"
+              width="20"
+            />
           </li>
           <li
             class="c1"
           >
-            THREE
+            <span
+              class="c6"
+            >
+              THREE
+            </span>
           </li>
         </ol>
       </nav>
     </div>
     <div
-      class="c4"
+      class="c7"
       data-testid="toasts"
     />
   </body>,
@@ -179,14 +235,57 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
 }
 
 .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   margin: 0;
   max-width: 100%;
   padding: 0;
   white-space: nowrap;
 }
 
+.c4 {
+  color: #60666E;
+}
+
+.c4:hover {
+  color: #000000;
+}
+
+.c4[disabled] {
+  color: #B7BBC2;
+}
+
+.c6 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #1B1C1E;
+  margin: 0 var(--spacing-1x);
+}
+
+.c5 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #60666E;
+  margin: 0 var(--spacing-1x);
+}
+
 .c1 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 
@@ -195,11 +294,6 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
   text-decoration: underline;
 }
 
-.c1:not(:last-child)::after {
-  content: '/';
-  margin: 0 var(--spacing-1x);
-}
-
 <div>
     <nav
       aria-label="breadcrumb"
@@ -211,28 +305,46 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
           class="c1"
         >
           <a
-            class="c2 c3"
+            class="c2 c3 c4"
             href="/index"
             tabindex="0"
           >
             HOME
           </a>
+          <svg
+            class="c5"
+            color="currentColor"
+            focusable="false"
+            height="20"
+            width="20"
+          />
         </li>
         <li
           class="c1"
         >
           <a
-            class="c2 c3"
+            class="c2 c3 c4"
             href="/route"
             tabindex="0"
           >
             ROUTE
           </a>
+          <svg
+            class="c5"
+            color="currentColor"
+            focusable="false"
+            height="20"
+            width="20"
+          />
         </li>
         <li
           class="c1"
         >
-          THREE
+          <span
+            class="c6"
+          >
+            THREE
+          </span>
         </li>
       </ol>
     </nav>
@@ -294,7 +406,7 @@ exports[`Breadcrumb Snapshots Matches snapshot (Three or more entries) 1`] = `
 exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
 {
   "asFragment": [Function],
-  "baseElement": .c4 {
+  "baseElement": .c7 {
   box-sizing: border-box;
   position: fixed;
   z-index: 100000;
@@ -354,14 +466,57 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
 }
 
 .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   margin: 0;
   max-width: 100%;
   padding: 0;
   white-space: nowrap;
 }
 
+.c4 {
+  color: #60666E;
+}
+
+.c4:hover {
+  color: #000000;
+}
+
+.c4[disabled] {
+  color: #B7BBC2;
+}
+
+.c6 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #1B1C1E;
+  margin: 0 var(--spacing-1x);
+}
+
+.c5 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #60666E;
+  margin: 0 var(--spacing-1x);
+}
+
 .c1 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 
@@ -370,11 +525,6 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
   text-decoration: underline;
 }
 
-.c1:not(:last-child)::after {
-  content: '/';
-  margin: 0 var(--spacing-1x);
-}
-
 <body>
     <div>
       <nav
@@ -387,23 +537,34 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
             class="c1"
           >
             <a
-              class="c2 c3"
+              class="c2 c3 c4"
               href="/index"
               tabindex="0"
             >
               HOME
             </a>
+            <svg
+              class="c5"
+              color="currentColor"
+              focusable="false"
+              height="20"
+              width="20"
+            />
           </li>
           <li
             class="c1"
           >
-            ROUTE
+            <span
+              class="c6"
+            >
+              ROUTE
+            </span>
           </li>
         </ol>
       </nav>
     </div>
     <div
-      class="c4"
+      class="c7"
       data-testid="toasts"
     />
   </body>,
@@ -459,14 +620,57 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
 }
 
 .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   margin: 0;
   max-width: 100%;
   padding: 0;
   white-space: nowrap;
 }
 
+.c4 {
+  color: #60666E;
+}
+
+.c4:hover {
+  color: #000000;
+}
+
+.c4[disabled] {
+  color: #B7BBC2;
+}
+
+.c6 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #1B1C1E;
+  margin: 0 var(--spacing-1x);
+}
+
+.c5 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #60666E;
+  margin: 0 var(--spacing-1x);
+}
+
 .c1 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 
@@ -475,11 +679,6 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
   text-decoration: underline;
 }
 
-.c1:not(:last-child)::after {
-  content: '/';
-  margin: 0 var(--spacing-1x);
-}
-
 <div>
     <nav
       aria-label="breadcrumb"
@@ -491,17 +690,28 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
           class="c1"
         >
           <a
-            class="c2 c3"
+            class="c2 c3 c4"
             href="/index"
             tabindex="0"
           >
             HOME
           </a>
+          <svg
+            class="c5"
+            color="currentColor"
+            focusable="false"
+            height="20"
+            width="20"
+          />
         </li>
         <li
           class="c1"
         >
-          ROUTE
+          <span
+            class="c6"
+          >
+            ROUTE
+          </span>
         </li>
       </ol>
     </nav>
@@ -563,7 +773,7 @@ exports[`Breadcrumb Snapshots Matches snapshot (double entries) 1`] = `
 exports[`Breadcrumb Snapshots Matches snapshot (single entry) 1`] = `
 {
   "asFragment": [Function],
-  "baseElement": .c2 {
+  "baseElement": .c3 {
   box-sizing: border-box;
   position: fixed;
   z-index: 100000;
@@ -572,14 +782,37 @@ exports[`Breadcrumb Snapshots Matches snapshot (single entry) 1`] = `
 }
 
 .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   margin: 0;
   max-width: 100%;
   padding: 0;
   white-space: nowrap;
 }
 
+.c2 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #1B1C1E;
+  margin: 0 var(--spacing-1x);
+}
+
 .c1 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 
@@ -588,11 +821,6 @@ exports[`Breadcrumb Snapshots Matches snapshot (single entry) 1`] = `
   text-decoration: underline;
 }
 
-.c1:not(:last-child)::after {
-  content: '/';
-  margin: 0 var(--spacing-1x);
-}
-
 <body>
     <div>
       <nav
@@ -604,25 +832,52 @@ exports[`Breadcrumb Snapshots Matches snapshot (single entry) 1`] = `
           <li
             class="c1"
           >
-            HOME
+            <span
+              class="c2"
+            >
+              HOME
+            </span>
           </li>
         </ol>
       </nav>
     </div>
     <div
-      class="c2"
+      class="c3"
       data-testid="toasts"
     />
   </body>,
   "container": .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   margin: 0;
   max-width: 100%;
   padding: 0;
   white-space: nowrap;
 }
 
+.c2 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  color: #1B1C1E;
+  margin: 0 var(--spacing-1x);
+}
+
 .c1 {
-  display: inline-block;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   position: relative;
 }
 
@@ -631,11 +886,6 @@ exports[`Breadcrumb Snapshots Matches snapshot (single entry) 1`] = `
   text-decoration: underline;
 }
 
-.c1:not(:last-child)::after {
-  content: '/';
-  margin: 0 var(--spacing-1x);
-}
-
 <div>
     <nav
       aria-label="breadcrumb"
@@ -646,7 +896,11 @@ exports[`Breadcrumb Snapshots Matches snapshot (single entry) 1`] = `
         <li
           class="c1"
         >
-          HOME
+          <span
+            class="c2"
+          >
+            HOME
+          </span>
         </li>
       </ol>
     </nav>
diff --git a/packages/react/src/components/breadcrumb/breadcrumb.tsx b/packages/react/src/components/breadcrumb/breadcrumb.tsx
index a223e72c84..cd699372c3 100644
--- a/packages/react/src/components/breadcrumb/breadcrumb.tsx
+++ b/packages/react/src/components/breadcrumb/breadcrumb.tsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { eventIsInside } from '../../utils/events';
 import { IconButton } from '../buttons/icon-button';
+import { Icon } from '../icon/icon';
 import { NavList } from '../nav-list/nav-list';
 import { NavListOption } from '../nav-list/nav-list-option';
 import { RouteLink } from '../route-link/route-link';
@@ -16,24 +17,54 @@ interface BreadcrumbProps {
 }
 
 const StyledOL = styled.ol`
+    align-items: center;
+    display: inline-flex;
     margin: 0;
     max-width: 100%;
     padding: 0;
     white-space: nowrap;
 `;
 
+const StyledLink = styled(RouteLink)`
+    color: ${({ theme }) => theme.component['breadcrumb-link-color']};
+
+    &:hover {
+        color: ${({ theme }) => theme.component['breadcrumb-link-hover-color']};
+    }
+
+    &[disabled] {
+        color: ${({ theme }) => theme.component['breadcrumb-link-disabled-color']};
+    }
+`;
+
+const StyledActiveLink = styled.span`
+    align-self: center;
+    color: ${({ theme }) => theme.component['breadcrumb-link-active-color']};
+    margin: 0 var(--spacing-1x);
+`;
+
+const StyledSeparatorIcon = styled(Icon)`
+    align-self: center;
+    color: ${({ theme }) => theme.component['breadcrumb-separator-color']};
+    margin: 0 var(--spacing-1x);
+`;
+
 const StyledLi = styled.li`
-    display: inline-block;
+    align-items: center;
+    display: inline-flex;
     position: relative;
 
     & > a {
         text-decoration: underline;
     }
+`;
 
-    &:not(:last-child)::after {
-        content: '/';
-        margin: 0 var(--spacing-1x);
-    }
+const StyledListWrapper = styled.div`
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    white-space: nowrap;
+    z-index: 1;
 `;
 
 const StyledNavList = styled(NavList)`
@@ -110,39 +141,50 @@ export const Breadcrumb: VoidFunctionComponent<BreadcrumbProps> = ({ className,
             <StyledOL>
                 {leftShownRoutes.map((route) => (
                     <StyledLi>
-                        <RouteLink
+                        <StyledLink
                             data-testid={`breadcrumb-link-${route.value}`}
                             href={route.href}
                             routerLink={Link}
                             label={truncateLabel(route.label ?? '')}
+                            disabled={route.disabled}
                         />
+                        <StyledSeparatorIcon name="chevronRight" size="20" />
                     </StyledLi>
                 ))}
                 {showHiddenRoutes && (
                     <StyledLi>
-                        <StyledIconButton
-                            ref={buttonRef}
-                            aria-expanded={isOpen}
-                            type="button"
-                            data-testid="ellipse-button"
-                            buttonType="tertiary"
-                            iconName="moreHorizontal"
-                            label="breadcrumb-list"
-                            onClick={() => setOpen(!isOpen)}
-                        />
-                        <StyledNavList
-                            ordered
-                            data-testid="nav-list"
-                            ref={navListRef}
-                            hidden={!isOpen}
-                            focusedValue={focusedValue}
-                            onChange={() => setOpen(false)}
-                            onKeyDown={handleNavListKeyDown}
-                            options={hiddenRoutes}
-                        />
+                        <StyledListWrapper>
+                            <StyledIconButton
+                                ref={buttonRef}
+                                aria-expanded={isOpen}
+                                type="button"
+                                data-testid="ellipse-button"
+                                buttonType="tertiary"
+                                iconName="moreHorizontal"
+                                label="breadcrumb-list"
+                                onClick={() => setOpen(!isOpen)}
+                            />
+                            <StyledNavList
+                                ordered
+                                data-testid="nav-list"
+                                ref={navListRef}
+                                hidden={!isOpen}
+                                focusedValue={focusedValue}
+                                onChange={() => setOpen(false)}
+                                onKeyDown={handleNavListKeyDown}
+                                options={hiddenRoutes}
+                            />
+                        </StyledListWrapper>
+                        <StyledSeparatorIcon name="chevronRight" size="20" />
+                    </StyledLi>
+                )}
+                {showLastRoute && (
+                    <StyledLi>
+                        <StyledActiveLink>
+                            {truncateLabel(lastRoute.label ?? '')}
+                        </StyledActiveLink>
                     </StyledLi>
                 )}
-                {showLastRoute && <StyledLi>{truncateLabel(lastRoute.label ?? '')}</StyledLi>}
             </StyledOL>
         </nav>
     );
diff --git a/packages/react/src/components/buttons/button.test.tsx.snap b/packages/react/src/components/buttons/button.test.tsx.snap
index eac1ba822e..6b23f18253 100644
--- a/packages/react/src/components/buttons/button.test.tsx.snap
+++ b/packages/react/src/components/buttons/button.test.tsx.snap
@@ -800,14 +800,14 @@ exports[`Button has primary styles (inverted) 1`] = `
 
 .c1:hover,
 .c1[aria-expanded='true'] {
-  background-color: #FFFFFF;
-  border-color: #FFFFFF;
+  background-color: #84C6EA;
+  border-color: #84C6EA;
   color: #003A5A;
 }
 
 .c1:disabled {
-  background-color: #FFFFFF;
-  border-color: #FFFFFF;
+  background-color: #006296;
+  border-color: #006296;
   color: #84C6EA;
 }
 
@@ -1070,7 +1070,7 @@ exports[`Button has secondary styles 1`] = `
 }
 
 .c1 {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #006296;
   color: #006296;
 }
@@ -1088,13 +1088,13 @@ exports[`Button has secondary styles 1`] = `
 
 .c1:hover,
 .c1[aria-expanded='true'] {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #003A5A;
   color: #003A5A;
 }
 
 .c1:disabled {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
@@ -1474,7 +1474,7 @@ exports[`Button has tertiary styles 1`] = `
 .c1[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c1:disabled {
diff --git a/packages/react/src/components/buttons/icon-button.test.tsx.snap b/packages/react/src/components/buttons/icon-button.test.tsx.snap
index 89e31976b7..e057a07254 100644
--- a/packages/react/src/components/buttons/icon-button.test.tsx.snap
+++ b/packages/react/src/components/buttons/icon-button.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`Icon Button Has destructive-secondary styles 1`] = `
 }
 
 .c1 {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #CD2C23;
   color: #CD2C23;
   padding: 0;
@@ -79,13 +79,13 @@ exports[`Icon Button Has destructive-secondary styles 1`] = `
 
 .c1:hover,
 .c1[aria-expanded='true'] {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #7B1A15;
   color: #7B1A15;
 }
 
 .c1:disabled {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #F99D99;
   color: #F99D99;
 }
@@ -500,7 +500,7 @@ exports[`Icon Button Has secondary styles 1`] = `
 }
 
 .c1 {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #006296;
   color: #006296;
   padding: 0;
@@ -520,13 +520,13 @@ exports[`Icon Button Has secondary styles 1`] = `
 
 .c1:hover,
 .c1[aria-expanded='true'] {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #003A5A;
   color: #003A5A;
 }
 
 .c1:disabled {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
@@ -743,7 +743,7 @@ exports[`Icon Button Has tertiary styles 1`] = `
 .c1[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c1:disabled {
diff --git a/packages/react/src/components/carousel/carousel.test.tsx.snap b/packages/react/src/components/carousel/carousel.test.tsx.snap
index 0c7c8893df..6bc71b1d63 100644
--- a/packages/react/src/components/carousel/carousel.test.tsx.snap
+++ b/packages/react/src/components/carousel/carousel.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`Carousel should match snapshot 1`] = `
 .c2[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c2:disabled {
diff --git a/packages/react/src/components/carousel/carousel.tsx b/packages/react/src/components/carousel/carousel.tsx
index e03266d4a7..0cc8ac0827 100644
--- a/packages/react/src/components/carousel/carousel.tsx
+++ b/packages/react/src/components/carousel/carousel.tsx
@@ -57,7 +57,7 @@ interface DotProps {
 }
 
 const Dot = styled.button<DotProps>`
-    background-color: ${({ active, theme }) => (active ? theme.component['carousel-dot-active-background-color'] : theme.component['carousel-dot-inactive-background-color'])};
+    background-color: ${({ active, theme }) => (active ? theme.component['carousel-dot-selected-background-color'] : theme.component['carousel-dot-unselected-background-color'])};
     border: 1px solid  ${({ theme }) => theme.component['carousel-dot-border-color']};
     border-radius: 50%;
     box-sizing: border-box;
diff --git a/packages/react/src/components/checkbox-group/checkbox-group.test.tsx.snap b/packages/react/src/components/checkbox-group/checkbox-group.test.tsx.snap
index 2746424218..c3f204bc56 100644
--- a/packages/react/src/components/checkbox-group/checkbox-group.test.tsx.snap
+++ b/packages/react/src/components/checkbox-group/checkbox-group.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`Checkbox Matches the snapshot 1`] = `
 
 .c3:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c1 {
@@ -176,7 +176,7 @@ exports[`Checkbox Matches the snapshot 1`] = `
 
 .c3:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c1 {
@@ -290,7 +290,7 @@ exports[`Checkbox Matches the snapshot 1`] = `
   -ms-flex-item-align: center;
   align-self: center;
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
   border-radius: var(--border-radius);
   box-sizing: border-box;
   display: inline-block;
@@ -303,7 +303,7 @@ exports[`Checkbox Matches the snapshot 1`] = `
 
 .c3:hover {
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
 }
 
 .c1 {
@@ -432,7 +432,7 @@ exports[`Checkbox Matches the snapshot 1`] = `
 
 .c3:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c1 {
diff --git a/packages/react/src/components/checkbox/checkbox.test.tsx.snap b/packages/react/src/components/checkbox/checkbox.test.tsx.snap
index 7317b5d41c..2990c5b193 100644
--- a/packages/react/src/components/checkbox/checkbox.test.tsx.snap
+++ b/packages/react/src/components/checkbox/checkbox.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`Checkbox matches snapshot 1`] = `
 
 .c3:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c1 {
diff --git a/packages/react/src/components/chooser-button-group/chooser-button-group.test.tsx.snap b/packages/react/src/components/chooser-button-group/chooser-button-group.test.tsx.snap
index b71204c154..34d88aac2a 100644
--- a/packages/react/src/components/chooser-button-group/chooser-button-group.test.tsx.snap
+++ b/packages/react/src/components/chooser-button-group/chooser-button-group.test.tsx.snap
@@ -34,8 +34,8 @@ exports[`Chooser Button GroupItem Matches the snapshot 1`] = `
 
 .c3:hover {
   background: #DBDEE1;
-  border-color: #1B1C1E;
-  color: #1B1C1E;
+  border-color: #000000;
+  color: #000000;
 }
 
 input[type='checkbox']:checked + .c2,
@@ -165,8 +165,8 @@ input[type='radio']:disabled + .c3 {
 
 .c3:hover {
   background: #DBDEE1;
-  border-color: #1B1C1E;
-  color: #1B1C1E;
+  border-color: #000000;
+  color: #000000;
 }
 
 input[type='checkbox']:checked + .c2,
diff --git a/packages/react/src/components/chooser-button/chooser-button.test.tsx.snap b/packages/react/src/components/chooser-button/chooser-button.test.tsx.snap
index 61ffe3e915..7240fc5f4d 100644
--- a/packages/react/src/components/chooser-button/chooser-button.test.tsx.snap
+++ b/packages/react/src/components/chooser-button/chooser-button.test.tsx.snap
@@ -53,8 +53,8 @@ exports[`Chooser Button Matches the snapshot 1`] = `
 
 .c1:hover {
   background: #DBDEE1;
-  border-color: #1B1C1E;
-  color: #1B1C1E;
+  border-color: #000000;
+  color: #000000;
 }
 
 input[type='checkbox']:checked + .c0,
diff --git a/packages/react/src/components/combobox/combobox.test.tsx.snap b/packages/react/src/components/combobox/combobox.test.tsx.snap
index f66b0ab0b5..1af32de0cf 100644
--- a/packages/react/src/components/combobox/combobox.test.tsx.snap
+++ b/packages/react/src/components/combobox/combobox.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`Combobox matches the snapshot (disabled) 1`] = `
 .c7[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c7:disabled {
@@ -111,7 +111,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -136,7 +136,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -538,7 +538,7 @@ exports[`Combobox matches the snapshot (invalid) 1`] = `
 .c9[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c9:disabled {
@@ -616,7 +616,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -641,7 +641,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1057,7 +1057,7 @@ exports[`Combobox matches the snapshot (mobile) 1`] = `
 .c5[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c5:disabled {
@@ -1089,7 +1089,7 @@ exports[`Combobox matches the snapshot (mobile) 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1114,7 +1114,7 @@ exports[`Combobox matches the snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1506,7 +1506,7 @@ exports[`Combobox matches the snapshot 1`] = `
 .c8[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c8:disabled {
@@ -1570,7 +1570,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1595,7 +1595,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/react/src/components/date-picker/date-picker.test.tsx.snap b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
index 4ae3f7e6ec..0402447462 100644
--- a/packages/react/src/components/date-picker/date-picker.test.tsx.snap
+++ b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
@@ -109,7 +109,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -124,7 +124,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -227,7 +227,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 1rem;
   -webkit-letter-spacing: 0.02875rem;
@@ -265,8 +265,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -333,7 +333,7 @@ label + .c3 {
 .c7:disabled:focus,
 .c7:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -500,7 +500,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -515,7 +515,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -618,7 +618,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -656,8 +656,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -724,7 +724,7 @@ label + .c3 {
 .c7:disabled:focus,
 .c7:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -893,7 +893,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -908,7 +908,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -1011,7 +1011,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -1049,8 +1049,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -1117,7 +1117,7 @@ label + .c3 {
 .c7:disabled:focus,
 .c7:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -1286,7 +1286,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -1301,7 +1301,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -1404,7 +1404,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -1442,8 +1442,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -1510,7 +1510,7 @@ label + .c3 {
 .c7:disabled:focus,
 .c7:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -1707,7 +1707,7 @@ input + .c1 {
 
 .c6 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -1722,7 +1722,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -1825,7 +1825,7 @@ label + .c5 {
   border: 1px solid #CD2C23;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -1863,8 +1863,8 @@ label + .c5 {
 
 .c7.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c7.datePickerInput:disabled,
@@ -1931,7 +1931,7 @@ label + .c5 {
 .c9:disabled:focus,
 .c9:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -2116,7 +2116,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -2131,7 +2131,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -2234,7 +2234,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 1rem;
   -webkit-letter-spacing: 0.02875rem;
@@ -2272,8 +2272,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -2340,7 +2340,7 @@ label + .c3 {
 .c7:disabled:focus,
 .c7:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -2479,7 +2479,7 @@ exports[`Datepicker matches snapshot (open, desktop) 1`] = `
 .c8[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c8:disabled {
@@ -2674,7 +2674,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -2689,7 +2689,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -2792,7 +2792,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -2830,8 +2830,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -2898,7 +2898,7 @@ label + .c3 {
 .c17:disabled:focus,
 .c17:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -3743,7 +3743,7 @@ exports[`Datepicker matches snapshot (open, hasTodayButton) 1`] = `
 .c8[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c8:disabled {
@@ -3758,7 +3758,7 @@ exports[`Datepicker matches snapshot (open, hasTodayButton) 1`] = `
 }
 
 .c18 {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #006296;
   color: #006296;
 }
@@ -3776,13 +3776,13 @@ exports[`Datepicker matches snapshot (open, hasTodayButton) 1`] = `
 
 .c18:hover,
 .c18[aria-expanded='true'] {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #003A5A;
   color: #003A5A;
 }
 
 .c18:disabled {
-  background-color: #FFFFFF;
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
@@ -3968,7 +3968,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -3983,7 +3983,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -4086,7 +4086,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -4124,8 +4124,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -4198,7 +4198,7 @@ label + .c3 {
 .c19:disabled:focus,
 .c19:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -5055,7 +5055,7 @@ exports[`Datepicker matches snapshot (open, mobile) 1`] = `
 .c8[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c8:disabled {
@@ -5250,7 +5250,7 @@ input + .c1 {
 
 .c4 .react-datepicker {
   background-color: #FFFFFF;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #878F9A;
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   font-family: var(--font-family);
   padding: var(--spacing-3x) var(--spacing-2x);
@@ -5265,7 +5265,7 @@ input + .c1 {
   border: 1px solid transparent;
   border-radius: 50%;
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   height: var(--size-2x);
   line-height: 1.875rem;
   margin: 0;
@@ -5368,7 +5368,7 @@ label + .c3 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 1rem;
   -webkit-letter-spacing: 0.02875rem;
@@ -5406,8 +5406,8 @@ label + .c3 {
 
 .c5.datePickerInput:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5.datePickerInput:disabled,
@@ -5474,7 +5474,7 @@ label + .c3 {
 .c17:disabled:focus,
 .c17:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
index c67260b29b..4eed643782 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
+++ b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
@@ -39,7 +39,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -64,7 +64,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -102,7 +102,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -483,7 +483,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -508,7 +508,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -546,7 +546,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -961,7 +961,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -986,7 +986,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1024,7 +1024,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1389,7 +1389,7 @@ exports[`Dropdown list matches the snapshot (mobile) 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1414,7 +1414,7 @@ exports[`Dropdown list matches the snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1451,7 +1451,7 @@ exports[`Dropdown list matches the snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1792,7 +1792,7 @@ exports[`Dropdown list matches the snapshot (multiselect) 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1842,7 +1842,7 @@ exports[`Dropdown list matches the snapshot (multiselect) 1`] = `
 
 .c9:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c9 > .c10 {
@@ -1854,7 +1854,7 @@ exports[`Dropdown list matches the snapshot (multiselect) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2385,7 +2385,7 @@ input + .c2 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2410,7 +2410,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2448,7 +2448,7 @@ input + .c2 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
index f6aa427bbe..876c8bfa47 100644
--- a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
+++ b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
@@ -171,7 +171,7 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
 }
 
 .c15 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -201,13 +201,13 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
 }
 
 .c15:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c15:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c15[disabled] {
@@ -273,7 +273,7 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -315,7 +315,7 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -384,10 +384,10 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
 
 .c5 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -834,7 +834,7 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
 }
 
 .c15 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -864,13 +864,13 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
 }
 
 .c15:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c15:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c15[disabled] {
@@ -936,7 +936,7 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -978,7 +978,7 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1047,10 +1047,10 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
 
 .c5 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
diff --git a/packages/react/src/components/dropdown-menu/dropdown-menu.test.tsx.snap b/packages/react/src/components/dropdown-menu/dropdown-menu.test.tsx.snap
index 7ef397642a..164f593b58 100644
--- a/packages/react/src/components/dropdown-menu/dropdown-menu.test.tsx.snap
+++ b/packages/react/src/components/dropdown-menu/dropdown-menu.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`DropdownMenu Is hidden 1`] = `
 .c0 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -96,7 +96,7 @@ exports[`DropdownMenu Is hidden 1`] = `
 }
 
 .c8 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -126,13 +126,13 @@ exports[`DropdownMenu Is hidden 1`] = `
 }
 
 .c8:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c8:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c8[disabled] {
@@ -198,7 +198,7 @@ exports[`DropdownMenu Is hidden 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -413,10 +413,10 @@ exports[`DropdownMenu Is hidden 1`] = `
 exports[`DropdownMenu Matches the snapshot 1`] = `
 .c0 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -506,7 +506,7 @@ exports[`DropdownMenu Matches the snapshot 1`] = `
 }
 
 .c8 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -536,13 +536,13 @@ exports[`DropdownMenu Matches the snapshot 1`] = `
 }
 
 .c8:visited {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c8:visited svg {
-  color: #000000;
-  fill: #000000;
+  color: #602FA0;
+  fill: #602FA0;
 }
 
 .c8[disabled] {
@@ -608,7 +608,7 @@ exports[`DropdownMenu Matches the snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/react/src/components/dropdown-menu/list-items/external-item.tsx b/packages/react/src/components/dropdown-menu/list-items/external-item.tsx
index 399da6216d..f0c0923ec7 100644
--- a/packages/react/src/components/dropdown-menu/list-items/external-item.tsx
+++ b/packages/react/src/components/dropdown-menu/list-items/external-item.tsx
@@ -34,17 +34,17 @@ export const StyledExternalLink = styled(ExternalLink)<ExternalItemsStyledProps>
 
     &:visited {
         color: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-text-color']};
-        fill: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-fill-color']};
+        fill: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-icon-color']};
 
         svg {
-            color: ${({ theme }) => theme.component['dropdown-menu-external-item-icon-visited-text-color']};
-            fill: ${({ theme }) => theme.component['dropdown-menu-external-item-icon-visited-fill-color']};
+            color: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-icon-color']};
+            fill: ${({ theme }) => theme.component['dropdown-menu-external-item-visited-icon-color']};
         }
     }
 
     &[disabled] {
         color: ${({ theme }) => theme.component['dropdown-menu-external-item-disabled-text-color']};
-        fill: ${({ theme }) => theme.component['dropdown-menu-external-item-disabled-fill-color']};
+        fill: ${({ theme }) => theme.component['dropdown-menu-external-item-disabled-text-color']};
         pointer-events: none;
     }
 `;
diff --git a/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx b/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx
index 0a513e4444..38f87882f5 100644
--- a/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx
+++ b/packages/react/src/components/dropdown-menu/list-items/nav-item.tsx
@@ -45,7 +45,7 @@ const NavItemStyle = css<LinkProps>`
     ${({ theme }) => focus({ theme }, { insideOnly: true })};
 
     &:hover {
-        background-color: ${({ disabled, theme }) => (disabled ? theme.component['dropdown-menu-nav-item-hover-disabled-background-color'] : theme.component['dropdown-menu-nav-item-hover-background-color'])};
+        background-color: ${({ disabled, theme }) => (disabled ? theme.component['dropdown-menu-nav-item-disabled-background-color'] : theme.component['dropdown-menu-nav-item-hover-background-color'])};
     }
 
     &[disabled],
diff --git a/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap b/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap
index e0a019b21b..252ba7ea2a 100644
--- a/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap
+++ b/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap
@@ -136,7 +136,7 @@ exports[`DropdownNavigation Matches Snapshot (defaultOpen) 1`] = `
 
 .c5 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   list-style-type: none;
@@ -399,7 +399,7 @@ exports[`DropdownNavigation Matches Snapshot (tag="nav") 1`] = `
 
 .c5 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   list-style-type: none;
@@ -663,7 +663,7 @@ exports[`DropdownNavigation Matches Snapshot 1`] = `
 
 .c5 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   list-style-type: none;
diff --git a/packages/react/src/components/global-banner/global-banner.test.tsx.snap b/packages/react/src/components/global-banner/global-banner.test.tsx.snap
index 4de5c9b549..38e0d74166 100644
--- a/packages/react/src/components/global-banner/global-banner.test.tsx.snap
+++ b/packages/react/src/components/global-banner/global-banner.test.tsx.snap
@@ -173,8 +173,8 @@ exports[`GlobalBanner matches snapshot (desktop, alert) 1`] = `
 }
 
 .c7:hover {
-  border-color: #F99D99;
-  color: #F99D99;
+  border-color: rgb(255 255 255 / 0.5);
+  color: rgb(255 255 255 / 0.5);
 }
 
 <section
@@ -423,18 +423,8 @@ exports[`GlobalBanner matches snapshot (desktop, discovery) 1`] = `
 }
 
 .c7:hover {
-  border-color: #CFC1E3;
-  color: #CFC1E3;
-}
-
-.c9 {
-  background-color: transparent;
-  color: #FFFFFF;
-}
-
-.c9:hover {
-  background-color: #3A1C60;
-  color: #FFFFFF;
+  border-color: rgb(255 255 255 / 0.5);
+  color: rgb(255 255 255 / 0.5);
 }
 
 <section
@@ -477,7 +467,7 @@ exports[`GlobalBanner matches snapshot (desktop, discovery) 1`] = `
       Test button
     </button>
     <button
-      class="c5 c8 c9"
+      class="c5 c8 "
       data-testid="dismiss-button"
       type="button"
     >
@@ -690,18 +680,8 @@ exports[`GlobalBanner matches snapshot (desktop, neutral) 1`] = `
 }
 
 .c7:hover {
-  border-color: #B7BBC2;
-  color: #B7BBC2;
-}
-
-.c9 {
-  background-color: transparent;
-  color: #FFFFFF;
-}
-
-.c9:hover {
-  background-color: #36393D;
-  color: #FFFFFF;
+  border-color: rgb(255 255 255 / 0.5);
+  color: rgb(255 255 255 / 0.5);
 }
 
 <section
@@ -744,7 +724,7 @@ exports[`GlobalBanner matches snapshot (desktop, neutral) 1`] = `
       Test button
     </button>
     <button
-      class="c5 c8 c9"
+      class="c5 c8 "
       data-testid="dismiss-button"
       type="button"
     >
@@ -845,7 +825,7 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
 .c8 {
   background-color: transparent;
   border-color: transparent;
-  color: #FFFFFF;
+  color: #60666E;
 }
 
 .c8 {
@@ -854,22 +834,22 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
 }
 
 .c8:focus {
-  box-shadow: 0 0 0 2px #84C6EA;
-  outline: 2px solid #006296;
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
 .c8:hover,
 .c8[aria-expanded='true'] {
-  background-color: rgb(0 0 0 / 0.5);
+  background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #FFFFFF;
+  color: #000000;
 }
 
 .c8:disabled {
   background-color: transparent;
   border-color: transparent;
-  color: #006296;
+  color: #B7BBC2;
 }
 
 .c0 {
@@ -957,17 +937,11 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
 }
 
 .c7:hover {
-  border-color: #9E6900;
-  color: #9E6900;
+  border-color: rgb(0 0 0 / 0.6);
+  color: rgb(0 0 0 / 0.6);
 }
 
 .c9 {
-  background-color: transparent;
-  color: #1B1C1E;
-}
-
-.c9:hover {
-  background-color: #C78500;
   color: #1B1C1E;
 }
 
@@ -1198,8 +1172,8 @@ exports[`GlobalBanner matches snapshot (mobile, alert) 1`] = `
 }
 
 .c7:hover {
-  border-color: #F99D99;
-  color: #F99D99;
+  border-color: rgb(255 255 255 / 0.5);
+  color: rgb(255 255 255 / 0.5);
 }
 
 <section
@@ -1452,18 +1426,8 @@ exports[`GlobalBanner matches snapshot (mobile, discovery) 1`] = `
 }
 
 .c7:hover {
-  border-color: #CFC1E3;
-  color: #CFC1E3;
-}
-
-.c9 {
-  background-color: transparent;
-  color: #FFFFFF;
-}
-
-.c9:hover {
-  background-color: #3A1C60;
-  color: #FFFFFF;
+  border-color: rgb(255 255 255 / 0.5);
+  color: rgb(255 255 255 / 0.5);
 }
 
 <section
@@ -1506,7 +1470,7 @@ exports[`GlobalBanner matches snapshot (mobile, discovery) 1`] = `
       Test button
     </button>
     <button
-      class="c5 c8 c9"
+      class="c5 c8 "
       data-testid="dismiss-button"
       type="button"
     >
@@ -1723,18 +1687,8 @@ exports[`GlobalBanner matches snapshot (mobile, neutral) 1`] = `
 }
 
 .c7:hover {
-  border-color: #B7BBC2;
-  color: #B7BBC2;
-}
-
-.c9 {
-  background-color: transparent;
-  color: #FFFFFF;
-}
-
-.c9:hover {
-  background-color: #36393D;
-  color: #FFFFFF;
+  border-color: rgb(255 255 255 / 0.5);
+  color: rgb(255 255 255 / 0.5);
 }
 
 <section
@@ -1777,7 +1731,7 @@ exports[`GlobalBanner matches snapshot (mobile, neutral) 1`] = `
       Test button
     </button>
     <button
-      class="c5 c8 c9"
+      class="c5 c8 "
       data-testid="dismiss-button"
       type="button"
     >
@@ -1878,7 +1832,7 @@ exports[`GlobalBanner matches snapshot (mobile, warning) 1`] = `
 .c8 {
   background-color: transparent;
   border-color: transparent;
-  color: #FFFFFF;
+  color: #60666E;
 }
 
 .c8 {
@@ -1887,22 +1841,22 @@ exports[`GlobalBanner matches snapshot (mobile, warning) 1`] = `
 }
 
 .c8:focus {
-  box-shadow: 0 0 0 2px #84C6EA;
-  outline: 2px solid #006296;
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
 .c8:hover,
 .c8[aria-expanded='true'] {
-  background-color: rgb(0 0 0 / 0.5);
+  background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #FFFFFF;
+  color: #000000;
 }
 
 .c8:disabled {
   background-color: transparent;
   border-color: transparent;
-  color: #006296;
+  color: #B7BBC2;
 }
 
 .c0 {
@@ -1994,17 +1948,11 @@ exports[`GlobalBanner matches snapshot (mobile, warning) 1`] = `
 }
 
 .c7:hover {
-  border-color: #9E6900;
-  color: #9E6900;
+  border-color: rgb(0 0 0 / 0.6);
+  color: rgb(0 0 0 / 0.6);
 }
 
 .c9 {
-  background-color: transparent;
-  color: #1B1C1E;
-}
-
-.c9:hover {
-  background-color: #C78500;
   color: #1B1C1E;
 }
 
diff --git a/packages/react/src/components/global-banner/global-banner.tsx b/packages/react/src/components/global-banner/global-banner.tsx
index 38100364cb..16eddff551 100644
--- a/packages/react/src/components/global-banner/global-banner.tsx
+++ b/packages/react/src/components/global-banner/global-banner.tsx
@@ -2,7 +2,6 @@ import {
     forwardRef,
     MouseEvent,
     MouseEventHandler,
-    PropsWithChildren,
     ReactElement,
     ReactNode,
     Ref,
@@ -132,32 +131,10 @@ const ActionButton = styled(Button).attrs(
     }
 `;
 
-interface DismissButtonProps {
-    bannerType: Exclude<GlobalBannerType, 'alert'>;
-}
-
-function getDismissButtonColors(
-    { bannerType, theme }: StyledProps<ActionButtonProps>,
-    state: GlobalBannerButtonState,
-): FlattenSimpleInterpolation | null {
-    const statePrefix = state === 'hover' ? '-hover' : '';
-    if (bannerType !== 'alert') {
-        return css`
-            background-color: ${theme.component[`global-banner-${bannerType}-dismiss-button${statePrefix}-background-color`]};
-            color: ${theme.component[`global-banner-${bannerType}-dismiss-button${statePrefix}-text-color`]};
-        `;
-    }
-    return null;
-}
-
-const DismissButton = styled(Button).attrs(
-    { buttonType: 'tertiary', inverted: true },
-)<PropsWithChildren<DismissButtonProps>>`
-    ${(props) => getDismissButtonColors(props, 'default')};
-
-    &:hover {
-        ${(props) => getDismissButtonColors(props, 'hover')};
-    }
+const StyledButton = styled(Button)<{ bannerType: GlobalBannerType }>`
+    ${({ bannerType, theme }) => (
+        bannerType === 'warning' ? `color: ${theme.component['global-banner-warning-action-button-text-color']};` : ''
+    )};
 `;
 
 interface GlobalBannerProps {
@@ -242,25 +219,29 @@ export const GlobalBanner = forwardRef(({
                     )}
 
                     {secondaryActionButton && type !== 'alert' && (
-                        <DismissButton
+                        <StyledButton
                             data-testid="secondary-action-button"
+                            buttonType="tertiary"
                             bannerType={type}
+                            inverted={type !== 'warning'}
                             onClick={secondaryActionButton.onClick}
                             type="button"
                         >
                             {secondaryActionButton.label}
-                        </DismissButton>
+                        </StyledButton>
                     )}
 
                     {hasDismissButton && (
-                        <DismissButton
+                        <StyledButton
                             data-testid="dismiss-button"
+                            buttonType="tertiary"
                             bannerType={type}
+                            inverted={type !== 'warning'}
                             onClick={handleDismiss}
                             type="button"
                         >
                             {t('ignore')}
-                        </DismissButton>
+                        </StyledButton>
                     )}
                 </ButtonContainer>
             )}
diff --git a/packages/react/src/components/global-header/global-header.test.tsx.snap b/packages/react/src/components/global-header/global-header.test.tsx.snap
index 3043f7df41..ea1ffa78cd 100644
--- a/packages/react/src/components/global-header/global-header.test.tsx.snap
+++ b/packages/react/src/components/global-header/global-header.test.tsx.snap
@@ -193,7 +193,7 @@ exports[`Global Header Matches the snapshot (mobile) 1`] = `
 
 .c6 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 56px);
   right: 0;
   overflow-x: hidden;
@@ -412,7 +412,7 @@ exports[`Global Header mobileDrawerContent prop adds a side drawer and burger bu
 
 .c6 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 56px);
   right: 0;
   overflow-x: hidden;
diff --git a/packages/react/src/components/listbox/listbox.test.tsx.snap b/packages/react/src/components/listbox/listbox.test.tsx.snap
index 8daf139128..6cbe51928d 100644
--- a/packages/react/src/components/listbox/listbox.test.tsx.snap
+++ b/packages/react/src/components/listbox/listbox.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -66,7 +66,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
 
 .c4:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c10 {
@@ -93,7 +93,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
 
 .c10:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c10 > .c5 {
@@ -106,7 +106,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
   border-radius: var(--border-radius);
   box-sizing: border-box;
   display: -webkit-box;
@@ -124,7 +124,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
 
 .c12:hover {
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
 }
 
 .c12 > .c5 {
@@ -136,7 +136,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -168,7 +168,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -214,7 +214,7 @@ exports[`Listbox Matches the snapshot (multiselect) 1`] = `
 }
 
 .c11:hover {
-  background-color: #FFFFFF;
+  background-color: transparent;
 }
 
 .c7 {
@@ -386,7 +386,7 @@ exports[`Listbox Matches the snapshot 1`] = `
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
   border-radius: var(--border-radius);
-  box-shadow: 0 0 0 1px #DBDEE1,0 10px 20px 0 rgb(0 0 0 / 0.2);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -422,7 +422,7 @@ exports[`Listbox Matches the snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -449,7 +449,7 @@ exports[`Listbox Matches the snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -504,7 +504,7 @@ exports[`Listbox Matches the snapshot 1`] = `
 }
 
 .c6:hover {
-  background-color: #FFFFFF;
+  background-color: transparent;
 }
 
 .c3 {
diff --git a/packages/react/src/components/listbox/listbox.tsx b/packages/react/src/components/listbox/listbox.tsx
index f5640bd563..67f1a07240 100644
--- a/packages/react/src/components/listbox/listbox.tsx
+++ b/packages/react/src/components/listbox/listbox.tsx
@@ -95,7 +95,7 @@ const Container = styled.div<ContainerProps>`
     background-color: ${({ theme }) => theme.component['listbox-background-color']};
     border: 1px solid ${({ theme }) => theme.component['listbox-border-color']};
     border-radius: var(--border-radius);
-    box-shadow: 0 0 0 1px ${({ theme }) => theme.component['listbox-box-shadow-frame-color']}, 0 10px 20px 0 ${({ theme }) => theme.component['listbox-box-shadow-depth-color']};
+    box-shadow: 0 10px 20px 0 ${({ theme }) => theme.component['listbox-box-shadow-depth-color']};
     display: flex;
     max-height: 160px;
     overflow-y: auto;
@@ -195,7 +195,7 @@ const ListItemTextContainer = styled.span`
 `;
 
 const ListItemCaption = styled.span<{ $disabled?: boolean, $isMobile: boolean }>`
-    color: ${({ $disabled, theme }) => ($disabled ? theme.component['listbox-item-caption-disabled-text-color'] : theme.component['listbox-item-caption-text-color'])};
+    color: ${({ $disabled, theme }) => ($disabled ? theme.component['listbox-item-subcontent-disabled-text-color'] : theme.component['listbox-item-subcontent-text-color'])};
     display: block;
     font-size: ${({ $isMobile }) => ($isMobile ? '0.875rem' : '0.75rem')};
 `;
diff --git a/packages/react/src/components/modal/modal-dialog.test.tsx.snap b/packages/react/src/components/modal/modal-dialog.test.tsx.snap
index c5016eba86..3a51ed88bc 100644
--- a/packages/react/src/components/modal/modal-dialog.test.tsx.snap
+++ b/packages/react/src/components/modal/modal-dialog.test.tsx.snap
@@ -163,7 +163,7 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
 .c14[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c14:disabled {
@@ -206,7 +206,7 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
 .c10[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c10:disabled {
@@ -512,7 +512,7 @@ exports[`Modal-Dialog Matches snapshot (custom footer content) 1`] = `
 .c8[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c8:disabled {
@@ -812,7 +812,7 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
 .c14[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c14:disabled {
@@ -855,7 +855,7 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
 .c10[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c10:disabled {
@@ -1218,7 +1218,7 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
 .c14[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c14:disabled {
@@ -1261,7 +1261,7 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
 .c10[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c10:disabled {
@@ -1566,7 +1566,7 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = `
 .c13[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c13:disabled {
@@ -1609,7 +1609,7 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = `
 .c10[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c10:disabled {
diff --git a/packages/react/src/components/modal/modal.test.tsx.snap b/packages/react/src/components/modal/modal.test.tsx.snap
index 21b093cd7e..f763faf835 100644
--- a/packages/react/src/components/modal/modal.test.tsx.snap
+++ b/packages/react/src/components/modal/modal.test.tsx.snap
@@ -284,7 +284,7 @@ exports[`Modal Matches snapshot (noPadding) 1`] = `
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -488,7 +488,7 @@ exports[`Modal Matches snapshot (opened, desktop) 1`] = `
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -691,7 +691,7 @@ exports[`Modal Matches snapshot (opened, mobile) 1`] = `
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
diff --git a/packages/react/src/components/modal/modal.tsx b/packages/react/src/components/modal/modal.tsx
index 8f642b4797..8d588319b9 100644
--- a/packages/react/src/components/modal/modal.tsx
+++ b/packages/react/src/components/modal/modal.tsx
@@ -171,7 +171,7 @@ export const Modal: FunctionComponent<PropsWithChildren<ModalProps>> = ({
     const customStyles = {
         overlay: {
             alignItems: 'center',
-            backgroundColor: theme.component['modal-overlay-background-color'],
+            backgroundColor: theme.component['modal-backdrop-background-color'],
             display: 'flex',
             justifyContent: 'center',
             zIndex: 10000,
diff --git a/packages/react/src/components/money-input/money-input.test.tsx.snap b/packages/react/src/components/money-input/money-input.test.tsx.snap
index a906a08815..8f48aa6938 100644
--- a/packages/react/src/components/money-input/money-input.test.tsx.snap
+++ b/packages/react/src/components/money-input/money-input.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`CurrencyInput Component matches snapshot (en-CA) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -53,8 +53,8 @@ exports[`CurrencyInput Component matches snapshot (en-CA) 1`] = `
 
 .c2:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c2:disabled,
@@ -133,7 +133,7 @@ exports[`CurrencyInput Component matches snapshot (en-US) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -166,8 +166,8 @@ exports[`CurrencyInput Component matches snapshot (en-US) 1`] = `
 
 .c2:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c2:disabled,
@@ -246,7 +246,7 @@ exports[`CurrencyInput Component matches snapshot (fr-CA) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -279,8 +279,8 @@ exports[`CurrencyInput Component matches snapshot (fr-CA) 1`] = `
 
 .c2:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c2:disabled,
diff --git a/packages/react/src/components/nav-list/nav-list.test.tsx.snap b/packages/react/src/components/nav-list/nav-list.test.tsx.snap
index 5ba705d0ed..4c0b6e416c 100644
--- a/packages/react/src/components/nav-list/nav-list.test.tsx.snap
+++ b/packages/react/src/components/nav-list/nav-list.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`NavList Is hidden 1`] = `
 
 .c0 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   list-style-type: none;
@@ -182,7 +182,7 @@ exports[`NavList Matches the snapshot 1`] = `
 
 .c0 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
   list-style-type: none;
diff --git a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
index f14e12e6d6..3dcebb358e 100644
--- a/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
+++ b/packages/react/src/components/numeric-input/numeric-input.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`NumericInput matches the snapshot (Disabled) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -59,8 +59,8 @@ exports[`NumericInput matches the snapshot (Disabled) 1`] = `
 
 .c4:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c4:disabled,
@@ -111,7 +111,7 @@ exports[`NumericInput matches the snapshot (Disabled) 1`] = `
   display: flex;
   height: var(--size-2x);
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
 }
 
 .c1 {
@@ -199,7 +199,7 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -238,8 +238,8 @@ exports[`NumericInput matches the snapshot (Invalid) 1`] = `
 
 .c5:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c5:disabled,
@@ -362,7 +362,7 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at end) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -401,8 +401,8 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at end) 1`] = `
 
 .c2:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c2:disabled,
@@ -508,7 +508,7 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at start) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -547,8 +547,8 @@ exports[`NumericInput matches the snapshot (Normal - Adornment at start) 1`] = `
 
 .c3:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c3:disabled,
diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index 5f931e59d3..2333de853c 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
 .c7[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c7:disabled {
@@ -280,7 +280,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -313,8 +313,8 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
 
 .c2:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c2:disabled,
@@ -515,7 +515,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
 .c9[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c9:disabled {
@@ -740,7 +740,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -773,8 +773,8 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
 
 .c4:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c4:disabled,
@@ -989,7 +989,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
 .c7[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c7:disabled {
@@ -1188,7 +1188,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -1221,8 +1221,8 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
 
 .c2:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c2:disabled,
diff --git a/packages/react/src/components/progress-circle/progress-circle.test.tsx.snap b/packages/react/src/components/progress-circle/progress-circle.test.tsx.snap
index 20556c6543..ae8deddcbf 100644
--- a/packages/react/src/components/progress-circle/progress-circle.test.tsx.snap
+++ b/packages/react/src/components/progress-circle/progress-circle.test.tsx.snap
@@ -48,14 +48,14 @@ exports[`ProgressCircle Matches the snapshot 1`] = `
 }
 
 .c4 p {
-  color: #000000;
+  color: #1B1C1E;
   font-size: 1.5rem;
   margin: 0;
   padding: 0;
 }
 
 .c5 {
-  color: #000000;
+  color: #1B1C1E;
   font-size: 1rem;
   -webkit-letter-spacing: 0.02875rem;
   -moz-letter-spacing: 0.02875rem;
diff --git a/packages/react/src/components/progress-indicator/bar.test.tsx.snap b/packages/react/src/components/progress-indicator/bar.test.tsx.snap
index 0d09b767d8..4d11b21189 100644
--- a/packages/react/src/components/progress-indicator/bar.test.tsx.snap
+++ b/packages/react/src/components/progress-indicator/bar.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Bar Matches the snapshot 1`] = `
 .c0 p {
-  color: #000000;
+  color: #1B1C1E;
   -webkit-letter-spacing: 0.02875rem;
   -moz-letter-spacing: 0.02875rem;
   -ms-letter-spacing: 0.02875rem;
diff --git a/packages/react/src/components/progress-indicator/progress-indicator.test.tsx.snap b/packages/react/src/components/progress-indicator/progress-indicator.test.tsx.snap
index 888c7fdce2..4275bb2f8c 100644
--- a/packages/react/src/components/progress-indicator/progress-indicator.test.tsx.snap
+++ b/packages/react/src/components/progress-indicator/progress-indicator.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ProgressIndicator Matches the snapshot 1`] = `
 .c2 p {
-  color: #000000;
+  color: #1B1C1E;
   -webkit-letter-spacing: 0.02875rem;
   -moz-letter-spacing: 0.02875rem;
   -ms-letter-spacing: 0.02875rem;
@@ -28,7 +28,7 @@ exports[`ProgressIndicator Matches the snapshot 1`] = `
 }
 
 .c1 {
-  color: #000000;
+  color: #1B1C1E;
   display: block;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.02875rem;
diff --git a/packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap b/packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap
index e09a4b09ac..05d3744f9f 100644
--- a/packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap
+++ b/packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`Progress Component Snapshots linear 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #006296;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -255,7 +255,7 @@ exports[`Progress Component Snapshots non linear 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #006296;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/react/src/components/progress-tracker/progress-tracker.tsx b/packages/react/src/components/progress-tracker/progress-tracker.tsx
index 91debcc667..f50a4f21ed 100644
--- a/packages/react/src/components/progress-tracker/progress-tracker.tsx
+++ b/packages/react/src/components/progress-tracker/progress-tracker.tsx
@@ -102,9 +102,9 @@ const CompletedStep = styled(StyledStep)`
 
 const ActiveStep = styled(StyledStep)`
     &::before {
-        border-color: ${({ theme }) => theme.component['progress-tracker-step-active-border-color']};
+        border-color: ${({ theme }) => theme.component['progress-tracker-step-current-border-color']};
         border-width: 0.25rem;
-        color: ${({ theme }) => theme.component['progress-tracker-step-active-text-color']};
+        color: ${({ theme }) => theme.component['progress-tracker-step-current-text-color']};
         font-weight: var(--font-semi-bold);
         height: var(--size-2x);
         margin: -0.25rem auto 0;
@@ -118,7 +118,7 @@ const ActiveStep = styled(StyledStep)`
     }
 
     ${Label} {
-        color: ${({ theme }) => theme.component['progress-tracker-step-active-label-text-color']};
+        color: ${({ theme }) => theme.component['progress-tracker-step-current-label-text-color']};
         font-weight: var(--font-semi-bold);
     }
 `;
diff --git a/packages/react/src/components/radio-button-group/radio-button-group.test.tsx.snap b/packages/react/src/components/radio-button-group/radio-button-group.test.tsx.snap
index 4924864041..91d861700a 100644
--- a/packages/react/src/components/radio-button-group/radio-button-group.test.tsx.snap
+++ b/packages/react/src/components/radio-button-group/radio-button-group.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`Radio button Matches the snapshot 1`] = `
 }
 
 .c1 {
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -97,7 +97,7 @@ exports[`Radio button Matches the snapshot 1`] = `
 }
 
 .c2:hover .radioInput {
-  border: 1px solid #006296;
+  border: 1px solid #000000;
 }
 
 .c3 {
@@ -159,7 +159,7 @@ exports[`Radio button Matches the snapshot 1`] = `
 
 .c3 .radioInput {
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
   border-radius: 50%;
   box-sizing: border-box;
   display: inline-block;
@@ -170,7 +170,7 @@ exports[`Radio button Matches the snapshot 1`] = `
 }
 
 .c3:hover .radioInput {
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
 }
 
 <fieldset
diff --git a/packages/react/src/components/radio-card-group/radio-card-group.test.tsx.snap b/packages/react/src/components/radio-card-group/radio-card-group.test.tsx.snap
index 9bc9ffd9d4..725980a315 100644
--- a/packages/react/src/components/radio-card-group/radio-card-group.test.tsx.snap
+++ b/packages/react/src/components/radio-card-group/radio-card-group.test.tsx.snap
@@ -57,10 +57,10 @@ exports[`Radio Card Matches snapshot (Checked, Desktop) 1`] = `
 
 .c3 {
   background-color: #FFFFFF;
-  border: 1px solid #000000;
+  border: 1px solid #60666E;
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   padding: var(--spacing-2x) var(--spacing-3x);
   width: 100%;
 }
@@ -229,10 +229,10 @@ exports[`Radio Card Matches snapshot (Default, Desktop) 1`] = `
 
 .c3 {
   background-color: #FFFFFF;
-  border: 1px solid #000000;
+  border: 1px solid #60666E;
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   padding: var(--spacing-2x) var(--spacing-3x);
   width: 100%;
 }
@@ -400,10 +400,10 @@ exports[`Radio Card Matches snapshot (Default, Mobile) 1`] = `
 
 .c3 {
   background-color: #FFFFFF;
-  border: 1px solid #000000;
+  border: 1px solid #60666E;
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   padding: var(--spacing-2x) var(--spacing-3x);
   width: 100%;
 }
@@ -517,7 +517,7 @@ exports[`Radio Card Matches snapshot (Default, Mobile) 1`] = `
 exports[`Radio Card Matches snapshot (Disabled, Desktop) 1`] = `
 .c10 {
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
   border-radius: 50%;
   box-sizing: border-box;
   display: inline-block;
@@ -571,7 +571,7 @@ exports[`Radio Card Matches snapshot (Disabled, Desktop) 1`] = `
 
 .c3 {
   background-color: #F1F2F2;
-  border: 1px solid #DBDEE1;
+  border: 1px solid #B7BBC2;
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
   color: #B7BBC2;
@@ -747,10 +747,10 @@ exports[`Radio Card Matches snapshot (Label, Desktop) 1`] = `
 
 .c3 {
   background-color: #FFFFFF;
-  border: 1px solid #000000;
+  border: 1px solid #60666E;
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   padding: var(--spacing-2x) var(--spacing-3x);
   width: 100%;
 }
@@ -920,10 +920,10 @@ exports[`Radio Card Matches snapshot (Label, Mobile) 1`] = `
 
 .c3 {
   background-color: #FFFFFF;
-  border: 1px solid #000000;
+  border: 1px solid #60666E;
   border-radius: var(--border-radius-2x);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   padding: var(--spacing-2x) var(--spacing-3x);
   width: 100%;
 }
diff --git a/packages/react/src/components/search/search-input.test.tsx.snap b/packages/react/src/components/search/search-input.test.tsx.snap
index 10519b93ff..30cb7ac42f 100644
--- a/packages/react/src/components/search/search-input.test.tsx.snap
+++ b/packages/react/src/components/search/search-input.test.tsx.snap
@@ -77,7 +77,7 @@ exports[`SearchInput should match the snapshot 1`] = `
 .c12:disabled:focus,
 .c12:disabled:hover {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -162,7 +162,7 @@ input + .c2 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -202,8 +202,8 @@ input + .c2 {
 
 .c7:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c7:disabled,
diff --git a/packages/react/src/components/side-drawer/side-drawer.test.tsx.snap b/packages/react/src/components/side-drawer/side-drawer.test.tsx.snap
index 7ff8e6dcaa..7084e378c6 100644
--- a/packages/react/src/components/side-drawer/side-drawer.test.tsx.snap
+++ b/packages/react/src/components/side-drawer/side-drawer.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Side Drawer Has different height when in mobile 1`] = `
 .c1 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 56px);
   right: 0;
   overflow-x: hidden;
@@ -41,7 +41,7 @@ exports[`Side Drawer Has different height when in mobile 1`] = `
 exports[`Side Drawer Has nested drawer 1`] = `
 .c1 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 48px);
   left: 0;
   overflow-x: hidden;
@@ -65,7 +65,7 @@ exports[`Side Drawer Has nested drawer 1`] = `
 
 .c2 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 48px);
   right: 0;
   overflow-x: hidden;
@@ -111,7 +111,7 @@ exports[`Side Drawer Has nested drawer 1`] = `
 exports[`Side Drawer Has width set to 50% 1`] = `
 .c1 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 48px);
   right: 0;
   overflow-x: hidden;
@@ -149,7 +149,7 @@ exports[`Side Drawer Has width set to 50% 1`] = `
 exports[`Side Drawer Is closed on left side 1`] = `
 .c1 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 48px);
   left: 0;
   overflow-x: hidden;
@@ -186,7 +186,7 @@ exports[`Side Drawer Is closed on left side 1`] = `
 exports[`Side Drawer Is closed on right side 1`] = `
 .c1 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 48px);
   right: 0;
   overflow-x: hidden;
@@ -223,7 +223,7 @@ exports[`Side Drawer Is closed on right side 1`] = `
 exports[`Side Drawer Is open 1`] = `
 .c1 {
   background-color: #FFFFFF;
-  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.1);
+  box-shadow: 0 6px 10px 0 rgb(0 0 0 / 0.2);
   height: calc(100vh - 48px);
   right: 0;
   overflow-x: hidden;
diff --git a/packages/react/src/components/status/status.test.tsx.snap b/packages/react/src/components/status/status.test.tsx.snap
index f7f19101e0..d5ad9f1889 100644
--- a/packages/react/src/components/status/status.test.tsx.snap
+++ b/packages/react/src/components/status/status.test.tsx.snap
@@ -59,12 +59,12 @@ exports[`Status matches snapshot (disabled) 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  color: #60666E;
+  color: #B7BBC2;
 }
 
 .c1 {
-  background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  background-color: #F1F2F2;
+  border: 1px solid #DBDEE1;
   border-radius: 50%;
   box-sizing: border-box;
   height: 0.625rem;
diff --git a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
index 2f96aeea4f..603045004c 100644
--- a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
+++ b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
@@ -76,7 +76,7 @@ input + .c1 {
 
 .c6:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -129,7 +129,7 @@ input + .c1 {
 
 .c7:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -168,7 +168,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -204,8 +204,8 @@ input + .c1 {
 
 .c4:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c4:disabled,
@@ -412,7 +412,7 @@ input + .c1 {
 
 .c8:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -465,7 +465,7 @@ input + .c1 {
 
 .c9:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -504,7 +504,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -540,8 +540,8 @@ input + .c1 {
 
 .c6:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c6:disabled,
@@ -709,7 +709,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 1rem;
   -webkit-letter-spacing: 0.02875rem;
@@ -745,8 +745,8 @@ input + .c1 {
 
 .c4:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c4:disabled,
@@ -890,7 +890,7 @@ input + .c1 {
 
 .c6:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -943,7 +943,7 @@ input + .c1 {
 
 .c7:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
+  border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
@@ -982,7 +982,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -1018,8 +1018,8 @@ input + .c1 {
 
 .c4:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c4:disabled,
diff --git a/packages/react/src/components/table/table.test.tsx.snap b/packages/react/src/components/table/table.test.tsx.snap
index 25f7f02ffe..23a6032985 100644
--- a/packages/react/src/components/table/table.test.tsx.snap
+++ b/packages/react/src/components/table/table.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`Table has aria-label on header columns 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -222,7 +222,7 @@ exports[`Table has clickable rows styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -401,7 +401,7 @@ exports[`Table has column with headers grouped 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -608,7 +608,7 @@ exports[`Table has custom text alignment 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -760,7 +760,7 @@ exports[`Table has desktop styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -946,7 +946,7 @@ exports[`Table has error rows styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -1098,7 +1098,7 @@ exports[`Table has mobile styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -1250,7 +1250,7 @@ exports[`Table has rowNumbers styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -1480,7 +1480,7 @@ exports[`Table has selectable rows styles 1`] = `
 
 .c7:hover {
   background-color: #DBDEE1;
-  border: 1px solid #1B1C1E;
+  border: 1px solid #000000;
 }
 
 .c5 {
@@ -1541,7 +1541,7 @@ exports[`Table has selectable rows styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -1818,7 +1818,7 @@ exports[`Table has small rowSize styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -1992,7 +1992,7 @@ exports[`Table has sorting styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -2222,7 +2222,7 @@ exports[`Table has sticky column styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -2399,7 +2399,7 @@ exports[`Table has sticky header styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -2555,7 +2555,7 @@ exports[`Table has striped styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
@@ -2707,7 +2707,7 @@ exports[`Table has tablet styles 1`] = `
 }
 
 .c0 {
-  background: #FFFFFF;
+  background: transparent;
   border-collapse: collapse;
   color: #1B1C1E;
   width: 100%;
diff --git a/packages/react/src/components/tabs/tab-button.tsx b/packages/react/src/components/tabs/tab-button.tsx
index b291495034..60ac2cb5f7 100644
--- a/packages/react/src/components/tabs/tab-button.tsx
+++ b/packages/react/src/components/tabs/tab-button.tsx
@@ -10,7 +10,7 @@ const selectedIndicatorPosition = (global: boolean | undefined): string => (glob
 
 const StyledButton = styled.button<{ $global?: boolean; $selected?: boolean; $removable?: boolean; }>`
     align-items: center;
-    color: ${({ $selected, theme }) => ($selected ? theme.component['tab-selected-text-color'] : theme.component['tab-text-color'])};
+    color: ${({ $selected, theme }) => ($selected ? theme.component['tab-button-selected-text-color'] : theme.component['tab-button-text-color'])};
     display: flex;
     font-family: var(--font-family);
     font-size: 0.875rem;
@@ -20,6 +20,10 @@ const StyledButton = styled.button<{ $global?: boolean; $selected?: boolean; $re
     position: relative;
     user-select: none;
 
+    &:hover {
+        color: ${({ theme }) => theme.component['tab-button-hover-text-color']};
+    }
+
     &::after {
         content: '';
         display: block;
@@ -34,27 +38,27 @@ const StyledButton = styled.button<{ $global?: boolean; $selected?: boolean; $re
 
     ${({ $selected, theme }) => !$selected && css`
         &:active {
-            color: ${theme.component['tab-active-text-color']};
+            color: ${theme.component['tab-button-active-text-color']};
             font-weight: var(--font-semi-bold);
 
             &::after {
-                background-color: ${theme.component['tab-active-indicator-color']} !important;
+                background-color: ${theme.component['tab-button-indicator-active-background-color']} !important;
             }
         }
     `}
 
-    ${({ $selected, theme }) => $selected && css`
-        background: ${theme.component['tab-selected-background-color']};
+    ${({ $global, $selected, theme }) => $selected && css`
+        background: ${$global ? theme.component['tab-global-button-selected-background-color'] : theme.component['tab-section-button-selected-background-color']};
         font-weight: var(--font-semi-bold);
 
         &::after {
-            background-color: ${theme.component['tab-selected-indicator-color']};
+            background-color: ${theme.component['tab-button-indicator-selected-background-color']};
         }
     `}
 `;
 
 const StyledButtonIcon = styled(Icon)`
-    color: ${({ theme }) => theme.component['tab-icon-color']};
+    color: ${({ theme }) => theme.component['tab-button-icon-color']};
     vertical-align: middle;
 `;
 
@@ -66,8 +70,8 @@ const StyledTab = styled.div<{ $selected: boolean; }>`
         &:hover {
             ${StyledButton} {
                 &::after {
-                    background-color: ${theme.component['tab-hover-indicator-color']};
-                    color: ${theme.component['tab-hover-text-color']};
+                    background-color: ${theme.component['tab-button-indicator-hover-background-color']};
+                    color: ${theme.component['tab-button-hover-text-color']};
                 }
             }
         }
diff --git a/packages/react/src/components/tabs/tab-panel.tsx b/packages/react/src/components/tabs/tab-panel.tsx
index ad9b07d87d..fd3ed97bca 100644
--- a/packages/react/src/components/tabs/tab-panel.tsx
+++ b/packages/react/src/components/tabs/tab-panel.tsx
@@ -11,9 +11,6 @@ interface TabPanelProps {
 }
 
 const StyledDiv = styled.div<{ $isGlobal?: boolean; }>`
-    background: ${({ $isGlobal, theme }) => !$isGlobal && theme.component['tab-panel-background-color']};
-    border: ${({ $isGlobal, theme }) => !$isGlobal && `1px solid ${theme.component['tab-panel-border-color']}`};
-    border-radius: ${({ $isGlobal }) => !$isGlobal && '0 0 var(--border-radius-2x) var(--border-radius-2x)'};
     border-top: none;
 
     ${({ theme }) => focus({ theme }, { focusType: 'focus-visible' })}
diff --git a/packages/react/src/components/tabs/tabs.test.tsx.snap b/packages/react/src/components/tabs/tabs.test.tsx.snap
index f736532262..ff4f28144d 100644
--- a/packages/react/src/components/tabs/tabs.test.tsx.snap
+++ b/packages/react/src/components/tabs/tabs.test.tsx.snap
@@ -77,10 +77,14 @@ exports[`Tabs matches snapshot (global) 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background: #FFFFFF;
+  background: transparent;
   font-weight: var(--font-semi-bold);
 }
 
+.c7:hover {
+  color: #000000;
+}
+
 .c7::after {
   content: '';
   display: block;
@@ -127,6 +131,10 @@ exports[`Tabs matches snapshot (global) 1`] = `
   user-select: none;
 }
 
+.c10:hover {
+  color: #000000;
+}
+
 .c10::after {
   content: '';
   display: block;
@@ -154,7 +162,7 @@ exports[`Tabs matches snapshot (global) 1`] = `
 }
 
 .c10:active::after {
-  background-color: #003A5A !important;
+  background-color: #012639 !important;
 }
 
 .c5 {
@@ -175,7 +183,7 @@ exports[`Tabs matches snapshot (global) 1`] = `
 
 .c9:hover .c6::after {
   background-color: #DBDEE1;
-  color: #60666E;
+  color: #000000;
 }
 
 .c8::after {
@@ -222,7 +230,7 @@ exports[`Tabs matches snapshot (global) 1`] = `
 .c2[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c2:disabled {
@@ -287,6 +295,10 @@ exports[`Tabs matches snapshot (global) 1`] = `
   padding: 0 var(--spacing-1x) 0 var(--spacing-2x);
 }
 
+.c3:hover {
+  background: #DBDEE1;
+}
+
 .c3.hidden {
   display: none;
 }
@@ -313,11 +325,17 @@ exports[`Tabs matches snapshot (global) 1`] = `
   right: 0;
 }
 
+.c11:hover {
+  background: #DBDEE1;
+}
+
 .c11.hidden {
   display: none;
 }
 
-<div>
+<div
+  class=""
+>
   <div
     class="c0"
   >
@@ -432,7 +450,7 @@ exports[`Tabs matches snapshot (global) 1`] = `
 `;
 
 exports[`Tabs matches snapshot (mobile) 1`] = `
-.c1 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -472,24 +490,24 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   user-select: none;
 }
 
-.c1 {
+.c2 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c1:focus {
+.c2:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c1 > svg {
+.c2 > svg {
   color: inherit;
   height: var(--size-1halfx);
   width: var(--size-1halfx);
 }
 
-.c7 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -512,7 +530,11 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   font-weight: var(--font-semi-bold);
 }
 
-.c7::after {
+.c8:hover {
+  color: #000000;
+}
+
+.c8::after {
   content: '';
   display: block;
   height: 4px;
@@ -522,22 +544,22 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   top: 0;
 }
 
-.c7 {
+.c8 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c7:focus-visible {
+.c8:focus-visible {
   box-shadow: 0 0 0 0 transparent;
   outline: 2px solid #006296;
   outline-offset: -2px;
 }
 
-.c7::after {
+.c8::after {
   background-color: #006296;
 }
 
-.c10 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -558,7 +580,11 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   user-select: none;
 }
 
-.c10::after {
+.c11:hover {
+  color: #000000;
+}
+
+.c11::after {
   content: '';
   display: block;
   height: 4px;
@@ -568,27 +594,27 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   top: 0;
 }
 
-.c10 {
+.c11 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c10:focus-visible {
+.c11:focus-visible {
   box-shadow: 0 0 0 0 transparent;
   outline: 2px solid #006296;
   outline-offset: -2px;
 }
 
-.c10:active {
+.c11:active {
   color: #1B1C1E;
   font-weight: var(--font-semi-bold);
 }
 
-.c10:active::after {
-  background-color: #003A5A !important;
+.c11:active::after {
+  background-color: #012639 !important;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -596,7 +622,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   position: relative;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -604,12 +630,12 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   position: relative;
 }
 
-.c9:hover .c6::after {
+.c10:hover .c7::after {
   background-color: #DBDEE1;
-  color: #60666E;
+  color: #000000;
 }
 
-.c8::after {
+.c9::after {
   content: attr(data-content);
   display: block;
   font-weight: var(--font-semi-bold);
@@ -617,55 +643,59 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   visibility: hidden;
 }
 
-.c12 {
-  background: #FFFFFF;
-  border: 1px solid #F1F2F2;
-  border-radius: 0 0 var(--border-radius-2x) var(--border-radius-2x);
+.c13 {
   border-top: none;
 }
 
-.c12 {
+.c13 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c12:focus-visible {
+.c13:focus-visible {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c2 {
+.c3 {
   background-color: transparent;
   border-color: transparent;
   color: #60666E;
 }
 
-.c2 {
+.c3 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c2:focus {
+.c3:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c2:hover,
-.c2[aria-expanded='true'] {
+.c3:hover,
+.c3[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
-.c2:disabled {
+.c3:disabled {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
 }
 
 .c0 {
+  background: #FFFFFF;
+  border: 1px solid #DBDEE1;
+  border-radius: var(--border-radius-2x);
+  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.2);
+}
+
+.c1 {
   background: #F1F2F2;
   border-radius: var(--border-radius-2x) var(--border-radius-2x) 0 0;
   box-sizing: content-box;
@@ -673,7 +703,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   position: relative;
 }
 
-.c0::before {
+.c1::before {
   border-bottom: 1px solid #DBDEE1;
   bottom: 0;
   content: '';
@@ -683,7 +713,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   width: 100%;
 }
 
-.c4 {
+.c5 {
   border-radius: var(--border-radius-2x) var(--border-radius-2x) 0 0;
   display: -webkit-box;
   display: -webkit-flex;
@@ -701,7 +731,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   white-space: nowrap;
 }
 
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -724,11 +754,15 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   border-radius: var(--border-radius-2x) 0 0 0;
 }
 
-.c3.hidden {
+.c4:hover {
+  background: #DBDEE1;
+}
+
+.c4.hidden {
   display: none;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -751,17 +785,23 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   border-radius: 0 var(--border-radius-2x) 0 0;
 }
 
-.c11.hidden {
+.c12:hover {
+  background: #DBDEE1;
+}
+
+.c12.hidden {
   display: none;
 }
 
-<div>
+<div
+  class="c0"
+>
   <div
-    class="c0"
+    class="c1"
   >
     <button
       aria-hidden="true"
-      class="c1 c2 c3 hidden"
+      class="c2 c3 c4 hidden"
       type="button"
     >
       <svg
@@ -774,24 +814,24 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
     </button>
     <div
       aria-label="tabs label"
-      class="c4"
+      class="c5"
       role="tablist"
     >
       <div
-        class="c5"
+        class="c6"
         data-testid="tab-1"
       >
         <button
           aria-controls="uuid1"
           aria-selected="true"
-          class="c6 c7"
+          class="c7 c8"
           data-testid="tab-1-button"
           id="tab-1"
           role="tab"
           type="button"
         >
           <span
-            class="c8"
+            class="c9"
             data-content="button 1"
             data-testid="tab-1-text"
           >
@@ -800,13 +840,13 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
         </button>
       </div>
       <div
-        class="c9"
+        class="c10"
         data-testid="tab-2"
       >
         <button
           aria-controls="uuid2"
           aria-selected="false"
-          class="c6 c10"
+          class="c7 c11"
           data-testid="tab-2-button"
           id="tab-2"
           role="tab"
@@ -814,7 +854,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
           type="button"
         >
           <span
-            class="c8"
+            class="c9"
             data-content="button 2"
             data-testid="tab-2-text"
           >
@@ -825,7 +865,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
     </div>
     <button
       aria-hidden="true"
-      class="c1 c2 c11 hidden"
+      class="c2 c3 c12 hidden"
       type="button"
     >
       <svg
@@ -840,7 +880,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   <div
     aria-hidden="false"
     aria-labelledby="tab-1"
-    class="c12"
+    class="c13"
     id="uuid1"
     role="tabpanel"
     tabindex="0"
@@ -854,7 +894,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   <div
     aria-hidden="true"
     aria-labelledby="tab-2"
-    class="c12"
+    class="c13"
     hidden=""
     id="uuid2"
     role="tabpanel"
@@ -870,7 +910,7 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
 `;
 
 exports[`Tabs matches snapshot 1`] = `
-.c1 {
+.c2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -910,24 +950,24 @@ exports[`Tabs matches snapshot 1`] = `
   user-select: none;
 }
 
-.c1 {
+.c2 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c1:focus {
+.c2:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c1 > svg {
+.c2 > svg {
   color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c7 {
+.c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -950,7 +990,11 @@ exports[`Tabs matches snapshot 1`] = `
   font-weight: var(--font-semi-bold);
 }
 
-.c7::after {
+.c8:hover {
+  color: #000000;
+}
+
+.c8::after {
   content: '';
   display: block;
   height: 4px;
@@ -960,22 +1004,22 @@ exports[`Tabs matches snapshot 1`] = `
   top: 0;
 }
 
-.c7 {
+.c8 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c7:focus-visible {
+.c8:focus-visible {
   box-shadow: 0 0 0 0 transparent;
   outline: 2px solid #006296;
   outline-offset: -2px;
 }
 
-.c7::after {
+.c8::after {
   background-color: #006296;
 }
 
-.c10 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -996,7 +1040,11 @@ exports[`Tabs matches snapshot 1`] = `
   user-select: none;
 }
 
-.c10::after {
+.c11:hover {
+  color: #000000;
+}
+
+.c11::after {
   content: '';
   display: block;
   height: 4px;
@@ -1006,27 +1054,27 @@ exports[`Tabs matches snapshot 1`] = `
   top: 0;
 }
 
-.c10 {
+.c11 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c10:focus-visible {
+.c11:focus-visible {
   box-shadow: 0 0 0 0 transparent;
   outline: 2px solid #006296;
   outline-offset: -2px;
 }
 
-.c10:active {
+.c11:active {
   color: #1B1C1E;
   font-weight: var(--font-semi-bold);
 }
 
-.c10:active::after {
-  background-color: #003A5A !important;
+.c11:active::after {
+  background-color: #012639 !important;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1034,7 +1082,7 @@ exports[`Tabs matches snapshot 1`] = `
   position: relative;
 }
 
-.c9 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1042,12 +1090,12 @@ exports[`Tabs matches snapshot 1`] = `
   position: relative;
 }
 
-.c9:hover .c6::after {
+.c10:hover .c7::after {
   background-color: #DBDEE1;
-  color: #60666E;
+  color: #000000;
 }
 
-.c8::after {
+.c9::after {
   content: attr(data-content);
   display: block;
   font-weight: var(--font-semi-bold);
@@ -1055,55 +1103,59 @@ exports[`Tabs matches snapshot 1`] = `
   visibility: hidden;
 }
 
-.c12 {
-  background: #FFFFFF;
-  border: 1px solid #F1F2F2;
-  border-radius: 0 0 var(--border-radius-2x) var(--border-radius-2x);
+.c13 {
   border-top: none;
 }
 
-.c12 {
+.c13 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c12:focus-visible {
+.c13:focus-visible {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c2 {
+.c3 {
   background-color: transparent;
   border-color: transparent;
   color: #60666E;
 }
 
-.c2 {
+.c3 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c2:focus {
+.c3:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c2:hover,
-.c2[aria-expanded='true'] {
+.c3:hover,
+.c3[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
-.c2:disabled {
+.c3:disabled {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
 }
 
 .c0 {
+  background: #FFFFFF;
+  border: 1px solid #DBDEE1;
+  border-radius: var(--border-radius-2x);
+  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.2);
+}
+
+.c1 {
   background: #F1F2F2;
   border-radius: var(--border-radius-2x) var(--border-radius-2x) 0 0;
   box-sizing: content-box;
@@ -1111,7 +1163,7 @@ exports[`Tabs matches snapshot 1`] = `
   position: relative;
 }
 
-.c0::before {
+.c1::before {
   border-bottom: 1px solid #DBDEE1;
   bottom: 0;
   content: '';
@@ -1121,7 +1173,7 @@ exports[`Tabs matches snapshot 1`] = `
   width: 100%;
 }
 
-.c4 {
+.c5 {
   border-radius: var(--border-radius-2x) var(--border-radius-2x) 0 0;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1139,7 +1191,7 @@ exports[`Tabs matches snapshot 1`] = `
   white-space: nowrap;
 }
 
-.c3 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1162,11 +1214,15 @@ exports[`Tabs matches snapshot 1`] = `
   border-radius: var(--border-radius-2x) 0 0 0;
 }
 
-.c3.hidden {
+.c4:hover {
+  background: #DBDEE1;
+}
+
+.c4.hidden {
   display: none;
 }
 
-.c11 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1189,17 +1245,23 @@ exports[`Tabs matches snapshot 1`] = `
   border-radius: 0 var(--border-radius-2x) 0 0;
 }
 
-.c11.hidden {
+.c12:hover {
+  background: #DBDEE1;
+}
+
+.c12.hidden {
   display: none;
 }
 
-<div>
+<div
+  class="c0"
+>
   <div
-    class="c0"
+    class="c1"
   >
     <button
       aria-hidden="true"
-      class="c1 c2 c3 hidden"
+      class="c2 c3 c4 hidden"
       type="button"
     >
       <svg
@@ -1212,24 +1274,24 @@ exports[`Tabs matches snapshot 1`] = `
     </button>
     <div
       aria-label="tabs label"
-      class="c4"
+      class="c5"
       role="tablist"
     >
       <div
-        class="c5"
+        class="c6"
         data-testid="tab-1"
       >
         <button
           aria-controls="uuid1"
           aria-selected="true"
-          class="c6 c7"
+          class="c7 c8"
           data-testid="tab-1-button"
           id="tab-1"
           role="tab"
           type="button"
         >
           <span
-            class="c8"
+            class="c9"
             data-content="button 1"
             data-testid="tab-1-text"
           >
@@ -1238,13 +1300,13 @@ exports[`Tabs matches snapshot 1`] = `
         </button>
       </div>
       <div
-        class="c9"
+        class="c10"
         data-testid="tab-2"
       >
         <button
           aria-controls="uuid2"
           aria-selected="false"
-          class="c6 c10"
+          class="c7 c11"
           data-testid="tab-2-button"
           id="tab-2"
           role="tab"
@@ -1252,7 +1314,7 @@ exports[`Tabs matches snapshot 1`] = `
           type="button"
         >
           <span
-            class="c8"
+            class="c9"
             data-content="button 2"
             data-testid="tab-2-text"
           >
@@ -1263,7 +1325,7 @@ exports[`Tabs matches snapshot 1`] = `
     </div>
     <button
       aria-hidden="true"
-      class="c1 c2 c11 hidden"
+      class="c2 c3 c12 hidden"
       type="button"
     >
       <svg
@@ -1278,7 +1340,7 @@ exports[`Tabs matches snapshot 1`] = `
   <div
     aria-hidden="false"
     aria-labelledby="tab-1"
-    class="c12"
+    class="c13"
     id="uuid1"
     role="tabpanel"
     tabindex="0"
@@ -1292,7 +1354,7 @@ exports[`Tabs matches snapshot 1`] = `
   <div
     aria-hidden="true"
     aria-labelledby="tab-2"
-    class="c12"
+    class="c13"
     hidden=""
     id="uuid2"
     role="tabpanel"
diff --git a/packages/react/src/components/tabs/tabs.tsx b/packages/react/src/components/tabs/tabs.tsx
index 9990739f04..1e8108e5e9 100644
--- a/packages/react/src/components/tabs/tabs.tsx
+++ b/packages/react/src/components/tabs/tabs.tsx
@@ -18,9 +18,18 @@ import { TabButton } from './tab-button';
 import { TabPanel } from './tab-panel';
 import { Button } from '../buttons/button';
 
+const TabsWrapper = styled.div<{ $global?: boolean; }>`
+    ${({ theme, $global }) => !$global && css`
+        background: ${theme.component['tab-section-background-color']};
+        border: 1px solid ${theme.component['tab-section-border-color']};
+        border-radius: var(--border-radius-2x);
+        box-shadow: 0 1px 4px 0 ${theme.component['tab-section-box-shadow-color']};
+    `};
+`;
+
 const TabButtonsContainer = styled.div<{ $global?: boolean; }>`
     /* stylelint-disable-next-line @stylistic/declaration-bang-space-before */
-    background: ${({ theme, $global }) => ($global ? theme.component['tab-global-background-color'] : theme.component['tab-background-color'])};
+    background: ${({ theme, $global }) => ($global ? theme.component['tab-global-list-background-color'] : theme.component['tab-section-list-background-color'])};
     border-radius: ${({ $global }) => !$global && 'var(--border-radius-2x) var(--border-radius-2x) 0 0'};
     box-sizing: content-box;
     height: var(--size-2halfx);
@@ -50,9 +59,9 @@ const TabButtonsList = styled.div<{ $global?: boolean; }>`
     white-space: nowrap;
 `;
 
-const ScrollButton = styled(Button) <{ $global?: boolean; $position: 'left' | 'right' }>`
+const ScrollButton = styled(Button) <{ $global?: boolean; $position: 'left' | 'right'; }>`
     align-items: center;
-    background: ${({ $global, theme }) => ($global ? theme.component['tab-global-background-color'] : theme.component['tab-background-color'])};
+    background: ${({ theme, $global }) => theme.component[`tab-${$global ? 'global' : 'section'}-list-background-color`]};
     border-bottom: 1px solid ${({ theme }) => theme.component['tab-border-bottom-color']};
     border-radius: 0;
     bottom: 0;
@@ -62,6 +71,10 @@ const ScrollButton = styled(Button) <{ $global?: boolean; $position: 'left' | 'r
     position: absolute;
     z-index: 1;
 
+    &:hover {
+        background: ${({ theme }) => theme.component['tab-scroll-button-hover-background-color']};
+    }
+
     ${({ $position, $global }) => $position === 'left' && css`
         box-shadow: 3px 0px 3px -2px rgba(0, 0, 0, 0.1);
         left: 0;
@@ -226,7 +239,7 @@ export const Tabs: VoidFunctionComponent<Props> = ({
     }
 
     return (
-        <div className={className}>
+        <TabsWrapper $global={global} className={className}>
             <TabButtonsContainer $global={global}>
                 <ScrollButton
                     className="hidden"
@@ -300,6 +313,6 @@ export const Tabs: VoidFunctionComponent<Props> = ({
                 }
                 return null;
             })}
-        </div>
+        </TabsWrapper>
     );
 };
diff --git a/packages/react/src/components/tag/tag.test.tsx.snap b/packages/react/src/components/tag/tag.test.tsx.snap
index 0c2f0b5960..0f58396d4f 100644
--- a/packages/react/src/components/tag/tag.test.tsx.snap
+++ b/packages/react/src/components/tag/tag.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (desktop remov
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -362,7 +362,7 @@ exports[`Tag Tag size=medium color=decorative-01 matches snapshot (mobile remova
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -643,7 +643,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (desktop remov
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -924,7 +924,7 @@ exports[`Tag Tag size=medium color=decorative-02 matches snapshot (mobile remova
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -1205,7 +1205,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (desktop removable)
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -1486,7 +1486,7 @@ exports[`Tag Tag size=medium color=default matches snapshot (mobile removable) 1
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -1768,7 +1768,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop remova
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -2049,7 +2049,7 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (mobile removab
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -2331,7 +2331,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop remova
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -2612,7 +2612,7 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (mobile removab
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -2894,7 +2894,7 @@ exports[`Tag Tag size=small color=default matches snapshot (desktop removable) 1
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
@@ -3175,7 +3175,7 @@ exports[`Tag Tag size=small color=default matches snapshot (mobile removable) 1`
 .c4[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c4:disabled {
diff --git a/packages/react/src/components/text-area/text-area.test.tsx.snap b/packages/react/src/components/text-area/text-area.test.tsx.snap
index 703f0afcb4..09b2ab6b49 100644
--- a/packages/react/src/components/text-area/text-area.test.tsx.snap
+++ b/packages/react/src/components/text-area/text-area.test.tsx.snap
@@ -40,7 +40,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -78,8 +78,8 @@ input + .c1 {
 
 .c3:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c3:disabled,
@@ -177,7 +177,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -215,8 +215,8 @@ input + .c1 {
 
 .c3:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c3:disabled,
diff --git a/packages/react/src/components/text-input/text-input.test.tsx.snap b/packages/react/src/components/text-input/text-input.test.tsx.snap
index 67a02fecc2..1974734edd 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx.snap
+++ b/packages/react/src/components/text-input/text-input.test.tsx.snap
@@ -40,7 +40,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -73,8 +73,8 @@ input + .c1 {
 
 .c3:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c3:disabled,
@@ -172,7 +172,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -205,8 +205,8 @@ input + .c1 {
 
 .c3:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c3:disabled,
@@ -304,7 +304,7 @@ input + .c1 {
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   font-family: inherit;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.015rem;
@@ -337,8 +337,8 @@ input + .c1 {
 
 .c3:disabled {
   background-color: #F1F2F2;
-  border-color: #DBDEE1;
-  color: #DBDEE1;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
 }
 
 .c3:disabled,
diff --git a/packages/react/src/components/toggle-button-group/toggle-button-group.test.tsx.snap b/packages/react/src/components/toggle-button-group/toggle-button-group.test.tsx.snap
index 507ce95816..71792fc18e 100644
--- a/packages/react/src/components/toggle-button-group/toggle-button-group.test.tsx.snap
+++ b/packages/react/src/components/toggle-button-group/toggle-button-group.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`ToggleButtonGroup Matches snapshot (desktop) 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background-color: #FFFFFF;
-  border: 1px solid #878F9A;
+  border: 1px solid #60666E;
   border-right: 0;
   box-sizing: border-box;
   color: #60666E;
@@ -36,7 +36,7 @@ exports[`ToggleButtonGroup Matches snapshot (desktop) 1`] = `
 }
 
 .c1:last-child {
-  border-right: 1px solid #878F9A;
+  border-right: 1px solid #60666E;
   margin: 0;
 }
 
@@ -57,19 +57,19 @@ exports[`ToggleButtonGroup Matches snapshot (desktop) 1`] = `
 
 .c1:disabled,
 .c1:disabled:hover {
-  background-color: #FFFFFF;
+  background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
 .c1:hover {
   background-color: #DBDEE1;
-  border-color: #60666E;
+  border-color: #000000;
   color: #000000;
 }
 
 .c1:hover + button {
-  border-left-color: #60666E;
+  border-left-color: #000000;
 }
 
 .c2 {
@@ -78,10 +78,10 @@ exports[`ToggleButtonGroup Matches snapshot (desktop) 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background-color: #E0F0F9;
-  border: 1px solid #012639;
+  border: 1px solid #006296;
   border-right: 1px solid;
   box-sizing: border-box;
-  color: #012639;
+  color: #003A5A;
   font-size: 0.875rem;
   -webkit-letter-spacing: 0.02875rem;
   -moz-letter-spacing: 0.02875rem;
@@ -96,7 +96,7 @@ exports[`ToggleButtonGroup Matches snapshot (desktop) 1`] = `
 }
 
 .c2:last-child {
-  border-right: 1px solid #012639;
+  border-right: 1px solid #006296;
   margin: 0;
 }
 
@@ -117,7 +117,7 @@ exports[`ToggleButtonGroup Matches snapshot (desktop) 1`] = `
 
 .c2:disabled,
 .c2:disabled:hover {
-  background-color: #FFFFFF;
+  background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
@@ -192,7 +192,7 @@ exports[`ToggleButtonGroup Matches snapshot (mobile) 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background-color: #FFFFFF;
-  border: 1px solid #878F9A;
+  border: 1px solid #60666E;
   border-right: 0;
   box-sizing: border-box;
   color: #60666E;
@@ -206,7 +206,7 @@ exports[`ToggleButtonGroup Matches snapshot (mobile) 1`] = `
 }
 
 .c1:last-child {
-  border-right: 1px solid #878F9A;
+  border-right: 1px solid #60666E;
   margin: 0;
 }
 
@@ -227,19 +227,19 @@ exports[`ToggleButtonGroup Matches snapshot (mobile) 1`] = `
 
 .c1:disabled,
 .c1:disabled:hover {
-  background-color: #FFFFFF;
+  background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
 .c1:hover {
   background-color: #DBDEE1;
-  border-color: #60666E;
+  border-color: #000000;
   color: #000000;
 }
 
 .c1:hover + button {
-  border-left-color: #60666E;
+  border-left-color: #000000;
 }
 
 .c2 {
@@ -248,10 +248,10 @@ exports[`ToggleButtonGroup Matches snapshot (mobile) 1`] = `
   -ms-flex-align: center;
   align-items: center;
   background-color: #E0F0F9;
-  border: 1px solid #012639;
+  border: 1px solid #006296;
   border-right: 1px solid;
   box-sizing: border-box;
-  color: #012639;
+  color: #003A5A;
   font-size: 1rem;
   -webkit-letter-spacing: 0.02875rem;
   -moz-letter-spacing: 0.02875rem;
@@ -266,7 +266,7 @@ exports[`ToggleButtonGroup Matches snapshot (mobile) 1`] = `
 }
 
 .c2:last-child {
-  border-right: 1px solid #012639;
+  border-right: 1px solid #006296;
   margin: 0;
 }
 
@@ -287,7 +287,7 @@ exports[`ToggleButtonGroup Matches snapshot (mobile) 1`] = `
 
 .c2:disabled,
 .c2:disabled:hover {
-  background-color: #FFFFFF;
+  background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
diff --git a/packages/react/src/components/toggle-button-group/toggle-button-group.tsx b/packages/react/src/components/toggle-button-group/toggle-button-group.tsx
index e66ce18d35..1f9be7273f 100644
--- a/packages/react/src/components/toggle-button-group/toggle-button-group.tsx
+++ b/packages/react/src/components/toggle-button-group/toggle-button-group.tsx
@@ -24,11 +24,11 @@ interface ToggleButtonProps {
 
 const ToggleButton = styled.button<ToggleButtonProps>`
     align-items: center;
-    background-color: ${({ theme, pressed }) => (pressed ? theme.component['toggle-button-selected-background-color'] : theme.component['toggle-button-background-color'])};
-    border: 1px solid ${({ theme, pressed }) => (pressed ? theme.component['toggle-button-selected-border-color'] : theme.component['toggle-button-border-color'])};
+    background-color: ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-pressed-background-color'] : theme.component['segmented-control-background-color'])};
+    border: 1px solid ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-pressed-border-color'] : theme.component['segmented-control-border-color'])};
     border-right: ${({ pressed }) => (pressed ? '1px solid' : 0)};
     box-sizing: border-box;
-    color: ${({ theme, pressed }) => (pressed ? theme.component['toggle-button-selected-text-color'] : theme.component['toggle-button-text-color'])};
+    color: ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-pressed-text-color'] : theme.component['segmented-control-text-color'])};
     font-size: ${({ isMobile }) => (isMobile ? '1rem' : '0.875rem')};
     letter-spacing: 0.02875rem;
     min-height: ${({ isMobile }) => (isMobile ? 'var(--size-3x)' : 'var(--size-2x)')};
@@ -39,7 +39,7 @@ const ToggleButton = styled.button<ToggleButtonProps>`
     `}
 
     &:last-child {
-        border-right: 1px solid ${({ theme, pressed }) => (pressed ? theme.component['toggle-button-selected-border-color'] : theme.component['toggle-button-border-color'])};
+        border-right: 1px solid ${({ theme, pressed }) => (pressed ? theme.component['segmented-control-pressed-border-color'] : theme.component['segmented-control-border-color'])};
         margin: 0;
     }
 
@@ -51,19 +51,19 @@ const ToggleButton = styled.button<ToggleButtonProps>`
 
     &:disabled,
     &:disabled:hover {
-        background-color: ${({ theme }) => theme.component['toggle-button-disabled-background-color']};
-        border-color: ${({ theme }) => theme.component['toggle-button-disabled-border-color']};
-        color: ${({ theme }) => theme.component['toggle-button-disabled-text-color']};
+        background-color: ${({ theme }) => theme.component['segmented-control-disabled-background-color']};
+        border-color: ${({ theme }) => theme.component['segmented-control-disabled-border-color']};
+        color: ${({ theme }) => theme.component['segmented-control-disabled-text-color']};
     }
 
     ${({ theme, pressed }) => !pressed && css`
         &:hover {
-            background-color: ${theme.component['toggle-button-hover-background-color']};
-            border-color: ${theme.component['toggle-button-hover-border-color']};
-            color: ${theme.component['toggle-button-hover-text-color']};
+            background-color: ${theme.component['segmented-control-hover-background-color']};
+            border-color: ${theme.component['segmented-control-hover-border-color']};
+            color: ${theme.component['segmented-control-hover-text-color']};
 
             & + button {
-                border-left-color: ${theme.component['toggle-button-hover-border-color']};
+                border-left-color: ${theme.component['segmented-control-hover-border-color']};
             }
         }
     `}
diff --git a/packages/react/src/components/toggle-switch/toggle-switch.test.tsx.snap b/packages/react/src/components/toggle-switch/toggle-switch.test.tsx.snap
index f131bf40d6..5dfee290aa 100644
--- a/packages/react/src/components/toggle-switch/toggle-switch.test.tsx.snap
+++ b/packages/react/src/components/toggle-switch/toggle-switch.test.tsx.snap
@@ -38,8 +38,8 @@ exports[`ToggleSwitch Matches snapshot (desktop) 1`] = `
 }
 
 .c0[aria-checked='false'] {
-  background: #878F9A;
-  border-color: #B7BBC2;
+  background: #60666E;
+  border-color: #60666E;
 }
 
 .c0[aria-checked='false'] .c1 {
@@ -54,8 +54,8 @@ exports[`ToggleSwitch Matches snapshot (desktop) 1`] = `
 }
 
 .c0:disabled {
-  background: #DBDEE1;
-  border-color: #DBDEE1;
+  background: #B7BBC2;
+  border-color: #B7BBC2;
 }
 
 .c0:disabled[aria-checked='true'] {
@@ -78,7 +78,7 @@ exports[`ToggleSwitch Matches snapshot (desktop) 1`] = `
     />
   </button>,
   .c0 {
-  color: #000000;
+  color: #1B1C1E;
   font-size: 0.875rem;
   line-height: 1.5rem;
   margin-left: var(--spacing-1x);
@@ -136,8 +136,8 @@ exports[`ToggleSwitch Matches snapshot (mobile) 1`] = `
 }
 
 .c0[aria-checked='false'] {
-  background: #878F9A;
-  border-color: #B7BBC2;
+  background: #60666E;
+  border-color: #60666E;
 }
 
 .c0[aria-checked='false'] .c1 {
@@ -152,8 +152,8 @@ exports[`ToggleSwitch Matches snapshot (mobile) 1`] = `
 }
 
 .c0:disabled {
-  background: #DBDEE1;
-  border-color: #DBDEE1;
+  background: #B7BBC2;
+  border-color: #B7BBC2;
 }
 
 .c0:disabled[aria-checked='true'] {
@@ -176,7 +176,7 @@ exports[`ToggleSwitch Matches snapshot (mobile) 1`] = `
     />
   </button>,
   .c0 {
-  color: #000000;
+  color: #1B1C1E;
   font-size: 1rem;
   line-height: 2rem;
   margin-left: var(--spacing-1x);
@@ -234,8 +234,8 @@ exports[`ToggleSwitch has disabled styles 1`] = `
 }
 
 .c0[aria-checked='false'] {
-  background: #878F9A;
-  border-color: #B7BBC2;
+  background: #60666E;
+  border-color: #60666E;
 }
 
 .c0[aria-checked='false'] .c1 {
@@ -250,8 +250,8 @@ exports[`ToggleSwitch has disabled styles 1`] = `
 }
 
 .c0:disabled {
-  background: #DBDEE1;
-  border-color: #DBDEE1;
+  background: #B7BBC2;
+  border-color: #B7BBC2;
 }
 
 .c0:disabled[aria-checked='true'] {
@@ -275,7 +275,7 @@ exports[`ToggleSwitch has disabled styles 1`] = `
     />
   </button>,
   .c0 {
-  color: #000000;
+  color: #1B1C1E;
   font-size: 0.875rem;
   line-height: 1.5rem;
   margin-left: var(--spacing-1x);
diff --git a/packages/react/src/components/toggletip/toggletip.test.tsx.snap b/packages/react/src/components/toggletip/toggletip.test.tsx.snap
index fbbffde591..84f46f9cf2 100644
--- a/packages/react/src/components/toggletip/toggletip.test.tsx.snap
+++ b/packages/react/src/components/toggletip/toggletip.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
 .c0[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c0:disabled {
@@ -122,11 +122,11 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
 
 .c2 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 19%);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -158,7 +158,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="bottom"] > .c3::before {
-  border-color: transparent transparent #60666E transparent;
+  border-color: transparent transparent #878F9A transparent;
   border-width: 0 0.5rem 0.4rem;
   position: absolute;
   top: -1px;
@@ -178,7 +178,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="top"] > .c3::before {
-  border-color: #60666E transparent transparent transparent;
+  border-color: #878F9A transparent transparent transparent;
   border-width: 0.4rem 0.5rem 0;
   position: absolute;
   top: 1px;
@@ -197,7 +197,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="right"] > .c3::before {
-  border-color: transparent #60666E transparent transparent;
+  border-color: transparent #878F9A transparent transparent;
   border-width: 0.5rem 0.4rem 0.5rem 0;
 }
 
@@ -216,7 +216,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="left"] > .c3::before {
-  border-color: transparent transparent transparent #60666E;
+  border-color: transparent transparent transparent #878F9A;
   border-width: 0.5rem 0 0.5rem 0.4rem;
 }
 
@@ -438,7 +438,7 @@ exports[`Toggletip Has default desktop styles 1`] = `
 .c0[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c0:disabled {
@@ -614,7 +614,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
 .c0[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c0:disabled {
@@ -655,11 +655,11 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
 
 .c2 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 19%);
   box-sizing: border-box;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -691,7 +691,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="bottom"] > .c3::before {
-  border-color: transparent transparent #60666E transparent;
+  border-color: transparent transparent #878F9A transparent;
   border-width: 0 0.5rem 0.4rem;
   position: absolute;
   top: -1px;
@@ -711,7 +711,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="top"] > .c3::before {
-  border-color: #60666E transparent transparent transparent;
+  border-color: #878F9A transparent transparent transparent;
   border-width: 0.4rem 0.5rem 0;
   position: absolute;
   top: 1px;
@@ -730,7 +730,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="right"] > .c3::before {
-  border-color: transparent #60666E transparent transparent;
+  border-color: transparent #878F9A transparent transparent;
   border-width: 0.5rem 0.4rem 0.5rem 0;
 }
 
@@ -749,7 +749,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
 }
 
 .c2[data-popper-placement*="left"] > .c3::before {
-  border-color: transparent transparent transparent #60666E;
+  border-color: transparent transparent transparent #878F9A;
   border-width: 0.5rem 0 0.5rem 0.4rem;
 }
 
@@ -971,7 +971,7 @@ exports[`Toggletip Has mobile styles 1`] = `
 .c0[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
-  color: #1B1C1E;
+  color: #000000;
 }
 
 .c0:disabled {
diff --git a/packages/react/src/components/user-profile/user-profile.test.tsx.snap b/packages/react/src/components/user-profile/user-profile.test.tsx.snap
index 10050c454e..b77b9ded71 100644
--- a/packages/react/src/components/user-profile/user-profile.test.tsx.snap
+++ b/packages/react/src/components/user-profile/user-profile.test.tsx.snap
@@ -117,10 +117,10 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
 
 .c7 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -302,7 +302,7 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
 }
 
 .c10 {
-  color: #000000;
+  color: #1B1C1E;
   display: block;
   font-size: 0.875rem;
   line-height: 2rem;
@@ -318,7 +318,7 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -360,7 +360,7 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -402,7 +402,7 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -444,7 +444,7 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -483,11 +483,11 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
 }
 
 .c21:visited svg {
-  color: #000000;
+  color: #1B1C1E;
 }
 
 .c21 span {
-  color: #000000;
+  color: #1B1C1E;
   padding: 0 0 0 var(--spacing-half);
 }
 
@@ -809,10 +809,10 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
 
 .c7 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -994,7 +994,7 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
 }
 
 .c10 {
-  color: #000000;
+  color: #1B1C1E;
   display: block;
   font-size: 0.875rem;
   line-height: 2rem;
@@ -1010,7 +1010,7 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1052,7 +1052,7 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1094,7 +1094,7 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1136,7 +1136,7 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1175,11 +1175,11 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
 }
 
 .c21:visited svg {
-  color: #000000;
+  color: #1B1C1E;
 }
 
 .c21 span {
-  color: #000000;
+  color: #1B1C1E;
   padding: 0 0 0 var(--spacing-half);
 }
 
@@ -1509,10 +1509,10 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
 
 .c6 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -1684,7 +1684,7 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
 }
 
 .c9 {
-  color: #000000;
+  color: #1B1C1E;
   display: block;
   font-size: 1rem;
   line-height: 2.5rem;
@@ -1700,7 +1700,7 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1742,7 +1742,7 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1784,7 +1784,7 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1826,7 +1826,7 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1865,11 +1865,11 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
 }
 
 .c20:visited svg {
-  color: #000000;
+  color: #1B1C1E;
 }
 
 .c20 span {
-  color: #000000;
+  color: #1B1C1E;
   padding: 0 0 0 var(--spacing-half);
 }
 
@@ -2190,10 +2190,10 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
 
 .c7 {
   background-color: #FFFFFF;
-  border: 1px solid #60666E;
+  border: 1px solid #878F9A;
   border-radius: var(--border-radius);
   box-shadow: 0 10px 20px 0 rgb(0 0 0 / 0.2);
-  color: #000000;
+  color: #1B1C1E;
   list-style-type: none;
   position: absolute;
   width: 100%;
@@ -2375,7 +2375,7 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
 }
 
 .c10 {
-  color: #000000;
+  color: #1B1C1E;
   display: block;
   font-size: 0.875rem;
   line-height: 2rem;
@@ -2391,7 +2391,7 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2433,7 +2433,7 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2475,7 +2475,7 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2517,7 +2517,7 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  color: #000000;
+  color: #1B1C1E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2556,11 +2556,11 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
 }
 
 .c21:visited svg {
-  color: #000000;
+  color: #1B1C1E;
 }
 
 .c21 span {
-  color: #000000;
+  color: #1B1C1E;
   padding: 0 0 0 var(--spacing-half);
 }
 
diff --git a/packages/react/src/themes/tokens/alias-tokens.ts b/packages/react/src/themes/tokens/alias-tokens.ts
index f61825adb1..1260a43e47 100644
--- a/packages/react/src/themes/tokens/alias-tokens.ts
+++ b/packages/react/src/themes/tokens/alias-tokens.ts
@@ -17,26 +17,26 @@ export type AliasTokens =
     /**
      * FEEDBACK
      */
-    | 'color-bg-neutral-subtlest'
-    | 'color-bg-neutral-subtle'
-    | 'color-bg-neutral-bold'
-    | 'color-bg-neutral-bold-disabled'
-    | 'color-feedback-bg-success-subtle'
-    | 'color-feedback-bg-warning-subtle'
-    | 'color-feedback-bg-alert-subtle'
-    | 'color-feedback-bg-discovery-subtle'
-    | 'color-feedback-bg-informative-subtle'
-    | 'color-feedback-bg-success-subtlest'
-    | 'color-feedback-bg-warning-subtlest'
-    | 'color-feedback-bg-alert-subtlest'
-    | 'color-feedback-bg-discovery-subtlest'
-    | 'color-feedback-bg-informative-subtlest'
-    | 'color-feedback-bg-success-bold'
-    | 'color-feedback-bg-success-bold-disabled'
-    | 'color-feedback-bg-alert-bold'
-    | 'color-feedback-bg-warning-bold'
-    | 'color-feedback-bg-discovery-bold'
-    | 'color-feedback-bg-informative-bold'
+    | 'color-background-neutral-subtlest'
+    | 'color-background-neutral-subtle'
+    | 'color-background-neutral-bold'
+    | 'color-background-neutral-bold-disabled'
+    | 'color-feedback-background-success-subtle'
+    | 'color-feedback-background-warning-subtle'
+    | 'color-feedback-background-alert-subtle'
+    | 'color-feedback-background-discovery-subtle'
+    | 'color-feedback-background-informative-subtle'
+    | 'color-feedback-background-success-subtlest'
+    | 'color-feedback-background-warning-subtlest'
+    | 'color-feedback-background-alert-subtlest'
+    | 'color-feedback-background-discovery-subtlest'
+    | 'color-feedback-background-informative-subtlest'
+    | 'color-feedback-background-success-bold'
+    | 'color-feedback-background-success-bold-disabled'
+    | 'color-feedback-background-alert-bold'
+    | 'color-feedback-background-warning-bold'
+    | 'color-feedback-background-discovery-bold'
+    | 'color-feedback-background-informative-bold'
     | 'color-feedback-border-success'
     | 'color-feedback-border-warning'
     | 'color-feedback-border-alert'
@@ -48,33 +48,36 @@ export type AliasTokens =
     | 'color-feedback-content-discovery'
     | 'color-feedback-content-informative'
     /**
-     * INPUT
-     */
-    | 'color-input-bg'
-    | 'color-input-bg-hover'
-    | 'color-input-bg-disabled'
-    | 'color-input-bg-checked'
-    | 'color-input-bg-selected'
-    | 'color-input-border'
-    | 'color-input-border-hover'
-    | 'color-input-border-disabled'
-    | 'color-input-border-selected'
-    | 'color-input-border-checked'
-    | 'color-input-border-error'
-    | 'color-input-content'
-    | 'color-input-content-hover'
-    | 'color-input-content-disabled'
-    | 'color-input-content-error'
-    | 'color-input-content-success'
-    | 'color-input-content-checked'
-    | 'color-input-content-selected'
+     * CONTROL
+     */
+    | 'color-control-background'
+    | 'color-control-background-hover'
+    | 'color-control-background-disabled'
+    | 'color-control-background-checked'
+    | 'color-control-background-selected'
+    | 'color-control-border'
+    | 'color-control-border-hover'
+    | 'color-control-border-disabled'
+    | 'color-control-border-selected'
+    | 'color-control-border-checked'
+    | 'color-control-border-error'
+    | 'color-control-value'
+    | 'color-control-value-hover'
+    | 'color-control-value-disabled'
+    | 'color-control-auxiliary'
+    | 'color-control-auxiliary-hover'
+    | 'color-control-auxiliary-disabled'
+    | 'color-control-auxiliary-error'
+    | 'color-control-auxiliary-success'
+    | 'color-control-auxiliary-checked'
+    | 'color-control-auxiliary-selected'
     /**
      * MENU
      */
-    | 'color-menu-bg'
+    | 'color-menu-background'
     | 'color-menu-border'
-    | 'color-menu-item-bg'
-    | 'color-menu-item-bg-hover'
+    | 'color-menu-item-background'
+    | 'color-menu-item-background-hover'
     | 'color-menu-item-content'
     | 'color-menu-item-subcontent'
     | 'color-menu-item-content-hover'
@@ -82,24 +85,25 @@ export type AliasTokens =
     /**
      * BRAND
      */
-    | 'color-bg-brand-subtle'
-    | 'color-bg-brand'
-    | 'color-bg-brand-bold'
-    | 'color-bg-indicator'
+    | 'color-background-brand-subtle'
+    | 'color-background-brand'
+    | 'color-background-brand-bold'
+    | 'color-background-indicator-selected'
+    | 'color-background-indicator-active'
     | 'color-border-brand'
     | 'color-content-brand'
     /**
      * BACKGROUND
      */
-    | 'color-bg'
-    | 'color-bg-overlay'
-    | 'color-bg-isolated'
-    | 'color-bg-disabled'
-    | 'color-bg-empty'
-    | 'color-bg-hover'
-    | 'color-bg-selected'
-    | 'color-bg-selected-hover'
-    | 'color-blanket-bg'
+    | 'color-background'
+    | 'color-background-overlay'
+    | 'color-background-isolated'
+    | 'color-background-disabled'
+    | 'color-background-empty'
+    | 'color-background-hover'
+    | 'color-background-selected'
+    | 'color-background-selected-hover'
+    | 'color-backdrop-background'
     /**
      * BORDER
      */
@@ -173,92 +177,95 @@ export const defaultAliasTokens: AliasTokenMap = {
     /**
      * NEUTRAL
      *  Use for default background of neutral UI elements,
-     *  sometimes on a subtle background. Could also be named color-bg-inverse.
+     *  sometimes on a subtle background. Could also be named color-background-inverse.
      */
-    'color-bg-neutral-subtlest': 'color-neutral-02',
-    'color-bg-neutral-subtle': 'color-neutral-05',
-    'color-bg-neutral-bold': 'color-neutral-65',
-    'color-bg-neutral-bold-disabled': 'color-neutral-30',
+    'color-background-neutral-subtlest': 'color-neutral-02',
+    'color-background-neutral-subtle': 'color-neutral-05',
+    'color-background-neutral-bold': 'color-neutral-65',
+    'color-background-neutral-bold-disabled': 'color-neutral-30',
     /**
      * SUCCESS
      *  Use for UI elements communicating a favorable outcome and success messaging.
      */
-    'color-feedback-bg-success-subtlest': 'color-success-02',
-    'color-feedback-bg-success-subtle': 'color-success-05',
-    'color-feedback-bg-success-bold': 'color-success-50',
-    'color-feedback-bg-success-bold-disabled': 'color-success-20',
+    'color-feedback-background-success-subtlest': 'color-success-02',
+    'color-feedback-background-success-subtle': 'color-success-05',
+    'color-feedback-background-success-bold': 'color-success-50',
+    'color-feedback-background-success-bold-disabled': 'color-success-20',
     'color-feedback-border-success': 'color-success-50',
     'color-feedback-content-success': 'color-success-70',
     /**
      * ALERT
      *  Use for UI elements communicating critical information and error messaging.
      */
-    'color-feedback-bg-alert-subtlest': 'color-alert-02',
-    'color-feedback-bg-alert-subtle': 'color-alert-05',
-    'color-feedback-bg-alert-bold': 'color-alert-50',
+    'color-feedback-background-alert-subtlest': 'color-alert-02',
+    'color-feedback-background-alert-subtle': 'color-alert-05',
+    'color-feedback-background-alert-bold': 'color-alert-50',
     'color-feedback-border-alert': 'color-alert-50',
     'color-feedback-content-alert': 'color-alert-70',
     /**
      * WARNING
      *  Use for UI elements communicating caution.
      */
-    'color-feedback-bg-warning-subtlest': 'color-warning-02',
-    'color-feedback-bg-warning-subtle': 'color-warning-05',
-    'color-feedback-bg-warning-bold': 'color-warning-50',
+    'color-feedback-background-warning-subtlest': 'color-warning-02',
+    'color-feedback-background-warning-subtle': 'color-warning-05',
+    'color-feedback-background-warning-bold': 'color-warning-50',
     'color-feedback-border-warning': 'color-warning-50',
     'color-feedback-content-warning': 'color-warning-80',
     /**
      * DISCOVERY
      *  Use for UI elements communicating change, something new or onboarding spotlights.
      */
-    'color-feedback-bg-discovery-subtlest': 'color-discovery-02',
-    'color-feedback-bg-discovery-subtle': 'color-discovery-05',
-    'color-feedback-bg-discovery-bold': 'color-discovery-50',
+    'color-feedback-background-discovery-subtlest': 'color-discovery-02',
+    'color-feedback-background-discovery-subtle': 'color-discovery-05',
+    'color-feedback-background-discovery-bold': 'color-discovery-50',
     'color-feedback-border-discovery': 'color-discovery-50',
     'color-feedback-content-discovery': 'color-discovery-70',
     /**
      * INFORMATIVE
      *  Use for UI elements communicating information or something in-progress.
      */
-    'color-feedback-bg-informative-subtlest': 'color-informative-02',
-    'color-feedback-bg-informative-subtle': 'color-informative-05',
-    'color-feedback-bg-informative-bold': 'color-informative-50',
+    'color-feedback-background-informative-subtlest': 'color-informative-02',
+    'color-feedback-background-informative-subtle': 'color-informative-05',
+    'color-feedback-background-informative-bold': 'color-informative-50',
     'color-feedback-border-informative': 'color-informative-50',
     'color-feedback-content-informative': 'color-informative-70',
 
     /**
-     * INPUT
-     *  Use for form UI elements, such as inputs, checkboxes, radio buttons, etc.
+     * CONTROL
+     *  Use for form UI elements, such as inputs, checkboxes, radio buttons, choosers, segmented controls, etc.
      */
-    'color-input-bg': 'color-white',
-    'color-input-bg-hover': 'color-neutral-15',
-    'color-input-bg-disabled': 'color-neutral-05',
-    'color-input-bg-checked': 'color-brand-50',
-    'color-input-bg-selected': 'color-brand-05',
+    'color-control-background': 'color-white',
+    'color-control-background-hover': 'color-neutral-15',
+    'color-control-background-disabled': 'color-neutral-05',
+    'color-control-background-checked': 'color-brand-50',
+    'color-control-background-selected': 'color-brand-05',
 
-    'color-input-border': 'color-neutral-65',
-    'color-input-border-hover': 'color-black',
-    'color-input-border-disabled': 'color-neutral-30',
-    'color-input-border-selected': 'color-brand-50',
-    'color-input-border-checked': 'color-brand-50',
-    'color-input-border-error': 'color-alert-50',
+    'color-control-border': 'color-neutral-65',
+    'color-control-border-hover': 'color-black',
+    'color-control-border-disabled': 'color-neutral-30',
+    'color-control-border-selected': 'color-brand-50',
+    'color-control-border-checked': 'color-brand-50',
+    'color-control-border-error': 'color-alert-50',
 
-    'color-input-content': 'color-neutral-65',
-    'color-input-content-hover': 'color-black',
-    'color-input-content-disabled': 'color-neutral-30',
-    'color-input-content-error': 'color-alert-50',
-    'color-input-content-success': 'color-success-50',
-    'color-input-content-checked': 'color-white',
-    'color-input-content-selected': 'color-brand-70',
+    'color-control-value': 'color-content',
+    'color-control-value-hover': 'color-content-hover',
+    'color-control-value-disabled': 'color-content-disabled',
+    'color-control-auxiliary': 'color-neutral-65',
+    'color-control-auxiliary-hover': 'color-black',
+    'color-control-auxiliary-disabled': 'color-neutral-30',
+    'color-control-auxiliary-error': 'color-alert-50',
+    'color-control-auxiliary-success': 'color-success-50',
+    'color-control-auxiliary-checked': 'color-white',
+    'color-control-auxiliary-selected': 'color-brand-70',
 
     /**
      * MENU
      * Used for menus, dropdown menus, listbox, navigation list and their items.
      */
-    'color-menu-bg': 'color-bg-overlay',
+    'color-menu-background': 'color-background-overlay',
     'color-menu-border': 'color-border-overlay',
-    'color-menu-item-bg': 'transparent-100',
-    'color-menu-item-bg-hover': 'color-bg-hover', // should use transparency instead
+    'color-menu-item-background': 'transparent-100',
+    'color-menu-item-background-hover': 'color-background-hover', // should use transparency instead
     'color-menu-item-content': 'color-content',
     'color-menu-item-subcontent': 'color-content-subtle',
     'color-menu-item-content-hover': 'color-content-hover',
@@ -278,10 +285,11 @@ export const defaultAliasTokens: AliasTokenMap = {
      * content (text & icons)
      *  used for progress trackers
      */
-    'color-bg-brand-subtle': 'color-brand-20',
-    'color-bg-brand': 'color-brand-50',
-    'color-bg-brand-bold': 'color-brand-80',
-    'color-bg-indicator': 'color-brand-50',
+    'color-background-brand-subtle': 'color-brand-20',
+    'color-background-brand': 'color-brand-50',
+    'color-background-brand-bold': 'color-brand-80',
+    'color-background-indicator-selected': 'color-brand-50',
+    'color-background-indicator-active': 'color-brand-80',
     'color-border-brand': 'color-brand-70',
     'color-content-brand': 'color-brand-50',
 
@@ -292,50 +300,50 @@ export const defaultAliasTokens: AliasTokenMap = {
     /**
      * Use as the primary surface base background of the UI.
      */
-    'color-bg': 'color-white',
+    'color-background': 'color-white',
     /**
      * Use for the elevation surface background of elements that sit on top of other UI elements,
      * such as modals, menus, datepicker calendar, global navigation, toggletips, etc.
      */
-    'color-bg-overlay': 'color-white',
+    'color-background-overlay': 'color-white',
     /**
      * A secondary elevation surface background for the UI commonly used for
      * grouped or isolated items, such as sections, accordion panels, table even rows, etc.
      */
-    'color-bg-isolated': 'color-neutral-02',
+    'color-background-isolated': 'color-neutral-02',
 
     /**
      * Use for the background of elements that appear to have no background in a resting state,
      * such as subtle buttons and menu items.
      */
-    // 'color-bg-subtle': 'transparent-100',
+    // 'color-background-subtle': 'transparent-100',
 
     /**
      * Use for backgrounds of elements in a hovered state,
      * such as navigation elements like accordion headers, card links, table cells, clickable tags, etc.
      */
-    'color-bg-hover': 'color-neutral-15',
+    'color-background-hover': 'color-neutral-15',
     /**
      * Use for backgrounds of elements in a disabled state,
      * such as menu items, navigation elements like accordion, etc.
      */
-    'color-bg-disabled': 'color-neutral-05',
+    'color-background-disabled': 'color-neutral-05',
     /**
      * Use for backgrounds of elements in an empty state,
      * such as carousel dots, progress elements, etc.
      */
-    'color-bg-empty': 'color-neutral-15',
+    'color-background-empty': 'color-neutral-15',
     /**
      * Use for the background of elements in a selected state,
      * such as naviaation elements like pagination pages or items like table rows.
      */
-    'color-bg-selected': 'color-brand-05',
-    'color-bg-selected-hover': 'color-brand-10', // should use transparency instead
+    'color-background-selected': 'color-brand-05',
+    'color-background-selected-hover': 'color-brand-10', // should use transparency instead
 
     /**
      * Use for the screen overlay that appears with modal dialogs
      */
-    'color-blanket-bg': 'transparent-dark-75',
+    'color-backdrop-background': 'transparent-dark-75',
 
     /**
      * BORDER
diff --git a/packages/react/src/themes/tokens/component-tokens.ts b/packages/react/src/themes/tokens/component-tokens.ts
index c7b71d35ee..f479c503c6 100644
--- a/packages/react/src/themes/tokens/component-tokens.ts
+++ b/packages/react/src/themes/tokens/component-tokens.ts
@@ -1,6 +1,7 @@
 import { AliasTokens } from './alias-tokens';
 import { AvatarTokens, defaultAvatarTokens } from './component/avatar-tokens';
 import { BentoMenuButtonTokens, defaultBentoMenuButtonTokens } from './component/bento-menu-button-tokens';
+import { BreadcrumbTokens, defaultBreadcrumbTokens } from './component/breadcrumb-tokens';
 import { ButtonTokens, defaultButtonTokens } from './component/button-tokens';
 import { CheckboxTokens, defaultCheckboxTokens } from './component/checkbox-tokens';
 import { ChooserTokens, defaultChooserTokens } from './component/chooser-tokens';
@@ -28,7 +29,7 @@ import { defaultRadioCardTokens, RadioCardTokens } from './component/radio-card-
 import { defaultSearchInputTokens, SearchInputTokens } from './component/search-input-tokens';
 import { defaultStepperTokens, StepperTokens } from './component/stepper-tokens';
 import { defaultTextAreaTokens, TextAreaTokens } from './component/text-area-tokens';
-import { defaultToggleButtonGroupTokens, ToggleButtonGroupTokens } from './component/toggle-button-group-tokens';
+import { defaultSegmentedControlTokens, SegmentedControlTokens } from './component/segmented-control-tokens';
 import { defaultToggleSwitchTokens, ToggleSwitchTokens } from './component/toggle-switch-tokens';
 import { defaultLegendTokens, LegendTokens } from './component/legend-tokens';
 import { defaultLozengeTokens, LozengeTokens } from './component/lozenge-tokens';
@@ -55,6 +56,7 @@ export type ComponentTokens =
     | AvatarTokens
     | BentoMenuButtonTokens
     | ButtonTokens
+    | BreadcrumbTokens
     | FocusTokens
     | HeadingTokens
     | LabelTokens
@@ -73,7 +75,7 @@ export type ComponentTokens =
     | TextAreaTokens
     | FieldTokens
     | RadioButtonGroupTokens
-    | ToggleButtonGroupTokens
+    | SegmentedControlTokens
     | ToggleSwitchTokens
     | TextInputTokens
     | RadioCardTokens
@@ -136,7 +138,7 @@ export const defaultComponentTokens: ComponentTokenMap = {
     ...defaultTextAreaTokens,
     ...defaultFieldTokens,
     ...defaultRadioButtonGroupTokens,
-    ...defaultToggleButtonGroupTokens,
+    ...defaultSegmentedControlTokens,
     ...defaultToggleSwitchTokens,
     ...defaultTextInputTokens,
     ...defaultRadioCardTokens,
@@ -160,6 +162,7 @@ export const defaultComponentTokens: ComponentTokenMap = {
     ...defaultDropdownMenuTokens,
     ...defaultLozengeTokens,
     ...defaultGlobalNavigationTokens,
+    ...defaultBreadcrumbTokens,
 };
 
 export type ResolvedComponentTokenValue = RefTokenValue;
diff --git a/packages/react/src/themes/tokens/component/accordion-tokens.ts b/packages/react/src/themes/tokens/component/accordion-tokens.ts
index 561ea139ea..6b47e8d7f1 100644
--- a/packages/react/src/themes/tokens/component/accordion-tokens.ts
+++ b/packages/react/src/themes/tokens/component/accordion-tokens.ts
@@ -14,8 +14,7 @@ export type AccordionTokens =
     | 'accordion-header-disabled-background-color'
     | 'accordion-header-disabled-border-color'
     | 'accordion-header-disabled-text-color'
-    | 'accordion-header-disabled-icon-color'
-    | 'accordion-header-focus-box-shadow-inset-color';
+    | 'accordion-header-disabled-icon-color';
 
 export type AccordionTokenValue = AliasTokens | RefTokens;
 
@@ -24,18 +23,17 @@ export type AccordionTokenMap = {
 };
 
 export const defaultAccordionTokens: AccordionTokenMap = {
-    'accordion-panel-background-color': 'color-neutral-02',
-    'accordion-panel-border-color': 'color-neutral-15',
-    'accordion-panel-text-color': 'color-neutral-90',
-    'accordion-header-background-color': 'color-white',
-    'accordion-header-border-color': 'color-neutral-15',
-    'accordion-header-text-color': 'color-neutral-90',
-    'accordion-header-hover-background-color': 'color-neutral-15',
-    'accordion-header-hover-border-color': 'color-black',
-    'accordion-header-hover-text-color': 'color-black',
-    'accordion-header-disabled-background-color': 'color-neutral-05',
-    'accordion-header-disabled-border-color': 'color-neutral-15',
-    'accordion-header-disabled-text-color': 'color-neutral-30',
-    'accordion-header-disabled-icon-color': 'color-neutral-30',
-    'accordion-header-focus-box-shadow-inset-color': 'color-brand-20',
+    'accordion-panel-background-color': 'color-background-isolated',
+    'accordion-panel-border-color': 'color-border',
+    'accordion-panel-text-color': 'color-content',
+    'accordion-header-background-color': 'color-background',
+    'accordion-header-border-color': 'color-border',
+    'accordion-header-text-color': 'color-content',
+    'accordion-header-hover-background-color': 'color-background-hover',
+    'accordion-header-hover-border-color': 'color-border-hover',
+    'accordion-header-hover-text-color': 'color-content-hover',
+    'accordion-header-disabled-background-color': 'color-background-disabled',
+    'accordion-header-disabled-border-color': 'color-border-disabled',
+    'accordion-header-disabled-text-color': 'color-content-disabled',
+    'accordion-header-disabled-icon-color': 'color-content-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/avatar-tokens.ts b/packages/react/src/themes/tokens/component/avatar-tokens.ts
index c7ebbda025..df7565a867 100644
--- a/packages/react/src/themes/tokens/component/avatar-tokens.ts
+++ b/packages/react/src/themes/tokens/component/avatar-tokens.ts
@@ -12,6 +12,6 @@ export type AvatarTokenMap = {
 };
 
 export const defaultAvatarTokens: AvatarTokenMap = {
-    'avatar-background-color': 'color-neutral-05',
-    'avatar-text-color': 'color-neutral-65',
+    'avatar-background-color': 'color-background-neutral-subtle',
+    'avatar-text-color': 'color-content-subtle',
 };
diff --git a/packages/react/src/themes/tokens/component/badge-tokens.ts b/packages/react/src/themes/tokens/component/badge-tokens.ts
index 436b70a6a5..a6676b77c4 100644
--- a/packages/react/src/themes/tokens/component/badge-tokens.ts
+++ b/packages/react/src/themes/tokens/component/badge-tokens.ts
@@ -12,6 +12,6 @@ export type BadgeTokenMap = {
 };
 
 export const defaultBadgeTokens: BadgeTokenMap = {
-    'badge-background-color': 'color-alert-50',
-    'badge-text-color': 'color-white',
+    'badge-background-color': 'color-feedback-background-alert-bold',
+    'badge-text-color': 'color-content-inverse',
 };
diff --git a/packages/react/src/themes/tokens/component/breadcrumb-tokens.ts b/packages/react/src/themes/tokens/component/breadcrumb-tokens.ts
new file mode 100644
index 0000000000..c0e82e92ff
--- /dev/null
+++ b/packages/react/src/themes/tokens/component/breadcrumb-tokens.ts
@@ -0,0 +1,23 @@
+import { AliasTokens } from '../alias-tokens';
+import { RefTokens } from '../ref-tokens';
+
+export type BreadcrumbTokens =
+    | 'breadcrumb-link-color'
+    | 'breadcrumb-link-hover-color'
+    | 'breadcrumb-link-active-color'
+    | 'breadcrumb-link-disabled-color'
+    | 'breadcrumb-separator-color';
+
+export type BreadcrumbTokensValue = AliasTokens | RefTokens;
+
+export type BreadcrumbTokensMap = {
+    [Token in BreadcrumbTokens]: BreadcrumbTokensValue;
+};
+
+export const defaultBreadcrumbTokens : BreadcrumbTokensMap = {
+    'breadcrumb-link-active-color': 'color-content',
+    'breadcrumb-link-color': 'color-content-subtle',
+    'breadcrumb-link-disabled-color': 'color-content-disabled',
+    'breadcrumb-link-hover-color': 'color-content-hover',
+    'breadcrumb-separator-color': 'color-content-subtle',
+};
diff --git a/packages/react/src/themes/tokens/component/button-tokens.ts b/packages/react/src/themes/tokens/component/button-tokens.ts
index e8ff32bd35..387c7c8ccf 100644
--- a/packages/react/src/themes/tokens/component/button-tokens.ts
+++ b/packages/react/src/themes/tokens/component/button-tokens.ts
@@ -129,170 +129,170 @@ export type ButtonTokenMap = {
 export const defaultButtonTokens: ButtonTokenMap = {
 
     // Primary
-    'button-primary-background-color': 'color-brand-50',
-    'button-primary-border-color': 'color-brand-50',
-    'button-primary-text-color': 'color-white',
+    'button-primary-background-color': 'color-action',
+    'button-primary-border-color': 'color-action',
+    'button-primary-text-color': 'color-action-inverse',
     // Primary hover
-    'button-primary-hover-background-color': 'color-brand-70',
-    'button-primary-hover-border-color': 'color-brand-70',
-    'button-primary-hover-text-color': 'color-white',
+    'button-primary-hover-background-color': 'color-action-hover',
+    'button-primary-hover-border-color': 'color-action-hover',
+    'button-primary-hover-text-color': 'color-action-inverse',
     // Primary disabled
-    'button-primary-disabled-background-color': 'color-brand-20',
-    'button-primary-disabled-border-color': 'color-brand-20',
-    'button-primary-disabled-text-color': 'color-white',
+    'button-primary-disabled-background-color': 'color-action-disabled',
+    'button-primary-disabled-border-color': 'color-action-disabled',
+    'button-primary-disabled-text-color': 'color-action-inverse',
 
     // Primary inverted
-    'button-primary-inverted-background-color': 'color-white',
-    'button-primary-inverted-border-color': 'color-white',
-    'button-primary-inverted-text-color': 'color-brand-50',
+    'button-primary-inverted-background-color': 'color-action-inverse',
+    'button-primary-inverted-border-color': 'color-action-inverse',
+    'button-primary-inverted-text-color': 'color-action',
     // Primary inverted hover
-    'button-primary-inverted-hover-background-color': 'color-white',
-    'button-primary-inverted-hover-border-color': 'color-white',
-    'button-primary-inverted-hover-text-color': 'color-brand-70',
+    'button-primary-inverted-hover-background-color': 'color-action-inverse-hover',
+    'button-primary-inverted-hover-border-color': 'color-action-inverse-hover',
+    'button-primary-inverted-hover-text-color': 'color-action-hover',
     // Primary inverted disabled
-    'button-primary-inverted-disabled-background-color': 'color-white',
-    'button-primary-inverted-disabled-border-color': 'color-white',
-    'button-primary-inverted-disabled-text-color': 'color-brand-20',
+    'button-primary-inverted-disabled-background-color': 'color-action-inverse-disabled',
+    'button-primary-inverted-disabled-border-color': 'color-action-inverse-disabled',
+    'button-primary-inverted-disabled-text-color': 'color-action-disabled',
 
     // Secondary
-    'button-secondary-background-color': 'color-white',
-    'button-secondary-border-color': 'color-brand-50',
-    'button-secondary-text-color': 'color-brand-50',
+    'button-secondary-background-color': 'transparent-100',
+    'button-secondary-border-color': 'color-action',
+    'button-secondary-text-color': 'color-action',
     // Secondary hover
-    'button-secondary-hover-background-color': 'color-white',
-    'button-secondary-hover-border-color': 'color-brand-70',
-    'button-secondary-hover-text-color': 'color-brand-70',
+    'button-secondary-hover-background-color': 'transparent-100',
+    'button-secondary-hover-border-color': 'color-action-hover',
+    'button-secondary-hover-text-color': 'color-action-hover',
     // Secondary disabled
-    'button-secondary-disabled-background-color': 'color-white',
-    'button-secondary-disabled-border-color': 'color-brand-20',
-    'button-secondary-disabled-text-color': 'color-brand-20',
+    'button-secondary-disabled-background-color': 'transparent-100',
+    'button-secondary-disabled-border-color': 'color-action-disabled',
+    'button-secondary-disabled-text-color': 'color-action-disabled',
     // Secondary inverted
     'button-secondary-inverted-background-color': 'transparent-100',
-    'button-secondary-inverted-border-color': 'color-white',
-    'button-secondary-inverted-text-color': 'color-white',
+    'button-secondary-inverted-border-color': 'color-action-inverse',
+    'button-secondary-inverted-text-color': 'color-action-inverse',
     // Secondary inverted hover
     'button-secondary-inverted-hover-background-color': 'transparent-100',
-    'button-secondary-inverted-hover-border-color': 'color-brand-20',
-    'button-secondary-inverted-hover-text-color': 'color-brand-20',
+    'button-secondary-inverted-hover-border-color': 'color-action-inverse-hover',
+    'button-secondary-inverted-hover-text-color': 'color-action-inverse-hover',
     // Secondary inverted disabled
     'button-secondary-inverted-disabled-background-color': 'transparent-100',
-    'button-secondary-inverted-disabled-border-color': 'color-brand-50',
-    'button-secondary-inverted-disabled-text-color': 'color-brand-50',
+    'button-secondary-inverted-disabled-border-color': 'color-action-inverse-disabled',
+    'button-secondary-inverted-disabled-text-color': 'color-action-inverse-disabled',
 
     // Tertiary
     'button-tertiary-background-color': 'transparent-100',
     'button-tertiary-border-color': 'transparent-100',
-    'button-tertiary-text-color': 'color-neutral-65',
+    'button-tertiary-text-color': 'color-content-subtle',
     // Tertiary hover
     'button-tertiary-hover-background-color': 'transparent-dark-15',
     'button-tertiary-hover-border-color': 'transparent-100',
-    'button-tertiary-hover-text-color': 'color-neutral-90',
+    'button-tertiary-hover-text-color': 'color-content-hover',
     // Tertiary disabled
     'button-tertiary-disabled-background-color': 'transparent-100',
     'button-tertiary-disabled-border-color': 'transparent-100',
-    'button-tertiary-disabled-text-color': 'color-neutral-30',
+    'button-tertiary-disabled-text-color': 'color-content-disabled',
 
     // Tertiary inverted
     'button-tertiary-inverted-background-color': 'transparent-100',
     'button-tertiary-inverted-border-color': 'transparent-100',
-    'button-tertiary-inverted-text-color': 'color-white',
+    'button-tertiary-inverted-text-color': 'color-action-inverse',
     // Tertiary inverted hover
     'button-tertiary-inverted-hover-background-color': 'transparent-dark-50',
     'button-tertiary-inverted-hover-border-color': 'transparent-100',
-    'button-tertiary-inverted-hover-text-color': 'color-white',
+    'button-tertiary-inverted-hover-text-color': 'color-action-inverse',
     // Tertiary inverted disabled
     'button-tertiary-inverted-disabled-background-color': 'transparent-100',
     'button-tertiary-inverted-disabled-border-color': 'transparent-100',
-    'button-tertiary-inverted-disabled-text-color': 'color-brand-50',
+    'button-tertiary-inverted-disabled-text-color': 'color-action-inverse-disabled',
 
     // Destructive
-    'button-destructive-primary-background-color': 'color-alert-50',
-    'button-destructive-primary-border-color': 'color-alert-50',
-    'button-destructive-primary-text-color': 'color-white',
+    'button-destructive-primary-background-color': 'color-action-destructive',
+    'button-destructive-primary-border-color': 'color-action-destructive',
+    'button-destructive-primary-text-color': 'color-action-inverse',
     // Destructive hover
-    'button-destructive-primary-hover-background-color': 'color-alert-70',
-    'button-destructive-primary-hover-border-color': 'color-alert-70',
-    'button-destructive-primary-hover-text-color': 'color-white',
+    'button-destructive-primary-hover-background-color': 'color-action-destructive-hover',
+    'button-destructive-primary-hover-border-color': 'color-action-destructive-hover',
+    'button-destructive-primary-hover-text-color': 'color-action-inverse',
     // Destructive disabled
-    'button-destructive-primary-disabled-background-color': 'color-alert-20',
-    'button-destructive-primary-disabled-border-color': 'color-alert-20',
-    'button-destructive-primary-disabled-text-color': 'color-white',
+    'button-destructive-primary-disabled-background-color': 'color-action-destructive-disabled',
+    'button-destructive-primary-disabled-border-color': 'color-action-destructive-disabled',
+    'button-destructive-primary-disabled-text-color': 'color-action-inverse',
 
     // Destructive inverted
-    'button-destructive-primary-inverted-background-color': 'color-white',
-    'button-destructive-primary-inverted-border-color': 'color-white',
-    'button-destructive-primary-inverted-text-color': 'color-alert-50',
+    'button-destructive-primary-inverted-background-color': 'color-action-inverse',
+    'button-destructive-primary-inverted-border-color': 'color-action-inverse',
+    'button-destructive-primary-inverted-text-color': 'color-action-destructive',
     // Destructive inverted hover
-    'button-destructive-primary-inverted-hover-background-color': 'color-white',
-    'button-destructive-primary-inverted-hover-border-color': 'color-white',
-    'button-destructive-primary-inverted-hover-text-color': 'color-alert-70',
+    'button-destructive-primary-inverted-hover-background-color': 'color-action-inverse',
+    'button-destructive-primary-inverted-hover-border-color': 'color-action-inverse',
+    'button-destructive-primary-inverted-hover-text-color': 'color-action-destructive-hover',
     // Destructive inverted disabled
-    'button-destructive-primary-inverted-disabled-background-color': 'color-white',
-    'button-destructive-primary-inverted-disabled-border-color': 'color-white',
-    'button-destructive-primary-inverted-disabled-text-color': 'color-alert-20',
+    'button-destructive-primary-inverted-disabled-background-color': 'color-action-inverse',
+    'button-destructive-primary-inverted-disabled-border-color': 'color-action-inverse',
+    'button-destructive-primary-inverted-disabled-text-color': 'color-action-destructive-disabled',
 
     // Secondary destructive
-    'button-destructive-secondary-background-color': 'color-white',
-    'button-destructive-secondary-border-color': 'color-alert-50',
-    'button-destructive-secondary-text-color': 'color-alert-50',
+    'button-destructive-secondary-background-color': 'transparent-100',
+    'button-destructive-secondary-border-color': 'color-action-destructive',
+    'button-destructive-secondary-text-color': 'color-action-destructive',
     // Secondary destructive hover
-    'button-destructive-secondary-hover-background-color': 'color-white',
-    'button-destructive-secondary-hover-border-color': 'color-alert-70',
-    'button-destructive-secondary-hover-text-color': 'color-alert-70',
+    'button-destructive-secondary-hover-background-color': 'transparent-100',
+    'button-destructive-secondary-hover-border-color': 'color-action-destructive-hover',
+    'button-destructive-secondary-hover-text-color': 'color-action-destructive-hover',
     // Secondary destructive disabled
-    'button-destructive-secondary-disabled-background-color': 'color-white',
-    'button-destructive-secondary-disabled-border-color': 'color-alert-20',
-    'button-destructive-secondary-disabled-text-color': 'color-alert-20',
+    'button-destructive-secondary-disabled-background-color': 'transparent-100',
+    'button-destructive-secondary-disabled-border-color': 'color-action-destructive-disabled',
+    'button-destructive-secondary-disabled-text-color': 'color-action-destructive-disabled',
 
     // Secondary destructive inverted
     'button-destructive-secondary-inverted-background-color': 'transparent-100',
-    'button-destructive-secondary-inverted-border-color': 'color-alert-50',
-    'button-destructive-secondary-inverted-text-color': 'color-alert-50',
+    'button-destructive-secondary-inverted-border-color': 'color-action-destructive',
+    'button-destructive-secondary-inverted-text-color': 'color-action-destructive',
     // Secondary destructive inverted hover
     'button-destructive-secondary-inverted-hover-background-color': 'transparent-100',
-    'button-destructive-secondary-inverted-hover-border-color': 'color-alert-70',
-    'button-destructive-secondary-inverted-hover-text-color': 'color-alert-70',
+    'button-destructive-secondary-inverted-hover-border-color': 'color-action-destructive-hover',
+    'button-destructive-secondary-inverted-hover-text-color': 'color-action-destructive-hover',
     // Secondary destructive inverted disabled
     'button-destructive-secondary-inverted-disabled-background-color': 'transparent-100',
-    'button-destructive-secondary-inverted-disabled-border-color': 'color-alert-20',
-    'button-destructive-secondary-inverted-disabled-text-color': 'color-alert-20',
+    'button-destructive-secondary-inverted-disabled-border-color': 'color-action-destructive-disabled',
+    'button-destructive-secondary-inverted-disabled-text-color': 'color-action-destructive-disabled',
 
     // Tertiary destructive
     'button-destructive-tertiary-background-color': 'transparent-100',
     'button-destructive-tertiary-border-color': 'transparent-100',
-    'button-destructive-tertiary-text-color': 'color-alert-50',
+    'button-destructive-tertiary-text-color': 'color-action-destructive',
     // Tertiary destructive hover
     'button-destructive-tertiary-hover-background-color': 'color-alert-05',
     'button-destructive-tertiary-hover-border-color': 'transparent-100',
-    'button-destructive-tertiary-hover-text-color': 'color-alert-70',
+    'button-destructive-tertiary-hover-text-color': 'color-action-destructive-hover',
     // Tertiary destructive disabled
     'button-destructive-tertiary-disabled-background-color': 'transparent-100',
     'button-destructive-tertiary-disabled-border-color': 'transparent-100',
-    'button-destructive-tertiary-disabled-text-color': 'color-alert-20',
+    'button-destructive-tertiary-disabled-text-color': 'color-action-destructive-disabled',
 
     // Tertiairy destructive inverted
     'button-destructive-tertiary-inverted-background-color': 'transparent-100',
     'button-destructive-tertiary-inverted-border-color': 'transparent-100',
-    'button-destructive-tertiary-inverted-text-color': 'color-alert-50',
+    'button-destructive-tertiary-inverted-text-color': 'color-action-destructive',
     // Tertiairy destructive inverted hover
     'button-destructive-tertiary-inverted-hover-background-color': 'color-alert-05',
     'button-destructive-tertiary-inverted-hover-border-color': 'transparent-100',
-    'button-destructive-tertiary-inverted-hover-text-color': 'color-alert-70',
+    'button-destructive-tertiary-inverted-hover-text-color': 'color-action-destructive-hover',
     // Tertiairy destructive inverted disabled
     'button-destructive-tertiary-inverted-disabled-background-color': 'transparent-100',
     'button-destructive-tertiary-inverted-disabled-border-color': 'transparent-100',
-    'button-destructive-tertiary-inverted-disabled-text-color': 'color-alert-20',
+    'button-destructive-tertiary-inverted-disabled-text-color': 'color-action-destructive-disabled',
 
-    // input button
-    'button-input-background-color': 'color-white',
-    'button-input-border-color': 'color-neutral-65',
-    'button-input-text-color': 'color-neutral-65',
-    // input button hover
-    'button-input-hover-background-color': 'color-neutral-15',
-    'button-input-hover-border-color': 'color-black',
-    'button-input-hover-text-color': 'color-black',
-    // input button disabled
-    'button-input-disabled-background-color': 'color-neutral-05',
-    'button-input-disabled-border-color': 'color-neutral-15',
-    'button-input-disabled-text-color': 'color-neutral-30',
+    // Input button
+    'button-input-background-color': 'color-control-background',
+    'button-input-border-color': 'color-control-border',
+    'button-input-text-color': 'color-control-auxiliary',
+    // Input button hover
+    'button-input-hover-background-color': 'color-control-background-hover',
+    'button-input-hover-border-color': 'color-control-border-hover',
+    'button-input-hover-text-color': 'color-control-auxiliary-hover',
+    // Input button disabled
+    'button-input-disabled-background-color': 'color-control-background-disabled',
+    'button-input-disabled-border-color': 'color-control-border-disabled',
+    'button-input-disabled-text-color': 'color-control-auxiliary-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/card-tokens.ts b/packages/react/src/themes/tokens/component/card-tokens.ts
index f2b0a21826..c4f7a51309 100644
--- a/packages/react/src/themes/tokens/component/card-tokens.ts
+++ b/packages/react/src/themes/tokens/component/card-tokens.ts
@@ -17,11 +17,11 @@ export type CardTokensMap = {
 };
 
 export const defaultCardTokens : CardTokensMap = {
-    'card-background-color': 'color-white',
-    'card-border-color': 'color-neutral-05',
-    'card-text-color': 'color-neutral-90',
-    'card-link-border-color': 'color-neutral-50',
-    'card-link-hover-border-color': 'color-black',
-    'card-link-hover-background-color': 'color-neutral-15',
-    'card-box-shadow-color': 'transparent-dark-20',
+    'card-background-color': 'color-background',
+    'card-border-color': 'color-border-subtle',
+    'card-text-color': 'color-content',
+    'card-link-border-color': 'color-border-bold',
+    'card-link-hover-border-color': 'color-border-hover',
+    'card-link-hover-background-color': 'color-background-hover',
+    'card-box-shadow-color': 'color-box-shadow',
 };
diff --git a/packages/react/src/themes/tokens/component/carousel-tokens.ts b/packages/react/src/themes/tokens/component/carousel-tokens.ts
index f70c31251f..0608950f1b 100644
--- a/packages/react/src/themes/tokens/component/carousel-tokens.ts
+++ b/packages/react/src/themes/tokens/component/carousel-tokens.ts
@@ -2,8 +2,8 @@ import { AliasTokens } from '../alias-tokens';
 import { RefTokens } from '../ref-tokens';
 
 export type CarouselTokens =
-    | 'carousel-dot-active-background-color'
-    | 'carousel-dot-inactive-background-color'
+    | 'carousel-dot-selected-background-color'
+    | 'carousel-dot-unselected-background-color'
     | 'carousel-dot-border-color';
 
 export type CarouselTokenValue = AliasTokens | RefTokens;
@@ -13,7 +13,7 @@ export type CarouselTokenMap = {
 };
 
 export const defaultCarouselTokens: CarouselTokenMap = {
-    'carousel-dot-active-background-color': 'color-brand-50',
-    'carousel-dot-inactive-background-color': 'color-neutral-15',
+    'carousel-dot-selected-background-color': 'color-background-indicator-selected',
+    'carousel-dot-unselected-background-color': 'color-background-empty',
     'carousel-dot-border-color': 'transparent-100',
 };
diff --git a/packages/react/src/themes/tokens/component/checkbox-tokens.ts b/packages/react/src/themes/tokens/component/checkbox-tokens.ts
index fe56da08eb..498e90e016 100644
--- a/packages/react/src/themes/tokens/component/checkbox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/checkbox-tokens.ts
@@ -20,14 +20,14 @@ export type CheckboxTokenMap = {
 };
 
 export const defaultCheckboxTokens: CheckboxTokenMap = {
-    'checkbox-unchecked-background-color': 'color-white',
-    'checkbox-unchecked-border-color': 'color-neutral-65',
-    'checkbox-checked-icon-color': 'color-white',
-    'checkbox-checked-background-color': 'color-brand-50',
-    'checkbox-checked-border-color': 'color-brand-50',
-    'checkbox-disabled-background-color': 'color-neutral-05',
-    'checkbox-disabled-border-color': 'color-neutral-15',
-    'checkbox-hover-border-color': 'color-neutral-90',
-    'checkbox-hover-background-color': 'color-neutral-15',
-    'checkbox-error-border-color': 'color-alert-50',
+    'checkbox-unchecked-background-color': 'color-control-background',
+    'checkbox-unchecked-border-color': 'color-control-border',
+    'checkbox-checked-icon-color': 'color-control-auxiliary-checked',
+    'checkbox-checked-background-color': 'color-control-background-checked',
+    'checkbox-checked-border-color': 'color-control-border-checked',
+    'checkbox-disabled-background-color': 'color-control-background-disabled',
+    'checkbox-disabled-border-color': 'color-control-border-disabled',
+    'checkbox-hover-border-color': 'color-control-border-hover',
+    'checkbox-hover-background-color': 'color-control-background-hover',
+    'checkbox-error-border-color': 'color-control-border-error',
 };
diff --git a/packages/react/src/themes/tokens/component/chooser-tokens.ts b/packages/react/src/themes/tokens/component/chooser-tokens.ts
index bf125893fe..98e22d36fd 100644
--- a/packages/react/src/themes/tokens/component/chooser-tokens.ts
+++ b/packages/react/src/themes/tokens/component/chooser-tokens.ts
@@ -22,16 +22,16 @@ export type ChooserTokenMap = {
 };
 
 export const defaultChooserTokens: ChooserTokenMap = {
-    'chooser-selected-background-color': 'color-brand-05',
-    'chooser-selected-border-color': 'color-brand-50',
-    'chooser-selected-text-color': 'color-brand-70',
-    'chooser-text-color': 'color-neutral-65',
-    'chooser-background-color': 'color-white',
-    'chooser-border-color': 'color-neutral-65',
-    'chooser-disabled-background-color': 'color-neutral-05',
-    'chooser-disabled-border-color': 'color-neutral-30',
-    'chooser-disabled-text-color': 'color-neutral-30',
-    'chooser-hover-background-color': 'color-neutral-15',
-    'chooser-hover-border-color': 'color-neutral-90',
-    'chooser-hover-text-color': 'color-neutral-90',
+    'chooser-background-color': 'color-control-background',
+    'chooser-border-color': 'color-control-border',
+    'chooser-text-color': 'color-control-auxiliary',
+    'chooser-selected-background-color': 'color-control-background-selected',
+    'chooser-selected-border-color': 'color-control-border-selected',
+    'chooser-selected-text-color': 'color-control-auxiliary-selected',
+    'chooser-hover-background-color': 'color-control-background-hover',
+    'chooser-hover-border-color': 'color-control-border-hover',
+    'chooser-hover-text-color': 'color-control-auxiliary-hover',
+    'chooser-disabled-background-color': 'color-control-background-disabled',
+    'chooser-disabled-border-color': 'color-control-border-disabled',
+    'chooser-disabled-text-color': 'color-control-auxiliary-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/combobox-tokens.ts b/packages/react/src/themes/tokens/component/combobox-tokens.ts
index afdc1a39d1..65f19c5610 100644
--- a/packages/react/src/themes/tokens/component/combobox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/combobox-tokens.ts
@@ -24,18 +24,18 @@ export type ComboboxTokenMap = {
 };
 
 export const defaultComboboxTokens: ComboboxTokenMap = {
-    'combobox-clear-button-border-right-color': 'color-neutral-65',
-    'combobox-clear-button-disabled-icon-color': 'color-neutral-30',
-    'combobox-clear-button-icon-color': 'color-neutral-65',
-    'combobox-placeholder-text-color': 'color-neutral-65',
+    'combobox-clear-button-border-right-color': 'color-control-auxiliary',
+    'combobox-clear-button-disabled-icon-color': 'color-control-auxiliary-disabled',
+    'combobox-clear-button-icon-color': 'color-control-auxiliary',
     'combobox-arrow-button-background-color': 'transparent-100',
     'combobox-arrow-button-hover-background-color': 'transparent-100',
-    'combobox-arrow-button-disabled-icon-color': 'color-neutral-30',
-    'combobox-arrow-button-icon-color': 'color-neutral-65',
-    'combobox-border-color': 'color-neutral-65',
-    'combobox-disabled-background-color': 'color-neutral-05',
-    'combobox-disabled-border-color': 'color-neutral-30',
-    'combobox-disabled-text-color': 'color-neutral-30',
-    'combobox-error-border-color': 'color-alert-50',
-    'combobox-background-color': 'color-white',
+    'combobox-arrow-button-disabled-icon-color': 'color-control-auxiliary-disabled',
+    'combobox-arrow-button-icon-color': 'color-control-auxiliary',
+    'combobox-border-color': 'color-control-border',
+    'combobox-disabled-background-color': 'color-control-background-disabled',
+    'combobox-disabled-border-color': 'color-control-border-disabled',
+    'combobox-disabled-text-color': 'color-control-auxiliary-disabled',
+    'combobox-error-border-color': 'color-control-border-error',
+    'combobox-background-color': 'color-control-background',
+    'combobox-placeholder-text-color': 'color-control-auxiliary',
 };
diff --git a/packages/react/src/themes/tokens/component/datepicker-tokens.ts b/packages/react/src/themes/tokens/component/datepicker-tokens.ts
index 2e6ab23b11..fba2fb40a1 100644
--- a/packages/react/src/themes/tokens/component/datepicker-tokens.ts
+++ b/packages/react/src/themes/tokens/component/datepicker-tokens.ts
@@ -27,26 +27,26 @@ export type DatepickerTokenMap = {
 };
 
 export const defaultDatepickerTokens: DatepickerTokenMap = {
-    'datepicker-background-color': 'color-white',
-    'datepicker-border-color': 'color-neutral-15',
-    'datepicker-box-shadow-color': 'transparent-dark-20',
+    'datepicker-background-color': 'color-background-overlay',
+    'datepicker-border-color': 'color-border-overlay',
+    'datepicker-box-shadow-color': 'color-box-shadow',
 
     'datepicker-header-background-color': 'transparent-100',
 
     'datepicker-day-background-color': 'transparent-100',
     'datepicker-day-border-color': 'transparent-100',
-    'datepicker-day-text-color': 'color-black',
+    'datepicker-day-text-color': 'color-content',
 
-    'datepicker-day-hover-background-color': 'color-neutral-15',
-    'datepicker-day-disabled-text-color': 'color-neutral-30',
+    'datepicker-day-hover-background-color': 'color-background-hover',
+    'datepicker-day-disabled-text-color': 'color-content-disabled',
 
-    'datepicker-day-outside-month-text-color': 'color-neutral-65',
-    'datepicker-day-selected-outside-month-background-color': 'color-brand-05',
-    'datepicker-day-selected-outside-month-border-color': 'color-brand-50',
-    'datepicker-day-selected-outside-month-text-color': 'color-brand-70',
-    'datepicker-day-selected-background-color': 'color-brand-05',
-    'datepicker-day-selected-border-color': 'color-brand-50',
-    'datepicker-day-selected-text-color': 'color-brand-70',
+    'datepicker-day-outside-month-text-color': 'color-content-subtle',
+    'datepicker-day-selected-outside-month-background-color': 'color-background-selected',
+    'datepicker-day-selected-outside-month-border-color': 'color-border-selected',
+    'datepicker-day-selected-outside-month-text-color': 'color-content-selected',
+    'datepicker-day-selected-background-color': 'color-background-selected',
+    'datepicker-day-selected-border-color': 'color-border-selected',
+    'datepicker-day-selected-text-color': 'color-content-selected',
 
-    'datepicker-day-today-text-color': 'color-brand-70',
+    'datepicker-day-today-text-color': 'color-content-selected',
 };
diff --git a/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts b/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
index a5e91a726d..a905ede5e5 100644
--- a/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
+++ b/packages/react/src/themes/tokens/component/dropdown-list-tokens.ts
@@ -19,13 +19,13 @@ export type DropdownListTokenMap = {
 };
 
 export const defaultDropdownListTokens: DropdownListTokenMap = {
-    'dropdown-list-arrow-color': 'color-neutral-65',
-    'dropdown-list-arrow-disabled-color': 'color-neutral-30',
-    'dropdown-list-input-background-color': 'color-white',
-    'dropdown-list-input-disabled-background-color': 'color-neutral-05',
-    'dropdown-list-input-border-color': 'color-neutral-65',
-    'dropdown-list-input-disabled-border-color': 'color-neutral-30',
-    'dropdown-list-input-error-border-color': 'color-alert-50',
-    'dropdown-list-input-disabled-text-color': 'color-neutral-30',
-    'dropdown-list-input-icon-color': 'color-content-subtle',
+    'dropdown-list-input-background-color': 'color-control-background',
+    'dropdown-list-input-border-color': 'color-control-border',
+    'dropdown-list-input-error-border-color': 'color-control-border-error',
+    'dropdown-list-arrow-color': 'color-control-auxiliary',
+    'dropdown-list-input-disabled-background-color': 'color-control-background-disabled',
+    'dropdown-list-input-disabled-border-color': 'color-control-border-disabled',
+    'dropdown-list-arrow-disabled-color': 'color-control-auxiliary-disabled',
+    'dropdown-list-input-disabled-text-color': 'color-control-auxiliary-disabled',
+    'dropdown-list-input-icon-color': 'color-control-auxiliary',
 };
diff --git a/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts b/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
index b5176cc0ec..5098351ff0 100644
--- a/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
+++ b/packages/react/src/themes/tokens/component/dropdown-menu-tokens.ts
@@ -7,7 +7,7 @@ export type DropdownMenuTokens =
     | 'dropdown-menu-text-color'
     | 'dropdown-menu-nav-item-text-color'
     | 'dropdown-menu-nav-item-hover-background-color'
-    | 'dropdown-menu-nav-item-hover-disabled-background-color'
+    | 'dropdown-menu-nav-item-disabled-background-color'
     | 'dropdown-menu-nav-item-disabled-text-color'
     | 'dropdown-menu-nav-item-disabled-icon-color'
     | 'dropdown-menu-nav-item-external-link-icon-color'
@@ -16,11 +16,8 @@ export type DropdownMenuTokens =
     | 'dropdown-menu-external-item-text-color'
     | 'dropdown-menu-external-item-hover-background-color'
     | 'dropdown-menu-external-item-visited-text-color'
-    | 'dropdown-menu-external-item-visited-fill-color'
-    | 'dropdown-menu-external-item-icon-visited-text-color'
-    | 'dropdown-menu-external-item-icon-visited-fill-color'
+    | 'dropdown-menu-external-item-visited-icon-color'
     | 'dropdown-menu-external-item-disabled-text-color'
-    | 'dropdown-menu-external-item-disabled-fill-color'
     | 'dropdown-menu-group-border-color'
     | 'dropdown-menu-item-content-icon-background-color'
     | 'dropdown-menu-item-content-icon-border-color'
@@ -34,28 +31,31 @@ export type DropdownMenuTokenMap = {
 };
 
 export const defaultDropdownMenuTokens: DropdownMenuTokenMap = {
-    'dropdown-menu-border-color': 'color-neutral-65',
-    'dropdown-menu-background-color': 'color-white',
-    'dropdown-menu-text-color': 'color-black',
-    'dropdown-menu-nav-item-text-color': 'color-black',
-    'dropdown-menu-nav-item-hover-background-color': 'color-neutral-15',
-    'dropdown-menu-nav-item-hover-disabled-background-color': 'transparent-100',
-    'dropdown-menu-nav-item-disabled-text-color': 'color-neutral-30',
-    'dropdown-menu-nav-item-disabled-icon-color': 'color-neutral-30',
-    'dropdown-menu-nav-item-external-link-icon-color': 'color-black',
-    'dropdown-menu-nav-item-external-link-text-color': 'color-black',
-    'dropdown-menu-list-item-text-color': 'color-black',
-    'dropdown-menu-external-item-text-color': 'color-black',
-    'dropdown-menu-external-item-hover-background-color': 'color-neutral-15',
-    'dropdown-menu-external-item-icon-visited-text-color': 'color-black',
-    'dropdown-menu-external-item-icon-visited-fill-color': 'color-black',
-    'dropdown-menu-external-item-visited-text-color': 'color-black',
-    'dropdown-menu-external-item-visited-fill-color': 'color-black',
-    'dropdown-menu-external-item-disabled-text-color': 'color-neutral-30',
-    'dropdown-menu-external-item-disabled-fill-color': 'color-neutral-30',
-    'dropdown-menu-group-border-color': 'color-neutral-15',
-    'dropdown-menu-item-content-icon-background-color': 'color-neutral-05',
-    'dropdown-menu-item-content-icon-border-color': 'color-neutral-15',
-    'dropdown-menu-item-content-description-text-color': 'color-neutral-65',
-    'dropdown-menu-box-shadow-color': 'transparent-dark-20',
+    'dropdown-menu-background-color': 'color-menu-background',
+    'dropdown-menu-border-color': 'color-menu-border',
+    'dropdown-menu-text-color': 'color-menu-item-content',
+
+    'dropdown-menu-item-content-icon-background-color': 'color-background-neutral-subtle',
+    'dropdown-menu-item-content-icon-border-color': 'color-border',
+    'dropdown-menu-group-border-color': 'color-border',
+
+    'dropdown-menu-nav-item-hover-background-color': 'color-menu-item-background-hover',
+    'dropdown-menu-external-item-hover-background-color': 'color-menu-item-background-hover',
+
+    'dropdown-menu-list-item-text-color': 'color-menu-item-content',
+    'dropdown-menu-nav-item-text-color': 'color-menu-item-content',
+    'dropdown-menu-nav-item-external-link-icon-color': 'color-menu-item-content',
+    'dropdown-menu-nav-item-external-link-text-color': 'color-menu-item-content',
+    'dropdown-menu-external-item-text-color': 'color-menu-item-content',
+    'dropdown-menu-item-content-description-text-color': 'color-menu-item-subcontent',
+
+    'dropdown-menu-nav-item-disabled-background-color': 'color-menu-item-background',
+    'dropdown-menu-nav-item-disabled-text-color': 'color-menu-item-content-disabled',
+    'dropdown-menu-nav-item-disabled-icon-color': 'color-menu-item-content-disabled',
+    'dropdown-menu-external-item-disabled-text-color': 'color-menu-item-content-disabled',
+
+    'dropdown-menu-external-item-visited-icon-color': 'color-link-content-visited',
+    'dropdown-menu-external-item-visited-text-color': 'color-link-content-visited',
+
+    'dropdown-menu-box-shadow-color': 'color-box-shadow',
 };
diff --git a/packages/react/src/themes/tokens/component/field-tokens.ts b/packages/react/src/themes/tokens/component/field-tokens.ts
index 48ded22131..5974ca616e 100644
--- a/packages/react/src/themes/tokens/component/field-tokens.ts
+++ b/packages/react/src/themes/tokens/component/field-tokens.ts
@@ -14,8 +14,9 @@ export type FieldTokenMap = {
 };
 
 export const defaultFieldTokens: FieldTokenMap = {
-    'field-hint-text-color': 'color-neutral-65',
-    'field-input-border-color': 'color-neutral-65',
-    'field-input-error-border-color': 'color-alert-50',
-    'field-error-text-color': 'color-alert-50',
+    'field-hint-text-color': 'color-control-auxiliary',
+    'field-error-text-color': 'color-control-auxiliary-error',
+
+    'field-input-border-color': 'color-control-border',
+    'field-input-error-border-color': 'color-control-border-error',
 };
diff --git a/packages/react/src/themes/tokens/component/focus-tokens.ts b/packages/react/src/themes/tokens/component/focus-tokens.ts
index 1b1b3f1cb3..4c4da88d04 100644
--- a/packages/react/src/themes/tokens/component/focus-tokens.ts
+++ b/packages/react/src/themes/tokens/component/focus-tokens.ts
@@ -14,8 +14,8 @@ export type FocusTokenMap = {
 };
 
 export const defaultFocusTokens: FocusTokenMap = {
-    'focus-inside-border-color': 'color-brand-20',
-    'focus-inverted-inside-border-color': 'color-brand-50',
-    'focus-outside-border-color': 'color-brand-50',
-    'focus-inverted-outside-border-color': 'color-brand-20',
+    'focus-inside-border-color': 'color-border-focus-inside',
+    'focus-outside-border-color': 'color-border-focus-outside',
+    'focus-inverted-inside-border-color': 'color-border-focus-inside-inverse',
+    'focus-inverted-outside-border-color': 'color-border-focus-outside-inverse',
 };
diff --git a/packages/react/src/themes/tokens/component/global-banner-tokens.ts b/packages/react/src/themes/tokens/component/global-banner-tokens.ts
index bf2770e6ab..a22b070809 100644
--- a/packages/react/src/themes/tokens/component/global-banner-tokens.ts
+++ b/packages/react/src/themes/tokens/component/global-banner-tokens.ts
@@ -8,10 +8,6 @@ export type GlobalBannerTokens =
     | 'global-banner-neutral-action-button-text-color'
     | 'global-banner-neutral-action-button-hover-border-color'
     | 'global-banner-neutral-action-button-hover-text-color'
-    | 'global-banner-neutral-dismiss-button-background-color'
-    | 'global-banner-neutral-dismiss-button-text-color'
-    | 'global-banner-neutral-dismiss-button-hover-background-color'
-    | 'global-banner-neutral-dismiss-button-hover-text-color'
     | 'global-banner-alert-background-color'
     | 'global-banner-alert-text-color'
     | 'global-banner-alert-action-button-border-color'
@@ -24,20 +20,12 @@ export type GlobalBannerTokens =
     | 'global-banner-discovery-action-button-text-color'
     | 'global-banner-discovery-action-button-hover-border-color'
     | 'global-banner-discovery-action-button-hover-text-color'
-    | 'global-banner-discovery-dismiss-button-background-color'
-    | 'global-banner-discovery-dismiss-button-text-color'
-    | 'global-banner-discovery-dismiss-button-hover-background-color'
-    | 'global-banner-discovery-dismiss-button-hover-text-color'
     | 'global-banner-warning-background-color'
     | 'global-banner-warning-text-color'
     | 'global-banner-warning-action-button-border-color'
     | 'global-banner-warning-action-button-text-color'
     | 'global-banner-warning-action-button-hover-border-color'
-    | 'global-banner-warning-action-button-hover-text-color'
-    | 'global-banner-warning-dismiss-button-background-color'
-    | 'global-banner-warning-dismiss-button-text-color'
-    | 'global-banner-warning-dismiss-button-hover-background-color'
-    | 'global-banner-warning-dismiss-button-hover-text-color';
+    | 'global-banner-warning-action-button-hover-text-color';
 
 export type GlobalBannerTokenValue = AliasTokens | RefTokens;
 
@@ -46,40 +34,43 @@ export type GlobalBannerTokenMap = {
 };
 
 export const defaultGlobalBannerTokens: GlobalBannerTokenMap = {
-    'global-banner-neutral-background-color': 'color-neutral-65',
-    'global-banner-neutral-text-color': 'color-white',
-    'global-banner-neutral-action-button-border-color': 'color-white',
-    'global-banner-neutral-action-button-text-color': 'color-white',
-    'global-banner-neutral-action-button-hover-border-color': 'color-neutral-30',
-    'global-banner-neutral-action-button-hover-text-color': 'color-neutral-30',
-    'global-banner-neutral-dismiss-button-background-color': 'transparent-100',
-    'global-banner-neutral-dismiss-button-text-color': 'color-white',
-    'global-banner-neutral-dismiss-button-hover-background-color': 'color-neutral-80',
-    'global-banner-neutral-dismiss-button-hover-text-color': 'color-white',
-    'global-banner-alert-background-color': 'color-alert-50',
-    'global-banner-alert-text-color': 'color-white',
-    'global-banner-alert-action-button-border-color': 'color-white',
-    'global-banner-alert-action-button-text-color': 'color-white',
-    'global-banner-alert-action-button-hover-border-color': 'color-alert-20',
-    'global-banner-alert-action-button-hover-text-color': 'color-alert-20',
-    'global-banner-discovery-background-color': 'color-discovery-50',
-    'global-banner-discovery-text-color': 'color-white',
-    'global-banner-discovery-action-button-border-color': 'color-white',
-    'global-banner-discovery-action-button-text-color': 'color-white',
-    'global-banner-discovery-action-button-hover-border-color': 'color-discovery-20',
-    'global-banner-discovery-action-button-hover-text-color': 'color-discovery-20',
-    'global-banner-discovery-dismiss-button-background-color': 'transparent-100',
-    'global-banner-discovery-dismiss-button-text-color': 'color-white',
-    'global-banner-discovery-dismiss-button-hover-background-color': 'color-discovery-70',
-    'global-banner-discovery-dismiss-button-hover-text-color': 'color-white',
-    'global-banner-warning-background-color': 'color-warning-50',
-    'global-banner-warning-text-color': 'color-neutral-90',
-    'global-banner-warning-action-button-border-color': 'color-neutral-90',
-    'global-banner-warning-action-button-text-color': 'color-neutral-90',
-    'global-banner-warning-action-button-hover-border-color': 'color-warning-70',
-    'global-banner-warning-action-button-hover-text-color': 'color-warning-70',
-    'global-banner-warning-dismiss-button-background-color': 'transparent-100',
-    'global-banner-warning-dismiss-button-text-color': 'color-neutral-90',
-    'global-banner-warning-dismiss-button-hover-background-color': 'color-warning-60',
-    'global-banner-warning-dismiss-button-hover-text-color': 'color-neutral-90',
+    /**
+     * neutral
+     */
+    'global-banner-neutral-background-color': 'color-background-neutral-bold',
+    'global-banner-neutral-text-color': 'color-content-inverse',
+    'global-banner-neutral-action-button-text-color': 'color-content-inverse',
+    'global-banner-neutral-action-button-border-color': 'color-border-inverse',
+    'global-banner-neutral-action-button-hover-border-color': 'transparent-light-50',
+    'global-banner-neutral-action-button-hover-text-color': 'transparent-light-50',
+
+    /**
+     * discovery
+     */
+    'global-banner-discovery-background-color': 'color-feedback-background-discovery-bold',
+    'global-banner-discovery-text-color': 'color-content-inverse',
+    'global-banner-discovery-action-button-text-color': 'color-content-inverse',
+    'global-banner-discovery-action-button-border-color': 'color-border-inverse',
+    'global-banner-discovery-action-button-hover-border-color': 'transparent-light-50',
+    'global-banner-discovery-action-button-hover-text-color': 'transparent-light-50',
+
+    /**
+     * warning
+     */
+    'global-banner-warning-background-color': 'color-feedback-background-warning-bold',
+    'global-banner-warning-text-color': 'color-content',
+    'global-banner-warning-action-button-text-color': 'color-content',
+    'global-banner-warning-action-button-border-color': 'color-content',
+    'global-banner-warning-action-button-hover-border-color': 'transparent-dark-60',
+    'global-banner-warning-action-button-hover-text-color': 'transparent-dark-60',
+
+    /**
+     * alert
+     */
+    'global-banner-alert-background-color': 'color-feedback-background-alert-bold',
+    'global-banner-alert-text-color': 'color-content-inverse',
+    'global-banner-alert-action-button-text-color': 'color-content-inverse',
+    'global-banner-alert-action-button-border-color': 'color-border-inverse',
+    'global-banner-alert-action-button-hover-border-color': 'transparent-light-50',
+    'global-banner-alert-action-button-hover-text-color': 'transparent-light-50',
 };
diff --git a/packages/react/src/themes/tokens/component/global-header-tokens.ts b/packages/react/src/themes/tokens/component/global-header-tokens.ts
index 33cca56fb4..e004817e60 100644
--- a/packages/react/src/themes/tokens/component/global-header-tokens.ts
+++ b/packages/react/src/themes/tokens/component/global-header-tokens.ts
@@ -14,8 +14,8 @@ export type GlobalHeaderTokensMap = {
 };
 
 export const defaultGlobalHeaderTokens : GlobalHeaderTokensMap = {
-    'global-header-background-color': 'color-brand-80',
-    'global-header-content-text-color': 'color-white',
-    'global-header-logo-title-separator-color': 'color-brand-70',
-    'global-header-logo-content-text-color': 'color-white',
+    'global-header-background-color': 'color-background-brand-bold',
+    'global-header-logo-title-separator-color': 'color-border-brand',
+    'global-header-logo-content-text-color': 'color-content-inverse',
+    'global-header-content-text-color': 'color-content-inverse',
 };
diff --git a/packages/react/src/themes/tokens/component/global-navigation-tokens.ts b/packages/react/src/themes/tokens/component/global-navigation-tokens.ts
index d7efb908dc..9ddd78cef2 100644
--- a/packages/react/src/themes/tokens/component/global-navigation-tokens.ts
+++ b/packages/react/src/themes/tokens/component/global-navigation-tokens.ts
@@ -18,12 +18,12 @@ export type GlobalNavigationTokenMap = {
 };
 
 export const defaultGlobalNavigationTokens: GlobalNavigationTokenMap = {
-    'global-navigation-background-color': 'color-white',
-    'global-navigation-box-shadow-color': 'transparent-dark-20',
-    'global-navigation-item-hover-background-color': 'color-neutral-15',
-    'global-navigation-item-hover-text-color': 'color-black',
-    'global-navigation-item-text-color': 'color-neutral-65',
-    'global-navigation-item-selected-background-color': 'color-brand-05',
-    'global-navigation-item-selected-text-color': 'color-brand-70',
-    'global-navigation-separator-border-color': 'color-neutral-15',
+    'global-navigation-background-color': 'color-background-overlay',
+    'global-navigation-box-shadow-color': 'color-box-shadow',
+    'global-navigation-item-hover-background-color': 'color-background-hover',
+    'global-navigation-item-hover-text-color': 'color-content-hover',
+    'global-navigation-item-text-color': 'color-content-subtle',
+    'global-navigation-item-selected-background-color': 'color-background-selected',
+    'global-navigation-item-selected-text-color': 'color-content-selected',
+    'global-navigation-separator-border-color': 'color-border',
 };
diff --git a/packages/react/src/themes/tokens/component/legend-tokens.ts b/packages/react/src/themes/tokens/component/legend-tokens.ts
index 71824f2c07..6d8f37aa77 100644
--- a/packages/react/src/themes/tokens/component/legend-tokens.ts
+++ b/packages/react/src/themes/tokens/component/legend-tokens.ts
@@ -12,6 +12,6 @@ export type LegendTokenMap = {
 };
 
 export const defaultLegendTokens: LegendTokenMap = {
-    'legend-item-bullet-color': 'color-brand-20',
-    'legend-item-description-text-color': 'color-neutral-65',
+    'legend-item-bullet-color': 'color-background-brand-subtle',
+    'legend-item-description-text-color': 'color-content-subtle',
 };
diff --git a/packages/react/src/themes/tokens/component/link-tokens.ts b/packages/react/src/themes/tokens/component/link-tokens.ts
index 5290c8aefc..5d56d2d6c2 100644
--- a/packages/react/src/themes/tokens/component/link-tokens.ts
+++ b/packages/react/src/themes/tokens/component/link-tokens.ts
@@ -19,11 +19,11 @@ export type LinkTokenMap = {
 export const defaultLinkTokens: LinkTokenMap = {
     'external-link-visited-text-color': 'color-link-content-visited',
 
-    'route-link-text-color': 'color-informative-50',
-    'route-link-disabled-text-color': 'color-informative-20',
-    'route-link-hover-text-color': 'color-informative-70',
     'route-link-visited-text-color': 'color-link-content-visited',
+    'route-link-text-color': 'color-link-content',
+    'route-link-disabled-text-color': 'color-link-content-disabled',
+    'route-link-hover-text-color': 'color-link-content-hover',
 
-    'skip-link-background-color': 'color-white',
-    'skip-link-text-color': 'color-informative-50',
+    'skip-link-text-color': 'color-link-content',
+    'skip-link-background-color': 'color-background',
 };
diff --git a/packages/react/src/themes/tokens/component/listbox-tokens.ts b/packages/react/src/themes/tokens/component/listbox-tokens.ts
index 8e2e86bac1..afd41ffe03 100644
--- a/packages/react/src/themes/tokens/component/listbox-tokens.ts
+++ b/packages/react/src/themes/tokens/component/listbox-tokens.ts
@@ -8,12 +8,8 @@ export type ListboxTokens =
     | 'listbox-item-disabled-background-color'
     | 'listbox-item-disabled-text-color'
     | 'listbox-item-hover-background-color'
-    | 'listbox-item-selected-background-color'
-    | 'listbox-item-selected-border-color'
-    | 'listbox-item-selected-icon-color'
-    | 'listbox-item-caption-text-color'
-    | 'listbox-item-caption-disabled-text-color'
-    | 'listbox-box-shadow-frame-color'
+    | 'listbox-item-subcontent-text-color'
+    | 'listbox-item-subcontent-disabled-text-color'
     | 'listbox-box-shadow-depth-color';
 
 export type ListboxTokenValue = AliasTokens | RefTokens;
@@ -23,20 +19,16 @@ export type ListboxTokenMap = {
 };
 
 export const defaultListboxTokens: ListboxTokenMap = {
-    'listbox-background-color': 'color-white',
-    'listbox-border-color': 'color-neutral-50',
-    'listbox-item-text-color': 'color-black',
-    'listbox-item-caption-text-color': 'color-neutral-65',
-    'listbox-item-hover-background-color': 'color-neutral-15',
+    'listbox-background-color': 'color-menu-background',
+    'listbox-border-color': 'color-menu-border',
 
-    'listbox-item-disabled-background-color': 'color-white',
-    'listbox-item-disabled-text-color': 'color-neutral-30',
-    'listbox-item-caption-disabled-text-color': 'color-neutral-15',
+    'listbox-item-text-color': 'color-menu-item-content',
+    'listbox-item-subcontent-text-color': 'color-menu-item-subcontent',
+    'listbox-item-hover-background-color': 'color-menu-item-background-hover',
 
-    'listbox-item-selected-background-color': 'color-brand-50',
-    'listbox-item-selected-border-color': 'color-brand-50',
-    'listbox-item-selected-icon-color': 'color-white',
+    'listbox-item-disabled-background-color': 'color-menu-item-background',
+    'listbox-item-disabled-text-color': 'color-menu-item-content-disabled',
+    'listbox-item-subcontent-disabled-text-color': 'color-menu-item-content-disabled',
 
-    'listbox-box-shadow-frame-color': 'color-neutral-15',
-    'listbox-box-shadow-depth-color': 'transparent-dark-20',
+    'listbox-box-shadow-depth-color': 'color-box-shadow',
 };
diff --git a/packages/react/src/themes/tokens/component/lozenge-tokens.ts b/packages/react/src/themes/tokens/component/lozenge-tokens.ts
index 365aef6187..84fe1981c6 100644
--- a/packages/react/src/themes/tokens/component/lozenge-tokens.ts
+++ b/packages/react/src/themes/tokens/component/lozenge-tokens.ts
@@ -46,40 +46,81 @@ export type LozengeTokensMap = {
 };
 
 export const defaultLozengeTokens: LozengeTokensMap = {
-    'lozenge-neutral-background-color': 'color-neutral-65',
-    'lozenge-neutral-border-color': 'color-neutral-65',
-    'lozenge-neutral-text-color': 'color-white',
-    'lozenge-neutral-subtle-background-color': 'color-neutral-05',
-    'lozenge-neutral-subtle-border-color': 'color-neutral-05',
-    'lozenge-neutral-subtle-text-color': 'color-neutral-65',
-    'lozenge-info-background-color': 'color-informative-50',
-    'lozenge-info-border-color': 'color-informative-50',
-    'lozenge-info-text-color': 'color-white',
-    'lozenge-info-subtle-background-color': 'color-informative-05',
-    'lozenge-info-subtle-border-color': 'color-informative-05',
-    'lozenge-info-subtle-text-color': 'color-informative-70',
-    'lozenge-success-background-color': 'color-success-50',
-    'lozenge-success-border-color': 'color-success-50',
-    'lozenge-success-text-color': 'color-white',
-    'lozenge-success-subtle-background-color': 'color-success-05',
-    'lozenge-success-subtle-border-color': 'color-success-05',
-    'lozenge-success-subtle-text-color': 'color-success-70',
-    'lozenge-discovery-background-color': 'color-discovery-50',
-    'lozenge-discovery-border-color': 'color-discovery-50',
-    'lozenge-discovery-text-color': 'color-white',
-    'lozenge-discovery-subtle-background-color': 'color-discovery-05',
-    'lozenge-discovery-subtle-border-color': 'color-discovery-05',
-    'lozenge-discovery-subtle-text-color': 'color-discovery-70',
-    'lozenge-alert-background-color': 'color-alert-50',
-    'lozenge-alert-border-color': 'color-alert-50',
-    'lozenge-alert-text-color': 'color-white',
-    'lozenge-alert-subtle-background-color': 'color-alert-05',
-    'lozenge-alert-subtle-border-color': 'color-alert-05',
-    'lozenge-alert-subtle-text-color': 'color-alert-50',
-    'lozenge-warning-background-color': 'color-warning-50',
-    'lozenge-warning-border-color': 'color-warning-50',
-    'lozenge-warning-text-color': 'color-neutral-90',
-    'lozenge-warning-subtle-background-color': 'color-warning-05',
-    'lozenge-warning-subtle-border-color': 'color-warning-05',
-    'lozenge-warning-subtle-text-color': 'color-warning-80',
+    /**
+     * neutral
+     */
+    'lozenge-neutral-background-color': 'color-background-neutral-bold',
+    'lozenge-neutral-border-color': 'color-background-neutral-bold',
+    'lozenge-neutral-text-color': 'color-content-inverse',
+    /**
+     * neutral subtle
+     */
+    'lozenge-neutral-subtle-background-color': 'color-background-neutral-subtle',
+    'lozenge-neutral-subtle-border-color': 'color-background-neutral-subtle',
+    'lozenge-neutral-subtle-text-color': 'color-content-subtle',
+
+    /**
+     * info
+     */
+    'lozenge-info-background-color': 'color-feedback-background-informative-bold',
+    'lozenge-info-border-color': 'color-feedback-background-informative-bold',
+    'lozenge-info-text-color': 'color-content-inverse',
+    /**
+     * info subtle
+     */
+    'lozenge-info-subtle-background-color': 'color-feedback-background-informative-subtle',
+    'lozenge-info-subtle-border-color': 'color-feedback-background-informative-subtle',
+    'lozenge-info-subtle-text-color': 'color-feedback-content-informative',
+
+    /**
+     * success
+     */
+    'lozenge-success-background-color': 'color-feedback-background-success-bold',
+    'lozenge-success-border-color': 'color-feedback-background-success-bold',
+    'lozenge-success-text-color': 'color-content-inverse',
+    /**
+     * success subtle
+     */
+    'lozenge-success-subtle-background-color': 'color-feedback-background-success-subtle',
+    'lozenge-success-subtle-border-color': 'color-feedback-background-success-subtle',
+    'lozenge-success-subtle-text-color': 'color-feedback-content-success',
+
+    /**
+     * discovery
+     */
+    'lozenge-discovery-background-color': 'color-feedback-background-discovery-bold',
+    'lozenge-discovery-border-color': 'color-feedback-background-discovery-bold',
+    'lozenge-discovery-text-color': 'color-content-inverse',
+    /**
+     * discovery subtle
+     */
+    'lozenge-discovery-subtle-background-color': 'color-feedback-background-discovery-subtle',
+    'lozenge-discovery-subtle-border-color': 'color-feedback-background-discovery-subtle',
+    'lozenge-discovery-subtle-text-color': 'color-feedback-content-discovery',
+
+    /**
+     * alert
+     */
+    'lozenge-alert-background-color': 'color-feedback-background-alert-bold',
+    'lozenge-alert-border-color': 'color-feedback-background-alert-bold',
+    'lozenge-alert-text-color': 'color-content-inverse',
+    /**
+     * alert subtle
+     */
+    'lozenge-alert-subtle-background-color': 'color-feedback-background-alert-subtle',
+    'lozenge-alert-subtle-border-color': 'color-feedback-background-alert-subtle',
+    'lozenge-alert-subtle-text-color': 'color-feedback-content-alert',
+
+    /**
+     * warning
+     */
+    'lozenge-warning-background-color': 'color-feedback-background-warning-bold',
+    'lozenge-warning-border-color': 'color-feedback-background-warning-bold',
+    'lozenge-warning-text-color': 'color-content',
+    /**
+     * warning subtle
+     */
+    'lozenge-warning-subtle-background-color': 'color-feedback-background-warning-subtle',
+    'lozenge-warning-subtle-border-color': 'color-feedback-background-warning-subtle',
+    'lozenge-warning-subtle-text-color': 'color-feedback-content-warning',
 };
diff --git a/packages/react/src/themes/tokens/component/menu-tokens.ts b/packages/react/src/themes/tokens/component/menu-tokens.ts
index 9ce88b2dad..4d05083a3c 100644
--- a/packages/react/src/themes/tokens/component/menu-tokens.ts
+++ b/packages/react/src/themes/tokens/component/menu-tokens.ts
@@ -23,17 +23,20 @@ export type MenuTokenMap = {
 };
 
 export const defaultMenuTokens: MenuTokenMap = {
-    'menu-background-color': 'color-white',
-    'menu-border-color': 'color-neutral-50',
-    'menu-group-text-color': 'color-neutral-65',
-    'menu-item-disabled-text-color': 'color-neutral-30',
-    'menu-item-hover-background-color': 'color-neutral-15',
-    'menu-item-text-color': 'color-neutral-90',
-    'menu-item-hover-text-color': 'color-black',
-    'menu-item-icon-color': 'color-neutral-90',
-    'menu-item-hover-icon-color': 'color-black',
-    'menu-submenu-background-color': 'color-white',
-    'menu-submenu-border-color': 'color-neutral-50',
-    'menu-box-shadow-color': 'transparent-dark-20',
-    'menu-submenu-box-shadow-color': 'transparent-dark-20',
+    'menu-background-color': 'color-menu-background',
+    'menu-border-color': 'color-menu-border',
+    'menu-submenu-background-color': 'color-menu-background',
+    'menu-submenu-border-color': 'color-menu-border',
+
+    'menu-group-text-color': 'color-menu-item-subcontent',
+
+    'menu-item-text-color': 'color-menu-item-content',
+    'menu-item-hover-text-color': 'color-menu-item-content-hover',
+    'menu-item-icon-color': 'color-menu-item-content',
+    'menu-item-hover-icon-color': 'color-menu-item-content-hover',
+    'menu-item-disabled-text-color': 'color-menu-item-content-disabled',
+    'menu-item-hover-background-color': 'color-menu-item-background-hover',
+
+    'menu-submenu-box-shadow-color': 'color-box-shadow',
+    'menu-box-shadow-color': 'color-box-shadow',
 };
diff --git a/packages/react/src/themes/tokens/component/modal-tokens.ts b/packages/react/src/themes/tokens/component/modal-tokens.ts
index c9e6253780..29965542f4 100644
--- a/packages/react/src/themes/tokens/component/modal-tokens.ts
+++ b/packages/react/src/themes/tokens/component/modal-tokens.ts
@@ -4,7 +4,7 @@ import { RefTokens } from '../ref-tokens';
 export type ModalTokens =
     | 'modal-background-color'
     | 'modal-border-color'
-    | 'modal-overlay-background-color';
+    | 'modal-backdrop-background-color';
 
 export type ModalTokenValue = AliasTokens | RefTokens;
 
@@ -13,7 +13,7 @@ export type ModalTokenMap = {
 };
 
 export const defaultModalTokens: ModalTokenMap = {
-    'modal-background-color': 'color-white',
-    'modal-border-color': 'color-neutral-50',
-    'modal-overlay-background-color': 'transparent-dark-75',
+    'modal-background-color': 'color-background-overlay',
+    'modal-border-color': 'color-border-overlay',
+    'modal-backdrop-background-color': 'color-backdrop-background',
 };
diff --git a/packages/react/src/themes/tokens/component/nav-list-tokens.ts b/packages/react/src/themes/tokens/component/nav-list-tokens.ts
index a9114f3162..48b4b89417 100644
--- a/packages/react/src/themes/tokens/component/nav-list-tokens.ts
+++ b/packages/react/src/themes/tokens/component/nav-list-tokens.ts
@@ -19,17 +19,17 @@ export type NavListTokenMap = {
 };
 
 export const defaultNavListTokens: NavListTokenMap = {
-    'nav-list-background-color': 'color-white',
-    'nav-list-border-color': 'color-neutral-65',
+    'nav-list-background-color': 'color-menu-background',
+    'nav-list-border-color': 'color-menu-border',
 
-    'nav-list-item-icon-color': 'color-neutral-90',
-    'nav-list-item-text-color': 'color-neutral-90',
+    'nav-list-item-icon-color': 'color-menu-item-content',
+    'nav-list-item-text-color': 'color-menu-item-content',
 
-    'nav-list-item-hover-background-color': 'color-neutral-15',
-    'nav-list-item-text-hover-color': 'color-black',
-    'nav-list-item-icon-hover-color': 'color-black',
+    'nav-list-item-hover-background-color': 'color-menu-item-background-hover',
+    'nav-list-item-text-hover-color': 'color-menu-item-content-hover',
+    'nav-list-item-icon-hover-color': 'color-menu-item-content-hover',
 
-    'nav-list-item-disabled-text-color': 'color-neutral-30',
+    'nav-list-item-disabled-text-color': 'color-menu-item-content-disabled',
 
-    'nav-list-box-shadow-color': 'transparent-dark-20',
+    'nav-list-box-shadow-color': 'color-box-shadow',
 };
diff --git a/packages/react/src/themes/tokens/component/numeric-input-tokens.ts b/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
index b817af23a7..d777fc516d 100644
--- a/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/numeric-input-tokens.ts
@@ -16,10 +16,11 @@ export type NumericInputTokenMap = {
 };
 
 export const defaultNumericInputTokens: NumericInputTokenMap = {
-    'numeric-input-background-color': 'color-white',
-    'numeric-input-border-color': 'color-neutral-65',
-    'numeric-input-disabled-adornment-text-color': 'color-neutral-30',
-    'numeric-input-disabled-background-color': 'color-neutral-05',
-    'numeric-input-disabled-border-color': 'color-neutral-15',
-    'numeric-input-error-border-color': 'color-alert-50',
+    'numeric-input-background-color': 'color-control-background',
+    'numeric-input-border-color': 'color-control-border',
+    'numeric-input-error-border-color': 'color-control-border-error',
+
+    'numeric-input-disabled-adornment-text-color': 'color-control-auxiliary-disabled',
+    'numeric-input-disabled-background-color': 'color-control-background-disabled',
+    'numeric-input-disabled-border-color': 'color-control-border-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/pagination-tokens.ts b/packages/react/src/themes/tokens/component/pagination-tokens.ts
index 61f433cc6d..e632208f7d 100644
--- a/packages/react/src/themes/tokens/component/pagination-tokens.ts
+++ b/packages/react/src/themes/tokens/component/pagination-tokens.ts
@@ -17,12 +17,12 @@ export type PaginationTokenMap = {
 };
 
 export const defaultPaginationTokens: PaginationTokenMap = {
-    'pagination-page-background-color': 'color-white',
-    'pagination-page-text-color': 'color-neutral-65',
-    'pagination-page-hover-background-color': 'color-neutral-15',
+    'pagination-page-background-color': 'transparent-100',
+    'pagination-page-text-color': 'color-content-subtle',
+    'pagination-page-hover-background-color': 'color-background-hover',
 
-    'pagination-page-selected-hover-background-color': 'color-informative-05',
-    'pagination-page-selected-background-color': 'color-informative-05',
-    'pagination-page-selected-border-color': 'color-informative-50',
-    'pagination-page-selected-text-color': 'color-informative-70',
+    'pagination-page-selected-hover-background-color': 'color-background-selected',
+    'pagination-page-selected-background-color': 'color-background-selected',
+    'pagination-page-selected-border-color': 'color-border-selected',
+    'pagination-page-selected-text-color': 'color-content-selected',
 };
diff --git a/packages/react/src/themes/tokens/component/password-input-tokens.ts b/packages/react/src/themes/tokens/component/password-input-tokens.ts
index e7e60f8c14..5d26c2bfdb 100644
--- a/packages/react/src/themes/tokens/component/password-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/password-input-tokens.ts
@@ -19,13 +19,15 @@ export type PasswordInputTokenMap = {
 };
 
 export const defaultPasswordInputTokens: PasswordInputTokenMap = {
-    'password-rule-empty-text-color': 'color-neutral-65',
-    'password-rule-error-text-color': 'color-alert-50',
-    'password-rule-success-text-color': 'color-success-50',
-    'password-strength-meter-empty-color': 'color-neutral-30',
+    'password-rule-empty-text-color': 'color-content-subtle',
+    'password-rule-error-text-color': 'color-control-auxiliary-error',
+    'password-rule-success-text-color': 'color-control-auxiliary-success',
+
+    'password-strength-label-text-color': 'color-content-subtle',
+
+    'password-strength-meter-empty-color': 'color-background-empty',
     'password-strength-meter-weak-color': 'color-alert-50',
     'password-strength-meter-fair-color': 'color-warning-50',
-    'password-strength-meter-good-color': 'color-success-20',
-    'password-strength-meter-strong-color': 'color-success-50',
-    'password-strength-label-text-color': 'color-neutral-65',
+    'password-strength-meter-good-color': 'color-success-50',
+    'password-strength-meter-strong-color': 'color-success-70',
 };
diff --git a/packages/react/src/themes/tokens/component/phone-input-tokens.ts b/packages/react/src/themes/tokens/component/phone-input-tokens.ts
index f4425af232..c92fd30339 100644
--- a/packages/react/src/themes/tokens/component/phone-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/phone-input-tokens.ts
@@ -13,5 +13,5 @@ export type PhoneInputTokenMap = {
 
 export const defaultPhoneInputTokens: PhoneInputTokenMap = {
     'phone-input-background-color': 'transparent-100',
-    'phone-input-mask-text-color': 'color-neutral-65',
+    'phone-input-mask-text-color': 'color-control-auxiliary',
 };
diff --git a/packages/react/src/themes/tokens/component/progress-tokens.ts b/packages/react/src/themes/tokens/component/progress-tokens.ts
index c8957e9878..b1ef93028e 100644
--- a/packages/react/src/themes/tokens/component/progress-tokens.ts
+++ b/packages/react/src/themes/tokens/component/progress-tokens.ts
@@ -11,9 +11,9 @@ export type ProgressTokens =
     | 'progress-tracker-step-uncompleted-border-color'
     | 'progress-tracker-step-uncompleted-text-color'
     | 'progress-tracker-step-uncompleted-label-text-color'
-    | 'progress-tracker-step-active-border-color'
-    | 'progress-tracker-step-active-text-color'
-    | 'progress-tracker-step-active-label-text-color'
+    | 'progress-tracker-step-current-border-color'
+    | 'progress-tracker-step-current-text-color'
+    | 'progress-tracker-step-current-label-text-color'
     | 'progress-tracker-step-completed-background-color'
     | 'progress-tracker-step-completed-border-color'
     | 'progress-tracker-step-completed-text-color'
@@ -31,32 +31,32 @@ export type ProgressTokenMap = {
 };
 
 export const defaultProgressTokens: ProgressTokenMap = {
-    'progress-tracker-notification-badge-color': 'color-white',
-    'progress-tracker-notification-badge-fill-color': 'color-alert-50',
+    'progress-circle-empty-track-color': 'color-background-empty',
+    'progress-circle-label-text-color': 'color-content',
+    'progress-circle-result-text-color': 'color-content',
 
-    'progress-circle-empty-track-color': 'color-neutral-15',
-    'progress-indicator-empty-track-color': 'color-neutral-15',
-    'progress-tracker-bridge-empty-background-color': 'color-neutral-15',
-    'progress-tracker-bridge-filled-background-color': 'color-brand-50',
+    'progress-indicator-label-text-color': 'color-content',
+    'progress-indicator-empty-track-color': 'color-background-empty',
 
-    'progress-circle-label-text-color': 'color-black',
-    'progress-circle-result-text-color': 'color-black',
-    'progress-indicator-label-text-color': 'color-black',
+    'progress-tracker-notification-badge-color': 'color-content-inverse',
+    'progress-tracker-notification-badge-fill-color': 'color-feedback-background-alert-bold',
 
+    'progress-tracker-bridge-empty-background-color': 'color-background-empty',
+    'progress-tracker-bridge-filled-background-color': 'color-background-brand',
     // TO-DO
-    'progress-tracker-step-todo-text-color': 'color-brand-50',
-    'progress-tracker-step-todo-background-color': 'color-white',
+    'progress-tracker-step-todo-text-color': 'color-content',
+    'progress-tracker-step-todo-background-color': 'color-background',
     // Uncompleted
-    'progress-tracker-step-uncompleted-border-color': 'color-neutral-30',
-    'progress-tracker-step-uncompleted-text-color': 'color-neutral-90',
-    'progress-tracker-step-uncompleted-label-text-color': 'color-neutral-65',
-    // Active
-    'progress-tracker-step-active-border-color': 'color-brand-50',
-    'progress-tracker-step-active-text-color': 'color-brand-70',
-    'progress-tracker-step-active-label-text-color': 'color-brand-70',
+    'progress-tracker-step-uncompleted-border-color': 'color-border-empty',
+    'progress-tracker-step-uncompleted-text-color': 'color-content',
+    'progress-tracker-step-uncompleted-label-text-color': 'color-content-subtle',
+    // Current
+    'progress-tracker-step-current-border-color': 'color-background-brand',
+    'progress-tracker-step-current-text-color': 'color-content-selected',
+    'progress-tracker-step-current-label-text-color': 'color-content-selected',
     // Completed
-    'progress-tracker-step-completed-background-color': 'color-brand-50',
-    'progress-tracker-step-completed-border-color': 'color-brand-50',
-    'progress-tracker-step-completed-text-color': 'color-white',
-    'progress-tracker-step-completed-label-text-color': 'color-brand-50',
+    'progress-tracker-step-completed-background-color': 'color-background-brand',
+    'progress-tracker-step-completed-border-color': 'color-background-brand',
+    'progress-tracker-step-completed-text-color': 'color-content-inverse',
+    'progress-tracker-step-completed-label-text-color': 'color-content-brand',
 };
diff --git a/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts b/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts
index 4f3ebcb761..b25773de55 100644
--- a/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts
+++ b/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts
@@ -19,13 +19,15 @@ export type RadioButtonGroupTokenMap = {
 };
 
 export const defaultRadioButtonGroupTokens: RadioButtonGroupTokenMap = {
-    'radio-button-background-color': 'color-white',
-    'radio-button-border-color': 'color-neutral-65',
-    'radio-button-disabled-background-color': 'color-neutral-05',
-    'radio-button-disabled-border-color': 'color-neutral-15',
-    'radio-button-hover-border-color': 'color-brand-50',
-    'radio-button-disabled-hover-border-color': 'color-neutral-15',
-    'radio-button-checked-background-color': 'color-brand-50',
-    'radio-button-checked-border-color': 'color-brand-50',
-    'radio-button-group-legend-text-color': 'color-black',
+    'radio-button-background-color': 'color-control-background',
+    'radio-button-border-color': 'color-control-border',
+    'radio-button-group-legend-text-color': 'color-content',
+    'radio-button-hover-border-color': 'color-control-border-hover',
+
+    'radio-button-disabled-background-color': 'color-control-background-disabled',
+    'radio-button-disabled-border-color': 'color-control-border-disabled',
+    'radio-button-disabled-hover-border-color': 'color-control-border-disabled',
+
+    'radio-button-checked-background-color': 'color-control-background-checked',
+    'radio-button-checked-border-color': 'color-control-border-checked',
 };
diff --git a/packages/react/src/themes/tokens/component/radio-card-tokens.ts b/packages/react/src/themes/tokens/component/radio-card-tokens.ts
index 556c4c0f2c..74fb085200 100644
--- a/packages/react/src/themes/tokens/component/radio-card-tokens.ts
+++ b/packages/react/src/themes/tokens/component/radio-card-tokens.ts
@@ -21,18 +21,18 @@ export type RadioCardTokenMap = {
 };
 
 export const defaultRadioCardTokens: RadioCardTokenMap = {
-    'radio-card-background-color': 'color-white',
-    'radio-card-text-color': 'color-black',
-    'radio-card-border-color': 'color-black',
+    'radio-card-background-color': 'color-control-background',
+    'radio-card-border-color': 'color-control-border',
+    'radio-card-text-color': 'color-control-value',
 
-    'radio-card-hover-background-color': 'color-neutral-15',
-    'radio-card-hover-border-color': 'color-black',
-    'radio-card-hover-text-color': 'color-black',
+    'radio-card-hover-background-color': 'color-control-background-hover',
+    'radio-card-hover-border-color': 'color-control-border-hover',
+    'radio-card-hover-text-color': 'color-control-value-hover',
 
-    'radio-card-disabled-background-color': 'color-neutral-05',
-    'radio-card-disabled-border-color': 'color-neutral-15',
-    'radio-card-disabled-text-color': 'color-neutral-30',
+    'radio-card-disabled-background-color': 'color-control-background-disabled',
+    'radio-card-disabled-border-color': 'color-control-border-disabled',
+    'radio-card-disabled-text-color': 'color-control-auxiliary-disabled',
 
-    'radio-card-selected-background-color': 'color-brand-05',
-    'radio-card-selected-border-color': 'color-brand-50',
+    'radio-card-selected-background-color': 'color-control-background-selected',
+    'radio-card-selected-border-color': 'color-control-border-selected',
 };
diff --git a/packages/react/src/themes/tokens/component/search-input-tokens.ts b/packages/react/src/themes/tokens/component/search-input-tokens.ts
index 57b7179a92..a2f54c326c 100644
--- a/packages/react/src/themes/tokens/component/search-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/search-input-tokens.ts
@@ -15,9 +15,9 @@ export type SearchInputTokenMap = {
 };
 
 export const defaultSearchInputTokens: SearchInputTokenMap = {
-    'search-input-disabled-icon-color': 'color-neutral-30',
-    'search-input-icon-color': 'color-neutral-65',
+    'search-input-disabled-icon-color': 'color-control-auxiliary-disabled',
+    'search-input-icon-color': 'color-control-auxiliary',
+    'search-input-label-text-color': 'color-control-auxiliary',
     'search-input-reset-button-background-color': 'transparent-100',
     'search-input-reset-button-border-color': 'transparent-100',
-    'search-input-label-text-color': 'color-neutral-65',
 };
diff --git a/packages/react/src/themes/tokens/component/sectional-banner-tokens.ts b/packages/react/src/themes/tokens/component/sectional-banner-tokens.ts
index cb56396fad..2b7a2d7326 100644
--- a/packages/react/src/themes/tokens/component/sectional-banner-tokens.ts
+++ b/packages/react/src/themes/tokens/component/sectional-banner-tokens.ts
@@ -28,27 +28,27 @@ export type SectionalBannerTokenMap = {
 };
 
 export const defaultSectionalBannerTokens: SectionalBannerTokenMap = {
-    'sectional-banner-neutral-background-color': 'color-neutral-02',
-    'sectional-banner-neutral-border-color': 'color-neutral-50',
-    'sectional-banner-neutral-icon-color': 'color-neutral-65',
+    'sectional-banner-neutral-background-color': 'color-background-neutral-subtlest',
+    'sectional-banner-neutral-border-color': 'color-border-bold',
+    'sectional-banner-neutral-icon-color': 'color-content-subtle',
 
-    'sectional-banner-info-background-color': 'color-informative-02',
-    'sectional-banner-info-border-color': 'color-informative-50',
-    'sectional-banner-info-icon-color': 'color-informative-70',
+    'sectional-banner-info-background-color': 'color-feedback-background-informative-subtlest',
+    'sectional-banner-info-border-color': 'color-feedback-border-informative',
+    'sectional-banner-info-icon-color': 'color-feedback-content-informative',
 
-    'sectional-banner-discovery-background-color': 'color-discovery-02',
-    'sectional-banner-discovery-border-color': 'color-discovery-50',
-    'sectional-banner-discovery-icon-color': 'color-discovery-70',
+    'sectional-banner-discovery-background-color': 'color-feedback-background-discovery-subtlest',
+    'sectional-banner-discovery-border-color': 'color-feedback-border-discovery',
+    'sectional-banner-discovery-icon-color': 'color-feedback-content-discovery',
 
-    'sectional-banner-success-background-color': 'color-success-02',
-    'sectional-banner-success-border-color': 'color-success-50',
-    'sectional-banner-success-icon-color': 'color-success-70',
+    'sectional-banner-success-background-color': 'color-feedback-background-success-subtlest',
+    'sectional-banner-success-border-color': 'color-feedback-border-success',
+    'sectional-banner-success-icon-color': 'color-feedback-content-success',
 
-    'sectional-banner-warning-background-color': 'color-warning-02',
-    'sectional-banner-warning-border-color': 'color-warning-50',
-    'sectional-banner-warning-icon-color': 'color-warning-80',
+    'sectional-banner-warning-background-color': 'color-feedback-background-warning-subtlest',
+    'sectional-banner-warning-border-color': 'color-feedback-border-warning',
+    'sectional-banner-warning-icon-color': 'color-feedback-content-warning',
 
-    'sectional-banner-alert-background-color': 'color-alert-02',
-    'sectional-banner-alert-border-color': 'color-alert-50',
-    'sectional-banner-alert-icon-color': 'color-alert-70',
+    'sectional-banner-alert-background-color': 'color-feedback-background-alert-subtlest',
+    'sectional-banner-alert-border-color': 'color-feedback-border-alert',
+    'sectional-banner-alert-icon-color': 'color-feedback-content-alert',
 };
diff --git a/packages/react/src/themes/tokens/component/segmented-control-tokens.ts b/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
new file mode 100644
index 0000000000..8a34d36efb
--- /dev/null
+++ b/packages/react/src/themes/tokens/component/segmented-control-tokens.ts
@@ -0,0 +1,40 @@
+import { AliasTokens } from '../alias-tokens';
+import { RefTokens } from '../ref-tokens';
+
+export type SegmentedControlTokens =
+    | 'segmented-control-background-color'
+    | 'segmented-control-pressed-background-color'
+    | 'segmented-control-hover-background-color'
+    | 'segmented-control-disabled-background-color'
+    | 'segmented-control-border-color'
+    | 'segmented-control-pressed-border-color'
+    | 'segmented-control-hover-border-color'
+    | 'segmented-control-disabled-border-color'
+    | 'segmented-control-text-color'
+    | 'segmented-control-pressed-text-color'
+    | 'segmented-control-hover-text-color'
+    | 'segmented-control-disabled-text-color';
+
+export type SegmentedControlTokenValue = AliasTokens | RefTokens;
+
+export type SegmentedControlTokenMap = {
+    [Token in SegmentedControlTokens]: SegmentedControlTokenValue;
+};
+
+export const defaultSegmentedControlTokens: SegmentedControlTokenMap = {
+    'segmented-control-background-color': 'color-control-background',
+    'segmented-control-border-color': 'color-control-border',
+    'segmented-control-text-color': 'color-control-auxiliary',
+
+    'segmented-control-hover-background-color': 'color-control-background-hover',
+    'segmented-control-hover-border-color': 'color-control-border-hover',
+    'segmented-control-hover-text-color': 'color-control-auxiliary-hover',
+
+    'segmented-control-disabled-background-color': 'color-control-background-disabled',
+    'segmented-control-disabled-border-color': 'color-control-border-disabled',
+    'segmented-control-disabled-text-color': 'color-control-auxiliary-disabled',
+
+    'segmented-control-pressed-background-color': 'color-control-background-selected',
+    'segmented-control-pressed-border-color': 'color-control-border-selected',
+    'segmented-control-pressed-text-color': 'color-control-auxiliary-selected',
+};
diff --git a/packages/react/src/themes/tokens/component/side-drawer-tokens.ts b/packages/react/src/themes/tokens/component/side-drawer-tokens.ts
index 3d985c42e3..8811c3c693 100644
--- a/packages/react/src/themes/tokens/component/side-drawer-tokens.ts
+++ b/packages/react/src/themes/tokens/component/side-drawer-tokens.ts
@@ -12,6 +12,6 @@ export type SideDrawerTokensMap = {
 }
 
 export const defaultSideDrawerTokens: SideDrawerTokensMap = {
-    'side-drawer-background-color': 'color-white',
-    'side-drawer-box-shadow-color': 'transparent-dark-10',
+    'side-drawer-background-color': 'color-background-overlay',
+    'side-drawer-box-shadow-color': 'color-box-shadow',
 };
diff --git a/packages/react/src/themes/tokens/component/spinner-tokens.ts b/packages/react/src/themes/tokens/component/spinner-tokens.ts
index d1734ba1a5..3ce6f5f7dc 100644
--- a/packages/react/src/themes/tokens/component/spinner-tokens.ts
+++ b/packages/react/src/themes/tokens/component/spinner-tokens.ts
@@ -11,5 +11,5 @@ export type SpinnerTokenMap = {
 };
 
 export const defaultSpinnerTokens: SpinnerTokenMap = {
-    'spinner-fill-color': 'color-brand-50',
+    'spinner-fill-color': 'color-background-brand',
 };
diff --git a/packages/react/src/themes/tokens/component/status-tokens.ts b/packages/react/src/themes/tokens/component/status-tokens.ts
index 9fecd08df4..88cac5f2c9 100644
--- a/packages/react/src/themes/tokens/component/status-tokens.ts
+++ b/packages/react/src/themes/tokens/component/status-tokens.ts
@@ -15,9 +15,9 @@ export type StatusTokenMap = {
 };
 
 export const defaultStatusTokens: StatusTokenMap = {
-    'status-circle-blocked-background-color': 'color-alert-50',
-    'status-circle-enabled-background-color': 'color-success-50',
-    'status-circle-disabled-background-color': 'color-white',
-    'status-circle-disabled-border-color': 'color-neutral-65',
-    'status-disabled-text-color': 'color-neutral-65',
+    'status-circle-blocked-background-color': 'color-feedback-background-alert-bold',
+    'status-circle-enabled-background-color': 'color-feedback-background-success-bold',
+    'status-circle-disabled-background-color': 'color-background-disabled',
+    'status-circle-disabled-border-color': 'color-border-disabled',
+    'status-disabled-text-color': 'color-content-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/stepper-tokens.ts b/packages/react/src/themes/tokens/component/stepper-tokens.ts
index 49dc0edd5c..9035e8a1fc 100644
--- a/packages/react/src/themes/tokens/component/stepper-tokens.ts
+++ b/packages/react/src/themes/tokens/component/stepper-tokens.ts
@@ -17,11 +17,11 @@ export type StepperTokenMap = {
 };
 
 export const defaultStepperTokens: StepperTokenMap = {
-    'stepper-button-border-color': 'color-neutral-65',
-    'stepper-button-disabled-background-color': 'color-neutral-05',
-    'stepper-button-disabled-border-color': 'color-neutral-15',
-    'stepper-button-disabled-text-color': 'color-neutral-30',
-    'stepper-button-hover-background-color': 'color-neutral-15',
-    'stepper-button-text-color': 'color-neutral-65',
-    'stepper-button-background-color': 'color-white',
+    'stepper-button-background-color': 'color-control-background',
+    'stepper-button-border-color': 'color-control-border',
+    'stepper-button-text-color': 'color-control-auxiliary',
+    'stepper-button-hover-background-color': 'color-control-background-hover',
+    'stepper-button-disabled-background-color': 'color-control-background-disabled',
+    'stepper-button-disabled-border-color': 'color-control-border-disabled',
+    'stepper-button-disabled-text-color': 'color-control-auxiliary-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/tab-tokens.ts b/packages/react/src/themes/tokens/component/tab-tokens.ts
index 25860867b7..0ad3852367 100644
--- a/packages/react/src/themes/tokens/component/tab-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tab-tokens.ts
@@ -2,20 +2,25 @@ import { AliasTokens } from '../alias-tokens';
 import { RefTokens } from '../ref-tokens';
 
 export type TabTokens =
-    | 'tab-background-color'
-    | 'tab-border-bottom-color'
-    | 'tab-global-background-color'
-    | 'tab-icon-color'
-    | 'tab-text-color'
-    | 'tab-hover-indicator-color'
-    | 'tab-hover-text-color'
-    | 'tab-active-indicator-color'
-    | 'tab-active-text-color'
-    | 'tab-selected-indicator-color'
-    | 'tab-selected-background-color'
-    | 'tab-selected-text-color'
-    | 'tab-panel-border-color'
-    | 'tab-panel-background-color';
+    | 'tab-section-border-color'
+    | 'tab-section-box-shadow-color'
+    | 'tab-global-list-background-color'
+    | 'tab-section-list-background-color'
+    | 'tab-section-button-background-color'
+    | 'tab-global-button-background-color'
+    | 'tab-button-icon-color'
+    | 'tab-button-text-color'
+    | 'tab-button-indicator-hover-background-color'
+    | 'tab-button-hover-text-color'
+    | 'tab-button-indicator-active-background-color'
+    | 'tab-button-active-text-color'
+    | 'tab-button-indicator-selected-background-color'
+    | 'tab-global-button-selected-background-color'
+    | 'tab-section-button-selected-background-color'
+    | 'tab-button-selected-text-color'
+    | 'tab-section-background-color'
+    | 'tab-scroll-button-hover-background-color'
+    | 'tab-border-bottom-color';
 
 export type TabTokenValue = AliasTokens | RefTokens;
 
@@ -24,18 +29,40 @@ export type TabTokenMap = {
 };
 
 export const defaultTabTokens: TabTokenMap = {
-    'tab-background-color': 'color-neutral-05',
-    'tab-border-bottom-color': 'color-neutral-15',
-    'tab-global-background-color': 'color-white',
-    'tab-icon-color': 'color-neutral-65',
-    'tab-text-color': 'color-neutral-65',
-    'tab-hover-indicator-color': 'color-neutral-15',
-    'tab-hover-text-color': 'color-neutral-65',
-    'tab-active-indicator-color': 'color-brand-70',
-    'tab-active-text-color': 'color-neutral-90',
-    'tab-selected-indicator-color': 'color-brand-50',
-    'tab-selected-background-color': 'color-white',
-    'tab-selected-text-color': 'color-neutral-90',
-    'tab-panel-border-color': 'color-neutral-05',
-    'tab-panel-background-color': 'color-white',
+    /**
+     * tabs global
+     */
+    'tab-global-button-background-color': 'transparent-100',
+    'tab-global-list-background-color': 'color-background',
+    'tab-global-button-selected-background-color': 'transparent-100',
+
+    /**
+     * tabs section
+     */
+    'tab-section-background-color': 'color-background',
+    'tab-section-border-color': 'color-border',
+    'tab-section-box-shadow-color': 'color-box-shadow',
+    'tab-section-list-background-color': 'color-background-neutral-subtle',
+    'tab-section-button-background-color': 'color-background',
+    'tab-section-button-selected-background-color': 'color-background',
+
+    /**
+     * tab button
+     */
+    'tab-button-icon-color': 'color-content-subtle',
+    'tab-button-text-color': 'color-content-subtle',
+    'tab-button-hover-text-color': 'color-content-hover',
+    'tab-button-active-text-color': 'color-content',
+    'tab-button-selected-text-color': 'color-content',
+
+    'tab-scroll-button-hover-background-color': 'color-neutral-15',
+
+    'tab-border-bottom-color': 'color-border',
+
+    /**
+     * tab button indicator
+     */
+    'tab-button-indicator-hover-background-color': 'color-background-hover',
+    'tab-button-indicator-active-background-color': 'color-background-indicator-active',
+    'tab-button-indicator-selected-background-color': 'color-background-indicator-selected',
 };
diff --git a/packages/react/src/themes/tokens/component/table-tokens.ts b/packages/react/src/themes/tokens/component/table-tokens.ts
index 60ec5fba6e..213c8909cb 100644
--- a/packages/react/src/themes/tokens/component/table-tokens.ts
+++ b/packages/react/src/themes/tokens/component/table-tokens.ts
@@ -28,25 +28,27 @@ export type TableTokenMap = {
 };
 
 export const defaultTableTokens: TableTokenMap = {
-    'table-text-color': 'color-neutral-90',
-    'table-background-color': 'color-white',
+    'table-background-color': 'transparent-100',
+    'table-text-color': 'color-content',
 
-    'table-header-background-color': 'color-white',
-    'table-header-border-color': 'color-neutral-15',
+    'table-header-background-color': 'color-background',
+    'table-header-border-color': 'color-border',
     'table-body-background-color': 'transparent-100',
-    'table-footer-border-color': 'color-neutral-15',
-    'table-footer-background-color': 'color-white',
-
-    'table-cell-hover-background-color': 'color-neutral-15',
-    'table-cell-number-text-color': 'color-neutral-65',
-
-    'table-group-border-color': 'color-neutral-15',
-    'table-row-border-color': 'color-neutral-15',
-    'table-row-odd-background-color': 'color-neutral-02',
-    'table-row-selected-background-color': 'color-brand-05',
-    'table-row-error-background-color': 'color-alert-05',
-    'table-row-error-border-color': 'color-alert-50',
-    'table-sort-button-ascending-icon-color': 'color-neutral-65',
-    'table-sort-button-descending-icon-color': 'color-neutral-65',
-    'table-sort-button-default-icon-color': 'color-neutral-65',
+    'table-footer-background-color': 'color-background',
+    'table-footer-border-color': 'color-border',
+
+    'table-group-border-color': 'color-border',
+
+    'table-cell-hover-background-color': 'color-background-hover',
+    'table-cell-number-text-color': 'color-content-subtle',
+
+    'table-row-border-color': 'color-border',
+    'table-row-odd-background-color': 'color-background-isolated',
+    'table-row-selected-background-color': 'color-background-selected',
+    'table-row-error-background-color': 'color-feedback-background-alert-subtle',
+    'table-row-error-border-color': 'color-feedback-border-alert',
+
+    'table-sort-button-ascending-icon-color': 'color-content-subtle',
+    'table-sort-button-descending-icon-color': 'color-content-subtle',
+    'table-sort-button-default-icon-color': 'color-content-subtle',
 };
diff --git a/packages/react/src/themes/tokens/component/tag-tokens.ts b/packages/react/src/themes/tokens/component/tag-tokens.ts
index 2df3101f1f..07e183f3b4 100644
--- a/packages/react/src/themes/tokens/component/tag-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tag-tokens.ts
@@ -62,20 +62,20 @@ export type TagTokenMap = {
 };
 
 export const defaultTagTokens: TagTokenMap = {
-    'tag-background-color': 'color-neutral-05',
-    'tag-border-color': 'color-neutral-50',
-    'tag-text-color': 'color-neutral-90',
-    'tag-icon-color': 'color-neutral-90',
+    'tag-background-color': 'color-background-neutral-subtle',
+    'tag-border-color': 'color-border-bold',
+    'tag-text-color': 'color-content',
+    'tag-icon-color': 'color-content',
 
-    'tag-hover-background-color': 'color-neutral-15',
-    'tag-hover-border-color': 'color-black',
-    'tag-hover-text-color': 'color-black',
-    'tag-hover-icon-color': 'color-black',
+    'tag-hover-background-color': 'color-background-hover',
+    'tag-hover-border-color': 'color-border-hover',
+    'tag-hover-icon-color': 'color-content-hover',
+    'tag-hover-text-color': 'color-content-hover',
 
-    'tag-selected-background-color': 'color-brand-05',
-    'tag-selected-border-color': 'color-brand-70',
-    'tag-selected-text-color': 'color-brand-70',
-    'tag-selected-icon-color': 'color-brand-70',
+    'tag-selected-background-color': 'color-background-selected',
+    'tag-selected-border-color': 'color-border-selected',
+    'tag-selected-text-color': 'color-content-selected',
+    'tag-selected-icon-color': 'color-content-selected',
 
     'tag-decorative-01-background-color': 'color-decorative-01-05',
     'tag-decorative-01-border-color': 'color-decorative-01-50',
diff --git a/packages/react/src/themes/tokens/component/text-area-tokens.ts b/packages/react/src/themes/tokens/component/text-area-tokens.ts
index 2527ab9f24..c6192c0e52 100644
--- a/packages/react/src/themes/tokens/component/text-area-tokens.ts
+++ b/packages/react/src/themes/tokens/component/text-area-tokens.ts
@@ -12,6 +12,6 @@ export type TextAreaTokenMap = {
 };
 
 export const defaultTextAreaTokens: TextAreaTokenMap = {
-    'text-area-counter-error-text-color': 'color-alert-50',
-    'text-area-counter-text-color': 'color-neutral-65',
+    'text-area-counter-error-text-color': 'color-control-auxiliary-error',
+    'text-area-counter-text-color': 'color-control-auxiliary',
 };
diff --git a/packages/react/src/themes/tokens/component/text-input-tokens.ts b/packages/react/src/themes/tokens/component/text-input-tokens.ts
index a6bcd83002..c28cf83442 100644
--- a/packages/react/src/themes/tokens/component/text-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/text-input-tokens.ts
@@ -19,13 +19,17 @@ export type TextInputTokenMap = {
 };
 
 export const defaultTextInputTokens: TextInputTokenMap = {
-    'text-input-background-color': 'color-white',
-    'text-input-border-color': 'color-neutral-65',
-    'text-input-error-border-color': 'color-alert-50',
-    'text-input-text-color': 'color-black',
-    'text-input-placeholder-text-color': 'color-neutral-65',
-    'text-input-disabled-background-color': 'color-neutral-05',
-    'text-input-disabled-border-color': 'color-neutral-15',
-    'text-input-disabled-text-color': 'color-neutral-15',
-    'text-input-placeholder-disabled-text-color': 'color-neutral-30',
+    'text-input-background-color': 'color-control-background',
+    'text-input-disabled-background-color': 'color-control-background-disabled',
+
+    'text-input-border-color': 'color-control-border',
+    'text-input-disabled-border-color': 'color-control-border-disabled',
+
+    'text-input-error-border-color': 'color-control-border-error',
+
+    'text-input-text-color': 'color-control-value',
+    'text-input-disabled-text-color': 'color-control-value-disabled',
+
+    'text-input-placeholder-text-color': 'color-control-auxiliary',
+    'text-input-placeholder-disabled-text-color': 'color-control-auxiliary-disabled',
 };
diff --git a/packages/react/src/themes/tokens/component/toast-tokens.ts b/packages/react/src/themes/tokens/component/toast-tokens.ts
index 2efac00648..bdbe9f9ebd 100644
--- a/packages/react/src/themes/tokens/component/toast-tokens.ts
+++ b/packages/react/src/themes/tokens/component/toast-tokens.ts
@@ -25,23 +25,23 @@ export type ToastTokenMap = {
 };
 
 export const defaultToastTokens: ToastTokenMap = {
-    'toast-neutral-background-color': 'color-neutral-65',
-    'toast-neutral-text-color': 'color-white',
-    'toast-neutral-icon-color': 'color-white',
+    'toast-neutral-background-color': 'color-background-neutral-bold',
+    'toast-neutral-text-color': 'color-content-inverse',
+    'toast-neutral-icon-color': 'color-content-inverse',
 
-    'toast-alert-background-color': 'color-alert-50',
-    'toast-alert-text-color': 'color-white',
-    'toast-alert-icon-color': 'color-white',
+    'toast-discovery-background-color': 'color-feedback-background-discovery-bold',
+    'toast-discovery-text-color': 'color-content-inverse',
+    'toast-discovery-icon-color': 'color-content-inverse',
 
-    'toast-discovery-background-color': 'color-discovery-50',
-    'toast-discovery-text-color': 'color-white',
-    'toast-discovery-icon-color': 'color-white',
+    'toast-success-background-color': 'color-feedback-background-success-bold',
+    'toast-success-text-color': 'color-content-inverse',
+    'toast-success-icon-color': 'color-content-inverse',
 
-    'toast-success-background-color': 'color-success-50',
-    'toast-success-text-color': 'color-white',
-    'toast-success-icon-color': 'color-white',
+    'toast-warning-background-color': 'color-feedback-background-warning-bold',
+    'toast-warning-text-color': 'color-content',
+    'toast-warning-icon-color': 'color-content',
 
-    'toast-warning-background-color': 'color-warning-50',
-    'toast-warning-text-color': 'color-neutral-90',
-    'toast-warning-icon-color': 'color-neutral-90',
+    'toast-alert-background-color': 'color-feedback-background-alert-bold',
+    'toast-alert-text-color': 'color-content-inverse',
+    'toast-alert-icon-color': 'color-content-inverse',
 };
diff --git a/packages/react/src/themes/tokens/component/toggle-button-group-tokens.ts b/packages/react/src/themes/tokens/component/toggle-button-group-tokens.ts
deleted file mode 100644
index f9f0c3dd72..0000000000
--- a/packages/react/src/themes/tokens/component/toggle-button-group-tokens.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { AliasTokens } from '../alias-tokens';
-import { RefTokens } from '../ref-tokens';
-
-export type ToggleButtonGroupTokens =
-    | 'toggle-button-background-color'
-    | 'toggle-button-selected-background-color'
-    | 'toggle-button-hover-background-color'
-    | 'toggle-button-disabled-background-color'
-    | 'toggle-button-border-color'
-    | 'toggle-button-selected-border-color'
-    | 'toggle-button-hover-border-color'
-    | 'toggle-button-disabled-border-color'
-    | 'toggle-button-text-color'
-    | 'toggle-button-selected-text-color'
-    | 'toggle-button-hover-text-color'
-    | 'toggle-button-disabled-text-color';
-
-export type ToggleButtonGroupTokenValue = AliasTokens | RefTokens;
-
-export type ToggleButtonGroupTokenMap = {
-    [Token in ToggleButtonGroupTokens]: ToggleButtonGroupTokenValue;
-};
-
-export const defaultToggleButtonGroupTokens: ToggleButtonGroupTokenMap = {
-    'toggle-button-background-color': 'color-white',
-    'toggle-button-text-color': 'color-neutral-65',
-    'toggle-button-border-color': 'color-neutral-50',
-
-    'toggle-button-hover-background-color': 'color-neutral-15',
-    'toggle-button-hover-border-color': 'color-neutral-65',
-    'toggle-button-hover-text-color': 'color-black',
-
-    'toggle-button-disabled-background-color': 'color-white',
-    'toggle-button-disabled-border-color': 'color-neutral-30',
-    'toggle-button-disabled-text-color': 'color-neutral-30',
-
-    'toggle-button-selected-background-color': 'color-brand-05',
-    'toggle-button-selected-border-color': 'color-brand-80',
-    'toggle-button-selected-text-color': 'color-brand-80',
-};
diff --git a/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts b/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
index fc992be364..62d562fa57 100644
--- a/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
+++ b/packages/react/src/themes/tokens/component/toggle-switch-tokens.ts
@@ -20,14 +20,16 @@ export type ToggleSwitchTokenMap = {
 };
 
 export const defaultToggleSwitchTokens: ToggleSwitchTokenMap = {
-    'toggle-switch-background-color': 'color-neutral-50',
-    'toggle-switch-border-color': 'color-neutral-30',
-    'toggle-switch-disabled-background-color': 'color-neutral-15',
-    'toggle-switch-disabled-border-color': 'color-neutral-15',
-    'toggle-switch-disabled-toggled-background-color': 'color-success-20',
-    'toggle-switch-disabled-toggled-border-color': 'color-success-20',
-    'toggle-switch-toggled-background-color': 'color-success-50',
-    'toggle-switch-toggled-border-color': 'color-success-50',
-    'toggle-switch-knob-background-color': 'color-white',
-    'toggle-switch-label-text-color': 'color-black',
+    'toggle-switch-background-color': 'color-background-neutral-bold',
+    'toggle-switch-border-color': 'color-background-neutral-bold',
+    'toggle-switch-toggled-background-color': 'color-feedback-background-success-bold',
+    'toggle-switch-toggled-border-color': 'color-feedback-background-success-bold',
+
+    'toggle-switch-disabled-background-color': 'color-background-neutral-bold-disabled',
+    'toggle-switch-disabled-border-color': 'color-background-neutral-bold-disabled',
+    'toggle-switch-disabled-toggled-background-color': 'color-feedback-background-success-bold-disabled',
+    'toggle-switch-disabled-toggled-border-color': 'color-feedback-background-success-bold-disabled',
+
+    'toggle-switch-label-text-color': 'color-content',
+    'toggle-switch-knob-background-color': 'color-control-background',
 };
diff --git a/packages/react/src/themes/tokens/component/toggletip-tokens.ts b/packages/react/src/themes/tokens/component/toggletip-tokens.ts
index 12883c81ba..188b9441d2 100644
--- a/packages/react/src/themes/tokens/component/toggletip-tokens.ts
+++ b/packages/react/src/themes/tokens/component/toggletip-tokens.ts
@@ -13,7 +13,7 @@ export type ToggleTipTokenMap = {
 };
 
 export const defaultToggleTipTokens: ToggleTipTokenMap = {
-    'toggletip-popper-container-background-color': 'color-white',
-    'toggletip-popper-container-border-color': 'color-neutral-65',
-    'toggletip-popper-container-text-color': 'color-black',
+    'toggletip-popper-container-background-color': 'color-background-overlay',
+    'toggletip-popper-container-border-color': 'color-border-overlay',
+    'toggletip-popper-container-text-color': 'color-content',
 };
diff --git a/packages/react/src/themes/tokens/component/tooltip-tokens.ts b/packages/react/src/themes/tokens/component/tooltip-tokens.ts
index 15aa878be4..8fd9424766 100644
--- a/packages/react/src/themes/tokens/component/tooltip-tokens.ts
+++ b/packages/react/src/themes/tokens/component/tooltip-tokens.ts
@@ -16,10 +16,10 @@ export type TooltipTokenMap = {
 };
 
 export const defaultTooltipTokens: TooltipTokenMap = {
-    'tooltip-icon-color': 'color-neutral-90',
-    'tooltip-inverted-icon-color': 'color-white',
-    'tooltip-popper-container-border-color': 'color-white',
-    'tooltip-popper-container-text-color': 'color-white',
-    'tooltip-popper-container-success-background-color': 'color-success-50',
-    'tooltip-popper-container-default-background-color': 'color-neutral-65',
+    'tooltip-icon-color': 'color-content',
+    'tooltip-inverted-icon-color': 'color-content-inverse',
+    'tooltip-popper-container-border-color': 'color-border-inverse',
+    'tooltip-popper-container-text-color': 'color-content-inverse',
+    'tooltip-popper-container-default-background-color': 'color-background-neutral-bold',
+    'tooltip-popper-container-success-background-color': 'color-feedback-background-success-bold',
 };