diff --git a/docs/source/examples.md b/docs/source/examples.md
index 1678f0e00..ffe825a5b 100644
--- a/docs/source/examples.md
+++ b/docs/source/examples.md
@@ -9,22 +9,197 @@ Some component examples, just to get a vibe for what's possible and for us to do
 
 ## Alerts
 
-<div class="bg-amber-lightest border border-amber-light rounded p-4 mb-4">
-    <div class="text-medium text-amber">
-        Warning message
+<div class="bg-red-lightest border border-red-light rounded p-4 mb-4">
+    <div class="text-medium text-red-dark">
+        Alert message
     </div>
-    <div class="text-amber">
-        Some additional text to explain what went wrong.
+    <div class="text-red-dark">
+        Some additional text to explain what happened.
     </div>
 </div>
 
-<div class="bg-green-lightest border border-green-light rounded p-4">
-    <div class="text-medium text-green">
-        Success message
+<div class="bg-orange-lightest border border-orange-light rounded p-4 mb-4">
+    <div class="text-medium text-orange-dark">
+        Alert message
     </div>
-    <div class="text-green">
-        Some additional text to explain what went awesome.
+    <div class="text-orange-dark">
+        Some additional text to explain what happened.
+    </div>
+</div>
+
+<div class="bg-amber-lightest border border-amber-light rounded p-4 mb-4">
+    <div class="text-medium text-amber-dark">
+        Alert message
+    </div>
+    <div class="text-amber-dark">
+        Some additional text to explain what happened.
+    </div>
+</div>
+
+<div class="bg-yellow-lightest border border-yellow-light rounded p-4 mb-4">
+    <div class="text-medium text-yellow-dark">
+        Alert message
+    </div>
+    <div class="text-yellow-dark">
+        Some additional text to explain what happened.
+    </div>
+</div>
+
+<div class="bg-green-lightest border border-green-light rounded p-4 mb-4">
+    <div class="text-medium text-green-dark">
+        Alert message
+    </div>
+    <div class="text-green-dark">
+        Some additional text to explain what happened.
+    </div>
+</div>
+
+<div class="bg-teal-lightest border border-teal-light rounded p-4 mb-4">
+    <div class="text-medium text-teal-dark">
+        Alert message
+    </div>
+    <div class="text-teal-dark">
+        Some additional text to explain what happened.
+    </div>
+</div>
+
+<div class="bg-blue-lightest border border-blue-light rounded p-4 mb-4">
+    <div class="text-medium text-blue-dark">
+        Alert message
+    </div>
+    <div class="text-blue-dark">
+        Some additional text to explain what happened.
+    </div>
+</div>
+
+<div class="bg-indigo-lightest border border-indigo-light rounded p-4 mb-4">
+    <div class="text-medium text-indigo-dark">
+        Alert message
+    </div>
+    <div class="text-indigo-dark">
+        Some additional text to explain what happened.
+    </div>
+</div>
+
+<div class="bg-purple-lightest border border-purple-light rounded p-4 mb-4">
+    <div class="text-medium text-purple-dark">
+        Alert message
+    </div>
+    <div class="text-purple-dark">
+        Some additional text to explain what happened.
+    </div>
+</div>
+
+<div class="bg-pink-lightest border border-pink-light rounded p-4 mb-4">
+    <div class="text-medium text-pink-dark">
+        Alert message
+    </div>
+    <div class="text-pink-dark">
+        Some additional text to explain what happened.
     </div>
 </div>
 
 ## Buttons
