diff --git a/api/js/etemplate/Styles/colorsDefStyles.ts b/api/js/etemplate/Styles/colorsDefStyles.ts
index 06df8c8d41..1c8f7d2909 100644
--- a/api/js/etemplate/Styles/colorsDefStyles.ts
+++ b/api/js/etemplate/Styles/colorsDefStyles.ts
@@ -23,8 +23,6 @@ export const colorsDefStyles = css`
 		
 		--btn-label-color: #000000;
 		
-		--input-border-color: #E6E6E6;
-		--input-text-color: #26537C;
 		
 		/****** Backgrounds *******/
 		--bg_color_0_gray : #FFFFFF;
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 80ad4ea9c3..45aca6de36 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -3,20 +3,49 @@
  *
  * @version: $Id$
  */
+
 /**
- * Magic suggest / tag list widget
+ * Naming convention:
+ * --[block][--element][--modifier]-attribute
+ *
+ * Some system-wide variables
+ * These are logical (eg: error, active, highlight, header) not stylistic (red, grey)
+ * By defining them here they are available inside WebComponents as well, though any CSS defined here that
+ * applies to slotted elements takes precedence over what's in the WebComponent's style.
+ *
+ * For variables it is better to omit the block and element parts of the name.
+ * For example, --error-color is better than --message_wrapper--message--error-color because it can be used in
+ * more places (logically, no technical limitation on the variable).
+ * If a specific value is needed for some element, it is probably better to re-set
+ * the less specific variable rather than define a new variable:
+ * :root {
+ *   --error-color: pink;
+ *   --error-background-color: initial;
+ * }
+ * .nextmatch--header {
+ *   --error-color: fuchsia;
+ *   --error-background-color: black;
+ * }
+ * This will have any child elements under the block with nextmatch--header class use the more specific values, while
+ * letting us stick with one variable.
+ *
+ *
+ * @see http://getbem.com/naming/ for what inspired naming convention
  */
-/* These imports processed by framework */
-/*@import url("../../../vendor/egroupware/magicsuggest/magicsuggest.css");*/
-/*@import url("../../js/jquery/jquery-ui-timepicker-addon.css");*/
-/*@import url("../../js/jquery/blueimp/css/blueimp-gallery.min.css");*/
-/*@import url("../../js/dhtmlxtree/codebase/dhtmlxtree.css");*/
-/*@import url("../../js/egw_action/test/skins/dhtmlxmenu_egw.css");*/
-/*@import url("../../../vendor/bower-asset/diff2html/dist/diff2html.css");*/
-/*@import url("../../../vendor/bower-asset/cropper/dist/cropper.min.css");*/
-/*@import url("css/flags.css");*/
-/*@import url("css/htmlarea.css");*/
-/*@import url("def_tutorials.css");*/
+:root {
+    --primary-background-color: #4177a2;
+    --highlight-background-color: rgba(153, 204, 255, .4);
+
+    --label-color: #000000;
+
+    --input-border-color: #E6E6E6;
+    --input-text-color: #26537C;
+
+    --warning-color: rgba(255, 204, 0, .5);
+    --error-color: rgba(204, 0, 51, .5);
+
+}
+
 /**
  * Top level
  */
@@ -1937,7 +1966,7 @@ td.et2_required {
     -moz-border-radius: 0 4px 4px 0;
     -moz-box-shadow: 0 0 6px #DDDDDD;
     background-color: #FFFE36;
-    border: 1px solid #E1E16D;
+    border: 1px solid var(--error-color, #E1E16D);
     color: #000000;
     font-size: 11px;
     min-height: 15px;
@@ -2042,8 +2071,8 @@ div.message.floating, lion-validation-feedback[type] {
 }
 
 .message.validation_error, lion-validation-feedback[type="error"] {
-    color: #a93030;
-    border-color: #a93030;
+    color: var(--error-color);
+    border-color: var(--error-color);
     background-repeat: no-repeat;
 }
 
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index 26ae0010ea..4174382bcc 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -4078,7 +4078,7 @@ div#egwpopup_message {
 }
 #msg,
 .message {
-  color: red;
+  color: var(--error-color);
   font-style: italic;
   background: #FFFFFF;
 }
diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css
index 69eef0cc4b..e0e25de5f3 100644
--- a/pixelegg/css/monochrome.css
+++ b/pixelegg/css/monochrome.css
@@ -4058,7 +4058,7 @@ div#egwpopup_message {
 }
 #msg,
 .message {
-  color: red;
+  color: var(--error-color);
   font-style: italic;
   background: #FFFFFF;
 }
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 3d7b9e5da7..e0f3a46221 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -4068,7 +4068,7 @@ div#egwpopup_message {
 }
 #msg,
 .message {
-  color: red;
+  color: var(--error-color);
   font-style: italic;
   background: #FFFFFF;
 }
diff --git a/pixelegg/less/layout_messages.less b/pixelegg/less/layout_messages.less
index 7a27570a9d..9c37b05492 100755
--- a/pixelegg/less/layout_messages.less
+++ b/pixelegg/less/layout_messages.less
@@ -249,7 +249,7 @@ div#egwpopup_message {
 }
 
 #msg,.message {
-	color: red;
+	color: var(--error-color);
 	font-style: italic;
 	background: @gray_0;
 }
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index b96377e7e3..20056a504a 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -4089,7 +4089,7 @@ div#egwpopup_message {
 }
 #msg,
 .message {
-  color: red;
+  color: var(--error-color);
   font-style: italic;
   background: #FFFFFF;
 }