diff --git a/config/storybook/preview.js b/config/storybook/preview.js
index fdabd181..bea3f949 100644
--- a/config/storybook/preview.js
+++ b/config/storybook/preview.js
@@ -20,7 +20,7 @@ addParameters({
 
 addDecorator(withA11y)
 addDecorator(() => ({
-  template: `<div class="flex" style="padding: 20px;">
+  template: `<div class="s-flex" style="padding: 20px;">
                <story/>
              </div>`
 }))
diff --git a/package.json b/package.json
index 05726c3a..aa110c06 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/components/Breadcrumb/SBreadcrumb.vue b/src/components/Breadcrumb/SBreadcrumb.vue
index 2d53a072..ae2344e1 100644
--- a/src/components/Breadcrumb/SBreadcrumb.vue
+++ b/src/components/Breadcrumb/SBreadcrumb.vue
@@ -15,11 +15,3 @@ export default class SBreadcrumb extends Vue {
   @Prop({ default: '/', type: String }) readonly separator!: string
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-.el-breadcrumb__separator {
-  color: $color-neutral-secondary;
-  font-weight: normal;
-}
-</style>
diff --git a/src/components/Breadcrumb/SBreadcrumbItem.vue b/src/components/Breadcrumb/SBreadcrumbItem.vue
index 7d577779..706572d3 100644
--- a/src/components/Breadcrumb/SBreadcrumbItem.vue
+++ b/src/components/Breadcrumb/SBreadcrumbItem.vue
@@ -24,17 +24,3 @@ export default class SBreadcrumbItem extends Vue {
   @Prop({ default: false, type: Boolean }) readonly replace!: boolean
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-.el-breadcrumb__inner {
-  color: $color-neutral-secondary;
-  &.is-link {
-    color: $color-neutral-secondary;
-    font-weight: normal;
-  }
-}
-.el-breadcrumb__item:last-child {
-  pointer-events: none;
-}
-</style>
diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index ce9ee5ff..10b0a5e9 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -9,7 +9,7 @@
       :disabled="disabled"
       :loading="isLoading"
       :autofocus="autofocus"
-      :circle="type === ButtonTypes.ACTION"
+      :circle="type === ButtonTypes.ACTION && rounded"
       :icon="elementIcon"
       @click="handleClick"
     >
@@ -40,6 +40,12 @@ export default class SButton extends Vue {
    * By default it's set to `"primary"`
    */
   @Prop({ default: ButtonTypes.PRIMARY, type: String }) readonly type!: string
+  /**
+   * Rounded property for `type="action"` buttons.
+   *
+   * By default it's set to `false`
+   */
+  @Prop({ default: false, type: Boolean }) readonly rounded!: boolean
   /**
    * Size of button. Possible values: `"big"`, `"medium"`, `"small"`.
    *
@@ -117,18 +123,18 @@ export default class SButton extends Vue {
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if ((this.elForm || this.elFormItem || {}).size) {
-      cssClasses.push((this.elForm || this.elFormItem).size)
+      cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`)
     } else if ((Object.values(ButtonSize) as Array<string>).includes(this.size)) {
-      cssClasses.push(this.size)
+      cssClasses.push(`s-${this.size}`)
     }
     if ((Object.values(ButtonTypes) as Array<string>).includes(this.type)) {
-      cssClasses.push(this.type)
+      cssClasses.push(`s-${this.type}`)
     }
     if (this.isLoading) {
-      cssClasses.push('loading')
+      cssClasses.push('s-loading')
     }
     if (this.alternative) {
-      cssClasses.push('alternative')
+      cssClasses.push('s-alternative')
     }
     return cssClasses
   }
@@ -176,148 +182,3 @@ export default class SButton extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.loading {
-  padding: 12px 17.5px;
-  i {
-    position: absolute;
-    left: var(--s-button-loading-left);
-  }
-  &.small {
-    padding: 9px 15px;
-    i {
-      left: calc(var(--s-button-loading-left) + 2px);
-    }
-  }
-  > :not(i) {
-    color: transparent;
-  }
-}
-
-.primary {
-  &:hover, &:active, &:focus {
-    background-color: $color-main-hover;
-    border-color: $color-main-hover;
-  }
-  &:disabled, &:disabled:hover {
-    background-color: $color-main-inactive;
-    border-color: $color-main-inactive;
-  }
-}
-
-.secondary {
-  &:hover, &:active, &:focus {
-    color: $color-main-brand;
-    background-color: $color-basic-white;
-    border-color: $color-main-brand;
-  }
-  &:disabled, &:disabled:hover {
-    color: $color-neutral-inactive;
-    border-color: $color-neutral-border;
-  }
-  &.alternative {
-    &:hover, &:active, &:focus {
-      color: $color-basic-black;
-      background-color: $color-neutral-hover;
-      border-color: $color-neutral-hover;
-    }
-    &:disabled, &:disabled:hover {
-      color: $color-neutral-inactive;
-      border-color: $color-neutral-border;
-      background-color: $color-basic-white;
-    }
-  }
-}
-
-.link {
-  color: $color-basic-black;
-  border: none;
-  background-color: transparent;
-  &:hover, &:active, &:focus {
-    color: $color-main-brand;
-    background-color: transparent;
-  }
-  &:disabled, &:disabled:hover {
-    color: $color-neutral-inactive;
-  }
-}
-
-.tertiary {
-  color: $color-basic-black;
-  border-color: $color-neutral-placeholder;
-  background-color: $color-neutral-placeholder;
-  &:hover, &:active, &:focus {
-    color: $color-main-brand;
-    background-color: $color-neutral-placeholder;
-    border-color: $color-neutral-placeholder;
-  }
-  &:disabled, &:disabled:hover {
-    color: $color-neutral-inactive;
-    background-color: $color-neutral-placeholder;
-    border-color: $color-neutral-placeholder;
-  }
-}
-
-.action {
-  &.big {
-    width: $size-big;
-    i {
-      font-size: 20px;
-    }
-  }
-  &.medium {
-    width: $size-medium;
-    i {
-      font-size: 18px;
-    }
-  }
-  &.small {
-    width: $size-small;
-    i {
-      font-size: 16px;
-      margin-left: -2px;
-      margin-top: -2px;
-    }
-  }
-  color: $color-basic-black;
-  background-color: $color-neutral-placeholder;
-  border-color: $color-neutral-placeholder;
-  &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
-    color: $color-basic-black;
-    background-color: $color-neutral-hover;
-    border-color: $color-neutral-hover;
-  }
-  &:disabled, &:disabled:hover {
-    color: $color-neutral-inactive;
-  }
-  &.alternative {
-    background-color: $color-basic-white;
-    border-color: $color-neutral-border;
-    &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
-      color: $color-basic-black;
-      background-color: $color-neutral-placeholder;
-      border-color: $color-neutral-placeholder;
-    }
-    &:disabled, &:disabled:hover {
-      color: $color-neutral-inactive;
-    }
-  }
-}
-
-button {
-  > span > i {
-    &[class^=s-icon-], &[class^=el-icon-] {
-      display: inline-block;
-      color: inherit;
-    }
-  }
-  &:not(.action) > span > i {
-    &[class^=s-icon-], &[class^=el-icon-] {
-      margin-right: 6px;
-    }
-  }
-}
-</style>
diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index 248e1f29..bf2ea598 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -1,7 +1,7 @@
 <template>
   <el-card
     class="s-card"
-    :class="{ clickable }"
+    :class="{ 's-clickable': clickable }"
     :header="header"
     :body-style="bodyStyle"
     :shadow="shadow"
