diff --git a/package.json b/package.json
index 38c7556d..832137ea 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 3146b2c7..db55f392 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -14,6 +14,14 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
   --s-color-button-tertiary-background-focused: #{$s-color-button-tertiary-background-focused};
 }
 
+@mixin disabled {
+  &:disabled, &:disabled:hover {
+    color: var(--s-color-base-on-disabled);
+    background-color: var(--s-color-base-disabled);
+    border-color: var(--s-color-base-disabled);
+  }
+}
+
 .s-loading {
   padding: 12px 17.5px;
   i {
@@ -46,11 +54,7 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
     background-color: var(--s-color-theme-accent-focused);
     border-color: var(--s-color-theme-accent-focused);
   }
-  &:disabled, &:disabled:hover {
-    color: var(--s-color-base-content-quaternary);
-    background-color: var(--s-color-base-disabled);
-    border-color: var(--s-color-base-disabled);
-  }
+  @include disabled;
 }
 .s-secondary {
   background-color: var(--s-color-base-on-accent);
@@ -61,22 +65,14 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
     background-color: var(--s-color-base-on-accent);
     border-color: var(--s-color-theme-accent);
   }
-  &:disabled, &:disabled:hover {
-    color: var(--s-color-base-content-quaternary);
-    background-color: var(--s-color-base-disabled);
-    border-color: var(--s-color-base-disabled);
-  }
+  @include disabled;
   &.s-alternative {
     &:hover, &:active, &:focus {
       color: var(--s-color-base-content-primary);
       background-color: var(--s-color-base-background);
       border-color: var(--s-color-base-background);
     }
-    &:disabled, &:disabled:hover {
-      color: var(--s-color-base-content-quaternary);
-      background-color: var(--s-color-base-disabled);
-      border-color: var(--s-color-base-disabled);
-    }
+    @include disabled;
   }
 }
 .s-link {
@@ -88,7 +84,7 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
     background-color: transparent;
   }
   &:disabled, &:disabled:hover {
-    color: var(--s-color-base-content-quaternary);
+    color: var(--s-color-base-on-disabled);
   }
 }
 .s-tertiary {
@@ -110,32 +106,28 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
     background-color: var(--s-color-button-tertiary-background-focused);
     border-color: var(--s-color-button-tertiary-background-focused);
   }
