diff --git a/package.json b/package.json
index d1a1fec0..aa0b80b0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index 10b0a5e9..14cb1635 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -37,9 +37,9 @@ export default class SButton extends Vue {
   /**
    * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`, `"link"`.
    *
-   * By default it's set to `"primary"`
+   * By default it's set to `"secondary"`
    */
-  @Prop({ default: ButtonTypes.PRIMARY, type: String }) readonly type!: string
+  @Prop({ default: ButtonTypes.SECONDARY, type: String }) readonly type!: string
   /**
    * Rounded property for `type="action"` buttons.
    *
@@ -49,9 +49,9 @@ export default class SButton extends Vue {
   /**
    * Size of button. Possible values: `"big"`, `"medium"`, `"small"`.
    *
-   * By default it's set to `"big"`
+   * By default it's set to `"medium"`
    */
-  @Prop({ default: ButtonSize.BIG, type: String }) readonly size!: string
+  @Prop({ default: ButtonSize.MEDIUM, type: String }) readonly size!: string
   /**
    * Icon name from icon collection of this library
    */
diff --git a/src/components/Divider/SDivider.vue b/src/components/Divider/SDivider.vue
index c74cb2a8..4cac3d63 100644
--- a/src/components/Divider/SDivider.vue
+++ b/src/components/Divider/SDivider.vue
@@ -7,10 +7,16 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator'
 
-import { DividerDirection, ContentPosition } from './consts'
+import { DividerDirection, ContentPosition, DividerType } from './consts'
 
 @Component
 export default class SDivider extends Vue {
+  /**
+   * Divider type property. Can be `"primary"` or `"secondary"`.
+   *
+   * By default it's set to `"secondary"`
+   */
+  @Prop({ default: DividerType.SECONDARY, type: String }) readonly type!: string
   /**
    * Divider direction property. Can be `"horizontal"` or `"vertical"`.
    *
@@ -23,5 +29,13 @@ export default class SDivider extends Vue {
    * By default it's set to `"center"`
    */
   @Prop({ default: ContentPosition.CENTER, type: String }) readonly contentPosition!: string
+
+  mounted (): void {
+    this.$watch('type', (value) => {
+      const el = this.$el as Element
+      el.classList.remove('s-divider-primary', 's-divider-secondary')
+      el.classList.add(`s-divider-${this.type}`)
+    }, { immediate: true })
+  }
 }
 </script>
diff --git a/src/components/Divider/consts.ts b/src/components/Divider/consts.ts
index 10f7624d..d9987b08 100644
--- a/src/components/Divider/consts.ts
+++ b/src/components/Divider/consts.ts
@@ -6,4 +6,9 @@ export enum ContentPosition {
   CENTER = 'center'
 }
 
+export enum DividerType {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary'
+}
+
 export const DividerDirection = Direction
diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts
index 7426c29d..fdab10ef 100644
--- a/src/components/Divider/index.ts
+++ b/src/components/Divider/index.ts
@@ -1,3 +1,4 @@
 import SDivider from './SDivider.vue'
+import { ContentPosition, DividerType, DividerDirection } from './consts'
 
-export { SDivider }
+export { SDivider, ContentPosition, DividerDirection, DividerType }
diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts
index 728ad41c..43df1693 100644
--- a/src/stories/Intro/Customization.stories.ts
+++ b/src/stories/Intro/Customization.stories.ts
@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs'
 
-import { Colors } from '../../types'
+import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors } from '../../types'
 import { SRow, SButton, SInput, SCol, SDivider } from '../../components'
 import { differentTypeButtonsData } from '../SButton.stories'
 