+
+<div class="mb-4">
+    <button class="text-medium text-dark rounded py-2 px-4 bg-light mr-4">
+        Save
+    </button>
+    <button class="text-medium text-dark rounded py-2 px-4 bg-light-soft mr-4">
+        Save
+    </button>
+    <button class="text-medium text-dark rounded py-2 px-4 bg-light-softer mr-4">
+        Save
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-dark hover-bg-dark-dark mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-dark-soft mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-dark-softer mr-4">
+        Save
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-red hover-bg-red-dark mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-red-light mr-4">
+        Disabled
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-orange hover-bg-orange-dark mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-orange-light mr-4">
+        Disabled
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-amber hover-bg-amber-dark mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-amber-light mr-4">
+        Disabled
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-yellow hover-bg-yellow-dark mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-yellow-light mr-4">
+        Disabled
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-green hover-bg-green-dark mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-green-light mr-4">
+        Disabled
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-teal hover-bg-teal-dark mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-teal-light mr-4">
+        Disabled
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-blue hover-bg-blue-dark mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-blue-light mr-4">
+        Disabled
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-indigo hover-bg-indigo-dark mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-indigo-light mr-4">
+        Disabled
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-purple hover-bg-purple-dark mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-purple-light mr-4">
+        Disabled
+    </button>
+</div>
+<div class="mb-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-pink hover-bg-pink-dark mr-4">
+        Save
+    </button>
+    <button class="text-medium text-light rounded py-2 px-4 bg-pink-light mr-4">
+        Disabled
+    </button>
+</div>
diff --git a/src/colors.less b/src/colors.less
index 8ac6c7468..a884a079c 100644
--- a/src/colors.less
+++ b/src/colors.less
@@ -1,35 +1,62 @@
-@color-white:    #ffffff;
-@color-grey-50:  #fafafa;
-@color-grey-100: #f5f5f5;
-@color-grey-200: #eeeeee;
-@color-grey-300: #e0e0e0;
-@color-grey-400: #bdbdbd;
-@color-grey-500: #9e9e9e;
-@color-grey-600: #757575;
-@color-grey-700: #616161;
-@color-grey-800: #424242;
-@color-grey-900: #212121;
-@color-black:    #000000;
+@color-white:          #ffffff;
+@color-grey-50:        #fafafa;
+@color-grey-100:       #f5f5f5;
+@color-grey-200:       #eeeeee;
+@color-grey-300:       #e0e0e0;
+@color-grey-400:       #bdbdbd;
+@color-grey-500:       #9e9e9e;
+@color-grey-600:       #757575;
+@color-grey-700:       #616161;
+@color-grey-800:       #424242;
+@color-grey-900:       #212121;
+@color-black:          #000000;
 
+@color-red-dark:       #d43633;
 @color-red:            #f25451;
 @color-red-light:      #fa8785;
+@color-red-lightest:    #fff1f0;
+
+@color-orange-dark:    #f28900;
 @color-orange:         #ffb447;
 @color-orange-light:   #ffce85;
+@color-orange-lightest: #fff7ec;
+
+@color-amber-dark:     #faa700;
 @color-amber:          #ffbf00;
 @color-amber-light:    #ffe493;
-@color-amber-lightest: #fff7df;
+@color-amber-lightest:  #fff8e3;
+
+@color-yellow-dark:    #ffd900;
 @color-yellow:         #ffed4a;
 @color-yellow-light:   #fff6a5;
+@color-yellow-lightest: #fffbd7;
+
+@color-green-dark:     #34ae4c;
 @color-green:          #57d06f;
 @color-green-light:    #b1f3be;
-@color-green-lightest: #dfffe6;
+@color-green-lightest:  #eefff1;
+
+@color-teal-dark:      #249e92;
 @color-teal:           #4dc0b5;
-@color-teal-light:     #92e0d8;
+@color-teal-light:     #9eebe4;
+@color-teal-lightest:   #eefffd;
+
+@color-blue-dark:      #3687c8;
 @color-blue:           #4aa2ea;
 @color-blue-light:     #acdaff;
+@color-blue-lightest:   #f1f9ff;
+
+@color-indigo-dark:    #4957a5;
 @color-indigo:         #6574cd;
-@color-indigo-light:   #a3aeed;
+@color-indigo-light:   #bcc5fb;
+@color-indigo-lightest: #f4f5ff;
+
+@color-purple-dark:    #714cb4;
 @color-purple:         #976ae6;
 @color-purple-light:   #ceb3ff;
+@color-purple-lightest: #f7f3ff;
+
+@color-pink-dark:      #d84f7d;
 @color-pink:           #f66d9b;
 @color-pink-light:     #ffa5c3;
+@color-pink-lightest:   #fdf2f5;
diff --git a/src/generators.less b/src/generators.less
index 47816cbdd..56e7eaad7 100644
--- a/src/generators.less
+++ b/src/generators.less
@@ -4,6 +4,7 @@
 @import "generators/_utility-variants";
 
 @import "generators/backgrounds";
+@import "generators/backgrounds-hover";
 @import "generators/border-colors";
 @import "generators/border-radius";
 @import "generators/border-widths";
diff --git a/src/generators/backgrounds-hover.less b/src/generators/backgrounds-hover.less
new file mode 100644
index 000000000..b1e34728b
--- /dev/null
+++ b/src/generators/backgrounds-hover.less
@@ -0,0 +1,18 @@
+.define-bg-hover-colors(@variants) {
+  .generate-utility-variants('hover-bg'; @variants; {
+    &:hover { background-color: extract(@__variant-value, 2); }
+  });
+}
+
+.define-bg-hover-colors(@variants; none) {
+  .define-bg-hover-colors(@variants);
+}
+
+.define-bg-hover-colors(@variants; @screens) when not (@screens = none) {
+  .define-bg-hover-colors(@variants);
+  .generate-responsive-utility-variants('hover-bg'; @variants; @screens; {
+    &:hover { background-color: extract(@__variant-value, 2); }
+  });
+}
+
+
diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less
index b77acfc62..277d3a01d 100644
--- a/src/utilities/backgrounds.less
+++ b/src/utilities/backgrounds.less
@@ -1,34 +1,62 @@
 @bg-colors:
