diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
index d74464727f56..287095b71842 100644
--- a/packages/components/src/components/data-table/_data-table-core.scss
+++ b/packages/components/src/components/data-table/_data-table-core.scss
@@ -275,9 +275,9 @@
     tbody
     tr:not(.#{$prefix}--parent-row):nth-child(even)
     td {
-    background-color: $data-table-zebra-color;
-    border-top: 1px solid $data-table-zebra-color;
-    border-bottom: 1px solid $data-table-zebra-color;
+    background-color: $layer-accent;
+    border-top: 1px solid $layer-accent;
+    border-bottom: 1px solid $layer-accent;
   }
 
   .#{$prefix}--data-table--zebra
diff --git a/packages/components/src/components/data-table/_data-table-expandable.scss b/packages/components/src/components/data-table/_data-table-expandable.scss
index b05c3e570679..7df59bbc097d 100644
--- a/packages/components/src/components/data-table/_data-table-expandable.scss
+++ b/packages/components/src/components/data-table/_data-table-expandable.scss
@@ -273,9 +273,9 @@
 
   .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td,
   .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 2) td {
-    background-color: $data-table-zebra-color;
-    border-top: 1px solid $data-table-zebra-color;
-    border-bottom: 1px solid $data-table-zebra-color;
+    background-color: $layer-accent;
+    border-top: 1px solid $layer-accent;
+    border-bottom: 1px solid $layer-accent;
   }
 
   .#{$prefix}--data-table--zebra tr.#{$prefix}--parent-row td,
diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index bdbe468fda8e..00462c1e7d12 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -127,13 +127,17 @@
   }
 
   .#{$prefix}--tag--high-contrast {
-    @include tag-theme($inverse-02, $inverse-01, $inverse-hover-ui);
+    @include tag-theme(
+      $background-inverse,
+      $text-inverse,
+      $background-inverse-hover
+    );
   }
 
   .#{$prefix}--tag--disabled,
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
   .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
-    @include tag-theme($disabled-01, $disabled-02);
+    @include tag-theme($layer-disabled, $text-disabled);
 
     &:hover {
       cursor: not-allowed;
@@ -227,7 +231,7 @@
   }
 
   .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
-    box-shadow: inset 0 0 0 1px $inverse-focus-ui;
+    box-shadow: inset 0 0 0 1px $focus-inverse;
   }
 
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
@@ -236,7 +240,7 @@
   }
 
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
-    fill: $disabled-02;
+    fill: $icon-disabled;
   }
 
   // small tags
@@ -258,7 +262,10 @@
   // Skeleton state
   .#{$prefix}--tag.#{$prefix}--skeleton {
     @include skeleton;
-    @include tag-theme($bg-color: $skeleton-01, $text-color: $text-01);
+    @include tag-theme(
+      $bg-color: $skeleton-background,
+      $text-color: $text-primary
+    );
 
     width: rem(60px);
     overflow: hidden;
diff --git a/packages/components/src/components/text-area/_text-area.scss b/packages/components/src/components/text-area/_text-area.scss
index 0831292b7c92..23220e55f978 100644
--- a/packages/components/src/components/text-area/_text-area.scss
+++ b/packages/components/src/components/text-area/_text-area.scss
@@ -30,10 +30,10 @@
     height: 100%;
     min-height: rem(40px);
     padding: rem(11px) $carbon--spacing-05;
-    color: $text-01;
-    background-color: $field-01;
+    color: $text-primary;
+    background-color: $field;
     border: none;
-    border-bottom: 1px solid $ui-04;
+    border-bottom: 1px solid $border-strong;
     transition: background-color $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
     resize: vertical;
@@ -49,6 +49,7 @@
     @include type-style('body-long-01');
   }
 
+  // V11: Possibly deprecate
   .#{$prefix}--text-area--light {
     background-color: $field-02;
   }
@@ -67,24 +68,25 @@
     position: absolute;
     top: $carbon--spacing-04;
     right: $carbon--spacing-05;
-    fill: $support-01;
+    fill: $support-error;
   }
 
   //-----------------------------
   // Disabled
   //-----------------------------
   .#{$prefix}--text-area:disabled {
-    color: $disabled-02;
-    background-color: $disabled-01;
+    color: $text-disabled;
+    background-color: $field-disabled;
     border-bottom: 1px solid transparent;
     outline: none;
     cursor: not-allowed;
   }
 
   .#{$prefix}--text-area:disabled::placeholder {
-    color: $disabled-02;
+    color: $text-disabled;
   }
 
+  // V11: Possibly deprecate
   .#{$prefix}--text-area.#{$prefix}--text-area--light:disabled {
     background-color: $field-02;
   }
diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
index a13132e7b89d..d3c99bdaeecb 100644
--- a/packages/components/src/components/text-input/_text-input.scss
+++ b/packages/components/src/components/text-input/_text-input.scss
@@ -28,10 +28,10 @@
     width: 100%;
     height: rem(40px);
     padding: 0 $carbon--spacing-05;
-    color: $text-01;
-    background-color: $field-01;
+    color: $text-primary;
+    background-color: $field;
     border: none;
-    border-bottom: 1px solid $ui-04;
+    border-bottom: 1px solid $border-strong;
     transition: background-color $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
 
@@ -63,6 +63,7 @@
     @include placeholder-colors;
   }
 
