diff --git a/src/colors.less b/src/colors.less
index 9bfea6327..bdd77f5f2 100644
--- a/src/colors.less
+++ b/src/colors.less
@@ -1,13 +1,31 @@
-@color-gray-10: hsl(0, 0%, 100%);
-@color-gray-9: hsl(0, 0%, 98%);
-@color-gray-8: hsl(0, 0%, 96%);
-@color-gray-7: hsl(0, 0%, 90%);
-@color-gray-6: hsl(0, 0%, 82%);
-@color-gray-5: hsl(0, 0%, 62%);
-@color-gray-4: hsl(0, 0%, 52%);
-@color-gray-3: hsl(0, 0%, 35%);
-@color-gray-2: hsl(0, 0%, 25%);
-@color-gray-1: hsl(0, 0%, 16%);
+@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: @color-gray-10;
-@color-black: @color-gray-1;
+@color-red:          #f25451;
+@color-red-light:    #fa8785;
+@color-orange:       #ffb447;
+@color-orange-light: #ffce85;
+@color-yellow:       #ffed4a;
+@color-yellow-light: #fff6a5;
+@color-green:        #77d48a;
+@color-green-light:  #b1f3be;
+@color-teal:         #4dc0b5;
+@color-teal-light:   #92e0d8;
+@color-blue:         #4aa2ea;
+@color-blue-light:   #acdaff;
+@color-indigo:       #6574cd;
+@color-indigo-light: #a3aeed;
+@color-purple:       #976ae6;
+@color-purple-light: #ceb3ff;
+@color-pink:         #f66d9b;
+@color-pink-light:   #ffa5c3;
diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less
index 920245d40..4d01c7c37 100644
--- a/src/utilities/backgrounds.less
+++ b/src/utilities/backgrounds.less
@@ -1,11 +1,30 @@
 @bg-colors:
-  'light' hsl(0, 0%, 100%),
-  'light-soft' hsl(0, 0%, 98%),
-  'light-softer' hsl(0, 0%, 96%),
+  'light'        @color-white,
+  'light-soft'   @color-grey-100,
+  'light-softer' @color-grey-200,
 
-  'dark' hsl(0, 0%, 33%),
-  'dark-soft' hsl(0, 0%, 42%),
-  'dark-softer' hsl(0, 0%, 52%),
+  'dark'         @color-grey-800,
+  'dark-soft'    @color-grey-700,
+  'dark-softer'  @color-grey-600,
+
+  'red'          @color-red,
+  'red-light'    @color-red-light,
+  'orange'       @color-orange,
+  'orange-light' @color-orange-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,
 ;
 
 .define-bg-colors(@bg-colors; @screens);
diff --git a/src/utilities/text.less b/src/utilities/text.less
index 9b124384b..c42666370 100644
--- a/src/utilities/text.less
+++ b/src/utilities/text.less
@@ -12,13 +12,13 @@
 @line-height: 1.5;
 
 // Sizes
-@font-size-xs: (12rem / 16rem);  // 12px
-@font-size-sm: (14rem / 16rem);  // 14px
-@font-size-base: 1rem;           // 16px
-@font-size-lg: (18rem / 16rem);  // 18px
-@font-size-xl: (22rem / 16rem);  // 22px
-@font-size-2xl: (30rem / 16rem); // 30px
-@font-size-3xl: (40rem / 16rem); // 40px
+@font-size-xs:   (12rem / 16rem); // 12px
+@font-size-sm:   (14rem / 16rem); // 14px
+@font-size-base: (16rem / 16rem); // 16px
+@font-size-lg:   (18rem / 16rem); // 18px
+@font-size-xl:   (22rem / 16rem); // 22px
+@font-size-2xl:  (30rem / 16rem); // 30px
+@font-size-3xl:  (40rem / 16rem); // 40px
 
 @text-size-scale:
   'xs' @font-size-xs,
@@ -46,26 +46,45 @@
 ;
 
 // Colors
-@text-light: hsl(0, 0%, 100%);
-@text-light-soft: hsl(0, 0%, 60%);
-@text-light-softer: hsl(0, 0%, 45%);
-@text-light-softest: hsl(0, 0%, 35%);
+@text-light:         @color-white;
+@text-light-soft:    fade(@color-white, 60%);
+@text-light-softer:  fade(@color-white, 45%);
+@text-light-softest: fade(@color-white, 35%);
 
-@text-dark: hsl(0, 0%, 25%);
-@text-dark-soft: hsl(0, 0%, 50%);
-@text-dark-softer: hsl(0, 0%, 65%);
-@text-dark-softest: hsl(0, 0%, 75%);
+@text-dark:          @color-grey-800;
+@text-dark-soft:     @color-grey-600;
+@text-dark-softer:   @color-grey-500;
+@text-dark-softest:  @color-grey-400;
 
 @text-colors:
-  'light' @text-light,
-  'light-soft' @text-light-soft,
-  'light-softer' @text-light-softer,
+  'light'         @text-light,
+  'light-soft'    @text-light-soft,
+  'light-softer'  @text-light-softer,
   'light-softest' @text-light-softest,
 
-  'dark' @text-dark,
-  'dark-soft' @text-dark-soft,
-  'dark-softer' @text-dark-softer,
-  'dark-softest' @text-dark-softest,
+  'dark'          @text-dark,
+  'dark-soft'     @text-dark-soft,
+  '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,
+  '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,
 ;
 
 // Line heights