diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss
index 6796c9ba7..ed09a5c6b 100644
--- a/app/assets/stylesheets/budgets/phases.scss
+++ b/app/assets/stylesheets/budgets/phases.scss
@@ -102,8 +102,7 @@
     }
 
     &.current-phase-tab a {
-      background: $brand;
-      color: $white;
+      @include brand-background;
       padding-top: $line-height / 2;
 
       &:hover {
@@ -141,9 +140,8 @@
     .budget-next-phase,
     .budget-prev-phase-disabled,
     .budget-next-phase-disabled {
-      background: $brand;
+      @extend %brand-background;
       border-radius: rem-calc(3);
-      color: $white;
       display: flex;
       font-size: rem-calc(36);
       height: 1em * 4 / 3;
diff --git a/app/assets/stylesheets/datepicker_overrides.scss b/app/assets/stylesheets/datepicker_overrides.scss
index 6082592a3..2b1b2567c 100644
--- a/app/assets/stylesheets/datepicker_overrides.scss
+++ b/app/assets/stylesheets/datepicker_overrides.scss
@@ -2,8 +2,7 @@
 //
 
 .ui-datepicker-header {
-  background: $brand;
-  color: #fff;
+  @extend %brand-background;
   font-weight: bold;
 }
 
@@ -16,8 +15,7 @@
 
   .ui-state-hover,
   .ui-state-active {
-    background: $brand;
-    color: #fff;
+    @extend %brand-background;
   }
 
   thead {
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 944463b96..28c166cd8 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -30,8 +30,7 @@
 // -----------------
 
 ::selection {
-  color: #fff;
-  background-color: $brand;
+  @include brand-background;
 }
 
 html,
@@ -386,7 +385,7 @@ a {
 }
 
 .pagination .current {
-  background: $brand;
+  @extend %brand-background;
 }
 
 .pagination li {
@@ -489,7 +488,7 @@ a {
 
 body > header,
 .wrapper > header {
-  background: $brand;
+  @extend %brand-background;
   border-bottom: 1px solid $border;
   margin-bottom: $line-height;
 
@@ -552,8 +551,7 @@ body > header,
 }
 
 .top-bar {
-  background: $brand !important;
-  color: #fff;
+  @extend %brand-background;
   padding-bottom: 0;
   padding-top: 0;
 
@@ -941,8 +939,7 @@ footer {
 
   &:hover,
   &.is-active {
-    background: $brand;
-    color: #fff;
+    @extend %brand-background;
   }
 }
 
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 2103ad34d..b1bc9c0d8 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -239,8 +239,7 @@
 
       &:hover,
       &:active {
-        background: $brand;
-        color: #fff;
+        @extend %brand-background;
         text-decoration: none;
       }
     }
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
new file mode 100644
index 000000000..52b39bac3
--- /dev/null
+++ b/app/assets/stylesheets/mixins/colors.scss
@@ -0,0 +1,8 @@
+@mixin brand-background {
+  background-color: $brand;
+  color: $white;
+}
+
+%brand-background {
+  @include brand-background;
+}