diff --git a/docs/assets/scss/_colors.scss b/docs/assets/scss/_colors.scss
index 85104a8df581..1a5654898a82 100644
--- a/docs/assets/scss/_colors.scss
+++ b/docs/assets/scss/_colors.scss
@@ -2,23 +2,9 @@
 // Docs color palette classes
 //
 
-.bg-red-light     { background-color: $red-light; }
-.bg-orange-light  { background-color: $orange-light; }
-.bg-yellow-light  { background-color: $yellow-light; }
-.bg-green-light   { background-color: $green-light; }
-.bg-teal-light    { background-color: $teal-light; }
-.bg-blue-light    { background-color: $blue-light; }
-.bg-pink-light    { background-color: $pink-light; }
-.bg-purple-light  { background-color: $purple-light; }
-
-.bg-red-dark      { background-color: $red-dark; }
-.bg-orange-dark   { background-color: $orange-dark; }
-.bg-yellow-dark   { background-color: $yellow-dark; }
-.bg-green-dark    { background-color: $green-dark; }
-.bg-teal-dark     { background-color: $teal-dark; }
-.bg-blue-dark     { background-color: $blue-dark; }
-.bg-pink-dark     { background-color: $pink-dark; }
-.bg-purple-dark   { background-color: $purple-dark; }
-
-.bg-gray-light    { background-color: $gray-lighter; }
-.bg-gray-dark     { background-color: $gray-dark; }
+@each $color, $value in $colors {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}
diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index 72e842c3248c..be6555a4458a 100644
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -86,7 +86,7 @@
 .bd-example-container-header {
   height: 3rem;
   margin-bottom: .5rem;
-  background-color: lighten($brand-primary, 50%);
+  background-color: lighten($blue, 50%);
   border-radius: .25rem;
 }
 
@@ -94,7 +94,7 @@
   float: right;
   width: 4rem;
   height: 8rem;
-  background-color: lighten($brand-warning, 25%);
+  background-color: lighten($orange, 25%);
   border-radius: .25rem;
 }
 
diff --git a/docs/assets/scss/_featurettes.scss b/docs/assets/scss/_featurettes.scss
index 03119ce50872..53fc9db532ec 100644
--- a/docs/assets/scss/_featurettes.scss
+++ b/docs/assets/scss/_featurettes.scss
@@ -63,7 +63,7 @@
   color: #333;
 }
 .bd-featurette-img:hover {
-  color: $brand-primary;
+  color: $blue;
   text-decoration: none;
 }
 .bd-featurette-img img {
diff --git a/docs/assets/scss/_sidebar.scss b/docs/assets/scss/_sidebar.scss
index 7b9edefea99c..c461f181f9de 100644
--- a/docs/assets/scss/_sidebar.scss
+++ b/docs/assets/scss/_sidebar.scss
@@ -63,7 +63,7 @@
 }
 .bd-toc-link:hover,
 .bd-toc-link:focus {
-  color: $brand-primary;
+  color: $blue;
   text-decoration: none;
 }
 .active > .bd-toc-link {
@@ -94,7 +94,7 @@
 }
 .bd-sidebar .nav > li > a:hover,
 .bd-sidebar .nav > li > a:focus {
-  color: $brand-primary;
+  color: $blue;
   text-decoration: none;
   background-color: transparent;
 }
diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index dae4ec7d36e8..5f9eac093402 100644
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -14,19 +14,19 @@ Provide contextual feedback messages for typical user actions with the handful o
 
 ## Examples
 
-Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
+Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-green`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
 
 {% example html %}
-<div class="alert alert-success" role="alert">
+<div class="alert alert-green" role="alert">
   <strong>Well done!</strong> You successfully read this important alert message.
 </div>
-<div class="alert alert-info" role="alert">
+<div class="alert alert-teal" role="alert">
   <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
 </div>
-<div class="alert alert-warning" role="alert">
+<div class="alert alert-orange" role="alert">
   <strong>Warning!</strong> Better check yourself, you're not looking too good.
 </div>
-<div class="alert alert-danger" role="alert">
+<div class="alert alert-red" role="alert">
   <strong>Oh snap!</strong> Change a few things up and try submitting again.
 </div>
 {% endexample %}
@@ -39,16 +39,16 @@ Alerts are available for any length of text, as well as an optional dismiss butt
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
 
 {% example html %}
-<div class="alert alert-success" role="alert">
+<div class="alert alert-green" role="alert">
   <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
 </div>
-<div class="alert alert-info" role="alert">
+<div class="alert alert-teal" role="alert">
   <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
 </div>
-<div class="alert alert-warning" role="alert">
+<div class="alert alert-orange" role="alert">
   <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
 </div>
-<div class="alert alert-danger" role="alert">
+<div class="alert alert-red" role="alert">
   <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
 </div>
 {% endexample %}
@@ -58,7 +58,7 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
 Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
 
 {% example html %}
-<div class="alert alert-success" role="alert">
+<div class="alert alert-green" role="alert">
   <h4 class="alert-heading">Well done!</h4>
   <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
   <hr>
@@ -79,7 +79,7 @@ Using the alert JavaScript plugin, it's possible to dismiss any alert inline. He
 You can see this in action with a live demo:
 
 {% example html %}
-<div class="alert alert-warning alert-dismissible fade show" role="alert">
+<div class="alert alert-orange alert-dismissible fade show" role="alert">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index d676c9159438..fb10f45c0167 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -92,10 +92,10 @@ Use contextual classes to style list items with a stateful background and color.
 {% example html %}
 <ul class="list-group">
   <li class="list-group-item">Dapibus ac facilisis in</li>
-  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
-  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
-  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
-  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
+  <li class="list-group-item list-group-item-green">Dapibus ac facilisis in</li>
+  <li class="list-group-item list-group-item-teal">Cras sit amet nibh libero</li>
+  <li class="list-group-item list-group-item-orange">Porta ac consectetur ac</li>
+  <li class="list-group-item list-group-item-red">Vestibulum at eros</li>
 </ul>
 {% endexample %}
 
@@ -104,10 +104,10 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
 {% example html %}
 <div class="list-group">
   <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
-  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a>
-  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a>
-  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
+  <a href="#" class="list-group-item list-group-item-action list-group-item-green">Dapibus ac facilisis in</a>
+  <a href="#" class="list-group-item list-group-item-action list-group-item-teal">Cras sit amet nibh libero</a>
+  <a href="#" class="list-group-item list-group-item-action list-group-item-orange">Porta ac consectetur ac</a>
+  <a href="#" class="list-group-item list-group-item-action list-group-item-red">Vestibulum at eros</a>
 </div>
 {% endexample %}
 
diff --git a/docs/content/tables.md b/docs/content/tables.md
index 62579ac69d45..1c722f401bb8 100644
--- a/docs/content/tables.md
+++ b/docs/content/tables.md
@@ -444,11 +444,11 @@ Use contextual classes to color table rows or individual cells.
 
 | Class | Description |
 | --- | --- |
-| `.table-active` | Applies the hover color to a particular row or cell |
-| `.table-success` | Indicates a successful or positive action |
-| `.table-info` | Indicates a neutral informative change or action |
-| `.table-warning` | Indicates a warning that might need attention |
-| `.table-danger` | Indicates a dangerous or potentially negative action |
+| `.table-blue` | Applies the hover color to a particular row or cell |
+| `.table-green` | Indicates a successful or positive action |
+| `.table-teal` | Indicates a neutral informative change or action |
+| `.table-orange` | Indicates a warning that might need attention |
+| `.table-red` | Indicates a dangerous or potentially negative action |
 
 <div class="bd-example">
   <table class="table">
@@ -461,7 +461,7 @@ Use contextual classes to color table rows or individual cells.
       </tr>
     </thead>
     <tbody>
-      <tr class="table-active">
+      <tr class="table-blue">
         <th scope="row">1</th>
         <td>Column content</td>
         <td>Column content</td>
@@ -473,7 +473,7 @@ Use contextual classes to color table rows or individual cells.
         <td>Column content</td>
         <td>Column content</td>
       </tr>
-      <tr class="table-success">
+      <tr class="table-green">
         <th scope="row">3</th>
         <td>Column content</td>
         <td>Column content</td>
@@ -485,7 +485,7 @@ Use contextual classes to color table rows or individual cells.
         <td>Column content</td>
         <td>Column content</td>
       </tr>
-      <tr class="table-info">
+      <tr class="table-teal">
         <th scope="row">5</th>
         <td>Column content</td>
         <td>Column content</td>
@@ -497,7 +497,7 @@ Use contextual classes to color table rows or individual cells.
         <td>Column content</td>
         <td>Column content</td>
       </tr>
-      <tr class="table-warning">
+      <tr class="table-orange">
         <th scope="row">7</th>
         <td>Column content</td>
         <td>Column content</td>
@@ -509,7 +509,7 @@ Use contextual classes to color table rows or individual cells.
         <td>Column content</td>
         <td>Column content</td>
       </tr>
-      <tr class="table-danger">
+      <tr class="table-red">
         <th scope="row">9</th>
         <td>Column content</td>
         <td>Column content</td>
@@ -521,19 +521,19 @@ Use contextual classes to color table rows or individual cells.
 
 {% highlight html %}
 <!-- On rows -->
-<tr class="table-active">...</tr>
-<tr class="table-success">...</tr>
-<tr class="table-info">...</tr>
-<tr class="table-warning">...</tr>
-<tr class="table-danger">...</tr>
+<tr class="table-blue">...</tr>
+<tr class="table-green">...</tr>
+<tr class="table-teal">...</tr>
+<tr class="table-orange">...</tr>
+<tr class="table-red">...</tr>
 
 <!-- On cells (`td` or `th`) -->
 <tr>
-  <td class="table-active">...</td>
-  <td class="table-success">...</td>
-  <td class="table-info">...</td>
-  <td class="table-warning">...</td>
-  <td class="table-danger">...</td>
+  <td class="table-blue">...</td>
+  <td class="table-green">...</td>
+  <td class="table-teal">...</td>
+  <td class="table-orange">...</td>
+  <td class="table-red">...</td>
 </tr>
 {% endhighlight %}
 
diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md
index 08689dec013f..10ff2be413bc 100644
--- a/docs/getting-started/options.md
+++ b/docs/getting-started/options.md
@@ -45,52 +45,11 @@ You can find and customize these variables for key global options in our `_varia
 Many of Bootstrap's various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets.
 
 <div class="row">
