From f380855c56df1473474d8197596a21273677ed0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danielle=20For=C3=A9?= <danielle@elementary.io>
Date: Tue, 15 Sep 2026 07:58:44 -0700
Subject: [PATCH 1/2] Styles: don't override small-label

---
 data/stylesheet/_index.scss             | 16 +++++-----------
 src/Views/SystemView/SystemCPUView.vala |  8 +++-----
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/data/stylesheet/_index.scss b/data/stylesheet/_index.scss
index 3ff63e869..59baf72c7 100644
--- a/data/stylesheet/_index.scss
+++ b/data/stylesheet/_index.scss
@@ -69,17 +69,6 @@ roundy-label:hover:selected {
     }
 }
 
-.small-label {
-    padding: 0;
-    font-weight: bold;
-    font-size: 9px;
-    color: grey;
-
-    @media (prefers-color-scheme: dark) {
-        color: var(--SILVER-500);
-    }
-}
-
 .grape_500 {
     background-color: color-mix(in srgb, var(--GRAPE-500) 60%, transparent);
 }
@@ -98,6 +87,11 @@ roundy-label:hover:selected {
         background-color: color-mix(in srgb, var(--SILVER-900) 50%, transparent);
         border: 1px solid var(--SILVER-900);
     }
+
+    header {
+        margin: 0;
+        text-transform: uppercase;
+    }
 }
 
 .state_badge,
diff --git a/src/Views/SystemView/SystemCPUView.vala b/src/Views/SystemView/SystemCPUView.vala
index e8a4e471d..a6d84cc3a 100644
--- a/src/Views/SystemView/SystemCPUView.vala
+++ b/src/Views/SystemView/SystemCPUView.vala
@@ -157,11 +157,9 @@ public class Monitor.SystemCPUView : Monitor.WidgetResource {
                 row = 0;
             }
         }
-        var threads_label = new Gtk.Label (_("THREADS"));
-        // this can be archived by Granite.CssClass.DIM and
-        // Granite.CssClass.SMALL, however the style is
-        // differs from the OG
-        threads_label.add_css_class ("small-label");
+        var threads_label = new Granite.HeaderLabel (_("Threads"));
+        threads_label.add_css_class (Granite.CssClass.SMALL);
+
         grid.attach (threads_label, 0, -1, column, 1);
 
         return grid;

From d43586d2b559a00576773b7133e4efe2cdbd379c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danielle=20For=C3=A9?= <danielle@elementary.io>
Date: Tue, 15 Sep 2026 08:14:46 -0700
Subject: [PATCH 2/2] Be more specific, uppercase in styles

---
 data/stylesheet/_index.scss                 | 10 ++++++----
 src/Views/SystemView/SystemCPUView.vala     |  5 ++++-
 src/Views/SystemView/SystemStorageView.vala |  4 ++--
 src/Widgets/Labels/LabelRoundy.vala         |  5 +++--
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/data/stylesheet/_index.scss b/data/stylesheet/_index.scss
index 59baf72c7..1461da664 100644
--- a/data/stylesheet/_index.scss
+++ b/data/stylesheet/_index.scss
@@ -87,11 +87,13 @@ roundy-label:hover:selected {
         background-color: color-mix(in srgb, var(--SILVER-900) 50%, transparent);
         border: 1px solid var(--SILVER-900);
     }
+}
 
-    header {
-        margin: 0;
-        text-transform: uppercase;
-    }
+header.small-label {
+    margin: 0;
+    padding: 0;
+    font-size: 0.75em;
+    text-transform: uppercase;
 }
 
 .state_badge,
diff --git a/src/Views/SystemView/SystemCPUView.vala b/src/Views/SystemView/SystemCPUView.vala
index a6d84cc3a..66ef1296e 100644
--- a/src/Views/SystemView/SystemCPUView.vala
+++ b/src/Views/SystemView/SystemCPUView.vala
@@ -157,7 +157,10 @@ public class Monitor.SystemCPUView : Monitor.WidgetResource {
                 row = 0;
             }
         }
-        var threads_label = new Granite.HeaderLabel (_("Threads"));
+        var threads_label = new Granite.HeaderLabel (_("Threads")) {
+            halign = CENTER
+        };
+        threads_label.add_css_class (Granite.CssClass.DIM);
         threads_label.add_css_class (Granite.CssClass.SMALL);
 
         grid.attach (threads_label, 0, -1, column, 1);
diff --git a/src/Views/SystemView/SystemStorageView.vala b/src/Views/SystemView/SystemStorageView.vala
index 035f53bdf..188cb8483 100644
--- a/src/Views/SystemView/SystemStorageView.vala
+++ b/src/Views/SystemView/SystemStorageView.vala
@@ -17,12 +17,12 @@ public class Monitor.SystemStorageView : Gtk.Box {
     construct {
         var storage_name_label = new Granite.HeaderLabel (_("Storage"));
 
-        storage_write_label = new LabelRoundy (_("WRITE")) {
+        storage_write_label = new LabelRoundy (_("Write")) {
             width_chars = 7
         };
         storage_write_label.add_css_class ("blue");
 
-        storage_read_label = new LabelRoundy (_("READ")) {
+        storage_read_label = new LabelRoundy (_("Read")) {
             width_chars = 7
         };
         storage_read_label.add_css_class ("green");
diff --git a/src/Widgets/Labels/LabelRoundy.vala b/src/Widgets/Labels/LabelRoundy.vala
index 04efabded..a9c44360a 100644
--- a/src/Widgets/Labels/LabelRoundy.vala
+++ b/src/Widgets/Labels/LabelRoundy.vala
@@ -29,17 +29,18 @@ public class Monitor.LabelRoundy : Gtk.Box {
     }
 
     construct {
-        halign = Gtk.Align.START;
         val = new Gtk.Label (Utils.NO_DATA) {
             selectable = true
         };
         val.add_css_class ("value");
 
-        var header_label = new Granite.HeaderLabel (title.up ()) {
+        var header_label = new Granite.HeaderLabel (title) {
             mnemonic_widget = val
         };
+        header_label.add_css_class (Granite.CssClass.DIM);
         header_label.add_css_class (Granite.CssClass.SMALL);
 
+        halign = START;
         orientation = VERTICAL;
         append (header_label);
         append (val);