diff --git a/packages/components/src/components/ui-shell/_content.scss b/packages/components/src/components/ui-shell/_content.scss
index cf642d51c2d3..ae5222268261 100644
--- a/packages/components/src/components/ui-shell/_content.scss
+++ b/packages/components/src/components/ui-shell/_content.scss
@@ -16,6 +16,7 @@
   .#{$prefix}--content {
     padding: 2rem;
     background: $layer;
+    color: $text-primary;
     will-change: margin-left;
   }
 
diff --git a/packages/components/src/components/ui-shell/_header-panel.scss b/packages/components/src/components/ui-shell/_header-panel.scss
index c81843d0e57e..7043a975260d 100644
--- a/packages/components/src/components/ui-shell/_header-panel.scss
+++ b/packages/components/src/components/ui-shell/_header-panel.scss
@@ -16,6 +16,7 @@
 /// UI shell side nav
 /// @access private
 /// @group ui-shell
+/// @deprecated currently not being used and will be removed in v11
 @mixin carbon-header-panel {
   //----------------------------------------------------------------------------
   // Header Panel
@@ -31,16 +32,16 @@
     overflow: hidden;
     width: 0;
     border: none;
-    background-color: $shell-panel-bg-01;
-    color: $shell-panel-text-01;
+    background-color: $layer;
+    color: $text-secondary;
     transition: width 0.11s;
     will-change: width;
   }
 
   .#{$prefix}--header-panel--expanded {
     width: carbon--mini-units(32);
-    border-right: 1px solid $shell-panel-border;
-    border-left: 1px solid $shell-panel-border;
+    border-right: 1px solid $border-subtle;
+    border-left: 1px solid $border-subtle;
   }
 }
 
diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
index 56e32f2bbd7e..1843604cfc46 100644
--- a/packages/components/src/components/ui-shell/_header.scss
+++ b/packages/components/src/components/ui-shell/_header.scss
@@ -27,8 +27,8 @@
     display: flex;
     height: mini-units(6);
     align-items: center;
-    border-bottom: 1px solid $shell-header-border-01;
-    background-color: $shell-header-bg-01;
+    border-bottom: 1px solid $border-subtle;
+    background-color: $background;
   }
 
   .#{$prefix}--header__action {
@@ -54,38 +54,54 @@
   }
 
   .#{$prefix}--header__action:hover {
-    background-color: $shell-header-bg-04;
+    background-color: $background-hover;
   }
 
   .#{$prefix}--header__action--active {
-    border-right: 1px solid $shell-header-border-01;
-    border-bottom: 1px solid $shell-header-bg-01;
-    border-left: 1px solid $shell-header-border-01;
+    border-right: 1px solid $border-subtle;
+    border-bottom: 1px solid transparent;
+    border-left: 1px solid $border-subtle;
+    background: $layer;
+  }
+
+  .#{$prefix}--header__action--active > svg {
+    fill: $icon-primary;
   }
 
   .#{$prefix}--header__action:focus {
-    border-color: $shell-header-focus;
+    border-color: $focus;
     outline: none;
   }
 
   .#{$prefix}--header__action:active {
-    background-color: $shell-header-bg-03;
+    background-color: $background-active;
   }
 
   .#{$prefix}--header__action.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
     justify-content: center;
   }
 
-  .#{$prefix}--header__action > svg {
-    fill: $shell-header-icon-02;
+  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action
+    svg {
+    fill: $icon-secondary;
+  }
+
+  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action:hover
+    svg,
+  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action:active
+    svg,
+  .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action--active
+    svg {
+    fill: $icon-primary;
   }
 
   .#{$prefix}--header__menu-trigger > svg {
-    fill: $shell-header-icon-01;
+    fill: $icon-primary;
   }
 
-  .#{$prefix}--header__menu-trigger:hover {
-    fill: $shell-header-bg-02;
+  .#{$prefix}--header__menu-trigger:hover > svg {
+    fill: $icon-primary;
+    //TO-DO: ask design if this color changes on hover, missing spec for it
   }
 
   .#{$prefix}--header__menu-toggle {
@@ -121,7 +137,8 @@
   }
 
   a.#{$prefix}--header__name:focus {