+  // V11: Possibly deprecate
   .#{$prefix}--text-input--light {
     background-color: $field-02;
   }
@@ -82,11 +83,11 @@
       top: 50%;
       right: $carbon--spacing-05;
       transform: translateY(-50%);
-      fill: $support-01;
+      fill: $support-error;
     }
 
     .#{$prefix}--text-input__invalid-icon--warning {
-      fill: $support-03;
+      fill: $support-warning;
 
       path:first-of-type {
         opacity: 1;
@@ -121,7 +122,7 @@
 
       svg {
         transition: fill $duration--fast-01 motion(standard, productive);
-        fill: $icon-02;
+        fill: $icon-secondary;
 
         // Windows, Firefox HCM Fix
         @media screen and (-ms-high-contrast: active),
@@ -136,10 +137,11 @@
       @include focus-outline('outline');
     }
 
-    .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover,
+    .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover
+      svg,
     .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus
       svg {
-      fill: $icon-01;
+      fill: $icon-primary;
     }
 
     .#{$prefix}--text-input--invalid,
@@ -177,10 +179,10 @@
     + .#{$prefix}--text-input--password__visibility__toggle
     svg {
     cursor: not-allowed;
-    fill: $disabled-02;
+    fill: $icon-disabled;
 
     &:hover {
-      fill: $disabled-02;
+      fill: $icon-disabled;
     }
   }
 
@@ -190,20 +192,21 @@
   .#{$prefix}--text-input:disabled {
     @include focus-outline('reset');
 
-    color: $disabled-02;
-    background-color: $disabled-01;
+    color: $text-disabled;
+    background-color: $field-disabled;
     border-bottom: 1px solid transparent;
     // Needed to fix disabled text in Safari #6673
     -webkit-text-fill-color: currentColor;
     cursor: not-allowed;
   }
 
+  // V11: Possibly deprecate
   .#{$prefix}--text-input--light:disabled {
     background-color: $field-02;
   }
 
   .#{$prefix}--text-input:disabled::placeholder {
-    color: $disabled-02;
+    color: $text-disabled;
     opacity: 1;
   }
 
@@ -234,7 +237,7 @@
   //-----------------------------
   .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper {
     position: relative;
-    background: $field-01;
+    background: $field;
     transition: background-color $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
   }
@@ -274,7 +277,7 @@
     + .#{$prefix}--text-input__divider {
     display: block;
     margin: 0 1rem;
-    border-color: $ui-03;
+    border-color: $border-subtle;
     border-style: solid;
     border-bottom: none;
   }
@@ -283,6 +286,7 @@
     top: rem(80px);
   }
 
+  // V11: Possibly deprecate
   .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--light {
     background: $field-02;
   }
diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
index d5161ce60e2e..e6b0b31028af 100644
--- a/packages/components/src/components/tile/_tile.scss
+++ b/packages/components/src/components/tile/_tile.scss
@@ -24,7 +24,7 @@
     min-width: 8rem;
     min-height: 4rem;
     padding: $carbon--spacing-05;
-    background-color: $ui-01;
+    background-color: $layer;
     outline: 2px solid transparent;
     outline-offset: -2px;
 
@@ -33,6 +33,7 @@
     }
   }
 
+  // V11: Possibly deprecate
   .#{$prefix}--tile--light {
     background-color: $ui-02;
   }
@@ -44,7 +45,7 @@
     transition: $duration--moderate-01 motion(standard, productive);
 
     &:hover {
-      background: $hover-ui;
+      background: $layer-hover;
     }
   }
 
@@ -71,7 +72,7 @@
     @include reset;
     @include type-style('body-short-01');
 
-    color: $text-01;
+    color: $text-primary;
     text-decoration: none;
   }
 
@@ -79,19 +80,16 @@
   .#{$prefix}--tile--clickable:active,
   .#{$prefix}--tile--clickable:visited,
   .#{$prefix}--tile--clickable:visited:hover {
-    color: $text-01;
+    color: $text-primary;
     text-decoration: none;
   }
 
   // Disabled ClickableTile
-  .#{$prefix}--tile--clickable.#{$prefix}--link--disabled {
-    color: $disabled-02;
-  }
-
+  .#{$prefix}--tile--clickable.#{$prefix}--link--disabled,
   .#{$prefix}--tile--clickable:hover.#{$prefix}--link--disabled {
     display: block;
-    color: $disabled-02;
-    background-color: $disabled-01;
+    color: $text-disabled;
+    background-color: $layer-disabled;
   }
 
   .#{$prefix}--tile--selectable {
@@ -115,7 +113,7 @@
 
     svg {
       border-radius: 50%;
-      fill: $icon-02;
+      fill: $icon-secondary;
     }
 
     &:focus {
@@ -135,7 +133,7 @@
       margin-left: $carbon--spacing-03;
       transform-origin: center;
       transition: $duration--fast-02 motion(standard, productive);
-      fill: $ui-05;
+      fill: $icon-primary;
 
       // Windows, Firefox HCM Fix
       @media screen and (-ms-high-contrast: active),
@@ -202,7 +200,7 @@
   }
 
   .#{$prefix}--tile--is-selected {
