diff --git a/app/styleguide/layout/demo.html b/app/styleguide/layout/demo.html
index 67a9132b..1ede0db5 100644
--- a/app/styleguide/layout/demo.html
+++ b/app/styleguide/layout/demo.html
@@ -236,7 +236,7 @@
         </div>
         <!-- Middle row, subtitle -->
         <div class="wsk-layout__header-row">
-          <span class="Typography--title">
+          <span class="wsk-typography--title">
             Multi-row layout demo
           </span>
         </div>
diff --git a/app/styleguide/list/demo.html b/app/styleguide/list/demo.html
index d6498868..a606a928 100644
--- a/app/styleguide/list/demo.html
+++ b/app/styleguide/list/demo.html
@@ -47,7 +47,7 @@
 
     <p>
       <div class="List">
-        <p class="Typography-Body-2">Contacts</p>
+        <p class="wsk-typography-Body-2">Contacts</p>
         <div class="wsk-list--styled-view">
           <ul>
             <li>
diff --git a/app/styleguide/typography/_typography.scss b/app/styleguide/typography/_typography.scss
index 9a4b8bc2..c17a2d62 100644
--- a/app/styleguide/typography/_typography.scss
+++ b/app/styleguide/typography/_typography.scss
@@ -269,165 +269,165 @@ dt {
  * Class Name Styles
  */
 
-.Typography--display-4 {
+.wsk-typography--display-4 {
   @include typo-display-4();
 }
 
-.Typography--display-4--colorContrast {
+.wsk-typography--display-4--colorContrast {
   @include typo-display-4($colorContrast: true);
 }
 
-.Typography--display-3 {
+.wsk-typography--display-3 {
   @include typo-display-3();
 }
 
-.Typography--display-3--colorContrast {
+.wsk-typography--display-3--colorContrast {
   @include typo-display-3($colorContrast: true);
 }
 
-.Typography--display-2 {
+.wsk-typography--display-2 {
   @include typo-display-2();
 }
 
-.Typography--display-2--colorContrast {
+.wsk-typography--display-2--colorContrast {
   @include typo-display-2($colorContrast: true);
 }
 
-.Typography--display-1 {
+.wsk-typography--display-1 {
   @include typo-display-1();
 }
 
-.Typography--display-1--colorContrast {
+.wsk-typography--display-1--colorContrast {
   @include typo-display-1($colorContrast: true);
 }
 
-.Typography--headline {
+.wsk-typography--headline {
   @include typo-headline();
 }
 
-.Typography--headline--colorContrast {
+.wsk-typography--headline--colorContrast {
   @include typo-headline($colorContrast: true);
 }
 
-.Typography--title {
+.wsk-typography--title {
   @include typo-title();
 }
 
-.Typography--title--colorContrast {
+.wsk-typography--title--colorContrast {
   @include typo-title($colorContrast: true);
 }
 
-.Typography--subhead {
+.wsk-typography--subhead {
   @include typo-subhead();
 }
 
-.Typography--subhead--colorContrast {
+.wsk-typography--subhead--colorContrast {
   @include typo-subhead($colorContrast: true);
 }
 
-.Typography--body-2 {
+.wsk-typography--body-2 {
   @include typo-body-2();
 }
 
-.Typography--Body-2--colorContrast {
+.wsk-typography--Body-2--colorContrast {
   @include typo-body-2($colorContrast: true);
 }
 
-.Typography--body-1 {
+.wsk-typography--body-1 {
   @include typo-body-1();
 }
 
-.Typography--body-1--colorContrast {
+.wsk-typography--body-1--colorContrast {
   @include typo-body-1($colorContrast: true);
 }
 
-.Typography--body-2--forcePreferredFont {
+.wsk-typography--body-2--forcePreferredFont {
   @include typo-body-2($usePreferred: true);
 }
 
-.Typography--Body-2--forcePreferredFont--colorContrast {
+.wsk-typography--Body-2--forcePreferredFont--colorContrast {
   @include typo-body-2($colorContrast: true, $usePreferred: true);
 }
 
-.Typography--body-1--forcePreferredFont {
+.wsk-typography--body-1--forcePreferredFont {
   @include typo-body-1($usePreferred: true);
 }
 
-.Typography--body-1--forcePreferredFont--colorContrast {
+.wsk-typography--body-1--forcePreferredFont--colorContrast {
   @include typo-body-1($colorContrast: true, $usePreferred: true);
 }
 
-.Typography--caption {
+.wsk-typography--caption {
   @include typo-caption();
 }
 
-.Typography--caption--forcePreferredFont {
+.wsk-typography--caption--forcePreferredFont {
   @include typo-caption($usePreferred: true);
 }
 
-.Typography--caption--colorContrast {
+.wsk-typography--caption--colorContrast {
   @include typo-caption($colorContrast: true);
 }
 
-.Typography--caption--forcePreferredFont--colorContrast {
+.wsk-typography--caption--forcePreferredFont--colorContrast {
   @include typo-caption($colorContrast: true, $usePreferred: true);
 }
 
-.Typography--menu {
+.wsk-typography--menu {
   @include typo-menu();
 }
 
-.Typography--menu--colorContrast {
+.wsk-typography--menu--colorContrast {
   @include typo-menu($colorContrast: true);
 }
 
-.Typography--button {
+.wsk-typography--button {
   @include typo-button();
 }
 
-.Typography--button--colorContrast {
+.wsk-typography--button--colorContrast {
   @include typo-button($colorContrast: true);
 }
 
-.Typography--textLeft {
+.wsk-typography--textLeft {
     text-align: left
 }
 
-.Typography--textRight {
+.wsk-typography--textRight {
     text-align: right
 }
 
-.Typography--textCenter {
+.wsk-typography--textCenter {
     text-align: center
 }
 
-.Typography--textJustify {
+.wsk-typography--textJustify {
     text-align: justify
 }
 
-.Typography--textNowrap {
+.wsk-typography--textNowrap {
     white-space: nowrap
 }
 
 
-.Typography--textLowercase {
+.wsk-typography--textLowercase {
     text-transform: lowercase
 }
 
-.Typography--textUppercase {
+.wsk-typography--textUppercase {
     text-transform: uppercase
 }
 
-.Typography--textCapitalize {
+.wsk-typography--textCapitalize {
     text-transform: capitalize
 }
 
-.Typography--tableStriped > tbody > tr:nth-child(odd) > td,
-.Typography--tableStriped > tbody > tr:nth-child(odd) > th {
+.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > td,
+.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > th {
     background-color: #f9f9f9
 }
 
-.Typography--tableStriped > tbody > tr:nth-child(odd) > td,
-.Typography--tableStriped > tbody > tr:nth-child(odd) > th {
+.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > td,
+.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > th {
     background-color: #f9f9f9
 }
diff --git a/app/styleguide/typography/demo.html b/app/styleguide/typography/demo.html
index b16b951c..80ca08b3 100644
--- a/app/styleguide/typography/demo.html
+++ b/app/styleguide/typography/demo.html
@@ -20,59 +20,59 @@
     <table>
       <tr>
         <th>Display 4</th>
-        <td class='Typography--display-4'>Light 112px</td>
+        <td class="wsk-typography--display-4">Light 112px</td>
       </tr>
       <tr>
         <th>Display 3</th>
-        <td class='Typography--display-3'>Regular 56px</td>
+        <td class="wsk-typography--display-3">Regular 56px</td>
       </tr>
       <tr>
         <th>Display 2</th>
-        <td class='Typography--display-2'>Regular 45px</td>
+        <td class="wsk-typography--display-2">Regular 45px</td>
       </tr>
       <tr>
         <th>Display 1</th>
-        <td class='Typography--display-1'>Regular 34px</td>
+        <td class="wsk-typography--display-1">Regular 34px</td>
       </tr>
       <tr>
         <th>Headline</th>
-        <td class='Typography--headline'>Regular 24px</td>
+        <td class="wsk-typography--headline">Regular 24px</td>
       </tr>
       <tr>
         <th>Title</th>
-        <td class='Typography--title'>Medium 20px</td>
+        <td class="wsk-typography--title">Medium 20px</td>
       </tr>
       <tr>
         <th>Subhead</th>
-        <td class='Typography--subhead'>Regular 16px (Device), Regular 15px (Desktop)</td>
+        <td class="wsk-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
       </tr>
       <tr>
         <th>Body 2</th>
-        <td class='Typography--body-2'>Medium 14px (Device), Medium 13px (Desktop)</td>
+        <td class="wsk-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
       </tr>
       <tr>
         <th>Body 1</th>
-        <td class='Typography--body-1'>Regular 14px (Device), Regular 13px (Desktop)</td>
+        <td class="wsk-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
       </tr>
       <tr>
         <th>Body 2 (force preferred font)</th>
-        <td class='Typography--body-2--forcePreferredFont'>Medium 14px (Device), Medium 13px (Desktop)</td>
+        <td class="wsk-typography--body-2--forcePreferredFont">Medium 14px (Device), Medium 13px (Desktop)</td>
       </tr>
       <tr>
         <th>Body 1 (force preferred font)</th>
-        <td class='Typography--body-1--forcePreferredFont'>Regular 14px (Device), Regular 13px (Desktop)</td>
+        <td class="wsk-typography--body-1--forcePreferredFont">Regular 14px (Device), Regular 13px (Desktop)</td>
       </tr>
       <tr>
         <th>Caption</th>
-        <td class='Typography--caption'>Regular 12px</td>
+        <td class="wsk-typography--caption">Regular 12px</td>
       </tr>
       <tr>
         <th>Menu</th>
-        <td class='Typography--menu'>Medium 14px (Device), Medium 13px (Desktop)</td>
+        <td class="wsk-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
       </tr>
       <tr>
         <th>Button</th>
-        <td class='Typography--button'>Medium (All Caps) 14px</td>
+        <td class="wsk-typography--button">Medium (All Caps) 14px</td>
       </tr>
     </table>
   </div>
@@ -112,13 +112,13 @@
 
     <p>&lt;p&gt;</p>
 
-    <p class="Typography--body-2">&lt;p class="Typography-Body-2"&gt;</p>
+    <p class="wsk-typography--body-2">&lt;p class="wsk-typography-Body-2"&gt;</p>
 
-    <p class="Typography--caption">&lt;p class="Typography-Caption"&gt;</p>
+    <p class="wsk-typography--caption">&lt;p class="wsk-typography-Caption"&gt;</p>
 
-    <p class="Typography--menu">&lt;p class="Typography-Menu"&gt;</p>
+    <p class="wsk-typography--menu">&lt;p class="wsk-typography-Menu"&gt;</p>
 
-    <p class="Typography--button">&lt;p class="Typography-Button"&gt;</p>
+    <p class="wsk-typography--button">&lt;p class="wsk-typography-Button"&gt;</p>
 
     <h3>Subtitles</h3>
 
@@ -150,16 +150,16 @@
 
   <h2>Alignment</h2>
 
-  <p class="Typography--textLeft">Left aligned text.</p>
-  <p class="Typography--textCenter">Center aligned text.</p>
-  <p class="Typography--textRight">Right aligned text.</p>
-  <p class="Typography--textJustify">Justified text.</p>
-  <p class="Typography--textNowrap">No wrap text.</p>
+  <p class="wsk-typography--textLeft">Left aligned text.</p>
+  <p class="wsk-typography--textCenter">Center aligned text.</p>
+  <p class="wsk-typography--textRight">Right aligned text.</p>
+  <p class="wsk-typography--textJustify">Justified text.</p>
+  <p class="wsk-typography--textNowrap">No wrap text.</p>
 
   <h2>Transformations</h2>
-  <p class="Typography--textLowercase">Lowercased text.</p>
-  <p class="Typography--textUppercase">Uppercased text.</p>
-  <p class="Typography--textCapitalize">Capitalized text.</p>
+  <p class="wsk-typography--textLowercase">Lowercased text.</p>
+  <p class="wsk-typography--textUppercase">Uppercased text.</p>
+  <p class="wsk-typography--textCapitalize">Capitalized text.</p>
 
   <h2>Addresses</h2>
 
@@ -221,7 +221,7 @@
 
     <h3>Striped Table</h3>
 
-    <table class="Typography--tableStriped">
+    <table class="wsk-typography--tableStriped">
         <thead>
           <tr>
             <th>#</th>
@@ -257,57 +257,57 @@
 
   <div class="PreviewBlock">
     <div class="PreviewBlock--white">
-      <p class="Typography--caption--colorContrast">Caption</p>
+      <p class="wsk-typography--caption--colorContrast">Caption</p>
 
-      <p class="Typography--body-2--colorContrast">Body</p>
+      <p class="wsk-typography--body-2--colorContrast">Body</p>
 
-      <p class="Typography--subhead--colorContrast">Subhead</p>
+      <p class="wsk-typography--subhead--colorContrast">Subhead</p>
 
-      <p class="Typography--title--colorContrast">Title</p>
+      <p class="wsk-typography--title--colorContrast">Title</p>
 
-      <p class="Typography--display-1--colorContrast">Display</p>
+      <p class="wsk-typography--display-1--colorContrast">Display</p>
     </div>
   </div>
 
   <div class="PreviewBlock">
     <div class="PreviewBlock--black">
-        <p class="Typography--caption--colorContrast">Caption</p>
+        <p class="wsk-typography--caption--colorContrast">Caption</p>
 
-        <p class="Typography--body-2--colorContrast">Body</p>
+        <p class="wsk-typography--body-2--colorContrast">Body</p>
 
-        <p class="Typography--subhead--colorContrast">Subhead</p>
+        <p class="wsk-typography--subhead--colorContrast">Subhead</p>
 
-        <p class="Typography--title--colorContrast">Title</p>
+        <p class="wsk-typography--title--colorContrast">Title</p>
 
-        <p class="Typography--display-1--colorContrast">Display</p>
+        <p class="wsk-typography--display-1--colorContrast">Display</p>
     </div>
   </div>
 
   <div class="PreviewBlock">
     <div class="PreviewBlock--img-1">
-        <p class="Typography--caption--colorContrast">Caption</p>
+        <p class="wsk-typography--caption--colorContrast">Caption</p>
 
-        <p class="Typography--body-2--colorContrast">Body</p>
+        <p class="wsk-typography--body-2--colorContrast">Body</p>
 
-        <p class="Typography--subhead--colorContrast">Subhead</p>
+        <p class="wsk-typography--subhead--colorContrast">Subhead</p>
 
-        <p class="Typography--title--colorContrast">Title</p>
+        <p class="wsk-typography--title--colorContrast">Title</p>
 
-        <p class="Typography--display-1--colorContrast">Display</p>
+        <p class="wsk-typography--display-1--colorContrast">Display</p>
     </div>
   </div>
 
   <div class="PreviewBlock">
     <div class="PreviewBlock--img-2">
-      <p class="Typography--caption--colorContrast">Caption</p>
+      <p class="wsk-typography--caption--colorContrast">Caption</p>
 
-      <p class="Typography--body-2--colorContrast">Body</p>
+      <p class="wsk-typography--body-2--colorContrast">Body</p>
 
-      <p class="Typography--subhead--colorContrast">Subhead</p>
+      <p class="wsk-typography--subhead--colorContrast">Subhead</p>
 
-      <p class="Typography--title--colorContrast">Title</p>
+      <p class="wsk-typography--title--colorContrast">Title</p>
 
-      <p class="Typography--display-1--colorContrast">Display</p>
+      <p class="wsk-typography--display-1--colorContrast">Display</p>
     </div>
   </div>