diff --git a/src/alerts/flash.scss b/src/alerts/flash.scss
index 0ef3a082..e2b84c39 100644
--- a/src/alerts/flash.scss
+++ b/src/alerts/flash.scss
@@ -5,7 +5,7 @@
   position: relative;
   // stylelint-disable-next-line primer/spacing
   padding: 20px $spacer-3;
-  color: var(--text-primary);
+  color: var(--color-text-primary);
   border-style: $border-style;
   border-width: $border-width;
   border-radius: $border-radius;
@@ -66,48 +66,48 @@
 
 .flash {
   // stylelint-disable-next-line primer/colors
-  background-color: var(--alert-bg);
+  background-color: var(--color-alert-bg);
   // stylelint-disable-next-line primer/borders
-  border-color: var(--alert-border);
+  border-color: var(--color-alert-border);
 
   .octicon {
     // stylelint-disable-next-line primer/colors
-    color: var(--alert-icon);
+    color: var(--color-alert-icon);
   }
 }
 
 .flash-warn {
   // stylelint-disable-next-line primer/colors
-  background-color: var(--alert-warn-bg);
+  background-color: var(--color-alert-warn-bg);
   // stylelint-disable-next-line primer/borders
-  border-color: var(--alert-warn-border);
+  border-color: var(--color-alert-warn-border);
 
   .octicon {
     // stylelint-disable-next-line primer/colors
-    color: var(--alert-warn-icon);
+    color: var(--color-alert-warn-icon);
   }
 }
 
 .flash-error {
   // stylelint-disable-next-line primer/colors
-  background-color: var(--alert-error-bg);
+  background-color: var(--color-alert-error-bg);
   // stylelint-disable-next-line primer/borders
-  border-color: var(--alert-error-border);
+  border-color: var(--color-alert-error-border);
 
   .octicon {
     // stylelint-disable-next-line primer/colors
-    color: var(--alert-error-icon);
+    color: var(--color-alert-error-icon);
   }
 }
 
 .flash-success {
-  background-color: var(--alert-success-bg);
+  background-color: var(--color-alert-success-bg);
   // stylelint-disable-next-line primer/borders
-  border-color: var(--alert-success-border);
+  border-color: var(--color-alert-success-border);
 
   .octicon {
     // stylelint-disable-next-line primer/colors
-    color: var(--alert-success-icon);
+    color: var(--color-alert-success-icon);
   }
 }
 
@@ -141,5 +141,5 @@
   margin-bottom: 0.8em;
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/colors
-  background-color: var(--alert-warn-bg);
+  background-color: var(--color-alert-warn-bg);
 }
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index b2d9c8c6..f718b1e3 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -8,7 +8,7 @@
   // stylelint-disable-next-line primer/typography
   font-size: 13px;
   list-style: none;
-  background: var(--bg-canvas);
+  background: var(--color-bg-canvas);
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
   box-shadow: inset 0 0 0 1px $border-color, $box-shadow-medium;
@@ -23,22 +23,22 @@
   padding: $spacer-1 $spacer-2;
   overflow: hidden;
   font-weight: $font-weight-bold;
-  color: var(--text-primary);
+  color: var(--color-text-primary);
   text-align: left;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
