diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 3a98332e46c811ddf9b7c7306630fa2d5fd83b4f..6f91d11b36924173cad6cad19d84d602fc7902b2 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -118,3 +118,29 @@
     @content;
   }
 }
+
+/*
+ * Mixin for status badges, as used for pipelines and commit signatures
+ */
+@mixin status-color($color-light, $color-main, $color-dark) {
+  color: $color-main;
+  border-color: $color-main;
+
+  &:not(span):hover {
+    background-color: $color-light;
+    color: $color-dark;
+    border-color: $color-dark;
+
+    svg {
+      fill: $color-dark;
+    }
+  }
+
+  svg {
+    fill: $color-main;
+  }
+}
+
+@mixin green-status-color {
+  @include status-color($green-50, $green-500, $green-700);
+}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 41c44a8560dbb3466cd6e675cbc9da7a86a7bab9..cd9f2d787c5c12c827f23dbd7129b5debb3468d9 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -284,15 +284,15 @@
   }
 }
 
+
 .gpg-status-box {
   &.valid {
-    color: $brand-success;
-    border: 1px solid $brand-success;
+    @include green-status-color;
   }
 
   &.invalid {
-    color: $gray;
-    border: 1px solid $common-gray-light;
+    @include status-color($gray-dark, $gray, $common-gray-dark);
+    border-color: $common-gray-light;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 67ad1ae60afe84aae637e0e6d368e94d2340e3ca..36f622db136724147d2bafc2ab74c93d9e8d4981 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -1,22 +1,3 @@
-@mixin status-color($color-light, $color-main, $color-dark) {
-  color: $color-main;
-  border-color: $color-main;
-
-  &:not(span):hover {
-    background-color: $color-light;
-    color: $color-dark;
-    border-color: $color-dark;
-
-    svg {
-      fill: $color-dark;
-    }
-  }
-
-  svg {
-    fill: $color-main;
-  }
-}
-
 .ci-status {
   padding: 2px 7px 4px;
   border: 1px solid $gray-darker;
@@ -41,7 +22,7 @@
   }
 
   &.ci-success {
-    @include status-color($green-50, $green-500, $green-700);
+    @include green-status-color;
   }
 
   &.ci-canceled,