diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts
index 161bdc87f3..d347836d14 100644
--- a/src/app/playground-components.ts
+++ b/src/app/playground-components.ts
@@ -1619,6 +1619,17 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
       },
     ],
   },
+  {
+    path: 'typography',
+    children: [
+      {
+        path: 'typography-showcase.component',
+        link: '/typography/typography-showcase.component',
+        component: 'TypographyShowcaseComponent',
+        name: 'Typography Showcase',
+      },
+    ],
+  },
   {
     path: 'bootstrap',
     children: [
diff --git a/src/framework/bootstrap/styles/_default-buttons.scss b/src/framework/bootstrap/styles/_default-buttons.scss
index 74f12681dd..456f84f1fe 100644
--- a/src/framework/bootstrap/styles/_default-buttons.scss
+++ b/src/framework/bootstrap/styles/_default-buttons.scss
@@ -98,22 +98,9 @@
   }
 }
 
-@function btn-hover-color($bg, $percentage: 14%) {
-  @return tint(nb-theme($bg), $percentage);
-}
-
-@function btn-focus-color($bg, $percentage: 14%) {
-  @return tint(nb-theme($bg), $percentage);
-}
-
-@function btn-active-color($bg, $percentage: 14%) {
-  @return shade(nb-theme($bg), $percentage);
-}
-
 @mixin btn-outline-focus($focus) {
   &:focus,
   &.focus {
-    color: nb-theme(btn-outline-focus-fg);
     border-color: $focus;
     box-shadow: none;
   }
@@ -151,90 +138,87 @@
 
 // Focus
 @mixin btn-primary-focus() {
-  @include btn-focus(btn-focus-color(btn-primary-bg));
+  @include btn-focus(nb-theme(btn-primary-hover-bg));
 }
 
 @mixin btn-success-focus() {
-  @include btn-focus(btn-focus-color(btn-success-bg));
+  @include btn-focus(nb-theme(btn-success-hover-bg));
 }
 
 @mixin btn-warning-focus() {
-  @include btn-focus(btn-focus-color(btn-warning-bg));
+  @include btn-focus(nb-theme(btn-warning-hover-bg));
 }
 
 @mixin btn-info-focus() {
-  @include btn-focus(btn-focus-color(btn-info-bg));
+  @include btn-focus(nb-theme(btn-info-hover-bg));
 }
 
 @mixin btn-danger-focus() {
-  @include btn-focus(btn-focus-color(btn-danger-bg));
+  @include btn-focus(nb-theme(btn-danger-hover-bg));
 }
 
 @mixin btn-secondary-focus() {
-  @include btn-outline-focus(btn-focus-color(btn-secondary-border, 20%));
+  @include btn-outline-focus(nb-theme(btn-secondary-hover-bg));
 }
 
-
 // Hover
 @mixin btn-primary-hover() {
-  @include btn-hover(btn-hover-color(btn-primary-bg));
+  @include btn-hover(nb-theme(btn-primary-hover-bg));
 }
 
 @mixin btn-success-hover() {
-  @include btn-hover(btn-hover-color(btn-success-bg));
+  @include btn-hover(nb-theme(btn-success-hover-bg));
 }
 
 @mixin btn-warning-hover() {
-  @include btn-hover(btn-hover-color(btn-warning-bg));
+  @include btn-hover(nb-theme(btn-warning-hover-bg));
 }
 
 @mixin btn-info-hover() {
-  @include btn-hover(btn-hover-color(btn-info-bg));
+  @include btn-hover(nb-theme(btn-info-hover-bg));
 }
 
 @mixin btn-danger-hover() {
-  @include btn-hover(btn-hover-color(btn-danger-bg));
+  @include btn-hover(nb-theme(btn-danger-hover-bg));
 }
 
 @mixin btn-secondary-hover() {
-  @include btn-hover(btn-hover-color(btn-secondary-border));
+  @include btn-hover(nb-theme(btn-secondary-hover-bg));
 }
 
-
 // Active
 @mixin btn-primary-active() {
-  @include btn-active(btn-active-color(btn-primary-bg));
+  @include btn-active(nb-theme(btn-primary-active-bg));
 }
 
 @mixin btn-success-active() {
-  @include btn-active(btn-active-color(btn-success-bg));
+  @include btn-active(nb-theme(btn-success-active-bg));
 }
 
 @mixin btn-warning-active() {
-  @include btn-active(btn-active-color(btn-warning-bg));
+  @include btn-active(nb-theme(btn-warning-active-bg));
 }
 
 @mixin btn-info-active() {
-  @include btn-active(btn-active-color(btn-info-bg));
+  @include btn-active(nb-theme(btn-info-active-bg));
 }
 
 @mixin btn-danger-active() {
-  @include btn-active(btn-active-color(btn-danger-bg));
+  @include btn-active(nb-theme(btn-danger-active-bg));
 }
 
 @mixin btn-secondary-active() {
-  @include btn-active(btn-active-color(btn-secondary-border));
+  @include btn-active(nb-theme(btn-secondary-active-bg));
 }
 
-
 // Disabled
 @mixin btn-disabled() {
   &:disabled, &.btn-disabled {
     opacity: nb-theme(btn-disabled-opacity);
+    cursor: default;
   }
 }
 
-
 @mixin btn-secondary-border() {
   border: 2px solid nb-theme(btn-secondary-border);
 }
diff --git a/src/framework/bootstrap/styles/_forms.scss b/src/framework/bootstrap/styles/_forms.scss
index c088def245..5f97459120 100644
--- a/src/framework/bootstrap/styles/_forms.scss
+++ b/src/framework/bootstrap/styles/_forms.scss
@@ -160,7 +160,7 @@
     }
 
     &:hover {
-      @include label(lighten(nb-theme(checkbox-checked-border-color), 10%), 1);
+      @include label(nb-theme(checkbox-checked-border-color), 1);
     }
 
     &:disabled {
@@ -216,7 +216,7 @@
     }
 
     &:hover {
-      @include label(lighten(nb-theme(checkbox-checked-border-color), 10%), 1);
+      @include label(nb-theme(checkbox-checked-border-color), 1);
     }
 
     &:disabled {
diff --git a/src/framework/bootstrap/styles/_hero-buttons.scss b/src/framework/bootstrap/styles/_hero-buttons.scss
index c12213c5b1..b5da89994b 100644
--- a/src/framework/bootstrap/styles/_hero-buttons.scss
+++ b/src/framework/bootstrap/styles/_hero-buttons.scss
@@ -24,16 +24,11 @@
   .btn.btn-hero-danger {
     @include btn-hero-danger();
   }
-
-  .btn.btn-hero-secondary {
-    @include btn-hero-secondary();
-  }
 }
 
 @mixin btn-hero-primary() {
   @include btn-hero-primary-gradient();
   @include btn-hero-primary-bevel-glow-shadow();
-  @include btn-hero-border-radius();
   @include btn-hero-text();
   @include btn-hero-primary-focus();
   @include btn-hero-primary-hover();
@@ -47,7 +42,6 @@
 @mixin btn-hero-success() {
   @include btn-hero-success-gradient();
   @include btn-hero-success-bevel-glow-shadow();
-  @include btn-hero-border-radius();
   @include btn-hero-text();
   @include btn-hero-success-focus();
   @include btn-hero-success-hover();
@@ -61,7 +55,6 @@
 @mixin btn-hero-warning() {
   @include btn-hero-warning-gradient();
   @include btn-hero-warning-bevel-glow-shadow();
-  @include btn-hero-border-radius();
   @include btn-hero-text();
   @include btn-hero-warning-focus();
   @include btn-hero-warning-hover();
@@ -75,7 +68,6 @@
 @mixin btn-hero-info() {
   @include btn-hero-info-gradient();
   @include btn-hero-info-bevel-glow-shadow();
-  @include btn-hero-border-radius();
   @include btn-hero-text();
   @include btn-hero-info-focus();
   @include btn-hero-info-hover();
@@ -89,7 +81,6 @@
 @mixin btn-hero-danger() {
   @include btn-hero-danger-gradient();
   @include btn-hero-danger-bevel-glow-shadow();
-  @include btn-hero-border-radius();
   @include btn-hero-text();
   @include btn-hero-danger-focus();
   @include btn-hero-danger-hover();
@@ -100,176 +91,54 @@
   @include btn-hero-danger-pulse();
 }
 
-@mixin btn-hero-secondary() {
-  color: nb-theme(btn-outline-fg);
-  @include btn-hero-secondary-bg();
-  @include btn-hero-secondary-bevel-glow-shadow();
-  @include btn-hero-border-radius();
-  @include btn-hero-text();
-  @include btn-hero-secondary-focus();
-  @include btn-hero-secondary-hover();
-  @include btn-hero-secondary-active();
-  @include btn-hero-secondary-border();
-  @include btn-hero-disabled();
-  @include btn-hero-secondary-pulse();
-}
-
-@function btn-hero-gradient-left($color, $degrees: 20deg) {
-  @return adjust-hue($color, $degrees);
-}
-
-// Functions for box-shadow
-@function btn-hero-bevel($color) {
-  @return nb-theme(btn-hero-bevel-size) shade($color, 14%);
-}
-
-@function btn-hero-glow($hero-glow-size, $color) {
-  @return nb-theme($hero-glow-size) $color;
-}
-
-// Left colors
-@function btn-hero-primary-left-color() {
-  @return btn-hero-gradient-left(nb-theme(btn-primary-bg), nb-theme(btn-hero-primary-degree));
-}
-
-@function btn-hero-success-left-color() {
-  @return btn-hero-gradient-left(nb-theme(btn-success-bg), nb-theme(btn-hero-success-degree));
-}
-
-@function btn-hero-warning-left-color() {
-  @return btn-hero-gradient-left(nb-theme(btn-warning-bg), nb-theme(btn-hero-warning-degree));
-}
-
-@function btn-hero-info-left-color() {
-  @return btn-hero-gradient-left(nb-theme(btn-info-bg), nb-theme(btn-hero-info-degree));
-}
-
-@function btn-hero-danger-left-color() {
-  @return btn-hero-gradient-left(nb-theme(btn-danger-bg), nb-theme(btn-hero-danger-degree));
-}
-
-@function btn-hero-secondary-left-color() {
-  @return btn-hero-gradient-left(nb-theme(btn-secondary-border), nb-theme(btn-hero-secondary-degree));
-}
-
-// Middle colors
-@function btn-hero-primary-middle-color() {
-  @return mix(btn-hero-primary-left-color(), nb-theme(btn-primary-bg));
-}
-
-@function btn-hero-success-middle-color() {
-  @return mix(btn-hero-success-left-color(), nb-theme(btn-success-bg));
-}
-
-@function btn-hero-warning-middle-color() {
-  @return mix(btn-hero-warning-left-color(), nb-theme(btn-warning-bg));
-}
-
-@function btn-hero-info-middle-color() {
-  @return mix(btn-hero-info-left-color(), nb-theme(btn-info-bg));
-}
-
-@function btn-hero-danger-middle-color() {
-  @return mix(btn-hero-danger-left-color(), nb-theme(btn-danger-bg));
-}
-
-@function btn-hero-secondary-middle-color() {
-  @return mix(btn-hero-secondary-left-color(), nb-theme(btn-secondary-border));
-}
-
-// light gradients
-
-@function btn-hero-light-gradient($color-left, $color-right) {
-  $color-left: tint($color-left, 14%);
-  $color-right: tint($color-right, 14%);
-
-  @return linear-gradient(to right, $color-left, $color-right);
-}
-
 @function btn-hero-primary-light-gradient() {
-  $color-right: nb-theme(btn-primary-bg);
-  $color-left: btn-hero-primary-left-color();
-
-  @return btn-hero-light-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-primary-left-hover-bg), nb-theme(btn-hero-primary-right-hover-bg));
 }
 
 @function btn-hero-success-light-gradient() {
-  $color-right: nb-theme(btn-success-bg);
-  $color-left: btn-hero-success-left-color();
-
-  @return btn-hero-light-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-success-left-hover-bg), nb-theme(btn-hero-success-right-hover-bg));
 }
 
 @function btn-hero-warning-light-gradient() {
-  $color-right: nb-theme(btn-warning-bg);
-  $color-left: btn-hero-warning-left-color();
-
-  @return btn-hero-light-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-warning-left-hover-bg), nb-theme(btn-hero-warning-right-hover-bg));
 }
 
 @function btn-hero-info-light-gradient() {
-  $color-right: nb-theme(btn-info-bg);
-  $color-left: btn-hero-info-left-color();
-
-  @return btn-hero-light-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-info-left-hover-bg), nb-theme(btn-hero-info-right-hover-bg));
 }
 
 @function btn-hero-danger-light-gradient() {
-  $color-right: nb-theme(btn-danger-bg);
-  $color-left: btn-hero-danger-left-color();
-
-  @return btn-hero-light-gradient($color-left, $color-right);
-}
-
-@function btn-hero-secondary-light-gradient() {
-  $color-right: nb-theme(btn-secondary-bg);
-  $color-left: btn-hero-secondary-left-color();
-
-  @return btn-hero-light-gradient($color-left, $color-right);
-}
-
-// dark gradients
-
-@function btn-hero-dark-gradient($color-left, $color-right) {
-  $color-left: shade($color-left, 14%);
-  $color-right: shade($color-right, 14%);
-
-  @return linear-gradient(to right, $color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-danger-left-hover-bg), nb-theme(btn-hero-danger-right-hover-bg));
 }
 
 @function btn-hero-primary-dark-gradient() {
-  $color-right: nb-theme(btn-primary-bg);
-  $color-left: btn-hero-primary-left-color();
-
-  @return btn-hero-dark-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-primary-left-active-bg), nb-theme(btn-hero-primary-right-active-bg));
 }
 
 @function btn-hero-success-dark-gradient() {
-  $color-right: nb-theme(btn-success-bg);
-  $color-left: btn-hero-success-left-color();
-
-  @return btn-hero-dark-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-success-left-active-bg), nb-theme(btn-hero-success-right-active-bg));
 }
 
 @function btn-hero-warning-dark-gradient() {
-  $color-right: nb-theme(btn-warning-bg);
-  $color-left: btn-hero-warning-left-color();
-
-  @return btn-hero-dark-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-warning-left-active-bg), nb-theme(btn-hero-warning-right-active-bg));
 }
 
 @function btn-hero-info-dark-gradient() {
-  $color-right: nb-theme(btn-info-bg);
-  $color-left: btn-hero-info-left-color();
-
-  @return btn-hero-dark-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-info-left-active-bg), nb-theme(btn-hero-info-right-active-bg));
 }
 
 @function btn-hero-danger-dark-gradient() {
-  $color-right: nb-theme(btn-danger-bg);
-  $color-left: btn-hero-danger-left-color();
-
-  @return btn-hero-dark-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-danger-left-active-bg), nb-theme(btn-hero-danger-right-active-bg));
 }
 // End functions
 
