diff --git a/.storybook/preview.scss b/.storybook/preview.scss
index 80d9558d..1455f798 100644
--- a/.storybook/preview.scss
+++ b/.storybook/preview.scss
@@ -1,4 +1,4 @@
-@import '../src/assets/styles/helper-classes.scss';
+@import '../src/assets/styles/helper-classes';
 
 body {
   margin: 20px;
diff --git a/src/assets/styles/_old-colors.scss b/src/assets/styles/_old-colors.scss
deleted file mode 100644
index 3a2f50e3..00000000
--- a/src/assets/styles/_old-colors.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-// Color pallete
-// teal
-$sb-green: #00b3b0;
-$sb-green-100: #40bebb;
-$sb-green-75: #40c6c4;
-$sb-green-50: #7fd9d7;
-$sb-green-25: #d9f4f3;
-$sb-green-20: #ccf0ef;
-
-// Ink
-$sb-dark-blue: #1b243f;
-$sb-dark-blue-75: #545b6f;
-$sb-dark-blue-50: #8d919f;
-$sb-dark-blue-25: #c6c8cf;
-
-// green
-$green: #2db47d;
-$green-75: #62c79e;
-$green-50: #96d9be;
-$green-25: #caecde;
-$green-20: #d5f0e5;
-$green-disabled: #004e4c;
-
-// yellow
-$yellow: #fbce41;
-$yellow-75: #fcdb71;
-$yellow-50: #fde6a0;
-$yellow-25: #fef3cf;
-$yellow-20: #fef5d9;
-
-// blue
-$blue: #395ece;
-$blue-75: #6b87db;
-$blue-50: #9caee6;
-$blue-25: #cdd7f3;
-$blue-20: #d7dff5;
-
-// orange
-$orange: #ffac00;
-$orange-75: #ffc140;
-$orange-50: #ffd57f;
-$orange-25: #ffeabf;
-$orange-20: #fec;
-
-// red
-$red: #ff6159;
-$red-75: #ff8983;
-$red-50: #ffb0ac;
-$red-25: #ffd7d5;
-$red-20: #ffdfde;
-
-// light
-$light: #dfe3e8;
-$gray-100: #e7eaee;
-$light-50: #eff1f3;
-$light-25: #f7f8f9;
-$light-gray: #b1b5be;
-$neutral-gray: #8d919c;
-
-// general
-$black: #101525;
-$white: #fff;
-$shadow-dark-blue-transparent: rgba($sb-dark-blue, 0.2);
-$blue-grey: #415467;
-
-// colors
-$color-primary: $sb-green;
-$color-primary-dark: $sb-dark-blue;
-$color-secondary: $green;
-$color-positive: $green;
-$color-negative: $red;
-$color-warning: $orange;
-$color-white: $white;
-$primary-text-color: $sb-dark-blue;
-$colors: (
-  'primary': $color-primary,
-  'primary-dark': $color-primary-dark,
-  'secondary': $color-secondary,
-  'positive': $color-positive,
-  'negative': $color-negative,
-  'warning': $color-warning,
-  'white': $color-white,
-  'teal': $sb-green,
-  'ink': $sb-dark-blue,
-  'green': $green,
-  'yellow': $yellow,
-  'blue': $blue,
-  'orange': $orange,
-  'red': $red,
-  'light': $light,
-  'light-gray': $light-gray,
-);
diff --git a/src/assets/styles/_typography.scss b/src/assets/styles/_typography.scss
index dd22382b..416cf71c 100644
--- a/src/assets/styles/_typography.scss
+++ b/src/assets/styles/_typography.scss
@@ -37,32 +37,11 @@ $font-size: (
   '32': $font-32,
 );
 
-
 // -- Font weight helper classes
 // E.g. .font-thin, .font-light, ..
 $font-weight: (
-  'light':    $font-light,
-  'regular':  $font-regular,
-  'medium':   $font-medium,
-  'bold':     $font-bold,
+  'light': $font-light,
+  'regular': $font-regular,
+  'medium': $font-medium,
+  'bold': $font-bold,
 );
-
-
-// WILL BE REMOVED SOON
-$heading-2xl: 3.2rem; // will be removed, use font-32
-$heading-xl: 2.6rem; // will be removed, use font-26
-$heading-lg: 2rem; // will be removed, use $font-20
-$heading-md: 1.8rem; // will be removed, use $font-18
-$heading-base: 1.4rem; // will be removed, use font-14
-$heading-s: 1.2rem; // will be removed, use font-12
-$heading-xs: 1rem; // will be removed, use font-10
-$font-15: 1.4rem; // will be removed, use font-14
-$font-19: 1.8rem; // will be removed use font-18
-$font-21: 2rem; // will be removed, use font-20
-$font-25: 2.4rem; // will be removed, use font-24
-$font-36: 3.2rem; // will be removed, use font-32
-$font-weight-thin: 300; // use font-light
-$font-weight-light: 300; // use font-light
-$font-weight-regular: 400; // use font-regular
-$font-weight-medium: 500; // use font-medium
-$font-weight-bold: 700; // use font-bold
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index 85d9579c..2bb423bb 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -20,16 +20,6 @@ body {
   text-rendering: optimizelegibility;
 }
 
-@each $name, $pair in $colors {
-  .bg-#{$name} {
-    background-color: $pair !important;
-  }
-
-  .text-#{$name} {
-    color: $pair !important;
-  }
-}
-
 /*
   Typography
 */
diff --git a/src/assets/styles/helper-classes.scss b/src/assets/styles/helper-classes.scss
index d0bebeb3..306799c8 100644
--- a/src/assets/styles/helper-classes.scss
+++ b/src/assets/styles/helper-classes.scss
@@ -2,6 +2,29 @@
 @import './sizes';
 @import './colors';
 
