diff --git a/src/digital-components/salesforce-webchat/salesforce-webchat.vue b/src/digital-components/salesforce-webchat/salesforce-webchat.vue
index 9022553a7..8cffc143f 100644
--- a/src/digital-components/salesforce-webchat/salesforce-webchat.vue
+++ b/src/digital-components/salesforce-webchat/salesforce-webchat.vue
@@ -68,40 +68,40 @@ export default {
 .dockableContainer {
     &.showDockableContainer {
         font-family: AvertaRegular;
-        color: #4d5151;
+        color: $gray-600;
         .sidebarBody {
             button {
-                background: #0070d1;
-                color: #fff;
+                background: $blue;
+                color: $white;
                 &:hover {
-                    background: #06577c !important;
+                    background: $blue-700 !important;
                 }
             }
             .form-element__help {
-                color: #db0020;
+                color: $red;
             }
             .embeddedServiceSidebarFormField {
                 .uiInput {
                     .uiLabel-left {
-                        color: #4d5151;
+                        color: $gray-600;
                     }
                 }
             }
             .embeddedServiceSidebarButton {
                 &.uiButton--inverse {
                     .label {
-                        color: #fff;
+                        color: $white;
                         text-decoration: underline;
                     }
                     &:not(:disabled):focus {
-                        background-color: #0070d1;
+                        background-color: $blue;
                     }
                 }
             }
             .embeddedServiceLiveAgentStateChatAvatar {
                 &.isLightningOutContext {
                     .agentIconColor0 {
-                        background-color: #0070d1;
+                        background-color: $blue;
                     }
                 }
             }
@@ -130,11 +130,11 @@ export default {
             }
         }
         .chatHeaderBranding {
-            background-color: #0070d1;
+            background-color: $blue;
         }
         span {
             &.required {
-                color: #db0020;
+                color: $red;
             }
         }
     }
@@ -142,7 +142,7 @@ export default {
 .embeddedServiceHelpButton {
     .helpButton {
         .uiButton {
-            background-color: #0070d1 !important;
+            background-color: $blue !important;
         }
     }
     .embeddedServiceIcon {
@@ -158,8 +158,8 @@ export default {
                     .sidebarHeader {
                         &.minimizedContainer {
                             .embeddedServiceSidebarMinimizedDefaultUI {
-                                background-color: #0070d1;
-                                border: 1px solid #0070d1;
+                                background-color: $blue;
+                                border: 1px solid $blue;
                             }
                         }
                     }