@@ -300,113 +169,75 @@
     border-color: transparent;
   }
 }
-
-@mixin btn-hero-border-radius() {
-  border-radius: nb-theme(btn-hero-border-radius);
-}
 // End help mixins
 
-
 // Gradient
 @mixin btn-hero-primary-gradient() {
-  $color-right: nb-theme(btn-primary-bg);
-  $color-left: btn-hero-primary-left-color();
-
-  @include nb-right-gradient($color-left, $color-right);
+  @include nb-right-gradient(nb-theme(btn-hero-primary-left-bg), nb-theme(btn-hero-primary-right-bg));
 }
 
 @mixin btn-hero-success-gradient() {
-  $color-right: nb-theme(btn-success-bg);
-  $color-left: btn-hero-success-left-color();
-
-  @include nb-right-gradient($color-left, $color-right);
+  @include nb-right-gradient(nb-theme(btn-hero-success-left-bg), nb-theme(btn-hero-success-right-bg));
 }
 
 @mixin btn-hero-warning-gradient() {
-  $color-right: nb-theme(btn-warning-bg);
-  $color-left: btn-hero-warning-left-color();
-
-  @include nb-right-gradient($color-left, $color-right);
+  @include nb-right-gradient(nb-theme(btn-hero-warning-left-bg), nb-theme(btn-hero-warning-right-bg));
 }
 
 @mixin btn-hero-info-gradient() {
-  $color-right: nb-theme(btn-info-bg);
-  $color-left: btn-hero-info-left-color();
-
-  @include nb-right-gradient($color-left, $color-right);
+  @include nb-right-gradient(nb-theme(btn-hero-info-left-bg), nb-theme(btn-hero-info-right-bg));
 }
 
 @mixin btn-hero-danger-gradient() {
-  $color-right: nb-theme(btn-danger-bg);
-  $color-left: btn-hero-danger-left-color();
-
-  @include nb-right-gradient($color-left, $color-right);
-}
-
-@mixin btn-hero-secondary-bg() {
-  background-color: nb-theme(btn-secondary-bg);
+  @include nb-right-gradient(nb-theme(btn-hero-danger-left-bg), nb-theme(btn-hero-danger-right-bg));
 }
 
 
 // Bevel
 @function btn-hero-primary-bevel() {
-  @return btn-hero-bevel(btn-hero-primary-middle-color());
+  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-primary-bevel-color);
 }
 
 @function btn-hero-success-bevel() {
-  @return btn-hero-bevel(btn-hero-success-middle-color());
+  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-success-bevel-color);
 }
 
 @function btn-hero-warning-bevel() {
-  @return btn-hero-bevel(btn-hero-warning-middle-color());
+  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-warning-bevel-color);
 }
 
 @function btn-hero-info-bevel() {
-  @return btn-hero-bevel(btn-hero-info-middle-color());
+  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-info-bevel-color);
 }
 
 @function btn-hero-danger-bevel() {
-  @return btn-hero-bevel(btn-hero-danger-middle-color());
-}
-
-@function btn-hero-secondary-bevel() {
-  @return btn-hero-bevel(btn-hero-secondary-middle-color());
+  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-danger-bevel-color);
 }
 
