diff --git a/.changeset/cuddly-apricots-protect.md b/.changeset/cuddly-apricots-protect.md
new file mode 100644
index 0000000000..da03928156
--- /dev/null
+++ b/.changeset/cuddly-apricots-protect.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Replacing deprecated variables with color v2 variables
diff --git a/src/alerts/flash.scss b/src/alerts/flash.scss
index 55cc9b411e..14c9f6fb58 100644
--- a/src/alerts/flash.scss
+++ b/src/alerts/flash.scss
@@ -64,42 +64,42 @@
 //
 
 .flash {
-  color: var(--color-alert-info-text);
-  background-image: linear-gradient(var(--color-alert-info-bg), var(--color-alert-info-bg));
-  border-color: var(--color-alert-info-border);
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
+  border-color: var(--color-accent-muted);
 
   .octicon {
-    color: var(--color-alert-info-icon);
+    color: var(--color-accent-fg);
   }
 }
 
 .flash-warn {
-  color: var(--color-alert-warn-text);
-  background-image: linear-gradient(var(--color-alert-warn-bg), var(--color-alert-warn-bg));
-  border-color: var(--color-alert-warn-border);
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+  border-color: var(--color-attention-muted);
 
   .octicon {
-    color: var(--color-alert-warn-icon);
+    color: var(--color-attention-fg);
   }
 }
 
 .flash-error {
-  color: var(--color-alert-error-text);
-  background-image: linear-gradient(var(--color-alert-error-bg), var(--color-alert-error-bg));
-  border-color: var(--color-alert-error-border);
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+  border-color: var(--color-danger-muted);
 
   .octicon {
-    color: var(--color-alert-error-icon);
+    color: var(--color-danger-fg);
   }
 }
 
 .flash-success {
-  color: var(--color-alert-success-text);
-  background-image: linear-gradient(var(--color-alert-success-bg), var(--color-alert-success-bg));
-  border-color: var(--color-alert-success-border);
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+  border-color: var(--color-success-muted);
 
   .octicon {
-    color: var(--color-alert-success-icon);
+    color: var(--color-success-fg);
   }
 }
 
@@ -129,7 +129,7 @@
 // Makes sure the background is opaque to cover any content underneath
 .flash-full,
 .flash-banner {
-  background-color: var(--color-bg-canvas);
+  background-color: var(--color-canvas-default);
 }
 
 // FIXME deprecate this
@@ -138,5 +138,5 @@
   // stylelint-disable-next-line primer/spacing
   margin-bottom: 0.8em;
   font-weight: $font-weight-bold;
-  background-color: var(--color-alert-warn-bg);
+  background-color: var(--color-attention-subtle);
 }
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index 19db064731..f543397c16 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -8,10 +8,10 @@
   // stylelint-disable-next-line primer/typography
   font-size: 13px;
   list-style: none;
-  background: var(--color-bg-overlay);
-  border: $border-width $border-style var(--color-border-primary);
+  background: var(--color-canvas-overlay);
+  border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
-  box-shadow: var(--color-autocomplete-shadow);
+  box-shadow: var(--color-shadow-medium);
 }
 
 // One of the items that appears within an autocomplete group
@@ -23,19 +23,19 @@
   padding: $spacer-1 $spacer-2;
   overflow: hidden;
   font-weight: $font-weight-bold;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
   text-align: left;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
