diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 7c7f991dd870864cdba8acf576c5675f0ab15687..c26fea8d5b2e2414bba5a697ce15cb252c06eac2 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -9,6 +9,7 @@
 @import "framework/avatar.scss";
 @import "framework/blocks.scss";
 @import "framework/buttons.scss";
+@import "framework/badges.scss";
 @import "framework/calendar.scss";
 @import "framework/callout.scss";
 @import "framework/common.scss";
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
new file mode 100644
index 0000000000000000000000000000000000000000..89e1c7890d848acd07793d2aa8b37f7c75ad9290
--- /dev/null
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -0,0 +1,10 @@
+.badge {
+  font-weight: normal;
+  background-color: $badge-bg;
+  color: $badge-color;
+  vertical-align: baseline;
+}
+
+.badge-dark {
+  background-color: $badge-bg-dark;
+}
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 40b696774a4761d5b310f5f1d450734f69c19893..477582f9e3fcbe1888d269fabe7575810976485c 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -72,17 +72,6 @@
       color: $black;
       font-weight: 600;
     }
-
-    .badge {
-      font-weight: normal;
-      background-color: #f3f3f3;
-      color: $btn-transparent-color;
-      vertical-align: baseline;
-    }
-
-    .badge-dark {
-      background-color: #eee;
-    }
   }
 
   &.sub-nav {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 8a9c279d124b4fcfefc174d30cdbb7c260211b55..651e58d0bb4111f3ec3549e9af7568befaa64b96 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -247,6 +247,13 @@ $btn-placeholder-gray: #c7c7c7;
 $btn-white-active: #848484;
 $btn-gray-hover: #eee;
 
+/*
+* Badges
+*/
+$badge-bg: #f3f3f3;
+$badge-bg-dark: #eee;
+$badge-color: $btn-transparent-color;
+
 /*
  *  Award emoji
  */
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 658aec5e6093dfcb7c8f0f16da1d736091334569..387d28184955eded5b9232fb9c94a03b3c000809 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -113,13 +113,6 @@
 
   .folder-name {
     cursor: pointer;
-
-    .badge {
-      font-weight: normal;
-      background-color: #f3f3f3;
-      color: $gl-placeholder-color;
-      vertical-align: baseline;
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 651e82b7b4585b8614c6e890e485065c1212ee99..90e933cbd61180aaf41bc06490d5b224d8f8014a 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -507,9 +507,6 @@
       }
 
       .badge {
-        background-color: #f3f3f3;
-        color: $gl-text-color-light;
-        font-weight: normal;
         margin-left: $btn-xs-side-margin;
       }
     }