-
 // Glow
 @function btn-hero-primary-glow() {
-  @return btn-hero-glow(btn-hero-primary-glow-size, btn-hero-primary-middle-color());
+  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-primary-glow-color);
 }
 
 @function btn-hero-success-glow() {
-  @return btn-hero-glow(btn-hero-success-glow-size, btn-hero-success-middle-color());
+  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-success-glow-color);
 }
 
 @function btn-hero-warning-glow() {
-  @return btn-hero-glow(btn-hero-warning-glow-size, btn-hero-warning-middle-color());
+  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-warning-glow-color);
 }
 
 @function btn-hero-info-glow() {
-  @return btn-hero-glow(btn-hero-info-glow-size, btn-hero-info-middle-color());
+  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-info-glow-color);
 }
 
 @function btn-hero-danger-glow() {
-  @return btn-hero-glow(btn-hero-danger-glow-size, btn-hero-danger-middle-color());
-}
-
-@function btn-hero-secondary-glow() {
-  @return btn-hero-glow(btn-hero-secondary-glow-size, btn-hero-secondary-middle-color());
+  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-danger-glow-color);
 }
 
-
 // Bevel-glow-shadow
 @mixin btn-hero-bevel-glow-shadow($bevel, $glow, $shadow) {
-  $box-shadow: $bevel, $glow;
-  @if ($shadow != 'none') {
-    $box-shadow: $box-shadow, $shadow;
-  }
-  box-shadow: $box-shadow;
+  box-shadow: $bevel, $glow, $shadow;
 }
 
 @mixin btn-hero-primary-bevel-glow-shadow() {
@@ -449,15 +280,6 @@
   @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow);
 }
 
-@mixin btn-hero-secondary-bevel-glow-shadow() {
-  $bevel: btn-hero-secondary-bevel();
-  $glow: btn-hero-secondary-glow();
-  $shadow: nb-theme(btn-hero-shadow);
-
-  @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow);
-}
-
-
 // Border
 @mixin btn-hero-primary-border() {
   border: none;
@@ -479,15 +301,6 @@
   border: none;
 }
 
-@mixin btn-hero-secondary-border() {
-  border: 2px solid nb-theme(btn-secondary-border);
-
-  @include nb-for-theme(corporate) {
-    border: none;
-  }
-}
-
-
 // Hover
 @mixin btn-hero-primary-hover() {
   @include btn-hero-hover(btn-hero-primary-light-gradient());
@@ -509,13 +322,6 @@
   @include btn-hero-hover(btn-hero-danger-light-gradient());
 }
 
-@mixin btn-hero-secondary-hover() {
-  &:hover,
-  .hover {
-    background-color: rgba(nb-theme(btn-secondary-border), 0.2);
-  }
-}
-
 // Focus
 @mixin btn-hero-primary-focus() {
   @include btn-hero-focus(btn-hero-primary-light-gradient());
@@ -537,15 +343,6 @@
   @include btn-hero-focus(btn-hero-danger-light-gradient());
 }
 
-@mixin btn-hero-secondary-focus() {
-  $color: nb-theme(btn-secondary-border);
-
-  &:focus,
-  .focus {
-    border-color: tint($color, 14%);
-  }
-}
-
 // Active
 @mixin btn-hero-primary-active() {
   @include btn-hero-active(btn-hero-primary-dark-gradient());
@@ -567,21 +364,9 @@
   @include btn-hero-active(btn-hero-danger-dark-gradient());
 }
 
-@mixin btn-hero-secondary-active() {
-  $color: nb-theme(btn-secondary-border);
-
-  &:active,
-  .active {
-    border-color: shade($color, 14%);
-    box-shadow: none;
-    background: none;
-  }
-}
-
-
 // Disabled
 @mixin btn-hero-disabled() {
-  &:disabled {
+  &:disabled, &.btn-disabled {
     opacity: nb-theme(btn-disabled-opacity);
     box-shadow: none;
   }
@@ -634,18 +419,19 @@
 @mixin btn-hero-primary-pulse() {
   @include btn-pulse(hero-primary, nb-theme(color-primary));
 }
+
 @mixin btn-hero-success-pulse() {
   @include btn-pulse(hero-success, nb-theme(color-success));
 }
+
 @mixin btn-hero-danger-pulse() {
   @include btn-pulse(hero-danger, nb-theme(color-danger));
 }
+
 @mixin btn-hero-info-pulse() {
   @include btn-pulse(hero-info, nb-theme(color-info));
 }
+
 @mixin btn-hero-warning-pulse() {
   @include btn-pulse(hero-warning, nb-theme(color-warning));
 }
-@mixin btn-hero-secondary-pulse() {
-  @include  btn-pulse(hero-secondary, nb-theme(btn-secondary-border));
-}
diff --git a/src/framework/theme/components/button/_button-colors.scss b/src/framework/theme/components/button/_button-colors.scss
index dddb77e19b..dd21d8b178 100644
--- a/src/framework/theme/components/button/_button-colors.scss
+++ b/src/framework/theme/components/button/_button-colors.scss
@@ -97,18 +97,6 @@
   }
 }
 