-  background-color: var(--color-bg-overlay);
+  background-color: var(--color-canvas-overlay);
   border: 0;
 
   &:hover {
-    color: var(--color-state-hover-primary-text);
+    color: var(--color-fg-on-emphasis);
     text-decoration: none;
-    background-color: var(--color-state-hover-primary-bg);
+    background-color: var(--color-accent-emphasis);
 
     // Inherit color on all child elements to ensure enough contrast
     * {
@@ -46,9 +46,9 @@
   &.selected,
   &[aria-selected=true],
   &.navigation-focus {
-    color: var(--color-state-selected-primary-text);
+    color: var(--color-fg-on-emphasis);
     text-decoration: none;
-    background-color: var(--color-state-selected-primary-bg);
+    background-color: var(--color-accent-emphasis);
 
     // Inherit color on all child elements to ensure enough contrast
     * {
diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss
index 526c6afae0..cb5e4bfb0c 100644
--- a/src/autocomplete/suggester.scss
+++ b/src/autocomplete/suggester.scss
@@ -11,20 +11,20 @@
   margin-top: $spacer-4;
   list-style: none;
   cursor: pointer;
-  background: var(--color-bg-overlay);
-  border: $border-width $border-style var(--color-border-primary);
+  background: var(--color-canvas-overlay);
+  border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
-  box-shadow: var(--color-autocomplete-shadow);
+  box-shadow: var(--color-shadow-medium);
 
   li {
     display: block;
     padding: $spacer-1 $spacer-2;
     font-weight: $font-weight-semibold;
-    border-bottom: $border-width $border-style var(--color-autocomplete-row-border);
+    border-bottom: $border-width $border-style var(--color-border-muted);
 
     small {
       font-weight: $font-weight-normal;
-      color: var(--color-text-secondary);
+      color: var(--color-fg-muted);
     }
 
     &:last-child {
@@ -39,23 +39,23 @@
     }
 
     &:hover {
-      color: var(--color-state-hover-primary-text);
+      color: var(--color-fg-on-emphasis);
       text-decoration: none;
-      background: var(--color-state-hover-primary-bg);
+      background: var(--color-accent-emphasis);
 
       small {
-        color: var(--color-state-hover-primary-text);
+        color: var(--color-fg-on-emphasis);
       }
     }
 
     &[aria-selected="true"],
     &.navigation-focus {
-      color: var(--color-state-selected-primary-text);
+      color: var(--color-fg-on-emphasis);
       text-decoration: none;
-      background: var(--color-state-selected-primary-bg);
+      background: var(--color-accent-emphasis);
 
       small {
-        color: var(--color-state-selected-primary-text);
+        color: var(--color-fg-on-emphasis);
       }
     }
   }
diff --git a/src/avatars/avatar-parent-child.scss b/src/avatars/avatar-parent-child.scss
index 8ca126bdbc..e3185f8068 100644
--- a/src/avatars/avatar-parent-child.scss
+++ b/src/avatars/avatar-parent-child.scss
@@ -10,7 +10,7 @@
   position: absolute;
   right: -15%;
   bottom: -9%;
-  background-color: var(--color-bg-canvas); // For transparent backgrounds
+  background-color: var(--color-canvas-default); // For transparent backgrounds
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius-1;
   box-shadow: var(--color-avatar-child-shadow);
diff --git a/src/avatars/avatar-stack.scss b/src/avatars/avatar-stack.scss
index f8ed8091d9..e445b99554 100644
--- a/src/avatars/avatar-stack.scss
+++ b/src/avatars/avatar-stack.scss
@@ -21,7 +21,7 @@
 
 .AvatarStack-body {
   display: flex;
-  background: var(--color-bg-canvas);
+  background: var(--color-canvas-default);
 
   .avatar {
     position: relative;
@@ -32,8 +32,8 @@
     box-sizing: content-box;
     // stylelint-disable-next-line primer/spacing
     margin-right: -11px;
-    background-color: var(--color-bg-canvas);
-    border-right: $border-width $border-style var(--color-bg-canvas);
+    background-color: var(--color-canvas-default);
+    border-right: $border-width $border-style var(--color-canvas-default);
     // stylelint-disable-next-line primer/borders
     border-radius: $border-radius-1;
     transition: margin 0.1s ease-in-out;
@@ -82,7 +82,7 @@
 .avatar.avatar-more {
   z-index: 1;
   margin-right: 0;
-  background: var(--color-bg-tertiary);
+  background: var(--color-canvas-subtle);
 
   &::before,
   &::after {
@@ -92,7 +92,7 @@
     content: "";
     // stylelint-disable-next-line primer/borders
     border-radius: 2px;
-    outline: $border-width $border-style var(--color-bg-canvas);
+    outline: $border-width $border-style var(--color-canvas-default);
   }
 
   &::before {
@@ -129,7 +129,7 @@
 
     &::after {
       width: 2px;
-      background: var(--color-bg-tertiary);
+      background: var(--color-canvas-subtle);
     }
   }
 
@@ -138,6 +138,6 @@
     // stylelint-disable-next-line primer/spacing
     margin-left: -11px;
     border-right: 0;
-    border-left: $border-width $border-style var(--color-bg-canvas);
+    border-left: $border-width $border-style var(--color-canvas-default);
   }
 }
diff --git a/src/avatars/circle-badge.scss b/src/avatars/circle-badge.scss
index 0c994ca173..2bc5d7f680 100644
--- a/src/avatars/circle-badge.scss
+++ b/src/avatars/circle-badge.scss
@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-bg-canvas);
+  background-color: var(--color-canvas-default);
   border-radius: 50%;
   box-shadow: var(--color-shadow-medium);
 }
@@ -46,7 +46,7 @@
     width: 100%;
     content: "";
     // stylelint-disable-next-line primer/borders
-    border-bottom: 2px dashed var(--color-border-primary);
+    border-bottom: 2px dashed var(--color-border-default);
   }
 
   .CircleBadge {
diff --git a/src/base/base.scss b/src/base/base.scss
index 8b6fbb072e..47f6fd73a0 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -16,12 +16,12 @@ body {
   font-family: $body-font;
   font-size: $body-font-size;
   line-height: $body-line-height;
-  color: var(--color-text-primary);
-  background-color: var(--color-bg-canvas);
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
 }
 
 a {
-  color: var(--color-text-link);
+  color: var(--color-accent-fg);
   text-decoration: none;
 
   &:hover {
@@ -45,7 +45,7 @@ hr,
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: $border-width $border-style var(--color-border-secondary);
+  border-bottom: $border-width $border-style var(--color-border-muted);
   @include clearfix();
 }
 
diff --git a/src/base/kbd.scss b/src/base/kbd.scss
index 033c03a1d6..b63afc70c0 100644
--- a/src/base/kbd.scss
+++ b/src/base/kbd.scss
@@ -8,13 +8,13 @@ kbd {
   font: 11px $mono-font;
   // stylelint-disable-next-line primer/typography
   line-height: 10px;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
   vertical-align: middle;
-  background-color: var(--color-bg-secondary);
+  background-color: var(--color-canvas-subtle);
   // stylelint-disable-next-line primer/borders
-  border: $border-style $border-width var(--color-border-tertiary);
-  border-bottom-color: var(--color-border-tertiary);
+  border: $border-style $border-width var(--color-neutral-muted);
+  border-bottom-color: var(--color-neutral-muted);
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-tertiary);
+  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
 }
diff --git a/src/base/modes.scss b/src/base/modes.scss
index e90f5209f2..1691ee7b42 100644
--- a/src/base/modes.scss
+++ b/src/base/modes.scss
@@ -30,8 +30,8 @@
 // Enables nesting of different color modes
 
 [data-color-mode] {
-  color: var(--color-text-primary);
-  background-color: var(--color-bg-canvas);
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
 }
 
 // color-scheme
diff --git a/src/blankslate/blankslate.scss b/src/blankslate/blankslate.scss
index 12fe605423..d88e4eac96 100644
--- a/src/blankslate/blankslate.scss
+++ b/src/blankslate/blankslate.scss
@@ -5,15 +5,15 @@
   text-align: center;
 
   p {
-    color: var(--color-text-secondary);
+    color: var(--color-fg-muted);
   }
 
   code {
     // stylelint-disable-next-line primer/spacing
     padding: 2px 5px 3px;
     font-size: $h5-size;
-    background: var(--color-bg-canvas);
-    border: $border-width $border-style var(--color-border-secondary);
+    background: var(--color-canvas-default);
+    border: $border-width $border-style var(--color-border-muted);
     border-radius: $border-radius;
   }
 
@@ -27,7 +27,7 @@
   margin-right: $spacer-1;
   margin-bottom: $spacer-2;
   margin-left: $spacer-1;
-  color: var(--color-icon-secondary);
+  color: var(--color-fg-muted);
 }
 
 .blankslate-capped {
diff --git a/src/box/box.scss b/src/box/box.scss
index dd828b0ae3..b3e41eb0d0 100644
--- a/src/box/box.scss
+++ b/src/box/box.scss
@@ -2,8 +2,8 @@
 // Intended to replace simple-box, boxed-group, and table-list
 
 .Box {
-  background-color: var(--color-bg-primary);
-  border-color: var(--color-border-primary);
+  background-color: var(--color-canvas-default);
+  border-color: var(--color-border-default);
   border-style: $border-style;
   border-width: $border-width;
   border-radius: $border-radius;
@@ -74,8 +74,8 @@
   padding: $spacer-3;
   // stylelint-disable-next-line primer/spacing
   margin: (-$border-width) (-$border-width) 0;
-  background-color: var(--color-bg-tertiary);
-  border-color: var(--color-border-primary);
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-default);
   border-style: $border-style;
   border-width: $border-width;
   border-top-left-radius: $border-radius;
@@ -89,7 +89,7 @@
 
 .Box-body {
   padding: $spacer-3;
-  border-bottom: $border-width $border-style var(--color-border-primary);
+  border-bottom: $border-width $border-style var(--color-border-default);
 
   // Ensures bottom-border doesn't poke out when .Box-body used without box-footer
   &:last-of-type {
@@ -106,7 +106,7 @@
   // stylelint-disable-next-line primer/spacing
   margin-top: -1px;
   list-style-type: none; // To account for applying Box component to a list
-  border-top-color: var(--color-border-secondary);
+  border-top-color: var(--color-border-muted);
   border-top-style: $border-style;
   border-top-width: $border-width;
 
@@ -126,13 +126,13 @@
   // .unread to be deprecated with .Box-row-unread
   &.unread {
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: inset 2px 0 0 var(--color-border-info);
+    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
   }
 
   &.navigation-focus {
     // Focus styles for when drag icon
     .Box-row--drag-button {
-      color: var(--color-text-link);
+      color: var(--color-accent-fg);
       cursor: grab;
       opacity: 100;
     }
@@ -144,12 +144,12 @@
 
     // Row dragging styles
     &.sortable-chosen {
-      background-color: var(--color-bg-secondary);
+      background-color: var(--color-canvas-subtle);
     }
 
     // Makes dragging row background gray
     &.sortable-ghost {
-      background-color: var(--color-bg-tertiary);
+      background-color: var(--color-canvas-subtle);
 
       // Hides contents of row while dragging so row looks solid gray
       .Box-row--drag-hide {
@@ -161,25 +161,25 @@
 
 .Box-row--focus-gray {
   &.navigation-focus {
-    background-color: var(--color-bg-tertiary);
+    background-color: var(--color-canvas-subtle);
   }
 }
 
 .Box-row--focus-blue {
   &.navigation-focus {
-    background-color: var(--color-box-row-blue-bg);
+    background-color: var(--color-accent-subtle);
   }
 }
 
 .Box-row--hover-gray {
   &:hover {
-    background-color: var(--color-bg-tertiary);
+    background-color: var(--color-canvas-subtle);
   }
 }
 
 .Box-row--hover-blue {
   &:hover {
-    background-color: var(--color-box-row-blue-bg);
+    background-color: var(--color-accent-subtle);
   }
 }
 
@@ -188,11 +188,11 @@
 // and links are dark-gray with blue hover on desktop.
 .Box-row-link {
   @include breakpoint(md) {
-    color: var(--color-text-primary);
+    color: var(--color-fg-default);
     text-decoration: none;
 
     &:hover {
-      color: var(--color-text-link);
+      color: var(--color-accent-fg);
       text-decoration: none;
     }
   }
@@ -208,7 +208,7 @@
   padding: $spacer-3;
   // stylelint-disable-next-line primer/spacing
   margin-top: -1px; // prevents double border when used with .Box-body
-  border-top-color: var(--color-border-primary);
+  border-top-color: var(--color-border-default);
   border-top-style: $border-style;
   border-top-width: $border-width;
   border-radius: 0 0 $border-radius $border-radius;
@@ -223,61 +223,61 @@
 // Box themes
 
 .Box--blue {
-  border-color: var(--color-box-blue-border);
+  border-color: var(--color-accent-muted);
 
   .Box-header {
-    background-color: var(--color-bg-info);
-    border-color: var(--color-box-blue-border);
+    background-color: var(--color-accent-subtle);
+    border-color: var(--color-accent-muted);
   }
 
   .Box-body {
-    border-color: var(--color-box-blue-border);
+    border-color: var(--color-accent-muted);
   }
 
   .Box-row {
-    border-color: var(--color-box-blue-border);
+    border-color: var(--color-accent-muted);
   }
 
   .Box-footer {
-    border-color: var(--color-box-blue-border);
+    border-color: var(--color-accent-muted);
   }
 }
 
 // Applies and red border to the outside of the box,
 // but not to the border separating rows.
 .Box--danger {
-  border-color: var(--color-border-danger);
+  border-color: var(--color-danger-emphasis);
 
   .Box-row {
     &:first-of-type {
-      border-color: var(--color-border-danger);
+      border-color: var(--color-danger-emphasis);
     }
   }
 
   .Box-body {
     &:last-of-type {
-      border-color: var(--color-border-danger);
+      border-color: var(--color-danger-emphasis);
     }
   }
 }
 
 .Box-header--blue {
-  background-color: var(--color-box-header-blue-bg);
-  border-color: var(--color-box-header-blue-border);
+  background-color: var(--color-accent-subtle);
+  border-color: var(--color-accent-muted);
 }
 
 // Box row highlight themes
 
 .Box-row--yellow {
-  background-color: var(--color-box-row-yellow-bg);
+  background-color: var(--color-attention-subtle);
 }
 
 .Box-row--blue {
-  background-color: var(--color-box-row-blue-bg);
+  background-color: var(--color-accent-subtle);
 }
 
 .Box-row--gray {
-  background-color: var(--color-bg-tertiary);
+  background-color: var(--color-canvas-subtle);
 }
 
 //Box with btn-octicon
diff --git a/src/branch-name/branch-name.scss b/src/branch-name/branch-name.scss
index e58c0e5f47..3209be98a7 100644
--- a/src/branch-name/branch-name.scss
+++ b/src/branch-name/branch-name.scss
@@ -7,24 +7,24 @@
   // stylelint-disable-next-line primer/spacing
   padding: 2px 6px;
   font: 12px $mono-font;
-  color: var(--color-branch-name-text);
-  background-color: var(--color-branch-name-bg);
+  color: var(--color-fg-muted);
+  background-color: var(--color-accent-subtle);
   border-radius: $border-radius;
 
   .octicon {
     // stylelint-disable-next-line primer/spacing
     margin: 1px -2px 0 0;
-    color: var(--color-branch-name-icon);
+    color: var(--color-fg-muted);
   }
 }
 
 // When a branch name is a link
 
 a.branch-name {
-  color: var(--color-text-link);
-  background-color: var(--color-branch-name-link-bg);
+  color: var(--color-accent-fg);
+  background-color: var(--color-accent-subtle);
 
   .octicon {
-    color: var(--color-branch-name-link-icon);
+    color: var(--color-accent-fg);
   }
 }
diff --git a/src/breadcrumb/breadcrumb.scss b/src/breadcrumb/breadcrumb.scss
index 2ea34db9a7..85e630c20e 100644
--- a/src/breadcrumb/breadcrumb.scss
+++ b/src/breadcrumb/breadcrumb.scss
@@ -11,7 +11,7 @@
     margin: 0 $em-spacer-5;
     content: '';
     // stylelint-disable-next-line primer/borders
-    border-right: 0.1em $border-style var(--color-text-disabled);
+    border-right: 0.1em $border-style var(--color-fg-muted);
     transform: rotate(15deg);
   }
 
@@ -22,7 +22,7 @@
 
 .breadcrumb-item-selected,
 .breadcrumb-item[aria-current]:not([aria-current=false]) {
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
 
   &::after {
     content: none;
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index 9cdafb8287..3d36c37b81 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -28,7 +28,7 @@
     cursor: default;
 
     .octicon {
-      color: var(--color-icon-tertiary);
+      color: var(--color-fg-muted);
     }
   }
 
@@ -40,7 +40,7 @@
 
   .octicon {
     margin-right: $spacer-1;
-    color: var(--color-text-tertiary);
+    color: var(--color-fg-muted);
     vertical-align: text-bottom;
 
     &:only-child {
@@ -90,13 +90,13 @@
   &.selected,
   &[aria-selected=true] {
     background-color: var(--color-btn-selected-bg);
-    box-shadow: var(--color-shadow-inset);
+    box-shadow: var(--color-primer-shadow-inset);
   }
 
   &:disabled,
   &.disabled,
   &[aria-disabled=true] {
-    color: var(--color-text-disabled);
+    color: var(--color-fg-muted);
     background-color: var(--color-btn-bg);
     border-color: var(--color-btn-border);
   }
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index 7af10000b5..2e307e9530 100644
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@@ -7,7 +7,7 @@
   display: inline-block;
   padding: 0;
   font-size: inherit;
-  color: var(--color-text-link);
+  color: var(--color-accent-fg);
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
@@ -24,7 +24,7 @@
   &[aria-disabled=true] {
     &,
     &:hover {
-      color: var(--color-text-disabled);
+      color: var(--color-fg-muted);
       cursor: default;
     }
   }
@@ -34,7 +34,7 @@
 //
 // Typically used as a "cancel" button next to a .btn
 .btn-invisible {
-  color: var(--color-text-link);
+  color: var(--color-accent-fg);
   background-color: transparent; // Reset default gradient backgrounds and colors
   border: 0;
   border-radius: 0;
@@ -42,7 +42,7 @@
 
   &:hover,
   &.zeroclipboard-is-hover {
-    color: var(--color-text-link);
+    color: var(--color-accent-fg);
     background: none;
     outline: none;
     box-shadow: none;
@@ -53,7 +53,7 @@
   &.selected,
   &[aria-selected=true],
   &.zeroclipboard-is-active {
-    color: var(--color-text-link);
+    color: var(--color-accent-fg);
     background: none;
     border-color: var(--color-btn-active-border);
     outline: none;
@@ -77,7 +77,7 @@
   // stylelint-disable-next-line primer/spacing
   margin-left: 5px;
   line-height: $lh-condensed-ultra;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
   vertical-align: middle;
 
   // For `<button>` elements
@@ -85,19 +85,19 @@
   border: 0;
   box-shadow: none;
 
-  &:hover { color: var(--color-text-link); }
+  &:hover { color: var(--color-accent-fg); }
 
   &.disabled,
   &[aria-disabled=true] {
-    color: var(--color-text-disabled);
+    color: var(--color-fg-muted);
     cursor: default;
 
-    &:hover { color: var(--color-text-disabled); }
+    &:hover { color: var(--color-fg-muted); }
   }
 }
 
 .btn-octicon-danger:hover {
-  color: var(--color-text-danger);
+  color: var(--color-danger-fg);
 }
 
 // Close button
@@ -105,18 +105,18 @@
 // Typically used with an octicon-x
 .close-button {
   padding: 0;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
   background: transparent;
   border: 0;
   outline: none;
 
   &:hover {
-    color: var(--color-text-primary);
+    color: var(--color-fg-default);
   }
 
   &:active,
   &:focus {
-    color: var(--color-text-tertiary);
+    color: var(--color-fg-muted);
     border-color: var(--color-btn-active-border);
     outline: none;
     box-shadow: var(--color-btn-focus-shadow);
@@ -149,22 +149,22 @@
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/typography
   line-height: 6px;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
   text-decoration: none;
   vertical-align: middle;
-  background: var(--color-hidden-text-expander-bg);
+  background: var(--color-neutral-muted);
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 1px;
 
   &:hover {
     text-decoration: none;
-    background-color: var(--color-hidden-text-expander-bg-hover);
+    background-color: var(--color-accent-muted);
   }
 
   &:active {
-    color: var(--color-text-inverse);
-    background-color: var(--color-bg-info-inverse);
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
   }
 }
 
@@ -194,14 +194,14 @@
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
   vertical-align: middle;
-  background-color: var(--color-social-count-bg);
+  background-color: var(--color-canvas-default);
   border: $border-width $border-style var(--color-btn-border);
   border-left: 0;
   border-top-right-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
-  box-shadow: var(--color-shadow-small), var(--color-shadow-highlight);
+  box-shadow: var(--color-shadow-small), var(--color-primer-shadow-highlight);
 
   &:hover,
   &:active {
@@ -209,13 +209,13 @@
   }
 
   &:hover {
-    color: var(--color-text-link);
+    color: var(--color-accent-fg);
     cursor: pointer;
   }
 
   &:focus {
     z-index: 1;
     outline: 0;
-    box-shadow: var(--color-state-focus-shadow);
+    box-shadow: var(--color-primer-shadow-focus);
   }
 }
diff --git a/src/dropdown/dropdown.scss b/src/dropdown/dropdown.scss
index dff3866290..418f0e25c6 100644
--- a/src/dropdown/dropdown.scss
+++ b/src/dropdown/dropdown.scss
@@ -30,11 +30,11 @@
   // stylelint-disable-next-line primer/spacing
   margin-top: 2px;
   list-style: none;
-  background-color: var(--color-bg-overlay);
+  background-color: var(--color-canvas-overlay);
   background-clip: padding-box;
-  border: $border-width $border-style var(--color-border-primary);
+  border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
-  box-shadow: var(--color-dropdown-shadow);
+  box-shadow: var(--color-shadow-large);
 
   &::before,
   &::after {
@@ -47,14 +47,14 @@
   &::before {
     // stylelint-disable-next-line primer/borders
     border: $spacer-2 $border-style transparent;
-    border-bottom-color: var(--color-border-primary);
+    border-bottom-color: var(--color-border-default);
   }
 
   // caret background (should match dropdown background)
   &::after {
     // stylelint-disable-next-line primer/borders
     border: 7px $border-style transparent;
-    border-bottom-color: var(--color-bg-overlay);
+    border-bottom-color: var(--color-canvas-overlay);
   }
 
   // stylelint-disable-next-line selector-max-type
@@ -78,15 +78,15 @@
   display: block;
   padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3;
   overflow: hidden;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
   text-overflow: ellipsis;
   white-space: nowrap;
 
   &:focus,
   &:hover {
-    color: var(--color-state-hover-primary-text);
+    color: var(--color-fg-on-emphasis);
     text-decoration: none;
-    background-color: var(--color-state-hover-primary-bg);
+    background-color: var(--color-accent-emphasis);
     outline: none;
 
     > .octicon {
@@ -121,13 +121,13 @@
   display: block;
   height: 0;
   margin: $spacer-2 0;
-  border-top: $border-width $border-style var(--color-border-primary);
+  border-top: $border-width $border-style var(--color-border-default);
 }
 
 .dropdown-header {
   padding: $spacer-1 $spacer-3;
   font-size: $h6-size;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
 }
 
 .dropdown-item[aria-checked="false"] .octicon-check {
@@ -152,7 +152,7 @@
     right: -$spacer-3;
     left: auto;
     border-color: transparent;
-    border-left-color: var(--color-border-primary);
+    border-left-color: var(--color-border-default);
   }
 
   &::after {
@@ -160,7 +160,7 @@
     right: -14px;
     left: auto;
     border-color: transparent;
-    border-left-color: var(--color-bg-overlay);
+    border-left-color: var(--color-canvas-overlay);
   }
 }
 
@@ -175,14 +175,14 @@
     top: 10px;
     left: -$spacer-3;
     border-color: transparent;
-    border-right-color: var(--color-border-primary);
+    border-right-color: var(--color-border-default);
   }
 
   &::after {
     top: 11px;
     left: -14px;
     border-color: transparent;
-    border-right-color: var(--color-bg-overlay);
+    border-right-color: var(--color-canvas-overlay);
   }
 }
 
@@ -203,7 +203,7 @@
     bottom: -$spacer-2;
     left: 9px;
     // stylelint-disable-next-line primer/borders
-    border-top: $spacer-2 $border-style var(--color-border-primary);
+    border-top: $spacer-2 $border-style var(--color-border-default);
     // stylelint-disable-next-line primer/borders
     border-right: $spacer-2 $border-style transparent;
     border-bottom: 0;
@@ -215,7 +215,7 @@
     bottom: -7px;
     left: 10px;
     // stylelint-disable-next-line primer/borders
-    border-top: 7px $border-style var(--color-bg-overlay);
+    border-top: 7px $border-style var(--color-canvas-overlay);
     // stylelint-disable-next-line primer/borders
     border-right: 7px $border-style transparent;
     border-bottom: 0;
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
index 9708217203..ddf67f9c85 100644
--- a/src/forms/form-control.scss
+++ b/src/forms/form-control.scss
@@ -22,27 +22,27 @@ label {
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
   vertical-align: middle;
-  background-color: var(--color-input-bg);
+  background-color: var(--color-canvas-default);
   background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
-  border: $border-width $border-style var(--color-input-border);
+  border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
   outline: none;
-  box-shadow: var(--color-shadow-inset);
+  box-shadow: var(--color-primer-shadow-inset);
 
   &.focus,
   &:focus {
-    border-color: var(--color-state-focus-border);
+    border-color: var(--color-accent-emphasis);
     outline: none;
-    box-shadow: var(--color-state-focus-shadow);
+    box-shadow: var(--color-primer-shadow-focus);
   }
 
   &[disabled] {
-    color: var(--color-text-disabled);
+    color: var(--color-fg-muted);
     background-color: var(--color-input-disabled-bg);
-    border-color: var(--color-input-disabled-border);
+    border-color: var(--color-border-default);
   }
 
   // Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad
@@ -63,14 +63,14 @@ textarea.form-control {
 
 // Inputs with contrast for easy light gray backgrounds against white.
 .input-contrast {
-  background-color: var(--color-input-contrast-bg);
+  background-color: var(--color-canvas-inset);
 
-  &:focus { background-color: var(--color-input-bg); }
+  &:focus { background-color: var(--color-canvas-default); }
 }
 
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
-  color: var(--color-text-placeholder);
+  color: var(--color-fg-subtle);
   opacity: 1; // override opacity in normalize.css
 }
 
@@ -148,7 +148,7 @@ textarea.form-control {
     margin: 0;
     font-size: $font-size-small;
     font-weight: $font-weight-normal;
-    color: var(--color-text-secondary);
+    color: var(--color-fg-muted);
   }
 }
 
@@ -186,7 +186,7 @@ textarea.form-control {
         display: inline-block;
         // stylelint-disable-next-line primer/spacing
         margin: 5px 0 0;
-        color: var(--color-text-secondary);
+        color: var(--color-fg-muted);
       }
 
       img {
@@ -235,9 +235,9 @@ input::-webkit-inner-spin-button {
   // stylelint-disable-next-line primer/spacing
   margin: 10px 0;
   font-size: $h5-size;
-  color: var(--color-text-warning);
-  background: var(--color-bg-warning);
-  border: $border-width $border-style var(--color-border-warning);
+  color: var(--color-attention-fg);
+  background: var(--color-attention-subtle);
+  border: $border-width $border-style var(--color-attention-emphasis);
   border-radius: $border-radius;
 
   p {
diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
index f272a5c61e..29d44b3d05 100644
--- a/src/forms/form-group.scss
+++ b/src/forms/form-group.scss
@@ -20,10 +20,10 @@
     max-width: 100%;
     // stylelint-disable-next-line primer/spacing
     margin-right: 5px;
-    background-color: var(--color-input-contrast-bg);
+    background-color: var(--color-canvas-inset);
 
     &:focus {
-      background-color: var(--color-input-bg);
+      background-color: var(--color-canvas-default);
     }
 
     &.shorter { width: 130px; }
@@ -81,9 +81,9 @@
     h4 {
       margin: $spacer-1 0 0;
 
-      &.is-error { color: var(--color-text-danger); }
+      &.is-error { color: var(--color-danger-fg); }
 
-      &.is-success { color: var(--color-text-success); }
+      &.is-success { color: var(--color-success-fg); }
 
       + .note {
         margin-top: 0;
@@ -101,7 +101,7 @@
     .form-group-header label::after {
       // stylelint-disable-next-line primer/spacing
       padding-left: 5px;
-      color: var(--color-text-danger);
+      color: var(--color-danger-fg);
       content: "*";
     }
   }
@@ -134,7 +134,7 @@
   &.successful {
     .success {
       display: inline;
-      color: var(--color-text-success);
+      color: var(--color-success-fg);
     }
   }
 
@@ -190,49 +190,49 @@
 
   &.successed {
     .success {
-      color: var(--color-input-tooltip-success-text);
-      background-color: var(--color-bg-canvas); // Makes sure the background is opaque to cover any content underneath
-      background-image: linear-gradient(var(--color-input-tooltip-success-bg), var(--color-input-tooltip-success-bg));
-      border-color: var(--color-input-tooltip-success-border);
+      color: var(--color-fg-default);
+      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+      border-color: var(--color-success-muted);
 
-      &::after { border-bottom-color: var(--color-input-tooltip-success-bg); }
-      &::before { border-bottom-color: var(--color-input-tooltip-success-border); }
+      &::after { border-bottom-color: var(--color-success-subtle); }
+      &::before { border-bottom-color: var(--color-success-muted); }
     }
   }
 
   &.warn {
     .form-control {
-      border-color: var(--color-input-warning-border);
+      border-color: var(--color-attention-emphasis);
     }
 
     .warning {
-      color: var(--color-input-tooltip-warning-text);
-      background-color: var(--color-bg-canvas); // Makes sure the background is opaque to cover any content underneath
-      background-image: linear-gradient(var(--color-input-tooltip-warning-bg), var(--color-input-tooltip-warning-bg));
-      border-color: var(--color-input-tooltip-warning-border);
+      color: var(--color-fg-default);
+      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+      border-color: var(--color-attention-muted);
 
-      &::after { border-bottom-color: var(--color-input-tooltip-warning-bg); }
-      &::before { border-bottom-color: var(--color-input-tooltip-warning-border); }
+      &::after { border-bottom-color: var(--color-attention-subtle); }
+      &::before { border-bottom-color: var(--color-attention-muted); }
     }
   }
 
   &.errored {
     .form-control {
-      border-color: var(--color-input-error-border);
+      border-color: var(--color-danger-emphasis);
     }
 
     label {
-      color: var(--color-text-danger);
+      color: var(--color-danger-fg);
     }
 
     .error {
-      color: var(--color-input-tooltip-error-text);
-      background-color: var(--color-bg-canvas); // Makes sure the background is opaque to cover any content underneath
-      background-image: linear-gradient(var(--color-input-tooltip-error-bg), var(--color-input-tooltip-error-bg));
-      border-color: var(--color-input-tooltip-error-border);
+      color: var(--color-fg-default);
+      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+      border-color: var(--color-danger-muted);
 
-      &::after { border-bottom-color: var(--color-input-tooltip-error-bg); }
-      &::before { border-bottom-color: var(--color-input-tooltip-error-border); }
+      &::after { border-bottom-color: var(--color-danger-subtle); }
+      &::before { border-bottom-color: var(--color-danger-muted); }
     }
   }
 }
@@ -242,7 +242,7 @@
   min-height: 17px;
   margin: $spacer-1 0 2px;
   font-size: $font-size-small;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
 
   .spinner {
     // stylelint-disable-next-line primer/spacing
diff --git a/src/forms/form-select.scss b/src/forms/form-select.scss
index 31453132be..ad4682755c 100644
--- a/src/forms/form-select.scss
+++ b/src/forms/form-select.scss
@@ -6,7 +6,7 @@
   max-width: 100%;
   height: $size-5;
   padding-right: $spacer-4;
-  background-color: var(--color-bg-primary);
+  background-color: var(--color-canvas-default);
   // SVG with fill: #586069 (--color-icon-secondary)
   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=");
   background-repeat: no-repeat;
diff --git a/src/forms/form-validation.scss b/src/forms/form-validation.scss
index c7599d24ec..2da647b6f8 100644
--- a/src/forms/form-validation.scss
+++ b/src/forms/form-validation.scss
@@ -72,8 +72,8 @@ dl.form-group > dd, // TODO: Deprecate
 
   .octicon-check {
     display: inline-block;
-    color: var(--color-text-success);
-    fill: var(--color-icon-success);
+    color: var(--color-success-fg);
+    fill: var(--color-success-fg);
   }
 
   .octicon-x {
@@ -93,8 +93,8 @@ dl.form-group > dd, // TODO: Deprecate
 
   .octicon-x {
     display: inline-block;
-    color: var(--color-text-danger);
-    fill: var(--color-icon-danger);
+    color: var(--color-danger-fg);
+    fill: var(--color-danger-fg);
   }
 }
 
@@ -127,9 +127,9 @@ dl.form-group > dd, // TODO: Deprecate
   font-size: 13px;
   // stylelint-disable-next-line primer/typography
   line-height: 16px;
-  color: var(--color-text-secondary);
-  background-color: var(--color-bg-secondary);
-  border: $border-width $border-style var(--color-drag-and-drop-border);
+  color: var(--color-fg-muted);
+  background-color: var(--color-canvas-subtle);
+  border: $border-width $border-style var(--color-border-default);
   border-top: 0;
   border-bottom-right-radius: $border-radius;
   border-bottom-left-radius: $border-radius;
@@ -141,7 +141,7 @@ dl.form-group > dd, // TODO: Deprecate
   }
 
   .error {
-    color: var(--color-text-danger);
+    color: var(--color-danger-fg);
   }
 
   // Spinner
@@ -188,10 +188,10 @@ dl.form-group > dd, // TODO: Deprecate
 
 .drag-and-drop-error-info {
   font-weight: $font-weight-normal;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
 
   a {
-    color: var(--color-text-link);
+    color: var(--color-accent-fg);
   }
 }
 
@@ -229,21 +229,21 @@ dl.form-group > dd, // TODO: Deprecate
   textarea {
     display: block;
     // stylelint-disable-next-line primer/borders
-    border-bottom: $border-width dashed var(--color-upload-enabled-border);
+    border-bottom: $border-width dashed var(--color-border-default);
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
 
   &.focused {
     border-radius: $border-radius;
-    box-shadow: var(--color-input-shadow), var(--color-state-focus-shadow);
+    box-shadow: var(--color-primer-shadow-inset), var(--color-primer-shadow-focus);
 
     .form-control {
       box-shadow: none;
     }
 
     .drag-and-drop {
-      border-color: var(--color-upload-enabled-border-focused);
+      border-color: var(--color-accent-emphasis);
     }
   }
 }
@@ -269,7 +269,7 @@ dl.form-group > dd, // TODO: Deprecate
   }
 
   .comment {
-    border: $border-width $border-style var(--color-previewable-comment-form-border);
+    border: $border-width $border-style var(--color-border-default);
   }
 
   .comment-form-error { margin-bottom: $spacer-2; }
@@ -330,22 +330,22 @@ h2.account {
   // stylelint-disable-next-line primer/typography
   font-size: 18px;
   font-weight: $font-weight-normal;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
 }
 
 p.explain {
   position: relative;
   font-size: $font-size-small;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
 
   strong {
-    color: var(--color-text-primary);
+    color: var(--color-fg-default);
   }
 
   .octicon {
     // stylelint-disable-next-line primer/spacing
     margin-right: 5px;
-    color: var(--color-icon-tertiary);
+    color: var(--color-fg-muted);
   }
 
   .minibutton {
diff --git a/src/forms/radio-group.scss b/src/forms/radio-group.scss
index ab021414cc..5f3d3ddedd 100644
--- a/src/forms/radio-group.scss
+++ b/src/forms/radio-group.scss
@@ -13,14 +13,14 @@
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 20px; // Specifically not inherit our `<body>` default
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
   cursor: pointer;
-  border: $border-width $border-style var(--color-border-primary);
+  border: $border-width $border-style var(--color-border-default);
 
   :checked + & {
     position: relative;
     z-index: 1;
-    border-color: var(--color-border-info);
+    border-color: var(--color-accent-emphasis);
   }
 
   &:first-of-type {
diff --git a/src/labels/counters.scss b/src/labels/counters.scss
index f858dbda7f..ed71943623 100644
--- a/src/labels/counters.scss
+++ b/src/labels/counters.scss
@@ -8,9 +8,9 @@
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
   line-height: $size-2 - 2px; // remove borders
-  color: var(--color-counter-text);
+  color: var(--color-fg-default);
   text-align: center;
-  background-color: var(--color-counter-bg);
+  background-color: var(--color-neutral-muted);
   border: $border-width $border-style transparent; // Support Firefox custom colors
   // stylelint-disable-next-line primer/borders
   border-radius: 2em;
@@ -26,11 +26,11 @@
 }
 
 .Counter--primary {
-  color: var(--color-counter-primary-text);
-  background-color: var(--color-counter-primary-bg);
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-neutral-emphasis);
 }
 
 .Counter--secondary {
-  color: var(--color-counter-secondary-text);
-  background-color: var(--color-counter-secondary-bg);
+  color: var(--color-fg-muted);
+  background-color: var(--color-neutral-subtle);
 }
diff --git a/src/labels/diffstat.scss b/src/labels/diffstat.scss
index bf94f764b0..0a69ed88ca 100644
--- a/src/labels/diffstat.scss
+++ b/src/labels/diffstat.scss
@@ -5,7 +5,7 @@
 .diffstat {
   font-size: $h6-size;
   font-weight: $font-weight-bold;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
   white-space: nowrap;
   cursor: default;
 }
@@ -22,16 +22,16 @@
 }
 
 .diffstat-block-deleted {
-  background-color: var(--color-diffstat-deletion-bg);
-  outline: 1px solid var(--color-diffstat-deletion-border); // Support Firefox custom colors
+  background-color: var(--color-danger-emphasis);
+  outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors
 }
 
 .diffstat-block-added {
   background-color: var(--color-diffstat-addition-bg);
-  outline: 1px solid var(--color-diffstat-addition-border); // Support Firefox custom colors
+  outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors
 }
 
 .diffstat-block-neutral {
-  background-color: var(--color-diffstat-neutral-bg);
-  outline: 1px solid var(--color-diffstat-neutral-border); // Support Firefox custom colors
+  background-color: var(--color-neutral-muted);
+  outline: 1px solid var(--color-border-subtle); // Support Firefox custom colors
 }
diff --git a/src/labels/labels.scss b/src/labels/labels.scss
index 9b7f8d1316..c0aab7d5e7 100644
--- a/src/labels/labels.scss
+++ b/src/labels/labels.scss
@@ -11,7 +11,7 @@
 .Label {
   @include labels-base;
   background-color: transparent !important; // TODO: Remove again
-  border-color: var(--color-label-border);
+  border-color: var(--color-border-default);
 
   &:hover {
     text-decoration: none;
@@ -33,31 +33,31 @@
 // Colors
 
 .Label--primary {
-  color: var(--color-label-primary-text);
-  border-color: var(--color-label-primary-border);
+  color: var(--color-fg-default);
+  border-color: var(--color-neutral-emphasis);
 }
 
 .Label--secondary {
-  color: var(--color-label-secondary-text);
-  border-color: var(--color-label-secondary-border);
+  color: var(--color-fg-muted);
+  border-color: var(--color-border-default);
 }
 
 .Label--info {
-  color: var(--color-label-info-text);
-  border-color: var(--color-label-info-border);
+  color: var(--color-accent-fg);
+  border-color: var(--color-accent-emphasis);
 }
 
 .Label--success {
-  color: var(--color-label-success-text);
-  border-color: var(--color-label-success-border);
+  color: var(--color-success-fg);
+  border-color: var(--color-success-emphasis);
 }
 
 .Label--warning {
-  color: var(--color-label-warning-text);
-  border-color: var(--color-label-warning-border);
+  color: var(--color-attention-fg);
+  border-color: var(--color-attention-emphasis);
 }
 
 .Label--danger {
-  color: var(--color-label-danger-text);
-  border-color: var(--color-label-danger-border);
+  color: var(--color-danger-fg);
+  border-color: var(--color-danger-emphasis);
 }
diff --git a/src/labels/states.scss b/src/labels/states.scss
index 2840cd3421..130add1485 100644
--- a/src/labels/states.scss
+++ b/src/labels/states.scss
@@ -21,27 +21,24 @@
 .state, // TODO: Deprecate
 .State,
 .State--draft {
-  color: var(--color-pr-state-draft-text);
-  background-color: var(--color-pr-state-draft-bg);
-  border: $border-width $border-style var(--color-pr-state-draft-border);
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-neutral-emphasis);
+  border: $border-width $border-style transparent;
 }
 
 .State--open {
-  color: var(--color-pr-state-open-text);
-  background-color: var(--color-pr-state-open-bg);
-  border-color: var(--color-pr-state-open-border);
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-success-emphasis);
 }
 
 .State--merged {
-  color: var(--color-pr-state-merged-text);
-  background-color: var(--color-pr-state-merged-bg);
-  border-color: var(--color-pr-state-merged-border);
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-done-emphasis);
 }
 
 .State--closed {
-  color: var(--color-pr-state-closed-text);
-  background-color: var(--color-pr-state-closed-bg);
-  border-color: var(--color-pr-state-closed-border);
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-danger-emphasis);
 }
 
 // Small
diff --git a/src/layout/layout.scss b/src/layout/layout.scss
index 03a733c4fd..8f0e6a78f3 100644
--- a/src/layout/layout.scss
+++ b/src/layout/layout.scss
@@ -121,7 +121,7 @@
       width: 1px;
       // stylelint-disable-next-line primer/spacing
       margin-right: -1px;
-      background: var(--color-border-primary);
+      background: var(--color-border-default);
     }
 
     .Layout-main {
diff --git a/src/layout/mixins.scss b/src/layout/mixins.scss
index 7ba78ecb82..ab9a57f626 100644
--- a/src/layout/mixins.scss
+++ b/src/layout/mixins.scss
@@ -70,8 +70,8 @@
     &.Layout-divider--flowRow-shallow {
       height: 8px;
       margin-right: 0;
-      background: var(--color-bg-canvas-inset);
-      border-color: var(--color-border-primary);
+      background: var(--color-canvas-inset);
+      border-color: var(--color-border-default);
       border-style: solid;
       border-width: $border-width 0;
     }
diff --git a/src/links/link.scss b/src/links/link.scss
index 718b05e2e2..3e5c2d3846 100644
--- a/src/links/link.scss
+++ b/src/links/link.scss
@@ -1,7 +1,7 @@
 // Links
 
 .Link {
-  color: var(--color-text-link);
+  color: var(--color-accent-fg);
 
   &:hover {
     text-decoration: underline;
@@ -10,26 +10,26 @@
 }
 
 .Link--primary {
-  color: var(--color-text-primary) !important;
+  color: var(--color-fg-default) !important;
 
   &:hover {
-    color: var(--color-text-link) !important;
+    color: var(--color-accent-fg) !important;
   }
 }
 
 .Link--secondary {
-  color: var(--color-text-secondary) !important;
+  color: var(--color-fg-muted) !important;
 
   &:hover {
-    color: var(--color-text-link) !important;
+    color: var(--color-accent-fg) !important;
   }
 }
 
 .Link--muted {
-  color: var(--color-text-secondary) !important;
+  color: var(--color-fg-muted) !important;
 
   &:hover {
-    color: var(--color-text-link) !important;
+    color: var(--color-accent-fg) !important;
     text-decoration: none;
   }
 }
@@ -38,7 +38,7 @@
 // Useful when you want only part of a link to turn blue on hover
 .Link--onHover {
   &:hover {
-    color: var(--color-text-link) !important;
+    color: var(--color-accent-fg) !important;
     text-decoration: underline;
     cursor: pointer;
   }
diff --git a/src/markdown/blob-csv.scss b/src/markdown/blob-csv.scss
index be7d2572c8..7374e7b2c3 100644
--- a/src/markdown/blob-csv.scss
+++ b/src/markdown/blob-csv.scss
@@ -15,7 +15,7 @@
     // stylelint-disable-next-line primer/spacing
     padding: 10px $spacer-2 9px;
     text-align: right;
-    background: var(--color-bg-primary);
+    background: var(--color-canvas-default);
     border: 0;
   }
 
@@ -23,7 +23,7 @@
 
   th {
     font-weight: $font-weight-bold;
-    background: var(--color-bg-tertiary);
+    background: var(--color-canvas-subtle);
     border-top: 0;
   }
 }
diff --git a/src/markdown/code.scss b/src/markdown/code.scss
index cd26409dd9..5a445a8a9e 100644
--- a/src/markdown/code.scss
+++ b/src/markdown/code.scss
@@ -8,7 +8,7 @@
     margin: 0;
     // stylelint-disable-next-line primer/typography
     font-size: 85%;
-    background-color: var(--color-markdown-code-bg);
+    background-color: var(--color-neutral-muted);
     border-radius: $border-radius;
 
     br { display: none; }
@@ -52,7 +52,7 @@
     font-size: 85%;
     // stylelint-disable-next-line primer/typography
     line-height: 1.45;
-    background-color: var(--color-bg-tertiary);
+    background-color: var(--color-canvas-subtle);
     border-radius: $border-radius;
   }
 
diff --git a/src/markdown/headings.scss b/src/markdown/headings.scss
index 8b4c7ae0f0..6f662f0fff 100644
--- a/src/markdown/headings.scss
+++ b/src/markdown/headings.scss
@@ -15,7 +15,7 @@
     line-height: $lh-condensed;
 
     .octicon-link {
-      color: var(--color-text-primary);
+      color: var(--color-fg-default);
       vertical-align: middle;
       visibility: hidden;
     }
@@ -41,7 +41,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 2em;
-    border-bottom: $border-width $border-style var(--color-border-secondary);
+    border-bottom: $border-width $border-style var(--color-border-muted);
   }
 
   h2 {
@@ -49,7 +49,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 1.5em;
-    border-bottom: $border-width $border-style var(--color-border-secondary);
+    border-bottom: $border-width $border-style var(--color-border-muted);
   }
 
   h3 {
@@ -69,6 +69,6 @@
   h6 {
     // stylelint-disable-next-line primer/typography
     font-size: 0.85em;
-    color: var(--color-text-tertiary);
+    color: var(--color-fg-muted);
   }
 }
diff --git a/src/markdown/images.scss b/src/markdown/images.scss
index 3efb011c18..694085e658 100644
--- a/src/markdown/images.scss
+++ b/src/markdown/images.scss
@@ -8,7 +8,7 @@
     // because we put padding on the images to hide header lines, and some people
     // specify the width of their images in their markdown.
     box-sizing: content-box;
-    background-color: var(--color-bg-primary);
+    background-color: var(--color-canvas-default);
 
     &[align=right] {
       // stylelint-disable-next-line primer/spacing
@@ -44,7 +44,7 @@
       // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
       overflow: hidden;
-      border: $border-width $border-style var(--color-markdown-frame-border);
+      border: $border-width $border-style var(--color-border-default);
     }
 
     span img {
@@ -57,7 +57,7 @@
       // stylelint-disable-next-line primer/spacing
       padding: 5px 0 0;
       clear: both;
-      color: var(--color-text-primary);
+      color: var(--color-fg-default);
     }
   }
 
diff --git a/src/markdown/markdown-body.scss b/src/markdown/markdown-body.scss
index efb7b1c4a9..97b8826be5 100644
--- a/src/markdown/markdown-body.scss
+++ b/src/markdown/markdown-body.scss
@@ -45,7 +45,7 @@
 
   // Link Colors
   .absent {
-    color: var(--color-text-danger);
+    color: var(--color-danger-fg);
   }
 
   .anchor {
@@ -76,16 +76,16 @@
     height: $em-spacer-3;
     padding: 0;
     margin: $spacer-4 0;
-    background-color: var(--color-border-primary);
+    background-color: var(--color-border-default);
     border: 0;
   }
 
   blockquote {
     // stylelint-disable-next-line primer/spacing
     padding: 0 1em;
-    color: var(--color-text-tertiary);
+    color: var(--color-fg-muted);
     // stylelint-disable-next-line primer/borders
-    border-left: 0.25em $border-style var(--color-markdown-blockquote-border);
+    border-left: 0.25em $border-style var(--color-border-default);
 
     > :first-child {
       margin-top: 0;
diff --git a/src/markdown/tables.scss b/src/markdown/tables.scss
index 83a1a9fafb..ee095c99ad 100644
--- a/src/markdown/tables.scss
+++ b/src/markdown/tables.scss
@@ -17,15 +17,15 @@
     td {
       // stylelint-disable-next-line primer/spacing
       padding: 6px 13px;
-      border: $border-width $border-style var(--color-markdown-table-border);
+      border: $border-width $border-style var(--color-border-default);
     }
 
     tr {
-      background-color: var(--color-bg-primary);
-      border-top: $border-width $border-style var(--color-markdown-table-tr-border);
+      background-color: var(--color-canvas-default);
+      border-top: $border-width $border-style var(--color-border-muted);
 
       &:nth-child(2n) {
-        background-color: var(--color-bg-tertiary);
+        background-color: var(--color-canvas-subtle);
       }
     }
 
diff --git a/src/navigation/filter-list.scss b/src/navigation/filter-list.scss
index cef3b8dc81..fe447f83c9 100644
--- a/src/navigation/filter-list.scss
+++ b/src/navigation/filter-list.scss
@@ -11,12 +11,12 @@
   }
 
   &.pjax-active .filter-item {
-    color: var(--color-text-secondary);
+    color: var(--color-fg-muted);
     background-color: transparent;
 
     &.pjax-active {
-      color: var(--color-text-inverse);
-      background-color: var(--color-bg-info-inverse);
+      color: var(--color-fg-on-emphasis);
+      background-color: var(--color-accent-emphasis);
     }
   }
 }
@@ -28,7 +28,7 @@
   margin-bottom: $spacer-1;
   overflow: hidden;
   font-size: $h5-size;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -37,14 +37,14 @@
 
   &:hover {
     text-decoration: none;
-    background-color: var(--color-bg-tertiary);
+    background-color: var(--color-canvas-subtle);
   }
 
   &.selected,
   &[aria-selected=true],
   &[aria-current]:not([aria-current=false]) {
-    color: var(--color-state-selected-primary-text);
-    background-color: var(--color-state-selected-primary-bg);
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
   }
 
   .count {
@@ -59,6 +59,6 @@
     bottom: 2px;
     z-index: -1;
     display: inline-block;
-    background-color: var(--color-filter-item-bar-bg);
+    background-color: var(--color-neutral-subtle);
   }
 }
diff --git a/src/navigation/menu.scss b/src/navigation/menu.scss
index a48976ce45..7a0ede8ae4 100644
--- a/src/navigation/menu.scss
+++ b/src/navigation/menu.scss
@@ -5,8 +5,8 @@
 .menu {
   margin-bottom: $spacer-3;
   list-style: none;
-  background-color: var(--color-bg-primary);
-  border: $border-width $border-style var(--color-border-primary);
+  background-color: var(--color-canvas-default);
+  border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
 }
 
@@ -14,8 +14,8 @@
   position: relative;
   display: block;
   padding: $spacer-2 $spacer-3;
-  color: var(--color-text-primary);
-  border-bottom: $border-width $border-style var(--color-border-secondary);
+  color: var(--color-fg-default);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   &:first-child {
     border-top: 0;
@@ -36,16 +36,16 @@
   &:focus {
     z-index: 1;
     outline: none;
-    box-shadow: var(--color-state-focus-shadow);
+    box-shadow: var(--color-primer-shadow-focus);
   }
 
   &:hover {
     text-decoration: none;
-    background-color: var(--color-state-hover-secondary-bg);
+    background-color: var(--color-neutral-subtle);
   }
 
   &:active {
-    background-color: var(--color-bg-secondary);
+    background-color: var(--color-canvas-subtle);
   }
 
   &.selected,
@@ -61,14 +61,14 @@
       left: 0;
       width: 2px;
       content: "";
-      background-color: var(--color-menu-border-active);
+      background-color: var(--color-primer-border-active);
     }
   }
 
   .octicon {
     width: 16px;
     margin-right: $spacer-2;
-    color: var(--color-icon-tertiary);
+    color: var(--color-fg-muted);
     text-align: center;
   }
 
@@ -79,7 +79,7 @@
 
   .menu-warning {
     float: right;
-    color: var(--color-icon-warning);
+    color: var(--color-attention-fg);
   }
 
   .avatar {
@@ -89,7 +89,7 @@
 
   &.alert {
     .Counter {
-      color: var(--color-text-danger);
+      color: var(--color-danger-fg);
     }
   }
 }
@@ -101,8 +101,8 @@
   margin-bottom: 0;
   font-size: inherit;
   font-weight: $font-weight-bold;
-  color: var(--color-menu-heading-text);
-  border-bottom: $border-width $border-style var(--color-border-secondary);
+  color: var(--color-fg-default);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   &:hover {
     text-decoration: none;
diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss
index d2108fc5fa..fe0595ffcd 100644
--- a/src/navigation/sidenav.scss
+++ b/src/navigation/sidenav.scss
@@ -3,7 +3,7 @@
 // A vertical list of navigational links, typically used on the left side of a page.
 
 .SideNav {
-  background-color: var(--color-bg-secondary);
+  background-color: var(--color-canvas-subtle);
 }
 
 .SideNav-item {
@@ -12,11 +12,11 @@
   width: 100%;
   // stylelint-disable-next-line primer/spacing
   padding: 12px $spacer-3;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
   text-align: left;
   background-color: transparent;
   border: 0;
-  border-top: $border-width $border-style var(--color-border-secondary);
+  border-top: $border-width $border-style var(--color-border-muted);
 
   &:first-child {
     border-top: 0;
@@ -25,7 +25,7 @@
   &:last-child {
     // makes sure there is a "bottom border" in case the list is not long enough
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 $border-width 0 var(--color-border-primary);
+    box-shadow: 0 $border-width 0 var(--color-border-default);
   }
 
   // Bar on the left
@@ -46,17 +46,17 @@
 .SideNav-item:focus {
   z-index: 1;
   outline: none;
-  box-shadow: var(--color-state-focus-shadow);
+  box-shadow: var(--color-primer-shadow-focus);
 }
 
 .SideNav-item:hover {
   text-decoration: none;
-  background-color: var(--color-state-hover-secondary-bg);
+  background-color: var(--color-neutral-subtle);
   outline: none;
 }
 
 .SideNav-item:active {
-  background-color: var(--color-bg-secondary);
+  background-color: var(--color-canvas-subtle);
 }
 
 .SideNav-item[aria-current]:not([aria-current=false]),
@@ -65,7 +65,7 @@
 
   // Bar on the left
   &::before {
-    background-color: var(--color-sidenav-border-active);
+    background-color: var(--color-primer-border-active);
   }
 }
 
@@ -76,7 +76,7 @@
 .SideNav-icon {
   width: 16px;
   margin-right: $spacer-2;
-  color: var(--color-text-tertiary);
+  color: var(--color-fg-muted);
 }
 
 // Sub Nav
@@ -88,7 +88,7 @@
   display: block;
   width: 100%;
   padding: $spacer-1 0;
-  color: var(--color-text-link);
+  color: var(--color-accent-fg);
   text-align: left;
   background-color: transparent;
   border: 0;
@@ -96,7 +96,7 @@
 
 .SideNav-subItem:hover,
 .SideNav-subItem:focus {
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
   text-decoration: none;
   outline: none;
 }
@@ -104,5 +104,5 @@
 .SideNav-subItem[aria-current]:not([aria-current=false]),
 .SideNav-subItem[aria-selected="true"] {
   font-weight: $font-weight-semibold;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
 }
diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss
index e9a655bc7c..1f83a4a48b 100644
--- a/src/navigation/subnav.scss
+++ b/src/navigation/subnav.scss
@@ -10,7 +10,7 @@
 .subnav-bordered {
   // stylelint-disable-next-line primer/spacing
   padding-bottom: 20px;
-  border-bottom: $border-width $border-style var(--color-border-secondary);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 }
 
 .subnav-flush {
@@ -25,8 +25,8 @@
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: var(--color-text-primary);
-  border: $border-width $border-style var(--color-border-primary);
+  color: var(--color-fg-default);
+  border: $border-width $border-style var(--color-border-default);
 
   + .subnav-item {
     // stylelint-disable-next-line primer/spacing
@@ -36,16 +36,16 @@
   &:hover,
   &:focus {
     text-decoration: none;
-    background-color: var(--color-bg-tertiary);
+    background-color: var(--color-canvas-subtle);
   }
 
   &.selected,
   &[aria-selected=true],
   &[aria-current]:not([aria-current=false]) {
     z-index: 2;
-    color: var(--color-state-selected-primary-text);
-    background-color: var(--color-state-selected-primary-bg);
-    border-color: var(--color-state-selected-primary-border);
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
+    border-color: var(--color-accent-emphasis);
   }
 
   &:first-child {
@@ -68,7 +68,7 @@
 .subnav-search-input {
   width: 320px;
   padding-left: $spacer-5;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
 }
 
 .subnav-search-input-wide {
@@ -80,7 +80,7 @@
   top: 9px;
   left: 8px;
   display: block;
-  color: var(--color-icon-tertiary);
+  color: var(--color-fg-muted);
   text-align: center;
   pointer-events: none;
 }
diff --git a/src/navigation/tabnav.scss b/src/navigation/tabnav.scss
index 1d4291dd26..caf2c0b00f 100644
--- a/src/navigation/tabnav.scss
+++ b/src/navigation/tabnav.scss
@@ -3,7 +3,7 @@
 .tabnav {
   margin-top: 0;
   margin-bottom: $spacer-3;
-  border-bottom: $border-width $border-style var(--color-border-primary);
+  border-bottom: $border-width $border-style var(--color-border-default);
 }
 
 .tabnav-tabs {
@@ -20,7 +20,7 @@
   font-size: $h5-size;
   // stylelint-disable-next-line primer/typography
   line-height: 23px;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
   text-decoration: none;
   background-color: transparent;
   border: $border-width $border-style transparent;
@@ -30,9 +30,9 @@
   &.selected,
   &[aria-selected=true],
   &[aria-current]:not([aria-current=false]) {
-    color: var(--color-text-primary);
-    background-color: var(--color-bg-canvas); // cover bottom border
-    border-color: var(--color-border-primary);
+    color: var(--color-fg-default);
+    background-color: var(--color-canvas-default); // cover bottom border
+    border-color: var(--color-border-default);
     border-radius: $border-radius $border-radius 0 0;
 
     .octicon {
@@ -42,18 +42,18 @@
 
   &:hover,
   &:focus {
-    color: var(--color-text-primary);
+    color: var(--color-fg-default);
     text-decoration: none;
     transition-duration: 0.1s;
   }
 
   &:active {
-    color: var(--color-text-tertiary);
+    color: var(--color-fg-muted);
   }
 
   .octicon {
     margin-right: $spacer-1;
-    color: var(--color-icon-tertiary);
+    color: var(--color-fg-muted);
   }
 
   .Counter {
@@ -74,7 +74,7 @@
   // stylelint-disable-next-line primer/spacing
   margin-left: 10px;
   font-size: $font-size-small;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
 
   > .octicon {
     // stylelint-disable-next-line primer/spacing
@@ -85,7 +85,7 @@
 // When tabnav-extra are anchors
 // stylelint-disable-next-line selector-no-qualifying-type
 a.tabnav-extra:hover {
-  color: var(--color-text-link);
+  color: var(--color-accent-fg);
   text-decoration: none;
 }
 
diff --git a/src/navigation/underline-nav.scss b/src/navigation/underline-nav.scss
index 0cbb59908d..bac88d8aa4 100644
--- a/src/navigation/underline-nav.scss
+++ b/src/navigation/underline-nav.scss
@@ -3,7 +3,7 @@
   overflow-x: auto;
   overflow-y: hidden;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-secondary);
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
   justify-content: space-between;
 }
 
@@ -16,7 +16,7 @@
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 30px;
-  color: var(--color-underlinenav-text);
+  color: var(--color-fg-default);
   text-align: center;
   white-space: nowrap;
   background-color: transparent;
@@ -26,9 +26,9 @@
 
   &:hover,
   &:focus {
-    color: var(--color-underlinenav-text-hover);
+    color: var(--color-fg-default);
     text-decoration: none;
-    border-bottom-color: var(--color-border-tertiary);
+    border-bottom-color: var(--color-neutral-muted);
     outline: 1px dotted transparent; // Support Firefox custom colors
     outline-offset: -1px;
     transition: border-bottom-color 0.12s ease-out;
@@ -38,13 +38,13 @@
   &[role=tab][aria-selected=true],
   &[aria-current]:not([aria-current=false]) {
     font-weight: $font-weight-bold;
-    color: var(--color-underlinenav-text-active);
-    border-bottom-color: var(--color-underlinenav-border-active);
+    color: var(--color-fg-default);
+    border-bottom-color: var(--color-primer-border-active);
     outline: 1px dotted transparent; // Support Firefox custom colors
     outline-offset: -1px;
 
     .UnderlineNav-octicon {
-      color: var(--color-text-tertiary);
+      color: var(--color-fg-muted);
     }
   }
 }
@@ -67,17 +67,17 @@
 
 .UnderlineNav-octicon {
   margin-right: $spacer-1;
-  color: var(--color-underlinenav-icon);
+  color: var(--color-fg-subtle);
 }
 
 .UnderlineNav .Counter {
   margin-left: $spacer-1;
-  color: var(--color-underlinenav-counter-text);
-  background-color: var(--color-underlinenav-counter-bg);
+  color: var(--color-fg-default);
+  background-color: var(--color-neutral-muted);
 
   &--primary {
-    color: var(--color-counter-primary-text);
-    background-color: var(--color-counter-primary-bg);
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-neutral-emphasis);
   }
 }
 
diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss
index d19e6275a2..13f259b606 100644
--- a/src/pagination/pagination.scss
+++ b/src/pagination/pagination.scss
@@ -11,7 +11,7 @@
     font-style: normal;
     // stylelint-disable-next-line primer/typography
     line-height: 20px;
-    color: var(--color-text-primary);
+    color: var(--color-fg-default);
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
@@ -24,27 +24,27 @@
     &:hover,
     &:focus {
       text-decoration: none;
-      border-color: var(--color-border-primary);
+      border-color: var(--color-border-default);
       outline: 0;
       transition-duration: 0.1s;
     }
 
     &:active {
-      border-color: var(--color-border-secondary);
+      border-color: var(--color-border-muted);
       transition: none;
     }
   }
 
   .previous_page,
   .next_page {
-    color: var(--color-text-link);
+    color: var(--color-accent-fg);
   }
 
   .current,
   .current:hover,
   [aria-current]:not([aria-current=false]) {
-    color: var(--color-state-selected-primary-text);
-    background-color: var(--color-state-selected-primary-bg);
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
     border-color: transparent;
   }
 
@@ -54,7 +54,7 @@
   .gap:hover,
   .disabled:hover,
   [aria-disabled=true]:hover {
-    color: var(--color-text-disabled);
+    color: var(--color-fg-muted);
     cursor: default;
     border-color: transparent;
   }
diff --git a/src/popover/popover.scss b/src/popover/popover.scss
index 646b67c672..00b9bd56f7 100644
--- a/src/popover/popover.scss
+++ b/src/popover/popover.scss
@@ -24,7 +24,7 @@
     margin-left: -9px;
     // stylelint-disable-next-line primer/borders
     border: $spacer-2 $border-style transparent;
-    border-bottom-color: var(--color-border-primary);
+    border-bottom-color: var(--color-border-default);
   }
 
   &::after {
@@ -32,12 +32,12 @@
     margin-left: -$spacer-2;
     // stylelint-disable-next-line primer/borders
     border: 7px $border-style transparent;
-    border-bottom-color: var(--color-bg-overlay);
+    border-bottom-color: var(--color-canvas-overlay);
   }
 
   // TODO: Refactor so that .Popover is not dependant on .Box
   &.Box {
-    background-color: var(--color-bg-overlay);
+    background-color: var(--color-canvas-overlay);
   }
 }
 
@@ -53,12 +53,12 @@
 
   &::before {
     bottom: -$spacer-3;
-    border-top-color: var(--color-border-primary);
+    border-top-color: var(--color-border-default);
   }
 
   &::after {
     bottom: -14px;
-    border-top-color: var(--color-bg-overlay);
+    border-top-color: var(--color-canvas-overlay);
   }
 }
 
@@ -131,12 +131,12 @@
 .Popover-message--right-bottom {
   &::before {
     right: -$spacer-3;
-    border-left-color: var(--color-border-primary);
+    border-left-color: var(--color-border-default);
   }
 
   &::after {
     right: -14px;
-    border-left-color: var(--color-bg-overlay);
+    border-left-color: var(--color-canvas-overlay);
   }
 }
 
@@ -146,12 +146,12 @@
 .Popover-message--left-bottom {
   &::before {
     left: -$spacer-3;
-    border-right-color: var(--color-border-primary);
+    border-right-color: var(--color-border-default);
   }
 
   &::after {
     left: -14px;
-    border-right-color: var(--color-bg-overlay);
+    border-right-color: var(--color-canvas-overlay);
   }
 }
 
diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss
index a6f7279549..0f41b5ad7e 100644
--- a/src/select-menu/select-menu.scss
+++ b/src/select-menu/select-menu.scss
@@ -41,7 +41,7 @@ $SelectMenu-max-height: 480px !default;
   left: 0;
   pointer-events: none;
   content: "";
-  background-color: var(--color-select-menu-backdrop-bg);
+  background-color: var(--color-primer-canvas-backdrop);
 
   @include breakpoint(sm) {
     display: none;
@@ -61,11 +61,11 @@ $SelectMenu-max-height: 480px !default;
   overflow: hidden; // Enables border radius on scrollable child elements
   pointer-events: auto;
   flex-direction: column;
-  background-color: var(--color-bg-overlay);
+  background-color: var(--color-canvas-overlay);
   border: $border-width $border-style var(--color-select-menu-backdrop-border);
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius * 2;
-  box-shadow: var(--color-select-menu-shadow);
+  box-shadow: var(--color-shadow-large);
   animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
 
   @keyframes SelectMenu-modal-animation {
@@ -88,7 +88,7 @@ $SelectMenu-max-height: 480px !default;
     max-height: $SelectMenu-max-height;
     margin: $spacer-2 0 $spacer-3 0;
     font-size: $font-size-small;
-    border-color: var(--color-border-primary);
+    border-color: var(--color-border-default);
     border-radius: $border-radius;
     box-shadow: var(--color-shadow-large);
     animation-name: SelectMenu-modal-animation--sm;
@@ -104,7 +104,7 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-3;
   flex: none; // fixes header from getting squeezed in Safari iOS
   align-items: center;
-  border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -126,7 +126,7 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-3;
   margin: -$spacer-3;
   line-height: 1;
-  color: var(--color-icon-tertiary);
+  color: var(--color-fg-muted);
   background-color: transparent;
   border: 0;
 
@@ -144,7 +144,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-filter {
   padding: $spacer-3;
   margin: 0;
-  border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   @include breakpoint(sm) {
     padding: $spacer-2;
@@ -173,7 +173,7 @@ $SelectMenu-max-height: 480px !default;
   flex: auto;
   overflow-x: hidden;
   overflow-y: auto;
-  background-color: var(--color-bg-overlay);
+  background-color: var(--color-canvas-overlay);
   -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
 }
 
@@ -187,12 +187,12 @@ $SelectMenu-max-height: 480px !default;
   width: 100%;
   padding: $spacer-3;
   overflow: hidden;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
   text-align: left;
   cursor: pointer;
-  background-color: var(--color-bg-overlay);
+  background-color: var(--color-canvas-overlay);
   border: 0;
-  border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -234,7 +234,7 @@ $SelectMenu-max-height: 480px !default;
   overflow-x: auto;
   overflow-y: hidden;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-select-menu-border-secondary);
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
   -webkit-overflow-scrolling: touch;
 
   // Hide scrollbar so it doesn't cover the text
@@ -252,12 +252,12 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-2 $spacer-3;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
-  color: var(--color-text-tertiary);
+  color: var(--color-fg-muted);
   text-align: center;
   background-color: transparent;
   border: 0;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-select-menu-border-secondary);
+  box-shadow: inset 0 -1px 0 var(--color-border-muted);
 
   @include breakpoint(sm) {
     flex: none;
@@ -270,14 +270,14 @@ $SelectMenu-max-height: 480px !default;
 
   &[aria-selected="true"] {
     z-index: 1; // Keeps box-shadow visible when hovering
-    color: var(--color-text-primary);
+    color: var(--color-fg-default);
     cursor: default;
-    background-color: var(--color-bg-overlay);
+    background-color: var(--color-canvas-overlay);
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 1px var(--color-select-menu-border-secondary);
+    box-shadow: 0 0 0 1px var(--color-border-muted);
 
     @include breakpoint(sm) {
-      border-color: var(--color-select-menu-border-secondary);
+      border-color: var(--color-border-muted);
       box-shadow: none;
     }
   }
@@ -291,8 +291,8 @@ $SelectMenu-max-height: 480px !default;
   // stylelint-disable-next-line primer/spacing
   padding: 7px $spacer-3;
   text-align: center;
-  background-color: var(--color-bg-overlay);
-  border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
+  background-color: var(--color-canvas-overlay);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 }
 
 // Blankslate and Loading
@@ -303,7 +303,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-loading {
   padding: $spacer-4 $spacer-3;
   text-align: center;
-  background-color: var(--color-bg-overlay);
+  background-color: var(--color-canvas-overlay);
 }
 
 // Divider
@@ -315,13 +315,13 @@ $SelectMenu-max-height: 480px !default;
   margin: 0;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
-  color: var(--color-text-tertiary);
-  background-color: var(--color-bg-tertiary);
-  border-bottom: $border-width $border-style var(--color-select-menu-border-secondary);
+  color: var(--color-fg-muted);
+  background-color: var(--color-canvas-subtle);
+  border-bottom: $border-width $border-style var(--color-border-muted);
 
   // Borderless
   .SelectMenu-list--borderless & {
-    border-top: $border-width $border-style var(--color-select-menu-border-secondary);
+    border-top: $border-width $border-style var(--color-border-muted);
 
     &:empty {
       padding: 0;
@@ -338,9 +338,9 @@ $SelectMenu-max-height: 480px !default;
   z-index: 0; // Avoid top border from getting covered by the negative margin of the list
   padding: $spacer-2 $spacer-3;
   font-size: $font-size-small;
-  color: var(--color-text-tertiary);
+  color: var(--color-fg-muted);
   text-align: center;
-  border-top: $border-width $border-style var(--color-select-menu-border-secondary);
+  border-top: $border-width $border-style var(--color-border-muted);
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -388,7 +388,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-item[aria-checked=true] {
   font-weight: $font-weight-semibold;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
 
   .SelectMenu-icon--check {
     visibility: visible;
@@ -403,7 +403,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-item:disabled,
 .SelectMenu-item[aria-disabled=true] {
-  color: var(--color-text-disabled);
+  color: var(--color-fg-muted);
   pointer-events: none;
 }
 
@@ -414,20 +414,20 @@ $SelectMenu-max-height: 480px !default;
 @media (hover: hover) {
   body:not(.intent-mouse) .SelectMenu-closeButton:focus,
   .SelectMenu-closeButton:hover {
-    color: var(--color-text-primary);
+    color: var(--color-fg-default);
   }
 
   .SelectMenu-closeButton:active {
-    color: var(--color-text-secondary);
+    color: var(--color-fg-muted);
   }
 
   body:not(.intent-mouse) .SelectMenu-item:focus,
   .SelectMenu-item:hover {
-    background-color: var(--color-state-hover-secondary-bg);
+    background-color: var(--color-neutral-subtle);
   }
 
   .SelectMenu-item:active {
-    background-color: var(--color-bg-secondary);
+    background-color: var(--color-canvas-subtle);
   }
 
   body:not(.intent-mouse) .SelectMenu-tab:focus {
@@ -435,12 +435,12 @@ $SelectMenu-max-height: 480px !default;
   }
 
   .SelectMenu-tab:hover {
-    color: var(--color-text-primary);
+    color: var(--color-fg-default);
   }
 
   .SelectMenu-tab:not([aria-selected="true"]):active {
-    color: var(--color-text-primary);
-    background-color: var(--color-bg-tertiary);
+    color: var(--color-fg-default);
+    background-color: var(--color-canvas-subtle);
   }
 }
 
@@ -452,7 +452,7 @@ $SelectMenu-max-height: 480px !default;
   // Android
   .SelectMenu-item:focus,
   .SelectMenu-item:active {
-    background-color: var(--color-bg-secondary);
+    background-color: var(--color-canvas-subtle);
   }
 
   // iOS Safari
diff --git a/src/subhead/subhead.scss b/src/subhead/subhead.scss
index 871e72bf89..679fab374d 100644
--- a/src/subhead/subhead.scss
+++ b/src/subhead/subhead.scss
@@ -3,7 +3,7 @@
   display: flex;
   padding-bottom: $spacer-2;
   margin-bottom: $spacer-3;
-  border-bottom: $border-width $border-style var(--color-border-secondary);
+  border-bottom: $border-width $border-style var(--color-border-muted);
   flex-flow: row wrap;
 }
 
@@ -22,13 +22,13 @@
 // Make the text bold and red for dangerous content
 .Subhead-heading--danger {
   font-weight: $font-weight-bold;
-  color: var(--color-text-danger);
+  color: var(--color-danger-fg);
 }
 
 // One-liner of supporting text
 .Subhead-description {
   font-size: $body-font-size;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
   flex: 1 100%;
 }
 
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index e4641ab286..c7e54be256 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -16,7 +16,7 @@
 
   &::after {
     margin-left: 1px;
-    background-color: var(--color-bg-primary);
+    background-color: var(--color-canvas-default);
     background-image: linear-gradient($background, $background);
   }
 
diff --git a/src/timeline/timeline-item.scss b/src/timeline/timeline-item.scss
index c54d8261e5..d73c637b9d 100644
--- a/src/timeline/timeline-item.scss
+++ b/src/timeline/timeline-item.scss
@@ -13,12 +13,13 @@
     display: block;
     width: 2px;
     content: "";
-    background-color: var(--color-border-secondary);
+    background-color: var(--color-border-muted);
   }
 
   &:target .TimelineItem-badge {
-    border-color: var(--color-timeline-target-badge-border);
-    box-shadow: 0 0 0.2em var(--color-timeline-target-badge-shadow);
+    border-color: var(--color-accent-emphasis);
+    // stylelint-disable-next-line primer/box-shadow
+    box-shadow: 0 0 0.2em var(--color-accent-muted);
   }
 }
 
@@ -30,11 +31,11 @@
   height: $spacer-5;
   margin-right: $spacer-2;
   margin-left: -$spacer-3 + 1;
-  color: var(--color-icon-secondary);
+  color: var(--color-fg-muted);
   align-items: center;
   background-color: var(--color-timeline-badge-bg);
   // stylelint-disable-next-line primer/borders
-  border: 2px $border-style var(--color-bg-canvas);
+  border: 2px $border-style var(--color-canvas-default);
   border-radius: 50%;
   justify-content: center;
   flex-shrink: 0;
@@ -42,7 +43,7 @@
   &--success {
     color: var(--color-fg-on-emphasis, var(--color-btn-primary-text)); // TODO remove V1 fallback
     background-color: var(--color-success-emphasis, var(--color-btn-primary-bg)); // TODO remove V1 fallback
-    border: $border-width $border-style var(--color-timeline-badge-success-border);
+    border: $border-width $border-style transparent;
   }
 }
 
@@ -50,7 +51,7 @@
   min-width: 0;
   max-width: 100%;
   margin-top: $spacer-1;
-  color: var(--color-timeline-text);
+  color: var(--color-fg-muted);
   flex: auto;
 }
 
@@ -68,10 +69,10 @@
   margin-bottom: -$spacer-3;
   // stylelint-disable-next-line primer/spacing
   margin-left: -($spacer-6 + $spacer-3);
-  background-color: var(--color-bg-canvas);
+  background-color: var(--color-canvas-default);
   border: 0;
   // stylelint-disable-next-line primer/borders
-  border-top: 4px $border-style var(--color-border-primary);
+  border-top: 4px $border-style var(--color-border-default);
 }
 
 .TimelineItem--condensed {
@@ -87,8 +88,8 @@
     height: $spacer-3;
     margin-top: $spacer-2;
     margin-bottom: $spacer-2;
-    color: var(--color-icon-secondary);
-    background-color: var(--color-bg-canvas);
+    color: var(--color-fg-muted);
+    background-color: var(--color-canvas-default);
     border: 0;
   }
 }
diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss
index 029132240f..fa752df417 100644
--- a/src/toasts/toasts.scss
+++ b/src/toasts/toasts.scss
@@ -3,10 +3,10 @@
 .Toast {
   display: flex;
   margin: $spacer-2;
-  color: var(--color-toast-text);
-  background-color: var(--color-toast-bg);
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
   border-radius: $border-radius;
-  box-shadow: inset 0 0 0 1px var(--color-toast-border), var(--color-toast-shadow);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
 
   @include breakpoint(sm) {
     width: max-content;
@@ -21,9 +21,9 @@
   justify-content: center;
   width: $spacer-3 * 3;
   flex-shrink: 0;
-  color: var(--color-toast-icon);
-  background-color: var(--color-toast-icon-bg);
-  border: $border-width $border-style var(--color-toast-icon-border);
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-accent-emphasis);
+  border: $border-width $border-style transparent;
   border-right: 0;
   border-top-left-radius: inherit;
   border-bottom-left-radius: inherit;
@@ -54,46 +54,42 @@
 // Modifier
 
 .Toast--loading {
-  color: var(--color-toast-loading-text);
-  box-shadow: inset 0 0 0 1px var(--color-toast-loading-border), var(--color-toast-shadow);
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
 
   .Toast-icon {
-    color: var(--color-toast-loading-icon);
-    background-color: var(--color-toast-loading-icon-bg);
-    border-color: var(--color-toast-loading-icon-border);
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-neutral-emphasis);
   }
 }
 
 .Toast--error {
-  color: var(--color-toast-danger-text);
-  box-shadow: inset 0 0 0 1px var(--color-toast-danger-border), var(--color-toast-shadow);
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
 
   .Toast-icon {
-    color: var(--color-toast-danger-icon);
-    background-color: var(--color-toast-danger-icon-bg);
-    border-color: var(--color-toast-danger-icon-border);
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-danger-emphasis);
   }
 }
 
 .Toast--warning {
-  color: var(--color-toast-warning-text);
-  box-shadow: inset 0 0 0 1px var(--color-toast-warning-border), var(--color-toast-shadow);
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
 
   .Toast-icon {
-    color: var(--color-toast-warning-icon);
-    background-color: var(--color-toast-warning-icon-bg);
-    border-color: var(--color-toast-warning-icon-border);
+    color: var(--color-fg-default);
+    background-color: var(--color-attention-emphasis);
   }
 }
 
 .Toast--success {
-  color: var(--color-toast-success-text);
-  box-shadow: inset 0 0 0 1px var(--color-toast-success-border), var(--color-toast-shadow);
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
 
   .Toast-icon {
-    color: var(--color-toast-success-icon);
-    background-color: var(--color-toast-success-icon-bg);
-    border-color: var(--color-toast-success-icon-border);
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-success-emphasis);
   }
 }
 
diff --git a/src/tooltips/tooltips.scss b/src/tooltips/tooltips.scss
index 0f2a8a03c4..187077aeb1 100644
--- a/src/tooltips/tooltips.scss
+++ b/src/tooltips/tooltips.scss
@@ -10,7 +10,7 @@
   padding: $em-spacer-5 $em-spacer-6;
   font: normal normal 11px/1.5 $body-font;
   -webkit-font-smoothing: subpixel-antialiased;
-  color: var(--color-tooltip-text);
+  color: var(--color-fg-on-emphasis);
   text-align: center;
   text-decoration: none;
   text-shadow: none;
@@ -20,7 +20,7 @@
   white-space: pre;
   pointer-events: none;
   content: attr(aria-label);
-  background: var(--color-tooltip-bg);
+  background: var(--color-neutral-emphasis-plus);
   border-radius: $border-radius;
   opacity: 0;
 }
@@ -32,7 +32,7 @@
   display: none;
   width: 0;
   height: 0;
-  color: var(--color-tooltip-bg);
+  color: var(--color-neutral-emphasis-plus);
   pointer-events: none;
   content: "";
   // stylelint-disable-next-line primer/borders
@@ -101,7 +101,7 @@
     bottom: -7px;
     // stylelint-disable-next-line primer/spacing
     margin-right: -6px;
-    border-bottom-color: var(--color-tooltip-bg);
+    border-bottom-color: var(--color-neutral-emphasis-plus);
   }
 }
 
@@ -134,7 +134,7 @@
     bottom: auto;
     // stylelint-disable-next-line primer/spacing
     margin-right: -6px;
-    border-top-color: var(--color-tooltip-bg);
+    border-top-color: var(--color-neutral-emphasis-plus);
   }
 }
 