-    border: 1px solid $ui-05;
+    border: 1px solid $layer-selected-inverse;
   }
 
   .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark {
@@ -210,7 +208,7 @@
   }
 
   .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg {
-    fill: $ui-05;
+    fill: $icon-primary;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
@@ -222,18 +220,18 @@
 
   // Fix double border
   .#{$prefix}--tile-input--checked + .#{$prefix}--tile--is-selected {
-    border-top: 1px solid $ui-01;
+    border-top: 1px solid $layer;
   }
 
   .#{$prefix}--tile:not(.#{$prefix}--tile--is-selected)
     + .#{$prefix}--tile-input--checked
     + .#{$prefix}--tile--is-selected {
-    border-top: 1px solid $ui-05;
+    border-top: 1px solid $layer-selected-inverse;
   }
 
   .#{$prefix}--tile-input--checked:first-of-type
     + .#{$prefix}--tile--is-selected {
-    border-top: 1px solid $ui-05;
+    border-top: 1px solid $layer-selected-inverse;
   }
 
   .#{$prefix}--tile-content {
@@ -250,23 +248,38 @@
   }
 
   .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable {
-    color: $disabled-02;
-    background-color: $ui-01;
+    color: $text-disabled;
+    background-color: $layer;
     cursor: not-allowed;
   }
 
+  // V11: Possibly deprecate
   .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable.#{$prefix}--tile--light {
     background-color: $ui-02;
   }
 
   .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected {
-    outline-color: $disabled-02;
+    border-color: $button-disabled;
+  }
+
+  // Disabled style overrides necessary for double border fix (L223)
+  .#{$prefix}--tile-input--checked
+    + .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected {
+    border-top: 1px solid $layer;
+  }
+
+  .#{$prefix}--tile-input--checked:first-of-type
+    + .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected,
+  .#{$prefix}--tile:not(.#{$prefix}--tile--is-selected)
+    + .#{$prefix}--tile-input--checked
+    + .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected {
+    border-top: 1px solid $button-disabled;
   }
 
   .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected
     .#{$prefix}--tile__checkmark
     svg {
-    fill: $disabled-02;
+    fill: $icon-disabled;
   }
 }
 
diff --git a/packages/components/src/components/time-picker/_time-picker.scss b/packages/components/src/components/time-picker/_time-picker.scss
index 7209de360c34..c4e8537ffe4d 100644
--- a/packages/components/src/components/time-picker/_time-picker.scss
+++ b/packages/components/src/components/time-picker/_time-picker.scss
@@ -61,16 +61,17 @@
     }
   }
 
+  // V11: Possibly deprecate
   .#{$prefix}--time-picker--light .#{$prefix}--select-input {
     background-color: $field-02;
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $field-hover;
     }
 
     &:disabled,
     &:hover:disabled {
-      color: $disabled-02;
+      color: $text-disabled;
       background-color: transparent;
       border-bottom: 1px solid transparent;
       cursor: not-allowed;
diff --git a/packages/components/src/components/toggle/_toggle.scss b/packages/components/src/components/toggle/_toggle.scss
index b38e0c04b5c2..8ea818df3ce2 100644
--- a/packages/components/src/components/toggle/_toggle.scss
+++ b/packages/components/src/components/toggle/_toggle.scss
@@ -37,6 +37,10 @@
     cursor: pointer;
   }
 
+  // V11: It looks like this block no longer applies to any element.
+  // May need to check with Vue/Angular implementations,
+  // but I do not see any `toggle__appearance` in the rendered HTML.
+  // There seem to be quite a few references throughout this file.
   .#{$prefix}--toggle__appearance {
     position: relative;
     width: carbon--rem(48px);
@@ -50,7 +54,7 @@
       box-sizing: border-box;
       width: carbon--rem(48px);
       height: carbon--rem(24px);
-      background-color: $ui-04;
+      background-color: $toggle-off;
       border-radius: carbon--rem(15px);
       // Corresponds to the double-border for focused state (`0 0 0 1px $ui-02, 0 0 0 3px $focus`)
       box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent;
@@ -70,7 +74,7 @@
       box-sizing: border-box;
       width: carbon--rem(18px);
       height: carbon--rem(18px);
-      background-color: $icon-03;
+      background-color: $icon-on-color;
       border-radius: 50%;
       cursor: pointer;
       transition: transform $duration--fast-01 motion(exit, productive);
@@ -87,7 +91,7 @@
     height: carbon--rem(5px);
     transform: scale(0.2);
     transition: $duration--fast-01 motion(exit, productive);
-    fill: $icon-03;
+    fill: $icon-on-color;
   }
 
   .#{$prefix}--toggle__text--left,
@@ -125,11 +129,11 @@
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__appearance {
     &::before {
-      background-color: $support-02;
+      background-color: $support-success;
     }
 
     &::after {
-      background-color: $icon-03;
+      background-color: $icon-on-color;
       transform: translateX(carbon--rem(24px));
     }
   }
@@ -148,7 +152,7 @@
   .#{$prefix}--toggle:active
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__appearance::before {
-    box-shadow: 0 0 0 1px $ui-02, 0 0 0 3px $focus;
+    box-shadow: 0 0 0 1px $layer-accent, 0 0 0 3px $focus;
   }
 
   //----------------------------------------------
