diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index 3c0ba8981..e1c679e4d 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -14,6 +14,7 @@
 $black: #222 !default;
 $white: #fdfdfd !default;
 
+$body-background: $white;
 $body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important !default;
 
 $closebutton-color: $black !default;
@@ -89,7 +90,11 @@ $highlight-soft:    #f3f8fd !default;
 $light:             #f5f7fa !default;
 $featured:          #ffdc5c !default;
 
+$footer:            #f1f1f1 !default;
 $footer-border:     #bfc1c3 !default;
+$main-header:       $brand !default;
+$subnavigation:     $body-background !default;
+$top-links:         $brand-secondary !default;
 
 $success-bg:        #dff0d8 !default;
 $success-border:    #d6e9c6 !default;
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 37bd2f7cd..0eae30b8b 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -633,7 +633,7 @@ code {
     display: block;
 
     &.is-active {
-      @include brand-text;
+      @include brand-color;
       font-weight: bold;
       text-decoration: underline;
     }
diff --git a/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss b/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss
index 67a79ef0c..f45760e10 100644
--- a/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss
+++ b/app/assets/stylesheets/admin/budgets_wizard/creation_timeline.scss
@@ -5,7 +5,7 @@
   position: relative;
 
   li {
-    border-top: 4px solid $brand;
+    @include brand-border(top, 4px);
     display: inline-block;
     font-size: $small-font-size;
     font-weight: bold;
@@ -13,7 +13,7 @@
     text-transform: uppercase;
 
     &::before {
-      background: $brand;
+      @extend %brand-background;
       border-radius: 50%;
       content: "";
       height: 20px;
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 16d710cb6..7d47c5015 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -15,6 +15,7 @@
 @import "foundation_and_overrides";
 @import "fonts";
 @import "icons";
+@import "functions/*";
 @import "mixins/*";
 
 @import "admin";
diff --git a/app/assets/stylesheets/budgets/ballot/investment.scss b/app/assets/stylesheets/budgets/ballot/investment.scss
index 19c490bdf..1685f7eb5 100644
--- a/app/assets/stylesheets/budgets/ballot/investment.scss
+++ b/app/assets/stylesheets/budgets/ballot/investment.scss
@@ -20,7 +20,7 @@
   }
 
   .ballot-list-price {
-    @include brand-text;
+    @include brand-color;
     display: block;
     font-weight: bold;
     margin-top: $line-height / 2;
diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss
index ba0cd030e..6372debb0 100644
--- a/app/assets/stylesheets/budgets/groups_and_headings.scss
+++ b/app/assets/stylesheets/budgets/groups_and_headings.scss
@@ -8,7 +8,7 @@
   }
 
   .heading {
-    @include brand-text;
+    @include brand-color;
     border: 2px solid $border;
     border-radius: rem-calc(6);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
diff --git a/app/assets/stylesheets/budgets/investments/ballot.scss b/app/assets/stylesheets/budgets/investments/ballot.scss
index c98c861ec..1b5c88104 100644
--- a/app/assets/stylesheets/budgets/investments/ballot.scss
+++ b/app/assets/stylesheets/budgets/investments/ballot.scss
@@ -2,8 +2,8 @@
 
   .button-remove-support {
     @include has-fa-icon(times, solid);
+    @include brand-secondary-color;
     background: #e7eaec;
-    color: $brand-secondary;
     font-weight: bold;
     margin-top: $line-height;
 
diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss
index 750b965c7..a3f95ef04 100644
--- a/app/assets/stylesheets/budgets/phases.scss
+++ b/app/assets/stylesheets/budgets/phases.scss
@@ -87,7 +87,7 @@
 
       &[aria-selected="true"],
       &.is-active {
-        @include background-with-text-contrast($brand-secondary);
+        @include brand-secondary-background;
         font-weight: normal;
       }
 
@@ -98,7 +98,7 @@
     }
 
     &.current-phase-tab a {
-      @include background-with-text-contrast($brand-secondary);
+      @include brand-secondary-background;
       padding-top: $line-height / 2;
     }
   }
diff --git a/app/assets/stylesheets/budgets/single_heading.scss b/app/assets/stylesheets/budgets/single_heading.scss
index 3bafa20f4..37edec0d7 100644
--- a/app/assets/stylesheets/budgets/single_heading.scss
+++ b/app/assets/stylesheets/budgets/single_heading.scss
@@ -4,7 +4,7 @@
   position: relative;
 
   &::after {
-    background: $brand;
+    @extend %brand-background;
     bottom: 0;
     content: "";
     height: rem-calc(6);
diff --git a/app/assets/stylesheets/budgets/supports_info.scss b/app/assets/stylesheets/budgets/supports_info.scss
index 2779adfca..5a9508b46 100644
--- a/app/assets/stylesheets/budgets/supports_info.scss
+++ b/app/assets/stylesheets/budgets/supports_info.scss
@@ -48,7 +48,7 @@
 
   .keep-scrolling {
     @include has-fa-icon(angle-double-down, solid, after);
-    color: $brand;
+    @include brand-color;
     font-weight: bold;
     text-decoration: none;
     text-transform: uppercase;
diff --git a/app/assets/stylesheets/custom/tenants.scss b/app/assets/stylesheets/custom/tenants.scss
new file mode 100644
index 000000000..9bc7053a3
--- /dev/null
+++ b/app/assets/stylesheets/custom/tenants.scss
@@ -0,0 +1,41 @@
+// If you're using multitenancy, you can override styles for a certain
+// tenant by styling the `<html>` element with the class
+// `tenant-<tenant_name>`. For example, to style the public (main)
+// tenant without these styles affecting any other tenants, use the
+// `.tenant-public` selector.
+//
+// You can use CSS variables to customize the colors. Here's an example
+// changing the brand, buttons, links and main layout colors for just
+// the main tenant.
+//
+// .tenant-public {
+//   --anchor-color: #372;
+//   --anchor-color-hover: #137;
+//   --brand: #153;
+//   --brand-secondary: #134a00;
+//   --button-background-hover: #fa0;
+//   --button-background-hover-contrast: #{$black};
+//   --footer: #e6e6e6;
+//   --main-header: #351;
+//   --top-links: var(--main-header);
+//   --subnavigation: #ffd;
+// }
+//
+// Some colors default to another color, so you don't have to change
+// both colors if you'd like them to be the same. For instance, the
+// `--main-header` and `--anchor-color` colors will use the `--brand`
+// color if `--main-header` or `--anchor-color` are not defined, while
+// the `--top-links` color will use the `--brand-secondary` color if
+// `--top-links` is not defined.
+//
+// If, for instance, you're using a light color for the main header when
+// the default color is a dark one, you should also change the text
+// color. You can do that with a variable ending in `-contrast`, like:
+//
+// .tenant-public {
+//   --main-header: #{$white};
+//   --main-header-contrast: #{$black};
+// }
+//
+// NOTE: If you are **not** using mulitenancy, we recommend overwriting
+// SCSS variables in the `_consul_custom_overrides.scss` file instead
diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index a42f5047a..33b05414d 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -332,7 +332,7 @@
   }
 
   .is-active {
-    @include brand-text;
+    @include brand-color;
     position: relative;
 
     &::before {
@@ -347,11 +347,11 @@
     }
 
     a {
-      @include brand-text;
+      @include brand-color;
     }
 
     [class^="icon-"] {
-      @include brand-text;
+      @include brand-color;
     }
   }
 
@@ -365,7 +365,7 @@
     border-bottom: 2px solid;
 
     .has-tip {
-      @include brand-text;
+      @include brand-color;
       font-weight: bold;
     }
   }
diff --git a/app/assets/stylesheets/datepicker_overrides.scss b/app/assets/stylesheets/datepicker_overrides.scss
index 66bdef12e..95a02db91 100644
--- a/app/assets/stylesheets/datepicker_overrides.scss
+++ b/app/assets/stylesheets/datepicker_overrides.scss
@@ -20,7 +20,7 @@
   thead {
 
     tr th {
-      border: 1px solid $brand;
+      @include brand-border;
     }
   }
 }
diff --git a/app/assets/stylesheets/functions/reverse_list.scss b/app/assets/stylesheets/functions/reverse_list.scss
new file mode 100644
index 000000000..2b1794567
--- /dev/null
+++ b/app/assets/stylesheets/functions/reverse_list.scss
@@ -0,0 +1,9 @@
+@function reverse-list($list) {
+  $reversed: [];
+
+  @for $i from length($list) * -1 through -1 {
+    $reversed: append($reversed, nth($list, abs($i)));
+  }
+
+  @return $reversed;
+}
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 8cdf08793..83a9f6cd6 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -95,10 +95,7 @@ p {
 }
 
 a {
-  &:hover,
-  &:active {
-    text-decoration: underline;
-  }
+  @include link;
 }
 
 a,
@@ -125,8 +122,6 @@ button,
 
 .button {
   @extend %button;
-  @include inverted-selection;
-  background: $brand;
 
   &.medium {
     font-size: $small-font-size;
@@ -135,8 +130,15 @@ button,
 
 .button.hollow {
   @include normal-selection;
+  @include anchor-color;
   border: 1px solid;
-  color: $anchor-color;
+
+  &:hover,
+  &:focus {
+    $hover-color: scale-color($anchor-color, $lightness: $button-hollow-hover-lightness);
+    color: $hover-color;
+    color: var(--anchor-color-hover, $hover-color);
+  }
 }
 
 .button.hollow.error {
@@ -260,7 +262,7 @@ button,
     }
 
     &.is-active {
-      @include brand-text;
+      @include brand-color;
       border-bottom: 2px solid;
       padding-bottom: rem-calc(1);
     }
@@ -287,7 +289,7 @@ button,
       padding: 0;
 
       &.is-active {
-        @include brand-text;
+        @include brand-color;
         font-weight: bold;
       }
     }
@@ -297,7 +299,7 @@ button,
     }
 
     &.is-active {
-      @include brand-text;
+      @include brand-color;
       border-bottom: 2px solid;
     }
   }