-    border-color: $shell-header-focus;
+    border-color: $focus;
+    //TO-DO: follow up with design to see if this is correct, missing focus spec for it
   }
 
   .#{$prefix}--header__name--prefix {
@@ -130,7 +147,7 @@
 
   a.#{$prefix}--header__name,
   a.#{$prefix}--header__name:hover {
-    color: $shell-header-text-01;
+    color: $text-primary;
   }
 
   .#{$prefix}--header__menu-toggle:not(.#{$prefix}--header__menu-toggle__hidden)
@@ -151,6 +168,7 @@
       display: block;
     }
 
+    // header nav divider
     &::before {
       position: absolute;
       top: 50%;
@@ -158,7 +176,7 @@
       display: block;
       width: rem(1px);
       height: rem(24px);
-      background-color: $shell-header-border-01;
+      background-color: $border-subtle;
       content: '';
       transform: translateY(-50%);
     }
@@ -181,7 +199,8 @@
     padding: 0 mini-units(2);
     // Used for focus styles
     border: 2px solid transparent;
-    color: $shell-header-text-02;
+    background-color: $background;
+    color: $text-secondary;
     // Text styles
     font-size: rem(14px);
     font-weight: 400;
@@ -195,30 +214,33 @@
   }
 
   a.#{$prefix}--header__menu-item:hover {
-    background-color: $shell-header-bg-02;
-    color: $shell-header-text-01;
+    background-color: $background-hover;
+    color: $text-primary;
   }
 
   .#{$prefix}--header__action:active,
   a.#{$prefix}--header__menu-item:active {
-    background-color: $shell-header-bg-03;
-    color: $shell-header-text-01;
+    background-color: $background-active;
+    color: $text-primary;
   }
 
   a.#{$prefix}--header__menu-item:focus {
-    border-color: $shell-header-focus;
-    color: $shell-header-text-01;
+    border-color: $focus;
     outline: none;
   }
 
   a.#{$prefix}--header__menu-item:hover > svg,
-  a.#{$prefix}--header__menu-item:active > svg,
-  a.#{$prefix}--header__menu-item:focus > svg {
-    fill: $shell-header-icon-01;
+  a.#{$prefix}--header__menu-item:active > svg {
+    fill: $icon-primary;
   }
 
   // Styles for selected state
 
+  a.#{$prefix}--header__menu-item[aria-current='page'],
+  .#{$prefix}--header__menu-item--current {
+    color: $text-primary;
+  }
+
   a.#{$prefix}--header__menu-item[aria-current='page']::after,
   .#{$prefix}--header__menu-item--current::after {
     position: absolute;
@@ -227,7 +249,7 @@
     bottom: -2px;
     left: 0;
     width: 100%;
-    border-bottom: 3px solid $support-info-inverse;
+    border-bottom: 3px solid $border-interactive;
     content: '';
   }
 
@@ -238,7 +260,7 @@
 
   a.#{$prefix}--header__menu-item[aria-current='page']:focus,
   a.#{$prefix}--header__menu-item.#{$prefix}--header__menu-item--current:focus {
-    border: 2px solid $shell-header-focus;
+    border: 2px solid $focus;
   }
 
   .#{$prefix}--header__submenu {
@@ -253,8 +275,8 @@
     // Note: needs to be higher than menu. Adding 1 here instead of moving to
     // the next level.
     z-index: #{z('header') + 1};
-    background-color: $shell-header-bg-06;
-    color: $shell-header-focus;
+    background-color: $layer;
+    color: $text-secondary;
   }
 
   .#{$prefix}--header__menu-title[aria-expanded='true']
@@ -278,35 +300,38 @@
     display: flex;
     width: mini-units(25);
     flex-direction: column;
-    background-color: $shell-header-bg-06;
+    background-color: $layer;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
     transform: translateY(100%);
   }
 
+  .#{$prefix}--header__menu-title[aria-expanded='true']
+    + .#{$prefix}--header__menu
+    .#{$prefix}--header__menu-item {
+    background-color: $layer;
+  }
+
   .#{$prefix}--header__menu-title[aria-expanded='true']
     + .#{$prefix}--header__menu
     .#{$prefix}--header__menu-item:hover {
