diff --git a/src/scss/cdb-components/avatars.scss b/src/scss/cdb-components/avatars.scss
index c78be1f..772a210 100644
--- a/src/scss/cdb-components/avatars.scss
+++ b/src/scss/cdb-components/avatars.scss
@@ -16,7 +16,7 @@
     <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
   </li>
   <li class="CDB-AvatarList-itemMore">
-    <button class="CDB-Text is-semibold CDB-Size-small u-textSecondary">+ 16</button>
+    <button class="CDB-Text is-semibold CDB-Size-small u-secondaryTextColor">+ 16</button>
   </li>
 </ul>
 ```
diff --git a/src/scss/cdb-components/colors.scss b/src/scss/cdb-components/colors.scss
index 1fac96d..f5d73d4 100644
--- a/src/scss/cdb-components/colors.scss
+++ b/src/scss/cdb-components/colors.scss
@@ -18,9 +18,9 @@
 @import '../cdb-variables/colors';
 
 .box {
+  display: inline-block;
   width: 120px;
   height: 64px;
-  display: inline-block;
   margin: 0 24px 24px 0;
 }
 
@@ -28,15 +28,15 @@
   background: $cBlue;
 }
 .Color-White {
+  border: 1px solid #E5E5E5;
   background: $cWhite;
-  border: 1px solid #e5e5e5;
 }
 .Color-Dark {
   background: $cBlack;
 }
 
 .Color-MainDark {
-  background: $cMainDark;
+  background: $cMainBgColor;
 }
 .Color-SecondaryDark {
   background: $cSecondaryDark;
diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss
index e6dd65b..81c3670 100644
--- a/src/scss/cdb-components/forms/toggle.scss
+++ b/src/scss/cdb-components/forms/toggle.scss
@@ -49,7 +49,7 @@
   }
 
   &:checked + .CDB-ToggleFace {
-    background: $cMainDark;
+    background: $cMainBgColor;
 
     &::before {
       right: 2px;
diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/loader.scss
index 07e066b..ae9d543 100644
--- a/src/scss/cdb-components/loader.scss
+++ b/src/scss/cdb-components/loader.scss
@@ -105,12 +105,12 @@ This is the generic loader for widgets, maps, components, ...
     background: $cWhite;
   }
   &.is-grey {
-    background: linear-gradient(to right, $cMainDark 10%, rgba($cWhite, 0) 42%);
+    background: linear-gradient(to right, $cMainBgColor 10%, rgba($cWhite, 0) 42%);
     &::before {
       background: $cTypo2;
     }
     &::after {
-      background: $cMainDark;
+      background: $cMainBgColor;
     }
   }
 }
diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss
index c2bd83d..7327574 100644
--- a/src/scss/cdb-components/menu.scss
+++ b/src/scss/cdb-components/menu.scss
@@ -97,8 +97,8 @@
 }
 
 .CDB-NavMenu-Item.is-active .CDB-NavMenu-Link {
-  border-bottom: 1px solid $cMainDark;
-  color: $cMainDark;
+  border-bottom: 1px solid $cMainBgColor;
+  color: $cMainBgColor;
 }
 
 .CDB-NavSubmenu {
@@ -119,7 +119,7 @@
 .CDB-NavSubmenu-item.is-active {
   .CDB-NavSubmenu-Link {
     border-bottom: 1px solid $cTypo3;
-    color: $cMainDark;
+    color: $cMainBgColor;
   }
 }
 
diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss
index 570d5b4..a172077 100644
--- a/src/scss/cdb-components/shapes/add.scss
+++ b/src/scss/cdb-components/shapes/add.scss
@@ -65,7 +65,7 @@ Description
     bottom: 7px;
     left: 0;
     height: 1px;
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
 
@@ -76,7 +76,7 @@ Description
     bottom: 0;
     left: 7px;
     width: 1px;
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
 }
@@ -90,7 +90,7 @@ Description
     bottom: 7px;
     left: 4px;
     height: 1px;
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
 
@@ -101,7 +101,7 @@ Description
     bottom: 3px;
     left: 8px;
     width: 1px;
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
 }
diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/arrow.scss
index cb596d0..172fcda 100644
--- a/src/scss/cdb-components/shapes/arrow.scss
+++ b/src/scss/cdb-components/shapes/arrow.scss
@@ -22,7 +22,7 @@ Description
   position: relative;
   width: 1px;
   height: 8px;
-  background: $cMainDark;
+  background: $cMainBgColor;
 
   &::before {
     display: block;
@@ -32,7 +32,7 @@ Description
     width: 5px;
     height: 1px;
     transform: rotate(45deg);
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
 
@@ -44,7 +44,7 @@ Description
     width: 5px;
     height: 1px;
     transform: rotate(-45deg);
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
   &.is-up {
diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/check-circle.scss
index f63cb76..4d1ac0c 100644
--- a/src/scss/cdb-components/shapes/check-circle.scss
+++ b/src/scss/cdb-components/shapes/check-circle.scss
@@ -60,7 +60,7 @@ Description
 .CDB-Shape-CircleItem {
   width: 14px;
   height: 14px;
-  border: 1px solid $cMainDark;
+  border: 1px solid $cMainBgColor;
   border-radius: 50%;
 
   &.is-small {
@@ -86,7 +86,7 @@ Description
     position: absolute;
     width: 1px;
     transform: rotate(-45deg);
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
   &::after {
@@ -94,7 +94,7 @@ Description
     position: absolute;
     width: 1px;
     transform: rotate(45deg);
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
 
diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss
index 40b26f6..f25e7bf 100644
--- a/src/scss/cdb-components/shapes/close.scss
+++ b/src/scss/cdb-components/shapes/close.scss
@@ -55,7 +55,7 @@ Description
     position: absolute;
     width: 1px;
     transform: rotate(-45deg);
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
   &::after {
@@ -63,7 +63,7 @@ Description
     position: absolute;
     width: 1px;
     transform: rotate(45deg);
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
 
diff --git a/src/scss/cdb-components/shapes/dash.scss b/src/scss/cdb-components/shapes/dash.scss
index 409bd20..361a6b8 100644
--- a/src/scss/cdb-components/shapes/dash.scss
+++ b/src/scss/cdb-components/shapes/dash.scss
@@ -56,7 +56,7 @@ Description
     bottom: 7px;
     left: 2px;
     height: 1px;
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
 }
diff --git a/src/scss/cdb-components/shapes/dataset.scss b/src/scss/cdb-components/shapes/dataset.scss
index 494918d..8612383 100644
--- a/src/scss/cdb-components/shapes/dataset.scss
+++ b/src/scss/cdb-components/shapes/dataset.scss
@@ -95,7 +95,7 @@ Description
   width: 9px;
   height: 9px;
   margin-left: -10px;
-  border: 1px solid $cMainDark;
+  border: 1px solid $cMainBgColor;
   border-radius: 50%;
   background: $cWhite;
 
@@ -132,15 +132,15 @@ Description
 .CDB-Shape-Dataset.is-white {
   .CDB-Shape-DatasetItem {
     border: 1px solid $cHoverLine;
-    background: $cMainDark;
+    background: $cMainBgColor;
     &:first-child {
-      box-shadow: 3px 0 $cMainDark;
+      box-shadow: 3px 0 $cMainBgColor;
     }
   }
 }
 
 .CDB-Shape-Dataset.is-white.is-small {
   .CDB-Shape-DatasetItem:first-child {
-    box-shadow: 2px 0 $cMainDark;
+    box-shadow: 2px 0 $cMainBgColor;
   }
 }
diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss
index eebeb92..ee1a4bb 100644
--- a/src/scss/cdb-components/shapes/error-circle.scss
+++ b/src/scss/cdb-components/shapes/error-circle.scss
@@ -60,7 +60,7 @@ Description
 .CDB-Shape-CircleItem {
   width: 13px;
   height: 13px;
-  border: 1px solid $cMainDark;
+  border: 1px solid $cMainBgColor;
   border-radius: 50%;
 
   &.is-small {
diff --git a/src/scss/cdb-components/shapes/hamburguer.scss b/src/scss/cdb-components/shapes/hamburguer.scss
index 7b8ceff..4bd02e8 100644
--- a/src/scss/cdb-components/shapes/hamburguer.scss
+++ b/src/scss/cdb-components/shapes/hamburguer.scss
@@ -43,7 +43,7 @@ Description
 .CDB-Shape-hamburguerItem {
   height: $baseSize / 4;
   margin-bottom: $baseSize / 4;
-  background: $cMainDark;
+  background: $cMainBgColor;
 
   &:last-child {
     margin-bottom: 0;
diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/magnify.scss
index 7f4f2f0..9bb2128 100644
--- a/src/scss/cdb-components/shapes/magnify.scss
+++ b/src/scss/cdb-components/shapes/magnify.scss
@@ -58,7 +58,7 @@ Description
     left: 0;
     width: 11px;
     height: 11px;
-    border: 1px solid $cMainDark;
+    border: 1px solid $cMainBgColor;
     border-radius: 50%;
     content: '';
   }
@@ -71,7 +71,7 @@ Description
     width: 1px;
     height: 7px;
     transform: rotate(314deg);
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
 }
diff --git a/src/scss/cdb-components/shapes/move.scss b/src/scss/cdb-components/shapes/move.scss
index e1f423b..d5ea9e1 100644
--- a/src/scss/cdb-components/shapes/move.scss
+++ b/src/scss/cdb-components/shapes/move.scss
@@ -101,7 +101,7 @@ Description
     display: inline-block;
     width: 3px;
     height: 3px;
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
 
@@ -110,7 +110,7 @@ Description
     width: 3px;
     height: 3px;
     margin-left: 2px;
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
 }
diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss
index 48038e3..4757bb8 100644
--- a/src/scss/cdb-components/shapes/threePoints.scss
+++ b/src/scss/cdb-components/shapes/threePoints.scss
@@ -77,7 +77,7 @@ Description
   width: 2px;
   height: 2px;
   margin-bottom: 5px;
-  background: $cMainDark;
+  background: $cMainBgColor;
   &:last-child {
     margin-bottom: 0;
   }
diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/toogle-arrow.scss
index 86f302a..d5b5fde 100644
--- a/src/scss/cdb-components/shapes/toogle-arrow.scss
+++ b/src/scss/cdb-components/shapes/toogle-arrow.scss
@@ -97,7 +97,7 @@ Description
     width: 10px;
     height: 1px;
     transform: rotate(-45deg);
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
   &::after {
@@ -108,7 +108,7 @@ Description
     width: 10px;
     height: 1px;
     transform: rotate(45deg);
-    background: $cMainDark;
+    background: $cMainBgColor;
     content: '';
   }
 }
diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss
index 810cf0c..74c0127 100644
--- a/src/scss/cdb-components/typography.scss
+++ b/src/scss/cdb-components/typography.scss
@@ -10,7 +10,7 @@
 <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 is-semibold is-upper CDB-Size-medium">Open Sans 12/16 Semibold Uppercase</p>
-<p class="CDB-Text CDB-Size-medium u-textSecondary">Open Sans 12/16 Regular</p>
+<p class="CDB-Text CDB-Size-medium u-secondaryTextColor">Open Sans 12/16 Regular</p>
 <p class="CDB-Text CDB-Size-medium u-altTextColor">Open Sans 12/16 Regular</p>
 <p class="CDB-Text CDB-Size-medium u-hintTextColor">Open Sans 12/16 Regular</p>
 <p class="CDB-Text is-semibold CDB-Size-small">Open Sans 10/14 Semibold</p>
diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss
index 9a201d8..b21de94 100644
--- a/src/scss/cdb-utilities/helpers.scss
+++ b/src/scss/cdb-utilities/helpers.scss
@@ -43,9 +43,9 @@
 // ----------------------------------------------
 
 .u-mainTextColor {
-  color: $cMainDark;
+  color: $cMainTextColor;
 }
-.u-textSecondary {
+.u-secondaryTextColor {
   color: $cTypo2;
 }
 .u-altTextColor {
diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss
index bd1a9e4..fb8f9ee 100644
--- a/src/scss/cdb-variables/_colors.scss
+++ b/src/scss/cdb-variables/_colors.scss
@@ -5,7 +5,7 @@
 $cBlue: #3AA9E3;
 $cBlack: #000;
 $cWhite: #FFF;
-$cMainDark: #2E3C43;
+$cMainBgColor: #2E3C43;
 
 //Structure
 $cSecondaryDark: #282C2F;
@@ -18,10 +18,10 @@ $cMainLine: #DDD;
 $cSecondaryLine: #EEE;
 
 //Typography
-$cTypoMain: #2E3C43;
-$cTypo2: #636D72;
-$cTypo3: #979EA1;
-$cTypo4: #CBCED0;
+$cMainTextColor: #2E3C43;
+$cSecondaryTextColor: #636D72;
+$cAltTextColor: #979EA1;
+$cHintTextColor: #CBCED0;
 
 //Others
 $cHighlight: #9DE0AD;