-  'light'        @color-white,
-  'light-soft'   @color-grey-100,
-  'light-softer' @color-grey-200,
+  'light'          @color-white,
+  'light-soft'     @color-grey-100,
+  'light-softer'   @color-grey-200,
 
-  'dark'         @color-grey-800,
-  'dark-soft'    @color-grey-700,
-  'dark-softer'  @color-grey-600,
+  'dark'           @color-grey-800,
+  'dark-soft'      @color-grey-700,
+  'dark-softer'    @color-grey-600,
 
+  'red-dark'       @color-red-dark,
   'red'            @color-red,
   'red-light'      @color-red-light,
+  'red-lightest'    @color-red-lightest,
+
+  'orange-dark'    @color-orange-dark,
   'orange'         @color-orange,
   'orange-light'   @color-orange-light,
+  'orange-lightest' @color-orange-lightest,
+
+  'amber-dark'     @color-amber-dark,
   'amber'          @color-amber,
   'amber-light'    @color-amber-light,
-  'amber-lightest' @color-amber-lightest,
+  'amber-lightest'  @color-amber-lightest,
+
+  'yellow-dark'    @color-yellow-dark,
   'yellow'         @color-yellow,
   'yellow-light'   @color-yellow-light,
+  'yellow-lightest' @color-yellow-lightest,
+
+  'green-dark'     @color-green-dark,
   'green'          @color-green,
   'green-light'    @color-green-light,
-  'green-lightest' @color-green-lightest,
+  'green-lightest'  @color-green-lightest,
+
+  'teal-dark'      @color-teal-dark,
   'teal'           @color-teal,
   'teal-light'     @color-teal-light,
+  'teal-lightest'   @color-teal-lightest,
+
+  'blue-dark'      @color-blue-dark,
   'blue'           @color-blue,
   'blue-light'     @color-blue-light,
+  'blue-lightest'   @color-blue-lightest,
+
+  'indigo-dark'    @color-indigo-dark,
   'indigo'         @color-indigo,
   'indigo-light'   @color-indigo-light,
+  'indigo-lightest' @color-indigo-lightest,
+
+  'purple-dark'    @color-purple-dark,
   'purple'         @color-purple,
   'purple-light'   @color-purple-light,
+  'purple-lightest' @color-purple-lightest,
+
+  'pink-dark'      @color-pink-dark,
   'pink'           @color-pink,
   'pink-light'     @color-pink-light,
+  'pink-lightest'   @color-pink-lightest,
 ;
 
 .define-bg-colors(@bg-colors; @screens);
+.define-bg-hover-colors(@bg-colors; @screens);
diff --git a/src/utilities/borders.less b/src/utilities/borders.less
index ba9e4b901..e48b33d6a 100644
--- a/src/utilities/borders.less
+++ b/src/utilities/borders.less
@@ -43,26 +43,55 @@
   'light-overlay-soft'   @border-light-overlay-soft,
   'light-overlay-softer' @border-light-overlay-softer,
 