-    background-color: $shell-header-bg-04;
+    background-color: $layer-hover;
+    color: $text-primary;
   }
 
   .#{$prefix}--header__menu-title[aria-expanded='true']
     + .#{$prefix}--header__menu
     .#{$prefix}--header__menu-item:active {
-    background-color: $shell-header-bg-03;
+    background-color: $layer-active;
+    color: $text-primary;
   }
 
   .#{$prefix}--header__menu .#{$prefix}--header__menu-item {
     height: mini-units(6);
   }
 
-  .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
-    background-color: $shell-header-bg-06;
-    color: $shell-header-text-01;
-  }
-
   .#{$prefix}--header__menu-arrow {
     margin-left: mini-units(1);
-    fill: $shell-header-icon-03;
+    fill: $icon-secondary;
     transition: transform $duration--fast-02, fill $duration--fast-02;
   }
 
@@ -345,10 +370,11 @@
     height: 3rem;
     align-items: center;
     padding: 0 1rem;
-    border: 4px solid $ibm-color__blue-60;
-    background-color: $shell-header-bg-01;
+    border: 4px solid $focus;
+    background-color: $background;
     clip: auto;
-    color: $shell-header-text-01;
+    color: $text-secondary;
+    //TO-DO: double check with design that these tokens are correct, missing spec for it
     outline: none;
   }
 }
diff --git a/packages/components/src/components/ui-shell/_navigation-menu.scss b/packages/components/src/components/ui-shell/_navigation-menu.scss
index 533b00c7d205..bdf05eeb823e 100644
--- a/packages/components/src/components/ui-shell/_navigation-menu.scss
+++ b/packages/components/src/components/ui-shell/_navigation-menu.scss
@@ -13,6 +13,7 @@
 /// UI shell navigation
 /// @access private
 /// @group ui-shell
+/// @deprecated currently not being used and will be removed in v11
 @mixin carbon-navigation {
   //----------------------------------------------------------------------------
   // Navigation
diff --git a/packages/components/src/components/ui-shell/_product-switcher.scss b/packages/components/src/components/ui-shell/_product-switcher.scss
index 44d7c52ae013..eaef66d09e48 100644
--- a/packages/components/src/components/ui-shell/_product-switcher.scss
+++ b/packages/components/src/components/ui-shell/_product-switcher.scss
@@ -14,6 +14,7 @@
 /// UI shell product switcher
 /// @access private
 /// @group ui-shell
+/// @deprecated currently not being used and will be removed in v11
 @mixin product-switcher {
   //--------------------------------------------------------------------------
   // Global Panel
diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
index ebec1888a69f..8a942514765e 100644
--- a/packages/components/src/components/ui-shell/_side-nav.scss
+++ b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -78,8 +78,8 @@
     overflow: hidden;
     width: mini-units(6);
     max-width: mini-units(32);
-    background-color: $shell-side-nav-bg-01;
-    color: $shell-side-nav-text-01;
+    background-color: $background;
+    color: $text-secondary;
     // TODO: sync with motion work
     transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9);
     will-change: width;
@@ -166,18 +166,20 @@
   //----------------------------------------------------------------------------
   // Side-nav > Navigation > Header
   //----------------------------------------------------------------------------
+  /// @deprecated currently not being used and will be removed in v11
   .#{$prefix}--side-nav__header {
     display: flex;
     width: 100%;
     max-width: 100%;
     height: mini-units(6);
-    border-bottom: 1px solid $shell-side-nav-bg-02;
+    border-bottom: 1px solid $border-subtle;
 
     @include expanded() {
       height: auto;
     }
   }
 
+  /// @deprecated currently not being used and will be removed in v11
   .#{$prefix}--side-nav--ux .#{$prefix}--side-nav__header {
     height: auto;
   }
@@ -185,6 +187,7 @@
   //----------------------------------------------------------------------------
   // Side-nav > Navigation > Header > Details
   //----------------------------------------------------------------------------
+  /// @deprecated currently not being used and will be removed in v11
   .#{$prefix}--side-nav__details {
     display: flex;
     min-width: 0;
@@ -197,11 +200,13 @@
     @include expanded($opacity: true, $visibility: true);
   }
 