@@ -162,11 +166,11 @@
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__appearance {
     &::before {
-      background-color: $disabled-01;
+      background-color: $layer-disabled;
     }
 
     &::after {
-      background-color: $disabled-02;
+      background-color: $button-disabled;
     }
 
     &::before,
@@ -182,7 +186,7 @@
   .#{$prefix}--toggle:disabled
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__text--right {
-    color: $disabled;
+    color: $text-disabled;
   }
 
   .#{$prefix}--toggle:disabled:active
@@ -194,7 +198,7 @@
   .#{$prefix}--toggle:disabled
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__check {
-    fill: $disabled-02;
+    fill: $icon-disabled;
   }
 
   //----------------------------------------------
@@ -227,7 +231,7 @@
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__check {
     transform: scale(1) translateX(carbon--rem(16px));
-    fill: $support-02;
+    fill: $support-success;
   }
 
   .#{$prefix}--toggle--small
@@ -264,7 +268,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    color: $text-02;
+    color: $text-secondary;
     cursor: pointer;
   }
 
@@ -284,7 +288,7 @@
       box-sizing: border-box;
       width: carbon--rem(48px);
       height: carbon--rem(24px);
-      background-color: $ui-04;
+      background-color: $toggle-off;
       border-radius: carbon--rem(15px);
       // Corresponds to the double-border for focused state (`0 0 0 1px $ui-02, 0 0 0 3px $focus`)
       box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent;
@@ -310,7 +314,7 @@
       box-sizing: border-box;
       width: carbon--rem(18px);
       height: carbon--rem(18px);
-      background-color: $icon-03;
+      background-color: $icon-on-color;
       border-radius: 50%;
       transition: transform $duration--fast-01 motion(exit, productive);
       content: '';
@@ -359,11 +363,11 @@
     + .#{$prefix}--toggle-input__label
     > .#{$prefix}--toggle__switch {
     &::before {
-      background-color: $support-02;
+      background-color: $support-success;
     }
 
     &::after {
-      background-color: $icon-03;
+      background-color: $icon-on-color;
       transform: translateX(carbon--rem(24px));
     }
   }
@@ -377,7 +381,7 @@
   .#{$prefix}--toggle-input:active
     + .#{$prefix}--toggle-input__label
     > .#{$prefix}--toggle__switch::before {
-    box-shadow: 0 0 0 1px $ui-02, 0 0 0 3px $focus;
+    box-shadow: 0 0 0 1px $focus-inset, 0 0 0 3px $focus;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
@@ -391,7 +395,7 @@
   // Disabled
   // ---------------------------------------------
   .#{$prefix}--toggle-input:disabled + .#{$prefix}--toggle-input__label {
-    color: $disabled;
+    color: $text-disabled;
     cursor: not-allowed;
   }
 
@@ -401,11 +405,11 @@
     cursor: not-allowed;
 
     &::before {
-      background-color: $disabled-01;
+      background-color: $layer-disabled;
     }
 
     &::after {
-      background-color: $disabled-02;
+      background-color: $icon-disabled;
     }
 
     &::before,
@@ -426,14 +430,14 @@
     .#{$prefix}--toggle-input:disabled
     + .#{$prefix}--toggle-input__label
     > .#{$prefix}--toggle__switch::before {
-    background-color: $disabled-02;
+    background-color: $button-disabled;
   }
 
   .#{$prefix}--data-table
     .#{$prefix}--toggle-input:disabled
     + .#{$prefix}--toggle-input__label
     > .#{$prefix}--toggle__switch::after {
-    background-color: $disabled-03;
+    background-color: $icon-on-color-disabled;
   }
 
   //----------------------------------------------
@@ -469,14 +473,14 @@
 
     .#{$prefix}--toggle__check {
       transform: scale(1) translateX(carbon--rem(16px));
-      fill: $support-02;
+      fill: $support-success;
     }
   }
 
   .#{$prefix}--toggle-input--small:disabled:checked
     + .#{$prefix}--toggle-input__label
     .#{$prefix}--toggle__check {
-    fill: $disabled-01;
+    fill: $layer-disabled;
   }
 
   //----------------------------------------------
diff --git a/packages/components/src/components/toolbar/_toolbar.scss b/packages/components/src/components/toolbar/_toolbar.scss
index 7760b16dc8a9..3c67e5b015a1 100644
--- a/packages/components/src/components/toolbar/_toolbar.scss
+++ b/packages/components/src/components/toolbar/_toolbar.scss
@@ -22,6 +22,7 @@ $css--helpers: true;
 /// Toolbar styles
 /// @access private
 /// @group toolbar