-@function btn-hover-color($bg, $percentage: 14%) {
-  @return tint(nb-theme($bg), $percentage);
-}
-
-@function btn-focus-color($bg, $percentage: 14%) {
-  @return tint(nb-theme($bg), $percentage);
-}
-
-@function btn-active-color($bg, $percentage: 14%) {
-  @return shade(nb-theme($bg), $percentage);
-}
-
 @mixin btn-outline-focus($focus) {
   &:focus,
   &.focus {
@@ -149,77 +137,77 @@
 
 // Focus
 @mixin btn-primary-focus() {
-  @include btn-focus(btn-focus-color(btn-primary-bg));
+  @include btn-focus(nb-theme(btn-primary-hover-bg));
 }
 
 @mixin btn-success-focus() {
-  @include btn-focus(btn-focus-color(btn-success-bg));
+  @include btn-focus(nb-theme(btn-success-hover-bg));
 }
 
 @mixin btn-warning-focus() {
-  @include btn-focus(btn-focus-color(btn-warning-bg));
+  @include btn-focus(nb-theme(btn-warning-hover-bg));
 }
 
 @mixin btn-info-focus() {
-  @include btn-focus(btn-focus-color(btn-info-bg));
+  @include btn-focus(nb-theme(btn-info-hover-bg));
 }
 
 @mixin btn-danger-focus() {
-  @include btn-focus(btn-focus-color(btn-danger-bg));
+  @include btn-focus(nb-theme(btn-danger-hover-bg));
 }
 
 @mixin btn-secondary-focus() {
-  @include btn-outline-focus(btn-focus-color(btn-secondary-border, 20%));
+  @include btn-outline-focus(nb-theme(btn-secondary-hover-bg));
 }
 
 // Hover
 @mixin btn-primary-hover() {
-  @include btn-hover(btn-hover-color(btn-primary-bg));
+  @include btn-hover(nb-theme(btn-primary-hover-bg));
 }
 
 @mixin btn-success-hover() {
-  @include btn-hover(btn-hover-color(btn-success-bg));
+  @include btn-hover(nb-theme(btn-success-hover-bg));
 }
 
 @mixin btn-warning-hover() {
-  @include btn-hover(btn-hover-color(btn-warning-bg));
+  @include btn-hover(nb-theme(btn-warning-hover-bg));
 }
 
 @mixin btn-info-hover() {
-  @include btn-hover(btn-hover-color(btn-info-bg));
+  @include btn-hover(nb-theme(btn-info-hover-bg));
 }
 
 @mixin btn-danger-hover() {
-  @include btn-hover(btn-hover-color(btn-danger-bg));
+  @include btn-hover(nb-theme(btn-danger-hover-bg));
 }
 
 @mixin btn-secondary-hover() {
-  @include btn-hover(btn-hover-color(btn-secondary-border));
+  @include btn-hover(nb-theme(btn-secondary-hover-bg));
 }
 
 // Active
 @mixin btn-primary-active() {
-  @include btn-active(btn-active-color(btn-primary-bg));
+  @include btn-active(nb-theme(btn-primary-active-bg));
 }
 
 @mixin btn-success-active() {
-  @include btn-active(btn-active-color(btn-success-bg));
+  @include btn-active(nb-theme(btn-success-active-bg));
 }
 
 @mixin btn-warning-active() {
-  @include btn-active(btn-active-color(btn-warning-bg));
+  @include btn-active(nb-theme(btn-warning-active-bg));
 }
 
 @mixin btn-info-active() {
-  @include btn-active(btn-active-color(btn-info-bg));
+  @include btn-active(nb-theme(btn-info-active-bg));
 }
 
 @mixin btn-danger-active() {
-  @include btn-active(btn-active-color(btn-danger-bg));
+  @include btn-active(nb-theme(btn-danger-active-bg));
 }
 
 @mixin btn-secondary-active() {
-  @include btn-active(btn-active-color(btn-secondary-border));
+  @include btn-active(nb-theme(btn-secondary-active-bg));
 }
 
 // Disabled
diff --git a/src/framework/theme/components/button/_button-heroes.scss b/src/framework/theme/components/button/_button-heroes.scss
index 4e3fb80718..7a57504153 100644
--- a/src/framework/theme/components/button/_button-heroes.scss
+++ b/src/framework/theme/components/button/_button-heroes.scss
@@ -24,10 +24,6 @@
   &.btn-hero.btn-danger {
     @include btn-hero-danger();
   }
-
-  &.btn-hero.btn-secondary {
-    @include btn-hero-secondary();
-  }
 }
 
 @mixin btn-hero-primary() {
@@ -95,166 +91,54 @@
   @include btn-hero-danger-pulse();
 }
 
-@mixin btn-hero-secondary() {
-  color: nb-theme(btn-outline-fg);
-  @include btn-hero-secondary-bg();
-  @include btn-hero-secondary-bevel-glow-shadow();
-  @include btn-hero-text();
-  @include btn-hero-secondary-focus();
-  @include btn-hero-secondary-hover();
-  @include btn-hero-secondary-active();
-  @include btn-hero-secondary-border();
-  @include btn-hero-disabled();
-  @include btn-hero-secondary-pulse();
-}
-
-@function btn-hero-gradient-left($color, $degrees: 20deg) {
-  @return adjust-hue($color, $degrees);
-}
-
-// Functions for box-shadow
-@function btn-hero-bevel($color) {
-  @return nb-theme(btn-hero-bevel-size) shade($color, 14%);
-}
-
-@function btn-hero-glow($color) {
-  @return nb-theme(btn-hero-glow-size) $color;
-}
-
-// Left colors
-@function btn-hero-primary-left-color() {
-  @return btn-hero-gradient-left(nb-theme(btn-primary-bg));
-}
-
-@function btn-hero-success-left-color() {
-  @return btn-hero-gradient-left(nb-theme(btn-success-bg));
-}
-
-@function btn-hero-warning-left-color() {
-  @return btn-hero-gradient-left(nb-theme(btn-warning-bg), 10deg);
-}
-
-@function btn-hero-info-left-color() {
-  @return btn-hero-gradient-left(nb-theme(btn-info-bg), -10deg);
-}
-
-@function btn-hero-danger-left-color() {
-  @return btn-hero-gradient-left(nb-theme(btn-danger-bg), -20deg);
-}
-
-@function btn-hero-secondary-left-color() {
-  @return btn-hero-gradient-left(nb-theme(btn-secondary-border));
-}
-
-// Middle colors
-@function btn-hero-primary-middle-color() {
-  @return mix(btn-hero-primary-left-color(), nb-theme(btn-primary-bg));
-}
-
-@function btn-hero-success-middle-color() {
-  @return mix(btn-hero-success-left-color(), nb-theme(btn-success-bg));
-}
-
-@function btn-hero-warning-middle-color() {
-  @return mix(btn-hero-warning-left-color(), nb-theme(btn-warning-bg));
-}
-
-@function btn-hero-info-middle-color() {
-  @return mix(btn-hero-info-left-color(), nb-theme(btn-info-bg));
-}
-
-@function btn-hero-danger-middle-color() {
-  @return mix(btn-hero-danger-left-color(), nb-theme(btn-danger-bg));
-}
-
-@function btn-hero-secondary-middle-color() {
-  @return mix(btn-hero-secondary-left-color(), nb-theme(btn-secondary-border));
-}
-
-// light gradients
-@function btn-hero-light-gradient($color-left, $color-right) {
-  $color-left: tint($color-left, 14%);
-  $color-right: tint($color-right, 14%);
-
-  @return linear-gradient(to right, $color-left, $color-right);
-}
-
 @function btn-hero-primary-light-gradient() {
-  $color-right: nb-theme(btn-primary-bg);
-  $color-left: btn-hero-primary-left-color();
-
-  @return btn-hero-light-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-primary-left-hover-bg), nb-theme(btn-hero-primary-right-hover-bg));
 }
 
 @function btn-hero-success-light-gradient() {
-  $color-right: nb-theme(btn-success-bg);
-  $color-left: btn-hero-success-left-color();
-
-  @return btn-hero-light-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-success-left-hover-bg), nb-theme(btn-hero-success-right-hover-bg));
 }
 
 @function btn-hero-warning-light-gradient() {
-  $color-right: nb-theme(btn-warning-bg);
-  $color-left: btn-hero-warning-left-color();
-
-  @return btn-hero-light-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-warning-left-hover-bg), nb-theme(btn-hero-warning-right-hover-bg));
 }
 
 @function btn-hero-info-light-gradient() {
-  $color-right: nb-theme(btn-info-bg);
-  $color-left: btn-hero-info-left-color();
-
-  @return btn-hero-light-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-info-left-hover-bg), nb-theme(btn-hero-info-right-hover-bg));
 }
 
 @function btn-hero-danger-light-gradient() {
-  $color-right: nb-theme(btn-danger-bg);
-  $color-left: btn-hero-danger-left-color();
-
-  @return btn-hero-light-gradient($color-left, $color-right);
-}
-
-// dark gradients
-@function btn-hero-dark-gradient($color-left, $color-right) {
-  $color-left: shade($color-left, 14%);
-  $color-right: shade($color-right, 14%);
-
-  @return linear-gradient(to right, $color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-danger-left-hover-bg), nb-theme(btn-hero-danger-right-hover-bg));
 }
 
 @function btn-hero-primary-dark-gradient() {
-  $color-right: nb-theme(btn-primary-bg);
-  $color-left: btn-hero-primary-left-color();
-
-  @return btn-hero-dark-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-primary-left-active-bg), nb-theme(btn-hero-primary-right-active-bg));
 }
 
 @function btn-hero-success-dark-gradient() {
-  $color-right: nb-theme(btn-success-bg);
-  $color-left: btn-hero-success-left-color();
-
-  @return btn-hero-dark-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-success-left-active-bg), nb-theme(btn-hero-success-right-active-bg));
 }
 
 @function btn-hero-warning-dark-gradient() {
-  $color-right: nb-theme(btn-warning-bg);
-  $color-left: btn-hero-warning-left-color();
-
-  @return btn-hero-dark-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-warning-left-active-bg), nb-theme(btn-hero-warning-right-active-bg));
 }
 
 @function btn-hero-info-dark-gradient() {
-  $color-right: nb-theme(btn-info-bg);
-  $color-left: btn-hero-info-left-color();
-
-  @return btn-hero-dark-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-info-left-active-bg), nb-theme(btn-hero-info-right-active-bg));
 }
 
 @function btn-hero-danger-dark-gradient() {
-  $color-right: nb-theme(btn-danger-bg);
-  $color-left: btn-hero-danger-left-color();
-
-  @return btn-hero-dark-gradient($color-left, $color-right);
+  @return
+    linear-gradient(to right, nb-theme(btn-hero-danger-left-active-bg), nb-theme(btn-hero-danger-right-active-bg));
 }
 // End functions
 
@@ -289,102 +173,71 @@
 
 // Gradient
 @mixin btn-hero-primary-gradient() {
-  $color-right: nb-theme(btn-primary-bg);
-  $color-left: btn-hero-primary-left-color();
-
-  @include nb-right-gradient($color-left, $color-right);
+  @include nb-right-gradient(nb-theme(btn-hero-primary-left-bg), nb-theme(btn-hero-primary-right-bg));
 }
 
 @mixin btn-hero-success-gradient() {
-  $color-right: nb-theme(btn-success-bg);
-  $color-left: btn-hero-success-left-color();
-
-  @include nb-right-gradient($color-left, $color-right);
+  @include nb-right-gradient(nb-theme(btn-hero-success-left-bg), nb-theme(btn-hero-success-right-bg));
 }
 
 @mixin btn-hero-warning-gradient() {
-  $color-right: nb-theme(btn-warning-bg);
-  $color-left: btn-hero-warning-left-color();
-
-  @include nb-right-gradient($color-left, $color-right);
+  @include nb-right-gradient(nb-theme(btn-hero-warning-left-bg), nb-theme(btn-hero-warning-right-bg));
 }
 
 @mixin btn-hero-info-gradient() {
-  $color-right: nb-theme(btn-info-bg);
-  $color-left: btn-hero-info-left-color();
-
-  @include nb-right-gradient($color-left, $color-right);
+  @include nb-right-gradient(nb-theme(btn-hero-info-left-bg), nb-theme(btn-hero-info-right-bg));
 }
 
 @mixin btn-hero-danger-gradient() {
-  $color-right: nb-theme(btn-danger-bg);
-  $color-left: btn-hero-danger-left-color();
-
-  @include nb-right-gradient($color-left, $color-right);
-}
-
-@mixin btn-hero-secondary-bg() {
-  background-color: nb-theme(btn-secondary-bg);
+  @include nb-right-gradient(nb-theme(btn-hero-danger-left-bg), nb-theme(btn-hero-danger-right-bg));
 }
 
 
 // Bevel
 @function btn-hero-primary-bevel() {
-  @return btn-hero-bevel(btn-hero-primary-middle-color());
+  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-primary-bevel-color);
 }
 
 @function btn-hero-success-bevel() {
-  @return btn-hero-bevel(btn-hero-success-middle-color());
+  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-success-bevel-color);
 }
 
 @function btn-hero-warning-bevel() {
-  @return btn-hero-bevel(btn-hero-warning-middle-color());
+  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-warning-bevel-color);
 }
 
 @function btn-hero-info-bevel() {
-  @return btn-hero-bevel(btn-hero-info-middle-color());
+  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-info-bevel-color);
 }
 
 @function btn-hero-danger-bevel() {
-  @return btn-hero-bevel(btn-hero-danger-middle-color());
-}
-
-@function btn-hero-secondary-bevel() {
-  @return btn-hero-bevel(btn-hero-secondary-middle-color());
+  @return nb-theme(btn-hero-bevel-size) nb-theme(btn-hero-danger-bevel-color);
 }
 
 // Glow
 @function btn-hero-primary-glow() {
-  @return btn-hero-glow(btn-hero-primary-middle-color());
+  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-primary-glow-color);
 }
 
 @function btn-hero-success-glow() {
-  @return btn-hero-glow(btn-hero-success-middle-color());
+  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-success-glow-color);
 }
 
 @function btn-hero-warning-glow() {
-  @return btn-hero-glow(btn-hero-warning-middle-color());
+  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-warning-glow-color);
 }
 
 @function btn-hero-info-glow() {
-  @return btn-hero-glow(btn-hero-info-middle-color());
+  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-info-glow-color);
 }
 
 @function btn-hero-danger-glow() {
-  @return btn-hero-glow(btn-hero-danger-middle-color());
-}
-
-@function btn-hero-secondary-glow() {
-  @return btn-hero-glow(btn-hero-secondary-middle-color());
+  @return nb-theme(btn-hero-glow-size) nb-theme(btn-hero-danger-glow-color);
 }
 
 // Bevel-glow-shadow
 @mixin btn-hero-bevel-glow-shadow($bevel, $glow, $shadow) {
-  $box-shadow: $bevel, $glow;
-  @if ($shadow != 'none') {
-    $box-shadow: $box-shadow, $shadow;
-  }
-  box-shadow: $box-shadow;
+  box-shadow: $bevel, $glow, $shadow;
 }
 
 @mixin btn-hero-primary-bevel-glow-shadow() {
@@ -427,14 +280,6 @@
   @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow);
 }
 