-  'red'          @color-red,
-  'red-light'    @color-red-light,
-  'orange'       @color-orange,
-  'orange-light' @color-orange-light,
-  'amber'        @color-amber,
-  'amber-light'  @color-amber-light,
-  'yellow'       @color-yellow,
-  'yellow-light' @color-yellow-light,
-  'green'        @color-green,
-  'green-light'  @color-green-light,
-  'teal'         @color-teal,
-  'teal-light'   @color-teal-light,
-  'blue'         @color-blue,
-  'blue-light'   @color-blue-light,
-  'indigo'       @color-indigo,
-  'indigo-light' @color-indigo-light,
-  'purple'       @color-purple,
-  'purple-light' @color-purple-light,
-  'pink'         @color-pink,
-  'pink-light'   @color-pink-light,
+  'red-dark'       @color-red-dark,
+  'red'            @color-red,
+  'red-light'      @color-red-light,
+  'red-lightest'    @color-red-lightest,
+
+  'orange-dark'    @color-orange-dark,
+  'orange'         @color-orange,
+  'orange-light'   @color-orange-light,
+  'orange-lightest' @color-orange-lightest,
+
+  'amber-dark'     @color-amber-dark,
+  'amber'          @color-amber,
+  'amber-light'    @color-amber-light,
+  'amber-lightest'  @color-amber-lightest,
+
+  'yellow-dark'    @color-yellow-dark,
+  'yellow'         @color-yellow,
+  'yellow-light'   @color-yellow-light,
+  'yellow-lightest' @color-yellow-lightest,
+
+  'green-dark'     @color-green-dark,
+  'green'          @color-green,
+  'green-light'    @color-green-light,
+  'green-lightest'  @color-green-lightest,
+
+  'teal-dark'      @color-teal-dark,
+  'teal'           @color-teal,
+  'teal-light'     @color-teal-light,
+  'teal-lightest'   @color-teal-lightest,
+
+  'blue-dark'      @color-blue-dark,
+  'blue'           @color-blue,
+  'blue-light'     @color-blue-light,
+  'blue-lightest'   @color-blue-lightest,
+
+  'indigo-dark'    @color-indigo-dark,
+  'indigo'         @color-indigo,
+  'indigo-light'   @color-indigo-light,
+  'indigo-lightest' @color-indigo-lightest,
+
+  'purple-dark'    @color-purple-dark,
+  'purple'         @color-purple,
+  'purple-light'   @color-purple-light,
+  'purple-lightest' @color-purple-lightest,
+
+  'pink-dark'      @color-pink-dark,
+  'pink'           @color-pink,
+  'pink-light'     @color-pink-light,
+  'pink-lightest'   @color-pink-lightest,
 ;
 
 // Radius
diff --git a/src/utilities/text.less b/src/utilities/text.less
index 2bca943ad..da37d66eb 100644
--- a/src/utilities/text.less
+++ b/src/utilities/text.less
@@ -67,26 +67,55 @@
   'dark-softer'   @text-dark-softer,
   'dark-softest'  @text-dark-softest,
 
-  'red'          @color-red,
-  'red-light'    @color-red-light,
-  'orange'       @color-orange,
-  'orange-light' @color-orange-light,
-  'amber'        @color-amber,
-  'amber-light'  @color-amber-light,
-  'yellow'       @color-yellow,
-  'yellow-light' @color-yellow-light,
-  'green'        @color-green,
-  'green-light'  @color-green-light,
-  'teal'         @color-teal,
-  'teal-light'   @color-teal-light,
-  'blue'         @color-blue,
-  'blue-light'   @color-blue-light,
-  'indigo'       @color-indigo,
-  'indigo-light' @color-indigo-light,
-  'purple'       @color-purple,
-  'purple-light' @color-purple-light,
-  'pink'         @color-pink,
-  'pink-light'   @color-pink-light,
+  'red-dark'       @color-red-dark,
+  'red'            @color-red,
+  'red-light'      @color-red-light,
+  'red-lightest'    @color-red-lightest,
+
+  'orange-dark'    @color-orange-dark,
+  'orange'         @color-orange,
+  'orange-light'   @color-orange-light,
+  'orange-lightest' @color-orange-lightest,
+
+  'amber-dark'     @color-amber-dark,
+  'amber'          @color-amber,
+  'amber-light'    @color-amber-light,
+  'amber-lightest'  @color-amber-lightest,
+
+  'yellow-dark'    @color-yellow-dark,
+  'yellow'         @color-yellow,
+  'yellow-light'   @color-yellow-light,
+  'yellow-lightest' @color-yellow-lightest,
+
+  'green-dark'     @color-green-dark,
+  'green'          @color-green,
+  'green-light'    @color-green-light,
+  'green-lightest'  @color-green-lightest,
+
+  'teal-dark'      @color-teal-dark,
+  'teal'           @color-teal,
+  'teal-light'     @color-teal-light,
+  'teal-lightest'   @color-teal-lightest,
+
+  'blue-dark'      @color-blue-dark,
+  'blue'           @color-blue,
+  'blue-light'     @color-blue-light,
+  'blue-lightest'   @color-blue-lightest,
+
+  'indigo-dark'    @color-indigo-dark,
+  'indigo'         @color-indigo,
+  'indigo-light'   @color-indigo-light,
+  'indigo-lightest' @color-indigo-lightest,
+
+  'purple-dark'    @color-purple-dark,
+  'purple'         @color-purple,
+  'purple-light'   @color-purple-light,
+  'purple-lightest' @color-purple-lightest,
+
+  'pink-dark'      @color-pink-dark,
+  'pink'           @color-pink,
+  'pink-light'     @color-pink-light,
+  'pink-lightest'   @color-pink-lightest,
 ;
 
 // Line heights