+  /// @deprecated currently not being used and will be removed in v11
   .#{$prefix}--side-nav--ux .#{$prefix}--side-nav__details {
     opacity: 1;
     visibility: inherit;
   }
 
+  /// @deprecated currently not being used and will be removed in v11
   .#{$prefix}--side-nav__title {
     @include text-overflow();
 
@@ -213,6 +218,7 @@
     user-select: none;
   }
 
+  /// @deprecated currently not being used and will be removed in v11
   // Sync up between our title and select field to get position logic for
   // text
   .#{$prefix}--side-nav__title,
@@ -223,6 +229,7 @@
   //----------------------------------------------------------------------------
   // Side-nav > Navigation > Header > Switcher
   //----------------------------------------------------------------------------
+  /// @deprecated currently not being used and will be removed in v11
   .#{$prefix}--side-nav__switcher {
     position: relative;
     display: flex;
@@ -230,6 +237,7 @@
     justify-content: space-between;
   }
 
+  /// @deprecated currently not being used and will be removed in v11
   .#{$prefix}--side-nav__switcher-chevron {
     position: absolute;
     top: 0;
@@ -237,9 +245,10 @@
     bottom: 0;
     display: flex;
     align-items: center;
-    fill: $shell-side-nav-icon-01;
+    fill: $icon-secondary;
   }
 
+  /// @deprecated currently not being used and will be removed in v11
   .#{$prefix}--side-nav__select {
     @include focus-outline('reset');
 
@@ -252,14 +261,15 @@
     padding-right: mini-units(4);
     border: none;
     appearance: none;
-    background-color: $shell-header-bg-01;
+    background-color: $background;
     border-radius: 0;
-    color: $shell-header-text-01;
+    color: $text-secondary;
     cursor: pointer;
     font-size: rem(12px);
     transition: outline $duration--fast-02;
   }
 
+  /// @deprecated currently not being used and will be removed in v11
   .#{$prefix}--side-nav__select:focus {
     @include focus-outline('outline');
   }
@@ -267,12 +277,14 @@
   //----------------------------------------------------------------------------
   // Side-nav > Navigation > Footer
   //----------------------------------------------------------------------------
+  /// @deprecated currently not being used and will be removed in v11
   .#{$prefix}--side-nav__footer {
     width: 100%;
     flex: 0 0 rem(48px);
-    background-color: $shell-side-nav-bg-01;
+    background-color: $background;
   }
 
+  /// @deprecated currently not being used and will be removed in v11
   .#{$prefix}--side-nav__toggle {
     @include focus-outline('reset');
     @include button-reset($width: true);
@@ -283,6 +295,7 @@
     transition: outline $duration--fast-02;
   }
 
+  /// @deprecated currently not being used and will be removed in v11
   .#{$prefix}--side-nav__toggle:focus {
     @include focus-outline('outline');
   }
@@ -326,8 +339,8 @@
   .#{$prefix}--side-nav
     .#{$prefix}--header__menu-title[aria-expanded='true']:hover {
     // TODO: sync color
-    background-color: $shell-side-nav-bg-04;
-    color: $ibm-color__gray-100;
+    background-color: $background-hover;
+    color: $text-primary;
   }
 
   .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
@@ -337,7 +350,7 @@
     .#{$prefix}--side-nav__menu-item
     > .#{$prefix}--side-nav__link:hover
     > span {
-    color: $ibm-color__gray-100;
+    color: $text-primary;
   }
 
   .#{$prefix}--side-nav__item--large {
@@ -350,7 +363,7 @@
   .#{$prefix}--side-nav__divider {
     height: 1px;
     margin: $spacing-03 $spacing-05;
-    background-color: $ibm-color__gray-20;
+    background-color: $border-subtle;
   }
 
   //----------------------------------------------------------------------------
@@ -366,15 +379,15 @@
     align-items: center;
 
     padding: 0 mini-units(2);
-    color: $shell-side-nav-text-01;
+    color: $text-secondary;
     transition: color $duration--fast-02, background-color $duration--fast-02,
       outline $duration--fast-02;
     user-select: none;
   }
 
   .#{$prefix}--side-nav__submenu:hover {