-  background-color: var(--bg-canvas);
+  background-color: var(--color-bg-canvas);
   border: 0;
 
   &:hover,
   &.selected,
   &[aria-selected=true],
   &.navigation-focus {
-    color: var(--text-inverse);
+    color: var(--color-text-inverse);
     text-decoration: none;
-    background-color: var(--bg-selected);
+    background-color: var(--color-bg-selected);
 
     // Inherit color on all child elements to ensure enough contrast
     * {
diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss
index 343c5fee..76d67227 100644
--- a/src/autocomplete/suggester.scss
+++ b/src/autocomplete/suggester.scss
@@ -11,7 +11,7 @@
   margin-top: $spacer-4;
   list-style: none;
   cursor: pointer;
-  background: var(--bg-canvas);
+  background: var(--color-bg-canvas);
   border: $border;
   border-radius: $border-radius;
   box-shadow: $box-shadow-medium;
@@ -20,11 +20,11 @@
     display: block;
     padding: $spacer-1 $spacer-2;
     font-weight: $font-weight-semibold;
-    border-bottom: $border-width $border-style var(--border-primary-light);
+    border-bottom: $border-width $border-style var(--color-border-primary-light);
 
     small {
       font-weight: $font-weight-normal;
-      color: var(--text-secondary);
+      color: var(--color-text-secondary);
     }
 
     &:last-child {
@@ -41,12 +41,12 @@
     &:hover,
     &[aria-selected="true"],
     &.navigation-focus {
-      color: var(--text-inverse);
+      color: var(--color-text-inverse);
       text-decoration: none;
-      background: var(--bg-selected);
+      background: var(--color-bg-selected);
 
       small {
-        color: var(--text-inverse);
+        color: var(--color-text-inverse);
       }
     }
   }
diff --git a/src/avatars/avatar-parent-child.scss b/src/avatars/avatar-parent-child.scss
index 9370fb55..e8c140b4 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(--bg-canvas); // For transparent backgrounds
+  background-color: var(--color-bg-canvas); // For transparent backgrounds
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius-1;
   // stylelint-disable-next-line primer/box-shadow
diff --git a/src/avatars/avatar-stack.scss b/src/avatars/avatar-stack.scss
index ed41fa8f..42d2c651 100644
--- a/src/avatars/avatar-stack.scss
+++ b/src/avatars/avatar-stack.scss
@@ -21,7 +21,7 @@
 
 .AvatarStack-body {
   display: flex;
-  background: var(--bg-canvas);
+  background: var(--color-bg-canvas);
 
   .avatar {
     position: relative;
@@ -32,8 +32,8 @@
     box-sizing: content-box;
     // stylelint-disable-next-line primer/spacing
     margin-right: -11px;
-    background-color: var(--bg-canvas);
-    border-right: $border-width $border-style var(--border-white);
+    background-color: var(--color-bg-canvas);
+    border-right: $border-width $border-style var(--color-border-white);
     // stylelint-disable-next-line primer/borders
     border-radius: $border-radius-1;
     transition: margin 0.1s ease-in-out;
@@ -81,7 +81,7 @@
 .avatar.avatar-more {
   z-index: 1;
   margin-right: 0;
-  background: var(--bg-secondary);
+  background: var(--color-bg-secondary);
 
   &::before,
   &::after {
@@ -91,19 +91,19 @@
     content: "";
     // stylelint-disable-next-line primer/borders
     border-radius: 2px;
-    outline: $border-width $border-style var(--border-inverse);
+    outline: $border-width $border-style var(--color-border-inverse);
   }
 
   &::before {
     width: 17px;
     // stylelint-disable-next-line primer/colors
-    background: var(--avatar-stack-fade-more);
+    background: var(--color-avatar-stack-fade-more);
   }
 
   &::after {
     width: 14px;
     // stylelint-disable-next-line primer/colors
-    background: var(--avatar-stack-fade);
+    background: var(--color-avatar-stack-fade);
   }
 }
 
@@ -123,7 +123,7 @@
 
   .avatar.avatar-more {
     // stylelint-disable-next-line primer/colors
-    background: var(--avatar-stack-fade);
+    background: var(--color-avatar-stack-fade);
 
     &::before {
       width: 5px;
@@ -131,7 +131,7 @@
 
     &::after {
       width: 2px;
-      background: var(--bg-secondary);
+      background: var(--color-bg-secondary);
     }
   }
 
@@ -140,6 +140,6 @@
     // stylelint-disable-next-line primer/spacing
     margin-left: -11px;
     border-right: 0;
-    border-left: $border-width $border-style var(--border-inverse);
+    border-left: $border-width $border-style var(--color-border-inverse);
   }
 }
diff --git a/src/avatars/circle-badge.scss b/src/avatars/circle-badge.scss
index 5629e099..c6e788a7 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(--bg-canvas);
+  background-color: var(--color-bg-canvas);
   border-radius: 50%;
   box-shadow: $box-shadow-medium;
 }
@@ -46,7 +46,7 @@
     width: 100%;
     content: "";
     // stylelint-disable-next-line primer/borders
-    border-bottom: 2px dashed var(--border-primary);
+    border-bottom: 2px dashed var(--color-border-primary);
   }
 
   .CircleBadge {
diff --git a/src/blankslate/blankslate.scss b/src/blankslate/blankslate.scss
index 86cd8233..df633fb6 100644
--- a/src/blankslate/blankslate.scss
+++ b/src/blankslate/blankslate.scss
@@ -8,8 +8,8 @@
     // stylelint-disable-next-line primer/spacing
     padding: 2px 5px 3px;
     font-size: $h5-size;
-    background: var(--bg-canvas);
-    border: $border-width $border-style var(--border-tertiary);
+    background: var(--color-bg-canvas);
+    border: $border-width $border-style var(--color-border-tertiary);
     border-radius: $border-radius;
   }
 
@@ -24,7 +24,7 @@
   margin-bottom: $spacer-2;
   margin-left: $spacer-1;
   // stylelint-disable-next-line primer/colors
-  color: var(--blankslate-icon);
+  color: var(--color-blankslate-icon);
 }
 
 .blankslate-capped {
diff --git a/src/box/box.scss b/src/box/box.scss
index 11136e84..c5cccee3 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(--bg-canvas);
-  border-color: var(--border-primary);
+  background-color: var(--color-bg-canvas);
+  border-color: var(--color-border-primary);
   border-width: $border-width;
   border-style: $border-style;
   border-radius: $border-radius;
@@ -76,8 +76,8 @@
   padding: $spacer-3;
   // stylelint-disable-next-line primer/spacing
   margin: (-$border-width) (-$border-width) 0;
-  background-color: var(--bg-secondary);
-  border-color: var(--border-primary);
+  background-color: var(--color-bg-secondary);
+  border-color: var(--color-border-primary);
   border-style: $border-style;
   border-width: $border-width;
   border-top-left-radius: $border-radius;
@@ -91,7 +91,7 @@
 
 .Box-body {
   padding: $spacer-3;
-  border-bottom: $border-width $border-style var(--border-primary);
+  border-bottom: $border-width $border-style var(--color-border-primary);
 
   // Ensures bottom-border doesn't poke out when .Box-body used without box-footer
   &:last-of-type {
@@ -110,7 +110,7 @@
   list-style-type: none; // To account for applying Box component to a list
   border-top-width: $border-width;
   border-top-style: $border-style;
-  border-top-color: var(--border-primary);
+  border-top-color: var(--color-border-primary);
 
   &:first-of-type {
     border-top-left-radius: $border-radius;
@@ -146,12 +146,12 @@
 
     // Row dragging styles
     &.sortable-chosen {
-      background-color: var(--bg-primary-light);
+      background-color: var(--color-bg-primary-light);
     }
 
     // Makes dragging row background gray
     &.sortable-ghost {
-      background-color: var(--bg-primary);
+      background-color: var(--color-bg-primary);
 
       // Hides contents of row while dragging so row looks solid gray
       .Box-row--drag-hide {
@@ -164,7 +164,7 @@
 
 .Box-row--focus-gray {
   &.navigation-focus {
-    background-color: var(--bg-primary);
+    background-color: var(--color-bg-primary);
   }
 }
 
@@ -176,7 +176,7 @@
 
 .Box-row--hover-gray {
   &:hover {
-    background-color: var(--bg-primary);
+    background-color: var(--color-bg-primary);
   }
 }
 
@@ -192,11 +192,11 @@
 .Box-row-link {
   @include breakpoint(md) {
 
-    color: var(--text-primary);
+    color: var(--color-text-primary);
     text-decoration: none;
 
     &:hover {
-      color: var(--text-link-primary);
+      color: var(--color-text-link-primary);
       text-decoration: none;
     }
 
@@ -215,7 +215,7 @@
   margin-top: -1px; // prevents double border when used with .Box-body
   border-top-style: $border-style;
   border-top-width: $border-width;
-  border-top-color: var(--border-primary);
+  border-top-color: var(--color-border-primary);
 }
 
 // Option for a box with scrolling content
@@ -282,7 +282,7 @@
 }
 
 .Box-row--gray {
-  background-color: var(--bg-secondary);
+  background-color: var(--color-bg-secondary);
 }
 
 //Box with btn-octicon