@@ -10,10 +10,20 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const colorsData = Object.values(Colors).map(color => ({
-  label: color,
-  value: getComputedStyle(document.documentElement).getPropertyValue(color)
-}))
+const getColorsData = (colors) => Object.values(colors).map(color => {
+  const value = getComputedStyle(document.documentElement).getPropertyValue(`--s-color-${color}`)
+  const isRgb = value.includes('rgb')
+  return { label: color, value, isRgb }
+})
+export const colorsSectionsData = [
+  { title: 'Theme / Accent', colors: getColorsData(AccentColors) },
+  { title: 'Theme / Secondary', colors: getColorsData(SecondaryColors) },
+  { title: 'Base / Content', colors: getColorsData(ContentColors) },
+  { title: 'Base / Misc.', colors: getColorsData(MiscColors) },
+  { title: 'Utility', colors: getColorsData(UtilityColors) },
+  { title: 'Status', colors: getColorsData(StatusColors) },
+  { title: 'Button / Tertiary', colors: getColorsData(TertiaryButtonColors) }
+]
 export const themeInputsData = [
   'text',
   'textarea',
@@ -25,13 +35,22 @@ export const configurable = () => ({
              <s-row>
                <s-col
                  class="s-flex"
-                 style="align-items: center;"
-                 v-for="color in colors"
-                 :key="color.label"
-                 :span="4"
+                 style="flex-direction: column;"
+                 v-for="section in sections"
+                 :key="section.title"
+                 :lg="4" :md="4" :sm="6" :xs="12"
                >
-                 <span style="padding-right: 10px;">{{ color.label }}</span>
-                 <el-color-picker size="small" v-model="color.value" @change="(value) => handleColorChange(color.label, value)" />
+                 <span style="padding-right: 10px; font-weight: bold;">{{ section.title }}</span>
+                 <div v-for="color in section.colors" :key="color.label" class="s-flex" style="align-items: center;">
+                   <span style="padding-right: 10px;">{{ color.label }}</span>
+                   <el-color-picker
+                     style="flex: 1; text-align: right; padding-right: 20%;"
+                     :show-alpha="color.isRgb"
+                     size="small"
+                     v-model="color.value"
+                     @change="(value) => handleColorChange(color.label, value)"
+                   />
+                 </div>
                </s-col>
              </s-row>
              <s-divider />
@@ -59,7 +78,7 @@ export const configurable = () => ({
              <h4>You can also check another components, these colors are applied to the whole library</h4>
              </div>`,
   data: () => ({
-    colors: colorsData,
+    sections: colorsSectionsData,
     buttons: differentTypeButtonsData,
     inputs: themeInputsData
   }),
diff --git a/src/stories/SDivider.stories.ts b/src/stories/SDivider.stories.ts
index a18abf33..2fa74812 100644
--- a/src/stories/SDivider.stories.ts
+++ b/src/stories/SDivider.stories.ts
@@ -1,7 +1,7 @@
 import { withKnobs, select } from '@storybook/addon-knobs'
 
 import { SDivider, SRow } from '../components'
-import { DividerDirection, ContentPosition } from '../components/Divider/consts'
+import { ContentPosition, DividerDirection, DividerType } from '../components/Divider'
 
 export default {
   component: SDivider,
@@ -15,6 +15,7 @@ export const configurable = () => ({
                <span>First text paragraph</span>
                <s-divider
                  :style="direction === 'vertical' ? { height: '56px' } : {}"
+                 :type="type"
                  :direction="direction"
                  :content-position="contentPosition"
                >
@@ -23,6 +24,9 @@ export const configurable = () => ({
                <span>Second text paragraph</span>
              </s-row>`,
   props: {
+    type: {
+      default: select('Type', Object.values(DividerType), DividerType.SECONDARY)
+    },
     direction: {
       default: select('Direction', Object.values(DividerDirection), DividerDirection.HORIZONTAL)
     },
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 630668d6..adf7d741 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -1,5 +1,21 @@
 @import "./variables";
 
+$s-color-button-tertiary-color: var(--s-color-base-content-primary) !default;
+$s-color-button-tertiary-color-active: var(--s-color-theme-accent) !default;
+$s-color-button-tertiary-background: var(--s-color-base-background) !default;
+$s-color-button-tertiary-background-hover: var(--s-color-base-background) !default;
+$s-color-button-tertiary-background-pressed: var(--s-color-base-background) !default;
+$s-color-button-tertiary-background-focused: var(--s-color-base-background) !default;
+
+:root {
+  --s-color-button-tertiary-color: #{$s-color-button-tertiary-color};
+  --s-color-button-tertiary-color-active: #{$s-color-button-tertiary-color-active};
+  --s-color-button-tertiary-background: #{$s-color-button-tertiary-background};
+  --s-color-button-tertiary-background-hover: #{$s-color-button-tertiary-background-hover};
+  --s-color-button-tertiary-background-pressed: #{$s-color-button-tertiary-background-pressed};
+  --s-color-button-tertiary-background-focused: #{$s-color-button-tertiary-background-focused};
+}
+
 .s-loading {
   padding: 12px 17.5px;
   i {
@@ -78,13 +94,23 @@
   }
 }
 .s-tertiary {
-  color: var(--s-color-base-content-primary);
-  border-color: var(--s-color-base-background);
-  background-color: var(--s-color-base-background);
+  color: var(--s-color-button-tertiary-color);
+  border-color: var(--s-color-button-tertiary-background);
+  background-color: var(--s-color-button-tertiary-background);
   &:hover, &:active, &:focus {
-    color: var(--s-color-theme-accent);
-    background-color: var(--s-color-base-background);
-    border-color: var(--s-color-base-background);
+    color: var(--s-color-button-tertiary-color-active);
+  }
+  &:hover {
+    background-color: var(--s-color-button-tertiary-background-hover);
+    border-color: var(--s-color-button-tertiary-background-hover);
+  }
+  &:active {
+    background-color: var(--s-color-button-tertiary-background-pressed);
+    border-color: var(--s-color-button-tertiary-background-pressed);
+  }
+  &:focus {
+    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);
@@ -120,24 +146,28 @@
   background-color: var(--s-color-base-background);
   border-color: var(--s-color-base-background);
   border-radius: 8px;
-  &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+  &:hover, &:active, &:focus {
     color: var(--s-color-base-content-primary);
     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);
   }
   &.s-alternative {
     background-color: var(--s-color-base-on-accent);
     border-color: var(--s-color-base-border-primary);
-    &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+    &: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);
     }
   }
 }
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
index 450e99ad..bb9e8af2 100644
--- a/src/styles/checkbox.scss
+++ b/src/styles/checkbox.scss
@@ -4,7 +4,7 @@
 .el-checkbox {
   color: var(--s-color-base-content-primary);
   &.is-bordered {
-    &, &.is-disabled {
+    &, &.is-disabled, &.is-disabled.is-checked {
       border-color: var(--s-color-base-border-primary);
     }
     &.is-checked {
@@ -83,7 +83,7 @@
       border-color: var(--s-color-base-border-primary);
     }
     & + span.el-checkbox__label {
-      color: var(--s-color-base-content-quaternary);
+      color: var(--s-color-base-on-disabled);
     }
   }
   &.is-focus > .el-checkbox__inner {
@@ -98,7 +98,7 @@
       background-color: var(--s-color-base-disabled);
       border-color: var(--s-color-base-border-primary);
       &::after {
-        border-color: var(--s-color-base-content-quaternary);
+        border-color: var(--s-color-base-on-disabled);
       }
     }
     & + .el-checkbox__label {
diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss
index bf522caa..8a24398c 100644
--- a/src/styles/collapse.scss
+++ b/src/styles/collapse.scss
@@ -1,5 +1,4 @@
 @import "./variables";
-@import "./icons";
 
 .el-collapse {
   border-top-color: var(--s-color-base-border-secondary);
@@ -25,8 +24,8 @@
       border-bottom-color: transparent;
     }
     .el-icon-arrow-right {
-      font-family: 'soramitsu-icons' !important;
-      @extend .s-icon-chevron-top;
+      font-family: $s-font-family-icons;
+      @extend .s-icon-chevron-bottom;
       font-size: 16px;
       padding: 8px;
       width: 32px;
diff --git a/src/styles/common.scss b/src/styles/common.scss
index d76fc659..5909f007 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -2,7 +2,7 @@
 
 [class^="el-"]:not(i):not([class*='el-icon']),
 [class*="el-"]:not(i):not([class*='el-icon']) {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
 }
 
 html {
@@ -16,37 +16,37 @@ html {
 
 /* Typography */
 h1 {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   font-weight: normal;
   font-size: 36px;
 }
 
 h2 {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   font-weight: normal;
   font-size: 30px;
 }
 
 h3 {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   font-weight: normal;
   font-size: 24px;
 }
 
 h4 {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   font-weight: normal;
   font-size: 18px;
 }
 
 h5 {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   font-weight: bold;
   font-size: 16px;
 }
 
 h6 {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   font-weight: bold;
   font-size: 14px;
 }
diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
index e7f3c34f..76705c12 100644
--- a/src/styles/datepicker.scss
+++ b/src/styles/datepicker.scss
@@ -1,7 +1,7 @@
 @import "./variables";
 
 .s-date-picker {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   width: 100%;
   position: relative;
   .el-date-editor {
@@ -252,20 +252,20 @@
 .el-date-table.is-week-mode .el-date-table__row {
   &.current, &:hover {
     div {
-      background-color: var(--s-color-theme-secondary-hover);
+      background-color: var(--s-color-base-background-hover);
     }
   }
 }
 .el-month-table td.in-range div {
-  background-color: var(--s-color-theme-secondary-hover);
+  background-color: var(--s-color-base-background-hover);
   &:hover {
-    background-color: var(--s-color-theme-secondary-hover);
+    background-color: var(--s-color-base-background-hover);
   }
 }
 .el-date-table td.in-range div {
-  background-color: var(--s-color-theme-secondary-hover);
+  background-color: var(--s-color-base-background-hover);
   &:hover {
-    background-color: var(--s-color-theme-secondary-hover);
+    background-color: var(--s-color-base-background-hover);
   }
 }
 .el-date-range-picker__content.is-left {
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
index c992a033..d469b2ed 100644
--- a/src/styles/dialog.scss
+++ b/src/styles/dialog.scss
@@ -14,3 +14,7 @@
     color: var(--s-color-base-content-primary);
   }
 }
+.v-modal {
+  background-color: var(--s-color-utility-overlay);
+  opacity: 1;
+}
diff --git a/src/styles/divider.scss b/src/styles/divider.scss
index 5c56d24f..a67c42e3 100644
--- a/src/styles/divider.scss
+++ b/src/styles/divider.scss
@@ -1,6 +1,11 @@
-.el-divider {
-  background-color: var(--s-color-base-border-secondary);
-}
 .el-divider--horizontal {
   margin: 20px 0;
 }
+.s-divider {
+  &-primary {
+    background-color: var(--s-color-base-border-primary);
+  }
+  &-secondary {
+    background-color: var(--s-color-base-border-secondary);
+  }
+}
diff --git a/src/styles/form.scss b/src/styles/form.scss
index 5acc7677..eeea8fe7 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -1,7 +1,7 @@
 @import "./variables";
 
 .el-form-item {
-  margin-bottom: 26px;
+  margin-bottom: 12px;
   &__content {
     line-height: 20px;
     > button {
@@ -12,9 +12,10 @@
     color: var(--s-color-base-content-primary);
   }
   &.is-error {
-    margin-bottom: 6px;
+    margin-bottom: 0;
     > .el-form-item__content {
       > .el-form-item__error {
+        margin-bottom: 6px;
         position: relative;
         padding-top: 8px;
         padding-left: 30px;
@@ -23,7 +24,7 @@
           content: '';
         }
       }
-      > [class^="s-input"]:not(.disabled) {
+      > [class^="s-input"]:not(.s-disabled) {
         .s-placeholder {
           color: var(--s-color-status-error);
           background-color: var(--s-color-status-error-background);
@@ -45,7 +46,7 @@
             border-color: var(--s-color-status-error);
           }
         }
-        &.focused {
+        &.s-focused {
           .s-placeholder,
           .el-input > input,
           .el-textarea > textarea {
@@ -60,7 +61,7 @@
     }
     .s-icon-error {
       position: absolute;
-      bottom: 0;
+      bottom: 6px;
       left: 4px;
       font-size: 16px;
       color: var(--s-color-status-error);
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 6a5e2797..85ff393a 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -1,7 +1,7 @@
 @import "./variables";
 
 .s-input {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   width: 100%;
   min-height: $s-size-big;
   position: relative;
diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss
index 81327704..2229f1c9 100644
--- a/src/styles/json-input.scss
+++ b/src/styles/json-input.scss
@@ -35,10 +35,10 @@ $color-ide-boolean: #0000FF;
 
 .jsoneditor {
   border: none !important;
-  font-family: $font-family-mono;
+  font-family: $s-font-family-mono;
   .ace-jsoneditor {
     *, textarea.jsoneditor-text * {
-      font-family: $font-family-mono;
+      font-family: $s-font-family-mono;
     }
     .ace_fold {
       border: none;
@@ -99,10 +99,10 @@ $color-ide-boolean: #0000FF;
   }
   .ace_editor .ace_content,
   .ace_gutter .ace_gutter-cell {
-    font-family: $font-family-mono;
+    font-family: $s-font-family-mono;
   }
   .ace_tooltip {
-    font-family: $font-family-default;
+    font-family: $s-font-family-default;
     background: var(--s-color-base-content-primary);
     border-color: var(--s-color-base-content-primary);
     color: var(--s-color-base-on-accent);
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 44c42b79..1763dc82 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -107,17 +107,17 @@ $radio-button-border-color: var(--s-color-theme-accent);
     &.is-disabled {
       .el-radio__inner {
         background-color: var(--ss-color-base-background);
-        border-color: var(--s-color-base-border-primary);
+        border-color: var(--s-color-base-on-disabled);
       }
       &.is-checked .el-radio__inner {
         background-color: var(--s-color-base-background);
-        border-color: var(--s-color-base-border-primary);
+        border-color: var(--s-color-base-on-disabled);
         &::after {
-          background-color: var(--s-color-base-content-quaternary);
+          background-color: var(--s-color-base-on-disabled);
         }
       }
       & + span.el-radio__label {
-        color: var(--s-color-base-content-quaternary);
+        color: var(--s-color-base-on-disabled);
       }
     }
   }
@@ -156,13 +156,13 @@ $radio-button-border-color: var(--s-color-theme-accent);
     }
     &.is-disabled {
       #{$radio-button-class}__inner {
-        color: var(--s-color-base-content-quaternary);
+        color: var(--s-color-base-on-disabled);
       }
     }
     &.is-disabled,
     &.is-disabled:hover {
       #{$radio-button-class}__inner {
-        border-color: var(--s-color-base-border-primary);
+        border-color: var(--s-color-base-on-disabled);
       }
     }
     &.is-active {
@@ -180,8 +180,8 @@ $radio-button-border-color: var(--s-color-theme-accent);
       &.is-disabled,
       &.is-disabled:hover {
         #{$radio-button-class}__inner {
-          background-color: var(--s-color-base-content-quaternary);
-          border-color: var(--s-color-base-content-quaternary);
+          background-color: var(--s-color-base-on-disabled);
+          border-color: var(--s-color-base-on-disabled);
         }
       }
     }
diff --git a/src/styles/scroll-sections.scss b/src/styles/scroll-sections.scss
index 4f23f482..8cb89fdf 100644
--- a/src/styles/scroll-sections.scss
+++ b/src/styles/scroll-sections.scss
@@ -1,7 +1,7 @@
 @import "./variables";
 
 .s-scroll-sections {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   font-size: 14px;
 }
 .s-scroll-menu {
diff --git a/src/styles/select.scss b/src/styles/select.scss
index b256beb2..7af02217 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -2,7 +2,7 @@
 @import "./icons";
 
 .s-select {
-  font-family: $font-family-default;
+  font-family: $s-font-family-default;
   width: 100%;
   position: relative;
   .el-select {
diff --git a/src/styles/table.scss b/src/styles/table.scss
index 427c8d81..f4a3319c 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -109,3 +109,12 @@
   background-color: var(--s-color-theme-accent);
   border-color: var(--s-color-theme-accent);
 }
+.el-table__expand-icon {
+  > .el-icon.el-icon-arrow-right {
+    font-family: $s-font-family-icons;
+    @extend .s-icon-chevron-bottom;
+  }
+  &--expanded {
+    transform: rotate(180deg);
+  }
+}
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index 3f2aca1c..7df25f8f 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -59,9 +59,6 @@
       background-color: var(--s-color-base-background);
       border-radius: 8px;
       height: 32px;
-      padding-top: 2px;
-      padding-left: 2px;
-      padding-right: 2px;
       &::after, .el-tabs__active-bar {
         height: 0;
       }
@@ -75,12 +72,13 @@
         &.is-active {
           color: var(--s-color-base-content-primary);
           background-color: var(--s-color-base-on-accent);
-          box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
+          box-shadow: $s-shadow-surface;
           border-radius: 8px;
+          margin: 2px;
         }
         &:focus.is-focus {
           // TODO: make it more focusable
-          box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
+          box-shadow: $s-shadow-surface;
           border-radius: 8px;
         }
       }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 5c7f7bb3..f9b61c17 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -4,7 +4,10 @@ $s-color-theme-accent-hover: #D51252 !default; // Primary button hover
 $s-color-theme-accent-pressed: #C00F4A !default; // Primary button pressed
 $s-color-theme-accent-focused: #AA0E42 !default; // Primary button focused
 // Secondary theme colors
-$s-color-theme-secondary-hover: #F3CCDA !default; // Datepicker values
+$s-color-theme-secondary: #F4E0E8 !default;
+$s-color-theme-secondary-hover: #F3CCDA !default;
+$s-color-theme-secondary-pressed: #F1C0D2 !default;
+$s-color-theme-secondary-focused: #EDABC3 !default;
 // Base content colors
 $s-color-base-content-primary: #2D2926 !default;
 $s-color-base-content-secondary: #53565A !default; // not used
@@ -17,19 +20,27 @@ $s-color-base-border-primary: #DDE0E1 !default;
 $s-color-base-border-secondary: #ECEFF0 !default;
 $s-color-base-background-hover: #ECEFF0 !default;
 $s-color-base-disabled: #F5F7F8 !default;
-$s-color-base-on-disabled: #75787B !default; // not used
+$s-color-base-on-disabled: #75787B !default;
 $s-color-base-on-accent: #FFFFFF !default;
 // Utility colors
-$s-color-utility-body: #FFFFFF !default; // not used
+$s-color-utility-body: #FFFFFF !default;
 $s-color-utility-surface: #FFFFFF !default;
-$s-color-utility-overlay: rgba(0, 0, 0, 0.45) !default; // not used
+$s-color-utility-overlay: rgba(0, 0, 0, 0.45) !default;
 // Status colors
-$s-color-status-success: #009900 !default; // not used
-$s-color-status-warning: #FF9900 !default; // not used
+$s-color-status-success: #009900 !default;
+$s-color-status-warning: #FF9900 !default;
 $s-color-status-error: #FF0000 !default;
-$s-color-status-success-background: #CCEDCC !default; // not used
-$s-color-status-warning-background: #FFE3B8 !default; // not used
+$s-color-status-success-background: #CCEDCC !default;
+$s-color-status-warning-background: #FFE3B8 !default;
 $s-color-status-error-background: #FFF9FA !default;
+// Shadow
+// TODO: use it and discuss colors of these shadows
+$s-shadow-surface: 0px 1px 4px rgba(13, 2, 72, 0.35) !default;
+$s-shadow-tooltip: 0px 1px 4px rgba(13, 2, 72, 0.35) !default;
+$s-shadow-tab: 0px 1px 1px rgba(0, 0, 0, 0.1) !default;
+$s-shadow-dropdown: 0px 4px 8px rgba(19, 19, 19, 0.15) !default;
+$s-shadow-mobile-tap-bar: 0px -4px 8px rgba(19, 19, 19, 0.15) !default;
+$s-shadow-mobile-side-menu: -4px 4px 8px rgba(19, 19, 19, 0.15) !default;
 
 // Size
 $s-size-big: 56px !default;
@@ -39,8 +50,9 @@ $s-size-mini: 24px !default;
 
 $s-border-radius-default: 4px !default;
 // Fonts
-$font-family-default: 'Sora', sans-serif !important;
-$font-family-mono: 'JetBrainsMono', monospace !important;
+$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;
@@ -78,7 +90,10 @@ $--breakpoints-spec: (
   --s-color-theme-accent-hover: #{$s-color-theme-accent-hover};
   --s-color-theme-accent-pressed: #{$s-color-theme-accent-pressed};
   --s-color-theme-accent-focused: #{$s-color-theme-accent-focused};
+  --s-color-theme-secondary: #{$s-color-theme-secondary};
   --s-color-theme-secondary-hover: #{$s-color-theme-secondary-hover};
+  --s-color-theme-secondary-pressed: #{$s-color-theme-secondary-pressed};
+  --s-color-theme-secondary-focused: #{$s-color-theme-secondary-focused};
   --s-color-base-content-primary: #{$s-color-base-content-primary};
   --s-color-base-content-secondary: #{$s-color-base-content-secondary};
   --s-color-base-content-tertiary: #{$s-color-base-content-tertiary};
diff --git a/src/types/index.ts b/src/types/index.ts
index e2e3a93d..4c78a22f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -10,30 +10,95 @@ export enum Direction {
 }
 
 export enum Colors {
-  ThemeAccent = '--s-color-theme-accent',
-  ThemeAccentHover = '--s-color-theme-accent-hover',
-  ThemeAccentPressed = '--s-color-theme-accent-pressed',
-  ThemeAccentFocused = '--s-color-theme-accent-focused',
-  ThemeSecondaryHover = '--s-color-theme-secondary-hover',
-  BaseContentPrimary = '--s-color-base-content-primary',
-  BaseContentSecondary = '--s-color-base-content-secondary',
-  BaseContentTertiary = '--s-color-base-content-tertiary',
-  BaseContentQuaternary = '--s-color-base-content-quaternary',
-  BaseBackground = '--s-color-base-background',
-  BaseDarkBackground = '--s-color-base-dark-background',
-  BaseBorderPrimary = '--s-color-base-border-primary',
-  BaseBorderSecondary = '--s-color-base-border-secondary',
-  BaseBackgroundHover = '--s-color-base-background-hover',
-  BaseDisabled = '--s-color-base-disabled',
-  BaseOnDisabled = '--s-color-base-on-disabled',
-  BaseOnAccent = '--s-color-base-on-accent',
-  UtilityBody = '--s-color-utility-body',
-  UtilitySurface = '--s-color-utility-surface',
-  UtilityOverlay = '--s-color-utility-overlay',
-  StatusSuccess = '--s-color-status-success',
-  StatusWarning = '--s-color-status-warning',
-  StatusError = '--s-color-status-error',
-  StatusSuccessBackground = '--s-color-status-success-background',
-  StatusWarningBackground = '--s-color-status-warning-background',
-  StatusErrorBackground = '--s-color-status-error-background'
+  ThemeAccent = 'theme-accent',
+  ThemeAccentHover = 'theme-accent-hover',
+  ThemeAccentPressed = 'theme-accent-pressed',
+  ThemeAccentFocused = 'theme-accent-focused',
+  ThemeSecondary = 'theme-secondary',
+  ThemeSecondaryHover = 'theme-secondary-hover',
+  ThemeSecondaryPressed = 'theme-secondary-pressed',
+  ThemeSecondaryFocused = 'theme-secondary-focused',
+  BaseContentPrimary = 'base-content-primary',
+  BaseContentSecondary = 'base-content-secondary',
+  BaseContentTertiary = 'base-content-tertiary',
+  BaseContentQuaternary = 'base-content-quaternary',
+  BaseBackground = 'base-background',
+  BaseDarkBackground = 'base-dark-background',
+  BaseBorderPrimary = 'base-border-primary',
+  BaseBorderSecondary = 'base-border-secondary',
+  BaseBackgroundHover = 'base-background-hover',
+  BaseDisabled = 'base-disabled',
+  BaseOnDisabled = 'base-on-disabled',
+  BaseOnAccent = 'base-on-accent',
+  UtilityBody = 'utility-body',
+  UtilitySurface = 'utility-surface',
+  UtilityOverlay = 'utility-overlay',
+  StatusSuccess = 'status-success',
+  StatusWarning = 'status-warning',
+  StatusError = 'status-error',
+  StatusSuccessBackground = 'status-success-background',
+  StatusWarningBackground = 'status-warning-background',
+  StatusErrorBackground = 'status-error-background',
+  ButtonTertiaryColor = 'button-tertiary-color',
+  ButtonTertiaryColorActive = 'button-tertiary-color-active',
+  ButtonTertiaryBackground = 'button-tertiary-background',
+  ButtonTertiaryBackgroundHover = 'button-tertiary-background-hover',
+  ButtonTertiaryBackgroundPressed = 'button-tertiary-background-pressed',
+  ButtonTertiaryBackgroundFocused = 'button-tertiary-background-focused'
+}
+
+export enum AccentColors {
+  ThemeAccent = Colors.ThemeAccent,
+  ThemeAccentHover = Colors.ThemeAccentHover,
+  ThemeAccentPressed = Colors.ThemeAccentPressed,
+  ThemeAccentFocused = Colors.ThemeAccentFocused
+}
+
+export enum SecondaryColors {
+  ThemeSecondary = Colors.ThemeSecondary,
+  ThemeSecondaryHover = Colors.ThemeSecondaryHover,
+  ThemeSecondaryPressed = Colors.ThemeSecondaryPressed,
+  ThemeSecondaryFocused = Colors.ThemeSecondaryFocused
+}
+
+export enum ContentColors {
+  BaseContentPrimary = Colors.BaseContentPrimary,
+  BaseContentSecondary = Colors.BaseContentSecondary,
+  BaseContentTertiary = Colors.BaseContentTertiary,
+  BaseContentQuaternary = Colors.BaseContentQuaternary
+}
+
+export enum MiscColors {
+  BaseBackground = Colors.BaseBackground,
+  BaseDarkBackground = Colors.BaseDarkBackground,
+  BaseBorderPrimary = Colors.BaseBorderPrimary,
+  BaseBorderSecondary = Colors.BaseBorderSecondary,
+  BaseBackgroundHover = Colors.BaseBackgroundHover,
+  BaseDisabled = Colors.BaseDisabled,
+  BaseOnDisabled = Colors.BaseOnDisabled,
+  BaseOnAccent = Colors.BaseOnAccent
+}
+
+export enum UtilityColors {
+  UtilityBody = Colors.UtilityBody,
+  UtilitySurface = Colors.UtilitySurface,
+  UtilityOverlay = Colors.UtilityOverlay
+}
+
+export enum StatusColors {
+  StatusSuccess = Colors.StatusSuccess,
+  StatusWarning = Colors.StatusWarning,
+  StatusError = Colors.StatusError,
+  StatusSuccessBackground = Colors.StatusSuccessBackground,
+  StatusWarningBackground = Colors.StatusWarningBackground,
+  StatusErrorBackground = Colors.StatusErrorBackground
+}
+
+export enum TertiaryButtonColors {
+  ButtonTertiaryColor = Colors.ButtonTertiaryColor,
+  ButtonTertiaryColorActive = Colors.ButtonTertiaryColorActive,
+  ButtonTertiaryBackground = Colors.ButtonTertiaryBackground,
+  ButtonTertiaryBackgroundHover = Colors.ButtonTertiaryBackgroundHover,
+  ButtonTertiaryBackgroundPressed = Colors.ButtonTertiaryBackgroundPressed,
+  ButtonTertiaryBackgroundFocused = Colors.ButtonTertiaryBackgroundFocused
 }