-    background-color: $shell-side-nav-bg-04;
-    color: $ibm-color__gray-100;
+    background-color: $background-hover;
+    color: $text-primary;
   }
 
   .#{$prefix}--side-nav__submenu:focus {
@@ -410,31 +423,36 @@
   }
 
   .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu:hover {
-    background-color: $shell-side-nav-bg-04;
-    color: $ibm-color__gray-100;
+    //the active className is used for selected styles, hence using the selected tokens
+    background-color: $background-selected;
+    color: $text-primary;
   }
 
   .#{$prefix}--side-nav__item--active
     .#{$prefix}--side-nav__submenu[aria-expanded='false'] {
     position: relative;
-    background-color: $shell-side-nav-bg-04;
-    color: $ibm-color__gray-100;
+    background-color: $background-selected;
+    color: $text-primary;
     &::before {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
-      width: 4px;
-      background-color: $shell-side-nav-accent-01;
+      width: 3px;
+      background-color: $border-interactive;
       content: '';
     }
   }
 
   .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu-title {
-    color: $ibm-color__gray-100;
+    color: $text-primary;
     font-weight: 600;
   }
 
+  .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__icon > svg {
+    fill: $icon-primary;
+  }
+
   .#{$prefix}--side-nav__menu {
     display: block;
     max-height: 0;
@@ -461,10 +479,10 @@
   .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link--current,
   .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link[aria-current='page'],
   a.#{$prefix}--side-nav__link--current {
-    background-color: $ibm-color__gray-20;
+    background-color: $background-selected;
 
     > span {
-      color: $ibm-color__gray-100;
+      color: $text-primary;
       font-weight: 600;
     }
   }
@@ -500,7 +518,7 @@
     .#{$prefix}--text-truncate-end {
     @include text-overflow();
 
-    color: $shell-side-nav-text-01;
+    color: $text-secondary;
     font-size: rem(14px);
     letter-spacing: 0.1px;
     line-height: 1.25rem;
@@ -514,14 +532,14 @@
 
   a.#{$prefix}--side-nav__link[aria-current='page'],
   a.#{$prefix}--side-nav__link--current {
-    background-color: $shell-side-nav-bg-04;
+    background-color: $background-selected;
     font-weight: 600;
   }
 
   a.#{$prefix}--side-nav__link[aria-current='page']
     .#{$prefix}--side-nav__link-text,
   a.#{$prefix}--side-nav__link--current .#{$prefix}--side-nav__link-text {
-    color: $ibm-color__gray-100;
+    color: $text-primary;
   }
 
   a.#{$prefix}--side-nav__link[aria-current='page']::before,
@@ -530,8 +548,8 @@
     top: 0;
     bottom: 0;
     left: 0;
-    width: 4px;
-    background-color: $shell-side-nav-accent-01;
+    width: 3px;
+    background-color: $border-interactive;
     content: '';
   }
 
@@ -554,7 +572,7 @@
   .#{$prefix}--side-nav__icon > svg {
     width: mini-units(2);
     height: mini-units(2);
-    fill: $shell-side-nav-icon-01;
+    fill: $icon-secondary;
   }
 
   .#{$prefix}--side-nav__icon > svg.#{$prefix}--side-nav-collapse-icon {
@@ -613,14 +631,14 @@
     left: rem(16px);
     width: calc(100% - 32px);
     height: rem(1px);
-    background: $ibm-color__gray-20;
+    background: $border-subtle;
     content: '';
   }
 
   //header menu items overrides
   .#{$prefix}--side-nav a.#{$prefix}--header__menu-item {
     justify-content: space-between;
-    color: $shell-side-nav-text-01;
+    color: $text-secondary;
     white-space: nowrap;
 
     &[aria-expanded='true'] {
@@ -648,8 +666,8 @@
     }
 
     a.#{$prefix}--header__menu-item:hover {
-      background-color: $shell-side-nav-bg-04;
-      color: $ibm-color__gray-100;
+      background-color: $background-hover;
+      color: $text-primary;
     }
   }
 
@@ -666,7 +684,7 @@
     a.#{$prefix}--header__menu-item:focus
     .#{$prefix}--header__menu-arrow,
   .#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