-  <div class="col-md-4 mb-3">
-    <div class="p-3 bg-red-light">Light</div>
-    <div class="p-3 bg-red">Red</div>
-    <div class="p-3 bg-red-dark">Dark</div>
-  </div>
-  <div class="col-md-4 mb-3">
-    <div class="p-3 bg-orange-light">Light</div>
-    <div class="p-3 bg-orange">Orange</div>
-    <div class="p-3 bg-orange-dark">Dark</div>
-  </div>
-  <div class="col-md-4 mb-3">
-    <div class="p-3 bg-yellow-light">Light</div>
-    <div class="p-3 bg-yellow">Yellow</div>
-    <div class="p-3 bg-yellow-dark">Dark</div>
-  </div>
-
-  <div class="col-md-4 mb-3">
-    <div class="p-3 bg-green-light">Light</div>
-    <div class="p-3 bg-green">Green</div>
-    <div class="p-3 bg-green-dark">Dark</div>
-  </div>
-  <div class="col-md-4 mb-3">
-    <div class="p-3 bg-teal-light">Light</div>
-    <div class="p-3 bg-teal">Teal</div>
-    <div class="p-3 bg-teal-dark">Dark</div>
-  </div>
-  <div class="col-md-4 mb-3">
-    <div class="p-3 bg-blue-light">Light</div>
-    <div class="p-3 bg-blue">Blue</div>
-    <div class="p-3 bg-blue-dark">Dark</div>
-  </div>
-
-  <div class="col-md-4 mb-3">
-    <div class="p-3 bg-pink-light">Light</div>
-    <div class="p-3 bg-pink">Pink</div>
-    <div class="p-3 bg-pink-dark">Dark</div>
-  </div>
-  <div class="col-md-4 mb-3">
-    <div class="p-3 bg-purple-light">Light</div>
-    <div class="p-3 bg-purple">Purple</div>
-    <div class="p-3 bg-purple-dark">Dark</div>
-  </div>
-  <div class="col-md-4 mb-3">
-    <div class="p-3 bg-gray-light">Light</div>
-    <div class="p-3 bg-gray">Gray</div>
-    <div class="p-3 bg-gray-dark">Dark</div>
-  </div>
-
+  {% for color in site.data.colors %}
+    <div class="col-md-4 mb-3">
+      {% unless color.name == "white" or color.name == "gray-dark" %}
+        <div class="p-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
+      {% endunless %}
+    </div>
+  {% endfor %}
 </div>
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 562821a58b77..532268d0a4d5 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -41,15 +41,7 @@
 //
 // Generate contextual modifier classes for colorizing the alert.
 
