diff --git a/services/web/public/stylesheets/app/base.less b/services/web/public/stylesheets/app/base.less
index f63c89a209..9fb7348612 100644
--- a/services/web/public/stylesheets/app/base.less
+++ b/services/web/public/stylesheets/app/base.less
@@ -1,8 +1,14 @@
 .system-message {
   padding: (@line-height-computed / 4) (@line-height-computed / 2);
-  background-color: @state-warning-bg;
-  color: #333;
-  border-bottom: 1px solid @common-border-color;
+  background-color: @sys-msg-background;
+  color: @sys-msg-color;
+  border-bottom: @sys-msg-border;
+}
+
+.system-message .close when (@is-overleaf = true) {
+  color: #FFF;
+  opacity: 1;
+  text-shadow: none;
 }
 
 .clickable {
diff --git a/services/web/public/stylesheets/app/translations.less b/services/web/public/stylesheets/app/translations.less
index 7ae7532b6c..b217f88d06 100644
--- a/services/web/public/stylesheets/app/translations.less
+++ b/services/web/public/stylesheets/app/translations.less
@@ -1,14 +1,23 @@
-
 .translations-message {
-    padding: (@line-height-computed / 4) (@line-height-computed / 2);
-    background-color: @state-warning-bg;
-    color: #333;
-    border-bottom: 1px solid @common-border-color;
+    .system-message;
 	text-align:center;
-    
     img {
     	vertical-align: text-bottom;
         margin-bottom: -1px;
     }
+}
 
-}
\ No newline at end of file
+.translations-message when (@is-overleaf = true) {
+	.close {
+		color: #FFF;
+		opacity: 1;
+		text-shadow: none;
+	}
+	a {
+		color: #FFF;
+		&:hover,
+		&:focus {
+			color: #FFF;
+		}
+	}
+}
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index d5a79947df..ff25eaf25c 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -959,4 +959,9 @@
 @tag-max-width      : 150px;
 @tag-bg-hover-color : darken(@label-default-bg, 10%);
 @tag-top-adjustment : -2px;
-@labels-font-size   : 75%;
\ No newline at end of file
+@labels-font-size   : 75%;
+
+// System messages
+@sys-msg-background : @state-warning-bg;
+@sys-msg-color      : #333;
+@sys-msg-border     : 1px solid @common-border-color;
\ No newline at end of file
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 45dd0232dd..b232367338 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -256,6 +256,11 @@
 @log-line-no-color              : #FFF;
 @log-hints-color                : @ol-blue-gray-4;
 
+// System messages
+@sys-msg-background             : @ol-blue;
+@sys-msg-color                  : #FFF;
+@sys-msg-border                 : solid 1px lighten(@ol-blue, 10%);
+
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.