@@ -57,27 +57,3 @@ export default class SCard extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.s-card {
-  color: $color-basic-black;
-  border-radius: 8px;
-  border-color: $color-neutral-border;
-  &.clickable {
-    cursor: pointer;
-  }
-  &:hover, &:focus {
-    border-color: $color-basic-white;
-  }
-  .el-card__header {
-    border-bottom-color: $color-basic-white;
-    padding-bottom: 0;
-    text-align: left;
-  }
-  .el-card__body {
-    padding: 18px 20px;
-  }
-}
-</style>
diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
index 8c85714a..c2759c5c 100644
--- a/src/components/Checkbox/SCheckbox.vue
+++ b/src/components/Checkbox/SCheckbox.vue
@@ -88,7 +88,7 @@ export default class SCheckbox extends Vue {
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if ((Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
-      cssClasses.push(this.size)
+      cssClasses.push(`s-${this.size}`)
     }
     return cssClasses
   }
@@ -98,93 +98,3 @@ export default class SCheckbox extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-@import "../../styles/common.scss";
-
-.el-checkbox {
-  &.big {
-    @extend .big;
-    padding: 17px 0 9px 0;
-    &.is-bordered {
-      padding: 17px 20px 9px 15px;
-    }
-  }
-  &.medium {
-    @extend .medium;
-    &, &.is-bordered {
-      padding: 9px 15px 7px 10px;
-      .el-checkbox__inner {
-        height: 16px;
-        width: 16px;
-        &::after {
-          top: 0;
-          left: 4px;
-          height: 8px;
-          width: 4px;
-        }
-      }
-    }
-    & {
-      padding: 9px 0 7px 0;
-    }
-  }
-  &.small {
-    @extend .small;
-    border-radius: 4px;
-    .el-checkbox__label {
-      font-size: 12px;
-    }
-    &, &.is-bordered {
-      padding: 5px 15px 5px 10px;
-      .el-checkbox__inner {
-        height: 14px;
-        width: 14px;
-        &::after {
-          top: 1px;
-          left: 4px;
-          height: 6px;
-          width: 2px;
-        }
-      }
-    }
-    & {
-      padding: 5px 0;
-    }
-  }
-}
-.el-checkbox__inner {
-  border-color: $color-neutral-inactive;
-  border-radius: 4px;
-  width: 20px;
-  height: 20px;
-  &::after {
-    border-width: 2px;
-    height: 10px;
-    left: 6px;
-    width: 5px;
-  }
-}
-.el-checkbox__input {
-  &.is-disabled {
-    .el-checkbox__inner {
-      background-color: $color-neutral-placeholder;
-    }
-    & + span.el-checkbox__label {
-      color: $color-neutral-inactive;
-    }
-  }
-  &.is-checked {
-    &.is-disabled > .el-checkbox__inner {
-      background-color: $color-neutral-placeholder;
-      &::after {
-        border-color: $color-neutral-inactive;
-      }
-    }
-    & + .el-checkbox__label {
-      color: $color-basic-black;
-    }
-  }
-}
-</style>
diff --git a/src/components/Collapse/SCollapse.vue b/src/components/Collapse/SCollapse.vue
index 7d16c283..6f1f5b16 100644
--- a/src/components/Collapse/SCollapse.vue
+++ b/src/components/Collapse/SCollapse.vue
@@ -46,12 +46,3 @@ export default class SCollapse extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-collapse {
-  border-top-color: #F5F5F5;
-  border-bottom-color: #F5F5F5;
-}
-</style>
diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue
index d6d2d96a..26be0bd2 100644
--- a/src/components/Collapse/SCollapseItem.vue
+++ b/src/components/Collapse/SCollapseItem.vue
@@ -41,58 +41,12 @@ export default class SCollapseItem extends Vue {
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (!(this.sCollapse || {}).borders) {
-      cssClasses.push('without-border')
+      cssClasses.push('s-without-border')
     }
     if (this.withoutPadding) {
-      cssClasses.push('without-padding')
+      cssClasses.push('s-without-padding')
     }
     return cssClasses
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-@import "../../styles/icons.scss";
-
-.without-border {
-  > div > .el-collapse-item__header,
-  > .el-collapse-item__wrap {
-    border: none;
-  }
-}
-.without-padding > .el-collapse-item__wrap > .el-collapse-item__content {
-  padding-bottom: 0;
-}
-.el-collapse-item__ {
-  &wrap {
-    border-bottom-color: #F5F5F5;
-  }
-  &header {
-    color: $color-basic-black;
-    border-bottom-color: #F5F5F5;
-    &.is-active {
-      border-bottom-color: transparent;
-    }
-    .el-icon-arrow-right {
-      font-family: 'soramitsu-icons' !important;
-      @extend .s-icon-chevron-top;
-      font-size: 16px;
-      padding: 8px;
-      width: 32px;
-      height: 32px;
-      background-color: $color-neutral-placeholder;
-      border-radius: 50%;
-      &.is-active {
-        transform: rotate(180deg);
-      }
-    }
-  }
-  &content {
-    color: $color-basic-black;
-  }
-}
-.el-collapse-item.is-disabled .el-collapse-item__header {
-  color: $color-neutral-inactive;
-}
-</style>
diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker.vue
index 316fa2a3..29862d5a 100644
--- a/src/components/DatePicker/SDatePicker.vue
+++ b/src/components/DatePicker/SDatePicker.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="s-date-picker" :class="computedClasses">
-    <span v-if="willPlaceholderBeShown" class="placeholder">{{ placeholder }}</span>
+    <span v-if="willPlaceholderBeShown" class="s-placeholder">{{ placeholder }}</span>
     <el-date-picker
       ref="picker"
       v-model="model"
@@ -212,20 +212,16 @@ export default class SDatePicker extends Vue {
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
-      if (!this.isInputType) {
-        cssClasses.push(InputTypes.SELECT)
-      } else {
-        cssClasses.push(this.inputType)
-      }
+      cssClasses.push(`s-${!this.isInputType ? InputTypes.SELECT : this.inputType}-type`)
     }
     if (this.focused) {
-      cssClasses.push('focused')
+      cssClasses.push('s-focused')
     }
     if (this.disabled) {
-      cssClasses.push('disabled')
+      cssClasses.push('s-disabled')
     }
     if ((!this.isRange && this.model) || (this.isRange && this.model.length !== 0)) {
-      cssClasses.push('has-value')
+      cssClasses.push('s-has-value')
     }
     return cssClasses
   }
@@ -252,237 +248,3 @@ export default class SDatePicker extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-.s-date-picker {
-  font-family: $font-family-default;
-  width: 100%;
-  position: relative;
-  .el-date-editor {
-    width: 100%;
-    &.el-input, &.el-input__inner {
-      width: 100%;
-    }
-    .el-range-separator {
-      color: $color-neutral-tertiary;
-    }
-    .el-input__inner, .el-range-input {
-      &::placeholder {
-        color: $color-neutral-secondary;
-        opacity: 1; // Firefox
-      }
-    }
-    &.is-active {
-      border-color: $color-neutral-border;
-    }
-  }
-  &.has-value {
-    .el-date-editor .el-range-separator {
-      color: $color-basic-black;
-    }
-  }
-  &.input {
-    min-height: $size-big;
-    .el-input__inner {
-      height: $size-big;
-      padding: 0 15px;
-      border: 1px solid $color-neutral-placeholder;
-      background-color: $color-neutral-placeholder;
-    }
-    &:hover {
-      .el-input__inner {
-        border-color: $color-neutral-hover;
-      }
-      .el-input__inner, .placeholder {
-        background-color: $color-neutral-hover;
-      }
-    }
-    .placeholder + .el-date-editor {
-      > .el-input__inner {
-        padding-top: 12px;
-      }
-      .el-input__validateIcon {
-        padding-top: 11px;
-      }
-    }
-    &.focused {
-      .el-input__inner {
-        border-color: $color-neutral-border;
-      }
-      .el-input__inner, .placeholder {
-        background-color: $color-basic-white;
-      }
-    }
-    &.disabled {
-      .el-input__inner {
-        border-color: $color-neutral-border;
-      }
-      .el-input__inner, .placeholder {
-        color: $color-neutral-secondary;
-        background-color: $color-neutral-placeholder;
-      }
-    }
-  }
-  .placeholder {
-    // TODO: add default animation from material-ui
-    color: $color-neutral-secondary;
-    text-align: left;
-    font-size: 12px;
-    padding: 0 15px;
-    padding-top: 5px;
-    top: 1px;
-    left: 1px;
-    border-top-left-radius: 4px;
-    position: absolute;
-    z-index: 1;
-    width: calc(100% - 15px);
-    background-color: $color-neutral-placeholder;
-    pointer-events: none;
-  }
-  &.select {
-    .el-date-editor {
-      .el-input__inner, .el-range-input, .el-range-separator {
-        font-weight: bold;
-      }
-      &.el-input__inner, & .el-input__inner {
-        border-radius: 8px;
-        padding-left: 12px;
-        &:hover {
-          border-color: $color-neutral-inactive;
-        }
-        &::placeholder, .el-range-input::placeholder {
-          color: $color-neutral-tertiary;
-          font-weight: bold;
-        }
-      }
-    }
-    .s-icon-chevron-bottom {
-      position: absolute;
-      right: 10px;
-      top: 30%;
-      pointer-events: none;
-      color: $color-neutral-tertiary;
-      transition: transform .3s;
-    }
-    &.focused {
-      .el-date-editor.el-input__inner,
-      .el-date-editor .el-input__inner {
-        border-color: $color-neutral-inactive;
-      }
-      &:not(.disabled) .s-icon-chevron-bottom {
-        transform: rotate(180deg);
-      }
-    }
-    &.has-value {
-      .s-icon-chevron-bottom {
-        color: $color-basic-black;
-      }
-    }
-    &.disabled {
-      .el-date-editor.el-input__inner,
-      .el-date-editor .el-input__inner {
-        color: $color-neutral-inactive;
-        border-color: $color-neutral-border;
-        background-color: $color-basic-white;
-        &::placeholder {
-          color: $color-neutral-inactive;
-        }
-        .el-range-input {
-          background-color: $color-basic-white;
-          color: $color-neutral-inactive;
-          &::placeholder {
-            color: $color-neutral-inactive;
-          }
-        }
-        .el-range-separator {
-          color: $color-neutral-inactive;
-        }
-      }
-      .s-icon-chevron-bottom {
-        color: $color-neutral-inactive;
-      }
-    }
-  }
-}
-.el-picker-panel__icon-btn,
-.el-date-picker__header-label,
-.el-date-table td,
-.el-date-table th,
-.el-picker-panel__link-btn,
-.el-time-panel__btn,
-.el-date-range-picker__time-header > .el-icon-arrow-right {
-  color: $color-basic-black;
-}
-.el-picker-panel {
-  border-color: $color-neutral-hover;
-  .el-picker-panel__content {
-    .el-date-table {
-      td {
-        &.available:hover {
-          color: $color-main-brand;
-        }
-        &.next-month, &.prev-month {
-          color: $color-neutral-inactive;
-        }
-      }
-      th {
-        border-bottom-color: $color-neutral-hover;
-      }
-    }
-  }
-  .el-picker-panel__footer {
-    border-top-color: $color-neutral-hover;
-    > .el-button {
-      height: 32px;
-      border-radius: 4px;
-    }
-  }
-  div[x-arrow].popper__arrow {
-    border-bottom-color: $color-neutral-hover;
-  }
-}
-.el-time-panel {
-  border-radius: 4px;
-  border-color: $color-neutral-hover;
-  .el-time-panel__footer {
-    border-top-color: $color-neutral-hover;
-  }
-  .el-time-spinner__item {
-    &.active:not(.disabled) {
-      color: $color-basic-black;
-    }
-    &:hover:not(.disabled):not(.active) {
-      background-color: $color-neutral-placeholder;
-    }
-  }
-  .el-time-panel__content {
-    &::after, &::before {
-      border-top-color: $color-neutral-hover;
-      border-bottom-color: $color-neutral-hover;
-    }
-  }
-}
-.el-date-table.is-week-mode .el-date-table__row {
-  &.current, &:hover {
-    div {
-      background-color: $color-main-hover-light;
-    }
-  }
-}
-.el-month-table td.in-range div {
-  background-color: $color-main-hover-light;
-  &:hover {
-    background-color: $color-main-hover-light;
-  }
-}
-.el-date-table td.in-range div {
-  background-color: $color-main-hover-light;
-  &:hover {
-    background-color: $color-main-hover-light;
-  }
-}
-.el-date-range-picker__content.is-left {
-  border-right-color: $color-neutral-hover;
-}
-</style>
diff --git a/src/components/Dialog/SDialog.vue b/src/components/Dialog/SDialog.vue
index 258c6506..d2f1238e 100644
--- a/src/components/Dialog/SDialog.vue
+++ b/src/components/Dialog/SDialog.vue
@@ -204,19 +204,3 @@ export default class SDialog extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-dialog {
-  border-radius: 8px;
-  .el-dialog__title {
-    font-weight: bold;
-    font-size: 16px;
-    color: $color-basic-black;
-  }
-  > * {
-    word-break: break-word;
-  }
-}
-</style>
diff --git a/src/components/Divider/SDivider.vue b/src/components/Divider/SDivider.vue
index 6517e44c..c74cb2a8 100644
--- a/src/components/Divider/SDivider.vue
+++ b/src/components/Divider/SDivider.vue
@@ -25,14 +25,3 @@ export default class SDivider extends Vue {
   @Prop({ default: ContentPosition.CENTER, type: String }) readonly contentPosition!: string
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-divider {
-  background-color: #F5F5F5;
-}
-.el-divider--horizontal {
-  margin: 20px 0;
-}
-</style>
diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown.vue
index bd0e5064..bc1e294b 100644
--- a/src/components/Dropdown/SDropdown.vue
+++ b/src/components/Dropdown/SDropdown.vue
@@ -163,7 +163,7 @@ export default class SDropdown extends Vue {
     if (this.splitButton) {
       this.$nextTick(() => {
         this.dropdown.$children[0].$children.forEach(button => {
-          button.$el.classList.add(this.size, this.computedButtonType)
+          button.$el.classList.add(`s-${this.size}`, `s-${this.computedButtonType}`)
         })
       })
     }
@@ -189,43 +189,3 @@ export default class SDropdown extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-dropdown {
-  > .el-button-group {
-    > .el-button {
-      float: left;
-    }
-    .el-dropdown__caret-button {
-      &.secondary {
-        &::before {
-          background-color: $color-neutral-border;
-        }
-        &:hover, &:active, &:focus {
-          &::before {
-            background-color: $color-main-brand;
-          }
-        }
-      }
-      &.tertiary {
-        &::before {
-          background-color: transparent;
-        }
-        &:hover, &:active, &:focus {
-          &::before {
-            background-color: transparent;
-          }
-        }
-      }
-    }
-  }
-  > i {
-    cursor: pointer;
-  }
-  .s-icon-more-horizontal {
-    font-size: 24px;
-  }
-}
-</style>
diff --git a/src/components/Dropdown/SDropdownItem.vue b/src/components/Dropdown/SDropdownItem.vue
index 9e729274..c775b633 100644
--- a/src/components/Dropdown/SDropdownItem.vue
+++ b/src/components/Dropdown/SDropdownItem.vue
@@ -43,14 +43,3 @@ export default class SDropdownItem extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-dropdown-menu__item:not(.is-disabled) {
-  &:hover, &:focus {
-    background-color: $color-neutral-placeholder;
-    color: $color-basic-black;
-  }
-}
-</style>
diff --git a/src/components/Form/SFormItem.vue b/src/components/Form/SFormItem.vue
index 1c7f347c..90a18bc1 100644
--- a/src/components/Form/SFormItem.vue
+++ b/src/components/Form/SFormItem.vue
@@ -122,72 +122,3 @@ export default class SFormItem extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-form-item {
-  margin-bottom: 26px;
-  &__content {
-    line-height: 20px;
-    > button {
-      width: 100%;
-    }
-  }
-  &.is-error {
-    margin-bottom: 6px;
-    > .el-form-item__content {
-      > .el-form-item__error {
-        position: relative;
-        padding-top: 8px;
-        padding-left: 30px;
-        color: $color-basic-black;
-        &::before {
-          content: '';
-        }
-      }
-      > [class^="s-input"]:not(.disabled) {
-        .placeholder {
-          color: $color-error;
-          background-color: $color-main-base;
-        }
-        input, textarea {
-          background-color: $color-main-base;
-          &::placeholder {
-            color: $color-error;
-          }
-        }
-        &:hover {
-          .placeholder,
-          .el-input > input,
-          .el-textarea > textarea {
-            background-color: $color-main-hover-light;
-          }
-          .el-input > input,
-          .el-textarea > textarea {
-            border-color: $color-error;
-          }
-        }
-        &.focused {
-          .placeholder,
-          .el-input > input,
-          .el-textarea > textarea {
-            background-color: $color-basic-white;
-          }
-          .el-input > input,
-          .el-textarea > textarea {
-            border-color: $color-error;
-          }
-        }
-      }
-    }
-    .s-icon-error {
-      position: absolute;
-      bottom: 0;
-      left: 4px;
-      font-size: 16px;
-      color: $color-error;
-    }
-  }
-}
-</style>
diff --git a/src/components/Icon/SIcon.vue b/src/components/Icon/SIcon.vue
index 67103ad3..da82e129 100644
--- a/src/components/Icon/SIcon.vue
+++ b/src/components/Icon/SIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <i v-if="computedClass" :class="computedClass" :style="computedStyles"></i>
+  <i v-if="computedClass" :class="computedClass" :style="computedStyles" />
 </template>
 
 <script lang="ts">
diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 5f8a87fc..757b52e3 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -3,7 +3,7 @@
     class="s-input"
     :class="computedClasses"
   >
-    <span v-if="model" class="placeholder">{{ placeholder }}</span>
+    <span v-if="model" class="s-placeholder">{{ placeholder }}</span>
     <el-input
       ref="el-input"
       :type="computedType"
@@ -158,16 +158,16 @@ export default class SInput extends Vue {
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.focused) {
-      cssClasses.push('focused')
+      cssClasses.push('s-focused')
     }
     if (this.disabled || (this.elForm || {}).disabled) {
-      cssClasses.push('disabled')
+      cssClasses.push('s-disabled')
     }
     if (this.type === InputType.TEXT_FILE) {
-      cssClasses.push('text-file')
+      cssClasses.push('s-text-file')
     }
     if (this.autofill) {
-      cssClasses.push('autofill')
+      cssClasses.push('s-autofill')
     }
     return cssClasses
   }
@@ -232,148 +232,3 @@ export default class SInput extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.s-input {
-  font-family: $font-family-default;
-  width: 100%;
-  min-height: $size-big;
-  position: relative;
-  .el-input__suffix {
-    z-index: 1;
-  }
-  .placeholder {
-    // TODO: add default animation from material-ui
-    color: $color-neutral-secondary;
-    text-align: left;
-    font-size: 12px;
-    padding: 0 15px;
-    padding-top: 5px;
-    top: 1px;
-    left: 1px;
-    border-top-left-radius: 4px;
-    position: absolute;
-    z-index: 1;
-    width: calc(100% - 15px);
-    background-color: $color-neutral-placeholder;
-    pointer-events: none;
-  }
-  .el-input,
-  .el-textarea {
-    height: 100%;
-    > input,
-    > textarea {
-      height: $size-big;
-      border: 1px solid $color-neutral-placeholder;
-      background-color: $color-neutral-placeholder;
-      &::placeholder {
-        color: $color-neutral-secondary;
-        opacity: 1; // Firefox
-      }
-    }
-    > textarea {
-      padding-top: 12px;
-    }
-    [class^="el-input__count"] {
-      background-color: transparent;
-    }
-  }
-  &:hover {
-    .placeholder,
-    .el-input > input,
-    .el-textarea > textarea {
-      background-color: $color-neutral-hover;
-    }
-    .el-input > input,
-    .el-textarea > textarea {
-      border-color: $color-neutral-hover;
-    }
-  }
-  &.focused {
-    .placeholder,
-    .el-input > input,
-    .el-textarea > textarea {
-      background-color: $color-basic-white;
-    }
-    .el-input > input,
-    .el-textarea > textarea {
-      border-color: $color-neutral-border;
-    }
-  }
-  &.disabled {
-    .placeholder,
-    .el-input > input,
-    .el-textarea > textarea {
-      color: $color-neutral-secondary;
-      background-color: $color-neutral-placeholder;
-    }
-    .el-input > input,
-    .el-textarea > textarea {
-      border-color: $color-neutral-border;
-    }
-  }
-  &.autofill {
-    .placeholder {
-      background-color: transparent !important;
-    }
-  }
-  .el-input > input {
-    &:-webkit-autofill {
-      color: $color-basic-black !important;
-      animation-name: onAutoFillStart; // Expose a hook for JavaScript when auto fill is shown
-    }
-    &:not(:-webkit-autofill) {
-      animation-name: onAutoFillCancel; // Expose a hook for JS onAutoFillCancel
-    }
-    &:-internal-autofill-selected {
-      animation-name: onAutoFillStart;
-    }
-    &:not(:-internal-autofill-selected) {
-      animation-name: onAutoFillCancel;
-    }
-  }
-  .placeholder + .el-input {
-    > input {
-      padding-top: 12px;
-    }
-    .el-input__validateIcon {
-      padding-top: 11px;
-    }
-  }
-  .placeholder + .el-textarea > textarea {
-    padding-top: 24px;
-  }
-  &.text-file {
-    .el-input > input {
-      padding-right: 56px;
-    }
-    .s-icon-file-upload {
-      top: 16px;
-      right: 16px;
-      font-size: 24px;
-      z-index: 1;
-      position: absolute;
-      + input {
-        cursor: pointer;
-        position: absolute;
-        opacity: 0;
-        top: 0;
-        right: 0;
-        width: 56px;
-        height: 100%;
-        z-index: 2;
-      }
-    }
-  }
-}
-@keyframes onAutoFillStart {
-  from {/**/}
-  to {/**/}
-}
-@keyframes onAutoFillCancel {
-  from {/**/}
-  to {/**/}
-}
-</style>
diff --git a/src/components/Input/SJsonInput.vue b/src/components/Input/SJsonInput.vue
index 840dbc43..8e979cdf 100644
--- a/src/components/Input/SJsonInput.vue
+++ b/src/components/Input/SJsonInput.vue
@@ -67,10 +67,10 @@ export default class SJsonInput extends Vue {
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if (this.disabled) {
-      cssClasses.push('disabled')
+      cssClasses.push('s-disabled')
     }
     if (this.readonly) {
-      cssClasses.push('readonly')
+      cssClasses.push('s-readonly')
     }
     return cssClasses
   }
@@ -96,6 +96,7 @@ export default class SJsonInput extends Vue {
     if (!this.readonly) {
       this.$emit('input', value)
       this.$emit('change', value)
+      return
     }
     if (!this.jsoneditor) {
       return
@@ -104,119 +105,3 @@ export default class SJsonInput extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-// @import "../../styles/icons.scss";
-
-$color-ide-variable: #0451A5;
-$color-ide-string: #A31515;
-$color-ide-number: #098658;
-$color-ide-boolean: #0000FF;
-
-.s-json-input {
-  width: 100%;
-  border: 1px solid $color-neutral-border;
-  border-radius: $border-radius-default;
-  &.disabled {
-    .ace-jsoneditor {
-      pointer-events: none;
-      .ace_cursor {
-        display: none !important;
-      }
-      .ace_scroller,
-      .ace_gutter-active-line {
-        background-color: $color-neutral-placeholder;
-      }
-    }
-  }
-  &.readonly .jsoneditor {
-    .ace_gutter .ace_gutter-cell.ace_error {
-      background-image: none;
-    }
-    .ace_tooltip {
-      display: none !important;
-    }
-  }
-  // TODO: think about hover and focus
-}
-
-.jsoneditor {
-  border: none !important;
-  font-family: $font-family-mono;
-  .ace-jsoneditor {
-    *, textarea.jsoneditor-text * {
-      font-family: $font-family-mono;
-    }
-    .ace_fold {
-      border: none;
-      background: none;
-      color: $color-basic-black;
-      margin-top: -13px;
-    }
-    .ace_text-layer {
-      color: $color-basic-black;
-    }
-    .ace_variable {
-      color: $color-ide-variable;
-    }
-    .ace_string {
-      color: $color-ide-string;
-    }
-    .ace_constant {
-      &.ace_numeric {
-        color: $color-ide-number;
-      }
-      &.ace_language {
-        color: $color-ide-boolean;
-      }
-    }
-    &.ace_editor {
-      border-top-left-radius: 3px;
-      border-top-right-radius: 3px;
-      .ace_marker-layer {
-        .ace_active-line {
-          background-color: $color-neutral-placeholder;
-        }
-        .ace_selection {
-          background: $color-neutral-border;
-        }
-      }
-    }
-  }
-  .jsoneditor-statusbar {
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-    background-color: $color-neutral-placeholder;
-    color: $color-neutral-secondary;
-    .jsoneditor-parse-error-icon {
-      // If full error message will be needed, then it should be removed
-      display: none !important;
-      pointer-events: none;
-    }
-  }
-  .ace_gutter {
-    background-color: $color-neutral-placeholder;
-    &-active-line {
-      background-color: $color-neutral-border;
-    }
-    // .ace_gutter-cell.ace_error {
-    //   @extend .s-icon-error; // TODO: fix the path for icon
-    // }
-  }
-  .ace_editor .ace_content,
-  .ace_gutter .ace_gutter-cell {
-    font-family: $font-family-mono;
-  }
-  .ace_tooltip {
-    font-family: $font-family-default;
-    background: $color-basic-black;
-    border-color: $color-basic-black;
-    color: $color-basic-white;
-    border-radius: $border-radius-default;
-    padding: 10px;
-    font-size: 12px;
-    line-height: 1.2;
-  }
-}
-</style>
diff --git a/src/components/Menu/SMenuItem.vue b/src/components/Menu/SMenuItem.vue
index 9a51857e..d7c01e71 100644
--- a/src/components/Menu/SMenuItem.vue
+++ b/src/components/Menu/SMenuItem.vue
@@ -1,6 +1,6 @@
 <template>
   <el-menu-item
-    class="flex"
+    class="s-flex"
     :index="index"
     :route="route"
     :disabled="disabled"
diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue
index 4f1b1aaa..03f23c54 100644
--- a/src/components/Pagination/SPagination.vue
+++ b/src/components/Pagination/SPagination.vue
@@ -195,102 +195,3 @@ export default class SPagination extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-pagination {
-  .btn-prev, .btn-next {
-    color: $color-basic-black;
-  }
-  button:disabled {
-    color: $color-neutral-inactive;
-  }
-  .el-pagination__sizes {
-    .el-select .el-input {
-      width: 65px;
-      .el-select__caret, .el-input__inner {
-        color: $color-basic-black;
-        font-weight: bold;
-      }
-      .el-select__caret {
-        margin-right: 6px;
-      }
-      .el-input__inner {
-        border-radius: 8px;
-        padding-right: 20px;
-        padding-left: 5px;
-        background-color: $color-neutral-placeholder;
-        border-color: $color-neutral-placeholder;
-      }
-      &.is-disabled {
-        .el-select__caret, .el-input__inner {
-          color: $color-neutral-inactive;
-        }
-      }
-    }
-  }
-  .el-pagination__editor.el-input {
-    .el-input__inner {
-      border-radius: 8px;
-      background-color: $color-neutral-placeholder;
-      border-color: $color-neutral-placeholder;
-      color: $color-basic-black;
-    }
-    &.is-disabled .el-input__inner {
-      color: $color-neutral-inactive;
-    }
-  }
-  .el-pagination__total, .per-page-text, .el-pagination__jump {
-    color: $color-neutral-secondary;
-    font-weight: normal;
-  }
-  .el-pager li {
-    color: $color-basic-black;
-    &.btn-quicknext, &.btn-quickprev {
-      color: $color-basic-black;
-    }
-    &:not(.disabled) {
-      &:hover, &.active {
-        color: $color-main-brand;
-      }
-    }
-    &.disabled {
-      color: $color-neutral-inactive;
-    }
-  }
-  &.is-background {
-    .el-pager li {
-      background-color: $color-neutral-placeholder;
-      &.disabled {
-        color: $color-neutral-inactive;
-      }
-    }
-    .btn-prev, .btn-next {
-      background-color: $color-neutral-placeholder;
-      &:disabled {
-        color: $color-neutral-inactive;
-        background-color: $color-neutral-placeholder;
-      }
-      &:not(:disabled):hover {
-        color: $color-main-brand;
-      }
-    }
-  }
-  &.el-pagination--small {
-    .el-pagination__editor {
-      height: 22px;
-    }
-    .el-pagination__sizes .el-select .el-input {
-      .el-input__inner {
-        height: 22px !important;
-        font-size: 12px;
-      }
-      .el-select__caret {
-        font-size: 12px;
-        line-height: 23px;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/Radio/SRadio.vue b/src/components/Radio/SRadio.vue
index 19ded97c..a1bbe20d 100644
--- a/src/components/Radio/SRadio.vue
+++ b/src/components/Radio/SRadio.vue
@@ -65,98 +65,9 @@ export default class SRadio extends Vue {
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if ((Object.values(RadioSize) as Array<string>).includes(this.size)) {
-      cssClasses.push(this.size)
+      cssClasses.push(`s-${this.size}`)
     }
     return cssClasses
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-@import "../../styles/common.scss";
-
-.el-radio {
-  &.big {
-    @extend .big;
-    line-height: $size-big;
-    &.is-bordered {
-      padding-top: 18px;
-    }
-    > .el-radio__input .el-radio__inner {
-      width: 20px;
-      height: 20px;
-      border-width: 2px;
-      &::after {
-        width: 10px;
-        height: 10px;
-      }
-    }
-  }
-  &.medium {
-    @extend .medium;
-    line-height: $size-medium;
-    > .el-radio__input .el-radio__inner {
-      width: 16px;
-      height: 16px;
-      border-width: 2px;
-      &::after {
-        width: 8px;
-        height: 8px;
-      }
-    }
-  }
-  &.small {
-    @extend .small;
-    line-height: $size-small;
-    &.is-bordered {
-      padding-top: 9px;
-    }
-    > .el-radio__label {
-      font-size: 12px;
-    }
-    > .el-radio__input .el-radio__inner {
-      width: 14px;
-      height: 14px;
-      border-width: 2px;
-      &::after {
-        width: 6px;
-        height: 6px;
-      }
-    }
-  }
-  &.is-bordered {
-    line-height: 0;
-    &.is-disabled {
-      border-color: $color-neutral-border;
-    }
-  }
-  > .el-radio__input {
-    .el-radio__inner {
-      background-color: $color-basic-white;
-      &::after {
-        background-color: $color-main-brand;
-      }
-    }
-    &.is-checked .el-radio__inner {
-      background-color: $color-basic-white;
-    }
-    &.is-disabled {
-      .el-radio__inner {
-        background-color: $color-neutral-placeholder;
-        border-color: $color-neutral-border;
-      }
-      &.is-checked .el-radio__inner {
-        background-color: $color-neutral-placeholder;
-        border-color: $color-neutral-border;
-        &::after {
-          background-color: $color-neutral-inactive;
-        }
-      }
-      & + span.el-radio__label {
-        color: $color-neutral-inactive;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/ScrollSections/SScrollSectionItem.vue b/src/components/ScrollSections/SScrollSectionItem.vue
index 915db4dc..9f9f6b47 100644
--- a/src/components/ScrollSections/SScrollSectionItem.vue
+++ b/src/components/ScrollSections/SScrollSectionItem.vue
@@ -41,23 +41,3 @@ export default class SScrollSectionItem extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-.s-scroll-section-item {
-  padding: 10px 20px;
-  &:first-child {
-    margin-top: 10px;
-  }
-  &:last-child {
-    margin-bottom: 10px;
-    .el-divider.el-divider--horizontal {
-      height: 0;
-    }
-  }
-  .title {
-    font-weight: bold;
-    display: block;
-    padding-bottom: 12px;
-  }
-}
-</style>
diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue
index fe3bc35f..c907a554 100644
--- a/src/components/ScrollSections/SScrollSections.vue
+++ b/src/components/ScrollSections/SScrollSections.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="s-scroll-sections flex">
+  <div class="s-scroll-sections s-flex">
     <nav class="s-scroll-menu" v-if="menuItems.length > 0" :style="computedFlex.menu">
       <ul :style="computedStyles">
         <li class="s-scroll-item" v-for="item in menuItems" :key="item.section">
@@ -194,52 +194,3 @@ export default class SScrollSections extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.s-scroll-sections {
-  font-family: $font-family-default;
-  font-size: 14px;
-}
-.s-scroll-menu {
-  font-weight: 600;
-  ul {
-    position: sticky;
-    top: 0;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .s-scroll-item {
-    text-decoration: none;
-    a {
-      display: block;
-      padding: 8px 16px;
-      text-decoration: none;
-      cursor: pointer;
-      color: var(--s-menu-color-text);
-      &:hover {
-        color: var(--s-menu-color-hover);
-      }
-      &.active {
-        color: var(--s-menu-color-text-active);
-        border-left: 2px solid var(--s-menu-color-text-active);
-      }
-      &.disabled {
-        cursor: not-allowed;
-        pointer-events: none;
-        color: $color-neutral-inactive;
-        border-left: none;
-      }
-    }
-  }
-}
-.s-scroll-content {
-  padding-bottom: 90%;
-  color: $color-basic-black;
-  .title {
-    font-size: 16px;
-  }
-}
-</style>
diff --git a/src/components/Select/SOption.vue b/src/components/Select/SOption.vue
index 1cea17fa..602733fe 100644
--- a/src/components/Select/SOption.vue
+++ b/src/components/Select/SOption.vue
@@ -25,8 +25,3 @@ export default class SOption extends Vue {
   @Prop({ type: Boolean, default: false }) readonly disabled!: boolean
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-</style>
diff --git a/src/components/Select/SOptionGroup.vue b/src/components/Select/SOptionGroup.vue
index df01ef52..fdbdd931 100644
--- a/src/components/Select/SOptionGroup.vue
+++ b/src/components/Select/SOptionGroup.vue
@@ -21,14 +21,3 @@ export default class SOptionGroup extends Vue {
   @Prop({ type: Boolean, default: false }) readonly disabled!: boolean
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-select-group__wrap:not(:last-of-type)::after {
-  background-color: $color-neutral-hover;
-}
-.el-select-group__title {
-  color: $color-neutral-tertiary;
-}
-</style>
diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
index 8ed019e1..2a4e988f 100644
--- a/src/components/Select/SSelect.vue
+++ b/src/components/Select/SSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="s-select" :class="computedClasses">
-    <span v-if="willPlaceholderBeShown" class="placeholder">{{ placeholder }}</span>
+    <span v-if="willPlaceholderBeShown" class="s-placeholder">{{ placeholder }}</span>
     <el-select
       ref="select"
       v-model="model"
@@ -140,16 +140,16 @@ export default class SSelect extends Vue {
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
-      cssClasses.push(this.inputType)
+      cssClasses.push(`s-${this.inputType}-type`)
     }
     if (this.focused) {
-      cssClasses.push('focused')
+      cssClasses.push('s-focused')
     }
     if (this.disabled) {
-      cssClasses.push('disabled')
+      cssClasses.push('s-disabled')
     }
     if ((!this.multiple && this.model) || (this.multiple && this.model.length !== 0)) {
-      cssClasses.push('has-value')
+      cssClasses.push('s-has-value')
     }
     return cssClasses
   }
@@ -192,220 +192,3 @@ export default class SSelect extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-@import "../../styles/icons.scss";
-
-.s-select {
-  font-family: $font-family-default;
-  width: 100%;
-  position: relative;
-  .el-select {
-    width: 100%;
-    i.el-icon-arrow-up {
-      font-family: $icons-font;
-      font-size: 16px;
-      &:before {
-        content: $s-icon-chevron-top;
-      }
-    }
-    .el-input {
-      &.is-focus .el-input__inner {
-        border-color: $color-neutral-placeholder;
-      }
-      .el-input__inner {
-        &::placeholder {
-          color: $color-neutral-secondary;
-          opacity: 1; // Firefox
-        }
-      }
-      .el-select__caret {
-        color: $color-neutral-secondary;
-      }
-    }
-  }
-  &.input {
-    .el-select {
-      .el-input__inner {
-        height: $size-big;
-        padding: 0 15px;
-        border: 1px solid $color-neutral-placeholder;
-        background-color: $color-neutral-placeholder;
-        &:focus {
-          border-color: $color-neutral-placeholder;
-        }
-      }
-    }
-    &:hover {
-      .el-select {
-        .el-input__inner {
-          border-color: $color-neutral-hover;
-          background-color: $color-neutral-hover;
-        }
-      }
-      .placeholder {
-        background-color: $color-neutral-hover;
-      }
-    }
-    .placeholder + .el-select {
-      .el-input__inner {
-        padding-top: 12px;
-      }
-      .el-input__validateIcon {
-        padding-top: 11px;
-      }
-    }
-    &.focused {
-      .el-select {
-        .el-input__inner {
-          border-color: $color-neutral-border;
-          background-color: $color-basic-white;
-        }
-      }
-      .placeholder {
-        background-color: $color-basic-white;
-      }
-    }
-    &.disabled {
-      .el-select {
-        .el-select__caret {
-          color: $color-neutral-secondary;
-        }
-        .el-input__inner, .el-input__inner:hover {
-          border-color: $color-neutral-border;
-          color: $color-neutral-secondary;
-          background-color: $color-neutral-placeholder;
-          &::placeholder {
-            color: $color-neutral-secondary;
-          }
-        }
-      }
-      .placeholder {
-        color: $color-neutral-secondary;
-        background-color: $color-neutral-placeholder;
-      }
-    }
-  }
-  .placeholder {
-    // TODO: add default animation from material-ui
-    color: $color-neutral-secondary;
-    text-align: left;
-    font-size: 12px;
-    padding: 0 15px;
-    padding-top: 5px;
-    top: 1px;
-    left: 1px;
-    border-top-left-radius: 4px;
-    position: absolute;
-    z-index: 1;
-    width: calc(100% - 15px);
-    background-color: $color-neutral-placeholder;
-    pointer-events: none;
-  }
-  &.select {
-    .el-select {
-      .el-input__inner {
-        border-radius: 8px;
-        padding-left: 12px;
-        font-weight: bold;
-        &:hover {
-          border-color: $color-neutral-inactive;
-        }
-        &::placeholder {
-          color: $color-neutral-tertiary;
-          font-weight: bold;
-        }
-        &:focus {
-          border-color: $color-neutral-inactive;
-        }
-      }
-      .el-select__caret {
-        color: $color-neutral-tertiary;
-      }
-    }
-    &.focused {
-      .el-select {
-        .el-input__inner {
-          color: $color-basic-black;
-          border-color: $color-neutral-inactive;
-          &::placeholder {
-            color: $color-basic-black;
-          }
-        }
-        .el-select__caret {
-          color: $color-basic-black;
-        }
-      }
-    }
-    &.has-value {
-      .el-select {
-        .el-select__caret {
-          color: $color-basic-black;
-        }
-      }
-    }
-    &.disabled {
-      .el-select {
-        .el-input__inner {
-          color: $color-neutral-inactive;
-          border-color: $color-neutral-border;
-          background-color: $color-basic-white;
-          &::placeholder {
-            color: $color-neutral-inactive;
-          }
-        }
-        .el-select__caret {
-          color: $color-neutral-inactive;
-        }
-      }
-    }
-  }
-}
-.el-select-dropdown__item {
-  &.hover {
-    background-color: transparent;
-  }
-  &:hover {
-    background-color: $color-neutral-placeholder;
-  }
-  &.is-disabled {
-    color: $color-neutral-inactive;;
-  }
-}
-.el-select-dropdown.is-multiple .el-select-dropdown__item {
-  > span {
-    padding-left: 16px;
-    vertical-align: top;
-    color: $color-basic-black;
-  }
-  &::before {
-    font-family: "element-icons";
-    content: "\e6da";
-    color: $color-basic-white;
-    border: 1px solid $color-neutral-border;
-    background-color: $color-basic-white;
-    font-size: 16px;
-    font-weight: bold;
-    padding: 1px;
-    border-radius: 4px;
-  }
-  &.selected {
-    font-weight: normal;
-    &.hover {
-      background-color: transparent;
-    }
-    &:hover {
-      background-color: $color-neutral-placeholder;
-    }
-    &::before {
-      color: $color-basic-white;
-      background-color: $color-main-brand;
-      border-color: $color-main-brand;
-    }
-    &::after {
-      content: '';
-    }
-  }
-}
-</style>
diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs.vue
index b2ef4019..48af7487 100644
--- a/src/components/Tab/STabs.vue
+++ b/src/components/Tab/STabs.vue
@@ -97,7 +97,7 @@ export default class STabs extends Vue {
     const cssClasses: Array<string> = []
     if (this.type === TabsType.ROUNDED &&
       ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
-      cssClasses.push('rounded')
+      cssClasses.push('s-rounded')
     }
     return cssClasses
   }
@@ -119,86 +119,3 @@ export default class STabs extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-.s-tabs {
-  width: 100%;
-  .el-tabs__item {
-    font-weight: bold;
-    .el-icon-close {
-      &:before {
-        font-weight: bold;
-      }
-      &:hover {
-        background-color: transparent;
-        color: inherit;
-      }
-    }
-    &:not(.is-active) {
-      color: $color-basic-black;
-    }
-  }
-  .el-tab-pane {
-    color: $color-basic-black;
-  }
-  .el-tabs__nav-wrap::after {
-    background-color: $color-neutral-placeholder;
-  }
-  .el-tabs--card {
-    > .el-tabs__header {
-      border-bottom-color: $color-neutral-hover;
-      .el-tabs__nav {
-        border-color: $color-neutral-hover;
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
-      }
-      .el-tabs__item {
-        border-left-color: $color-neutral-hover;
-      }
-    }
-  }
-  .el-tabs--border-card {
-    border-color: $color-neutral-border;
-    > .el-tabs__header {
-      background-color: $color-neutral-placeholder;
-      border-bottom-color: $color-neutral-border;
-    }
-  }
-  &.rounded {
-    .el-tabs__header {
-      width: fit-content;
-    }
-    .el-tabs__nav-wrap {
-      background-color: $color-neutral-placeholder;
-      border-radius: 8px;
-      height: 32px;
-      padding-top: 2px;
-      padding-left: 2px;
-      padding-right: 2px;
-      &::after, .el-tabs__active-bar {
-        height: 0;
-      }
-      .el-tabs__item {
-        padding: 0 32px;
-        height: 28px;
-        line-height: 28px;
-        &:nth-child(2), &:last-child {
-          padding: 0 32px;
-        }
-        &.is-active {
-          color: $color-basic-black;
-          background-color: #FFFFFF;
-          box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
-          border-radius: 8px;
-        }
-        &: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);
-          border-radius: 8px;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index 2c15c19a..f59493f3 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -360,108 +360,3 @@ export default class STable extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-table--enable-row-hover .el-table__body tr:hover > td {
-  background-color: $color-neutral-hover;
-  border-left: none;
-  border-right: none;
-}
-.el-table__body {
-  tr {
-    &.hover-row {
-      > td,
-      &.current-row > td,
-      &.el-table__row--striped > td,
-      &.el-table__row--striped.current-row > td {
-        background-color: $color-neutral-hover;
-        border-left: none;
-        border-right: none;
-      }
-    }
-  }
-}
-.el-table--border th:first-child .cell,
-.el-table--border td:first-child .cell {
-  padding-left: 13px;
-}
-.el-table thead {
-  color: $color-neutral-tertiary;
-}
-.el-table--group,
-.el-table--border,
-.el-table th.is-leaf,
-.el-table td,
-.el-table--border th {
-  border-color: $color-neutral-placeholder;
-}
-.el-table--group::after,
-.el-table--border::after {
-  background-color: $color-neutral-placeholder;
-}
-.el-table:not(.el-table--border)::before {
-  background-color: $color-basic-white;
-}
-.el-table tr:last-child td {
-  border-bottom-color: $color-basic-white;
-}
-.el-table__header {
-  label.el-checkbox.is-disabled {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-    height: 4px;
-    top: 7px;
-  }
-}
-.el-table {
-  .el-checkbox__inner {
-    height: 20px;
-    width: 20px;
-    border-radius: 4px;
-    &::after {
-      border-width: 2px;
-      height: 10px;
-      left: 6px;
-      width: 5px;
-    }
-  }
-}
-.el-table--medium {
-  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-    top: 5px;
-  }
-  .el-checkbox__inner {
-    height: 16px;
-    width: 16px;
-    &::after {
-      top: 0;
-      left: 4px;
-      height: 8px;
-      width: 4px;
-    }
-  }
-}
-.el-table--small {
-  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-    top: 4px;
-  }
-  .el-checkbox__inner {
-    height: 14px;
-    width: 14px;
-    &::after {
-      top: 1px;
-      left: 4px;
-      height: 6px;
-      width: 2px;
-    }
-  }
-}
-.el-table__header-wrapper tbody td,
-.el-table__footer-wrapper tbody td {
-  background-color: $color-neutral-placeholder;
-}
-</style>
diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
index 96fb3147..1ca47e3a 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn.vue
@@ -184,7 +184,3 @@ export default class STableColumn extends Vue {
   @Prop({ type: Array }) readonly filteredValue!: Array<any>
 }
 </script>
-
-<style lang="scss">
-
-</style>
diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue
index 1cd77a70..7d1ba338 100644
--- a/src/components/Tooltip/STooltip.vue
+++ b/src/components/Tooltip/STooltip.vue
@@ -123,17 +123,3 @@ export default class STooltip extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-tooltip__popper {
-  &.is-dark {
-    background-color: $color-basic-black;
-  }
-  &.is-light {
-    color: $color-basic-black;
-  }
-  border-color: $color-basic-black;
-}
-</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index 24ea6d52..573e5ba2 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,6 @@
 import '../plugins'
 import '../styles'
+import '../styles/index.scss'
 
 import { SApp } from './Layout/App'
 import { SAside } from './Layout/Aside'
diff --git a/src/stories/Breadcrumb/SBreadcrumb.stories.ts b/src/stories/Breadcrumb/SBreadcrumb.stories.ts
index aae615bf..c1ed6b33 100644
--- a/src/stories/Breadcrumb/SBreadcrumb.stories.ts
+++ b/src/stories/Breadcrumb/SBreadcrumb.stories.ts
@@ -2,7 +2,7 @@ import { SBreadcrumb, SBreadcrumbItem } from '../../components'
 
 export default {
   component: SBreadcrumb,
-  title: 'Design System/Breadcrumb'
+  title: 'Design System/Components/Breadcrumb'
 }
 
 export const configurable = () => ({
diff --git a/src/stories/Breadcrumb/SBreadcrumbItem.stories.ts b/src/stories/Breadcrumb/SBreadcrumbItem.stories.ts
index 4ff181ce..022bb31e 100644
--- a/src/stories/Breadcrumb/SBreadcrumbItem.stories.ts
+++ b/src/stories/Breadcrumb/SBreadcrumbItem.stories.ts
@@ -2,7 +2,7 @@ import { SBreadcrumb, SBreadcrumbItem } from '../../components'
 
 export default {
   component: SBreadcrumbItem,
-  title: 'Design System/Breadcrumb/Breadcrumb Item'
+  title: 'Design System/Components/Breadcrumb/Breadcrumb Item'
 }
 
 export const configurable = () => ({
diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts
index fb86361b..ae75bcff 100644
--- a/src/stories/Collapse/SCollapse.stories.ts
+++ b/src/stories/Collapse/SCollapse.stories.ts
@@ -4,7 +4,7 @@ import { SCollapse, SCollapseItem } from '../../components'
 
 export default {
   component: SCollapse,
-  title: 'Design System/Collapse',
+  title: 'Design System/Components/Collapse',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/Collapse/SCollapseItem.stories.ts b/src/stories/Collapse/SCollapseItem.stories.ts
index 9c00c89e..811cf42a 100644
--- a/src/stories/Collapse/SCollapseItem.stories.ts
+++ b/src/stories/Collapse/SCollapseItem.stories.ts
@@ -4,7 +4,7 @@ import { SCollapse, SCollapseItem } from '../../components'
 
 export default {
   component: SCollapseItem,
-  title: 'Design System/Collapse/Collapse Item',
+  title: 'Design System/Components/Collapse/Collapse Item',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/Dropdown/SDropdown.stories.ts b/src/stories/Dropdown/SDropdown.stories.ts
index b28c813b..a4ec4086 100644
--- a/src/stories/Dropdown/SDropdown.stories.ts
+++ b/src/stories/Dropdown/SDropdown.stories.ts
@@ -6,7 +6,7 @@ import { ButtonTypes } from '../../components/Button'
 
 export default {
   component: SDropdown,
-  title: 'Design System/Dropdown',
+  title: 'Design System/Components/Dropdown',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
@@ -81,7 +81,7 @@ export const differentTypes = () => ({
                  </s-dropdown>
                </s-col>
                <s-col :span="12" style="margin-bottom: 20px;"><span>Different button types</span></s-col>
-               <s-col :span="4" v-for="item in buttonTypesData" :key="item.buttonType + 'withoutSplit'" style="height: 56px; margin-bottom: 20px;">
+               <s-col :span="3" v-for="item in buttonTypesData" :key="item.buttonType + 'withoutSplit'" style="height: 56px; margin-bottom: 20px;">
                  <s-dropdown
                    :type="item.type"
                    :button-type="item.buttonType"
@@ -96,7 +96,7 @@ export const differentTypes = () => ({
                  </s-dropdown>
                </s-col>
                <s-col :span="12" style="margin-bottom: 20px;"><span>Different button types with splitted button</span></s-col>
-               <s-col :span="4" v-for="item in buttonTypesData" :key="item.buttonType" style="height: 56px; margin-bottom: 20px;">
+               <s-col :span="3" v-for="item in buttonTypesData" :key="item.buttonType" style="height: 56px; margin-bottom: 20px;">
                  <s-dropdown
                    :type="item.type"
                    split-button
diff --git a/src/stories/Dropdown/SDropdownItem.stories.ts b/src/stories/Dropdown/SDropdownItem.stories.ts
index 62315af4..1d4b952f 100644
--- a/src/stories/Dropdown/SDropdownItem.stories.ts
+++ b/src/stories/Dropdown/SDropdownItem.stories.ts
@@ -4,7 +4,7 @@ import { SDropdown, SDropdownItem } from '../../components'
 
 export default {
   component: SDropdownItem,
-  title: 'Design System/Dropdown/DropdownItem',
+  title: 'Design System/Components/Dropdown/DropdownItem',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/Form/SForm.stories.ts b/src/stories/Form/SForm.stories.ts
index e50f2adb..594c1a63 100644
--- a/src/stories/Form/SForm.stories.ts
+++ b/src/stories/Form/SForm.stories.ts
@@ -5,7 +5,7 @@ import { LabelPosition } from '../../components/Form'
 
 export default {
   component: SForm,
-  title: 'Design System/Form',
+  title: 'Design System/Components/Form',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/Form/SFormItem.stories.ts b/src/stories/Form/SFormItem.stories.ts
index 9eda0eaa..9f258560 100644
--- a/src/stories/Form/SFormItem.stories.ts
+++ b/src/stories/Form/SFormItem.stories.ts
@@ -4,7 +4,7 @@ import { SButton, SForm, SFormItem, SInput } from '../../components'
 
 export default {
   component: SFormItem,
-  title: 'Design System/Form/Form Item',
+  title: 'Design System/Components/Form/Form Item',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts
new file mode 100644
index 00000000..e0e367e3
--- /dev/null
+++ b/src/stories/Intro/Customization.stories.ts
@@ -0,0 +1,71 @@
+import { withKnobs } from '@storybook/addon-knobs'
+
+import { CSSColors } from '../../types'
+import { SRow, SButton, SInput, SCol, SDivider } from '../../components'
+import { differentTypeButtonsData } from '../SButton.stories'
+
+export default {
+  title: 'Design System/Intro/Customization',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const colorsData = Object.values(CSSColors).map(color => ({
+  label: color,
+  value: getComputedStyle(document.documentElement).getPropertyValue(color)
+}))
+export const themeInputsData = [
+  'text',
+  'textarea',
+  'text-file'
+]
+export const configurable = () => ({
+  components: { SRow, SCol, SButton, SInput, SDivider },
+  template: `<div style="flex: 1;">
+             <s-row>
+               <s-col
+                 class="s-flex"
+                 style="align-items: center;"
+                 v-for="color in colors"
+                 :key="color.label"
+                 :span="4"
+               >
+                 <span style="padding-right: 10px;">{{ color.label }}</span>
+                 <el-color-picker size="small" v-model="color.value" @change="(value) => handleColorChange(color.label, value)" />
+               </s-col>
+             </s-row>
+             <s-divider />
+             <s-row>
+               <s-col class="s-flex" :span="12" style="justify-content: space-between;">
+                 <s-button
+                   v-for="button in buttons"
+                   :key="button.type"
+                   size="small"
+                   icon="refresh"
+                   :type="button.type"
+                   :tooltip="button.tooltip"
+                 >
+                   {{ button.label }}
+                 </s-button>
+               </s-col>
+             </s-row>
+             <s-divider />
+             <s-row :gutter="20">
+               <s-col v-for="input in inputs" :key="input" :span="4">
+                 <s-input :placeholder="input" :type="input" />
+               </s-col>
+             </s-row>
+             <s-divider />
+             <h4>You can also check another components, these colors are applied to the whole library</h4>
+             </div>`,
+  data: () => ({
+    colors: colorsData,
+    buttons: differentTypeButtonsData,
+    inputs: themeInputsData
+  }),
+  methods: {
+    handleColorChange: (label: string, color: string) => {
+      document.documentElement.style.setProperty(label, color)
+    }
+  }
+})
diff --git a/src/stories/Intro/Intro.stories.mdx b/src/stories/Intro/Intro.stories.mdx
new file mode 100644
index 00000000..d2fbff7c
--- /dev/null
+++ b/src/stories/Intro/Intro.stories.mdx
@@ -0,0 +1,70 @@
+<Meta title="Design System/Intro/How to use" />
+
+# 1. Add `.npmrc` and `.yarnrc` files to the project
+
+`.npmrc` should looks like:
+
+```
+@soramitsu:registry=https://nexus.iroha.tech/repository/npm-group/
+```
+
+`.yarnrc` should looks like:
+
+```
+"@soramitsu:registry" "https://nexus.iroha.tech/repository/npm-group/"
+```
+
+If you want to run project locally, then you should run the following command:
+```
+npm login --registry="https://nexus.iroha.tech/repository/npm-group/"
+```
+* If this command fails, please contact DevOps team
+
+# 2. Add as a dependency to the project
+
+Add `"@soramitsu/soramitsu-js-ui": "^0.3.4"` in `package.json` file (`"dependencies"` section)
+
+OR RUN
+
+`yarn add "@soramitsu/soramitsu-js-ui"`
+
+# 3. Add components with styles to the project
+
+For instance, `soramitsuUI.ts`:
+
+```
+import Vue from 'vue'
+import SoramitsuElements, { Message, MessageBox, Notification } from '@soramitsu/soramitsu-js-ui'
+import '@soramitsu/soramitsu-js-ui/lib/styles'
+
+Vue.use(SoramitsuElements)
+Vue.prototype.$prompt = MessageBox.prompt
+Vue.prototype.$alert = MessageBox.alert
+Vue.prototype.$message = Message
+Vue.prototype.$notify = Notification
+
+```
+
+# 4. Add all required styles
+
+The previous section added not all required styles. To fix it you should add imports into `scss` file.
+
+For instance, `soramitsu-variables.scss`:
+
+```
+@import '../../node_modules/@soramitsu/soramitsu-js-ui/lib/styles/index';
+```
+
+If you want to customise some colors, borders, paddings, size, etc. - you can override scss variables.
+
+For instance, `soramitsu-variables.scss`:
+
+```
+// Main colors
+$s-color-main-brand: #ED145B;
+// Basic colors
+$s-color-basic-black: #0D0248;
+
+@import '../../node_modules/@soramitsu/soramitsu-js-ui/lib/styles/index';
+
+```
diff --git a/src/stories/Intro/Typography.stories.ts b/src/stories/Intro/Typography.stories.ts
new file mode 100644
index 00000000..70040d3a
--- /dev/null
+++ b/src/stories/Intro/Typography.stories.ts
@@ -0,0 +1,32 @@
+export default {
+  title: 'Design System/Intro/Typography'
+}
+
+export const basic = () => ({
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column; justify-content: space-between; height: 600px;">
+                 <h1>
+                   [h1]
+                   Soramitsu's clients  count on us to help them design and launch their next-generation financial applications, at a lower cost and in record time. Iroha has essential functionality for your asset and identity management needs.
+                 </h1>
+                 <h2>
+                   [h2]
+                   Hyperledger project of Linux Foundation owns that code. Which means that you can create any applications based on Iroha.
+                 </h2>
+                 <h3>
+                   [h3]
+                   Often enough, truly decentralized solutions are not available for payment due to delays in receiving confirmations or due to overcomplexity of the technology.
+                 </h3>
+                 <h4>
+                   [h4]
+                   Hyperledger Iroha is a straightforward DLT, inspired by Japanese Kaizen principle — eliminate excessiveness (muri). Iroha has essential functionality for your asset and identity management needs, at the same time being an efficient and trustworthy byzantine fault-tolerant tool for your enterprise needs.
+                 </h4>
+                 <h5>
+                   [h5]
+                   With the support of multi-signature transactions, it is possible to maintain a fund by many managers. The fund assets should be held at one account. Its signatories should be fund managers, who are dealing with investments and portfolio distributions.
+                 </h5>
+                 <h6>
+                   [h6]
+                   Sora is a decentralized economy that provides its citizens various opportunities to decide which projects and ideas should be supported and which ones should not - that way everyone benefits from making the economy stronger and the world - better.
+                 </h6>
+               </div>`
+})
diff --git a/src/stories/Menu/SMenu.stories.ts b/src/stories/Menu/SMenu.stories.ts
index e495fa32..e56016a9 100644
--- a/src/stories/Menu/SMenu.stories.ts
+++ b/src/stories/Menu/SMenu.stories.ts
@@ -2,7 +2,7 @@ import { SAside, SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from '../../compon
 
 export default {
   component: SMenu,
-  title: 'Design System/Menu',
+  title: 'Design System/Components/Menu',
   excludeStories: /.*Data$/
 }
 
diff --git a/src/stories/Menu/SMenuItem.stories.ts b/src/stories/Menu/SMenuItem.stories.ts
index 06ed9368..54a22282 100644
--- a/src/stories/Menu/SMenuItem.stories.ts
+++ b/src/stories/Menu/SMenuItem.stories.ts
@@ -2,7 +2,7 @@ import { SMenu, SMenuItem } from '../../components'
 
 export default {
   component: SMenuItem,
-  title: 'Design System/Menu/MenuItem'
+  title: 'Design System/Components/Menu/MenuItem'
 }
 
 export const defaultUsage = () => ({
diff --git a/src/stories/Menu/SMenuItemGroup.stories.ts b/src/stories/Menu/SMenuItemGroup.stories.ts
index 27f3364b..83382ee3 100644
--- a/src/stories/Menu/SMenuItemGroup.stories.ts
+++ b/src/stories/Menu/SMenuItemGroup.stories.ts
@@ -2,7 +2,7 @@ import { SAside, SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from '../../compon
 
 export default {
   component: SMenuItemGroup,
-  title: 'Design System/Menu/MenuItemGroup',
+  title: 'Design System/Components/Menu/MenuItemGroup',
   excludeStories: /.*Data$/
 }
 
diff --git a/src/stories/Menu/SSubmenu.stories.ts b/src/stories/Menu/SSubmenu.stories.ts
index 1b1ec25b..fa36aa2b 100644
--- a/src/stories/Menu/SSubmenu.stories.ts
+++ b/src/stories/Menu/SSubmenu.stories.ts
@@ -2,7 +2,7 @@ import { SAside, SMenu, SMenuItem, SSubmenu } from '../../components'
 
 export default {
   component: SSubmenu,
-  title: 'Design System/Menu/Submenu'
+  title: 'Design System/Components/Menu/Submenu'
 }
 
 export const defaultUsage = () => ({
diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts
index 8a209eae..980a010e 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -5,7 +5,7 @@ import { ButtonSize, ButtonTypes } from '../components/Button'
 
 export default {
   component: SButton,
-  title: 'Design System/Button',
+  title: 'Design System/Components/Button',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
@@ -19,6 +19,7 @@ export const configurable = () => ({
                :icon="type === 'action' ? 'back' : ''"
                :type="type"
                :size="size"
+               :rounded="rounded"
                :alternative="alternative"
                @click="handleClick"
              >
@@ -37,6 +38,9 @@ export const configurable = () => ({
     size: {
       default: select('Size', Object.values(ButtonSize), ButtonSize.BIG)
     },
+    rounded: {
+      default: boolean('Rounded', false)
+    },
     alternative: {
       default: boolean('Alternative', false)
     },
@@ -49,7 +53,7 @@ export const configurable = () => ({
   }
 })
 
-export const differentTypesData = Object.values(ButtonTypes).map(type => {
+export const differentTypeButtonsData = Object.values(ButtonTypes).map(type => {
   const label = type[0].toUpperCase() + type.slice(1)
   const data = { type } as any
   if (type === ButtonTypes.ACTION) {
@@ -62,7 +66,7 @@ export const differentTypesData = Object.values(ButtonTypes).map(type => {
 })
 export const withDifferentTypes = () => ({
   components: { SButton, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-button
                  v-for="item in items"
                  :key="item.type"
@@ -75,7 +79,7 @@ export const withDifferentTypes = () => ({
              </s-row>`,
   props: {
     items: {
-      default: () => differentTypesData
+      default: () => differentTypeButtonsData
     }
   }
 })
@@ -84,7 +88,7 @@ export const differentSizeData = Object.values(ButtonSize).map(size =>
   ({ size, label: size[0].toUpperCase() + size.slice(1) }))
 export const withDifferentSize = () => ({
   components: { SButton, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-button
                  v-for="item in items"
                  :key="item.size"
@@ -102,7 +106,7 @@ export const withDifferentSize = () => ({
 
 export const disabled = () => ({
   components: { SButton, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-button
                  v-for="item in items"
                  :key="item.type"
@@ -116,14 +120,14 @@ export const disabled = () => ({
              </s-row>`,
   props: {
     items: {
-      default: () => differentTypesData
+      default: () => differentTypeButtonsData
     }
   }
 })
 
 export const loading = () => ({
   components: { SButton, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-button
                  v-for="item in items"
                  :key="item.type"
@@ -137,7 +141,7 @@ export const loading = () => ({
              </s-row>`,
   props: {
     items: {
-      default: () => differentTypesData
+      default: () => differentTypeButtonsData
     }
   }
 })
@@ -168,14 +172,14 @@ export const withIcon = () => ({
       default: () => differentSizeData
     },
     differentTypesData: {
-      default: () => differentTypesData
+      default: () => differentTypeButtonsData
     }
   }
 })
 
 export const buttonGroup = () => ({
   components: { SButton, SButtonGroup, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-button-group>
                  <s-button type="primary">Append</s-button>
                  <s-button type="delete">Remove</s-button>
diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts
index 3bdff199..5146bc9b 100644
--- a/src/stories/SCard.stories.ts
+++ b/src/stories/SCard.stories.ts
@@ -5,16 +5,16 @@ import { CardShadow } from '../components/Card'
 
 export default {
   component: SCard,
-  title: 'Design System/Card',
+  title: 'Design System/Components/Card',
   decorators: [withKnobs]
 }
 
 export const configurable = () => ({
   components: { SCard, SRow, SDropdown, SDropdownItem },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-card style="width: 80%;" :shadow="shadow" :clickable="clickable" @click="handleClick">
                  <template slot="header">
-                   <div class="flex" style="justify-content: space-between; padding-right: 20px;">
+                   <div class="s-flex" style="justify-content: space-between; padding-right: 20px;">
                      <span>{{ header }}</span>
                      <s-dropdown type="ellipsis">
                        Menu
diff --git a/src/stories/SCheckbox.stories.ts b/src/stories/SCheckbox.stories.ts
index 069209e7..517f77c1 100644
--- a/src/stories/SCheckbox.stories.ts
+++ b/src/stories/SCheckbox.stories.ts
@@ -5,14 +5,14 @@ import { CheckboxSize } from '../components/Checkbox'
 
 export default {
   component: SCheckbox,
-  title: 'Design System/Checkbox',
+  title: 'Design System/Components/Checkbox',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
 
 export const configurable = () => ({
   components: { SCheckbox },
-  template: `<div class="flex" style="flex: 1; flex-direction: column;">
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
                <s-checkbox
                  v-model="vModelValue"
                  :disabled="disabled"
diff --git a/src/stories/DatePicker.stories.ts b/src/stories/SDatePicker.stories.ts
similarity index 98%
rename from src/stories/DatePicker.stories.ts
rename to src/stories/SDatePicker.stories.ts
index f59c5b28..428593f3 100644
--- a/src/stories/DatePicker.stories.ts
+++ b/src/stories/SDatePicker.stories.ts
@@ -5,14 +5,14 @@ import { PickerAlignment, PickerTypes, InputTypes } from '../components/DatePick
 
 export default {
   component: SDatePicker,
-  title: 'Design System/Date Picker',
+  title: 'Design System/Components/Date Picker',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
 
 export const configurable = () => ({
   components: { SDatePicker },
-  template: `<div class="flex" style="flex: 1; flex-direction: column;">
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
                <s-date-picker
                  v-model="vModelValue"
                  :unlink-panels="unlinkPanels"
diff --git a/src/stories/SDialog.stories.ts b/src/stories/SDialog.stories.ts
index de33d4b5..9de70626 100644
--- a/src/stories/SDialog.stories.ts
+++ b/src/stories/SDialog.stories.ts
@@ -4,14 +4,14 @@ import { SDialog, SRow, SButton } from '../components'
 
 export default {
   component: SDialog,
-  title: 'Design System/Dialog',
+  title: 'Design System/Components/Dialog',
   decorators: [withKnobs]
 }
 
 export const configurable = () => ({
   components: { SDialog, SRow, SButton },
   template: `<s-row
-               class="flex"
+               class="s-flex"
                style="flex: 1; justify-content: space-between; align-items: center; height: 400px;"
              >
                <s-button size="medium" @click="visible = true">Open Dialog</s-button>
diff --git a/src/stories/SDivider.stories.ts b/src/stories/SDivider.stories.ts
index 1c43f88a..a18abf33 100644
--- a/src/stories/SDivider.stories.ts
+++ b/src/stories/SDivider.stories.ts
@@ -5,13 +5,13 @@ import { DividerDirection, ContentPosition } from '../components/Divider/consts'
 
 export default {
   component: SDivider,
-  title: 'Design System/Divider',
+  title: 'Design System/Components/Divider',
   decorators: [withKnobs]
 }
 
 export const configurable = () => ({
   components: { SRow, SDivider },
-  template: `<s-row class="flex" style="flex: 1; flex-direction: column;">
+  template: `<s-row class="s-flex" style="flex: 1; flex-direction: column;">
                <span>First text paragraph</span>
                <s-divider
                  :style="direction === 'vertical' ? { height: '56px' } : {}"
diff --git a/src/stories/SIcon.stories.ts b/src/stories/SIcon.stories.ts
index c9f13cc1..67c75152 100644
--- a/src/stories/SIcon.stories.ts
+++ b/src/stories/SIcon.stories.ts
@@ -5,7 +5,7 @@ import { Icons } from '../components/Icon'
 
 export default {
   component: SIcon,
-  title: 'Design System/Icon',
+  title: 'Design System/Components/Icon',
   decorators: [withKnobs]
 }
 
@@ -34,7 +34,7 @@ export const allIcons = () => ({
                    :span="3"
                    v-for="icon in icons"
                    :key="icon"
-                   class="flex"
+                   class="s-flex"
                    style="flex-direction: column; padding-bottom: 20px;"
                  >
                    <s-icon :name="icon" :size="18" />
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index e484d588..88cf7a08 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -5,7 +5,7 @@ import { InputType } from '../components/Input'
 
 export default {
   component: SInput,
-  title: 'Design System/Input',
+  title: 'Design System/Components/Input',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
@@ -110,7 +110,7 @@ export const focused = () => ({
                  style="padding-bottom: 20px;"
                >
                  <s-input
-                   class="focused"
+                   class="s-focused"
                    v-model="item.model"
                    :type="item.type"
                    :placeholder="item.placeholder"
@@ -126,7 +126,7 @@ export const focused = () => ({
 
 export const password = () => ({
   components: { SInput, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-input
                  v-model="input"
                  placeholder="Password"
@@ -140,7 +140,7 @@ export const password = () => ({
 
 export const withTextLimit = () => ({
   components: { SInput, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-input
                  v-model="input"
                  placeholder="Limited text"
@@ -155,7 +155,7 @@ export const withTextLimit = () => ({
 
 export const textFileInput = () => ({
   components: { SInput },
-  template: `<div class="flex" style="flex: 1; flex-direction: column;">
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
                <s-input
                  v-model="vModelValue"
                  type="text-file"
diff --git a/src/stories/SJsonInput.stories.ts b/src/stories/SJsonInput.stories.ts
index 2910d1d9..68adc1e6 100644
--- a/src/stories/SJsonInput.stories.ts
+++ b/src/stories/SJsonInput.stories.ts
@@ -4,7 +4,7 @@ import { SJsonInput, SRow } from '../components'
 
 export default {
   component: SJsonInput,
-  title: 'Design System/JSON Input',
+  title: 'Design System/Components/JSON Input',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
@@ -23,7 +23,7 @@ export const jsonData = {
 }
 export const configurable = () => ({
   components: { SJsonInput, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-json-input
                  v-model="json"
                  :height="height"
diff --git a/src/stories/SPagination.stories.ts b/src/stories/SPagination.stories.ts
index 95b908b4..85acfe7c 100644
--- a/src/stories/SPagination.stories.ts
+++ b/src/stories/SPagination.stories.ts
@@ -4,13 +4,13 @@ import { SPagination, SRow } from '../components'
 
 export default {
   component: SPagination,
-  title: 'Design System/Pagination',
+  title: 'Design System/Components/Pagination',
   decorators: [withKnobs]
 }
 
 export const configurable = () => ({
   components: { SRow, SPagination },
-  template: `<s-row class="flex" style="flex: 1; flex-direction: column;">
+  template: `<s-row class="s-flex" style="flex: 1; flex-direction: column;">
                <s-pagination
                  :total="total"
                  :layout="layout"
@@ -59,21 +59,21 @@ export const configurable = () => ({
 
 export const small = () => ({
   components: { SRow, SPagination },
-  template: `<s-row class="flex" style="flex: 1; flex-direction: column;">
+  template: `<s-row class="s-flex" style="flex: 1; flex-direction: column;">
                <s-pagination :total="400" small></s-pagination>
              </s-row>`
 })
 
 export const withBackground = () => ({
   components: { SRow, SPagination },
-  template: `<s-row class="flex" style="flex: 1; flex-direction: column;">
+  template: `<s-row class="s-flex" style="flex: 1; flex-direction: column;">
                <s-pagination :total="400" background></s-pagination>
              </s-row>`
 })
 
 export const disabled = () => ({
   components: { SRow, SPagination },
-  template: `<s-row class="flex" style="flex: 1; flex-direction: column;">
+  template: `<s-row class="s-flex" style="flex: 1; flex-direction: column;">
                <s-pagination :total="400" disabled></s-pagination>
                <s-pagination :total="400" small disabled></s-pagination>
                <s-pagination :total="400" background disabled></s-pagination>
diff --git a/src/stories/Radio/SRadio.stories.ts b/src/stories/SRadio.stories.ts
similarity index 86%
rename from src/stories/Radio/SRadio.stories.ts
rename to src/stories/SRadio.stories.ts
index 26d2b470..0b693797 100644
--- a/src/stories/Radio/SRadio.stories.ts
+++ b/src/stories/SRadio.stories.ts
@@ -1,11 +1,11 @@
 import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
-import { SRadio, SRow, SCol } from '../../components'
-import { RadioSize } from '../../components/Radio'
+import { SRadio, SRow, SCol } from '../components'
+import { RadioSize } from '../components/Radio'
 
 export default {
   component: SRadio,
-  title: 'Design System/Radio',
+  title: 'Design System/Components/Radio',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
@@ -54,7 +54,7 @@ export const configurable = () => ({
 
 export const disabled = () => ({
   components: { SRadio, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-radio
                  v-for="item in items"
                  :key="item.label"
@@ -73,7 +73,7 @@ export const disabled = () => ({
 
 export const withBorders = () => ({
   components: { SRadio, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-radio
                  v-for="item in items"
                  :key="item.label"
diff --git a/src/stories/STooltip.stories.ts b/src/stories/STooltip.stories.ts
index 686d578d..a75c75ed 100644
--- a/src/stories/STooltip.stories.ts
+++ b/src/stories/STooltip.stories.ts
@@ -5,14 +5,14 @@ import { TooltipPlacement, TooltipTheme } from '../components/Tooltip'
 
 export default {
   component: STooltip,
-  title: 'Design System/Tooltip',
+  title: 'Design System/Components/Tooltip',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
 
 export const configurable = () => ({
   components: { STooltip, SButton, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-tooltip
                  :theme="theme"
                  v-model="model"
diff --git a/src/stories/ScrollSections/SScrollSectionItem.stories.ts b/src/stories/ScrollSections/SScrollSectionItem.stories.ts
index db980f2c..104163a6 100644
--- a/src/stories/ScrollSections/SScrollSectionItem.stories.ts
+++ b/src/stories/ScrollSections/SScrollSectionItem.stories.ts
@@ -4,7 +4,7 @@ import { SScrollSectionItem, SScrollSections } from '../../components'
 
 export default {
   component: SScrollSectionItem,
-  title: 'Design System/Scroll Sections/Scroll Section Item',
+  title: 'Design System/Components/Scroll Sections/Scroll Section Item',
   decorators: [StoryRouter({}, { initialEntry: '/' })]
 }
 
diff --git a/src/stories/ScrollSections/SScrollSections.stories.ts b/src/stories/ScrollSections/SScrollSections.stories.ts
index 1607c1c8..8eae751b 100644
--- a/src/stories/ScrollSections/SScrollSections.stories.ts
+++ b/src/stories/ScrollSections/SScrollSections.stories.ts
@@ -5,7 +5,7 @@ import { SScrollSectionItem, SScrollSections } from '../../components'
 
 export default {
   component: SScrollSections,
-  title: 'Design System/Scroll Sections',
+  title: 'Design System/Components/Scroll Sections',
   decorators: [StoryRouter({}, { initialEntry: '/' }), withKnobs]
 }
 
diff --git a/src/stories/Select/SOption.stories.ts b/src/stories/Select/SOption.stories.ts
index 79770041..00fc47de 100644
--- a/src/stories/Select/SOption.stories.ts
+++ b/src/stories/Select/SOption.stories.ts
@@ -4,7 +4,7 @@ import { SSelect, SRow, SCol, SOption } from '../../components'
 
 export default {
   component: SOption,
-  title: 'Design System/Select/Option',
+  title: 'Design System/Components/Select/Option',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/Select/SOptionGroup.stories.ts b/src/stories/Select/SOptionGroup.stories.ts
index 49c9a274..da0218c2 100644
--- a/src/stories/Select/SOptionGroup.stories.ts
+++ b/src/stories/Select/SOptionGroup.stories.ts
@@ -4,7 +4,7 @@ import { SSelect, SRow, SCol, SOption, SOptionGroup } from '../../components'
 
 export default {
   component: SOptionGroup,
-  title: 'Design System/Select/Option Group',
+  title: 'Design System/Components/Select/Option Group',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/Select/SSelect.stories.ts b/src/stories/Select/SSelect.stories.ts
index 0fb66cba..94955808 100644
--- a/src/stories/Select/SSelect.stories.ts
+++ b/src/stories/Select/SSelect.stories.ts
@@ -5,7 +5,7 @@ import { InputTypes } from '../../components/Select'
 
 export default {
   component: SSelect,
-  title: 'Design System/Select',
+  title: 'Design System/Components/Select',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/Tab/STabs.stories.ts b/src/stories/Tab/STabs.stories.ts
index 12a66950..ba750b3e 100644
--- a/src/stories/Tab/STabs.stories.ts
+++ b/src/stories/Tab/STabs.stories.ts
@@ -5,7 +5,7 @@ import { TabsPosition, TabsType } from '../../components/Tab'
 
 export default {
   component: STabs,
-  title: 'Design System/Tabs',
+  title: 'Design System/Components/Tabs',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
index 23a39ef9..4814232f 100644
--- a/src/stories/Table/STable.stories.ts
+++ b/src/stories/Table/STable.stories.ts
@@ -5,7 +5,7 @@ import { TableSize } from '../../components/Table'
 
 export default {
   component: STable,
-  title: 'Design System/Table',
+  title: 'Design System/Components/Table',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/Table/STableColumn.stories.ts b/src/stories/Table/STableColumn.stories.ts
index 1ec6025b..33f28c88 100644
--- a/src/stories/Table/STableColumn.stories.ts
+++ b/src/stories/Table/STableColumn.stories.ts
@@ -7,7 +7,7 @@ import { tableData } from './STable.stories'
 
 export default {
   component: STableColumn,
-  title: 'Design System/Table/Table Column',
+  title: 'Design System/Components/Table/Table Column',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/styles/breadcrumbs.scss b/src/styles/breadcrumbs.scss
new file mode 100644
index 00000000..04c87bfa
--- /dev/null
+++ b/src/styles/breadcrumbs.scss
@@ -0,0 +1,27 @@
+@import "./variables";
+
+.el-breadcrumb__separator {
+  color: var(--s-color-neutral-secondary);
+  font-weight: normal;
+}
+.el-breadcrumb__inner {
+  color: var(--s-color-neutral-secondary);
+  &.is-link {
+    color: var(--s-color-neutral-secondary);
+    font-weight: normal;
+    &:hover {
+      color: var(--s-color-main-brand);
+    }
+  }
+  a:hover {
+    color: var(--s-color-main-brand);
+  }
+}
+.el-breadcrumb__item:last-child {
+  pointer-events: none;
+  .el-breadcrumb__inner {
+    &, &:hover, & a, & a:hover {
+      color: var(--s-color-basic-black);
+    }
+  }
+}
diff --git a/src/styles/button.scss b/src/styles/button.scss
new file mode 100644
index 00000000..7687da51
--- /dev/null
+++ b/src/styles/button.scss
@@ -0,0 +1,154 @@
+@import "./variables";
+
+.s-loading {
+  padding: 12px 17.5px;
+  i {
+    position: absolute;
+    left: var(--s-button-loading-left);
+  }
+  &.s-small {
+    padding: 9px 15px;
+    i {
+      left: calc(var(--s-button-loading-left) + 2px);
+    }
+  }
+  > :not(i) {
+    color: transparent;
+  }
+}
+.s-primary {
+  background-color: var(--s-color-main-brand);
+  border-color: var(--s-color-main-brand);
+  &:hover, &:active, &:focus {
+    background-color: var(--s-color-main-hover);
+    border-color: var(--s-color-main-hover);
+  }
+  &:disabled, &:disabled:hover {
+    background-color: var(--s-color-main-inactive);
+    border-color: var(--s-color-main-inactive);
+  }
+}
+.s-secondary {
+  background-color: var(--s-color-basic-white);
+  color: var(--s-color-basic-black);
+  border-color: var(--s-color-neutral-border);
+  &:hover, &:active, &:focus {
+    color: var(--s-color-main-brand);
+    background-color: var(--s-color-basic-white);
+    border-color: var(--s-color-main-brand);
+  }
+  &:disabled, &:disabled:hover {
+    color: var(--s-color-neutral-inactive);
+    border-color: var(--s-color-neutral-border);
+  }
+  &.s-alternative {
+    &:hover, &:active, &:focus {
+      color: var(--s-color-basic-black);
+      background-color: var(--s-color-neutral-hover);
+      border-color: var(--s-color-neutral-hover);
+    }
+    &:disabled, &:disabled:hover {
+      color: var(--s-color-neutral-inactive);
+      border-color: var(--s-color-neutral-border);
+      background-color: var(--s-color-basic-white);
+    }
+  }
+}
+.s-link {
+  color: var(--s-color-basic-black);
+  border: none;
+  background-color: transparent;
+  &:hover, &:active, &:focus {
+    color: var(--s-color-main-brand);
+    background-color: transparent;
+  }
+  &:disabled, &:disabled:hover {
+    color: var(--s-color-neutral-inactive);
+  }
+}
+.s-tertiary {
+  color: var(--s-color-basic-black);
+  border-color: var(--s-color-neutral-placeholder);
+  background-color: var(--s-color-neutral-placeholder);
+  &:hover, &:active, &:focus {
+    color: var(--s-color-main-brand);
+    background-color: var(--s-color-neutral-placeholder);
+    border-color: var(--s-color-neutral-placeholder);
+  }
+  &:disabled, &:disabled:hover {
+    color: var(--s-color-neutral-inactive);
+    background-color: var(--s-color-neutral-placeholder);
+    border-color: var(--s-color-neutral-placeholder);
+  }
+}
+.s-action {
+  &.s-big {
+    width: $s-size-big;
+    padding: 12px;
+    i {
+      font-size: 20px;
+    }
+  }
+  &.s-medium {
+    width: $s-size-medium;
+    padding: 10px;
+    i {
+      font-size: 18px;
+    }
+  }
+  &.s-small {
+    width: $s-size-small;
+    padding: 9px;
+    i {
+      font-size: 16px;
+      margin-left: -2px;
+      margin-top: -2px;
+    }
+  }
+  color: var(--s-color-basic-black);
+  background-color: var(--s-color-neutral-placeholder);
+  border-color: var(--s-color-neutral-placeholder);
+  border-radius: 8px;
+  &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+    color: var(--s-color-basic-black);
+    background-color: var(--s-color-neutral-hover);
+    border-color: var(--s-color-neutral-hover);
+  }
+  &:disabled, &:disabled:hover {
+    color: var(--s-color-neutral-inactive);
+  }
+  &.s-alternative {
+    background-color: var(--s-color-basic-white);
+    border-color: var(--s-color-neutral-border);
+    &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+      color: var(--s-color-basic-black);
+      background-color: var(--s-color-neutral-placeholder);
+      border-color: var(--s-color-neutral-placeholder);
+    }
+    &:disabled, &:disabled:hover {
+      color: var(--s-color-neutral-inactive);
+    }
+  }
+}
+button {
+  > span > i {
+    &[class^=s-icon-], &[class^=el-icon-] {
+      display: inline-block;
+      color: inherit;
+    }
+  }
+  &:not(.s-action) > span > i {
+    &[class^=s-icon-], &[class^=el-icon-] {
+      margin-right: 6px;
+    }
+  }
+}
+.el-button-group .el-button--plain {
+  color: var(--s-color-basic-black);
+  border-color: var(--s-color-neutral-border);
+  &:hover, &:active, &:focus {
+    color: var(--s-color-main-brand);
+    background-color: var(--s-color-basic-white);
+    border-color: var(--s-color-main-brand);
+  }
+}
diff --git a/src/styles/card.scss b/src/styles/card.scss
new file mode 100644
index 00000000..ad6fcd9b
--- /dev/null
+++ b/src/styles/card.scss
@@ -0,0 +1,21 @@
+@import "./variables";
+
+.s-card {
+  color: var(--s-color-basic-black);
+  border-radius: 8px;
+  border-color: var(--s-color-neutral-border);
+  &.s-clickable {
+    cursor: pointer;
+  }
+  &:hover, &:focus {
+    border-color: transparent;
+  }
+  .el-card__header {
+    border-bottom-color: transparent;
+    padding-bottom: 0;
+    text-align: left;
+  }
+  .el-card__body {
+    padding: 18px 20px;
+  }
+}
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
new file mode 100644
index 00000000..84fcd705
--- /dev/null
+++ b/src/styles/checkbox.scss
@@ -0,0 +1,108 @@
+@import "./variables";
+@import "./common";
+
+.el-checkbox {
+  color: var(--s-color-basic-black);
+  &.is-bordered {
+    &, &.is-disabled {
+      border-color: var(--s-color-neutral-border);
+    }
+    &.is-checked {
+      border-color: var(--s-color-main-brand);
+    }
+  }
+  &.s-big {
+    @extend .s-big;
+    padding: 17px 0 9px 0;
+    &.is-bordered {
+      padding: 17px 20px 9px 15px;
+    }
+  }
+  &.s-medium {
+    @extend .s-medium;
+    &, &.is-bordered {
+      padding: 9px 15px 7px 10px;
+      .el-checkbox__inner {
+        height: 16px;
+        width: 16px;
+        &::after {
+          top: 0;
+          left: 4px;
+          height: 8px;
+          width: 4px;
+        }
+      }
+    }
+    & {
+      padding: 9px 0 7px 0;
+    }
+  }
+  &.s-small {
+    @extend .s-small;
+    border-radius: 4px;
+    .el-checkbox__label {
+      font-size: 12px;
+    }
+    &, &.is-bordered {
+      padding: 5px 15px 5px 10px;
+      .el-checkbox__inner {
+        height: 14px;
+        width: 14px;
+        &::after {
+          top: 1px;
+          left: 4px;
+          height: 6px;
+          width: 2px;
+        }
+      }
+    }
+    & {
+      padding: 5px 0;
+    }
+  }
+}
+.el-checkbox__inner {
+  border-color: var(--s-color-neutral-inactive);
+  border-radius: 4px;
+  width: 20px;
+  height: 20px;
+  &::after {
+    border-width: 2px;
+    height: 10px;
+    left: 6px;
+    width: 5px;
+  }
+  &:hover {
+    border-color: var(--s-color-main-brand);
+  }
+}
+.el-checkbox__input {
+  &.is-disabled {
+    .el-checkbox__inner {
+      background-color: var(--s-color-neutral-placeholder);
+      border-color: var(--s-color-neutral-border);
+    }
+    & + span.el-checkbox__label {
+      color: var(--s-color-neutral-inactive);
+    }
+  }
+  &.is-focus > .el-checkbox__inner {
+    border-color: var(--s-color-main-brand);
+  }
+  &.is-checked {
+    > .el-checkbox__inner {
+      background-color: var(--s-color-main-brand);
+      border-color: var(--s-color-main-brand);
+    }
+    &.is-disabled > .el-checkbox__inner {
+      background-color: var(--s-color-neutral-placeholder);
+      border-color: var(--s-color-neutral-border);
+      &::after {
+        border-color: var(--s-color-neutral-inactive);
+      }
+    }
+    & + .el-checkbox__label {
+      color: var(--s-color-basic-black);
+    }
+  }
+}
diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss
new file mode 100644
index 00000000..79d5386e
--- /dev/null
+++ b/src/styles/collapse.scss
@@ -0,0 +1,53 @@
+@import "./variables";
+@import "./icons";
+
+.el-collapse {
+  border-top-color: #F5F5F5; // TODO: ask about possibility to override it
+  border-bottom-color: #F5F5F5;
+}
+.s-without-border {
+  > div > .el-collapse-item__header,
+  > .el-collapse-item__wrap {
+    border: none;
+  }
+}
+.s-without-padding > .el-collapse-item__wrap > .el-collapse-item__content {
+  padding-bottom: 0;
+}
+.el-collapse-item__ {
+  &wrap {
+    border-bottom-color: #F5F5F5;
+  }
+  &header {
+    color: var(--s-color-basic-black);
+    border-bottom-color: #F5F5F5;
+    &.is-active {
+      border-bottom-color: transparent;
+    }
+    .el-icon-arrow-right {
+      font-family: 'soramitsu-icons' !important;
+      @extend .s-icon-chevron-top;
+      font-size: 16px;
+      padding: 8px;
+      width: 32px;
+      height: 32px;
+      background-color: var(--s-color-neutral-placeholder);
+      border-radius: 50%;
+      &.is-active {
+        transform: rotate(180deg);
+      }
+      &:hover, &:focus {
+        background-color: var(--s-color-neutral-hover);
+      }
+    }
+  }
+  &content {
+    color: var(--s-color-basic-black);
+  }
+}
+.el-collapse-item.is-disabled .el-collapse-item__header {
+  color: var(--s-color-neutral-inactive);
+  .el-collapse-item__arrow.el-icon-arrow-right {
+    background-color: var(--s-color-neutral-hover);
+  }
+}
diff --git a/src/styles/common.scss b/src/styles/common.scss
index dd3796c6..3e7919a5 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,8 +1,8 @@
-@import "./variables.scss";
+@import "./variables";
 
 [class^="el-"]:not(i):not([class*='el-icon']),
 [class*="el-"]:not(i):not([class*='el-icon']) {
-  font-family: 'Sora', sans-serif !important;
+  font-family: $font-family-default;
 }
 
 html {
@@ -14,24 +14,61 @@ html {
   margin: 0;
 }
 
-.flex {
+/* Typography */
+h1 {
+  font-family: $font-family-default;
+  font-weight: normal;
+  font-size: 36px;
+}
+
+h2 {
+  font-family: $font-family-default;
+  font-weight: normal;
+  font-size: 30px;
+}
+
+h3 {
+  font-family: $font-family-default;
+  font-weight: normal;
+  font-size: 24px;
+}
+
+h4 {
+  font-family: $font-family-default;
+  font-weight: normal;
+  font-size: 18px;
+}
+
+h5 {
+  font-family: $font-family-default;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+h6 {
+  font-family: $font-family-default;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.s-flex {
   display: flex;
 }
 
-.bold {
+.s-bold {
   font-weight: bold;
 }
 
-.big {
-  height: $size-big;
+.s-big {
+  height: $s-size-big;
 }
 
-.medium {
-  height: $size-medium;
+.s-medium {
+  height: $s-size-medium;
 }
 
-.small {
-  height: $size-small;
+.s-small {
+  height: $s-size-small;
 }
 
 button > span {
@@ -70,25 +107,25 @@ button > span {
 .el-message-box {
   .el-message-box__header {
     .el-message-box__title {
-      color: $color-basic-black;
+      color: var(--s-color-basic-black);
       font-size: 16px;
     }
   }
   .el-message-box__btns {
     button.el-button.el-button--default.el-button--small {
-      height: $size-medium;
+      height: $s-size-medium;
       font-size: 14px;
       border-radius: 4px;
       &:hover, &:active, &:focus {
-        color: $color-main-brand;
-        background-color: $color-basic-white;
-        border-color: $color-main-brand;
+        color: var(--s-color-main-brand);
+        background-color: var(--s-color-basic-white);
+        border-color: var(--s-color-main-brand);
       }
       &.el-button--primary {
         &:hover, &:active, &:focus {
-          color: $color-basic-white;
-          background-color: $color-main-hover;
-          border-color: $color-main-hover;
+          color: var(--s-color-basic-white);
+          background-color: var(--s-color-main-hover);
+          border-color: var(--s-color-main-hover);
         }
       }
     }
diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
new file mode 100644
index 00000000..451d93b5
--- /dev/null
+++ b/src/styles/datepicker.scss
@@ -0,0 +1,273 @@
+@import "./variables";
+
+.s-date-picker {
+  font-family: $font-family-default;
+  width: 100%;
+  position: relative;
+  .el-date-editor {
+    width: 100%;
+    &.el-input, &.el-input__inner {
+      width: 100%;
+    }
+    .el-range-separator {
+      color: var(--s-color-neutral-tertiary);
+    }
+    .el-input__inner, .el-range-input {
+      &::placeholder {
+        color: var(--s-color-neutral-secondary);
+        opacity: 1; // Firefox
+      }
+    }
+    &.is-active {
+      border-color: var(--s-color-neutral-border);
+    }
+  }
+  &.s-has-value {
+    .el-date-editor .el-range-separator {
+      color: var(--s-color-basic-black);
+    }
+    .el-range-input {
+      color: var(--s-color-basic-black);
+    }
+  }
+  &.s-input-type {
+    min-height: $s-size-big;
+    .el-input__inner {
+      height: $s-size-big;
+      padding: 0 15px;
+      border: 1px solid var(--s-color-neutral-placeholder);
+      background-color: var(--s-color-neutral-placeholder);
+    }
+    &:hover {
+      .el-input__inner {
+        border-color: var(--s-color-neutral-hover);
+      }
+      .el-input__inner, .s-placeholder {
+        background-color: var(--s-color-neutral-hover);
+      }
+    }
+    .s-placeholder + .el-date-editor {
+      > .el-input__inner {
+        padding-top: 12px;
+      }
+      .el-input__validateIcon {
+        padding-top: 11px;
+      }
+    }
+    &.s-focused {
+      .el-input__inner {
+        border-color: var(--s-color-neutral-border);
+      }
+      .el-input__inner, .s-placeholder {
+        background-color: var(--s-color-basic-white);
+      }
+    }
+    &.s-disabled {
+      .el-input__inner {
+        border-color: var(--s-color-neutral-border);
+      }
+      .el-input__inner, .s-placeholder {
+        color: var(--s-color-neutral-secondary);
+        background-color: var(--s-color-neutral-placeholder);
+      }
+    }
+  }
+  .s-placeholder {
+    // TODO: add default animation from material-ui
+    color: var(--s-color-neutral-secondary);
+    text-align: left;
+    font-size: 12px;
+    padding: 0 15px;
+    padding-top: 5px;
+    top: 1px;
+    left: 1px;
+    border-top-left-radius: 4px;
+    position: absolute;
+    z-index: 1;
+    width: calc(100% - 15px);
+    background-color: var(--s-color-neutral-placeholder);
+    pointer-events: none;
+  }
+  &.s-select-type {
+    .el-date-editor {
+      .el-input__inner, .el-range-input, .el-range-separator {
+        font-weight: bold;
+      }
+      &.el-input__inner, & .el-input__inner {
+        border-radius: 8px;
+        padding-left: 12px;
+        &:hover {
+          border-color: var(--s-color-neutral-inactive);
+        }
+        &::placeholder, .el-range-input::placeholder {
+          color: var(--s-color-neutral-tertiary);
+          font-weight: bold;
+        }
+      }
+    }
+    .s-icon-chevron-bottom {
+      position: absolute;
+      right: 10px;
+      top: 30%;
+      pointer-events: none;
+      color: var(--s-color-neutral-tertiary);
+      transition: transform .3s;
+    }
+    &.s-focused {
+      .el-date-editor.el-input__inner,
+      .el-date-editor .el-input__inner {
+        border-color: var(--s-color-neutral-inactive);
+      }
+      &:not(.disabled) .s-icon-chevron-bottom {
+        transform: rotate(180deg);
+      }
+    }
+    &.s-has-value {
+      .s-icon-chevron-bottom {
+        color: var(--s-color-basic-black);
+      }
+    }
+    &.s-disabled {
+      .el-date-editor.el-input__inner,
+      .el-date-editor .el-input__inner {
+        color: var(--s-color-neutral-inactive);
+        border-color: var(--s-color-neutral-border);
+        background-color: var(--s-color-basic-white);
+        &::placeholder {
+          color: var(--s-color-neutral-inactive);
+        }
+        .el-range-input {
+          background-color: var(--s-color-basic-white);
+          color: var(--s-color-neutral-inactive);
+          &::placeholder {
+            color: var(--s-color-neutral-inactive);
+          }
+        }
+        .el-range-separator {
+          color: var(--s-color-neutral-inactive);
+        }
+      }
+      .s-icon-chevron-bottom {
+        color: var(--s-color-neutral-inactive);
+      }
+    }
+  }
+}
+.el-picker-panel__icon-btn,
+.el-date-picker__header-label,
+.el-date-table td,
+.el-date-table th,
+.el-picker-panel__link-btn,
+.el-time-panel__btn,
+.el-date-range-picker__time-header > .el-icon-arrow-right,
+.el-year-table td .cell,
+.el-month-table td .cell {
+  color: var(--s-color-basic-black);
+}
+.el-picker-panel__icon-btn:hover,
+.el-date-picker__header-label:hover,
+.el-year-table td.today .cell,
+.el-year-table td .cell:hover,
+.el-year-table td.current:not(.disabled) .cell,
+.el-month-table td.today .cell,
+.el-month-table td.current:not(.disabled) .cell,
+.el-month-table td .cell:hover,
+.el-picker-panel__shortcut:hover {
+  color: var(--s-color-main-brand);
+}
+.el-picker-panel {
+  border-color: var(--s-color-neutral-hover);
+  .el-picker-panel__content {
+    .el-date-table {
+      td {
+        &.available:hover, &.today span {
+          color: var(--s-color-main-brand);
+        }
+        &.next-month, &.prev-month {
+          color: var(--s-color-neutral-inactive);
+        }
+        &.current:not(.disabled), &.selected, &.start-date, &.end-date {
+          span {
+            background-color: var(--s-color-main-brand);
+            color: var(--s-color-basic-white);
+          }
+        }
+      }
+      th {
+        border-bottom-color: var(--s-color-neutral-hover);
+      }
+    }
+    .el-month-table td {
+      &.start-date, &.end-date {
+        .cell {
+          background-color: var(--s-color-main-brand);
+          color: var(--s-color-basic-white);
+        }
+      }
+    }
+  }
+  .el-picker-panel__footer {
+    border-top-color: var(--s-color-neutral-hover);
+    > .el-button {
+      height: 32px;
+      border-radius: 4px;
+      &:hover, &:focus {
+        color: var(--s-color-main-brand);
+      }
+      &.is-plain {
+        &:hover, &:focus {
+          border-color: var(--s-color-main-brand);
+        }
+      }
+    }
+  }
+  div[x-arrow].popper__arrow {
+    border-bottom-color: var(--s-color-neutral-hover);
+  }
+}
+.el-time-panel {
+  border-radius: 4px;
+  border-color: var(--s-color-neutral-hover);
+  .el-time-panel__footer {
+    border-top-color: var(--s-color-neutral-hover);
+    .confirm {
+      color: var(--s-color-main-brand);
+    }
+  }
+  .el-time-spinner__item {
+    &.active:not(.disabled) {
+      color: var(--s-color-basic-black);
+    }
+    &:hover:not(.disabled):not(.active) {
+      background-color: var(--s-color-neutral-placeholder);
+    }
+  }
+  .el-time-panel__content {
+    &::after, &::before {
+      border-top-color: var(--s-color-neutral-hover);
+      border-bottom-color: var(--s-color-neutral-hover);
+    }
+  }
+}
+.el-date-table.is-week-mode .el-date-table__row {
+  &.current, &:hover {
+    div {
+      background-color: var(--s-color-main-hover-light);
+    }
+  }
+}
+.el-month-table td.in-range div {
+  background-color: var(--s-color-main-hover-light);
+  &:hover {
+    background-color: var(--s-color-main-hover-light);
+  }
+}
+.el-date-table td.in-range div {
+  background-color: var(--s-color-main-hover-light);
+  &:hover {
+    background-color: var(--s-color-main-hover-light);
+  }
+}
+.el-date-range-picker__content.is-left {
+  border-right-color: var(--s-color-neutral-hover);
+}
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
new file mode 100644
index 00000000..dd7dda6a
--- /dev/null
+++ b/src/styles/dialog.scss
@@ -0,0 +1,16 @@
+@import "./variables";
+
+.el-dialog {
+  border-radius: 8px;
+  .el-dialog__title {
+    font-weight: bold;
+    font-size: 16px;
+    color: var(--s-color-basic-black);
+  }
+  > * {
+    word-break: break-word;
+  }
+  .el-dialog__body {
+    color: var(--s-color-basic-black);
+  }
+}
diff --git a/src/styles/divider.scss b/src/styles/divider.scss
new file mode 100644
index 00000000..6fdb2d2b
--- /dev/null
+++ b/src/styles/divider.scss
@@ -0,0 +1,6 @@
+.el-divider {
+  background-color: #F5F5F5; // TODO: ask about possibility to override it
+}
+.el-divider--horizontal {
+  margin: 20px 0;
+}
diff --git a/src/styles/dropdown.scss b/src/styles/dropdown.scss
new file mode 100644
index 00000000..02921f0f
--- /dev/null
+++ b/src/styles/dropdown.scss
@@ -0,0 +1,50 @@
+@import "./variables";
+
+.el-dropdown {
+  color: var(--s-color-basic-black);
+  > .el-button-group {
+    > .el-button {
+      float: left;
+    }
+    .el-dropdown__caret-button {
+      &.s-secondary {
+        &::before {
+          background-color: var(--s-color-neutral-border);
+        }
+        &:hover, &:active, &:focus {
+          &::before {
+            background-color: var(--s-color-main-brand);
+          }
+        }
+      }
+      &.s-tertiary, &.s-link {
+        &::before {
+          background-color: transparent;
+        }
+        &:hover, &:active, &:focus {
+          &::before {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+  > i {
+    cursor: pointer;
+  }
+  .s-icon-more-horizontal {
+    font-size: 24px;
+  }
+}
+.el-dropdown-menu__item {
+  color: var(--s-color-basic-black);
+  &:not(.is-disabled) {
+    &:hover, &:focus {
+      background-color: var(--s-color-neutral-placeholder);
+      color: var(--s-color-basic-black);
+    }
+  }
+  &.is-disabled {
+    color: var(--s-color-neutral-inactive);
+  }
+}
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
index c008b6b0..e1da6253 100644
--- a/src/styles/element-variables.scss
+++ b/src/styles/element-variables.scss
@@ -1,14 +1,14 @@
-@import "./variables.scss";
+@import "./variables";
 
-$--color-primary: $color-main-brand;
-$--color-danger: $color-error;
-$--border-color-base: $color-neutral-border;
-$--color-text-regular: $color-basic-black;
+$--color-primary: $s-color-main-brand;
+$--color-danger: $s-color-error;
+$--border-color-base: $s-color-neutral-border;
+$--color-text-regular: $s-color-basic-black;
 
 /* Menu
 --------------------------*/
 // $--menu-background-color: $transparent;
-// $--menu-item-hover-fill: $color-basic-white;
+// $--menu-item-hover-fill: $s-color-basic-white;
 
 /* icon font path, required */
 $--font-path: "~element-ui/lib/theme-chalk/fonts";
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
new file mode 100644
index 00000000..ed2a1131
--- /dev/null
+++ b/src/styles/fonts.scss
@@ -0,0 +1,37 @@
+@font-face {
+  font-family: "soramitsu-icons";
+  src: url("~@/assets/fonts/soramitsu-icons.woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: "SoraB";
+  src: url("~@/assets/fonts/Sora-Bold.otf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "SoraEB";
+  src: url("~@/assets/fonts/Sora-ExtraBold.otf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "SoraSB";
+  src: url("~@/assets/fonts/Sora-SemiBold.otf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Sora";
+  src: url("~@/assets/fonts/Sora-Regular.otf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "JetBrainsMono";
+  src: url("~@/assets/fonts/JetBrainsMono-Regular.woff");
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/src/styles/form.scss b/src/styles/form.scss
new file mode 100644
index 00000000..2e3013ab
--- /dev/null
+++ b/src/styles/form.scss
@@ -0,0 +1,75 @@
+@import "./variables";
+
+.el-form-item {
+  margin-bottom: 26px;
+  &__content {
+    line-height: 20px;
+    > button {
+      width: 100%;
+    }
+  }
+  &__label {
+    color: var(--s-color-basic-black);
+  }
+  &.is-error {
+    margin-bottom: 6px;
+    > .el-form-item__content {
+      > .el-form-item__error {
+        position: relative;
+        padding-top: 8px;
+        padding-left: 30px;
+        color: var(--s-color-basic-black);
+        &::before {
+          content: '';
+        }
+      }
+      > [class^="s-input"]:not(.disabled) {
+        .s-placeholder {
+          color: var(--s-color-error);
+          background-color: var(--s-color-main-base);
+        }
+        input, textarea {
+          background-color: var(--s-color-main-base);
+          &::placeholder {
+            color: var(--s-color-error);
+          }
+        }
+        &:hover {
+          .s-placeholder,
+          .el-input > input,
+          .el-textarea > textarea {
+            background-color: var(--s-color-main-hover-light);
+          }
+          .el-input > input,
+          .el-textarea > textarea {
+            border-color: var(--s-color-error);
+          }
+        }
+        &.focused {
+          .s-placeholder,
+          .el-input > input,
+          .el-textarea > textarea {
+            background-color: var(--s-color-basic-white);
+          }
+          .el-input > input,
+          .el-textarea > textarea {
+            border-color: var(--s-color-error);
+          }
+        }
+      }
+    }
+    .s-icon-error {
+      position: absolute;
+      bottom: 0;
+      left: 4px;
+      font-size: 16px;
+      color: var(--s-color-error);
+    }
+    .el-input__inner,
+    .el-input__inner:focus,
+    .el-textarea__inner,
+    .el-textarea__inner:focus {
+      border-color: var(--s-color-error);
+    }
+  }
+}
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 53039ba4..01fbb196 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -1,4 +1,4 @@
-@import "./variables.scss";
+@import "./variables";
 
 [class^="s-icon-"], [class*=" s-icon-"] {
   font-family: 'soramitsu-icons' !important;
@@ -9,7 +9,7 @@
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: $color-basic-black;
+  color: var(--s-color-basic-black);
 }
 $icons-font: 'soramitsu-icons' !important;
 /*_____________________________________________Icons variables_____________________________________________*/
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 00000000..9b2002d7
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,23 @@
+@import "./variables";
+@import "./element-variables";
+@import "./common";
+@import "./button";
+@import "./breadcrumbs";
+@import "./card";
+@import "./checkbox";
+@import "./collapse";
+@import "./datepicker";
+@import "./dialog";
+@import "./divider";
+@import "./dropdown";
+@import "./form";
+@import "./icons";
+@import "./input";
+@import "./json-input";
+@import "./pagination";
+@import "./radio";
+@import "./scroll-sections";
+@import "./select";
+@import "./tabs";
+@import "./table";
+@import "./tooltip";
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 167ad313..4591aad9 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,4 +1 @@
-import './variables.scss'
-import './element-variables.scss'
-import './icons.scss'
-import './common.scss'
+import './fonts.scss'
diff --git a/src/styles/input.scss b/src/styles/input.scss
new file mode 100644
index 00000000..08a4b891
--- /dev/null
+++ b/src/styles/input.scss
@@ -0,0 +1,145 @@
+@import "./variables";
+
+.s-input {
+  font-family: $font-family-default;
+  width: 100%;
+  min-height: $s-size-big;
+  position: relative;
+  .el-input__suffix {
+    z-index: 1;
+  }
+  .s-placeholder {
+    // TODO: add default animation from material-ui
+    color: var(--s-color-neutral-secondary);
+    text-align: left;
+    font-size: 12px;
+    padding: 0 15px;
+    padding-top: 5px;
+    top: 1px;
+    left: 1px;
+    border-top-left-radius: 4px;
+    position: absolute;
+    z-index: 1;
+    width: calc(100% - 15px);
+    background-color: var(--s-color-neutral-placeholder);
+    pointer-events: none;
+  }
+  .el-input,
+  .el-textarea {
+    height: 100%;
+    > input,
+    > textarea {
+      height: $s-size-big;
+      border: 1px solid var(--s-color-neutral-placeholder);
+      background-color: var(--s-color-neutral-placeholder);
+      &::placeholder {
+        color: var(--s-color-neutral-secondary);
+        opacity: 1; // Firefox
+      }
+    }
+    > textarea {
+      padding-top: 12px;
+    }
+    [class^="el-input__count"] {
+      background-color: transparent;
+    }
+  }
+  &:hover {
+    .s-placeholder,
+    .el-input > input,
+    .el-textarea > textarea {
+      background-color: var(--s-color-neutral-hover);
+    }
+    .el-input > input,
+    .el-textarea > textarea {
+      border-color: var(--s-color-neutral-hover);
+    }
+  }
+  &.s-focused {
+    .s-placeholder,
+    .el-input > input,
+    .el-textarea > textarea {
+      background-color: var(--s-color-basic-white);
+    }
+    .el-input > input,
+    .el-textarea > textarea {
+      border-color: var(--s-color-neutral-border);
+    }
+  }
+  &.s-disabled {
+    .s-placeholder,
+    .el-input > input,
+    .el-textarea > textarea {
+      color: var(--s-color-neutral-secondary);
+      background-color: var(--s-color-neutral-placeholder);
+    }
+    .el-input > input,
+    .el-textarea > textarea {
+      border-color: var(--s-color-neutral-border);
+    }
+  }
+  &.s-autofill {
+    .s-placeholder {
+      background-color: transparent !important;
+    }
+  }
+  .el-input > input {
+    &:-webkit-autofill {
+      color: var(--s-color-basic-black) !important;
+      animation-name: onAutoFillStart; // Expose a hook for JavaScript when auto fill is shown
+    }
+    &:not(:-webkit-autofill) {
+      animation-name: onAutoFillCancel; // Expose a hook for JS onAutoFillCancel
+    }
+    &:-internal-autofill-selected {
+      animation-name: onAutoFillStart;
+    }
+    &:not(:-internal-autofill-selected) {
+      animation-name: onAutoFillCancel;
+    }
+  }
+  .s-placeholder + .el-input {
+    > input {
+      padding-top: 12px;
+    }
+    .el-input__validateIcon {
+      padding-top: 11px;
+    }
+  }
+  .s-placeholder + .el-textarea > textarea {
+    padding-top: 24px;
+  }
+  &.s-text-file {
+    .el-input > input {
+      padding-right: 56px;
+    }
+    .s-icon-file-upload {
+      top: 16px;
+      right: 16px;
+      font-size: 24px;
+      z-index: 1;
+      position: absolute;
+      + input {
+        cursor: pointer;
+        position: absolute;
+        opacity: 0;
+        top: 0;
+        right: 0;
+        width: 56px;
+        height: 100%;
+        z-index: 2;
+      }
+    }
+  }
+}
+.el-input__inner, .el-textarea__inner {
+  color: var(--s-color-basic-black);
+}
+@keyframes onAutoFillStart {
+  from {/**/}
+  to {/**/}
+}
+@keyframes onAutoFillCancel {
+  from {/**/}
+  to {/**/}
+}
diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss
new file mode 100644
index 00000000..5526c51e
--- /dev/null
+++ b/src/styles/json-input.scss
@@ -0,0 +1,114 @@
+@import "./variables";
+// @import "./icons";
+
+$color-ide-variable: #0451A5;
+$color-ide-string: #A31515;
+$color-ide-number: #098658;
+$color-ide-boolean: #0000FF;
+
+.s-json-input {
+  width: 100%;
+  border: 1px solid var(--s-color-neutral-border);
+  border-radius: $s-border-radius-default;
+  &.s-disabled {
+    .ace-jsoneditor {
+      pointer-events: none;
+      .ace_cursor {
+        display: none !important;
+      }
+      .ace_scroller,
+      .ace_gutter-active-line {
+        background-color: var(--s-color-neutral-placeholder);
+      }
+    }
+  }
+  &.s-readonly .jsoneditor {
+    .ace_gutter .ace_gutter-cell.ace_error {
+      background-image: none;
+    }
+    .ace_tooltip {
+      display: none !important;
+    }
+  }
+  // TODO: think about hover and focus
+}
+
+.jsoneditor {
+  border: none !important;
+  font-family: $font-family-mono;
+  .ace-jsoneditor {
+    *, textarea.jsoneditor-text * {
+      font-family: $font-family-mono;
+    }
+    .ace_fold {
+      border: none;
+      background: none;
+      color: var(--s-color-basic-black);
+      margin-top: -13px;
+    }
+    .ace_text-layer {
+      color: var(--s-color-basic-black);
+    }
+    .ace_variable {
+      color: $color-ide-variable;
+    }
+    .ace_string {
+      color: $color-ide-string;
+    }
+    .ace_constant {
+      &.ace_numeric {
+        color: $color-ide-number;
+      }
+      &.ace_language {
+        color: $color-ide-boolean;
+      }
+    }
+    &.ace_editor {
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+      .ace_marker-layer {
+        .ace_active-line {
+          background-color: var(--s-color-neutral-placeholder);
+        }
+        .ace_selection {
+          background: var(--s-color-neutral-border);
+        }
+      }
+    }
+  }
+  .jsoneditor-statusbar {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    background-color: var(--s-color-neutral-placeholder);
+    color: var(--s-color-neutral-secondary);
+    .jsoneditor-parse-error-icon {
+      // If full error message will be needed, then it should be removed
+      display: none !important;
+      pointer-events: none;
+    }
+  }
+  .ace_gutter {
+    background-color: var(--s-color-neutral-placeholder);
+    color: var(--s-color-basic-black);
+    &-active-line {
+      background-color: var(--s-color-neutral-border);
+    }
+    // .ace_gutter-cell.ace_error {
+    //   @extend .s-icon-error; // TODO: fix the path for icon
+    // }
+  }
+  .ace_editor .ace_content,
+  .ace_gutter .ace_gutter-cell {
+    font-family: $font-family-mono;
+  }
+  .ace_tooltip {
+    font-family: $font-family-default;
+    background: var(--s-color-basic-black);
+    border-color: var(--s-color-basic-black);
+    color: var(--s-color-basic-white);
+    border-radius: $s-border-radius-default;
+    padding: 10px;
+    font-size: 12px;
+    line-height: 1.2;
+  }
+}
diff --git a/src/styles/pagination.scss b/src/styles/pagination.scss
new file mode 100644
index 00000000..e7533cd1
--- /dev/null
+++ b/src/styles/pagination.scss
@@ -0,0 +1,113 @@
+@import "./variables";
+
+.el-pagination {
+  &.is-background .el-pager li:not(.disabled) {
+    &.active {
+      background-color: var(--s-color-main-brand);
+      color: var(--s-color-basic-white);
+    }
+    &:hover {
+      color: var(--s-color-main-brand);
+    }
+  }
+  .btn-prev, .btn-next {
+    color: var(--s-color-basic-black);
+  }
+  button {
+    &:hover {
+      color: var(--s-color-main-brand);
+    }
+    &:disabled {
+      color: var(--s-color-neutral-inactive);
+    }
+  }
+  .el-pagination__sizes {
+    .el-select .el-input {
+      width: 65px;
+      .el-select__caret, .el-input__inner {
+        color: var(--s-color-basic-black);
+        font-weight: bold;
+      }
+      .el-select__caret {
+        margin-right: 6px;
+      }
+      .el-input__inner {
+        border-radius: 8px;
+        padding-right: 20px;
+        padding-left: 5px;
+        background-color: var(--s-color-neutral-placeholder);
+        border-color: var(--s-color-neutral-placeholder);
+      }
+      &.is-disabled {
+        .el-select__caret, .el-input__inner {
+          color: var(--s-color-neutral-inactive);
+        }
+      }
+    }
+  }
+  .el-pagination__editor.el-input {
+    .el-input__inner {
+      border-radius: 8px;
+      background-color: var(--s-color-neutral-placeholder);
+      border-color: var(--s-color-neutral-placeholder);
+      color: var(--s-color-basic-black);
+    }
+    &.is-disabled .el-input__inner {
+      color: var(--s-color-neutral-inactive);
+    }
+  }
+  .el-pagination__total, .per-page-text, .el-pagination__jump {
+    color: var(--s-color-neutral-secondary);
+    font-weight: normal;
+  }
+  .el-pager li {
+    color: var(--s-color-basic-black);
+    &.btn-quicknext, &.btn-quickprev {
+      color: var(--s-color-basic-black);
+    }
+    &:not(.disabled) {
+      &:hover, &.active {
+        color: var(--s-color-main-brand);
+      }
+    }
+    &.disabled {
+      color: var(--s-color-neutral-inactive);
+    }
+  }
+  &.is-background {
+    .el-pager li {
+      background-color: var(--s-color-neutral-placeholder);
+      &.disabled {
+        color: var(--s-color-neutral-inactive);
+      }
+    }
+    .btn-prev, .btn-next {
+      background-color: var(--s-color-neutral-placeholder);
+      &:disabled {
+        color: var(--s-color-neutral-inactive);
+        background-color: var(--s-color-neutral-placeholder);
+      }
+      &:not(:disabled):hover {
+        color: var(--s-color-main-brand);
+      }
+    }
+  }
+  &.el-pagination--small {
+    .el-pagination__editor {
+      height: 22px;
+    }
+    .el-pagination__sizes .el-select .el-input {
+      .el-input__inner {
+        height: 22px !important;
+        font-size: 12px;
+      }
+      .el-select__caret {
+        font-size: 12px;
+        line-height: 23px;
+      }
+    }
+  }
+}
+.el-select-dropdown__item.selected {
+  color: var(--s-color-main-brand);
+}
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
new file mode 100644
index 00000000..f7a0079d
--- /dev/null
+++ b/src/styles/radio.scss
@@ -0,0 +1,101 @@
+@import "./variables";
+@import "./common";
+
+.el-radio {
+  color: var(--s-color-basic-black);
+  &.s-big {
+    @extend .s-big;
+    line-height: $s-size-big;
+    &.is-bordered {
+      padding-top: 18px;
+    }
+    > .el-radio__input .el-radio__inner {
+      width: 20px;
+      height: 20px;
+      border-width: 2px;
+      &::after {
+        width: 10px;
+        height: 10px;
+      }
+    }
+  }
+  &.s-medium {
+    @extend .s-medium;
+    line-height: $s-size-medium;
+    > .el-radio__input .el-radio__inner {
+      width: 16px;
+      height: 16px;
+      border-width: 2px;
+      &::after {
+        width: 8px;
+        height: 8px;
+      }
+    }
+  }
+  &.s-small {
+    @extend .s-small;
+    line-height: $s-size-small;
+    &.is-bordered {
+      padding-top: 9px;
+    }
+    > .el-radio__label {
+      font-size: 12px;
+    }
+    > .el-radio__input .el-radio__inner {
+      width: 14px;
+      height: 14px;
+      border-width: 2px;
+      &::after {
+        width: 6px;
+        height: 6px;
+      }
+    }
+  }
+  &.is-bordered {
+    border-color: var(--s-color-neutral-border);
+    line-height: 0;
+    &.is-checked {
+      border-color: var(--s-color-main-brand);
+    }
+    &.is-disabled {
+      border-color: var(--s-color-neutral-border);
+    }
+  }
+  > .el-radio__input {
+    .el-radio__inner {
+      border-color: var(--s-color-neutral-border);
+      background-color: var(--s-color-basic-white);
+      &:hover {
+        border-color: var(--s-color-main-brand);
+      }
+      &::after {
+        background-color: var(--s-color-main-brand);
+      }
+    }
+    &.is-checked {
+      .el-radio__inner {
+        background-color: var(--s-color-basic-white);
+        border-color: var(--s-color-main-brand);
+      }
+      + .el-radio__label {
+        color: var(--s-color-main-brand);
+      }
+    }
+    &.is-disabled {
+      .el-radio__inner {
+        background-color: var(--s-color-neutral-placeholder);
+        border-color: var(--s-color-neutral-border);
+      }
+      &.is-checked .el-radio__inner {
+        background-color: var(--s-color-neutral-placeholder);
+        border-color: var(--s-color-neutral-border);
+        &::after {
+          background-color: var(--s-color-neutral-inactive);
+        }
+      }
+      & + span.el-radio__label {
+        color: var(--s-color-neutral-inactive);
+      }
+    }
+  }
+}
diff --git a/src/styles/scroll-sections.scss b/src/styles/scroll-sections.scss
new file mode 100644
index 00000000..6cb84a54
--- /dev/null
+++ b/src/styles/scroll-sections.scss
@@ -0,0 +1,63 @@
+@import "./variables";
+
+.s-scroll-sections {
+  font-family: $font-family-default;
+  font-size: 14px;
+}
+.s-scroll-menu {
+  font-weight: 600;
+  ul {
+    position: sticky;
+    top: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .s-scroll-item {
+    text-decoration: none;
+    a {
+      display: block;
+      padding: 8px 16px;
+      text-decoration: none;
+      cursor: pointer;
+      color: var(--s-menu-color-text);
+      &:hover {
+        color: var(--s-menu-color-hover);
+      }
+      &.active {
+        color: var(--s-menu-color-text-active);
+        border-left: 2px solid var(--s-menu-color-text-active);
+      }
+      &.disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+        color: var(--s-color-neutral-inactive);
+        border-left: none;
+      }
+    }
+  }
+}
+.s-scroll-content {
+  padding-bottom: 90%;
+  color: var(--s-color-basic-black);
+  .title {
+    font-size: 16px;
+  }
+}
+.s-scroll-section-item {
+  padding: 10px 20px;
+  &:first-child {
+    margin-top: 10px;
+  }
+  &:last-child {
+    margin-bottom: 10px;
+    .el-divider.el-divider--horizontal {
+      height: 0;
+    }
+  }
+  .title {
+    font-weight: bold;
+    display: block;
+    padding-bottom: 12px;
+  }
+}
diff --git a/src/styles/select.scss b/src/styles/select.scss
new file mode 100644
index 00000000..7684f070
--- /dev/null
+++ b/src/styles/select.scss
@@ -0,0 +1,220 @@
+@import "./variables";
+@import "./icons";
+
+.s-select {
+  font-family: $font-family-default;
+  width: 100%;
+  position: relative;
+  .el-select {
+    width: 100%;
+    i.el-icon-arrow-up {
+      font-family: $icons-font;
+      font-size: 16px;
+      &:before {
+        content: $s-icon-chevron-top;
+      }
+    }
+    .el-input {
+      &.is-focus .el-input__inner {
+        border-color: var(--s-color-neutral-placeholder);
+      }
+      .el-input__inner {
+        &::placeholder {
+          color: var(--s-color-neutral-secondary);
+          opacity: 1; // Firefox
+        }
+      }
+      .el-select__caret {
+        color: var(--s-color-neutral-secondary);
+      }
+    }
+  }
+  &.s-input-type {
+    .el-select {
+      .el-input__inner {
+        height: $s-size-big;
+        padding: 0 15px;
+        border: 1px solid var(--s-color-neutral-placeholder);
+        background-color: var(--s-color-neutral-placeholder);
+        &:focus {
+          border-color: var(--s-color-neutral-placeholder);
+        }
+      }
+    }
+    &:hover {
+      .el-select {
+        .el-input__inner {
+          border-color: var(--s-color-neutral-hover);
+          background-color: var(--s-color-neutral-hover);
+        }
+      }
+      .s-placeholder {
+        background-color: var(--s-color-neutral-hover);
+      }
+    }
+    .s-placeholder + .el-select {
+      .el-input__inner {
+        padding-top: 12px;
+      }
+      .el-input__validateIcon {
+        padding-top: 11px;
+      }
+    }
+    &.s-focused {
+      .el-select {
+        .el-input__inner {
+          border-color: var(--s-color-neutral-border);
+          background-color: var(--s-color-basic-white);
+        }
+      }
+      .s-placeholder {
+        background-color: var(--s-color-basic-white);
+      }
+    }
+    &.s-disabled {
+      .el-select {
+        .el-select__caret {
+          color: var(--s-color-neutral-secondary);
+        }
+        .el-input__inner, .el-input__inner:hover {
+          border-color: var(--s-color-neutral-border);
+          color: var(--s-color-neutral-secondary);
+          background-color: var(--s-color-neutral-placeholder);
+          &::placeholder {
+            color: var(--s-color-neutral-secondary);
+          }
+        }
+      }
+      .s-placeholder {
+        color: var(--s-color-neutral-secondary);
+        background-color: var(--s-color-neutral-placeholder);
+      }
+    }
+  }
+  .s-placeholder {
+    // TODO: add default animation from material-ui
+    color: var(--s-color-neutral-secondary);
+    text-align: left;
+    font-size: 12px;
+    padding: 0 15px;
+    padding-top: 5px;
+    top: 1px;
+    left: 1px;
+    border-top-left-radius: 4px;
+    position: absolute;
+    z-index: 1;
+    width: calc(100% - 15px);
+    background-color: var(--s-color-neutral-placeholder);
+    pointer-events: none;
+  }
+  &.s-select-type {
+    .el-select {
+      .el-input__inner {
+        border-radius: 8px;
+        padding-left: 12px;
+        font-weight: bold;
+        &:hover {
+          border-color: var(--s-color-neutral-inactive);
+        }
+        &::placeholder {
+          color: var(--s-color-neutral-tertiary);
+          font-weight: bold;
+        }
+        &:focus {
+          border-color: var(--s-color-neutral-inactive);
+        }
+      }
+      .el-select__caret {
+        color: var(--s-color-neutral-tertiary);
+      }
+    }
+    &.s-focused {
+      .el-select {
+        .el-input__inner {
+          color: var(--s-color-basic-black);
+          border-color: var(--s-color-neutral-inactive);
+          &::placeholder {
+            color: var(--s-color-basic-black);
+          }
+        }
+        .el-select__caret {
+          color: var(--s-color-basic-black);
+        }
+      }
+    }
+    &.s-has-value {
+      .el-select {
+        .el-select__caret {
+          color: var(--s-color-basic-black);
+        }
+      }
+    }
+    &.s-disabled {
+      .el-select {
+        .el-input__inner {
+          color: var(--s-color-neutral-inactive);
+          border-color: var(--s-color-neutral-border);
+          background-color: var(--s-color-basic-white);
+          &::placeholder {
+            color: var(--s-color-neutral-inactive);
+          }
+        }
+        .el-select__caret {
+          color: var(--s-color-neutral-inactive);
+        }
+      }
+    }
+  }
+}
+.el-select-dropdown__item {
+  &.hover {
+    background-color: transparent;
+  }
+  &:hover {
+    background-color: var(--s-color-neutral-placeholder);
+  }
+  &.is-disabled {
+    color: var(--s-color-neutral-inactive);
+  }
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item {
+  > span {
+    padding-left: 16px;
+    vertical-align: top;
+    color: var(--s-color-basic-black);
+  }
+  &::before {
+    font-family: "element-icons";
+    content: "\e6da";
+    color: var(--s-color-basic-white);
+    border: 1px solid var(--s-color-neutral-border);
+    background-color: var(--s-color-basic-white);
+    font-size: 16px;
+    font-weight: bold;
+    padding: 1px;
+    border-radius: 4px;
+  }
+  &.selected {
+    font-weight: normal;
+    &.hover {
+      background-color: transparent;
+    }
+    &:hover {
+      background-color: var(--s-color-neutral-placeholder);
+    }
+    &::before {
+      color: var(--s-color-basic-white);
+      background-color: var(--s-color-main-brand);
+      border-color: var(--s-color-main-brand);
+    }
+    &::after {
+      content: '';
+    }
+  }
+}
+.el-select-group__wrap:not(:last-of-type)::after {
+  background-color: var(--s-color-neutral-hover);
+}
+.el-select-group__title {
+  color: var(--s-color-neutral-tertiary);
+}
diff --git a/src/styles/table.scss b/src/styles/table.scss
new file mode 100644
index 00000000..33769881
--- /dev/null
+++ b/src/styles/table.scss
@@ -0,0 +1,111 @@
+@import "./variables";
+
+.el-table,
+.el-table__header-wrapper tbody td,
+.el-table__footer-wrapper tbody td {
+  color: var(--s-color-basic-black);
+}
+.el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: var(--s-color-neutral-hover);
+  border-left: none;
+  border-right: none;
+}
+.el-table__body {
+  tr {
+    &.hover-row {
+      > td,
+      &.current-row > td,
+      &.el-table__row--striped > td,
+      &.el-table__row--striped.current-row > td {
+        background-color: var(--s-color-neutral-hover);
+        border-left: none;
+        border-right: none;
+      }
+    }
+  }
+}
+.el-table--border th:first-child .cell,
+.el-table--border td:first-child .cell {
+  padding-left: 13px;
+}
+.el-table thead {
+  color: var(--s-color-neutral-tertiary);
+}
+.el-table--group,
+.el-table--border,
+.el-table th.is-leaf,
+.el-table td,
+.el-table--border th {
+  border-color: var(--s-color-neutral-placeholder);
+}
+.el-table--group::after,
+.el-table--border::after {
+  background-color: var(--s-color-neutral-placeholder);
+}
+.el-table:not(.el-table--border)::before {
+  background-color: var(--s-color-basic-white);
+}
+.el-table tr:last-child td {
+  border-bottom-color: var(--s-color-basic-white);
+}
+.el-table__header {
+  label.el-checkbox.is-disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    height: 4px;
+    top: 7px;
+  }
+}
+.el-table {
+  .el-checkbox__inner {
+    height: 20px;
+    width: 20px;
+    border-radius: 4px;
+    &::after {
+      border-width: 2px;
+      height: 10px;
+      left: 6px;
+      width: 5px;
+    }
+  }
+}
+.el-table--medium {
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    top: 5px;
+  }
+  .el-checkbox__inner {
+    height: 16px;
+    width: 16px;
+    &::after {
+      top: 0;
+      left: 4px;
+      height: 8px;
+      width: 4px;
+    }
+  }
+}
+.el-table--small {
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    top: 4px;
+  }
+  .el-checkbox__inner {
+    height: 14px;
+    width: 14px;
+    &::after {
+      top: 1px;
+      left: 4px;
+      height: 6px;
+      width: 2px;
+    }
+  }
+}
+.el-table__header-wrapper tbody td,
+.el-table__footer-wrapper tbody td {
+  background-color: var(--s-color-neutral-placeholder);
+}
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: var(--s-color-main-brand);
+  border-color: var(--s-color-main-brand);
+}
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
new file mode 100644
index 00000000..0881e263
--- /dev/null
+++ b/src/styles/tabs.scss
@@ -0,0 +1,92 @@
+@import "./variables";
+
+.s-tabs {
+  width: 100%;
+  .el-tabs__item {
+    font-weight: bold;
+    .el-icon-close {
+      &:before {
+        font-weight: bold;
+      }
+      &:hover {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+    &.is-active {
+      color: var(--s-color-main-brand);
+    }
+    &:not(.is-active) {
+      color: var(--s-color-basic-black);
+    }
+  }
+  .el-tab-pane {
+    color: var(--s-color-basic-black);
+  }
+  .el-tabs__nav-wrap::after {
+    background-color: var(--s-color-neutral-placeholder);
+  }
+  &.el-tabs--card {
+    > .el-tabs__header {
+      border-bottom-color: var(--s-color-neutral-hover);
+      .el-tabs__nav {
+        border-color: var(--s-color-neutral-hover);
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+      }
+      .el-tabs__item {
+        border-left-color: var(--s-color-neutral-hover);
+      }
+    }
+  }
+  &.el-tabs--border-card {
+    border-color: var(--s-color-neutral-border);
+    > .el-tabs__header {
+      background-color: var(--s-color-neutral-placeholder);
+      border-bottom-color: var(--s-color-neutral-border);
+      .el-tabs__item {
+        &:hover, &.is-active {
+          color: var(--s-color-main-brand);
+        }
+      }
+    }
+  }
+  &.s-rounded {
+    .el-tabs__header {
+      width: fit-content;
+    }
+    .el-tabs__nav-wrap {
+      background-color: var(--s-color-neutral-placeholder);
+      border-radius: 8px;
+      height: 32px;
+      padding-top: 2px;
+      padding-left: 2px;
+      padding-right: 2px;
+      &::after, .el-tabs__active-bar {
+        height: 0;
+      }
+      .el-tabs__item {
+        padding: 0 32px;
+        height: 28px;
+        line-height: 28px;
+        &:nth-child(2), &:last-child {
+          padding: 0 32px;
+        }
+        &.is-active {
+          color: var(--s-color-basic-black);
+          background-color: var(--s-color-basic-white);
+          box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
+          border-radius: 8px;
+        }
+        &: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);
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+  .el-tabs__active-bar {
+    background-color: var(--s-color-main-brand);
+  }
+}
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss
new file mode 100644
index 00000000..806b5e6b
--- /dev/null
+++ b/src/styles/tooltip.scss
@@ -0,0 +1,12 @@
+@import "./variables";
+
+.el-tooltip__popper {
+  &.is-dark {
+    background-color: var(--s-color-basic-black);
+  }
+  &.is-light {
+    color: var(--s-color-basic-black);
+    border-color: var(--s-color-basic-black);
+  }
+  border-color: var(--s-color-basic-black);
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 5b688981..238ae45c 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,68 +1,29 @@
 // Main colors
-$color-main-brand: #D0021B;
-$color-main-hover: #E75264;
-$color-main-inactive: #F6CCD1;
-$color-main-hover-light: #FEE6E7;
-$color-main-base: #FFF9FA;
+$s-color-main-brand: #D0021B !default;
+$s-color-main-hover: #E75264 !default;
+$s-color-main-inactive: #F6CCD1 !default;
+$s-color-main-hover-light: #FEE6E7 !default;
+$s-color-main-base: #FFF9FA !default;
 // Neutral colors
-$color-neutral-primary: #53565A;
-$color-neutral-secondary: #75787B;
-$color-neutral-tertiary: #909296;
-$color-neutral-inactive: #C8C9C7;
-$color-neutral-border: #D9D9D6;
-$color-neutral-hover: #F0F0F0;
-$color-neutral-placeholder: #F1F3F4;
+$s-color-neutral-primary: #53565A !default; // TODO: not used
+$s-color-neutral-secondary: #75787B !default;
+$s-color-neutral-tertiary: #909296 !default;
+$s-color-neutral-inactive: #C8C9C7 !default;
+$s-color-neutral-border: #D9D9D6 !default;
+$s-color-neutral-hover: #F0F0F0 !default;
+$s-color-neutral-placeholder: #F1F3F4 !default;
 // UI events colors
-$color-error: #F0000B;
+$s-color-error: #F0000B !default;
 // Basic colors
-$color-basic-black: #2D2926;
-$color-basic-white: #FFF;
+$s-color-basic-black: #2D2926 !default;
+$s-color-basic-white: #FFF !default;
 // Size
-$size-big: 56px;
-$size-medium: 40px;
-$size-small: 32px;
+$s-size-big: 56px !default;
+$s-size-medium: 40px !default;
+$s-size-small: 32px !default;
 
-$border-radius-default: 4px;
+$s-border-radius-default: 4px !default;
 // Fonts
-@font-face {
-  font-family: "soramitsu-icons";
-  src: url("~@/assets/fonts/soramitsu-icons.woff");
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-@font-face {
-  font-family: "SoraB";
-  src: url("~@/assets/fonts/Sora-Bold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "SoraEB";
-  src: url("~@/assets/fonts/Sora-ExtraBold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "SoraSB";
-  src: url("~@/assets/fonts/Sora-SemiBold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Sora";
-  src: url("~@/assets/fonts/Sora-Regular.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "JetBrainsMono";
-  src: url("~@/assets/fonts/JetBrainsMono-Regular.woff");
-  font-weight: normal;
-  font-style: normal;
-}
-
 $font-family-default: 'Sora', sans-serif !important;
 $font-family-mono: 'JetBrainsMono', monospace !important;
 // Responsive
@@ -92,3 +53,21 @@ $--breakpoints-spec: (
   'lg-and-down': (max-width: $--xl - 1),
   'xl-only' : (min-width: $--xl),
 );
+
+:root {
+  --s-color-main-brand: #{$s-color-main-brand};
+  --s-color-main-hover: #{$s-color-main-hover};
+  --s-color-main-inactive: #{$s-color-main-inactive};
+  --s-color-main-hover-light: #{$s-color-main-hover-light};
+  --s-color-main-base: #{$s-color-main-base};
+  --s-color-neutral-primary: #{$s-color-neutral-primary};
+  --s-color-neutral-secondary: #{$s-color-neutral-secondary};
+  --s-color-neutral-tertiary: #{$s-color-neutral-tertiary};
+  --s-color-neutral-inactive: #{$s-color-neutral-inactive};
+  --s-color-neutral-border: #{$s-color-neutral-border};
+  --s-color-neutral-hover: #{$s-color-neutral-hover};
+  --s-color-neutral-placeholder: #{$s-color-neutral-placeholder};
+  --s-color-error: #{$s-color-error};
+  --s-color-basic-black: #{$s-color-basic-black};
+  --s-color-basic-white: #{$s-color-basic-white};
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 70855221..30255c57 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -8,3 +8,21 @@ export enum Direction {
   HORIZONTAL = 'horizontal',
   VERTICAL = 'vertical'
 }
+
+export enum CSSColors {
+  MainBrand = '--s-color-main-brand',
+  MainHover = '--s-color-main-hover',
+  MainInactive = '--s-color-main-inactive',
+  MainHoverLight = '--s-color-main-hover-light',
+  MainBase = '--s-color-main-base',
+  NeutralPrimary = '--s-color-neutral-primary',
+  NeutralSecondary = '--s-color-neutral-secondary',
+  NeutralTertiary = '--s-color-neutral-tertiary',
+  NeutralInactive = '--s-color-neutral-inactive',
+  NeutralBorder = '--s-color-neutral-border',
+  NeutralHover = '--s-color-neutral-hover',
+  NeutralPlaceholder = '--s-color-neutral-placeholder',
+  Error = '--s-color-error',
+  BasicBlack = '--s-color-basic-black',
+  BasicWhite = '--s-color-basic-white'
+}