-    fill: $shell-side-nav-text-01;
+    fill: $icon-secondary;
   }
 
   // Windows HCM fix
diff --git a/packages/components/src/components/ui-shell/_switcher.scss b/packages/components/src/components/ui-shell/_switcher.scss
index b2ae7bd7d57b..05c5252941f3 100644
--- a/packages/components/src/components/ui-shell/_switcher.scss
+++ b/packages/components/src/components/ui-shell/_switcher.scss
@@ -25,7 +25,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    color: $shell-panel-text-01;
+    color: $text-secondary;
   }
 
   .#{$prefix}--switcher__item {
@@ -43,7 +43,7 @@
     height: 1px;
     border: none;
     margin: $spacing-03 $spacing-05;
-    background: $shell-panel-border;
+    background: $border-subtle;
   }
 
   .#{$prefix}--switcher__item-link {
@@ -52,29 +52,30 @@
     display: block;
     height: $spacing-07;
     padding: rem(6px) $spacing-05;
-    color: $shell-panel-text-01;
+    color: $text-secondary;
     text-decoration: none;
 
     &:hover:not(.#{$prefix}--switcher__item-link--selected) {
-      background: $shell-panel-bg-02;
-      color: $shell-panel-text-02;
+      background: $layer-hover;
+      color: $text-primary;
       cursor: pointer;
     }
 
     &:focus {
-      outline: 2px solid $shell-panel-focus;
+      outline: 2px solid $focus;
       outline-offset: -2px;
     }
 
     &:active {
-      background: $shell-panel-bg-03;
-      color: $shell-panel-text-02;
+      background: $layer-active;
+      color: $text-primary;
     }
   }
 
   .#{$prefix}--switcher__item-link--selected {
-    background: $shell-panel-bg-04;
-    color: $shell-panel-text-02;
+    //TO-DO: should we add a 3px left border-interactive here too? Doesn't currently have it, but specs have it
+    background: $layer-selected;
+    color: $text-primary;
   }
 }
 
diff --git a/packages/components/src/components/ui-shell/_theme.scss b/packages/components/src/components/ui-shell/_theme.scss
index 86830f17e062..95cb65e77afc 100644
--- a/packages/components/src/components/ui-shell/_theme.scss
+++ b/packages/components/src/components/ui-shell/_theme.scss
@@ -14,12 +14,14 @@
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-header-bg-01: $carbon--gray-100;
 
 /// Header menu trigger hover, Header nav link hover
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 /// TODO needs color var gray-100-hover
 $shell-header-bg-02: #2c2c2c;
 
@@ -27,12 +29,14 @@ $shell-header-bg-02: #2c2c2c;
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-header-bg-03: $carbon--gray-80;
 
 /// Header submenu link hover
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 /// TODO needs color var gray-90-hover
 $shell-header-bg-04: #353535;
 
@@ -40,60 +44,70 @@ $shell-header-bg-04: #353535;
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-header-bg-05: $carbon--gray-70;
 
 /// Header nav link submenu
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-header-bg-06: $carbon--gray-90;
 
 /// Header border bottom
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-header-border-01: $carbon--gray-80;
 
 /// Header focus
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-header-focus: $carbon--white-0;
 
 /// Primary text in header, Title text
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-header-text-01: $carbon--gray-10;
 
 /// Secondary text in header, Menu item nav text
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-header-text-02: $carbon--gray-30;
 
 /// Header menu trigger
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-header-icon-01: $carbon--gray-10;
 
 /// Header bar icons
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-header-icon-02: $carbon--white-0;
 
 /// Header bar icons
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-header-icon-03: $carbon--gray-30;
 
 /// Item link
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-header-link: $carbon--blue-60;
 
 //----------------------------------------------------------------------------
@@ -104,12 +118,14 @@ $shell-header-link: $carbon--blue-60;
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-panel-bg-01: $carbon--gray-100;
 
 /// Panel item hover background
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 /// TODO needs color var gray-100-hover
 $shell-panel-bg-02: #2c2c2c;
 
