diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 782d9d916b..587554b522 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -623,6 +623,25 @@ input.settings_text_input {
     color: hsl(0deg 0% 100%);
 }
 
+/* Unread-count attention levels. */
+
+.prominent-count {
+    background-color: var(--color-background-unread-counter-prominent);
+    color: var(--color-unread-counter-prominent);
+}
+
+.normal-count {
+    background-color: var(--color-background-unread-counter-normal);
+    color: var(--color-unread-counter-normal);
+    box-shadow: var(--box-shadow-unread-counter-normal);
+}
+
+.quiet-count {
+    background-color: var(--color-background-unread-counter-quiet);
+    color: var(--color-unread-counter-quiet);
+    font-weight: 475;
+}
+
 .unread_mention_info:not(:empty) {
     margin-right: 5px;
     margin-left: 2px;
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 5fe47310c3..6ba2b2804c 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -1177,7 +1177,7 @@
     --color-background-unread-counter-quiet: transparent;
     --color-unread-counter-prominent: hsl(0deg 0% 100%);
     --color-unread-counter-normal: hsl(0deg 0% 100% / 85%);
-    --color-unread-counter-quiet: hsl(240deg 15% 60%);
+    --color-unread-counter-quiet: hsl(240deg 15% 65%);
     /* Legacy unread-counter color value. */
     --color-background-unread-counter: var(
         --color-background-unread-counter-prominent