diff --git a/app/assets/stylesheets/_consul_custom_overrides.scss b/app/assets/stylesheets/_consul_custom_overrides.scss
new file mode 100644
index 000000000..ea1d5bea6
--- /dev/null
+++ b/app/assets/stylesheets/_consul_custom_overrides.scss
@@ -0,0 +1,12 @@
+// Override CONSUL and Foundation settings in this file.
+//
+// For example, override the brand color to #123456 with:
+//
+// $brand: #123456;
+//
+// Or override Foundation's tooltip color to #123456 with:
+//
+// $tooltip-color: #123456;
+//
+// The variables you can override are defined in the
+// `_settings.scss` and `_consul_settings.scss` files.
diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index c3bb087ef..f3dae6a48 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -10,75 +10,75 @@
 // 1. CONSUL variables
 // --------------------
 
-$base-font-size:      rem-calc(17);
-$base-line:           rem-calc(26);
-$line-height:         rem-calc(24);
-$tiny-font-size:      rem-calc(12);
+$base-font-size:      rem-calc(17) !default;
+$base-line:           rem-calc(26) !default;
+$line-height:         rem-calc(24) !default;
+$tiny-font-size:      rem-calc(12) !default;
 
-$font-family-serif: Georgia, "Times New Roman", Times, serif;
+$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
 
-$brand:             #004a83;
-$brand-secondary:   darken($brand, 10%);
-$dark:              $brand-secondary;
+$brand:             #004a83 !default;
+$brand-secondary:   darken($brand, 10%) !default;
+$dark:              $brand-secondary !default;
 
-$text:              #222;
-$text-medium:       #515151;
-$text-light:        #bfbfbf;
+$text:              #222 !default;
+$text-medium:       #515151 !default;
+$text-light:        #bfbfbf !default;
 
-$border:            #dee0e3;
+$border:            #dee0e3 !default;
 
-$link:              $brand;
-$link-hover:        darken($link, 20%);
+$link:              $brand !default;
+$link-hover:        darken($link, 20%) !default;
 
-$debates:           $brand;
+$debates:           $brand !default;
 
-$like:              #7bd2a8;
-$unlike:            #ef8585;
+$like:              #7bd2a8 !default;
+$unlike:            #ef8585 !default;
 
-$delete:            #f04124;
-$check:             #46db91;
+$delete:            #f04124 !default;
+$check:             #46db91 !default;
 
-$proposals:         #ffa42d;
-$proposals-dark:    #794500;
+$proposals:         #ffa42d !default;
+$proposals-dark:    #794500 !default;
 
-$budget:            #7e328a;
-$budget-hover:      #7571bf;
+$budget:            #7e328a !default;
+$budget-hover:      #7571bf !default;
 
-$highlight:         #e7f2fc;
-$highlight-soft:    #f3f8fd;
-$light:             #f5f7fa;
-$featured:          #ffdc5c;
+$highlight:         #e7f2fc !default;
+$highlight-soft:    #f3f8fd !default;
+$light:             #f5f7fa !default;
+$featured:          #ffdc5c !default;
 
-$footer-border:     #bfc1c3;
+$footer-border:     #bfc1c3 !default;
 
-$success-bg:        #dff0d8;
-$success-border:    #d6e9c6;
-$color-success:     #3c763d;
+$success-bg:        #dff0d8 !default;
+$success-border:    #d6e9c6 !default;
+$color-success:     #3c763d !default;
 
-$info-bg:           #d9edf7;
-$info-border:       #bce8f1;
-$color-info:        #31708f;
+$info-bg:           #d9edf7 !default;
+$info-border:       #bce8f1 !default;
+$color-info:        #31708f !default;
 
-$warning-bg:        #fcf8e3;
-$warning-border:    #faebcc;
-$color-warning:     #8a6d3b;
+$warning-bg:        #fcf8e3 !default;
+$warning-border:    #faebcc !default;
+$color-warning:     #8a6d3b !default;
 
