diff --git a/src/Bootstrap/dist/css/bootstrap-theme.css b/src/Bootstrap/dist/css/bootstrap-theme.css
index 59fa68a781..d46ee9b7f1 100644
--- a/src/Bootstrap/dist/css/bootstrap-theme.css
+++ b/src/Bootstrap/dist/css/bootstrap-theme.css
@@ -272,11 +272,11 @@ body h3 {
   background: #fff4ce;
 }
 .alert a {
-  color: #2e6da4;
+  color: var(--brandForegroundLinkRest);
 }
 .alert a:hover,
 .alert a:focus {
-  color: #23527c;
+  color: var(--brandForegroundLinkHover);
 }
 .alert-transient .alert {
   margin: 0;
@@ -1500,7 +1500,7 @@ p.frameworktableinfo-text {
 .page-package-details .package-title h1 .version-title {
   font-size: 16px;
   font-weight: 400;
-  color: #666666;
+  color: var(--neutralForeground3Rest);
   margin-right: 14px;
   vertical-align: middle;
 }
@@ -1511,7 +1511,7 @@ p.frameworktableinfo-text {
   margin-right: 12px;
 }
 .page-package-details .package-title .prefix-reserve-title {
-  background-color: #F3F2F1;
+  background-color: var(--neutralBackground3Rest);
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1531,7 +1531,7 @@ p.frameworktableinfo-text {
 .page-package-details .package-title .prefix-reserve-title .prefix-reserve-label {
   font-size: 14px;
   font-weight: 400;
-  color: #2F6FA7;
+  color: var(--neutralForeground2Rest);
   margin-top: 2px;
   margin-bottom: 2px;
   margin-right: 10px;
@@ -1570,7 +1570,7 @@ p.frameworktableinfo-text {
 .page-package-details .deprecation-container .deprecation-content-container {
   margin-top: 15px;
   padding-top: 15px;
-  border-top: 1px solid lightgray;
+  border-top: 1px solid var(--neutralForeground1Rest);
 }
 .page-package-details .deprecation-container .deprecation-content-container p {
   margin-top: 5px;
@@ -1606,7 +1606,7 @@ p.frameworktableinfo-text {
 .page-package-details .vulnerabilities-container .vulnerabilities-content-container {
   margin-top: 15px;
   padding-top: 15px;
-  border-top: 1px solid lightgray;
+  border-top: 1px solid var(--neutralForeground1Rest);
 }
 .page-package-details .vulnerabilities-container .vulnerabilities-content-container .vulnerabilities-list {
   border-collapse: unset;
@@ -1625,6 +1625,7 @@ p.frameworktableinfo-text {
   margin-bottom: 15px;
 }
 .page-package-details .package-details-main {
+  color: var(--neutralForeground1Rest);
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: normal;
@@ -1651,9 +1652,9 @@ p.frameworktableinfo-text {
   margin-top: 3px;
 }
 .page-package-details .package-details-info .sidebar-headers {
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 600;
-  color: #666666;
+  color: var(--neutralForeground1Rest);
   margin-bottom: 14px;
 }
 .page-package-details .package-details-info .sidebar-links {
@@ -1672,13 +1673,15 @@ p.frameworktableinfo-text {
 .page-package-details .package-details-info .sidebar-section {
   margin-top: 32px;
 }
+.page-package-details .package-details-info .download-info {
+  color: var(--neutralForeground1Rest);
+}
 .page-package-details .package-details-info .download-info .download-info-row {
   margin-bottom: 15px;
 }
 .page-package-details .package-details-info .download-info .download-info-header {
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 400;
-  color: #666666;
   margin-right: 12px;
 }
 .page-package-details .package-details-info .download-info .download-info-content {
@@ -1706,7 +1709,7 @@ p.frameworktableinfo-text {
   margin: 2px;
 }
 .page-package-details .report-link i {
-  color: #BE0151;
+  color: var(--statusDangerForeground3Rest);
   font-weight: bold;
 }
 .page-package-details .share-buttons img {
@@ -1716,7 +1719,7 @@ p.frameworktableinfo-text {
 .page-package-details .used-by-desc {
   font-family: 'Segoe UI', "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
-  color: #333333;
+  color: var(--neutralForeground3Rest);
   margin: 4px 0 0 0;
   line-height: 16px;
 }
@@ -1724,14 +1727,12 @@ p.frameworktableinfo-text {
   font-family: 'Segoe UI', "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 19px;
-  color: #337ab7;
 }
 .page-package-details .gh-link,
 .page-package-details .ngp-link {
   font-family: 'Segoe UI', "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 19px;
-  color: #337ab7;
   width: auto;
 }
 .page-package-details .used-by-download-icon {
@@ -1743,7 +1744,7 @@ p.frameworktableinfo-text {
   font-size: 14px;
   line-height: 16px;
   font-weight: 400;
-  color: #586069;
+  color: var(--neutralForeground3Rest);
 }
 .page-package-details .gh-star {
   font-size: 14px;
@@ -1776,81 +1777,191 @@ p.frameworktableinfo-text {
   border: 0;
 }
 .page-package-details .install-tabs .nav-tabs > li {
-  margin-right: 5px;
+  margin-right: 4px;
   padding: 0;
   margin-bottom: 0;
 }
 .page-package-details .install-tabs .nav-tabs > li > a {
-  color: #000;
-  background-color: #eaeaea;
-  border: 0;
+  color: var(--neutralForeground1Rest);
+  background-color: var(--neutralBackgroundSubtleRest);
   padding: 5px 10px;
-  margin: 0;
+  top: 2px;
+  border-radius: 6px 6px 0px 0px;
+  border-bottom: 0;
+  border-top: 2px solid transparent;
+  border-right: 2px solid transparent;
+  border-left: 2px solid transparent;
+  outline: none;
+}
+.page-package-details .install-tabs .nav-tabs > li > a:hover {
+  background-color: var(--neutralBackgroundSubtleHover);
+  color: var(--neutralForeground1Hover);
+}
+.page-package-details .install-tabs .nav-tabs > li > a:active:focus {
+  background-color: var(--neutralBackgroundSubtlePressed);
+  color: var(--neutralForeground1Pressed);
 }
 .page-package-details .install-tabs .nav-tabs > li > a:focus {
-  outline: 3px solid #0078D4;
-  outline-offset: 0;
+  background-color: var(--neutralBackground1Rest);
+  border-top: 2px solid var(--neutralStrokeFocus2Rest);
+  border-right: 2px solid var(--neutralStrokeFocus2Rest);
+  border-left: 2px solid var(--neutralStrokeFocus2Rest);
 }
 .page-package-details .install-tabs .nav-tabs > li.active > a {
-  background-color: #002440;
-  border: 0;
-  color: #fff;
-  font-weight: 600;
-  text-decoration: underline;
+  background-color: var(--neutralBackground1Rest);
+  border-radius: 6px 6px 0px 0px;
+  border-top: 2px solid var(--neutralStroke1Rest);
+  border-right: 2px solid var(--neutralStroke1Rest);
+  border-left: 2px solid var(--neutralStroke1Rest);
+  color: var(--neutralForeground1Rest);
+  top: 2px;
+}
+.page-package-details .install-tabs .nav-tabs > li.active > a:hover {
+  background-color: var(--neutralBackgroundSubtleHover);
+  color: var(--neutralForeground1Hover);
+}
+.page-package-details .install-tabs .nav-tabs > li.active > a:active:focus {
+  background-color: var(--neutralBackgroundSubtlePressed);
+  color: var(--neutralForeground1Pressed);
+}
+.page-package-details .install-tabs .nav-tabs > li.active > a:focus {
+  background-color: var(--neutralBackground1Rest);
+  border-top: 2px solid var(--neutralStrokeFocus2Rest);
+  border-right: 2px solid var(--neutralStrokeFocus2Rest);
+  border-left: 2px solid var(--neutralStrokeFocus2Rest);
+}
+.page-package-details .install-tabs .tab-content {
+  background-color: var(--neutralBackground1Rest);
+}
+.page-package-details .install-tabs .tab-content .tab-pane.active {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 4px;
+}
+.page-package-details .install-tabs .tab-content .tab-pane {
+  background-color: var(--neutralBackground2Rest);
 }
 .page-package-details .install-tabs .tab-content .tab-pane .install-script-row {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  height: 100%;
-  width: 100%;
 }
 .page-package-details .install-tabs .tab-content .tab-pane .install-script-row .install-script {
-  background-color: #002440;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 6px 8px;
+  background-color: var(--neutralBackground1Rest);
   font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
   font-size: 1em;
-  color: #fff;
-  width: -webkit-calc(100% - 40px);
-  width: calc(100% - 40px);
+  color: var(--neutralForeground1Rest);
+  width: 100%;
   line-height: 1.5;
   white-space: pre-wrap;
-  border-color: #002440;
-  border-style: solid;
-  border-width: 1px 0 1px 1px;
+  border: 2px solid var(--neutralStroke1Rest);
+  border-radius: 0px 6px 6px 6px;
   vertical-align: middle;
   word-break: break-word;
   margin: 0px;
 }
+.page-package-details .install-tabs .tab-content .tab-pane .install-script-row .copy-button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
 .page-package-details .install-tabs .tab-content .tab-pane .install-script-row .copy-button button {
-  height: 100%;
-  min-height: 42px;
-  line-height: 1.5;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 4px;
+  padding: 2px 8px;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 .page-package-details .install-tabs .tab-content .tab-pane .alert {
   margin: 0;
   width: 100%;
 }
+.page-package-details .body-tabs .nav-tabs > li {
+  padding-right: 2px;
+}
 .page-package-details .body-tabs .nav-tabs > li.active > a {
-  border-bottom-color: #0078D4;
+  border-bottom-color: var(--brandStrokeCompoundRest);
   border-bottom-width: 2px;
-  font-weight: bold;
+  -webkit-text-stroke-width: -webkit-calc(0.5 * 0.04ex);
+  text-shadow: -webkit-calc(0.5 * -0.03ex) 0 0 currentColor, -webkit-calc(0.5 * 0.03ex) 0 0 currentColor;
+  text-shadow: calc(0.5 * -0.03ex) 0 0 currentColor, calc(0.5 * 0.03ex) 0 0 currentColor;
   margin-bottom: -1px;
+  background-color: transparent;
+}
+.page-package-details .body-tabs .nav-tabs > li.active > a:hover {
+  border-bottom-color: var(--brandStrokeCompoundHover);
+  border-bottom-width: 2px;
+}
+.page-package-details .body-tabs .nav-tabs > li.active > a:active {
+  border-bottom-color: var(--brandStrokeCompoundPressed);
+  border-bottom-width: 2px;
+}
+.page-package-details .body-tabs .nav-tabs > li.active > a:focus {
+  border-radius: 2px;
+  outline: 3px solid var(--neutralStrokeFocus2Rest);
+  outline-offset: 1px;
 }
 .page-package-details .body-tabs .nav-tabs > li.active > a.body-warning-tab {
-  background-color: #fff4ce;
+  background-color: var(--statusWarningBackground1Rest);
+  border-bottom-color: var(--statusWarningStroke1Rest);
+  border-bottom-width: 2px;
 }
 .page-package-details .body-tabs .nav-tabs > li > a {
   border-left: 0px;
   border-right: 0px;
   border-top: 0px;
+  border-bottom-width: 2px;
   font-size: 14px;
   font-family: 'Segoe UI', "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #323130;
+  color: var(--neutralForeground1Rest);
+  background-color: transparent;
+}
+.page-package-details .body-tabs .nav-tabs > li > a:hover {
+  border-bottom-color: var(--neutralStroke1Hover);
+  border-bottom-width: 2px;
+  background-color: var(--neutralBackgroundSubtleHover);
+  border-radius: 2px 2px 0px 0px;
+}
+.page-package-details .body-tabs .nav-tabs > li > a:active {
+  border-bottom-color: var(--neutralStroke1Pressed);
+  border-bottom-width: 2px;
+  background-color: var(--neutralBackgroundSubtlePressed);
 }
 .page-package-details .body-tabs .nav-tabs > li > a:focus {
-  outline: 3px solid #0078D4;
-  outline-offset: 0;
+  border-radius: 2px;
+  outline: 3px solid var(--neutralStrokeFocus2Rest);
+  outline-offset: 1px;
 }
 .page-package-details .body-tabs .nav-tabs > li > a .ms-Icon {
   position: relative;
diff --git a/src/Bootstrap/dist/css/bootstrap.css b/src/Bootstrap/dist/css/bootstrap.css
index 887c2c4da7..47c27c53d3 100644
--- a/src/Bootstrap/dist/css/bootstrap.css
+++ b/src/Bootstrap/dist/css/bootstrap.css
@@ -616,6 +616,9 @@ a.bg-danger:hover,
 a.bg-danger:focus {
   background-color: #e4b9b9;
 }
+.bg-brand-info {
+  background-color: var(--neutralBackground5Rest);
+}
 .page-header {
   padding-bottom: 10px;
   margin: 44px 0 22px;
@@ -2995,6 +2998,42 @@ fieldset[disabled] .btn-danger.focus {
   box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest);
   outline: none !important;
 }
+.btn-brand-icon {
+  color: var(--neutralForegroundOnBrandRest);
+  background-color: var(--brandBackground1Rest);
+  border-color: var(--brandBackground1Rest);
+  border-radius: var(--Medium, 4px);
+  padding: 2px 8px;
+  border: 2px solid transparent;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  outline: none;
+}
+.btn-brand-icon:hover {
+  border: 2px solid var(--brandBackground1Hover);
+  color: var(--neutralForegroundOnBrandRest);
+  background-color: var(--brandBackground1Hover);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  outline: none;
+}
+.btn-brand-icon:active {
+  border: 2px solid var(--brandBackground1Pressed);
+  color: var(--neutralForegroundOnBrandRest);
+  background-color: var(--brandBackground1Pressed);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  outline: none;
+}
+.btn-brand-icon:focus-within,
+.btn-brand-icon:focus-visible,
+.btn-brand-icon:focus {
+  border: 2px solid var(--neutralStrokeFocus2Rest);
+  color: var(--neutralForegroundOnBrandRest);
+  -webkit-box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest);
+  box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest);
+  outline: none !important;
+}
 .brand-button-transparent {
   color: var(--neutralForeground2Rest);
   background-color: var(--transparentBackgroundRest);
@@ -5804,7 +5843,7 @@ button.close {
   word-wrap: normal;
   white-space: normal;
   font-size: 12.8px;
-  background-color: #fff;
+  background-color: var(--neutralBackground1Rest);
   background-clip: padding-box;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
@@ -5824,6 +5863,7 @@ button.close {
 }
 .popover > .arrow {
   border-width: 11px;
+  background-color: var(--neutralBackground1Rest);
 }
 .popover > .arrow,
 .popover > .arrow:after {
@@ -5850,7 +5890,7 @@ button.close {
   bottom: 1px;
   margin-left: -10px;
   content: " ";
-  border-top-color: #fff;
+  border-top-color: var(--neutralBackground1Rest);
   border-bottom-width: 0;
 }
 .popover.right > .arrow {
@@ -5865,7 +5905,7 @@ button.close {
   bottom: -10px;
   left: 1px;
   content: " ";
-  border-right-color: #fff;
+  border-right-color: var(--neutralBackground1Rest);
   border-left-width: 0;
 }
 .popover.bottom > .arrow {
@@ -5881,7 +5921,7 @@ button.close {
   margin-left: -10px;
   content: " ";
   border-top-width: 0;
-  border-bottom-color: #fff;
+  border-bottom-color: var(--neutralBackground1Rest);
 }
 .popover.left > .arrow {
   top: 50%;
@@ -5896,13 +5936,13 @@ button.close {
   bottom: -10px;
   content: " ";
   border-right-width: 0;
-  border-left-color: #fff;
+  border-left-color: var(--neutralBackground1Rest);
 }
 .popover-title {
   padding: 8px 14px;
   margin: 0;
   font-size: 16px;
-  background-color: #f7f7f7;
+  background-color: var(--neutralBackground1Rest);
   border-bottom: 1px solid #ebebeb;
   border-radius: -1px -1px 0 0;
 }
diff --git a/src/Bootstrap/less/buttons.less b/src/Bootstrap/less/buttons.less
index 89afc2dd0b..14fd1f4e3b 100644
--- a/src/Bootstrap/less/buttons.less
+++ b/src/Bootstrap/less/buttons.less
@@ -122,6 +122,41 @@
     outline: none !important; // removes focus from .tab-focus()
   }
 }
+.btn-brand-icon {
+  color: var(--neutralForegroundOnBrandRest);
+  background-color: var(--brandBackground1Rest);
+  border-color: var(--brandBackground1Rest);
+  border-radius: var(--Medium, 4px);
+  padding: 2px 8px;
+  border: 2px solid transparent;
+  box-shadow: none;
+  outline: none;
+
+  &:hover {
+    border: 2px solid var(--brandBackground1Hover);
+    color: var(--neutralForegroundOnBrandRest);
+    background-color: var(--brandBackground1Hover);
+    box-shadow: none;
+    outline: none;
+  }
+
+  &:active {
+    border: 2px solid var(--brandBackground1Pressed);
+    color: var(--neutralForegroundOnBrandRest);
+    background-color: var(--brandBackground1Pressed);
+    box-shadow: none;
+    outline: none;
+  }
+
+  &:focus-within,
+  &:focus-visible,
+  &:focus {
+    border: 2px solid var(--neutralStrokeFocus2Rest);
+    color: var(--neutralForegroundOnBrandRest);
+    box-shadow: inset 0px 0px 0px 1px var(--neutralStrokeFocus1Rest);
+    outline: none !important; // removes focus from .tab-focus()
+  }
+}
 .brand-button-transparent {
   color: var(--neutralForeground2Rest);
   background-color: var(--transparentBackgroundRest);
diff --git a/src/Bootstrap/less/popovers.less b/src/Bootstrap/less/popovers.less
index 7a5ec84d69..d9e5cbb7df 100644
--- a/src/Bootstrap/less/popovers.less
+++ b/src/Bootstrap/less/popovers.less
@@ -16,7 +16,7 @@
   .reset-text();
   font-size: (@font-size-base * 0.8);
 
-  background-color: @popover-bg;
+  background-color: var(--neutralBackground1Rest);
   background-clip: padding-box;
   border: 1px solid @popover-fallback-border-color;
   border: 1px solid @popover-border-color;
@@ -32,7 +32,7 @@
   // .arrow is outer, .arrow:after is inner
   > .arrow {
     border-width: @popover-arrow-outer-width;
-
+    background-color: var(--neutralBackground1Rest);
     &,
     &:after {
       position: absolute;
@@ -60,7 +60,7 @@
       bottom: 1px;
       margin-left: -@popover-arrow-width;
       content: " ";
-      border-top-color: @popover-arrow-color;
+      border-top-color: var(--neutralBackground1Rest);
       border-bottom-width: 0;
     }
   }
@@ -75,7 +75,7 @@
       bottom: -@popover-arrow-width;
       left: 1px;
       content: " ";
-      border-right-color: @popover-arrow-color;
+      border-right-color: var(--neutralBackground1Rest);
       border-left-width: 0;
     }
   }
@@ -91,7 +91,7 @@
       margin-left: -@popover-arrow-width;
       content: " ";
       border-top-width: 0;
-      border-bottom-color: @popover-arrow-color;
+      border-bottom-color: var(--neutralBackground1Rest);
     }
   }
 
@@ -107,7 +107,7 @@
       bottom: -@popover-arrow-width;
       content: " ";
       border-right-width: 0;
-      border-left-color: @popover-arrow-color;
+      border-left-color: var(--neutralBackground1Rest);
     }
   }
 }
@@ -116,7 +116,7 @@
   padding: 8px 14px;
   margin: 0; // reset heading margin
   font-size: @font-size-base;
-  background-color: @popover-title-bg;
+  background-color: var(--neutralBackground1Rest);
   border-bottom: 1px solid darken(@popover-title-bg, 5%);
   border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
 }
diff --git a/src/Bootstrap/less/theme/base.less b/src/Bootstrap/less/theme/base.less
index b8891476c6..0f322b17a9 100644
--- a/src/Bootstrap/less/theme/base.less
+++ b/src/Bootstrap/less/theme/base.less
@@ -340,11 +340,11 @@ body {
 
 .alert {
   a {
-    color: @link-color-darker;
+    color: var(--brandForegroundLinkRest);
 
     &:hover,
     &:focus {
-      color: @link-hover-color;
+      color: var(--brandForegroundLinkHover);
     }
   }
 }
diff --git a/src/Bootstrap/less/theme/page-display-package.less b/src/Bootstrap/less/theme/page-display-package.less
index 11e93835d4..c74dca2e90 100644
--- a/src/Bootstrap/less/theme/page-display-package.less
+++ b/src/Bootstrap/less/theme/page-display-package.less
@@ -35,7 +35,7 @@
       .version-title {
         font-size: 16px;
         font-weight: 400;
-        color: @gray-light;
+        color: var(--neutralForeground3Rest);
         margin-right: 14px;
         vertical-align: middle;
       }
@@ -50,7 +50,7 @@
     }
 
     .prefix-reserve-title {
-      background-color: #F3F2F1;
+      background-color: var(--neutralBackground3Rest);
       display: inline-flex;
       align-items: center;
       border-radius: 100px;
@@ -65,7 +65,7 @@
       .prefix-reserve-label {
         font-size: 14px;
         font-weight: 400;
-        color: #2F6FA7;
+        color: var(--neutralForeground2Rest);
         margin-top: 2px;
         margin-bottom: 2px;
         margin-right: 10px;
@@ -105,7 +105,7 @@
     .deprecation-content-container {
       margin-top: 15px;
       padding-top: 15px;
-      border-top: 1px solid lightgray;
+      border-top: 1px solid var(--neutralForeground1Rest);
 
       p {
         margin-top: 5px;
@@ -141,7 +141,7 @@
     .vulnerabilities-content-container {
       margin-top: 15px;
       padding-top: 15px;
-      border-top: 1px solid lightgray;
+      border-top: 1px solid var(--neutralForeground1Rest);
 
       .vulnerabilities-list {
         border-collapse: unset;
@@ -167,6 +167,7 @@
   }
 
   .package-details-main {
+    color: var(--neutralForeground1Rest);
     .break-word;
 
     .package-icon-cell {
@@ -198,9 +199,9 @@
     }
 
     .sidebar-headers {
-      font-size: 16px;
+      font-size: 20px;
       font-weight: 600;
-      color: @gray-light;
+      color: var(--neutralForeground1Rest);
       margin-bottom: 14px;
     }
 
@@ -225,15 +226,15 @@
     }
 
     .download-info {
+      color: var(--neutralForeground1Rest);
 
       .download-info-row {
         margin-bottom: 15px;
       }
 
       .download-info-header {
-        font-size: 14px;
+        font-size: 16px;
         font-weight: 400;
-        color: @gray-light;
         margin-right: 12px;
       }
 
@@ -271,7 +272,7 @@
 
   .report-link {
     i {
-      color: #BE0151;
+      color: var(--statusDangerForeground3Rest);
       font-weight: bold;
     }
   }
@@ -286,7 +287,7 @@
   .used-by-desc {
     font-family: @font-family-base;
     font-size: 14px;
-    color: #333333;
+    color: var(--neutralForeground3Rest);
     margin: 4px 0 0 0;
     line-height: 16px;
   }
@@ -295,14 +296,12 @@
     font-family: @font-family-base;
     font-size: 16px;
     line-height: 19px;
-    color: @brand-primary;
   }
 
   .gh-link, .ngp-link {
     font-family: @font-family-base;
     font-size: 16px;
     line-height: 19px;
-    color: @brand-primary;
     width: auto;
   }
 
@@ -316,14 +315,14 @@
     font-size: 14px;
     line-height: 16px;
     font-weight: 400;
-    color: #586069;
+    color: var(--neutralForeground3Rest);
   }
 
   .gh-star {
     font-size: 14px;
     line-height: 12px;
     /* Use a slightly darker orange color to increase contrast for accessibility */
-    color: darken(@brand-warning, 4.5%);
+    color: darken(@brand-warning, 4.5%); //
   }
 
   .used-by {
@@ -360,63 +359,117 @@
       border: 0;
 
       > li {
-        margin-right: 5px;
+        margin-right: 4px;
         padding: 0;
         margin-bottom: 0;
 
         > a {
-          color: @text-color;
-          background-color: #eaeaea;
-          border: 0;
+          color: var(--neutralForeground1Rest);
+          background-color: var(--neutralBackgroundSubtleRest);
           padding: 5px 10px;
-          margin: 0;
+          border-bottom: 0;
+          top: 2px;
+          border-radius: 6px 6px 0px 0px;
+          border-bottom: 0;
+          border-top: 2px solid transparent;
+          border-right: 2px solid transparent;
+          border-left: 2px solid transparent;
+          outline: none;
+
+          &:hover{
+            background-color: var(--neutralBackgroundSubtleHover);
+            color: var(--neutralForeground1Hover);
+          }
+
+          &:active:focus {
+            background-color: var(--neutralBackgroundSubtlePressed);
+            color: var(--neutralForeground1Pressed);
+          }
 
           &:focus {
-            outline: 3px solid #0078D4;
-            outline-offset: 0;
+            background-color: var(--neutralBackground1Rest);
+            border-top: 2px solid var(--neutralStrokeFocus2Rest);
+            border-right: 2px solid var(--neutralStrokeFocus2Rest);
+            border-left: 2px solid var(--neutralStrokeFocus2Rest);
           }
         }
       }
     }
 
     .nav-tabs > li.active > a {
-      background-color: @panel-footer-bg;
-      border: 0;
-      color: #fff;
-      font-weight: 600;
-      text-decoration: underline;
+      background-color: var(--neutralBackground1Rest);
+      border-radius: 6px 6px 0px 0px;
+
+      border-top: 2px solid var(--neutralStroke1Rest);
+      border-right: 2px solid var(--neutralStroke1Rest);
+      border-left: 2px solid var(--neutralStroke1Rest);
+
+      color: var(--neutralForeground1Rest);
+      top: 2px;
+
+      &:hover{
+        background-color: var(--neutralBackgroundSubtleHover);
+        color: var(--neutralForeground1Hover);
+      }
+
+      &:active:focus {
+        background-color: var(--neutralBackgroundSubtlePressed);
+        color: var(--neutralForeground1Pressed);
+      }
+
+      &:focus {
+        background-color: var(--neutralBackground1Rest);
+        border-top: 2px solid var(--neutralStrokeFocus2Rest);
+        border-right: 2px solid var(--neutralStrokeFocus2Rest);
+        border-left: 2px solid var(--neutralStrokeFocus2Rest);
+      }
     }
 
     .tab-content {
+      background-color: var(--neutralBackground1Rest);
+      
+      .tab-pane.active{
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+      }
       .tab-pane {
-
+        background-color: var(--neutralBackground2Rest);
         .install-script-row {
           display: flex;
-          height: 100%;
-          width: 100%;
 
           .install-script {
-            background-color: @panel-footer-bg;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 6px 8px;
+
+            background-color: var(--neutralBackground1Rest);
             font-family: @font-family-monospace;
             font-size: 1em;
-            color: #fff;
-            width: calc(100% - 40px);
+            color: var(--neutralForeground1Rest);
+            width: 100%;
             line-height: 1.5;
             white-space: pre-wrap;
             // Add a border with the same color as the background to support visual callout
             // in high contrast mode (since borders are shown).
-            border-color: @panel-footer-bg;
-            border-style: solid;
-            border-width: 1px 0 1px 1px;
+            border: 2px solid var(--neutralStroke1Rest);
+            border-radius: 0px 6px 6px 6px;
             vertical-align: middle;
             word-break: break-word;
             margin: 0px;
           }
 
-          .copy-button button {
-              height: 100%;
-              min-height: 42px;
-              line-height: 1.5;
+          .copy-button {
+            display: flex;
+
+            button {
+              display: flex;
+              gap: 4px;
+              padding: 2px 8px;
+              justify-content: center;
+              align-items: center;
+            }
           }
         }
 
@@ -429,28 +482,69 @@
   }
 
   .body-tabs {
+    .nav-tabs > li {
+      padding-right: 2px;
+    }
+    
     .nav-tabs > li.active > a {
-      border-bottom-color: #0078D4;
+      border-bottom-color: var(--brandStrokeCompoundRest);
       border-bottom-width: 2px;
-      font-weight: bold;
+      -webkit-text-stroke-width: calc(0.5 * 0.04ex);
+              text-shadow: calc(0.5 * -0.03ex) 0 0 currentColor,
+                           calc(0.5 * 0.03ex) 0 0 currentColor;
       margin-bottom: -1px;
+      background-color: transparent;
+
+      &:hover {
+        border-bottom-color: var(--brandStrokeCompoundHover);
+        border-bottom-width: 2px;
+      }
+
+      &:active {
+        border-bottom-color: var(--brandStrokeCompoundPressed);
+        border-bottom-width: 2px;
+      }
+
+      &:focus {
+        border-radius: 2px;
+        outline: 3px solid var(--neutralStrokeFocus2Rest);
+        outline-offset: 1px;
+      }
     }
 
     .nav-tabs > li.active > a.body-warning-tab > {
-      background-color: #fff4ce;
+      background-color: var(--statusWarningBackground1Rest);
+      border-bottom-color: var(--statusWarningStroke1Rest);
+      border-bottom-width: 2px;
     }
 
     .nav-tabs > li > a {
       border-left: 0px;
       border-right: 0px;
       border-top: 0px;
+      border-bottom-width: 2px;
       font-size: 14px;
       font-family: @font-family-base;
-      color: #323130;
-
+      color: var(--neutralForeground1Rest);
+      background-color: transparent;
+      
+      &:hover {
+        border-bottom-color: var(--neutralStroke1Hover);
+        border-bottom-width: 2px;
+        background-color: var(--neutralBackgroundSubtleHover);
+        border-radius: 2px 2px 0px 0px;
+      }
+      
+      &:active {
+        border-bottom-color: var(--neutralStroke1Pressed);
+        border-bottom-width: 2px;
+        background-color: var(--neutralBackgroundSubtlePressed);
+      }
+      
       &:focus {
-        outline: 3px solid #0078D4;
-        outline-offset: 0;
+        border-radius: 2px;
+        outline: 3px solid var(--neutralStrokeFocus2Rest);
+        outline-offset: 1px;
       }
 
       .ms-Icon {
diff --git a/src/Bootstrap/less/type.less b/src/Bootstrap/less/type.less
index bf982ee94f..8a146e3609 100644
--- a/src/Bootstrap/less/type.less
+++ b/src/Bootstrap/less/type.less
@@ -141,6 +141,9 @@ mark,
 .bg-danger {
   .bg-variant(@state-danger-bg);
 }
+.bg-brand-info {
+  background-color: var(--neutralBackground5Rest);
+}
 
 
 // Page header
diff --git a/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml b/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml
index f20c900080..5c1409300e 100644
--- a/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml
+++ b/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml
@@ -214,14 +214,16 @@
                 var cs = packageManager.InstallPackageCommands.Select((c, i) => i < lastIndex ? c + Environment.NewLine : c);
             }
             @* Writing out the install command must be on a single line to avoid undesired whitespace in the <pre> tag. *@
-            <pre class="install-script" id="@packageManager.Id-text">@foreach (var c in cs) {<span class="install-command-row">@c</span>}</pre>
-            <div class="copy-button">
-                <button id="@packageManager.Id-button" class="btn btn-default btn-warning" type="button"
-                        data-toggle="popover" data-placement="bottom" data-content="Copied."
-                        aria-label="@packageManager.CopyLabel" role="button">
-                    <span class="ms-Icon ms-Icon--Copy" aria-hidden="true"></span>
-                </button>
-            </div>
+            <pre class="install-script" id="@packageManager.Id-text">@foreach (var c in cs) {<span class="install-command-row">@c</span>}
+                <div class="copy-button">
+                    <button id="@packageManager.Id-button" class="btn btn-brand-icon" type="button" 
+                    data-toggle="popover" data-placement="bottom" data-content="Copied."
+                    aria-label="@packageManager.CopyLabel" role="button">
+                        <span class="ms-Icon ms-Icon--Copy" aria-hidden="true"></span>
+                        <span>Copy</span>
+                    </button>
+                </div>
+            </pre>
         </div>
 
         @switch (packageManager.AlertLevel)
@@ -922,7 +924,7 @@
                                     if ((packageVersion.Available && packageVersion.Listed && Model.ShowDetailsAndLinks)
                                         || (!packageVersion.Deleted && Model.CanDisplayPrivateMetadata))
                                     {
-                                        <tr class="@(packageVersion.IsCurrent(Model) ? "bg-info" : null)">
+                                        <tr class="@(packageVersion.IsCurrent(Model) ? "bg-brand-info" : null)">
                                             <td tabindex="0">
                                                 <a href="@Url.Package(packageVersion)" title="@packageVersion.Version">
                                                     @packageVersion.Version.Abbreviate(30)
diff --git a/src/NuGetGallery/Views/Packages/_DisplayPackageDeprecation.cshtml b/src/NuGetGallery/Views/Packages/_DisplayPackageDeprecation.cshtml
index 5f6a4d5ea1..c6c450037b 100644
--- a/src/NuGetGallery/Views/Packages/_DisplayPackageDeprecation.cshtml
+++ b/src/NuGetGallery/Views/Packages/_DisplayPackageDeprecation.cshtml
@@ -1,7 +1,7 @@
 @model DisplayPackageViewModel
 
 <div class="deprecation-container">
-    <div class="icon-text alert alert-warning">
+    <div class="icon-text alert alert-brand-warning">
         <div id="show-deprecation-content-container" class="deprecation-expander" tabindex="0" data-toggle="collapse" data-target="#deprecation-content-container" aria-expanded="false" aria-controls="deprecation-content-container" aria-labelledby="deprecation-container-label" role="button">
             <div class="deprecation-expander" role="button">
                 <div class="deprecation-expander-container">
diff --git a/src/NuGetGallery/Views/Packages/_DisplayPackageRenames.cshtml b/src/NuGetGallery/Views/Packages/_DisplayPackageRenames.cshtml
index da6d6fb0ad..4eee7143cc 100644
--- a/src/NuGetGallery/Views/Packages/_DisplayPackageRenames.cshtml
+++ b/src/NuGetGallery/Views/Packages/_DisplayPackageRenames.cshtml
@@ -1,7 +1,7 @@
 @model DisplayPackageViewModel
 
 <div class="deprecation-container">
-    <div class="icon-text alert alert-info">
+    <div class="icon-text alert alert-brand-info">
         <div id="show-rename-content-container" class="deprecation-expander" tabindex="0" data-toggle="collapse" data-target="#rename-content-container" aria-expanded="false" aria-controls="rename-content-container" aria-labelledby="rename-container-label" role="button">
             <div class="deprecation-expander" role="button">
                 <div class="deprecation-expander-container">
diff --git a/src/NuGetGallery/Views/Packages/_DisplayPackageVulnerabilities.cshtml b/src/NuGetGallery/Views/Packages/_DisplayPackageVulnerabilities.cshtml
index 9847a1b8e5..04f46f4ac0 100644
--- a/src/NuGetGallery/Views/Packages/_DisplayPackageVulnerabilities.cshtml
+++ b/src/NuGetGallery/Views/Packages/_DisplayPackageVulnerabilities.cshtml
@@ -1,7 +1,7 @@
 @model DisplayPackageViewModel
 
 <div class="vulnerabilities-container">
-    <div class="icon-text alert alert-warning">
+    <div class="icon-text alert alert-brand-warning">
         <div id="show-vulnerabilities-content-container" class="vulnerabilities-expander" tabindex="0" data-toggle="collapse" data-target="#vulnerabilities-content-container" aria-expanded="false" aria-controls="vulnerabilities-content-container" aria-labelledby="vulnerabilities-container-label" role="button">
             <div class="vulnerabilities-expander" role="button">
                 <div class="vulnerabilities-expander-container">