diff --git a/src/scss/components/search/SearchFacade.scss b/src/scss/components/search/SearchFacade.scss
index c30c8894e..1d8e66ea4 100644
--- a/src/scss/components/search/SearchFacade.scss
+++ b/src/scss/components/search/SearchFacade.scss
@@ -5,8 +5,8 @@
 //
 
 @mixin SearchFacadePristineFocus {
-  border: 1px solid $cyan-700;
-  border: 1px solid var(--hxSearch-SearchFacadePristineFocus-border, $cyan-700);
+  border: 1px solid $blue-700;
+  border: 1px solid var(--hxSearch-SearchFacadePristineFocus-border, $blue-700);
   box-shadow: $focus-glow;
 }
 
diff --git a/src/scss/components/search/_index.scss b/src/scss/components/search/_index.scss
index ce3da4526..84484d2af 100644
--- a/src/scss/components/search/_index.scss
+++ b/src/scss/components/search/_index.scss
@@ -60,8 +60,8 @@ hx-search-control {
 
   > input[type="search"]:focus ~ hx-search,
   > button.hxClear:focus ~ hx-search {
-    border-color: $cyan-700;
-    border-color: var(--hxSearch-border-color, $cyan-700);
+    border-color: $blue-700;
+    border-color: var(--hxSearch-border-color, $blue-700);
     box-shadow: $focus-glow;
   }
 
@@ -234,7 +234,7 @@ hx-search-control:not([hx-defined]) > button {
   width: 100%;
 
   &:hover {
-    background-color: $cyan-50;
-    background-color: var(--hxSearch-hxSearchSuggestion-hover-bgcolor, $cyan-50);
+    background-color: $blue-100;
+    background-color: var(--hxSearch-hxSearchSuggestion-hover-bgcolor, $blue-100);
   }
 }