diff --git a/src/palette/_palette.scss b/src/palette/_palette.scss
index c731be84..2190733d 100644
--- a/src/palette/_palette.scss
+++ b/src/palette/_palette.scss
@@ -2243,8 +2243,24 @@
 
 // Black
 
+.wsk-color-text--black-12 {
+  color: unquote("rgba(#{$palette-black-12})");
+}
+
+.wsk-color-text--black-26 {
+  color: unquote("rgba(#{$palette-black-26})");
+}
+
+.wsk-color-text--black-54 {
+  color: unquote("rgba(#{$palette-black-54})");
+}
+
 .wsk-color-text--black {
-  color: unquote("rgb(#{$palette-black})");
+  color: unquote("rgba(#{$palette-black-87})");
+}
+
+.wsk-color-text--black-100 {
+  color: unquote("rgba(#{$palette-black-100})");
 }
 
 .wsk-color--black {
@@ -2254,8 +2270,20 @@
 
 // White
 
+.wsk-color-text--white-12 {
+  color: unquote("rgb(#{$palette-white-12})");
+}
+
+.wsk-color-text--white-30 {
+  color: unquote("rgb(#{$palette-white-30})");
+}
+
+.wsk-color-text--white-70 {
+  color: unquote("rgb(#{$palette-white-70})");
+}
+
 .wsk-color-text--white {
-  color: unquote("rgb(#{$palette-white})");
+  color: unquote("rgb(#{$palette-white-100})");
 }
 
 .wsk-color--white {
diff --git a/src/palette/color_definitions.scss b/src/palette/color_definitions.scss
index bbade543..d6d0b5b7 100644
--- a/src/palette/color_definitions.scss
+++ b/src/palette/color_definitions.scss
@@ -579,7 +579,25 @@ $palette-blue-grey-800: nth($palette-blue-grey, 9);
 $palette-blue-grey-900: nth($palette-blue-grey, 10);
 
 $palette-black:
-  "0,0,0";
+  "0,0,0"
+  "0,0,0,.87"
+  "0,0,0,.54"
+  "0,0,0,.26"
+  "0,0,0,.12";
+
+$palette-black-100: nth($palette-black, 1);
+$palette-black-87: nth($palette-black, 2);
+$palette-black-54: nth($palette-black, 3);
+$palette-black-26: nth($palette-black, 4);
+$palette-black-12: nth($palette-black, 5);
 
 $palette-white:
-  "255,255,255";
+  "255,255,255"
+  "255,255,255,.70"
+  "255,255,255,.30"
+  "255,255,255,.12";
+
+$palette-white-100: nth($palette-white, 1);
+$palette-white-70: nth($palette-white, 2);
+$palette-white-30: nth($palette-white, 3);
+$palette-white-12: nth($palette-white, 4);
diff --git a/src/palette/demo.html b/src/palette/demo.html
index 9113986b..ef4cf04c 100644
--- a/src/palette/demo.html
+++ b/src/palette/demo.html
@@ -431,6 +431,30 @@
           <div class="demo-palette-name">White</div>
         </div>
       </div>
+
+      <div class="demo-palette demo-palette--black-text">
+        <div class="demo-palette-heading demo-palette-color">
+          <div class="demo-palette-name">Black</div>
+
+          100%
+        </div>
+        <div class="demo-palette-color demo-palette-color--12 demo-palette--dark-text">12%</div>
+        <div class="demo-palette-color demo-palette-color--26 demo-palette--dark-text">26%</div>
+        <div class="demo-palette-color demo-palette-color--54">54%</div>
+        <div class="demo-palette-color demo-palette-color--87">87%</div>
+      </div>
+
+      <div class="demo-palette demo-palette--white-text">
+        <div class="demo-palette-heading demo-palette-color demo-palette--dark-text">
+          <div class="demo-palette-name">White</div>
+
+          100%
+        </div>
+        <div class="demo-palette-color demo-palette-color--12 demo-palette--dark-text">12%</div>
+        <div class="demo-palette-color demo-palette-color--30 demo-palette--dark-text">30%</div>
+        <div class="demo-palette-color demo-palette-color--70 demo-palette--dark-text">70%</div>
+        <div class="demo-palette-color demo-palette-color--100 demo-palette--dark-text">100%</div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/src/palette/demo.scss b/src/palette/demo.scss
index 8e5340f5..cc1ed9a8 100644
--- a/src/palette/demo.scss
+++ b/src/palette/demo.scss
@@ -164,7 +164,7 @@
 
   .demo-palette-name {
     padding: 0;
-    float: left;    
+    float: left;
   }
 }
 
@@ -255,12 +255,104 @@
   }
 }
 
-.demo-palette--white {
+.demo-palette--black-text {
   .demo-palette-color {
-    background-color: #ffffff;
+    background-color: #000000;
 
     &:after {
-      content: '#ffffff';
+      content: '#000000';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--100 {
+    background-color: unquote("rgb(#{nth($palette-black, 1)})");
+
+    &:after {
+      content: '#000000';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--12 {
+    background-color: unquote("rgba(#{nth($palette-black, 5)})");
+
+    &:after {
+      content: 'Dividers';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--26 {
+    background-color: unquote("rgba(#{nth($palette-black, 4)})");
+
+    &:after {
+      content: 'Disabled / Hint Text';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--54 {
+    background-color: unquote("rgba(#{nth($palette-black, 3)})");
+
+    &:after {
+      content: 'Secondary Text / Icons';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--87 {
+    background-color: unquote("rgba(#{nth($palette-black, 2)})");
+
+    &:after {
+      content: 'Text';
+      float: right;
+    }
+  }
+}
+
+.demo-palette--white-text {
+  .demo-palette-color {
+    background-color: #ffffff;
+
+    &:after {
+      content: '#FFFFFF';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--12 {
+    background-color: unquote("rgba(#{nth($palette-white, 4)})");
+
+    &:after {
+      content: 'Dividers';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--30 {
+    background-color: unquote("rgba(#{nth($palette-white, 3)})");
+
+    &:after {
+      content: 'Disabled / Hint Text';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--70 {
+    background-color: unquote("rgba(#{nth($palette-white, 2)})");
+
+    &:after {
+      content: 'Secondary Text';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--100 {
+    background-color: unquote("rgba(#{nth($palette-white, 1)})");
+
+    &:after {
+      content: 'Text / Icons';
       float: right;
     }
   }