@@ -172,7 +172,7 @@
     left: -7px;
     // stylelint-disable-next-line primer/spacing
     margin-top: -6px;
-    border-left-color: var(--color-tooltip-bg);
+    border-left-color: var(--color-neutral-emphasis-plus);
   }
 }
 
@@ -192,7 +192,7 @@
     bottom: 50%;
     // stylelint-disable-next-line primer/spacing
     margin-top: -6px;
-    border-right-color: var(--color-tooltip-bg);
+    border-right-color: var(--color-neutral-emphasis-plus);
   }
 }
 
diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss
index 0ed792cb91..0e5e50f3d7 100644
--- a/src/utilities/colors.scss
+++ b/src/utilities/colors.scss
@@ -1,51 +1,51 @@
 // stylelint-disable block-opening-brace-space-before
 
 // Text colors
-.color-text-primary   { color: var(--color-text-primary) !important; }
-.color-text-secondary { color: var(--color-text-secondary) !important; }
-.color-text-tertiary  { color: var(--color-text-tertiary) !important; }
-.color-text-link      { color: var(--color-text-link) !important; }
-.color-text-success   { color: var(--color-text-success) !important; }
-.color-text-warning   { color: var(--color-text-warning) !important; }
-.color-text-danger    { color: var(--color-text-danger) !important; }
-.color-text-inverse   { color: var(--color-text-inverse) !important; }
-.color-text-white     { color: var(--color-text-white) !important; }
+.color-text-primary   { color: var(--color-fg-default) !important; }
+.color-text-secondary { color: var(--color-fg-muted) !important; }
+.color-text-tertiary  { color: var(--color-fg-muted) !important; }
+.color-text-link      { color: var(--color-accent-fg) !important; }
+.color-text-success   { color: var(--color-success-fg) !important; }
+.color-text-warning   { color: var(--color-attention-fg) !important; }
+.color-text-danger    { color: var(--color-danger-fg) !important; }
+.color-text-inverse   { color: var(--color-fg-on-emphasis) !important; }
+.color-text-white     { color: var(--color-scale-white) !important; }
 
 // Icon colors