+// V11: Remove this component
 @mixin toolbar {
   .#{$prefix}--toolbar {
     display: flex;
diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
index 09f38cf8df55..7e4596a4b39a 100644
--- a/packages/components/src/components/tooltip/_tooltip.scss
+++ b/packages/components/src/components/tooltip/_tooltip.scss
@@ -48,7 +48,7 @@
     margin: 0 auto;
     margin-top: 1px;
     margin-left: 50%;
-    border-color: transparent transparent $inverse-02 transparent;
+    border-color: transparent transparent $background-inverse transparent;
     border-style: solid;
     border-width: 0 rem(4px) rem(5px) rem(4px);
     content: '';
@@ -62,10 +62,10 @@
     height: rem(24px);
     margin-left: 50%;
     padding: 0 1rem;
-    color: $inverse-01;
+    color: $text-inverse;
     font-weight: 400;
     white-space: nowrap;
-    background-color: $inverse-02;
+    background-color: $background-inverse;
     border-radius: rem(2px);
     transform: translateX(-50%);
     content: attr(aria-label);
@@ -135,6 +135,7 @@
 /// @access private
 /// @deprecated
 /// @group tooltip
+// V11: possibly remove in V11
 @mixin tooltip--definition--legacy {
   .#{$prefix}--tooltip--definition {
     @include reset;
@@ -146,8 +147,8 @@
 
       position: relative;
       display: inline-flex;
-      color: $text-01;
-      border-bottom: 1px dotted $interactive-01;
+      color: $text-primary;
+      border-bottom: 1px dotted $highlight;
 
       &:hover {
         cursor: pointer;
@@ -179,7 +180,7 @@
     width: rem(208px);
     margin-top: $carbon--spacing-04;
     padding: $carbon--spacing-03 $carbon--spacing-05;
-    background: $inverse-02;
+    background: $background-inverse;
     border-radius: rem(2px);
     cursor: pointer;
     pointer-events: none;
@@ -187,7 +188,7 @@
     p {
       @include type-style('body-short-01');
 
-      color: $inverse-01;
+      color: $text-inverse;
     }
 
     .#{$prefix}--tooltip__caret {
@@ -197,7 +198,7 @@
       width: 0.6rem;
       height: 0.6rem;
       margin-left: $carbon--spacing-05;
-      background: $inverse-02;
+      background: $background-inverse;
     }
   }
 
@@ -250,6 +251,7 @@
 /// @access private
 /// @deprecated
 /// @group tooltip
+// V11: possibly remove in V11
 @mixin tooltip--icon--legacy {
   // Icon CSS only tooltip
   .#{$prefix}--tooltip--icon {
@@ -264,7 +266,7 @@
     &:hover,
     &:focus {
       svg {
-        fill: $icon-02;
+        fill: $icon-secondary;
       }
     }
 
@@ -325,7 +327,7 @@
 
     display: inline-flex;
     align-items: center;
-    color: $text-02;
+    color: $text-secondary;
 
     &:focus {
       @include focus-outline('border');
@@ -333,7 +335,7 @@
   }
 
   .#{$prefix}--tooltip__trigger svg {
-    fill: $icon-02;
+    fill: $icon-secondary;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
@@ -354,7 +356,7 @@
     &:focus {
       @include focus-outline('border');
 
-      fill: $hover-primary;
+      fill: $button-primary-hover;
     }
   }
 
@@ -378,9 +380,9 @@
     max-width: rem(288px);
     margin-top: $carbon--spacing-02;
     padding: $carbon--spacing-05;
-    color: $inverse-01;
+    color: $text-inverse;
     word-wrap: break-word;
-    background: $inverse-02;
+    background: $background-inverse;
     border-radius: rem(2px);
 
     // Windows, Firefox HCM Fix
@@ -391,9 +393,11 @@
     }
 
     // @todo this can be deprecated in v11 since focus should always be on the content container not the tooltip
+    // V11: remove in V11
     &:focus {
       outline: 0;
-      box-shadow: inset 0 0 0 1px $inverse-02, inset 0 0 0 2px $ui-background;
+      box-shadow: inset 0 0 0 1px $background-inverse,
+        inset 0 0 0 2px $background;
     }
 
     &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-start,
@@ -457,27 +461,27 @@
     }
 
     .#{$prefix}--btn:focus {
-      border-color: $inverse-focus-ui;
-      outline-color: $inverse-02;
+      border-color: $focus-inverse;
+      outline-color: $background-inverse;
     }
 
     .#{$prefix}--link {
-      color: $inverse-link;
+      color: $link-inverse;
       font-size: rem(14px);
 
       &:focus {
-        outline: 1px solid $inverse-focus-ui;
+        outline: 1px solid $focus-inverse;
         outline-offset: 2px;
       }
 
       &:active,
       &:active:visited,
       &:active:visited:hover {
-        color: $inverse-01;
+        color: $text-inverse;
       }
 
       &:visited {
-        color: $inverse-link;
+        color: $link-inverse;
       }
     }
 
@@ -497,7 +501,7 @@
       height: 0;
       margin: 0 auto;
       border-right: $caret-size solid transparent;
-      border-bottom: $caret-size solid $inverse-02;
+      border-bottom: $caret-size solid $background-inverse;
       border-left: $caret-size solid transparent;
       content: '';
     }
@@ -567,13 +571,13 @@
   .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition {
     @include type-style('label-01');
 
-    border-bottom: rem(1px) dotted $text-02;
+    border-bottom: rem(1px) dotted $icon-secondary;
     transition: border-color $duration--fast-02;
   }
 
   .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition:hover,
   .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition:focus {
-    border-bottom-color: $interactive-04;
+    border-bottom-color: $interactive;
   }
 
   .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition.#{$prefix}--tooltip--top {