@@ -359,14 +361,14 @@ button,
     position: relative;
 
     &:hover {
-      @include brand-text;
+      @include brand-color;
       background: none;
       text-decoration: none;
     }
 
     &[aria-selected="true"],
     &.is-active {
-      @include brand-text;
+      @include brand-color;
       border-bottom: 0;
       font-weight: bold;
 
@@ -519,7 +521,7 @@ body > header,
       padding: rem-calc(6);
 
       [type="submit"] {
-        @include brand-text;
+        @include brand-color;
         background: none;
         border: 0;
         cursor: pointer;
@@ -547,7 +549,7 @@ body > header,
   }
 
   .top-bar {
-    @extend %brand-background;
+    @include background-with-text-contrast($main-header, [main-header, brand]);
   }
 }
 
@@ -599,7 +601,7 @@ body > header,
       text-align: left;
 
       @include breakpoint(medium) {
-        @include brand-text;
+        @include brand-color;
         background: $body-background;
         text-align: center;
       }
@@ -690,7 +692,7 @@ body > header,
 }
 
 .top-links {
-  @include background-with-text-contrast($brand-secondary);
+  @include background-with-text-contrast($top-links, [top-links, brand-secondary]);
   display: flex;
   flex-wrap: wrap;
   font-size: $small-font-size;
@@ -734,6 +736,7 @@ body > header,
   flex-direction: column;
 
   @include breakpoint(medium) {
+    @include background-with-text-contrast($subnavigation, subnavigation);
     flex-direction: row;
     padding-bottom: 0;
 
@@ -769,11 +772,11 @@ body > header,
       width: auto;
 
       &:hover {
-        color: $anchor-color;
+        @include anchor-color;
       }
 
       &.is-active {
-        @include brand-text;
+        @include brand-color;
         border-bottom: 2px solid;
         margin-bottom: 1px;
       }
@@ -845,7 +848,7 @@ body > header,
   }
 
   .is-active {
-    @include brand-text;
+    @include brand-color;
     border-bottom: 2px solid;
 
     &:hover {
@@ -909,7 +912,7 @@ footer {
 }
 
 .footer {
-  background: #f1f1f1;
+  @include background-with-text-contrast($footer, footer);
   clear: both;
   margin-top: $line-height * 2;
   padding-bottom: $line-height;
@@ -938,8 +941,8 @@ footer {
 
 .categories a,
 .geozone a {
+  @include anchor-color;
   background: $highlight;
-  color: $anchor-color;
 
   &:hover,
   &.is-active {
@@ -948,7 +951,7 @@ footer {
 }
 
 .sidebar-title {
-  border-top: 2px solid $brand;
+  @include brand-border(top, 2px);
   display: inline-block;
   font-size: rem-calc(16);
   font-weight: bold;
@@ -968,7 +971,7 @@ footer {
 }
 
 .auth-image {
-  @include background-with-text-contrast($brand);
+  @include brand-background;
   background-repeat: no-repeat;
   background-size: cover;
 
@@ -1357,8 +1360,8 @@ form {
   }
 
   &::before {
+    @include brand-color;
     background: $body-background;
-    color: $brand;
     content: "\4d";
     font-family: "icons" !important;
     font-size: $small-font-size;
@@ -2504,8 +2507,8 @@ table {
   h3 {
 
     &.title {
+      @include brand-border(top, 4px);
       display: inline-block;
-      border-top: 4px solid $brand;
       margin-bottom: 0;
       padding: $line-height / 2 0;
     }
diff --git a/app/assets/stylesheets/layout/social.scss b/app/assets/stylesheets/layout/social.scss
index 5590d633e..69f44a5d2 100644
--- a/app/assets/stylesheets/layout/social.scss
+++ b/app/assets/stylesheets/layout/social.scss
@@ -20,7 +20,7 @@
     text-decoration: none;
 
     &:hover {
-      @include brand-text;
+      @include brand-color;
     }
   }
 }
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 2592c59e3..3cd63e889 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -134,7 +134,7 @@
     margin-bottom: rem-calc(40);
 
     .debate-type {
-      @include brand-text;
+      @include brand-color;
       text-transform: uppercase;
       font-weight: 700;
       font-size: $small-font-size;
@@ -145,7 +145,7 @@
     }
 
     .debate-title a {
-      @include brand-text;
+      @include brand-color;
     }
   }
 
@@ -194,7 +194,7 @@
     }
 
     h4 a {
-      @include brand-text;
+      @include brand-color;
 
       &:hover {
         text-decoration: none;
@@ -211,7 +211,7 @@
     }
 
     .quiz-next {
-      @include brand-text;
+      @include brand-color;
       background: #ccdbe5;
       font-size: $small-font-size;
       font-weight: bold;
@@ -264,7 +264,7 @@
     }
 
     .control input:checked ~ .control-indicator {
-      background-color: $brand;
+      @include brand-background;
       border: 0;
     }
 
diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss
index 4ca8e0de6..1674e8705 100644
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -1,6 +1,7 @@
 @import "mixins/colors";
 
 @mixin base-button {
+  @include button-base;
   font-size: $base-font-size;
 
   &:focus,
@@ -13,30 +14,61 @@
   }
 }
 
-%button {
+@mixin regular-button($color: $brand) {
   @include base-button;
+
+  @if $color == $brand {
+    @include brand-background;
+  } @else {
+    @include background-with-text-contrast($color);
+  }
+
+  &:hover,
+  &:focus {
+    @include background-with-text-contrast($button-background-hover, button-background-hover);
+  }
 }
 
-@mixin regular-button($color: $brand) {
-  @include button($background: $color);
-  @include inverted-selection;
-  @include base-button;
+%button {
+  @include regular-button;
 }
 
 @mixin hollow-button($color: $anchor-color) {
-  @include button($style: hollow, $background: $color);
   @include normal-selection;
   @include base-button;
+  border-color: currentcolor;
+  color: $color;
   margin-bottom: 0;
+
+  @if $color == $anchor-color {
+    @include anchor-color;
+  } @else if $color == $brand {
+    @include brand-color;
+  }
+
+  &:hover,
+  &:focus {
+    $hover-color: scale-color($color, $lightness: $button-hollow-hover-lightness);
+    color: $hover-color;
+
+    @if $color == $anchor-color {
+      color: var(--anchor-color-hover, $hover-color);
+    }
+  }
 }
 
 @mixin link {
-  color: $anchor-color;
+  @include anchor-color;
   cursor: pointer;
 
+  &:hover,
+  &:active,
+  &:focus {
+    @include anchor-color-hover;
+  }
+
   &:hover,
   &:active {
-    color: $anchor-color-hover;
     text-decoration: underline;
   }
 }
@@ -45,7 +77,7 @@
   color: inherit;
 
   &:hover {
-    color: $anchor-color;
+    @include anchor-color;
   }
 }
 
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index 35bdb211c..d40c9b9a4 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/app/assets/stylesheets/mixins/colors.scss
@@ -1,19 +1,56 @@
-@mixin background-with-text-contrast($color) {
+@mixin background-with-text-contrast($color, $property-names: null, $check-invert-selection: true) {
   background-color: $color;
   color: color-pick-contrast($color);
-}
 
-@mixin brand-background($color: $brand, $invert-selection: true) {
-  @include background-with-text-contrast($color);
+  @if $property-names {
+    $background-color: $color;
+    $text-color: color-pick-contrast($color);
 
-  @if $invert-selection {
-    @include inverted-selection;
+    @each $property-name in reverse-list($property-names) {
+      $background-color: var(--#{$property-name}, #{$background-color});
+      $text-color: var(--#{$property-name}-contrast, #{$text-color});
+    }
+
+    background-color: $background-color;
+    color: $text-color;
+  }
+
+  @if $check-invert-selection {
+    @include inverted-selection($color);
   }
 }
 
-@mixin brand-text {
+@mixin text-color($color, $property-names: null) {
+  color: $color;
+
+  @if $property-names {
+    $text-color: $color;
+
+    @each $property-name in reverse-list($property-names) {
+      $text-color: var(--#{$property-name}, #{$text-color});
+    }
+
+    color: $text-color;
+  }
+}
+
+@mixin brand-background {
+  @include background-with-text-contrast($brand, brand);
+}
+
+@mixin brand-color {
   @include normal-selection;
-  color: $brand;
+  @include text-color($brand, brand);
+}
+
+@mixin brand-border($position: null, $width: 1px) {
+  @if $position == null {
+    border: $width solid $brand;
+    border: $width solid var(--brand, $brand);
+  } @else {
+    border-#{$position}: $width solid $brand;
+    border-#{$position}: $width solid var(--brand, $brand);
+  }
 }
 
 @mixin body-colors {
@@ -25,25 +62,44 @@
 
   &::selection,
   *::selection {
-    @include brand-background($invert-selection: false);
+    @include background-with-text-contrast($brand, brand, $check-invert-selection: false);
   }
 }
 
-@mixin inverted-selection {
-
-  &::selection,
-  *::selection {
-    background-color: rgba(color-pick-contrast($brand), 0.99);
-    color: $brand;
+@mixin inverted-selection($background-color) {
+  @if color-contrast($background-color, $brand) < 4.5 {
+    &::selection,
+    *::selection {
+      background-color: rgba(color-pick-contrast($brand), 0.99);
+      background-color: var(--brand-contrast, rgba(color-pick-contrast($brand), 0.99));
+      color: $brand;
+      color: var(--brand, $brand);
+    }
   }
 }
 
+@mixin brand-secondary-background {
+  @include background-with-text-contrast($brand-secondary, brand-secondary);
+}
+
+@mixin brand-secondary-color {
+  @include text-color($brand-secondary, brand-secondary);
+}
+
+@mixin anchor-color {
+  @include text-color($anchor-color, [anchor-color, brand]);
+}
+
+@mixin anchor-color-hover {
+  @include text-color($anchor-color-hover, anchor-color-hover);
+}
+
 %brand-background {
   @include brand-background;
 }
 
-%brand-text {
-  @include brand-text;
+%brand-color {
+  @include brand-color;
 }
 
 %body-colors {
diff --git a/app/assets/stylesheets/mixins/forms.scss b/app/assets/stylesheets/mixins/forms.scss
index 3a6b85df1..9a42dda08 100644
--- a/app/assets/stylesheets/mixins/forms.scss
+++ b/app/assets/stylesheets/mixins/forms.scss
@@ -1,6 +1,16 @@
 @import "mixins/icons";
 @import "mixins/layouts";
 
+@mixin public-form-header-background($color, $final-color-width) {
+  background-image: linear-gradient(
+    to right,
+    #{$color} 0,
+    #{$color} calc(100% - #{$final-color-width} - 1px),
+    #{$body-background} calc(100% - #{$final-color-width}),
+    #{$body-background} 100%
+  );
+}
+
 @mixin public-form-header {
   $border-width: 4px;
 
@@ -14,8 +24,9 @@
     $icon-size-with-padding: $icon-size + $padding-right;
     $polygon-size: $icon-size / 2;
     @include background-till-left-of-screen;
-    @include brand-background($brand-secondary);
+    @include brand-secondary-background;
     border: $border-width solid $brand-secondary;
+    border: $border-width solid var(--brand-secondary, $brand-secondary);
     border-bottom-right-radius: rem-calc(12);
     border-top-right-radius: rem-calc(12);
     margin-top: $line-height * 2;
@@ -30,14 +41,9 @@
 
     @include breakpoint(large) {
       $rounding-error: 6px;
+      @include public-form-header-background($brand-secondary, $icon-size-with-padding);
+      @include public-form-header-background(var(--brand-secondary, $brand-secondary), $icon-size-with-padding);
       padding-right: $icon-size-with-padding;
-      background-image: linear-gradient(
-        to right,
-        #{$brand-secondary} 0,
-        #{$brand-secondary} calc(100% - #{$icon-size-with-padding} - 1px),
-        #{$body-background} calc(100% - #{$icon-size-with-padding}),
-        #{$body-background} 100%
-      );
 
       &::after {
         background: $body-background;
@@ -90,7 +96,7 @@
         }
 
         &::before {
-          color: $brand-secondary;
+          @include brand-secondary-color;
           display: block;
           font-size: $icon-size;
           right: $padding-right;
diff --git a/app/assets/stylesheets/mixins/icons.scss b/app/assets/stylesheets/mixins/icons.scss
index 73336eaba..2d32ce7d2 100644
--- a/app/assets/stylesheets/mixins/icons.scss
+++ b/app/assets/stylesheets/mixins/icons.scss
@@ -1516,7 +1516,7 @@ $font-awesome-icons: (
 
   &:hover,
   &:focus {
-    color: $anchor-color-hover;
+    @include anchor-color-hover;
     text-decoration: none;
   }
 
diff --git a/app/assets/stylesheets/pages.scss b/app/assets/stylesheets/pages.scss
index c279698cf..27a09576b 100644
--- a/app/assets/stylesheets/pages.scss
+++ b/app/assets/stylesheets/pages.scss
@@ -57,7 +57,7 @@
 .more-info-content {
 
   h3 {
-    @include brand-text;
+    @include brand-color;
   }
 
   .additional-info {
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index a388687be..1708f6cd2 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -256,7 +256,7 @@
   aside {
 
     h2 {
-      border-top: 2px solid $brand;
+      @include brand-border(top, 2px);
       display: inline-block;
       font-size: rem-calc(16);
       margin: -1px 0 rem-calc(12);
@@ -830,7 +830,7 @@
   }
 
   .is-active {
-    @include brand-text;
+    @include brand-color;
 
     &::after {
       content: "\6c";
@@ -1082,7 +1082,7 @@
 }
 
 .current-phase {
-  @include brand-text;
+  @include brand-color;
 }
 
 .progress-votes {
@@ -1097,7 +1097,7 @@
   }
 
   .progress-meter {
-    background: $brand;
+    @include brand-background;
     border-radius: rem-calc(12);
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
@@ -1119,7 +1119,7 @@
     }
 
     span {
-      @include brand-text;
+      @include brand-color;
       font-size: $base-font-size;
     }
   }
@@ -1133,7 +1133,7 @@
     white-space: nowrap;
 
     &::before {
-      color: $brand;
+      @include brand-color;
       content: "\57";
       font-family: "icons";
       font-size: $small-font-size;
@@ -1144,7 +1144,7 @@
     }
 
     span {
-      @include brand-text;
+      @include brand-color;
       font-size: rem-calc(24);
     }
   }
@@ -1180,7 +1180,7 @@
   }
 
   .subtitle {
-    border-left: 2px solid $brand;
+    @include brand-border(left, 2px);
     margin: $line-height / 2 0;
     padding-left: $line-height / 2;
   }
@@ -1442,7 +1442,7 @@
   width: $line-height / 2;
 
   &.is-active {
-    background-color: $brand;
+    @include brand-background;
   }
 }
 
@@ -1482,7 +1482,7 @@
   cursor: pointer;
 
   &:hover {
-    @include background-with-text-contrast($brand-secondary);
+    @include brand-secondary-background;
     text-decoration: none;
   }
 }