-@mixin btn-hero-secondary-bevel-glow-shadow() {
-  $bevel: btn-hero-secondary-bevel();
-  $glow: btn-hero-secondary-glow();
-  $shadow: nb-theme(btn-hero-shadow);
-
-  @include btn-hero-bevel-glow-shadow($bevel, $glow, $shadow);
-}
-
 // Border
 @mixin btn-hero-primary-border() {
   border: none;
@@ -456,10 +301,6 @@
   border: none;
 }
 
-@mixin btn-hero-secondary-border() {
-  border: 2px solid nb-theme(btn-secondary-border);
-}
-
 // Hover
 @mixin btn-hero-primary-hover() {
   @include btn-hero-hover(btn-hero-primary-light-gradient());
@@ -481,13 +322,6 @@
   @include btn-hero-hover(btn-hero-danger-light-gradient());
 }
 
-@mixin btn-hero-secondary-hover() {
-  &:hover,
-  .hover {
-    background-color: rgba(nb-theme(btn-secondary-border), 0.2);
-  }
-}
-
 // Focus
 @mixin btn-hero-primary-focus() {
   @include btn-hero-focus(btn-hero-primary-light-gradient());
@@ -509,15 +343,6 @@
   @include btn-hero-focus(btn-hero-danger-light-gradient());
 }
 
-@mixin btn-hero-secondary-focus() {
-  $color: nb-theme(btn-secondary-border);
-
-  &:focus,
-  .focus {
-    border-color: tint($color, 14%);
-  }
-}
-
 // Active
 @mixin btn-hero-primary-active() {
   @include btn-hero-active(btn-hero-primary-dark-gradient());
@@ -539,17 +364,6 @@
   @include btn-hero-active(btn-hero-danger-dark-gradient());
 }
 
