diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
index d2cf5e5..adb1478 100644
--- a/src/scss/cdb-components/buttons.scss
+++ b/src/scss/cdb-components/buttons.scss
@@ -9,19 +9,19 @@ Layout Component:
 
 ```
 <button class="CDB-Button CDB-Button--primary">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--primary is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--primary CDB-Button--small">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
 <br/>
@@ -30,19 +30,19 @@ Layout Component:
 
 <div style="background: #2E3C43; padding: 20px;">
   <button class="CDB-Button CDB-Button--primary">
-    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--primary is-disabled">
-    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--primary CDB-Button--small">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
 </div>
 
@@ -103,19 +103,19 @@ Layout Component:
 
 ```
 <button class="CDB-Button CDB-Button--secondary">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--secondary is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
 <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
-  <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
 <br/>
@@ -124,19 +124,19 @@ Layout Component:
 
 <div style="background: #2E3C43; padding: 20px;">
   <button class="CDB-Button CDB-Button--secondary">
-    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary is-disabled">
-    <span class="CDB-Button-Text Text is-semibold Size-medium">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
-    <span class="CDB-Button-Text Text is-semibold Size-small">SAVE</span>
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
   </button>
 </div>
 
diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss
index 3d65171..838bbfc 100644
--- a/src/scss/cdb-components/typography.scss
+++ b/src/scss/cdb-components/typography.scss
@@ -5,18 +5,18 @@
 # Typography
 
 ```
-<p class="Text Size-huge">Open Sans 26/34 Regular</p>
-<p class="Text Size-large">Open Sans 16/22 Regular</p>
-<p class="Text is-semibold Size-medium">Open Sans 12/16 Semibold</p>
-<p class="Text Size-medium">Open Sans 12/16 Semibold</p>
-<p class="Text is-semibold Size-small">Open Sans 10/14 Semibold</p>
-<p class="Text Size-small">Open Sans 10/14 Regular</p>
+<p class="CDB-Text CDB-Size-huge">Open Sans 26/34 Regular</p>
+<p class="CDB-Text CDB-Size-large">Open Sans 16/22 Regular</p>
+<p class="CDB-Text is-semibold CDB-Size-medium">Open Sans 12/16 Semibold</p>
+<p class="CDB-Text CDB-Size-medium">Open Sans 12/16 Semibold</p>
+<p class="CDB-Text is-semibold Size-small">Open Sans 10/14 Semibold</p>
+<p class="CDB-Text CDB-Size-small">Open Sans 10/14 Regular</p>
 ```
 */
 
 @import '../cdb-variables/sizes';
 
-.Text {
+.CDB-Text {
   font-family: 'Open Sans';
   $sFontWeight-normal: 400;
 
@@ -28,22 +28,22 @@
   }
 }
 
-.Size-huge {
+.CDB-Size-huge {
   font-size: $sFontSize-huge;
   line-height: $sLineHeight-huge;
 }
 
-.Size-large {
+.CDB-Size-large {
   font-size: $sFontSize-large;
   line-height: $sLineHeight-large;
 }
 
-.Size-medium {
+.CDB-Size-medium {
   font-size: $sFontSize-medium;
   line-height: $sLineHeight-medium;
 }
 
-.Size-small {
+.CDB-Size-small {
   font-size: $sFontSize-small;
   line-height: $sLineHeight-small;
 }