@@ -621,7 +625,7 @@
     &:hover,
     &:focus {
       svg {
-        fill: $icon-02;
+        fill: $icon-secondary;
 
         // Windows, Firefox HCM Fix
         @media screen and (-ms-high-contrast: active),
diff --git a/packages/components/src/components/treeview/_treeview.scss b/packages/components/src/components/treeview/_treeview.scss
index 69711eaf2be0..d0586a454364 100644
--- a/packages/components/src/components/treeview/_treeview.scss
+++ b/packages/components/src/components/treeview/_treeview.scss
@@ -23,8 +23,8 @@
 
     .#{$prefix}--tree-node {
       padding-left: $spacing-05;
-      color: $text-02;
-      background-color: $ui-01;
+      color: $text-secondary;
+      background-color: $layer;
 
       &:focus {
         outline: none;
@@ -44,8 +44,8 @@
     .#{$prefix}--tree-node--disabled
       .#{$prefix}--tree-node__label:hover
       .#{$prefix}--tree-node__label__details {
-      color: $disabled-02;
-      background-color: $disabled-01;
+      color: $text-disabled;
+      background-color: $layer-disabled;
     }
 
     .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon,
@@ -56,7 +56,7 @@
     .#{$prefix}--tree-node--disabled
       .#{$prefix}--tree-node__label:hover
       .#{$prefix}--tree-node__icon {
-      fill: $disabled-02;
+      fill: $icon-disabled;
     }
 
     .#{$prefix}--tree-node--disabled,
@@ -72,19 +72,19 @@
       min-height: rem(32px);
 
       &:hover {
-        color: $text-01;
-        background-color: $hover-ui;
+        color: $text-primary;
+        background-color: $layer-hover;
       }
     }
 
     .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
-      color: $text-01;
+      color: $text-primary;
     }
 
     .#{$prefix}--tree-node__label:hover
       .#{$prefix}--tree-parent-node__toggle-icon,
     .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon {
-      fill: $icon-01;
+      fill: $icon-primary;
     }
 
     .#{$prefix}--tree-leaf-node {
@@ -122,7 +122,7 @@
     .#{$prefix}--tree-parent-node__toggle-icon {
       transform: rotate(-90deg);
       transition: all $duration--fast-02 motion(standard, productive);
-      fill: $icon-02;
+      fill: $icon-secondary;
     }
 
     .#{$prefix}--tree-parent-node__toggle-icon--expanded {
@@ -133,15 +133,15 @@
       min-width: 1rem;
       min-height: 1rem;
       margin-right: $spacing-03;
-      fill: $icon-02;
+      fill: $icon-secondary;
     }
 
     .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
-      color: $text-01;
-      background-color: $selected-ui;
+      color: $text-primary;
+      background-color: $layer-selected;
 
       &:hover {
-        background-color: $hover-selected-ui;
+        background-color: $layer-selected-hover;
       }
     }
 
@@ -151,7 +151,7 @@
     .#{$prefix}--tree-node--selected
       > .#{$prefix}--tree-node__label
       .#{$prefix}--tree-node__icon {
-      fill: $icon-01;
+      fill: $icon-primary;
     }
 
     .#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label {
@@ -163,7 +163,7 @@
         left: 0;
         width: rem(4px);
         height: 100%;
-        background-color: $interactive-04;
+        background-color: $interactive;
         content: '';
       }
     }
diff --git a/packages/components/src/components/ui-shell/_content.scss b/packages/components/src/components/ui-shell/_content.scss
index de7899770bc7..cf642d51c2d3 100644
--- a/packages/components/src/components/ui-shell/_content.scss
+++ b/packages/components/src/components/ui-shell/_content.scss
@@ -15,7 +15,7 @@
 @mixin carbon-content {
   .#{$prefix}--content {
     padding: 2rem;
-    background: $ui-02;
+    background: $layer;
     will-change: margin-left;
   }
 
diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
index 529a8d3a2703..779e2ca95462 100644
--- a/packages/components/src/components/ui-shell/_header.scss
+++ b/packages/components/src/components/ui-shell/_header.scss
@@ -245,7 +245,7 @@
     bottom: -2px;
     left: 0;
     width: 100%;
-    border-bottom: 3px solid $inverse-support-04;
+    border-bottom: 3px solid $support-info-inverse;
     content: '';
   }
 
diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
index 72d728868c15..2322fccdd619 100644
--- a/packages/components/src/components/ui-shell/_side-nav.scss
+++ b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -131,7 +131,7 @@
     @include carbon--breakpoint-down('lg') {
       width: 100vw;
       height: 100vh;
-      background-color: $overlay-01;
+      background-color: $overlay;
       opacity: 1;
       transition: opacity $transition--expansion $carbon--standard-easing,
         background-color $transition--expansion $carbon--standard-easing;
diff --git a/packages/components/src/globals/scss/_css--body.scss b/packages/components/src/globals/scss/_css--body.scss
index b2bca683be6b..050e04206a63 100644
--- a/packages/components/src/globals/scss/_css--body.scss
+++ b/packages/components/src/globals/scss/_css--body.scss
@@ -18,9 +18,9 @@
     @include reset;
     @include type-style('body-short-01');
 
-    color: $text-01;
+    color: $text-primary;
     line-height: 1;
-    background-color: $ui-background;
+    background-color: $background;
   }
 }
 
diff --git a/packages/components/src/globals/scss/_css--helpers.scss b/packages/components/src/globals/scss/_css--helpers.scss
index f861f415b8f6..3063cc8b24eb 100644
--- a/packages/components/src/globals/scss/_css--helpers.scss
+++ b/packages/components/src/globals/scss/_css--helpers.scss
@@ -32,9 +32,9 @@
     @include reset;
     @include type-style('body-short-01');
 