@@ -117,36 +133,42 @@ $shell-panel-bg-02: #2c2c2c;
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-panel-bg-03: $carbon--gray-80;
 
 /// Panel item link selected background
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-panel-bg-04: $carbon--gray-90;
 
 /// Panel border
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-panel-border: $carbon--gray-80;
 
 /// Header panel text
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-panel-text-01: $carbon--gray-30;
 
 /// Header panel secondary text
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-panel-text-02: $carbon--gray-10;
 
 /// Header panel focus border
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-panel-focus: $carbon--white-0;
 
 //----------------------------------------------------------------------------
@@ -156,6 +178,7 @@ $shell-panel-focus: $carbon--white-0;
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-side-nav-bg-01: $carbon--white-0;
 
 /// Selected category background
@@ -165,6 +188,7 @@ $shell-side-nav-bg-01: $carbon--white-0;
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 /// TODO waiting for updated color
 $shell-side-nav-bg-02: $carbon--gray-80;
 
@@ -172,6 +196,7 @@ $shell-side-nav-bg-02: $carbon--gray-80;
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 /// TODO waiting for updated color
 $shell-side-nav-bg-03: $ibm-color__gray-70;
 
@@ -179,6 +204,7 @@ $shell-side-nav-bg-03: $ibm-color__gray-70;
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 /// TODO needs color var gray-90-hover
 $shell-side-nav-bg-04: #e5e5e5;
 
@@ -186,6 +212,7 @@ $shell-side-nav-bg-04: #e5e5e5;
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 /// TODO needs color var gray-80-hover
 $shell-side-nav-bg-05: #dcdcdc;
 
@@ -196,6 +223,7 @@ $shell-side-nav-bg-05: #dcdcdc;
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 /// TODO waiting for updated color
 $shell-side-nav-text-01: $ibm-color__gray-70;
 
@@ -204,16 +232,19 @@ $shell-side-nav-text-01: $ibm-color__gray-70;
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-side-nav-text-02: $ibm-color__gray-30;
 
 /// Side-nav icon color
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated not longer being used and will be removed in v11
 $shell-side-nav-icon-01: $ibm-color__gray-70;
 
 /// Item highlight bar
 /// @type Color
 /// @access private
 /// @group ui-shell
+/// @deprecated currently not being used and will be removed in v11
 $shell-side-nav-accent-01: $ibm-color__blue-60;
diff --git a/packages/react/src/components/UIShell/HeaderPanel.js b/packages/react/src/components/UIShell/HeaderPanel.js
index 35108f80ea4e..e97f1d3de312 100644
--- a/packages/react/src/components/UIShell/HeaderPanel.js
+++ b/packages/react/src/components/UIShell/HeaderPanel.js
@@ -10,6 +10,7 @@ import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
+import { warning } from '../../internal/warning';
 
 const { prefix } = settings;
 
@@ -34,6 +35,12 @@ const HeaderPanel = React.forwardRef(function HeaderPanel(
     [customClassName]: !!customClassName,
   });
 
