diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index 6d156181..d399641f 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -8,8 +8,8 @@
   // stylelint-disable-next-line primer/typography
   font-size: 13px;
   list-style: none;
-  background: var(--color-bg-canvas);
-  border: $border;
+  background: var(--color-autocomplete-bg);
+  border: $border-width $border-style var(--color-autocomplete-border);
   border-radius: $border-radius;
   box-shadow: var(--color-shadow-medium);
 }
@@ -29,14 +29,14 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
-  background-color: var(--color-bg-canvas);
+  background-color: var(--color-autocomplete-bg);
   border: 0;
 
   &:hover,
   &.selected,
   &[aria-selected=true],
   &.navigation-focus {
-    color: var(--color-text-inverse);
+    color: var(--color-state-selected-primary-text);
     text-decoration: none;
     background-color: var(--color-state-selected-primary-bg);
 
diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss
index d7f6e4f0..fc18d29d 100644
--- a/src/autocomplete/suggester.scss
+++ b/src/autocomplete/suggester.scss
@@ -11,8 +11,8 @@
   margin-top: $spacer-4;
   list-style: none;
   cursor: pointer;
-  background: var(--color-bg-canvas);
-  border: $border-width $border-style var(--color-border-primary);
+  background: var(--color-autocomplete-bg);
+  border: $border-width $border-style var(--color-autocomplete-border);
   border-radius: $border-radius;
   box-shadow: var(--color-shadow-medium);
 
@@ -20,7 +20,7 @@
     display: block;
     padding: $spacer-1 $spacer-2;
     font-weight: $font-weight-semibold;
-    border-bottom: $border-width $border-style var(--color-border-secondary);
+    border-bottom: $border-width $border-style var(--color-autocomplete-row-border);
 
     small {
       font-weight: $font-weight-normal;
@@ -41,12 +41,12 @@
     &:hover,
     &[aria-selected="true"],
     &.navigation-focus {
-      color: var(--color-text-inverse);
+      color: var(--color-state-selected-primary-text);
       text-decoration: none;
       background: var(--color-state-selected-primary-bg);
 
       small {
-        color: var(--color-text-inverse);
+        color: var(--color-state-selected-primary-text);
       }
     }
   }