-@mixin btn-hero-secondary-active() {
-  $color: nb-theme(btn-secondary-border);
-
-  &:active,
-  .active {
-    border-color: shade($color, 14%);
-    box-shadow: none;
-    background: none;
-  }
-}
-
 // Disabled
 @mixin btn-hero-disabled() {
   &:disabled, &.btn-disabled {
@@ -605,18 +419,19 @@
 @mixin btn-hero-primary-pulse() {
   @include btn-pulse(hero-primary, nb-theme(color-primary));
 }
+
 @mixin btn-hero-success-pulse() {
   @include btn-pulse(hero-success, nb-theme(color-success));
 }
+
 @mixin btn-hero-danger-pulse() {
   @include btn-pulse(hero-danger, nb-theme(color-danger));
 }
+
 @mixin btn-hero-info-pulse() {
   @include btn-pulse(hero-info, nb-theme(color-info));
 }
+
 @mixin btn-hero-warning-pulse() {
   @include btn-pulse(hero-warning, nb-theme(color-warning));
 }
-@mixin btn-hero-secondary-pulse() {
-  @include  btn-pulse(hero-secondary, nb-theme(btn-secondary-border));
-}
diff --git a/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss b/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss
index f21231bbfa..ddcd6d376c 100644
--- a/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss
+++ b/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss
@@ -46,10 +46,6 @@
 
   nb-calendar-navigation button[nbButton] {
     width: nb-theme(calendar-navigation-button-width);
-
-    @include nb-for-theme(default) {
-      @include btn-success();
-    }
   }
 
   nb-calendar-day-picker .day-cell,
@@ -102,10 +98,6 @@
       background: nb-theme(calendar-hover-item-bg);
       color: nb-theme(calendar-selected-fg);
       font-weight: nb-theme(font-weight-bold);
-
-      @include nb-for-theme(cosmic) {
-        @include btn-hero-success-gradient();
-      }
     }
 
     &:active {
@@ -151,10 +143,6 @@
       background: nb-theme(calendar-hover-item-bg);
       color: nb-theme(calendar-selected-fg);
       font-weight: nb-theme(font-weight-bold);
-
-      @include nb-for-theme(cosmic) {
-        @include btn-hero-success-gradient();
-      }
     }
 
     &:active {
@@ -198,10 +186,6 @@
       background: nb-theme(calendar-hover-item-bg);
       color: nb-theme(calendar-selected-fg);
       font-weight: nb-theme(font-weight-bold);
-
-      @include nb-for-theme(cosmic) {
-        @include btn-hero-success-gradient();
-      }
     }
 
     &.selected {
diff --git a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
index ce4d051133..b0139e8cb3 100644
--- a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
+++ b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss
@@ -11,7 +11,8 @@
 
   &:hover .customised-control-input:enabled + .customised-control-indicator,
   .customised-control-input:focus:enabled + .customised-control-indicator {
-    border-color: lighten($color, 10%);
+    border-color: $color;
+    opacity: 0.6;
   }
 }
 
diff --git a/src/framework/theme/components/context-menu/_context-menu.component.theme.scss b/src/framework/theme/components/context-menu/_context-menu.component.theme.scss
index 15988eba1d..c970e7fb5c 100644
--- a/src/framework/theme/components/context-menu/_context-menu.component.theme.scss
+++ b/src/framework/theme/components/context-menu/_context-menu.component.theme.scss
@@ -38,24 +38,24 @@
     }
 
     &.nb-overlay-bottom .arrow {
-      top: calc(-#{$arrow-size} + 1px);
+      top: calc(-1 * #{$arrow-size} + 1px);
       left: calc(50% - #{$arrow-size});
     }
 
     &.nb-overlay-left .arrow {
-      right: round(-$arrow-size - $arrow-size / 2 + 2px);
+      right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
       top: calc(50% - #{$arrow-size / 2});
       transform: rotate(90deg);
     }
 
     &.nb-overlay-top .arrow {
-      bottom: calc(-#{$arrow-size} + 1px);
+      bottom: calc(-1 * #{$arrow-size} + 1px);
       left: calc(50% - #{$arrow-size});
       transform: rotate(180deg);
     }
 
     &.nb-overlay-right .arrow {
-      left: round(-$arrow-size - $arrow-size / 2 + 2px);
+      left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
       top: calc(50% - #{$arrow-size / 2});
       transform: rotate(270deg);
     }
diff --git a/src/framework/theme/components/datepicker/_datepicker-container.component.theme.scss b/src/framework/theme/components/datepicker/_datepicker-container.component.theme.scss
index 8a8a2d0567..c4effd6773 100644
--- a/src/framework/theme/components/datepicker/_datepicker-container.component.theme.scss
+++ b/src/framework/theme/components/datepicker/_datepicker-container.component.theme.scss
@@ -38,24 +38,24 @@
     }
 
     &.nb-overlay-bottom .arrow {
-      top: calc(-#{$arrow-size} + 1px);
+      top: calc(-1 * #{$arrow-size} + 1px);
       left: calc(50% - #{$arrow-size});
     }
 
     &.nb-overlay-left .arrow {
-      right: round(-$arrow-size - $arrow-size / 2 + 2px);
+      right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
       top: calc(50% - #{$arrow-size / 2});
       transform: rotate(90deg);
     }
 
     &.nb-overlay-top .arrow {
-      bottom: calc(-#{$arrow-size} + 1px);
+      bottom: calc(-1 * #{$arrow-size} + 1px);
       left: calc(50% - #{$arrow-size});
       transform: rotate(180deg);
     }
 
     &.nb-overlay-right .arrow {
-      left: round(-$arrow-size - $arrow-size / 2 + 2px);
+      left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
       top: calc(50% - #{$arrow-size / 2});
       transform: rotate(270deg);
     }
diff --git a/src/framework/theme/components/input/_input.directive.theme.scss b/src/framework/theme/components/input/_input.directive.theme.scss
index e79f5c7f14..d948144638 100644
--- a/src/framework/theme/components/input/_input.directive.theme.scss
+++ b/src/framework/theme/components/input/_input.directive.theme.scss
@@ -26,8 +26,9 @@
 
     &[disabled] {
       @include install-placeholder(
-        rgba(nb-theme(form-control-placeholder-color), 0.5),
-        nb-theme(form-control-placeholder-font-size)
+        nb-theme(form-control-placeholder-color),
+        nb-theme(form-control-placeholder-font-size),
+        0.5
       );
     }
 
diff --git a/src/framework/theme/components/popover/_popover.component.theme.scss b/src/framework/theme/components/popover/_popover.component.theme.scss
index 588081920e..2d6a79875e 100644
--- a/src/framework/theme/components/popover/_popover.component.theme.scss
+++ b/src/framework/theme/components/popover/_popover.component.theme.scss
@@ -37,24 +37,24 @@
     }
 
     &.nb-overlay-bottom .arrow {
-      top: calc(-#{$arrow-size} + 1px);
+      top: calc(-1 * #{$arrow-size} + 1px);
       left: calc(50% - #{$arrow-size});
     }
 
     &.nb-overlay-left .arrow {
-      right: round(-$arrow-size - $arrow-size / 2 + 2px);
+      right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
       top: calc(50% - #{$arrow-size / 2});
       transform: rotate(90deg);
     }
 
     &.nb-overlay-top .arrow {
-      bottom: calc(-#{$arrow-size} + 1px);
+      bottom: calc(-1 * #{$arrow-size} + 1px);
       left: calc(50% - #{$arrow-size});
       transform: rotate(180deg);
     }
 
     &.nb-overlay-right .arrow {
-      left: round(-$arrow-size - $arrow-size / 2 + 2px);
+      left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px);
       top: calc(50% - #{$arrow-size / 2});
       transform: rotate(270deg);
     }
diff --git a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss
index a320ab07d4..6666f10c5b 100644
--- a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss
+++ b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss
@@ -33,11 +33,6 @@
 
           &::before {
             background: nb-theme(route-tabs-selected);
-
-            @include nb-for-theme(cosmic) {
-              @include btn-hero-success-gradient();
-              box-shadow: 0 0 16px -2px btn-hero-success-middle-color();
-            }
           }
         }
 
diff --git a/src/framework/theme/components/tabset/_tabset.component.theme.scss b/src/framework/theme/components/tabset/_tabset.component.theme.scss
index fa6a9a6f1f..ce3e0a1644 100644
--- a/src/framework/theme/components/tabset/_tabset.component.theme.scss
+++ b/src/framework/theme/components/tabset/_tabset.component.theme.scss
@@ -33,14 +33,7 @@
           }
 
           &::before {
-            $color-right: nb-theme(tabs-selected);
-            $color-left: adjust-hue(
-                nb-theme(tabs-selected-second-color),
-                nb-theme(tabs-selected-degrees));
-
             background: nb-theme(tabs-selected);
-
-            @include nb-right-gradient($color-left, $color-right);
           }
         }
 
diff --git a/src/framework/theme/components/toastr/_toast.component.theme.scss b/src/framework/theme/components/toastr/_toast.component.theme.scss
index 9386c29b81..6de3a91837 100644
--- a/src/framework/theme/components/toastr/_toast.component.theme.scss
+++ b/src/framework/theme/components/toastr/_toast.component.theme.scss
@@ -46,7 +46,7 @@
       }
 
       @include nb-for-theme(cosmic) {
-        @include btn-hero-success-gradient();
+        background-color: nb-theme(color-success);
         color: nb-theme(toastr-color-fg);
 
         i {
@@ -68,7 +68,7 @@
       }
 
       @include nb-for-theme(cosmic) {
-        @include btn-hero-info-gradient();
+        background-color: nb-theme(color-info);
         color: nb-theme(toastr-color-fg);
 
         i {
@@ -90,7 +90,7 @@
       }
 
       @include nb-for-theme(cosmic) {
-        @include btn-hero-warning-gradient();
+        background-color: nb-theme(color-warning);
         color: nb-theme(toastr-color-fg);
 
         i {
@@ -112,7 +112,7 @@
       }
 
       @include nb-for-theme(cosmic) {
-        @include btn-hero-primary-gradient();
+        background-color: nb-theme(color-primary);
         color: nb-theme(toastr-color-fg);
 
         i {
@@ -134,7 +134,7 @@
       }
 
       @include nb-for-theme(cosmic) {
-        @include btn-hero-danger-gradient();
+        background-color: nb-theme(color-danger);
         color: nb-theme(toastr-color-fg);
 
         i {
diff --git a/src/framework/theme/styles/_theming.scss b/src/framework/theme/styles/_theming.scss
index 4c6c837384..d14b7e23d3 100644
--- a/src/framework/theme/styles/_theming.scss
+++ b/src/framework/theme/styles/_theming.scss
@@ -54,6 +54,35 @@ $nb-themes-export: () !global;
   @return $theme;
 }
 
+@function create-colors-palette($theme) {
+  $color-keys: (
+    color-primary: 20deg,
+    color-success:  20deg,
+    color-info: -10deg,
+    color-warning: 10deg,
+    color-danger: -20deg,
+  );
+
+  @each $key, $degree in $color-keys {
+    $color: map-get($theme, $key);
+
+    $color-300: tint($color, 14%);
+    $color-400: adjust-hue($color, $degree);
+    $color-200: tint($color-400, 14%);
+    $color-600: mix($color-400, $color);
+    $color-700: shade($color, 14%);
+    $color-800: shade($color-600, 14%);
+
+    $theme: map-set($theme, #{$key}-300, $color-300);
+    $theme: map-set($theme, #{$key}-200, $color-200);
+    $theme: map-set($theme, #{$key}-400, $color-400);
+    $theme: map-set($theme, #{$key}-600, $color-600);
+    $theme: map-set($theme, #{$key}-700, $color-700);
+    $theme: map-set($theme, #{$key}-600, $color-800);
+  }
+  @return $theme;
+}
+
 @function nb-register-theme($theme, $name, $default: null) {
 
   $theme-data: ();
diff --git a/src/framework/theme/styles/core/_mixins.scss b/src/framework/theme/styles/core/_mixins.scss
index 5bc246d5bb..01389ad216 100644
--- a/src/framework/theme/styles/core/_mixins.scss
+++ b/src/framework/theme/styles/core/_mixins.scss
@@ -100,7 +100,7 @@
   }
 }
 
-@mixin install-placeholder($color, $font-size) {
+@mixin install-placeholder($color, $font-size, $opacity: 1) {
   $placeholder-selectors: (
     '::-webkit-input-placeholder'
     '::-moz-placeholder'
@@ -109,12 +109,12 @@
   );
 
   &::placeholder {
-    @include placeholder($color, $font-size);
+    @include placeholder($color, $font-size, $opacity);
   }
 
   @each $selector in $placeholder-selectors {
     &#{$selector} {
-      @include placeholder($color, $font-size);
+      @include placeholder($color, $font-size, $opacity);
     }
 
     &:focus#{$selector} {
@@ -123,10 +123,10 @@
   }
 }
 
-@mixin placeholder($color, $font-size) {
+@mixin placeholder($color, $font-size, $opacity) {
   color: $color;
   font-size: $font-size;
-  opacity: 1;
+  opacity: $opacity;
   transition: opacity 0.3s ease;
   text-overflow: ellipsis;
 }
diff --git a/src/framework/theme/styles/global/typography/_typography.scss b/src/framework/theme/styles/global/typography/_typography.scss
index e6ae6d2ec2..3ae7fb6798 100644
--- a/src/framework/theme/styles/global/typography/_typography.scss
+++ b/src/framework/theme/styles/global/typography/_typography.scss
@@ -5,46 +5,6 @@
   }
 }
 
-@function main-to-text-color($color, $count: 15%) {
-  @return tint($color, $count);
-}
-
-@function text-heading() {
-  @return nb-theme(color-fg-heading);
-}
-
-@function text-body() {
-  @return nb-theme(color-fg-text);
-}
-
-@function text-hint() {
-  @return nb-theme(color-fg);
-}
-
-@function text-primary() {
-  @return main-to-text-color(nb-theme(color-primary));
-}
-
-@function text-warning() {
-  @return main-to-text-color(nb-theme(color-warning));
-}
-
-@function text-success() {
-  @return main-to-text-color(nb-theme(color-success));
-}
-
-@function text-info() {
-  @return main-to-text-color(nb-theme(color-info));
-}
-
-@function text-danger() {
-  @return main-to-text-color(nb-theme(color-danger));
-}
-
-@function text-white() {
-  @return nb-theme(color-white);
-}
-
 @mixin nb-alert-variant($body-color) {
   background-color: nb-theme(layout-bg);
   border: none;
@@ -54,9 +14,6 @@
     color: $body-color!important;
   }
 
-  hr {
-    border-top-color: darken($body-color, 10%);
-  }
   .alert-link {
     color: $body-color;
     text-decoration: none;
@@ -100,59 +57,59 @@
   }
 
   .text-primary {
-    color: text-primary() !important;
+    color: nb-theme(color-primary) !important;
   }
   .text-warning {
-    color: text-warning() !important;
+    color: nb-theme(color-warning) !important;
   }
   .text-success {
-    color: text-success() !important;
+    color: nb-theme(color-success) !important;
   }
   .text-info {
-    color: text-info() !important;
+    color: nb-theme(color-info) !important;
   }
   .text-danger {
-    color: text-danger() !important;
+    color: nb-theme(color-danger) !important;
   }
   .text-heading {
-    color: text-heading() !important;
+    color: nb-theme(color-fg-heading) !important;
   }
   .text-body {
-    color: text-body() !important;
+    color: nb-theme(color-fg-text) !important;
   }
   .text-hint {
-    color: text-hint() !important;
+    color: nb-theme(color-fg) !important;
   }
   .text-white {
-    color: text-white() !important;
+    color: nb-theme(color-white) !important;
   }
 
   .bg-primary {
-    background-color: text-primary() !important;
+    background-color: nb-theme(color-primary) !important;
   }
   .bg-warning {
-    background-color: text-warning() !important;
+    background-color: nb-theme(color-warning) !important;
   }
   .bg-success {
-    background-color: text-success() !important;
+    background-color: nb-theme(color-success) !important;
   }
   .bg-info {
-    background-color: text-info() !important;
+    background-color: nb-theme(color-info) !important;
   }
   .bg-danger {
-    background-color: text-danger() !important;
+    background-color: nb-theme(color-danger) !important;
   }
   .bg-heading {
-    background-color: text-heading() !important;
+    background-color: nb-theme(color-fg-heading) !important;
   }
   .bg-body {
-    background-color: text-body() !important;
+    background-color: nb-theme(color-fg-text) !important;
   }
   .bg-hint {
-    background-color: text-hint() !important;
+    background-color: nb-theme(color-fg) !important;
   }
   .bg-white {
-    background-color: text-white() !important;
+    background-color: nb-theme(color-white) !important;
   }
   .text-indent {
     text-indent: 2rem;
@@ -184,8 +141,8 @@
 
   mark, .mark {
     padding: 0.05em;
-    background-color: text-primary();
-    color: text-white();
+    background-color: nb-theme(color-primary);
+    color: nb-theme(color-white);
   }
 
   h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
@@ -216,22 +173,22 @@
   }
 
   .alert-success {
-    @include nb-alert-variant(text-success());
+    @include nb-alert-variant(nb-theme(color-success));
   }
   .alert-info {
-    @include nb-alert-variant(text-info());
+    @include nb-alert-variant(nb-theme(color-info));
   }
   .alert-warning {
-    @include nb-alert-variant(text-warning());
+    @include nb-alert-variant(nb-theme(color-warning));
   }
   .alert-danger {
-    @include nb-alert-variant(text-danger());
+    @include nb-alert-variant(nb-theme(color-danger));
   }
   .alert-primary {
-    @include nb-alert-variant(text-primary());
+    @include nb-alert-variant(nb-theme(color-primary));
   }
   .alert-hint {
-    @include nb-alert-variant(text-hint());
+    @include nb-alert-variant(nb-theme(color-fg));
   }
 
 }
diff --git a/src/framework/theme/styles/themes/_corporate.scss b/src/framework/theme/styles/themes/_corporate.scss
index abdb01b144..a417174d2b 100644
--- a/src/framework/theme/styles/themes/_corporate.scss
+++ b/src/framework/theme/styles/themes/_corporate.scss
@@ -31,6 +31,32 @@ $theme: (
   color-warning: #ffa36b,
   color-danger: #ff6b83,
 
+  color-primary-200: #8787ff,
+  color-primary-300: #87aeff,
+  color-primary-400: #7473ff,
+  color-primary-600: #6377db,
+  color-primary-700: #638adb,
+  color-success-200: #74afe7,
+  color-success-300: #74d6e7,
+  color-success-400: #5da2e3,
+  color-success-600: #509fc3,
+  color-success-700: #50b2c3,
+  color-info-200: #b491ef,
+  color-info-300: #c491ef,
+  color-info-400: #a87fec,
+  color-info-600: #986dcb,
+  color-info-700: #a06dcb,
+  color-warning-200: #ffc580,
+  color-warning-300: #ffb080,
+  color-warning-400: #ffbc6b,
+  color-warning-600: #db975c,
+  color-warning-700: #db8c5c,
+  color-danger-200: #ff80bf,
+  color-danger-300: #ff8094,
+  color-danger-400: #ff6bb4,
+  color-danger-600: #db5c86,
+  color-danger-700: #db5c71,
+
   btn-secondary-bg: #edf2f5,
   btn-secondary-border: #edf2f5,
 
diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss
index 8c8a664039..bcc190f6f4 100644
--- a/src/framework/theme/styles/themes/_cosmic.scss
+++ b/src/framework/theme/styles/themes/_cosmic.scss
@@ -30,6 +30,32 @@ $theme: (
   color-warning: #ffa100,
   color-danger: #ff386a,
 
+  color-primary-200: #b970ff,
+  color-primary-300: #8970ff,
+  color-primary-400: #ad59ff,
+  color-primary-600: #7e4ddb,
+  color-primary-700: #654ddb,
+  color-success-200: #24dec8,
+  color-success-300: #24de8a,
+  color-success-400: #00d9bf,
+  color-success-600: #00bb85,
+  color-success-700: #00bb66,
+  color-info-200: #24bdff,
+  color-info-300: #2499ff,
+  color-info-400: #00b3ff,
+  color-info-600: #0087db,
+  color-info-700: #0075db,
+  color-warning-200: #ffd324,
+  color-warning-300: #ffae24,
+  color-warning-400: #ffcc00,
+  color-warning-600: #db9d00,
+  color-warning-700: #db8a00,
+  color-danger-200: #ff54b8,
+  color-danger-300: #ff547f,
+  color-danger-400: #ff38ac,
+  color-danger-600: #db3078,
+  color-danger-700: #db305b,
+
   link-color: #00f9a6,
   link-color-hover: #14ffbe,
 
@@ -163,7 +189,6 @@ $theme: (
 
   toastr-color-fg: color-white,
   toastr-padding: 1.25rem,
-  toastr-border: 0,
   toastr-default-background: #bcc3cc,
 
   tooltip-fg: color-bg,
diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
index 2fe6c8636c..0b83928abd 100644
--- a/src/framework/theme/styles/themes/_default.scss
+++ b/src/framework/theme/styles/themes/_default.scss
@@ -52,6 +52,32 @@ $theme: (
   color-warning: #ffa100,
   color-danger: #ff4c6a,
 
+  color-primary-200: #bf91ff,
+  color-primary-300: #9a91ff,
+  color-primary-400: #b57fff,
+  color-primary-600: #896ddb,
+  color-primary-700: #776ddb,
+  color-success-200: #5be1bd,
+  color-success-300: #5be190,
+  color-success-400: #40dcb2,
+  color-success-600: #37bd83,
+  color-success-700: #37bd6c,
+  color-info-200: #65ccff,
+  color-info-300: #65b2ff,
+  color-info-400: #4cc4ff,
+  color-info-600: #419cdb,
+  color-info-700: #418fdb,
+  color-warning-200: #ffd324,
+  color-warning-300: #ffae24,
+  color-warning-400: #ffcc00,
+  color-warning-600: #db9d00,
+  color-warning-700: #db8a00,
+  color-danger-200: #ff65b2,
+  color-danger-300: #ff657f,
+  color-danger-400: #ff4ca6,
+  color-danger-600: #db4175,
+  color-danger-700: #db415b,
+
   // TODO: move to constants
   social-color-facebook: #3b5998,
   social-color-twitter: #55acee,
@@ -320,11 +346,23 @@ $theme: (
   btn-cursor: default,
 
   btn-primary-bg: color-primary,
+  btn-primary-hover-bg: color-primary-300,
+  btn-primary-active-bg: color-primary-600,
   btn-secondary-bg: transparent,
+  btn-secondary-hover-bg: #dadfe6,
+  btn-secondary-active-bg: #dadfe6,
   btn-info-bg: color-info,
+  btn-info-hover-bg: color-info-300,
+  btn-info-active-bg: color-info-600,
   btn-success-bg: color-success,
+  btn-success-hover-bg: color-success-300,
+  btn-success-active-bg: color-success-600,
   btn-warning-bg: color-warning,
+  btn-warning-hover-bg: color-warning-300,
+  btn-warning-active-bg: color-warning-600,
   btn-danger-bg: color-danger,
+  btn-danger-hover-bg: color-danger-300,
+  btn-danger-active-bg: color-danger-600,
 
   btn-secondary-border: #dadfe6,
   btn-secondary-border-width: 2px,
@@ -351,23 +389,58 @@ $theme: (
   btn-semi-round-border-radius: 0.75rem,
   btn-round-border-radius: 1.5rem,
 
-  btn-hero-shadow: none,
+  btn-hero-shadow: 0 0 transparent,
   btn-hero-text-shadow: none,
   btn-hero-bevel-size: 0 0 0 0,
   btn-hero-glow-size: 0 0 0 0,
-  btn-hero-primary-glow-size: btn-hero-glow-size,
-  btn-hero-success-glow-size: btn-hero-glow-size,
-  btn-hero-warning-glow-size: btn-hero-glow-size,
-  btn-hero-info-glow-size: btn-hero-glow-size,
-  btn-hero-danger-glow-size: btn-hero-glow-size,
-  btn-hero-secondary-glow-size: btn-hero-glow-size,
-  btn-hero-degree: 20deg,
-  btn-hero-primary-degree: btn-hero-degree,
-  btn-hero-success-degree: btn-hero-degree,
-  btn-hero-warning-degree: 10deg,
-  btn-hero-info-degree: -10deg,
-  btn-hero-danger-degree: -20deg,
-  btn-hero-secondary-degree: btn-hero-degree,
+
+  btn-hero-primary-bevel-color: color-primary-600,
+  btn-hero-success-bevel-color: color-success-600,
+  btn-hero-warning-bevel-color: color-warning-600,
+  btn-hero-info-bevel-color: color-info-600,
+  btn-hero-danger-bevel-color: color-danger-600,
+  btn-hero-secondary-bevel-color: color-secondary-600,
+
+  btn-hero-primary-glow-color: color-primary-700,
+  btn-hero-success-glow-color: color-success-700,
+  btn-hero-warning-glow-color: color-warning-700,
+  btn-hero-info-glow-color: color-info-700,
+  btn-hero-danger-glow-color: color-danger-700,
+  btn-hero-secondary-glow-color: color-secondary-700,
+
+  btn-hero-primary-left-bg: color-primary-400,
+  btn-hero-primary-right-bg: color-primary,
+  btn-hero-info-left-bg: color-info-400,
+  btn-hero-info-right-bg: color-info,
+  btn-hero-success-left-bg: color-success-400,
+  btn-hero-success-right-bg: color-success,
+  btn-hero-warning-left-bg: color-warning-400,
+  btn-hero-warning-right-bg: color-warning,
+  btn-hero-danger-left-bg: color-danger-400,
+  btn-hero-danger-right-bg: color-danger,
+
+  btn-hero-primary-left-hover-bg: color-primary-200,
+  btn-hero-primary-right-hover-bg: color-primary-300,
+  btn-hero-info-left-hover-bg: color-info-200,
+  btn-hero-info-right-hover-bg: color-info-300,
+  btn-hero-success-left-hover-bg: color-success-200,
+  btn-hero-success-right-hover-bg: color-success-300,
+  btn-hero-warning-left-hover-bg: color-warning-200,
+  btn-hero-warning-right-hover-bg: color-warning-300,
+  btn-hero-danger-left-hover-bg: color-danger-200,
+  btn-hero-danger-right-hover-bg: color-danger-300,
+
+  btn-hero-primary-left-active-bg: color-primary-400,
+  btn-hero-primary-right-active-bg: color-primary-600,
+  btn-hero-info-left-active-bg: color-info-400,
+  btn-hero-info-right-active-bg: color-info-600,
+  btn-hero-success-left-active-bg: color-success-400,
+  btn-hero-success-right-active-bg: color-success-600,
+  btn-hero-warning-left-active-bg: color-warning-400,
+  btn-hero-warning-right-active-bg: color-warning-600,
+  btn-hero-danger-left-active-bg: color-danger-400,
+  btn-hero-danger-right-active-bg: color-danger-600,
+
   btn-hero-border-radius: radius,
 
   btn-outline-fg: color-fg-heading,
diff --git a/src/playground/with-layout/infinite-list/news-post-placeholder.component.scss b/src/playground/with-layout/infinite-list/news-post-placeholder.component.scss
index 525ea39e7f..2e9553643a 100644
--- a/src/playground/with-layout/infinite-list/news-post-placeholder.component.scss
+++ b/src/playground/with-layout/infinite-list/news-post-placeholder.component.scss
@@ -20,6 +20,7 @@
 
 @include nb-install-component() {
   [class$='placeholder'] {
-    background: rgba(nb-theme(layout-bg), 0.6);
+    background: nb-theme(layout-bg);
+    opacity: 0.6;
   }
 }
diff --git a/src/playground/with-layout/typography/typography-routing.module.ts b/src/playground/with-layout/typography/typography-routing.module.ts
new file mode 100644
index 0000000000..ce19a3ece9
--- /dev/null
+++ b/src/playground/with-layout/typography/typography-routing.module.ts
@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Route} from '@angular/router';
+import { TypographyShowcaseComponent } from './typography-showcase.component';
+
+const routes: Route[] = [
+  {
+    path: 'typography-showcase.component',
+    component: TypographyShowcaseComponent,
+  },
+];
+
+@NgModule({
+  imports: [ RouterModule.forChild(routes) ],
+  exports: [ RouterModule ],
+})
+export class TypographyRoutingModule {}
diff --git a/src/playground/with-layout/typography/typography-showcase.component.html b/src/playground/with-layout/typography/typography-showcase.component.html
new file mode 100644
index 0000000000..7a1ae47b27
--- /dev/null
+++ b/src/playground/with-layout/typography/typography-showcase.component.html
@@ -0,0 +1,65 @@
+<nb-card size="xxlarge">
+  <nb-card-header>
+    Font Colors
+  </nb-card-header>
+  <nb-card-body>
+    <div class="colors">
+      <div class="item text-heading">
+        <div class="color bg-heading"></div>
+        <div>
+          <h5 class="text-heading">Heading Text</h5>
+          Far far away, behind the your awesomeness.
+        </div>
+      </div>
+      <div class="item text-body">
+        <div class="color bg-body"></div>
+        <div>
+          <h5 class="text-body">Body Text</h5>
+          Far far away, behind the your awesomeness.
+        </div>
+      </div>
+      <div class="item text-hint">
+        <div class="color bg-hint"></div>
+        <div>
+          <h5 class="text-hint">Hint Text</h5>
+          Far far away, behind the your awesomeness.
+        </div>
+      </div>
+      <div class="item text-primary">
+        <div class="color bg-primary"></div>
+        <div>
+          <h5 class="text-primary">Primary Text</h5>
+          Far far away, behind the your awesomeness.
+        </div>
+      </div>
+      <div class="item text-success">
+        <div class="color bg-success"></div>
+        <div>
+          <h5 class="text-success">Success Text</h5>
+          Far far away, behind the your awesomeness.
+        </div>
+      </div>
+      <div class="item text-info">
+        <div class="color bg-info"></div>
+        <div>
+          <h5 class="text-info">Info Text</h5>
+          Far far away, behind the your awesomeness.
+        </div>
+      </div>
+      <div class="item text-warning">
+        <div class="color bg-warning"></div>
+        <div>
+          <h5 class="text-warning">Warning Text</h5>
+          Far far away, behind the your awesomeness.
+        </div>
+      </div>
+      <div class="item text-danger">
+        <div class="color bg-danger"></div>
+        <div>
+          <h5 class="text-danger">Danger Text</h5>
+          Far far away, behind the your awesomeness.
+        </div>
+      </div>
+    </div>
+  </nb-card-body>
+</nb-card>
diff --git a/src/playground/with-layout/typography/typography-showcase.component.scss b/src/playground/with-layout/typography/typography-showcase.component.scss
new file mode 100644
index 0000000000..7d90943e8b
--- /dev/null
+++ b/src/playground/with-layout/typography/typography-showcase.component.scss
@@ -0,0 +1,25 @@
+.colors {
+  display: flex;
+  flex-direction: column;
+
+  .item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1.25rem;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .color {
+    width: 86px;
+    height: 60px;
+    border-top-right-radius: 1rem;
+    border-bottom-left-radius: 1rem;
+    margin-right: 1rem;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin-bottom: 0.25rem;
+  }
+}
diff --git a/src/playground/with-layout/typography/typography-showcase.component.ts b/src/playground/with-layout/typography/typography-showcase.component.ts
new file mode 100644
index 0000000000..4e3cfb916f
--- /dev/null
+++ b/src/playground/with-layout/typography/typography-showcase.component.ts
@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-typography-showcase',
+  styleUrls: ['./typography-showcase.component.scss'],
+  templateUrl: './typography-showcase.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TypographyShowcaseComponent {
+}
diff --git a/src/playground/with-layout/typography/typography.module.ts b/src/playground/with-layout/typography/typography.module.ts
new file mode 100644
index 0000000000..80ae9dba46
--- /dev/null
+++ b/src/playground/with-layout/typography/typography.module.ts
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+import { TypographyRoutingModule } from './typography-routing.module';
+import { TypographyShowcaseComponent } from './typography-showcase.component';
+import { NbCardModule } from '@nebular/theme';
+
+@NgModule({
+  declarations: [
+    TypographyShowcaseComponent,
+  ],
+  imports: [
+    NbCardModule,
+    TypographyRoutingModule,
+  ],
+})
+export class TypographyModule {}
diff --git a/src/playground/with-layout/with-layout-routing.module.ts b/src/playground/with-layout/with-layout-routing.module.ts
index 71edc66665..e5ececd830 100644
--- a/src/playground/with-layout/with-layout-routing.module.ts
+++ b/src/playground/with-layout/with-layout-routing.module.ts
@@ -153,6 +153,10 @@ const routes: Route[] = [
         path: 'tree-grid',
         loadChildren: './tree-grid/tree-grid.module#TreeGridModule',
       },
+      {
+        path: 'typography',
+        loadChildren: './typography/typography.module#TypographyModule',
+      },
     ],
   },
 ];