+$bg-colors: (
+  'white': $bg-white,
+  'teal': $bg-teal,
+  'dark-blue': $bg-dark-blue,
+  'green': $bg-green,
+  'yellow': $bg-yellow,
+  'blue': $bg-blue,
+  'red': $bg-red,
+  'gray': $bg-gray,
+  'gray-50': $bg-gray-50,
+);
+$text-colors: (
+  'yellow': $text-yellow,
+  'white': $text-white,
+  'teal': $text-teal,
+  'red': $text-red,
+  'green': $text-green,
+  'gray-light': $text-gray-light,
+  'gray': $text-gray,
+  'blue': $text-blue,
+  'dark-blue': $text-dark-blue,
+);
+
 @each $name, $pair in $font-size {
   .font-#{$name} {
     font-size: $pair !important;
@@ -76,11 +99,13 @@
   }
 }
 
-@each $name, $pair in $colors {
+@each $name, $pair in $bg-colors {
   .bg-#{$name} {
     background-color: $pair !important;
   }
+}
 
+@each $name, $pair in $text-colors {
   .text-#{$name} {
     color: $pair !important;
   }
diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
index 0c1593b9..d1150309 100644
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -1,4 +1,3 @@
-@import './old-colors';
 @import './colors';
 @import './animation';
 @import './border';
diff --git a/src/components/EditorHeader/components/HeaderTitle.vue b/src/components/EditorHeader/components/HeaderTitle.vue
index 4810b387..6bb19b88 100644
--- a/src/components/EditorHeader/components/HeaderTitle.vue
+++ b/src/components/EditorHeader/components/HeaderTitle.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="sb-editor-header__title">
     <SbButton
+      has-icon-only
       icon="arrow-left"
       variant="tertiary"
       size="small"
diff --git a/src/components/Select/Select.stories.ts b/src/components/Select/Select.stories.ts
index 515d752a..38958c83 100644
--- a/src/components/Select/Select.stories.ts
+++ b/src/components/Select/Select.stories.ts
@@ -451,10 +451,10 @@ export const EmitOption = (args) => ({
           style="max-width: 300px"
         />
 
-        <p class="font-medium text-ink font-size-lg">
+        <p class="font-medium text-dark-blue font-size-lg">
           Selected value {{ singleSelectValue }}
         </p>
-        <p class="font-medium text-ink font-size-lg">
+        <p class="font-medium text-dark-blue font-size-lg">
           Selected option {{ singleSelectOption }}
         </p>
       </div>
@@ -469,7 +469,7 @@ export const EmitOption = (args) => ({
         style="max-width: 300px"
       />
 
-      <p class="font-medium text-ink font-size-lg">
+      <p class="font-medium text-dark-blue font-size-lg">
         Selected value {{ multipleSelectValue }}
       </p>
     </div>
diff --git a/stories/Design/Typography/Typography.stories.js b/stories/Design/Typography/Typography.stories.js
index 5b232da8..74bc81ef 100644
--- a/stories/Design/Typography/Typography.stories.js
+++ b/stories/Design/Typography/Typography.stories.js
@@ -33,41 +33,26 @@ export const AllTexts = () => ({
 
 
       <h2 class="sb-typography__subtitle">Text Color</h2>
-      <p class="text-primary">.text-primary</p>
-      <p class="text-primary-dark">.text-primary-dark</p>
-      <p class="text-secondary">.text-secondary</p>
-      <p class="text-positive">.text-positive</p>
-      <p class="text-negative">.text-negative</p>
-      <p class="text-warning">.text-warning</p>
-      <p class="text-white">.text-white</p>
+      <p class="text-yellow">.text-yellow</p>
+      <p class="text-white bg-dark-blue">.text-white</p>
       <p class="text-teal">.text-teal</p>
-      <p class="text-ink">.text-ink</p>
+      <p class="text-red">.text-red</p>
       <p class="text-green">.text-green</p>
-      <p class="text-yellow">.text-yellow</p>
+      <p class="text-gray-light">.text-gray-light</p>
+      <p class="text-gray">.text-gray</p>
       <p class="text-blue">.text-blue</p>
-      <p class="text-orange">.text-orange</p>
-      <p class="text-red">.text-red</p>
-      <p class="text-light">.text-light</p>
-      <p class="text-light-gray">.text-light-gray</p>
-
+      <p class="text-dark-blue">.text-dark-blue</p>
 
       <h2 class="sb-typography__subtitle">Background color</h2>
-      <p class="bg-primary">.bg-primary</p>
-      <p class="bg-primary-dark">.bg-primary-dark</p>
-      <p class="bg-secondary">.bg-secondary</p>
-      <p class="bg-positive">.bg-positive</p>
-      <p class="bg-negative">.bg-negative</p>
-      <p class="bg-warning">.bg-warning</p>
-      <p class="bg-white">.bg-white</p>
       <p class="bg-teal">.bg-teal</p>
-      <p class="bg-ink">.bg-ink</p>
+      <p class="bg-dark-blue text-white">.bg-dark-blue</p>
       <p class="bg-green">.bg-green</p>
+      <p class="bg-white">.bg-white</p>
       <p class="bg-yellow">.bg-yellow</p>
       <p class="bg-blue">.bg-blue</p>
-      <p class="bg-orange">.bg-orange</p>
       <p class="bg-red">.bg-red</p>
-      <p class="bg-light">.bg-light</p>
-      <p class="bg-light-gray">.bg-light-gray</p>
+      <p class="bg-gray">.bg-gray</p>
+      <p class="bg-gray-50">.bg-gray-50</p>
 
       <h2 class="sb-typography__subtitle">Headings</h2>
       <h1>Heading 1</h1>