diff --git a/assets/css/brand.css b/assets/css/brand.css
index 2adb65d8f433289bd131f46bcd6acf9b65c2a6da..6d115423214e3a3ee9a0277b0b2ac686c20c6b2d 100644
--- a/assets/css/brand.css
+++ b/assets/css/brand.css
@@ -677,6 +677,10 @@ html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
   fill: #ffc142;
 }
 
+.badge.badge-primary {
+  background-color: #29abe2;
+}
+
 .badge.badge-active {
   color: #343434;
   background-color: #ffc142;
diff --git a/assets/css/preview.css b/assets/css/preview.css
index e701dddc3aebd6ae4e2786b46b955b92fa183d63..7e6c340e79a2fcbd245c10e228e97988e30846e7 100644
--- a/assets/css/preview.css
+++ b/assets/css/preview.css
@@ -2868,6 +2868,10 @@ html:not(.js) .navbar-default .dropdown:hover > button .navbar-nav__icon {
   fill: #ffc142;
 }
 
+.badge.badge-primary {
+  background-color: #29abe2;
+}
+
 .badge.badge-active {
   color: #343434;
   background-color: #ffc142;
diff --git a/components/brand.scss b/components/brand.scss
index 00e89e1d8183cd0b20e8be8a481891408e60ffc5..19f00260a2dadae8372eede726fc3be94f9d70ad 100644
--- a/components/brand.scss
+++ b/components/brand.scss
@@ -781,6 +781,10 @@ html:not(.js) .navbar-default {
   }
 }
 
+.badge.badge-primary {
+   background-color: $brand-primary;
+}
+
 .badge.badge-active {
   color: $brand-accent-text;
   background-color: $brand-accent;