diff --git a/src/scss/components/breadcrumb/index.scss b/src/scss/components/breadcrumb/index.scss
index ed38b4e55..5a59359c5 100644
--- a/src/scss/components/breadcrumb/index.scss
+++ b/src/scss/components/breadcrumb/index.scss
@@ -3,24 +3,27 @@
   align-content: center;
   align-items: center;
   color: $blue-500;
+  color: $rax-component-breadcrumb-base-color;
   display: flex;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1;
+  font-size: $rax-component-breadcrumb-base-font-size;
+  font-weight: $rax-component-breadcrumb-base-font-weight;
+  line-height: $rax-line-height-none;
 
   & > a {
     margin-right: 0.5rem;
     text-transform: capitalize;
 
     &:last-of-type {
-      color: var(--hxBreadcrumb-last-type-color, $gray-800);
-      font-weight: 600;
+      color: $gray-800;
+      color: $rax-component-breadcrumb-current-color;
+      font-weight: $rax-component-breadcrumb-base-font-weight;
       pointer-events: none;
     }
   }
 
   .delimiter {
-    color: var(--hxBreadcrumb-delimiter-color, $gray-600);
+    color: $gray-600;
+    color: $rax-component-breadcrumb-separator-color;
     font-size: 0.5rem;
     margin-right: 0.5rem;
   }