diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
index a153fccf822..b233a376192 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
@@ -68,3 +68,19 @@
     {{color-example color="love"}}
   </section>
 {{/styleguide-example}}
+
+{{#styleguide-example title="$header"}}
+  <section class="color-row">
+    {{color-example color="header_background"}}
+  </section>
+  <section class="color-row">
+    {{color-example color="header_primary"}}
+    {{color-example color="header_primary-very-high"}}
+    {{color-example color="header_primary-high"}}
+  </section>
+  <section class="color-row">
+    {{color-example color="header_primary-medium"}}
+    {{color-example color="header_primary-low-mid"}}
+    {{color-example color="header_primary-low"}}
+  </section>
+{{/styleguide-example}}
diff --git a/plugins/styleguide/assets/stylesheets/colors.scss b/plugins/styleguide/assets/stylesheets/colors.scss
index a59afb0904d..e1b4e28c498 100644
--- a/plugins/styleguide/assets/stylesheets/colors.scss
+++ b/plugins/styleguide/assets/stylesheets/colors.scss
@@ -86,4 +86,35 @@
   .love {
     background-color: var(--love, $love);
   }
+
+  .header_primary {
+    background-color: var(--header_primary, $header_primary);
+  }
+
+  .header_background {
+    background-color: var(--header_background, $header_background);
+  }
+
+  .header_primary-low {
+    background-color: var(--header_primary-low, $header_primary-low);
+  }
+
+  .header_primary-low-mid {
+    background-color: var(--header_primary-low-mid, $header_primary-low-mid);
+  }
+
+  .header_primary-medium {
+    background-color: var(--header_primary-medium, $header_primary-medium);
+  }
+
+  .header_primary-high {
+    background-color: var(--header_primary-high, $header_primary-high);
+  }
+
+  .header_primary-very-high {
+    background-color: var(
+      --header_primary-very-high,
+      $header_primary-very-high
+    );
+  }
 }