-.color-icon-primary   { color: var(--color-icon-primary) !important; }
-.color-icon-secondary { color: var(--color-icon-secondary) !important; }
-.color-icon-tertiary  { color: var(--color-icon-tertiary) !important; }
-.color-icon-info      { color: var(--color-icon-info) !important; }
-.color-icon-danger    { color: var(--color-icon-danger) !important; }
-.color-icon-success   { color: var(--color-icon-success) !important; }
-.color-icon-warning   { color: var(--color-icon-warning) !important; }
+.color-icon-primary   { color: var(--color-fg-default) !important; }
+.color-icon-secondary { color: var(--color-fg-muted) !important; }
+.color-icon-tertiary  { color: var(--color-fg-muted) !important; }
+.color-icon-info      { color: var(--color-accent-fg) !important; }
+.color-icon-danger    { color: var(--color-danger-fg) !important; }
+.color-icon-success   { color: var(--color-success-fg) !important; }
+.color-icon-warning   { color: var(--color-attention-fg) !important; }
 
 // Border colors
-.color-border-primary   { border-color: var(--color-border-primary) !important; }
-.color-border-secondary { border-color: var(--color-border-secondary) !important; }
-.color-border-tertiary  { border-color: var(--color-border-tertiary) !important; }
-.color-border-inverse   { border-color: var(--color-border-inverse) !important; }
-.color-border-info      { border-color: var(--color-border-info) !important; }
-.color-border-success   { border-color: var(--color-border-success) !important; }
-.color-border-danger    { border-color: var(--color-border-danger) !important; }
-.color-border-warning   { border-color: var(--color-border-warning) !important; }
+.color-border-primary   { border-color: var(--color-border-default) !important; }
+.color-border-secondary { border-color: var(--color-border-muted) !important; }
+.color-border-tertiary  { border-color: var(--color-neutral-muted) !important; }
+.color-border-inverse   { border-color: var(--color-fg-on-emphasis) !important; }
+.color-border-info      { border-color: var(--color-accent-emphasis) !important; }
+.color-border-success   { border-color: var(--color-success-emphasis) !important; }
+.color-border-danger    { border-color: var(--color-danger-emphasis) !important; }
+.color-border-warning   { border-color: var(--color-attention-emphasis) !important; }
 
 // Background colors