-  &:disabled, &:disabled:hover {
-    color: var(--s-color-base-content-quaternary);
-    background-color: var(--s-color-base-disabled);
-    border-color: var(--s-color-base-disabled);
-  }
+  @include disabled;
 }
 .s-action {
   &.s-big {
     width: $s-size-big;
     padding: 12px;
     i {
-      font-size: 20px;
+      font-size: var(--s-icon-font-size-medium);
     }
   }
   &.s-medium {
     width: $s-size-medium;
     padding: 10px;
     i {
-      font-size: 18px;
+      font-size: var(--s-icon-font-size-small);
     }
   }
   &.s-small {
     width: $s-size-small;
     padding: 9px;
     i {
-      font-size: 16px;
+      font-size: var(--s-icon-font-size-mini);
       margin-left: -2px;
       margin-top: -2px;
     }
@@ -148,11 +140,7 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
     background-color: var(--s-color-base-background-hover);
     border-color: var(--s-color-base-background-hover);
   }
-  &:disabled, &:disabled:hover {
-    color: var(--s-color-base-content-quaternary);
-    background-color: var(--s-color-base-disabled);
-    border-color: var(--s-color-base-disabled);
-  }
+  @include disabled;
   &.s-alternative {
     background-color: var(--s-color-base-on-accent);
     border-color: var(--s-color-base-border-primary);
@@ -161,11 +149,7 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
       background-color: var(--s-color-base-background);
       border-color: var(--s-color-base-background);
     }
-    &:disabled, &:disabled:hover {
-      color: var(--s-color-base-content-quaternary);
-      background-color: var(--s-color-base-disabled);
-      border-color: var(--s-color-base-disabled);
-    }
+    @include disabled;
   }
 }
 button {
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
index 98d4d158..f732c9d8 100644
--- a/src/styles/checkbox.scss
+++ b/src/styles/checkbox.scss
@@ -61,7 +61,7 @@
   &.s-small {
     @extend .s-small;
     .el-checkbox__label {
-      font-size: 12px;
+      font-size: var(--s-font-size-mini);
     }
     &,
     &.is-bordered {
diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss
index 3a907164..4bdc620f 100644
--- a/src/styles/collapse.scss
+++ b/src/styles/collapse.scss
@@ -24,7 +24,7 @@
     .el-icon-arrow-right {
       font-family: $s-font-family-icons;
       @extend .s-icon-chevron-bottom;
-      font-size: 16px;
+      font-size: var(--s-icon-font-size-mini);
       padding: 8px;
       width: 32px;
       height: 32px;
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 57b5206c..10d205ef 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -13,40 +13,40 @@ html {
 }
 
 /* Typography */
-h1 {
+h1, h2, h3, h4, h5, h6 {
   font-family: $s-font-family-default;
+}
+
+h1, h2, h3, h4 {
   font-weight: normal;
-  font-size: 36px;
+}
+
+h5, h6 {
+  font-weight: bold;
+}
+
+h1 {
+  font-size: var(--s-heading1-font-size);
 }
 
 h2 {
-  font-family: $s-font-family-default;
-  font-weight: normal;
-  font-size: 30px;
+  font-size: var(--s-heading2-font-size);
 }
 
 h3 {
-  font-family: $s-font-family-default;
-  font-weight: normal;
-  font-size: 24px;
+  font-size: var(--s-heading3-font-size);
 }
 
 h4 {
-  font-family: $s-font-family-default;
-  font-weight: normal;
-  font-size: 18px;
+  font-size: var(--s-heading4-font-size);
 }
 
 h5 {
-  font-family: $s-font-family-default;
-  font-weight: bold;
-  font-size: 16px;
+  font-size: var(--s-heading5-font-size);
 }
 
 h6 {
-  font-family: $s-font-family-default;
-  font-weight: bold;
-  font-size: 14px;
+  font-size: var(--s-heading6-font-size);
 }
 
 .s-flex {
@@ -58,15 +58,19 @@ h6 {
 }
 
 .s-big {
-  height: $s-size-big;
+  height: var(--s-size-big);
 }
 
 .s-medium {
-  height: $s-size-medium;
+  height: var(--s-size-medium);
 }
 
 .s-small {
-  height: $s-size-small;
+  height: var(--s-size-small);
+}
+
+.s-mini {
+  height: var(--s-size-mini);
 }
 
 .s-border-radius-big {
@@ -122,13 +126,13 @@ button > span {
   .el-message-box__header {
     .el-message-box__title {
       color: var(--s-color-base-content-primary);
-      font-size: 16px;
+      font-size: var(--s-heading5-font-size);
     }
   }
   .el-message-box__btns {
     button.el-button.el-button--default.el-button--small {
       height: $s-size-medium;
-      font-size: 14px;
+      font-size: var(--s-font-size-small);
       border-radius: var(--s-border-radius-mini);
       &:hover, &:active, &:focus {
         color: var(--s-color-theme-accent);
diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
index 2696e508..ccaca164 100644
--- a/src/styles/datepicker.scss
+++ b/src/styles/datepicker.scss
@@ -100,7 +100,7 @@
     // TODO: add default animation from material-ui
     color: var(--s-color-base-content-tertiary);
     text-align: left;
-    font-size: 12px;
+    font-size: var(--s-font-size-mini);
     padding: 0 15px;
     padding-top: 5px;
     top: 1px;
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
index 2701d1ae..a2e1b13e 100644
--- a/src/styles/dialog.scss
+++ b/src/styles/dialog.scss
@@ -23,7 +23,7 @@
   }
   .el-dialog__title {
     font-weight: bold;
-    font-size: 16px;
+    font-size: var(--s-heading5-font-size);
     color: var(--s-color-base-content-primary);
   }
   > * {
diff --git a/src/styles/dropdown.scss b/src/styles/dropdown.scss
index 39db4325..ab14ba00 100644
--- a/src/styles/dropdown.scss
+++ b/src/styles/dropdown.scss
@@ -49,7 +49,7 @@
     cursor: pointer;
   }
   .s-icon-more-horizontal {
-    font-size: 24px;
+    font-size: var(--s-icon-font-size-big);
   }
 }
 .el-dropdown-menu__item {
diff --git a/src/styles/form.scss b/src/styles/form.scss
index 473f6c56..25014119 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -61,7 +61,7 @@
       position: absolute;
       bottom: 6px;
       left: 4px;
-      font-size: 16px;
+      font-size: var(--s-icon-font-size-mini);
       color: var(--s-color-status-error);
     }
     .el-input__inner,
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 5c111828..cdef94b3 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -35,7 +35,7 @@
     // TODO: add default animation from material-ui
     color: var(--s-color-base-content-tertiary);
     text-align: left;
-    font-size: 12px;
+    font-size: var(--s-font-size-mini);
     padding: 0 15px;
     padding-top: 5px;
     top: 1px;
@@ -150,7 +150,7 @@
     .s-icon-file-upload {
       top: 16px;
       right: 16px;
-      font-size: 24px;
+      font-size: var(--s-icon-font-size-big);
       z-index: 1;
       position: absolute;
       + input {
diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss
index 073a9977..1adf4ad2 100644
--- a/src/styles/json-input.scss
+++ b/src/styles/json-input.scss
@@ -105,7 +105,7 @@ $color-ide-boolean: #0000FF;
     color: var(--s-color-base-on-accent);
     border-radius: var(--s-border-radius-mini);
     padding: 10px;
-    font-size: 12px;
+    font-size: var(--s-font-size-mini);
     line-height: 1.2;
   }
 }
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 51bbb91a..5a790d35 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -41,7 +41,7 @@ $margin-bottom-menu-item: 8px;
   }
   [class^="s-icon-"] {
     margin-right: 12px;
-    font-size: 20px;
+    font-size: var(--s-icon-font-size-medium);
   }
   i {
     color: var(--s-menu-text-color);
@@ -67,7 +67,7 @@ $margin-bottom-menu-item: 8px;
   align-items: center;
   [class^="s-icon-"] {
     margin-right: 12px;
-    font-size: 20px;
+    font-size: var(--s-icon-font-size-medium);
   }
   i {
     color: var(--s-menu-text-color);
diff --git a/src/styles/pagination.scss b/src/styles/pagination.scss
index 6953d9d4..1a3a0abb 100644
--- a/src/styles/pagination.scss
+++ b/src/styles/pagination.scss
@@ -130,10 +130,10 @@
     .el-pagination__sizes .el-select .el-input {
       .el-input__inner {
         height: 22px !important;
-        font-size: 12px;
+        font-size: var(--s-font-size-mini);
       }
       .el-select__caret {
-        font-size: 12px;
+        font-size: var(--s-font-size-mini);
         line-height: 23px;
       }
     }
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 2135b5b7..f8e5837d 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -5,7 +5,7 @@ $radio-button-border-color: var(--s-color-theme-accent);
 @mixin radio-button-size(
   $modifier: "small",
   $size: $s-size-small,
-  $font-size: $s-font-size-small
+  $font-size: var(--s-font-size-mini)
 ) {
   $radio-button-vertical-padding: #{($size - $font-size) / 2 - $radio-button-border-width};
   #{$radio-button-class} {
@@ -59,7 +59,7 @@ $radio-button-border-color: var(--s-color-theme-accent);
       padding-top: 9px;
     }
     > .el-radio__label {
-      font-size: 12px;
+      font-size: var(--s-font-size-mini);
     }
     > .el-radio__input .el-radio__inner {
       width: 14px;
@@ -185,8 +185,8 @@ $radio-button-border-color: var(--s-color-theme-accent);
   }
   &-group {
     @include radio-button-size;
-    @include radio-button-size("medium", $s-size-medium, $s-font-size-big);
-    @include radio-button-size("big", $s-size-big, $s-font-size-big);
+    @include radio-button-size("medium", $s-size-medium, var(--s-font-size-small));
+    @include radio-button-size("big", $s-size-big, var(--s-font-size-small));
     #{$radio-button-class} {
       &__inner {
         background-color: var(--s-color-utility-surface);
diff --git a/src/styles/scroll-sections.scss b/src/styles/scroll-sections.scss
index cfa4a1a1..b2c88b27 100644
--- a/src/styles/scroll-sections.scss
+++ b/src/styles/scroll-sections.scss
@@ -1,6 +1,6 @@
 .s-scroll-sections {
   font-family: $s-font-family-default;
-  font-size: 14px;
+  font-size: var(--s-font-size-small)
 }
 .s-scroll-menu {
   font-weight: 600;
@@ -39,7 +39,7 @@
   padding-bottom: 90%;
   color: var(--s-color-base-content-primary);
   .title {
-    font-size: 16px;
+    font-size: var(--s-heading5-font-size);
   }
 }
 .s-scroll-section-item {
diff --git a/src/styles/select.scss b/src/styles/select.scss
index 0730a45b..cbf72ac3 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -27,7 +27,7 @@
     width: 100%;
     i.el-icon-arrow-up {
       font-family: $icons-font;
-      font-size: 16px;
+      font-size: var(--s-icon-font-size-mini);
       &:before {
         content: $s-icon-chevron-top;
       }
@@ -114,7 +114,7 @@
     // TODO: add default animation from material-ui
     color: var(--s-color-base-content-tertiary);
     text-align: left;
-    font-size: 12px;
+    font-size: var(--s-font-size-mini);
     padding: 0 15px;
     padding-top: 5px;
     top: 1px;
@@ -206,7 +206,7 @@
     color: var(--s-color-base-on-accent);
     border: 1px solid var(--s-color-base-border-primary);
     background-color: var(--s-color-utility-surface);
-    font-size: 16px;
+    font-size: var(--s-icon-font-size-mini);
     font-weight: bold;
     padding: 1px;
     border-radius: var(--s-border-radius-mini);
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f98e6898..c7177943 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -59,8 +59,20 @@ $s-font-family-default: 'Sora', sans-serif !important;
 $s-font-family-mono: 'JetBrainsMono', monospace !important;
 $s-font-family-icons: 'soramitsu-icons' !important;
 // Font sizes
-$s-font-size-big: 14px !default;
-$s-font-size-small: 12px !default;
+$s-font-size-mini: 12px !default;
+$s-font-size-small: 14px !default;
+// Icons font sizes
+$s-icon-font-size-mini: 16px !default;
+$s-icon-font-size-small: 18px !default;
+$s-icon-font-size-medium: 20px !default;
+$s-icon-font-size-big: 24px !default;
+// Font heading sizes
+$s-heading1-font-size: 36px !default;
+$s-heading2-font-size: 30px !default;
+$s-heading3-font-size: 24px !default;
+$s-heading4-font-size: 18px !default;
+$s-heading5-font-size: 16px !default;
+$s-heading6-font-size: 14px !default;
 
 // Responsive
 $--sm: 640px !default;
@@ -121,6 +133,21 @@ $--breakpoints-spec: (
   --s-color-status-success-background: #{$s-color-status-success-background};
   --s-color-status-warning-background: #{$s-color-status-warning-background};
   --s-color-status-error-background: #{$s-color-status-error-background};
+  // Font Sizes
+  --s-font-size-mini: #{$s-font-size-mini};
+  --s-font-size-small: #{$s-font-size-small};
+  // Icons font sizes
+  --s-icon-font-size-mini: #{$s-icon-font-size-mini};
+  --s-icon-font-size-small: #{$s-icon-font-size-small};
+  --s-icon-font-size-medium: #{$s-icon-font-size-medium};
+  --s-icon-font-size-big: #{$s-icon-font-size-big};
+  // Heading Font Sizes
+  --s-heading1-font-size: #{$s-heading1-font-size};
+  --s-heading2-font-size: #{$s-heading2-font-size};
+  --s-heading3-font-size: #{$s-heading3-font-size};
+  --s-heading4-font-size: #{$s-heading4-font-size};
+  --s-heading5-font-size: #{$s-heading5-font-size};
+  --s-heading6-font-size: #{$s-heading6-font-size};
   // Size
   --s-size-mini: #{$s-size-mini};
   --s-size-small: #{$s-size-small};