diff --git a/package.json b/package.json
index 05726c3a..ec54e632 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "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..58b3b2bb 100644
--- a/src/components/Breadcrumb/SBreadcrumb.vue
+++ b/src/components/Breadcrumb/SBreadcrumb.vue
@@ -19,7 +19,7 @@ export default class SBreadcrumb extends Vue {
 <style lang="scss">
 @import "../../styles/variables.scss";
 .el-breadcrumb__separator {
-  color: $color-neutral-secondary;
+  color: $s-color-neutral-secondary;
   font-weight: normal;
 }
 </style>
diff --git a/src/components/Breadcrumb/SBreadcrumbItem.vue b/src/components/Breadcrumb/SBreadcrumbItem.vue
index 7d577779..0e324a7d 100644
--- a/src/components/Breadcrumb/SBreadcrumbItem.vue
+++ b/src/components/Breadcrumb/SBreadcrumbItem.vue
@@ -28,9 +28,9 @@ export default class SBreadcrumbItem extends Vue {
 <style lang="scss">
 @import "../../styles/variables.scss";
 .el-breadcrumb__inner {
-  color: $color-neutral-secondary;
+  color: $s-color-neutral-secondary;
   &.is-link {
-    color: $color-neutral-secondary;
+    color: $s-color-neutral-secondary;
     font-weight: normal;
   }
 }
diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index ce9ee5ff..c686eccd 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
   }
@@ -180,13 +186,13 @@ export default class SButton extends Vue {
 <style lang="scss">
 @import "../../styles/variables.scss";
 
-.loading {
+.s-loading {
   padding: 12px 17.5px;
   i {
     position: absolute;
     left: var(--s-button-loading-left);
   }
-  &.small {
+  &.s-small {
     padding: 9px 15px;
     i {
       left: calc(var(--s-button-loading-left) + 2px);
@@ -197,112 +203,116 @@ export default class SButton extends Vue {
   }
 }
 
-.primary {
+.s-primary {
   &:hover, &:active, &:focus {
-    background-color: $color-main-hover;
-    border-color: $color-main-hover;
+    background-color: $s-color-main-hover;
+    border-color: $s-color-main-hover;
   }
   &:disabled, &:disabled:hover {
-    background-color: $color-main-inactive;
-    border-color: $color-main-inactive;
+    background-color: $s-color-main-inactive;
+    border-color: $s-color-main-inactive;
   }
 }
 
-.secondary {
+.s-secondary {
   &:hover, &:active, &:focus {
-    color: $color-main-brand;
-    background-color: $color-basic-white;
-    border-color: $color-main-brand;
+    color: $s-color-main-brand;
+    background-color: $s-color-basic-white;
+    border-color: $s-color-main-brand;
   }
   &:disabled, &:disabled:hover {
-    color: $color-neutral-inactive;
-    border-color: $color-neutral-border;
+    color: $s-color-neutral-inactive;
+    border-color: $s-color-neutral-border;
   }
-  &.alternative {
+  &.s-alternative {
     &:hover, &:active, &:focus {
-      color: $color-basic-black;
-      background-color: $color-neutral-hover;
-      border-color: $color-neutral-hover;
+      color: $s-color-basic-black;
+      background-color: $s-color-neutral-hover;
+      border-color: $s-color-neutral-hover;
     }
     &:disabled, &:disabled:hover {
-      color: $color-neutral-inactive;
-      border-color: $color-neutral-border;
-      background-color: $color-basic-white;
+      color: $s-color-neutral-inactive;
+      border-color: $s-color-neutral-border;
+      background-color: $s-color-basic-white;
     }
   }
 }
 
-.link {
-  color: $color-basic-black;
+.s-link {
+  color: $s-color-basic-black;
   border: none;
   background-color: transparent;
   &:hover, &:active, &:focus {
-    color: $color-main-brand;
+    color: $s-color-main-brand;
     background-color: transparent;
   }
   &:disabled, &:disabled:hover {
-    color: $color-neutral-inactive;
+    color: $s-color-neutral-inactive;
   }
 }
 
-.tertiary {
-  color: $color-basic-black;
-  border-color: $color-neutral-placeholder;
-  background-color: $color-neutral-placeholder;
+.s-tertiary {
+  color: $s-color-basic-black;
+  border-color: $s-color-neutral-placeholder;
+  background-color: $s-color-neutral-placeholder;
   &:hover, &:active, &:focus {
-    color: $color-main-brand;
-    background-color: $color-neutral-placeholder;
-    border-color: $color-neutral-placeholder;
+    color: $s-color-main-brand;
+    background-color: $s-color-neutral-placeholder;
+    border-color: $s-color-neutral-placeholder;
   }
   &:disabled, &:disabled:hover {
-    color: $color-neutral-inactive;
-    background-color: $color-neutral-placeholder;
-    border-color: $color-neutral-placeholder;
+    color: $s-color-neutral-inactive;
+    background-color: $s-color-neutral-placeholder;
+    border-color: $s-color-neutral-placeholder;
   }
 }
 
-.action {
-  &.big {
-    width: $size-big;
+.s-action {
+  &.s-big {
+    width: $s-size-big;
+    padding: 12px;
     i {
       font-size: 20px;
     }
   }
-  &.medium {
-    width: $size-medium;
+  &.s-medium {
+    width: $s-size-medium;
+    padding: 10px;
     i {
       font-size: 18px;
     }
   }
-  &.small {
-    width: $size-small;
+  &.s-small {
+    width: $s-size-small;
+    padding: 9px;
     i {
       font-size: 16px;
       margin-left: -2px;
       margin-top: -2px;
     }
   }
-  color: $color-basic-black;
-  background-color: $color-neutral-placeholder;
-  border-color: $color-neutral-placeholder;
+  color: $s-color-basic-black;
+  background-color: $s-color-neutral-placeholder;
+  border-color: $s-color-neutral-placeholder;
+  border-radius: 8px;
   &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
-    color: $color-basic-black;
-    background-color: $color-neutral-hover;
-    border-color: $color-neutral-hover;
+    color: $s-color-basic-black;
+    background-color: $s-color-neutral-hover;
+    border-color: $s-color-neutral-hover;
   }
   &:disabled, &:disabled:hover {
-    color: $color-neutral-inactive;
+    color: $s-color-neutral-inactive;
   }
-  &.alternative {
-    background-color: $color-basic-white;
-    border-color: $color-neutral-border;
+  &.s-alternative {
+    background-color: $s-color-basic-white;
+    border-color: $s-color-neutral-border;
     &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
-      color: $color-basic-black;
-      background-color: $color-neutral-placeholder;
-      border-color: $color-neutral-placeholder;
+      color: $s-color-basic-black;
+      background-color: $s-color-neutral-placeholder;
+      border-color: $s-color-neutral-placeholder;
     }
     &:disabled, &:disabled:hover {
-      color: $color-neutral-inactive;
+      color: $s-color-neutral-inactive;
     }
   }
 }
@@ -314,7 +324,7 @@ button {
       color: inherit;
     }
   }
-  &:not(.action) > span > i {
+  &:not(.s-action) > span > i {
     &[class^=s-icon-], &[class^=el-icon-] {
       margin-right: 6px;
     }
diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index 248e1f29..c589d701 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"
@@ -62,17 +62,17 @@ export default class SCard extends Vue {
 @import "../../styles/variables.scss";
 
 .s-card {
-  color: $color-basic-black;
+  color: $s-color-basic-black;
   border-radius: 8px;
-  border-color: $color-neutral-border;
-  &.clickable {
+  border-color: $s-color-neutral-border;
+  &.s-clickable {
     cursor: pointer;
   }
   &:hover, &:focus {
-    border-color: $color-basic-white;
+    border-color: $s-color-basic-white;
   }
   .el-card__header {
-    border-bottom-color: $color-basic-white;
+    border-bottom-color: $s-color-basic-white;
     padding-bottom: 0;
     text-align: left;
   }
diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
index 8c85714a..3513144a 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
   }
@@ -104,15 +104,15 @@ export default class SCheckbox extends Vue {
 @import "../../styles/common.scss";
 
 .el-checkbox {
-  &.big {
-    @extend .big;
+  &.s-big {
+    @extend .s-big;
     padding: 17px 0 9px 0;
     &.is-bordered {
       padding: 17px 20px 9px 15px;
     }
   }
-  &.medium {
-    @extend .medium;
+  &.s-medium {
+    @extend .s-medium;
     &, &.is-bordered {
       padding: 9px 15px 7px 10px;
       .el-checkbox__inner {
@@ -130,8 +130,8 @@ export default class SCheckbox extends Vue {
       padding: 9px 0 7px 0;
     }
   }
-  &.small {
-    @extend .small;
+  &.s-small {
+    @extend .s-small;
     border-radius: 4px;
     .el-checkbox__label {
       font-size: 12px;
@@ -155,7 +155,7 @@ export default class SCheckbox extends Vue {
   }
 }
 .el-checkbox__inner {
-  border-color: $color-neutral-inactive;
+  border-color: $s-color-neutral-inactive;
   border-radius: 4px;
   width: 20px;
   height: 20px;
@@ -169,21 +169,21 @@ export default class SCheckbox extends Vue {
 .el-checkbox__input {
   &.is-disabled {
     .el-checkbox__inner {
-      background-color: $color-neutral-placeholder;
+      background-color: $s-color-neutral-placeholder;
     }
     & + span.el-checkbox__label {
-      color: $color-neutral-inactive;
+      color: $s-color-neutral-inactive;
     }
   }
   &.is-checked {
     &.is-disabled > .el-checkbox__inner {
-      background-color: $color-neutral-placeholder;
+      background-color: $s-color-neutral-placeholder;
       &::after {
-        border-color: $color-neutral-inactive;
+        border-color: $s-color-neutral-inactive;
       }
     }
     & + .el-checkbox__label {
-      color: $color-basic-black;
+      color: $s-color-basic-black;
     }
   }
 }
diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue
index d6d2d96a..ff0d07fa 100644
--- a/src/components/Collapse/SCollapseItem.vue
+++ b/src/components/Collapse/SCollapseItem.vue
@@ -41,10 +41,10 @@ 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
   }
@@ -55,13 +55,13 @@ export default class SCollapseItem extends Vue {
 @import "../../styles/variables.scss";
 @import "../../styles/icons.scss";
 
-.without-border {
+.s-without-border {
   > div > .el-collapse-item__header,
   > .el-collapse-item__wrap {
     border: none;
   }
 }
-.without-padding > .el-collapse-item__wrap > .el-collapse-item__content {
+.s-without-padding > .el-collapse-item__wrap > .el-collapse-item__content {
   padding-bottom: 0;
 }
 .el-collapse-item__ {
@@ -69,7 +69,7 @@ export default class SCollapseItem extends Vue {
     border-bottom-color: #F5F5F5;
   }
   &header {
-    color: $color-basic-black;
+    color: $s-color-basic-black;
     border-bottom-color: #F5F5F5;
     &.is-active {
       border-bottom-color: transparent;
@@ -81,7 +81,7 @@ export default class SCollapseItem extends Vue {
       padding: 8px;
       width: 32px;
       height: 32px;
-      background-color: $color-neutral-placeholder;
+      background-color: $s-color-neutral-placeholder;
       border-radius: 50%;
       &.is-active {
         transform: rotate(180deg);
@@ -89,10 +89,10 @@ export default class SCollapseItem extends Vue {
     }
   }
   &content {
-    color: $color-basic-black;
+    color: $s-color-basic-black;
   }
 }
 .el-collapse-item.is-disabled .el-collapse-item__header {
-  color: $color-neutral-inactive;
+  color: $s-color-neutral-inactive;
 }
 </style>
diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker.vue
index 316fa2a3..25268190 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
   }
@@ -265,40 +261,40 @@ export default class SDatePicker extends Vue {
       width: 100%;
     }
     .el-range-separator {
-      color: $color-neutral-tertiary;
+      color: $s-color-neutral-tertiary;
     }
     .el-input__inner, .el-range-input {
       &::placeholder {
-        color: $color-neutral-secondary;
+        color: $s-color-neutral-secondary;
         opacity: 1; // Firefox
       }
     }
     &.is-active {
-      border-color: $color-neutral-border;
+      border-color: $s-color-neutral-border;
     }
   }
-  &.has-value {
+  &.s-has-value {
     .el-date-editor .el-range-separator {
-      color: $color-basic-black;
+      color: $s-color-basic-black;
     }
   }
-  &.input {
-    min-height: $size-big;
+  &.s-input-type {
+    min-height: $s-size-big;
     .el-input__inner {
-      height: $size-big;
+      height: $s-size-big;
       padding: 0 15px;
-      border: 1px solid $color-neutral-placeholder;
-      background-color: $color-neutral-placeholder;
+      border: 1px solid $s-color-neutral-placeholder;
+      background-color: $s-color-neutral-placeholder;
     }
     &:hover {
       .el-input__inner {
-        border-color: $color-neutral-hover;
+        border-color: $s-color-neutral-hover;
       }
-      .el-input__inner, .placeholder {
-        background-color: $color-neutral-hover;
+      .el-input__inner, .s-placeholder {
+        background-color: $s-color-neutral-hover;
       }
     }
-    .placeholder + .el-date-editor {
+    .s-placeholder + .el-date-editor {
       > .el-input__inner {
         padding-top: 12px;
       }
@@ -306,27 +302,27 @@ export default class SDatePicker extends Vue {
         padding-top: 11px;
       }
     }
-    &.focused {
+    &.s-focused {
       .el-input__inner {
-        border-color: $color-neutral-border;
+        border-color: $s-color-neutral-border;
       }
-      .el-input__inner, .placeholder {
-        background-color: $color-basic-white;
+      .el-input__inner, .s-placeholder {
+        background-color: $s-color-basic-white;
       }
     }
-    &.disabled {
+    &.s-disabled {
       .el-input__inner {
-        border-color: $color-neutral-border;
+        border-color: $s-color-neutral-border;
       }
-      .el-input__inner, .placeholder {
-        color: $color-neutral-secondary;
-        background-color: $color-neutral-placeholder;
+      .el-input__inner, .s-placeholder {
+        color: $s-color-neutral-secondary;
+        background-color: $s-color-neutral-placeholder;
       }
     }
   }
-  .placeholder {
+  .s-placeholder {
     // TODO: add default animation from material-ui
-    color: $color-neutral-secondary;
+    color: $s-color-neutral-secondary;
     text-align: left;
     font-size: 12px;
     padding: 0 15px;
@@ -337,10 +333,10 @@ export default class SDatePicker extends Vue {
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
-    background-color: $color-neutral-placeholder;
+    background-color: $s-color-neutral-placeholder;
     pointer-events: none;
   }
-  &.select {
+  &.s-select-type {
     .el-date-editor {
       .el-input__inner, .el-range-input, .el-range-separator {
         font-weight: bold;
@@ -349,10 +345,10 @@ export default class SDatePicker extends Vue {
         border-radius: 8px;
         padding-left: 12px;
         &:hover {
-          border-color: $color-neutral-inactive;
+          border-color: $s-color-neutral-inactive;
         }
         &::placeholder, .el-range-input::placeholder {
-          color: $color-neutral-tertiary;
+          color: $s-color-neutral-tertiary;
           font-weight: bold;
         }
       }
@@ -362,45 +358,45 @@ export default class SDatePicker extends Vue {
       right: 10px;
       top: 30%;
       pointer-events: none;
-      color: $color-neutral-tertiary;
+      color: $s-color-neutral-tertiary;
       transition: transform .3s;
     }
-    &.focused {
+    &.s-focused {
       .el-date-editor.el-input__inner,
       .el-date-editor .el-input__inner {
-        border-color: $color-neutral-inactive;
+        border-color: $s-color-neutral-inactive;
       }
       &:not(.disabled) .s-icon-chevron-bottom {
         transform: rotate(180deg);
       }
     }
-    &.has-value {
+    &.s-has-value {
       .s-icon-chevron-bottom {
-        color: $color-basic-black;
+        color: $s-color-basic-black;
       }
     }
-    &.disabled {
+    &.s-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;
+        color: $s-color-neutral-inactive;
+        border-color: $s-color-neutral-border;
+        background-color: $s-color-basic-white;
         &::placeholder {
-          color: $color-neutral-inactive;
+          color: $s-color-neutral-inactive;
         }
         .el-range-input {
-          background-color: $color-basic-white;
-          color: $color-neutral-inactive;
+          background-color: $s-color-basic-white;
+          color: $s-color-neutral-inactive;
           &::placeholder {
-            color: $color-neutral-inactive;
+            color: $s-color-neutral-inactive;
           }
         }
         .el-range-separator {
-          color: $color-neutral-inactive;
+          color: $s-color-neutral-inactive;
         }
       }
       .s-icon-chevron-bottom {
-        color: $color-neutral-inactive;
+        color: $s-color-neutral-inactive;
       }
     }
   }
@@ -412,77 +408,77 @@ export default class SDatePicker extends Vue {
 .el-picker-panel__link-btn,
 .el-time-panel__btn,
 .el-date-range-picker__time-header > .el-icon-arrow-right {
-  color: $color-basic-black;
+  color: $s-color-basic-black;
 }
 .el-picker-panel {
-  border-color: $color-neutral-hover;
+  border-color: $s-color-neutral-hover;
   .el-picker-panel__content {
     .el-date-table {
       td {
         &.available:hover {
-          color: $color-main-brand;
+          color: $s-color-main-brand;
         }
         &.next-month, &.prev-month {
-          color: $color-neutral-inactive;
+          color: $s-color-neutral-inactive;
         }
       }
       th {
-        border-bottom-color: $color-neutral-hover;
+        border-bottom-color: $s-color-neutral-hover;
       }
     }
   }
   .el-picker-panel__footer {
-    border-top-color: $color-neutral-hover;
+    border-top-color: $s-color-neutral-hover;
     > .el-button {
       height: 32px;
       border-radius: 4px;
     }
   }
   div[x-arrow].popper__arrow {
-    border-bottom-color: $color-neutral-hover;
+    border-bottom-color: $s-color-neutral-hover;
   }
 }
 .el-time-panel {
   border-radius: 4px;
-  border-color: $color-neutral-hover;
+  border-color: $s-color-neutral-hover;
   .el-time-panel__footer {
-    border-top-color: $color-neutral-hover;
+    border-top-color: $s-color-neutral-hover;
   }
   .el-time-spinner__item {
     &.active:not(.disabled) {
-      color: $color-basic-black;
+      color: $s-color-basic-black;
     }
     &:hover:not(.disabled):not(.active) {
-      background-color: $color-neutral-placeholder;
+      background-color: $s-color-neutral-placeholder;
     }
   }
   .el-time-panel__content {
     &::after, &::before {
-      border-top-color: $color-neutral-hover;
-      border-bottom-color: $color-neutral-hover;
+      border-top-color: $s-color-neutral-hover;
+      border-bottom-color: $s-color-neutral-hover;
     }
   }
 }
 .el-date-table.is-week-mode .el-date-table__row {
   &.current, &:hover {
     div {
-      background-color: $color-main-hover-light;
+      background-color: $s-color-main-hover-light;
     }
   }
 }
 .el-month-table td.in-range div {
-  background-color: $color-main-hover-light;
+  background-color: $s-color-main-hover-light;
   &:hover {
-    background-color: $color-main-hover-light;
+    background-color: $s-color-main-hover-light;
   }
 }
 .el-date-table td.in-range div {
-  background-color: $color-main-hover-light;
+  background-color: $s-color-main-hover-light;
   &:hover {
-    background-color: $color-main-hover-light;
+    background-color: $s-color-main-hover-light;
   }
 }
 .el-date-range-picker__content.is-left {
-  border-right-color: $color-neutral-hover;
+  border-right-color: $s-color-neutral-hover;
 }
 </style>
diff --git a/src/components/Dialog/SDialog.vue b/src/components/Dialog/SDialog.vue
index 258c6506..d15e4140 100644
--- a/src/components/Dialog/SDialog.vue
+++ b/src/components/Dialog/SDialog.vue
@@ -213,7 +213,7 @@ export default class SDialog extends Vue {
   .el-dialog__title {
     font-weight: bold;
     font-size: 16px;
-    color: $color-basic-black;
+    color: $s-color-basic-black;
   }
   > * {
     word-break: break-word;
diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown.vue
index bd0e5064..bbbb3295 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}`)
         })
       })
     }
@@ -199,17 +199,17 @@ export default class SDropdown extends Vue {
       float: left;
     }
     .el-dropdown__caret-button {
-      &.secondary {
+      &.s-secondary {
         &::before {
-          background-color: $color-neutral-border;
+          background-color: $s-color-neutral-border;
         }
         &:hover, &:active, &:focus {
           &::before {
-            background-color: $color-main-brand;
+            background-color: $s-color-main-brand;
           }
         }
       }
-      &.tertiary {
+      &.s-tertiary, &.s-link {
         &::before {
           background-color: transparent;
         }
diff --git a/src/components/Dropdown/SDropdownItem.vue b/src/components/Dropdown/SDropdownItem.vue
index 9e729274..b3e04fd9 100644
--- a/src/components/Dropdown/SDropdownItem.vue
+++ b/src/components/Dropdown/SDropdownItem.vue
@@ -49,8 +49,8 @@ export default class SDropdownItem extends Vue {
 
 .el-dropdown-menu__item:not(.is-disabled) {
   &:hover, &:focus {
-    background-color: $color-neutral-placeholder;
-    color: $color-basic-black;
+    background-color: $s-color-neutral-placeholder;
+    color: $s-color-basic-black;
   }
 }
 </style>
diff --git a/src/components/Form/SFormItem.vue b/src/components/Form/SFormItem.vue
index 1c7f347c..c65b50be 100644
--- a/src/components/Form/SFormItem.vue
+++ b/src/components/Form/SFormItem.vue
@@ -141,42 +141,42 @@ export default class SFormItem extends Vue {
         position: relative;
         padding-top: 8px;
         padding-left: 30px;
-        color: $color-basic-black;
+        color: $s-color-basic-black;
         &::before {
           content: '';
         }
       }
       > [class^="s-input"]:not(.disabled) {
         .placeholder {
-          color: $color-error;
-          background-color: $color-main-base;
+          color: $s-color-error;
+          background-color: $s-color-main-base;
         }
         input, textarea {
-          background-color: $color-main-base;
+          background-color: $s-color-main-base;
           &::placeholder {
-            color: $color-error;
+            color: $s-color-error;
           }
         }
         &:hover {
           .placeholder,
           .el-input > input,
           .el-textarea > textarea {
-            background-color: $color-main-hover-light;
+            background-color: $s-color-main-hover-light;
           }
           .el-input > input,
           .el-textarea > textarea {
-            border-color: $color-error;
+            border-color: $s-color-error;
           }
         }
         &.focused {
           .placeholder,
           .el-input > input,
           .el-textarea > textarea {
-            background-color: $color-basic-white;
+            background-color: $s-color-basic-white;
           }
           .el-input > input,
           .el-textarea > textarea {
-            border-color: $color-error;
+            border-color: $s-color-error;
           }
         }
       }
@@ -186,7 +186,7 @@ export default class SFormItem extends Vue {
       bottom: 0;
       left: 4px;
       font-size: 16px;
-      color: $color-error;
+      color: $s-color-error;
     }
   }
 }
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..078581d3 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
   }
@@ -239,14 +239,14 @@ export default class SInput extends Vue {
 .s-input {
   font-family: $font-family-default;
   width: 100%;
-  min-height: $size-big;
+  min-height: $s-size-big;
   position: relative;
   .el-input__suffix {
     z-index: 1;
   }
-  .placeholder {
+  .s-placeholder {
     // TODO: add default animation from material-ui
-    color: $color-neutral-secondary;
+    color: $s-color-neutral-secondary;
     text-align: left;
     font-size: 12px;
     padding: 0 15px;
@@ -257,7 +257,7 @@ export default class SInput extends Vue {
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
-    background-color: $color-neutral-placeholder;
+    background-color: $s-color-neutral-placeholder;
     pointer-events: none;
   }
   .el-input,
@@ -265,11 +265,11 @@ export default class SInput extends Vue {
     height: 100%;
     > input,
     > textarea {
-      height: $size-big;
-      border: 1px solid $color-neutral-placeholder;
-      background-color: $color-neutral-placeholder;
+      height: $s-size-big;
+      border: 1px solid $s-color-neutral-placeholder;
+      background-color: $s-color-neutral-placeholder;
       &::placeholder {
-        color: $color-neutral-secondary;
+        color: $s-color-neutral-secondary;
         opacity: 1; // Firefox
       }
     }
@@ -281,47 +281,47 @@ export default class SInput extends Vue {
     }
   }
   &:hover {
-    .placeholder,
+    .s-placeholder,
     .el-input > input,
     .el-textarea > textarea {
-      background-color: $color-neutral-hover;
+      background-color: $s-color-neutral-hover;
     }
     .el-input > input,
     .el-textarea > textarea {
-      border-color: $color-neutral-hover;
+      border-color: $s-color-neutral-hover;
     }
   }
-  &.focused {
-    .placeholder,
+  &.s-focused {
+    .s-placeholder,
     .el-input > input,
     .el-textarea > textarea {
-      background-color: $color-basic-white;
+      background-color: $s-color-basic-white;
     }
     .el-input > input,
     .el-textarea > textarea {
-      border-color: $color-neutral-border;
+      border-color: $s-color-neutral-border;
     }
   }
-  &.disabled {
-    .placeholder,
+  &.s-disabled {
+    .s-placeholder,
     .el-input > input,
     .el-textarea > textarea {
-      color: $color-neutral-secondary;
-      background-color: $color-neutral-placeholder;
+      color: $s-color-neutral-secondary;
+      background-color: $s-color-neutral-placeholder;
     }
     .el-input > input,
     .el-textarea > textarea {
-      border-color: $color-neutral-border;
+      border-color: $s-color-neutral-border;
     }
   }
-  &.autofill {
-    .placeholder {
+  &.s-autofill {
+    .s-placeholder {
       background-color: transparent !important;
     }
   }
   .el-input > input {
     &:-webkit-autofill {
-      color: $color-basic-black !important;
+      color: $s-color-basic-black !important;
       animation-name: onAutoFillStart; // Expose a hook for JavaScript when auto fill is shown
     }
     &:not(:-webkit-autofill) {
@@ -334,7 +334,7 @@ export default class SInput extends Vue {
       animation-name: onAutoFillCancel;
     }
   }
-  .placeholder + .el-input {
+  .s-placeholder + .el-input {
     > input {
       padding-top: 12px;
     }
@@ -342,10 +342,10 @@ export default class SInput extends Vue {
       padding-top: 11px;
     }
   }
-  .placeholder + .el-textarea > textarea {
+  .s-placeholder + .el-textarea > textarea {
     padding-top: 24px;
   }
-  &.text-file {
+  &.s-text-file {
     .el-input > input {
       padding-right: 56px;
     }
diff --git a/src/components/Input/SJsonInput.vue b/src/components/Input/SJsonInput.vue
index 840dbc43..c528c000 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
   }
@@ -116,9 +116,9 @@ $color-ide-boolean: #0000FF;
 
 .s-json-input {
   width: 100%;
-  border: 1px solid $color-neutral-border;
-  border-radius: $border-radius-default;
-  &.disabled {
+  border: 1px solid $s-color-neutral-border;
+  border-radius: $s-border-radius-default;
+  &.s-disabled {
     .ace-jsoneditor {
       pointer-events: none;
       .ace_cursor {
@@ -126,11 +126,11 @@ $color-ide-boolean: #0000FF;
       }
       .ace_scroller,
       .ace_gutter-active-line {
-        background-color: $color-neutral-placeholder;
+        background-color: $s-color-neutral-placeholder;
       }
     }
   }
-  &.readonly .jsoneditor {
+  &.s-readonly .jsoneditor {
     .ace_gutter .ace_gutter-cell.ace_error {
       background-image: none;
     }
@@ -151,11 +151,11 @@ $color-ide-boolean: #0000FF;
     .ace_fold {
       border: none;
       background: none;
-      color: $color-basic-black;
+      color: $s-color-basic-black;
       margin-top: -13px;
     }
     .ace_text-layer {
-      color: $color-basic-black;
+      color: $s-color-basic-black;
     }
     .ace_variable {
       color: $color-ide-variable;
@@ -176,10 +176,10 @@ $color-ide-boolean: #0000FF;
       border-top-right-radius: 3px;
       .ace_marker-layer {
         .ace_active-line {
-          background-color: $color-neutral-placeholder;
+          background-color: $s-color-neutral-placeholder;
         }
         .ace_selection {
-          background: $color-neutral-border;
+          background: $s-color-neutral-border;
         }
       }
     }
@@ -187,8 +187,8 @@ $color-ide-boolean: #0000FF;
   .jsoneditor-statusbar {
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
-    background-color: $color-neutral-placeholder;
-    color: $color-neutral-secondary;
+    background-color: $s-color-neutral-placeholder;
+    color: $s-color-neutral-secondary;
     .jsoneditor-parse-error-icon {
       // If full error message will be needed, then it should be removed
       display: none !important;
@@ -196,9 +196,9 @@ $color-ide-boolean: #0000FF;
     }
   }
   .ace_gutter {
-    background-color: $color-neutral-placeholder;
+    background-color: $s-color-neutral-placeholder;
     &-active-line {
-      background-color: $color-neutral-border;
+      background-color: $s-color-neutral-border;
     }
     // .ace_gutter-cell.ace_error {
     //   @extend .s-icon-error; // TODO: fix the path for icon
@@ -210,10 +210,10 @@ $color-ide-boolean: #0000FF;
   }
   .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;
+    background: $s-color-basic-black;
+    border-color: $s-color-basic-black;
+    color: $s-color-basic-white;
+    border-radius: $s-border-radius-default;
     padding: 10px;
     font-size: 12px;
     line-height: 1.2;
diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue
index 4f1b1aaa..1955da6d 100644
--- a/src/components/Pagination/SPagination.vue
+++ b/src/components/Pagination/SPagination.vue
@@ -201,16 +201,16 @@ export default class SPagination extends Vue {
 
 .el-pagination {
   .btn-prev, .btn-next {
-    color: $color-basic-black;
+    color: $s-color-basic-black;
   }
   button:disabled {
-    color: $color-neutral-inactive;
+    color: $s-color-neutral-inactive;
   }
   .el-pagination__sizes {
     .el-select .el-input {
       width: 65px;
       .el-select__caret, .el-input__inner {
-        color: $color-basic-black;
+        color: $s-color-basic-black;
         font-weight: bold;
       }
       .el-select__caret {
@@ -220,12 +220,12 @@ export default class SPagination extends Vue {
         border-radius: 8px;
         padding-right: 20px;
         padding-left: 5px;
-        background-color: $color-neutral-placeholder;
-        border-color: $color-neutral-placeholder;
+        background-color: $s-color-neutral-placeholder;
+        border-color: $s-color-neutral-placeholder;
       }
       &.is-disabled {
         .el-select__caret, .el-input__inner {
-          color: $color-neutral-inactive;
+          color: $s-color-neutral-inactive;
         }
       }
     }
@@ -233,47 +233,47 @@ export default class SPagination extends Vue {
   .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;
+      background-color: $s-color-neutral-placeholder;
+      border-color: $s-color-neutral-placeholder;
+      color: $s-color-basic-black;
     }
     &.is-disabled .el-input__inner {
-      color: $color-neutral-inactive;
+      color: $s-color-neutral-inactive;
     }
   }
   .el-pagination__total, .per-page-text, .el-pagination__jump {
-    color: $color-neutral-secondary;
+    color: $s-color-neutral-secondary;
     font-weight: normal;
   }
   .el-pager li {
-    color: $color-basic-black;
+    color: $s-color-basic-black;
     &.btn-quicknext, &.btn-quickprev {
-      color: $color-basic-black;
+      color: $s-color-basic-black;
     }
     &:not(.disabled) {
       &:hover, &.active {
-        color: $color-main-brand;
+        color: $s-color-main-brand;
       }
     }
     &.disabled {
-      color: $color-neutral-inactive;
+      color: $s-color-neutral-inactive;
     }
   }
   &.is-background {
     .el-pager li {
-      background-color: $color-neutral-placeholder;
+      background-color: $s-color-neutral-placeholder;
       &.disabled {
-        color: $color-neutral-inactive;
+        color: $s-color-neutral-inactive;
       }
     }
     .btn-prev, .btn-next {
-      background-color: $color-neutral-placeholder;
+      background-color: $s-color-neutral-placeholder;
       &:disabled {
-        color: $color-neutral-inactive;
-        background-color: $color-neutral-placeholder;
+        color: $s-color-neutral-inactive;
+        background-color: $s-color-neutral-placeholder;
       }
       &:not(:disabled):hover {
-        color: $color-main-brand;
+        color: $s-color-main-brand;
       }
     }
   }
diff --git a/src/components/Radio/SRadio.vue b/src/components/Radio/SRadio.vue
index 19ded97c..76906d36 100644
--- a/src/components/Radio/SRadio.vue
+++ b/src/components/Radio/SRadio.vue
@@ -65,7 +65,7 @@ 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
   }
@@ -77,9 +77,9 @@ export default class SRadio extends Vue {
 @import "../../styles/common.scss";
 
 .el-radio {
-  &.big {
-    @extend .big;
-    line-height: $size-big;
+  &.s-big {
+    @extend .s-big;
+    line-height: $s-size-big;
     &.is-bordered {
       padding-top: 18px;
     }
@@ -93,9 +93,9 @@ export default class SRadio extends Vue {
       }
     }
   }
-  &.medium {
-    @extend .medium;
-    line-height: $size-medium;
+  &.s-medium {
+    @extend .s-medium;
+    line-height: $s-size-medium;
     > .el-radio__input .el-radio__inner {
       width: 16px;
       height: 16px;
@@ -106,9 +106,9 @@ export default class SRadio extends Vue {
       }
     }
   }
-  &.small {
-    @extend .small;
-    line-height: $size-small;
+  &.s-small {
+    @extend .s-small;
+    line-height: $s-size-small;
     &.is-bordered {
       padding-top: 9px;
     }
@@ -128,33 +128,33 @@ export default class SRadio extends Vue {
   &.is-bordered {
     line-height: 0;
     &.is-disabled {
-      border-color: $color-neutral-border;
+      border-color: $s-color-neutral-border;
     }
   }
   > .el-radio__input {
     .el-radio__inner {
-      background-color: $color-basic-white;
+      background-color: $s-color-basic-white;
       &::after {
-        background-color: $color-main-brand;
+        background-color: $s-color-main-brand;
       }
     }
     &.is-checked .el-radio__inner {
-      background-color: $color-basic-white;
+      background-color: $s-color-basic-white;
     }
     &.is-disabled {
       .el-radio__inner {
-        background-color: $color-neutral-placeholder;
-        border-color: $color-neutral-border;
+        background-color: $s-color-neutral-placeholder;
+        border-color: $s-color-neutral-border;
       }
       &.is-checked .el-radio__inner {
-        background-color: $color-neutral-placeholder;
-        border-color: $color-neutral-border;
+        background-color: $s-color-neutral-placeholder;
+        border-color: $s-color-neutral-border;
         &::after {
-          background-color: $color-neutral-inactive;
+          background-color: $s-color-neutral-inactive;
         }
       }
       & + span.el-radio__label {
-        color: $color-neutral-inactive;
+        color: $s-color-neutral-inactive;
       }
     }
   }
diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue
index fe3bc35f..88cba035 100644
--- a/src/components/ScrollSections/SScrollSections.vue
+++ b/src/components/ScrollSections/SScrollSections.vue
@@ -229,7 +229,7 @@ export default class SScrollSections extends Vue {
       &.disabled {
         cursor: not-allowed;
         pointer-events: none;
-        color: $color-neutral-inactive;
+        color: $s-color-neutral-inactive;
         border-left: none;
       }
     }
@@ -237,7 +237,7 @@ export default class SScrollSections extends Vue {
 }
 .s-scroll-content {
   padding-bottom: 90%;
-  color: $color-basic-black;
+  color: $s-color-basic-black;
   .title {
     font-size: 16px;
   }
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..abddf8b7 100644
--- a/src/components/Select/SOptionGroup.vue
+++ b/src/components/Select/SOptionGroup.vue
@@ -26,9 +26,9 @@ export default class SOptionGroup extends Vue {
 @import "../../styles/variables.scss";
 
 .el-select-group__wrap:not(:last-of-type)::after {
-  background-color: $color-neutral-hover;
+  background-color: $s-color-neutral-hover;
 }
 .el-select-group__title {
-  color: $color-neutral-tertiary;
+  color: $s-color-neutral-tertiary;
 }
 </style>
diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
index 8ed019e1..2c2697c6 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
   }
@@ -212,43 +212,43 @@ export default class SSelect extends Vue {
     }
     .el-input {
       &.is-focus .el-input__inner {
-        border-color: $color-neutral-placeholder;
+        border-color: $s-color-neutral-placeholder;
       }
       .el-input__inner {
         &::placeholder {
-          color: $color-neutral-secondary;
+          color: $s-color-neutral-secondary;
           opacity: 1; // Firefox
         }
       }
       .el-select__caret {
-        color: $color-neutral-secondary;
+        color: $s-color-neutral-secondary;
       }
     }
   }
-  &.input {
+  &.s-input-type {
     .el-select {
       .el-input__inner {
-        height: $size-big;
+        height: $s-size-big;
         padding: 0 15px;
-        border: 1px solid $color-neutral-placeholder;
-        background-color: $color-neutral-placeholder;
+        border: 1px solid $s-color-neutral-placeholder;
+        background-color: $s-color-neutral-placeholder;
         &:focus {
-          border-color: $color-neutral-placeholder;
+          border-color: $s-color-neutral-placeholder;
         }
       }
     }
     &:hover {
       .el-select {
         .el-input__inner {
-          border-color: $color-neutral-hover;
-          background-color: $color-neutral-hover;
+          border-color: $s-color-neutral-hover;
+          background-color: $s-color-neutral-hover;
         }
       }
-      .placeholder {
-        background-color: $color-neutral-hover;
+      .s-placeholder {
+        background-color: $s-color-neutral-hover;
       }
     }
-    .placeholder + .el-select {
+    .s-placeholder + .el-select {
       .el-input__inner {
         padding-top: 12px;
       }
@@ -256,40 +256,40 @@ export default class SSelect extends Vue {
         padding-top: 11px;
       }
     }
-    &.focused {
+    &.s-focused {
       .el-select {
         .el-input__inner {
-          border-color: $color-neutral-border;
-          background-color: $color-basic-white;
+          border-color: $s-color-neutral-border;
+          background-color: $s-color-basic-white;
         }
       }
-      .placeholder {
-        background-color: $color-basic-white;
+      .s-placeholder {
+        background-color: $s-color-basic-white;
       }
     }
-    &.disabled {
+    &.s-disabled {
       .el-select {
         .el-select__caret {
-          color: $color-neutral-secondary;
+          color: $s-color-neutral-secondary;
         }
         .el-input__inner, .el-input__inner:hover {
-          border-color: $color-neutral-border;
-          color: $color-neutral-secondary;
-          background-color: $color-neutral-placeholder;
+          border-color: $s-color-neutral-border;
+          color: $s-color-neutral-secondary;
+          background-color: $s-color-neutral-placeholder;
           &::placeholder {
-            color: $color-neutral-secondary;
+            color: $s-color-neutral-secondary;
           }
         }
       }
-      .placeholder {
-        color: $color-neutral-secondary;
-        background-color: $color-neutral-placeholder;
+      .s-placeholder {
+        color: $s-color-neutral-secondary;
+        background-color: $s-color-neutral-placeholder;
       }
     }
   }
-  .placeholder {
+  .s-placeholder {
     // TODO: add default animation from material-ui
-    color: $color-neutral-secondary;
+    color: $s-color-neutral-secondary;
     text-align: left;
     font-size: 12px;
     padding: 0 15px;
@@ -300,63 +300,63 @@ export default class SSelect extends Vue {
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
-    background-color: $color-neutral-placeholder;
+    background-color: $s-color-neutral-placeholder;
     pointer-events: none;
   }
-  &.select {
+  &.s-select-type {
     .el-select {
       .el-input__inner {
         border-radius: 8px;
         padding-left: 12px;
         font-weight: bold;
         &:hover {
-          border-color: $color-neutral-inactive;
+          border-color: $s-color-neutral-inactive;
         }
         &::placeholder {
-          color: $color-neutral-tertiary;
+          color: $s-color-neutral-tertiary;
           font-weight: bold;
         }
         &:focus {
-          border-color: $color-neutral-inactive;
+          border-color: $s-color-neutral-inactive;
         }
       }
       .el-select__caret {
-        color: $color-neutral-tertiary;
+        color: $s-color-neutral-tertiary;
       }
     }
-    &.focused {
+    &.s-focused {
       .el-select {
         .el-input__inner {
-          color: $color-basic-black;
-          border-color: $color-neutral-inactive;
+          color: $s-color-basic-black;
+          border-color: $s-color-neutral-inactive;
           &::placeholder {
-            color: $color-basic-black;
+            color: $s-color-basic-black;
           }
         }
         .el-select__caret {
-          color: $color-basic-black;
+          color: $s-color-basic-black;
         }
       }
     }
-    &.has-value {
+    &.s-has-value {
       .el-select {
         .el-select__caret {
-          color: $color-basic-black;
+          color: $s-color-basic-black;
         }
       }
     }
-    &.disabled {
+    &.s-disabled {
       .el-select {
         .el-input__inner {
-          color: $color-neutral-inactive;
-          border-color: $color-neutral-border;
-          background-color: $color-basic-white;
+          color: $s-color-neutral-inactive;
+          border-color: $s-color-neutral-border;
+          background-color: $s-color-basic-white;
           &::placeholder {
-            color: $color-neutral-inactive;
+            color: $s-color-neutral-inactive;
           }
         }
         .el-select__caret {
-          color: $color-neutral-inactive;
+          color: $s-color-neutral-inactive;
         }
       }
     }
@@ -367,24 +367,24 @@ export default class SSelect extends Vue {
     background-color: transparent;
   }
   &:hover {
-    background-color: $color-neutral-placeholder;
+    background-color: $s-color-neutral-placeholder;
   }
   &.is-disabled {
-    color: $color-neutral-inactive;;
+    color: $s-color-neutral-inactive;;
   }
 }
 .el-select-dropdown.is-multiple .el-select-dropdown__item {
   > span {
     padding-left: 16px;
     vertical-align: top;
-    color: $color-basic-black;
+    color: $s-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;
+    color: $s-color-basic-white;
+    border: 1px solid $s-color-neutral-border;
+    background-color: $s-color-basic-white;
     font-size: 16px;
     font-weight: bold;
     padding: 1px;
@@ -396,12 +396,12 @@ export default class SSelect extends Vue {
       background-color: transparent;
     }
     &:hover {
-      background-color: $color-neutral-placeholder;
+      background-color: $s-color-neutral-placeholder;
     }
     &::before {
-      color: $color-basic-white;
-      background-color: $color-main-brand;
-      border-color: $color-main-brand;
+      color: $s-color-basic-white;
+      background-color: $s-color-main-brand;
+      border-color: $s-color-main-brand;
     }
     &::after {
       content: '';
diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs.vue
index b2ef4019..6bf29610 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
   }
@@ -136,41 +136,41 @@ export default class STabs extends Vue {
       }
     }
     &:not(.is-active) {
-      color: $color-basic-black;
+      color: $s-color-basic-black;
     }
   }
   .el-tab-pane {
-    color: $color-basic-black;
+    color: $s-color-basic-black;
   }
   .el-tabs__nav-wrap::after {
-    background-color: $color-neutral-placeholder;
+    background-color: $s-color-neutral-placeholder;
   }
   .el-tabs--card {
     > .el-tabs__header {
-      border-bottom-color: $color-neutral-hover;
+      border-bottom-color: $s-color-neutral-hover;
       .el-tabs__nav {
-        border-color: $color-neutral-hover;
+        border-color: $s-color-neutral-hover;
         border-top-left-radius: 8px;
         border-top-right-radius: 8px;
       }
       .el-tabs__item {
-        border-left-color: $color-neutral-hover;
+        border-left-color: $s-color-neutral-hover;
       }
     }
   }
   .el-tabs--border-card {
-    border-color: $color-neutral-border;
+    border-color: $s-color-neutral-border;
     > .el-tabs__header {
-      background-color: $color-neutral-placeholder;
-      border-bottom-color: $color-neutral-border;
+      background-color: $s-color-neutral-placeholder;
+      border-bottom-color: $s-color-neutral-border;
     }
   }
-  &.rounded {
+  &.s-rounded {
     .el-tabs__header {
       width: fit-content;
     }
     .el-tabs__nav-wrap {
-      background-color: $color-neutral-placeholder;
+      background-color: $s-color-neutral-placeholder;
       border-radius: 8px;
       height: 32px;
       padding-top: 2px;
@@ -187,7 +187,7 @@ export default class STabs extends Vue {
           padding: 0 32px;
         }
         &.is-active {
-          color: $color-basic-black;
+          color: $s-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;
diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index 2c15c19a..a5776490 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -365,7 +365,7 @@ export default class STable extends Vue {
 @import "../../styles/variables.scss";
 
 .el-table--enable-row-hover .el-table__body tr:hover > td {
-  background-color: $color-neutral-hover;
+  background-color: $s-color-neutral-hover;
   border-left: none;
   border-right: none;
 }
@@ -376,7 +376,7 @@ export default class STable extends Vue {
       &.current-row > td,
       &.el-table__row--striped > td,
       &.el-table__row--striped.current-row > td {
-        background-color: $color-neutral-hover;
+        background-color: $s-color-neutral-hover;
         border-left: none;
         border-right: none;
       }
@@ -388,24 +388,24 @@ export default class STable extends Vue {
   padding-left: 13px;
 }
 .el-table thead {
-  color: $color-neutral-tertiary;
+  color: $s-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;
+  border-color: $s-color-neutral-placeholder;
 }
 .el-table--group::after,
 .el-table--border::after {
-  background-color: $color-neutral-placeholder;
+  background-color: $s-color-neutral-placeholder;
 }
 .el-table:not(.el-table--border)::before {
-  background-color: $color-basic-white;
+  background-color: $s-color-basic-white;
 }
 .el-table tr:last-child td {
-  border-bottom-color: $color-basic-white;
+  border-bottom-color: $s-color-basic-white;
 }
 .el-table__header {
   label.el-checkbox.is-disabled {
@@ -462,6 +462,6 @@ export default class STable extends Vue {
 }
 .el-table__header-wrapper tbody td,
 .el-table__footer-wrapper tbody td {
-  background-color: $color-neutral-placeholder;
+  background-color: $s-color-neutral-placeholder;
 }
 </style>
diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue
index 1cd77a70..ad1fe903 100644
--- a/src/components/Tooltip/STooltip.vue
+++ b/src/components/Tooltip/STooltip.vue
@@ -129,11 +129,11 @@ export default class STooltip extends Vue {
 
 .el-tooltip__popper {
   &.is-dark {
-    background-color: $color-basic-black;
+    background-color: $s-color-basic-black;
   }
   &.is-light {
-    color: $color-basic-black;
+    color: $s-color-basic-black;
   }
-  border-color: $color-basic-black;
+  border-color: $s-color-basic-black;
 }
 </style>
diff --git a/src/stories/Dropdown/SDropdown.stories.ts b/src/stories/Dropdown/SDropdown.stories.ts
index b28c813b..0a6962a4 100644
--- a/src/stories/Dropdown/SDropdown.stories.ts
+++ b/src/stories/Dropdown/SDropdown.stories.ts
@@ -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/SButton.stories.ts b/src/stories/SButton.stories.ts
index 8a209eae..e0ca996b 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -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)
     },
diff --git a/src/styles/common.scss b/src/styles/common.scss
index dd3796c6..48a715da 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -22,16 +22,16 @@ html {
   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 +70,25 @@ button > span {
 .el-message-box {
   .el-message-box__header {
     .el-message-box__title {
-      color: $color-basic-black;
+      color: $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: $s-color-main-brand;
+        background-color: $s-color-basic-white;
+        border-color: $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: $s-color-basic-white;
+          background-color: $s-color-main-hover;
+          border-color: $s-color-main-hover;
         }
       }
     }
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
index c008b6b0..ada8c48f 100644
--- a/src/styles/element-variables.scss
+++ b/src/styles/element-variables.scss
@@ -1,14 +1,14 @@
 @import "./variables.scss";
 
-$--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/icons.scss b/src/styles/icons.scss
index 53039ba4..0bcd5135 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -9,7 +9,7 @@
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: $color-basic-black;
+  color: $s-color-basic-black;
 }
 $icons-font: 'soramitsu-icons' !important;
 /*_____________________________________________Icons variables_____________________________________________*/
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 5b688981..6f082b07 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,28 +1,28 @@
 // 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;
+$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";