-.color-bg-canvas          { background-color: var(--color-bg-canvas) !important; }
-.color-bg-canvas-inverse  { background-color: var(--color-bg-canvas-inverse) !important; }
-.color-bg-canvas-inset    { background-color: var(--color-bg-canvas-inset) !important; }
-.color-bg-primary         { background-color: var(--color-bg-primary) !important; }
-.color-bg-secondary       { background-color: var(--color-bg-secondary) !important; }
-.color-bg-tertiary        { background-color: var(--color-bg-tertiary) !important; }
-.color-bg-overlay         { background-color: var(--color-bg-overlay) !important; }
-.color-bg-info            { background-color: var(--color-bg-info) !important; }
-.color-bg-info-inverse    { background-color: var(--color-bg-info-inverse) !important; }
-.color-bg-danger          { background-color: var(--color-bg-danger) !important; }
-.color-bg-danger-inverse  { background-color: var(--color-bg-danger-inverse) !important; }
-.color-bg-success         { background-color: var(--color-bg-success) !important; }
-.color-bg-success-inverse { background-color: var(--color-bg-success-inverse) !important; }
-.color-bg-warning         { background-color: var(--color-bg-warning) !important; }
-.color-bg-warning-inverse { background-color: var(--color-bg-warning-inverse) !important; }
+.color-bg-canvas          { background-color: var(--color-canvas-default) !important; }
+.color-bg-canvas-inverse  { background-color: var(--color-neutral-emphasis) !important; }
+.color-bg-canvas-inset    { background-color: var(--color-canvas-inset) !important; }
+.color-bg-primary         { background-color: var(--color-canvas-default) !important; }
+.color-bg-secondary       { background-color: var(--color-canvas-subtle) !important; }
+.color-bg-tertiary        { background-color: var(--color-canvas-subtle) !important; }
+.color-bg-overlay         { background-color: var(--color-canvas-overlay) !important; }
+.color-bg-info            { background-color: var(--color-accent-subtle) !important; }
+.color-bg-info-inverse    { background-color: var(--color-accent-emphasis) !important; }
+.color-bg-danger          { background-color: var(--color-danger-subtle) !important; }
+.color-bg-danger-inverse  { background-color: var(--color-danger-emphasis) !important; }
+.color-bg-success         { background-color: var(--color-success-subtle) !important; }
+.color-bg-success-inverse { background-color: var(--color-success-emphasis) !important; }
+.color-bg-warning         { background-color: var(--color-attention-subtle) !important; }
+.color-bg-warning-inverse { background-color: var(--color-attention-emphasis) !important; }
 
 // Inherit
 .text-inherit { color: inherit !important; }
diff --git a/src/utilities/details.scss b/src/utilities/details.scss
index f4cfe11fb4..54f2728496 100644
--- a/src/utilities/details.scss
+++ b/src/utilities/details.scss
@@ -15,7 +15,7 @@
 
 .details-overlay-dark[open] > summary::before {
   z-index: 99;
-  background: var(--color-bg-backdrop);
+  background: var(--color-primer-canvas-backdrop);
 }
 
 .details-reset {
diff --git a/stylelint.config.cjs b/stylelint.config.cjs
index 5383bdb8b6..3301ecff45 100644
--- a/stylelint.config.cjs
+++ b/stylelint.config.cjs
@@ -14,7 +14,6 @@ module.exports = {
     'primer/typography': true,
     'primer/box-shadow': true,
     'primer-css/TODO': [true, {currentVersion, severity: 'error'}],
-    'primer/no-undefined-vars': [true, {files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'}],
-    'primer/no-deprecated-colors': [true, {severity: 'warning'}]
+    'primer/no-undefined-vars': [true, {files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'}]
   }
 }