-.alert-success {
-  @include alert-variant($alert-success-bg, $alert-success-border-color, $alert-success-text);
-}
-.alert-info {
-  @include alert-variant($alert-info-bg, $alert-info-border-color, $alert-info-text);
-}
-.alert-warning {
-  @include alert-variant($alert-warning-bg, $alert-warning-border-color, $alert-warning-text);
-}
-.alert-danger {
-  @include alert-variant($alert-danger-bg, $alert-danger-border-color, $alert-danger-text);
-}
+.alert-green { @include alert-variant($alert-green-bg, $alert-green-border-color, $alert-green-text); }
+.alert-teal { @include alert-variant($alert-teal-bg, $alert-teal-border-color, $alert-teal-text); }
+.alert-orange { @include alert-variant($alert-orange-bg, $alert-orange-border-color, $alert-orange-text); }
+.alert-red { @include alert-variant($alert-red-bg, $alert-red-border-color, $alert-red-text); }
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 55e8cb43a491..d77931c72b40 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -260,7 +260,7 @@ select.form-control-lg {
 
 // Form validation states
 .has-success {
-  @include form-control-validation($brand-success);
+  @include form-control-validation($green);
 
   .form-control-success {
     background-image: $form-icon-success;
@@ -268,7 +268,7 @@ select.form-control-lg {
 }
 
 .has-warning {
-  @include form-control-validation($brand-warning);
+  @include form-control-validation($orange);
 
   .form-control-warning {
     background-image: $form-icon-warning;
@@ -276,7 +276,7 @@ select.form-control-lg {
 }
 
 .has-danger {
-  @include form-control-validation($brand-danger);
+  @include form-control-validation($red);
 
   .form-control-danger {
     background-image: $form-icon-danger;
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index d7840905ec06..cc8a3dcd8501 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -109,7 +109,7 @@
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
 
-// @include list-group-item-variant(success, $brand-success, $state-success-text);
-// @include list-group-item-variant(info, $brand-info, $state-info-text);
-// @include list-group-item-variant(warning, $brand-warning, $state-warning-text);
-// @include list-group-item-variant(danger, $brand-danger, $state-danger-text);
+@include list-group-item-variant(green, $list-green-bg, $list-green-text);
+@include list-group-item-variant(teal, $list-teal-bg, $list-teal-text);
+@include list-group-item-variant(orange, $list-orange-bg, $list-orange-text);
+@include list-group-item-variant(red, $list-red-bg, $list-red-text);
diff --git a/scss/_tables.scss b/scss/_tables.scss
index ff001a213756..2207e567386e 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -93,11 +93,11 @@
 // inheritance to nested tables.
 
 // Generate the contextual variants
-@include table-row-variant(active, $table-bg-active);
-@include table-row-variant(success, $brand-success);
-@include table-row-variant(info, $brand-info);
-@include table-row-variant(warning, $brand-warning);
-@include table-row-variant(danger, $brand-danger);
+@include table-row-variant(blue, $table-blue-bg);
+@include table-row-variant(green, $table-green-bg);
+@include table-row-variant(teal, $table-teal-bg);
+@include table-row-variant(orange, $table-orange-bg);
+@include table-row-variant(red, $table-red-bg);
 
 
 // Inverse styles
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2502a2f7c871..3c31e522bece 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -104,74 +104,46 @@
 //
 // Grayscale and brand colors for use across Bootstrap.
 
-// Start with assigning color names to specific hex values.
-$white:  #fff !default;
-$black:  #000 !default;
-
-$red:       #d9534f !default;
-$red-light: #f2dede !default;
-$red-dark:  #a94442 !default;
-
-$orange:        #f0ad4e !default;
-$orange-light:  mix($orange, #fff, 60%) !default; // todo
-$orange-dark:   mix($orange, #000, 50%) !default; // todo
-
-$yellow:        #ffd500 !default;
-$yellow-light:  #fcf8e3 !default;
-$yellow-dark:   #8a6d3b !default;
-
-$green:       #5cb85c !default;
-$green-light: #dff0d8 !default;
-$green-dark:  #3c763d !default;
-
-$blue:        #0275d8 !default;
-$blue-light:  mix($blue, #fff, 60%) !default; // todo
-$blue-dark:   mix($blue, #000, 50%) !default; // todo
-
-$teal:        #5bc0de !default;
-$teal-light:  #d9edf7 !default;
-$teal-dark:   #31708f !default;
-
-$pink:        #ff5b77 !default;
-$pink-light:  mix($pink, #fff, 60%) !default; // todo
-$pink-dark:   mix($pink, #000, 50%) !default; // todo
-
-$purple:        #613d7c !default;
-$purple-light:  mix($purple, #fff, 60%) !default; // todo
-$purple-dark:   mix($purple, #000, 50%) !default; // todo
-
-// Create grayscale
+// Grays
+$black:         #000 !default;
 $gray-dark:     #292b2c !default;
 $gray:          #464a4c !default;
 $gray-light:    #636c72 !default;
 $gray-lighter:  #eceeef !default;
 $gray-lightest: #f7f7f9 !default;
+$white:         #fff !default;
+
+// Colors
+$red:     #d9534f !default;
+$orange:  #f0ad4e !default;
+$yellow:  #ffd500 !default;
+$green:   #5cb85c !default;
+$teal:    #5bc0de !default;
+$blue:    #0275d8 !default;
+$pink:    #ff5b77 !default;
+$purple:  #613d7c !default;
 
 // Color map
 // Used within Bootstrap to generate a list of class modifiers (e.g., `.btn-blue`).
-
 $colors: (
-  "red": $red,
-  "orange": $orange,
-  "yellow": $yellow,
-  "green": $green,
-  "teal": $teal,
-  "blue": $blue,
-  "pink": $pink,
-  "purple": $purple,
-  "white": $white,
-  "gray": $gray-light,
-  "gray-dark": $gray-dark
+  red: $red,
+  orange: $orange,
+  yellow: $yellow,
+  green: $green,
+  teal: $teal,
+  blue: $blue,
+  pink: $pink,
+  purple: $purple,
+  white: $white,
+  gray: $gray-light,
+  gray-dark: $gray-dark
 ) !default;
 
-// Reassign color vars to semantic color scheme
-$brand-primary:             $blue !default;
-$brand-success:             $green !default;
-$brand-info:                $teal !default;
-$brand-warning:             $orange !default;
-$brand-danger:              $red !default;
-$brand-inverse:             $gray-dark !default;
-
+// Color function
+// Allow us to reference the `$colors` map color names (e.g., "blue").
+@function color($key: "blue") {
+  @return map-get($colors, $key);
+}
 
 // Options
 //
@@ -389,6 +361,26 @@ $table-inverse-bg-active:       $table-inverse-bg-hover !default;
 $table-inverse-border-color:    lighten($gray-dark, 7.5%) !default;
 $table-inverse-color:           $body-bg !default;
 
+$table-blue-bg:             lighten($blue, 50%) !default;
+$table-blue-text:           lighten($blue, 45%) !default;
+$table-blue-border-color:   darken($table-blue-bg, 5%) !default;
+
+$table-green-bg:            #dff0d8 !default;
+$table-green-text:          #3c763d !default;
+$table-green-border-color:  darken($table-green-bg, 5%) !default;
+
+$table-teal-bg:             #d9edf7 !default;
+$table-teal-text:           #31708f !default;
+$table-teal-border-color:   darken($table-teal-bg, 5%) !default;
+
+$table-orange-bg:           #fcf8e3 !default;
+$table-orange-text:         #8a6d3b !default;
+$table-orange-border-color: darken($table-orange-bg, 5%) !default;
+
+$table-red-bg:              #f2dede !default;
+$table-red-text:            #a94442 !default;
+$table-red-border-color:    darken($table-red-bg, 5%) !default;
+
 
 // Buttons
 //
@@ -438,7 +430,7 @@ $input-border-radius-lg:         $border-radius-lg !default;
 $input-border-radius-sm:         $border-radius-sm !default;
 
 $input-bg-focus:                 $input-bg !default;
-$input-border-color-focus:       lighten($brand-primary, 25%) !default;
+$input-border-color-focus:       lighten($blue, 25%) !default;
 $input-box-shadow-focus:         $input-box-shadow, rgba($input-border-color-focus, .6) !default;
 $input-color-focus:              $input-color !default;
 
@@ -478,19 +470,19 @@ $custom-control-disabled-indicator-bg:       $gray-lighter !default;
 $custom-control-disabled-description-color:  $gray-light !default;
 
 $custom-control-checked-indicator-color:      $white !default;
-$custom-control-checked-indicator-bg:         $brand-primary !default;
+$custom-control-checked-indicator-bg:         $blue !default;
 $custom-control-checked-indicator-box-shadow: none !default;
 
-$custom-control-focus-indicator-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default;
+$custom-control-focus-indicator-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $blue !default;
 
 $custom-control-active-indicator-color:      $white !default;
-$custom-control-active-indicator-bg:         lighten($brand-primary, 35%) !default;
+$custom-control-active-indicator-bg:         lighten($blue, 35%) !default;
 $custom-control-active-indicator-box-shadow: none !default;
 
 $custom-checkbox-radius: $border-radius !default;
 $custom-checkbox-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$custom-checkbox-indeterminate-bg: $brand-primary !default;
+$custom-checkbox-indeterminate-bg: $blue !default;
 $custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default;
 $custom-checkbox-indeterminate-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
 $custom-checkbox-indeterminate-box-shadow: none !default;
@@ -513,14 +505,14 @@ $custom-select-border-width:  $input-btn-border-width !default;
 $custom-select-border-color:  $input-border-color !default;
 $custom-select-border-radius: $border-radius !default;
 
-$custom-select-focus-border-color: lighten($brand-primary, 25%) !default;
+$custom-select-focus-border-color: lighten($blue, 25%) !default;
 $custom-select-focus-box-shadow:   inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
 
 $custom-select-sm-font-size:  75% !default;
 
 $custom-file-height:           2.5rem !default;
 $custom-file-width:            14rem !default;
-$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default;
+$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $blue !default;
 
 $custom-file-padding-y:     1rem !default;
 $custom-file-padding-x:     .5rem !default;
@@ -544,13 +536,13 @@ $custom-file-text: (
 
 
 // Form validation icons
-$form-icon-success-color: $brand-success !default;
+$form-icon-success-color: $green !default;
 $form-icon-success: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$form-icon-warning-color: $brand-warning !default;
+$form-icon-warning-color: $orange !default;
 $form-icon-warning: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$form-icon-danger-color: $brand-danger !default;
+$form-icon-danger-color: $red !default;
 $form-icon-danger: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='#{$form-icon-danger-color}' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"), "#", "%23") !default;
 
 
@@ -668,8 +660,8 @@ $pagination-hover-bg:                  $gray-lighter !default;
 $pagination-hover-border-color:        #ddd !default;
 
 $pagination-active-color:              $white !default;
-$pagination-active-bg:                 $brand-primary !default;
-$pagination-active-border-color:       $brand-primary !default;
+$pagination-active-bg:                 $blue !default;
+$pagination-active-border-color:       $blue !default;
 
 $pagination-disabled-color:            $gray-light !default;
 $pagination-disabled-bg:               $white !default;
@@ -798,21 +790,21 @@ $alert-border-radius:         $border-radius !default;
 $alert-link-font-weight:      $font-weight-bold !default;
 $alert-border-width:          $border-width !default;
 
-$alert-success-bg:            #dff0d8 !default;
-$alert-success-text:          #3c763d !default;
-$alert-success-border-color:  darken($alert-success-bg, 5%) !default;
+$alert-green-bg:            #dff0d8 !default;
+$alert-green-text:          #3c763d !default;
+$alert-green-border-color:  darken($alert-green-bg, 5%) !default;
 
-$alert-info-bg:               #d9edf7 !default;
-$alert-info-text:             #31708f !default;
-$alert-info-border-color:     darken($alert-info-bg, 5%) !default;
+$alert-teal-bg:             #d9edf7 !default;
+$alert-teal-text:           #31708f !default;
+$alert-teal-border-color:   darken($alert-teal-bg, 5%) !default;
 
-$alert-warning-bg:            #fcf8e3 !default;
-$alert-warning-text:          #8a6d3b !default;
-$alert-warning-border-color:  darken($alert-warning-bg, 5%) !default;
+$alert-orange-bg:           #fcf8e3 !default;
+$alert-orange-text:         #8a6d3b !default;
+$alert-orange-border-color: darken($alert-orange-bg, 5%) !default;
 
-$alert-danger-bg:             #f2dede !default;
-$alert-danger-text:           #a94442 !default;
-$alert-danger-border-color:   darken($alert-danger-bg, 5%) !default;
+$alert-red-bg:              #f2dede !default;
+$alert-red-text:            #a94442 !default;
+$alert-red-border-color:    darken($alert-red-bg, 5%) !default;
 
 
 // Progress bars
@@ -823,7 +815,7 @@ $progress-bg:                   $gray-lighter !default;
 $progress-border-radius:        $border-radius !default;
 $progress-box-shadow:           inset 0 .1rem .1rem rgba($black,.1) !default;
 $progress-bar-color:            $white !default;
-$progress-bar-bg:               $brand-primary !default;
+$progress-bar-bg:               $blue !default;
 $progress-bar-animation-timing: 1s linear infinite !default;
 $progress-bar-transition:       width .6s ease !default;
 
@@ -852,6 +844,21 @@ $list-group-link-hover-color:    $list-group-link-color !default;
 $list-group-link-active-color:   $list-group-color !default;
 $list-group-link-active-bg:      $gray-lighter !default;
 
+$list-green-bg:             #dff0d8 !default;
+$list-green-text:           #3c763d !default;
+$list-green-border-color:   darken($list-green-bg, 5%) !default;
+
+$list-teal-bg:              #d9edf7 !default;
+$list-teal-text:            #31708f !default;
+$list-teal-border-color:    darken($list-teal-bg, 5%) !default;
+
+$list-orange-bg:            #fcf8e3 !default;
+$list-orange-text:          #8a6d3b !default;
+$list-orange-border-color:  darken($list-orange-bg, 5%) !default;
+
+$list-red-bg:               #f2dede !default;
+$list-red-text:             #a94442 !default;
+$list-red-border-color:     darken($list-red-bg, 5%) !default;
 
 // Image thumbnails