-$alert-bg:          #f2dede;
-$alert-border:      #ebccd1;
-$color-alert:       #a94442;
+$alert-bg:          #f2dede !default;
+$alert-border:      #ebccd1 !default;
+$color-alert:       #a94442 !default;
 
-$pdf-primary:       #0300ff;
-$pdf-secondary:     #ff9e00;
+$pdf-primary:       #0300ff !default;
+$pdf-secondary:     #ff9e00 !default;
 
-$outline-focus:     3px solid #ffbf47;
+$outline-focus:     3px solid #ffbf47 !default;
 
-$input-height:      $line-height * 2;
+$input-height:      $line-height * 2 !default;
 
-$icon-width: $line-height * 2;
+$icon-width: $line-height * 2 !default;
 
-$off-screen-left: -1000rem;
+$off-screen-left: -1000rem !default;
 
-$sdg-icon-min-width: 40px;
+$sdg-icon-min-width: 40px !default;
 
 $sdg-colors: (
   1: #e5243b,
@@ -98,17 +98,17 @@ $sdg-colors: (
   15: #56c02b,
   16: #00689d,
   17: #19486a
-);
+) !default;
 
 // 2. Foundation settings overrides
 // ---------------------------------
 
-$black: #222;
-$white: #fdfdfd;
+$black: #222 !default;
+$white: #fdfdfd !default;
 
-$body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important;
+$body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important !default;
 
-$global-radius: rem-calc(3);
+$global-radius: rem-calc(3) !default;
 
 $header-styles: (
   small: (
@@ -127,22 +127,22 @@ $header-styles: (
     "h5": ("font-size": 16),
     "h6": ("font-size": 13),
   ),
-);
+) !default;
 
-$small-font-size: rem-calc(14);
+$small-font-size: rem-calc(14) !default;
 
-$abbr-underline: none;
+$abbr-underline: none !default;
 
-$closebutton-color: $text;
+$closebutton-color: $text !default;
 
-$tab-background-active: $white;
+$tab-background-active: $white !default;
 
-$tab-item-font-size: $base-font-size;
-$tab-item-padding: $line-height / 2  0;
-$tab-content-border: $border;
+$tab-item-font-size: $base-font-size !default;
+$tab-item-padding: $line-height / 2  0 !default;
+$tab-content-border: $border !default;
 
-$orbit-bullet-diameter: 0.8rem;
+$orbit-bullet-diameter: 0.8rem !default;
 
-$show-header-for-stacked: true;
+$show-header-for-stacked: true !default;
 
-$tooltip-background-color: $brand;
+$tooltip-background-color: $brand !default;
diff --git a/app/assets/stylesheets/_custom_settings.scss b/app/assets/stylesheets/_custom_settings.scss
index 92a304e6f..e864a20f4 100644
--- a/app/assets/stylesheets/_custom_settings.scss
+++ b/app/assets/stylesheets/_custom_settings.scss
@@ -1,5 +1,5 @@
-// Overrides and adds customized foundation settings in this file
-// Read more on documentation:
-// * English: https://github.com/consul/consul/blob/master/CUSTOMIZE_EN.md#css
-// * Spanish: https://github.com/consul/consul/blob/master/CUSTOMIZE_ES.md#css
+// Add custom variables in this file. For example, define a new variable
+// called `$important-link` which you can use in your custom CSS files.
 //
+// To override existing variables, use the file named
+// `_consul_custom_overrides.scss` instead
diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss
index bb1811d9c..a765f1761 100644
--- a/app/assets/stylesheets/foundation_and_overrides.scss
+++ b/app/assets/stylesheets/foundation_and_overrides.scss
@@ -1,6 +1,7 @@
 @charset "utf-8";
 
 @import "util/util";
+@import "consul_custom_overrides";
 @import "consul_settings";
 @import "settings";
 @import "custom_settings";