-    color: $text-01;
+    color: $text-primary;
     line-height: 1;
-    background-color: $ui-background;
+    background-color: $background;
   }
 }
 
diff --git a/packages/components/src/globals/scss/_helper-mixins.scss b/packages/components/src/globals/scss/_helper-mixins.scss
index 9ae1932a0d5b..f37990904bdb 100644
--- a/packages/components/src/globals/scss/_helper-mixins.scss
+++ b/packages/components/src/globals/scss/_helper-mixins.scss
@@ -46,7 +46,7 @@
 /// @example @include placeholder-colors;
 /// @group global-helpers
 @mixin placeholder-colors {
-  color: $text-05;
+  color: $text-placeholder;
   opacity: 1;
 }
 
@@ -96,7 +96,7 @@
   }
 
   @if ($type == 'invalid') {
-    outline: 2px solid $support-01;
+    outline: 2px solid $support-error;
     outline-offset: -2px;
 
     @media screen and (prefers-contrast) {
@@ -170,7 +170,7 @@
 @mixin skeleton {
   position: relative;
   padding: 0;
-  background: $skeleton-01;
+  background: $skeleton-background;
   border: none;
   box-shadow: none;
   pointer-events: none;
@@ -187,7 +187,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    background: $skeleton-02;
+    background: $skeleton-element;
     animation: 3000ms ease-in-out skeleton infinite;
     content: '';
     will-change: transform-origin, transform, opacity;
diff --git a/packages/components/src/globals/scss/_theme-tokens.scss b/packages/components/src/globals/scss/_theme-tokens.scss
index dd659006d162..5dd694253e01 100644
--- a/packages/components/src/globals/scss/_theme-tokens.scss
+++ b/packages/components/src/globals/scss/_theme-tokens.scss
@@ -123,13 +123,13 @@ $input-label-weight: 400 !default;
 /// @type Color
 /// @access public
 /// @group global-themes
-$disabled: $disabled-02 !default;
+$disabled: $text-disabled !default;
 
 /// @type Color
 /// @access public
 /// @group global-themes
 /// @deprecated
-$disabled-background-color: $disabled-01 !default;
+$disabled-background-color: $layer-disabled !default;
 
 /// @type Color
 /// @access public
@@ -160,7 +160,7 @@ $link-inverse-color: #6ea6ff !default;
 /// @type Color
 /// @access public
 /// @group tooltip
-$tooltip-background-color: $inverse-02 !default;
+$tooltip-background-color: $background-inverse !default;
 
 // Button
 
@@ -284,13 +284,13 @@ $checkbox-border-width: 2px !default;
 /// @access public
 /// @group code-snippet
 /// @deprecated
-$snippet-background-color: $field-01 !default;
+$snippet-background-color: $field !default;
 
 /// @type Color
 /// @access public
 /// @group code-snippet
 /// TODO: Define for experimental
-$snippet-border-color: $ui-03 !default;
+$snippet-border-color: $border-subtle !default;
 
 // Content Switcher
 
@@ -302,12 +302,12 @@ $content-switcher-border-radius: 0 !default;
 /// @type Number
 /// @access public
 /// @group content-switcher
-$content-switcher-option-border: 1px solid $brand-01 !default;
+$content-switcher-option-border: 1px solid $border-interactive !default;
 
 /// @type Color
 /// @access public
 /// @group content-switcher
-$content-switcher-divider: $ui-03 !default;
+$content-switcher-divider: $border-subtle !default;
 
 // Data Table
 
@@ -319,7 +319,7 @@ $data-table-heading-transform: uppercase !default;
 /// @type Value
 /// @access public
 /// @group data-table
-$data-table-heading-border-bottom: 1px solid $brand-01 !default;
+$data-table-heading-border-bottom: 1px solid $border-interactive !default;
 
 /// @type Number
 /// @access public
@@ -329,12 +329,12 @@ $data-table-row-height: 2rem !default;
 /// @type Color
 /// @access public
 /// @group data-table
-$data-table-zebra-color: $ui-02 !default;
+$data-table-zebra-color: $layer-accent !default;
 
 /// @type Color
 /// @access public
 /// @group data-table
-$data-table-column-hover: $hover-selected-ui !default;
+$data-table-column-hover: $layer-selected-hover !default;
 
 // Date Picker
 
@@ -349,13 +349,13 @@ $date-picker-in-range-background-color: $ibm-color__blue-20 !default;
 /// @type Color
 /// @access public
 /// @group modal
-$modal-border-top: $brand-01 4px solid !default;
+$modal-border-top: 4px solid $border-interactive !default;
 
 /// @type Color
 /// @access public
 /// @group modal
 /// @deprecated
-$modal-footer-background-color: $ui-03 !default;
+$modal-footer-background-color: $layer-accent !default;
 
 // Notification
 
@@ -409,12 +409,12 @@ $progress-indicator-line-offset: 0.625rem !default;
 /// @type Color
 /// @access public
 /// @group copy-button
-$copy-active: $active-ui !default;
+$copy-active: $layer-active !default;
 
 /// @type Color
 /// @access public
 /// @group copy-button
-$copy-btn-feedback: $inverse-02 !default;
+$copy-btn-feedback: $background-inverse !default;
 
 // Radio Button
 
@@ -440,22 +440,22 @@ $structured-list-text-transform: none !default;
 /// @type Value
 /// @access public
 /// @group tabs
-$tab-underline-color: 2px solid $ui-03 !default;
+$tab-underline-color: 2px solid $border-subtle !default;
 
 /// @type Value
 /// @access public
 /// @group tabs
-$tab-underline-color-hover: 2px solid $ui-04 !default;
+$tab-underline-color-hover: 2px solid $border-strong !default;
 
 /// @type Color
 /// @access public
 /// @group tabs
-$tab-text-disabled: $disabled-02 !default;
+$tab-text-disabled: $text-disabled !default;
 
 /// @type Value
 /// @access public
 /// @group tabs
-$tab-underline-disabled: 2px solid $disabled-01 !default;
+$tab-underline-disabled: 2px solid $border-disabled !default;
 
 // Skeleton Loading
 
@@ -463,7 +463,7 @@ $tab-underline-disabled: 2px solid $disabled-01 !default;
 /// @access public
 /// @group skeleton
 /// TODO: Remove this in next major release
-$skeleton: $skeleton-01 !default;
+$skeleton: $skeleton-background !default;
 
 // Light UI
 
@@ -501,4 +501,5 @@ $skeleton: $skeleton-01 !default;
 /// @type Color
 /// @access public
 /// @group light-ui
+// V11: No longer needed
 $hover-ui-light: get-light-value('ui-01');
diff --git a/packages/components/src/globals/scss/_tooltip.scss b/packages/components/src/globals/scss/_tooltip.scss
index 873b4af2a077..bdc55fe08369 100644
--- a/packages/components/src/globals/scss/_tooltip.scss
+++ b/packages/components/src/globals/scss/_tooltip.scss
@@ -41,10 +41,10 @@
     rem(8px) rem(16px),
     rem(3px) rem(16px)
   );
-  color: $inverse-01;
+  color: $text-inverse;
   font-weight: 400;
   text-align: left;
-  background-color: $inverse-02;
+  background-color: $background-inverse;
   border-radius: rem(2px);
   transform: translateX(-50%);
   @include type-style('body-short-01');
@@ -284,25 +284,25 @@
   &::before {
     @if ($position == 'top') {
       top: -$caret-spacing;
-      border-color: $inverse-02 transparent transparent transparent;
+      border-color: $background-inverse transparent transparent transparent;
       border-width: rem(5px) rem(4px) 0 rem(4px);
       transform: translate(-50%, -100%);
     }
     @if ($position == 'right') {
       right: -$caret-spacing;
-      border-color: transparent $inverse-02 transparent transparent;
+      border-color: transparent $background-inverse transparent transparent;
       border-width: rem(4px) rem(5px) rem(4px) 0;
       transform: translate(100%, -50%);
     }
     @if ($position == 'bottom') {
       bottom: -$caret-spacing;
-      border-color: transparent transparent $inverse-02 transparent;
+      border-color: transparent transparent $background-inverse transparent;
       border-width: 0 rem(4px) rem(5px) rem(4px);
       transform: translate(-50%, 100%);
     }
     @if ($position == 'left') {
       left: -$caret-spacing;
-      border-color: transparent transparent transparent $inverse-02;
+      border-color: transparent transparent transparent $background-inverse;
       border-width: rem(4px) 0 rem(4px) rem(5px);
       transform: translate(-100%, -50%);
     }
diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js
index 74623c0c1814..84559ab92e1a 100644
--- a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js
+++ b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js
@@ -24,7 +24,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Components/Skeleton/SkeletonPlaceholder',
+  title: 'Components/Skeleton',
   decorators: [withKnobs],
 
   parameters: {
@@ -35,7 +35,7 @@ export default {
   },
 };
 
-export const Default = () => (
+export const _SkeletonPlaceholder = () => (
   <div style={{ height: '250px', width: '250px' }}>
     <style
       dangerouslySetInnerHTML={{
@@ -60,15 +60,3 @@ export const Default = () => (
     <SkeletonPlaceholder {...props()} />
   </div>
 );
-
-Default.parameters = {
-  info: {
-    text: `
-    Skeleton states are used as a progressive loading state while the user waits for content to load.
-
-    By taking a height and/or width property, this component can be used when you know the exact dimensions of the incoming content, such as an image.
-
-    However, for performance reasons, it's recommended to create a class in your stylesheet to set the dimensions.
-  `,
-  },
-};
diff --git a/packages/react/src/components/SkeletonText/SkeletonText-story.js b/packages/react/src/components/SkeletonText/SkeletonText-story.js
index b52854a4a13b..c7d592311a70 100644
--- a/packages/react/src/components/SkeletonText/SkeletonText-story.js
+++ b/packages/react/src/components/SkeletonText/SkeletonText-story.js
@@ -30,7 +30,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Components/Skeleton/SkeletonText',
+  title: 'Components/Skeleton',
   decorators: [withKnobs],
 
   parameters: {
@@ -41,16 +41,8 @@ export default {
   },
 };
 
-export const Default = () => (
+export const _SkeletonText = () => (
   <div style={{ width: '300px' }}>
     <SkeletonText {...props()} />
   </div>
 );
-
-Default.parameters = {
-  info: {
-    text: `
-        Skeleton states are used as a progressive loading state while the user waits for content to load.
-      `,
-  },
-};