diff --git a/css/_chat.scss b/css/_chat.scss
index a47e52d23..e6ff124da 100644
--- a/css/_chat.scss
+++ b/css/_chat.scss
@@ -92,7 +92,7 @@
 }
 
 .chat-header {
-    background-color: rgba(42, 58, 75, 0.9);
+    background-color: $chatHeaderBackgroundColor;
     height: 70px;
     position: relative;
     width: 100%;
@@ -120,7 +120,7 @@
 }
 
 #chat-input {
-    border-top: 1px solid #A4B8D1;
+    border-top: 1px solid $chatInputSeparatorColor;
     display: flex;
 
     * {
@@ -188,7 +188,7 @@
 }
 
 .chatmessage {
-    background-color: rgba(240, 243, 247, 0.15);
+    background-color: $chatRemoteMessageBackgroundColor;
     border-radius: 0px 6px 6px 6px;
     margin-top: 3px;
     color: white;
@@ -196,7 +196,7 @@
     position: relative;
 
     &.localuser {
-        background-color: rgba(26, 108, 180, 1);
+        background-color: $chatLocalMessageBackgroundColor;
         border-radius: 6px 0px 6px 6px;
     }
 
diff --git a/css/_variables.scss b/css/_variables.scss
index 95e86527d..5ae429a06 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -83,11 +83,19 @@ $modalMockAKInputBorder: 1px solid #f4f5f7;
 $modalTextColor: #333;
 
 /**
+ * Chat
+ */
+$chatHeaderBackgroundColor: rgba(42, 58, 75, 0.9);
+$chatInputSeparatorColor: #A4B8D1;
+$chatLocalMessageBackgroundColor: rgba(26, 108, 180, 1);
+$chatRemoteMessageBackgroundColor:  rgba(240, 243, 247, 0.15);
+$sidebarWidth: 375px;
+
+ /**
  * Misc.
  */
 $borderRadius: 4px;
 $defaultWatermarkLink: '../images/watermark.png';
-$sidebarWidth: 375px;
 $popoverMenuPadding: 13px;
 $happySoftwareBackground: transparent;
 $desktopAppDragBarHeight: 25px;