+  warning(
+    true,
+    'The `HeaderPanel` component has been deprecated and will be removed ' +
+      'in the next major release of `carbon-components-react`'
+  );
+
   return (
     <div {...other} className={className} {...accessibilityLabel} ref={ref}>
       {children}
diff --git a/packages/react/src/components/UIShell/SideNavDetails.js b/packages/react/src/components/UIShell/SideNavDetails.js
index eef07907919c..b300f82cbed1 100644
--- a/packages/react/src/components/UIShell/SideNavDetails.js
+++ b/packages/react/src/components/UIShell/SideNavDetails.js
@@ -9,10 +9,17 @@ import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { warning } from '../../internal/warning';
 
 const { prefix } = settings;
 
 const SideNavDetails = ({ children, className: customClassName, title }) => {
+  warning(
+    true,
+    'The `SideNavDetails` component has been deprecated and will be removed ' +
+      'in the next major release of `carbon-components-react`'
+  );
+
   const className = cx(`${prefix}--side-nav__details`, customClassName);
   return (
     <div className={className}>
diff --git a/packages/react/src/components/UIShell/SideNavFooter.js b/packages/react/src/components/UIShell/SideNavFooter.js
index 490cc9bae51f..9aba48760c05 100644
--- a/packages/react/src/components/UIShell/SideNavFooter.js
+++ b/packages/react/src/components/UIShell/SideNavFooter.js
@@ -11,6 +11,7 @@ import { settings } from 'carbon-components';
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { warning } from '../../internal/warning';
 
 const { prefix } = settings;
 
@@ -25,6 +26,12 @@ const SideNavFooter = ({
   expanded,
   onToggle,
 }) => {
+  warning(
+    true,
+    'The `SideNavFooter` component has been deprecated and will be removed ' +
+      'in the next major release of `carbon-components-react`'
+  );
+
   const className = cx(`${prefix}--side-nav__footer`, customClassName);
   return (
     <footer className={className}>
diff --git a/packages/react/src/components/UIShell/SideNavHeader.js b/packages/react/src/components/UIShell/SideNavHeader.js
index 63c1c8b42776..ed8ef10901d0 100644
--- a/packages/react/src/components/UIShell/SideNavHeader.js
+++ b/packages/react/src/components/UIShell/SideNavHeader.js
@@ -10,6 +10,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import SideNavIcon from './SideNavIcon';
+import { warning } from '../../internal/warning';
 
 const { prefix } = settings;
 
@@ -18,6 +19,12 @@ const SideNavHeader = ({
   children,
   renderIcon: IconElement,
 }) => {
+  warning(
+    true,
+    'The `SideNavHeader` component has been deprecated and will be removed ' +
+      'in the next major release of `carbon-components-react`'
+  );
+
   const className = cx(`${prefix}--side-nav__header`, customClassName);
   return (
     <header className={className}>
diff --git a/packages/react/src/components/UIShell/SideNavSwitcher.js b/packages/react/src/components/UIShell/SideNavSwitcher.js
index 5ce50b49e883..174b534d3176 100644
--- a/packages/react/src/components/UIShell/SideNavSwitcher.js
+++ b/packages/react/src/components/UIShell/SideNavSwitcher.js
@@ -11,9 +11,17 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { warning } from '../../internal/warning';
+
 const { prefix } = settings;
 
 const SideNavSwitcher = React.forwardRef(function SideNavSwitcher(props, ref) {
+  warning(
+    true,
+    'The `SideNavSwitcher` component has been deprecated and will be removed ' +
+      'in the next major release of `carbon-components-react`'
+  );
+
   const { className: customClassName, labelText, onChange, options } = props;
   const className = cx(`${prefix}--side-nav__switcher`, customClassName);
   // Note for usage around `onBlur`: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavDetails-test.js b/packages/react/src/components/UIShell/__tests__/SideNavDetails-test.js
index 32502c17de01..7c666a78825d 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavDetails-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavDetails-test.js
@@ -13,6 +13,8 @@ describe('SideNavDetails', () => {
   let mockProps;
 
   beforeEach(() => {
+    jest.mock('../../../internal/warning');
+
     mockProps = {
       title: 'foo',
     };
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavFooter-test.js b/packages/react/src/components/UIShell/__tests__/SideNavFooter-test.js
index 5047a4241e42..b3b81331ea74 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavFooter-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavFooter-test.js
@@ -13,6 +13,8 @@ describe('SideNavFooter', () => {
   let mockProps;
 
   beforeEach(() => {
+    jest.mock('../../../internal/warning');
+
     mockProps = {
       assistiveText: 'open',
       expanded: false,
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavHeader-test.js b/packages/react/src/components/UIShell/__tests__/SideNavHeader-test.js
index 31235580b74f..eeb5a7f5e7c0 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavHeader-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavHeader-test.js
@@ -13,6 +13,8 @@ describe('SideNavHeader', () => {
   let mockProps;
 
   beforeEach(() => {
+    jest.mock('../../../internal/warning');
+
     mockProps = {
       renderIcon: () => <div>mock icon</div>,
       children: <span>foo</span>,
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavSwitcher-test.js b/packages/react/src/components/UIShell/__tests__/SideNavSwitcher-test.js
index a351e055c951..1540537dc782 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavSwitcher-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavSwitcher-test.js
@@ -13,6 +13,8 @@ describe('SideNavSwitcher', () => {
   let mockProps;
 
   beforeEach(() => {
+    jest.mock('../../../internal/warning');
+
     mockProps = {
       className: 'custom-classname',
       labelText: 'label',