diff --git a/package.json b/package.json
index 4199f88a..70510303 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
@@ -32,7 +32,7 @@
     "v-jsoneditor": "^1.4.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
-    "vue-property-decorator": "^8.4.1",
+    "vue-property-decorator": "^9.1.2",
     "vuex": "^3.1.3",
     "vuex-class": "^0.3.2"
   },
diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index d6ecbffa..3bb9b7e3 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -14,12 +14,15 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 
+import { DesignSystemInject } from '../DesignSystem'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
+import SizeMixin from '../../mixins/SizeMixin'
+import StatusMixin from '../../mixins/StatusMixin'
 import { CardShadow } from './consts'
 import { BorderRadius } from '@/types'
 
 @Component
-export default class SCard extends Mixins(BorderRadiusMixin) {
+export default class SCard extends Mixins(BorderRadiusMixin, SizeMixin, StatusMixin, DesignSystemInject) {
   /**
    * Header of the card. Also it can be set by slot#header
    */
@@ -44,15 +47,38 @@ export default class SCard extends Mixins(BorderRadiusMixin) {
   @Prop({ default: false, type: Boolean }) readonly clickable!: boolean
 
   @Prop({ default: BorderRadius.MEDIUM }) borderRadius!: string
+  /**
+   * Does card should looks like it's under surface (inner shadow)
+   */
+  @Prop({ default: false, type: Boolean }) readonly pressed!: boolean
+  /**
+   * Should it be a main card (app content wrapper)
+   */
+  @Prop({ default: false, type: Boolean }) readonly primary!: boolean
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
+    if (this.statusClass) {
+      cssClasses.push(this.statusClass)
+    }
+    if (this.isStandardSize) {
+      cssClasses.push(`s-size-${this.size}`)
+    }
     if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }
     if (this.clickable) {
       cssClasses.push('s-clickable')
     }
+    if (this.primary) {
+      cssClasses.push('s-primary')
+    }
+    if (this.pressed) {
+      cssClasses.push('s-pressed')
+    }
     return cssClasses
   }
 
diff --git a/src/components/DesignSystem/SDesignSystemProvider.vue b/src/components/DesignSystem/SDesignSystemProvider.vue
index a6922930..a6bae2c7 100644
--- a/src/components/DesignSystem/SDesignSystemProvider.vue
+++ b/src/components/DesignSystem/SDesignSystemProvider.vue
@@ -5,14 +5,21 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Provide } from 'vue-property-decorator'
+import { Component, Vue, Prop, Provide, Watch } from 'vue-property-decorator'
 import { DesignSystemProvideKey } from './consts'
 import { DesignSystemTypes } from '../../utils/DesignSystem'
 
 @Component
 export default class SDesignSystemProvider extends Vue {
   @Prop({ default: DesignSystemTypes.DEFAULT, type: String }) readonly value!: string
-  @Provide(DesignSystemProvideKey) designSystem = this
+  @Provide(DesignSystemProvideKey) providedObject = {
+    value: DesignSystemTypes.DEFAULT
+  }
+
+  @Watch('value', { immediate: true })
+  onValueChange (newValue: DesignSystemTypes) {
+    this.providedObject.value = newValue
+  }
 }
 </script>
 
diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 2ac3d40f..7cd64228 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -9,7 +9,7 @@
       <slot name="left" />
 
       <div class="s-input__input">
-        <span v-if="value && !isMediumInput && !$slots.top" class="s-placeholder">{{ placeholder }}</span>
+        <span v-if="value && isBigInput && !$slots.top" class="s-placeholder">{{ placeholder }}</span>
         <el-input
           ref="el-input"
           :value="value"
@@ -179,8 +179,8 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject
     return [InputType.TEXT, InputType.TEXTAREA].includes(this.type as InputType)
   }
 
-  get isMediumInput (): boolean {
-    return this.type === InputType.TEXT && this.size === InputSize.MEDIUM
+  get isBigInput (): boolean {
+    return this.type === InputType.TEXT && this.size === InputSize.BIG
   }
 
   get computedClasses (): Array<string> {
@@ -207,7 +207,7 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject
       cssClasses.push('s-autofill')
     }
     if (this.size) {
-      cssClasses.push(this.sizeClass)
+      cssClasses.push(`s-size-${this.size}`)
     }
     if (this.prefix) {
       cssClasses.push('s-input--prefix')
@@ -218,16 +218,6 @@ export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject
     return cssClasses
   }
 
-  get sizeClass (): string {
-    switch (this.size) {
-      case InputSize.MEDIUM:
-        return 's-size-medium'
-      case InputSize.BIG:
-      default:
-        return ''
-    }
-  }
-
   get computedType (): string {
     if (this.type === InputType.TEXT_FILE) {
       return InputType.TEXT
diff --git a/src/components/Input/consts.ts b/src/components/Input/consts.ts
index bb48a246..82796e87 100644
--- a/src/components/Input/consts.ts
+++ b/src/components/Input/consts.ts
@@ -31,6 +31,7 @@ export enum InputType {
 }
 
 export enum InputSize {
+  SMALL = 'small',
   MEDIUM = 'medium',
   BIG = 'big'
 }
diff --git a/src/components/Radio/SRadio.vue b/src/components/Radio/SRadio.vue
index ff62d7d5..62ed9721 100644
--- a/src/components/Radio/SRadio.vue
+++ b/src/components/Radio/SRadio.vue
@@ -1,5 +1,6 @@
 <template>
-  <el-radio-button v-if="isRadioButton"
+  <component :is="radioComponent"
+    class="s-radio"
     :class="computedClasses"
     v-model="model"
     :label="label"
@@ -8,30 +9,17 @@
     :name="name"
   >
     <slot></slot>
-  </el-radio-button>
-  <el-radio v-else
-    :class="computedClasses"
-    v-model="model"
-    :label="label"
-    :disabled="disabled"
-    :border="border"
-    :name="name"
-  >
-    <slot></slot>
-  </el-radio>
+  </component>
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, ModelSync } from 'vue-property-decorator'
 
+import { DesignSystemInject } from '../DesignSystem'
 import SizeMixin from '../../mixins/SizeMixin'
 
 @Component
-export default class SRadio extends Mixins(SizeMixin) {
-  /**
-   * Binding value of the radio component. Can be `string` / `number` / `boolean`
-   */
-  @Prop() readonly value!: string | number | boolean
+export default class SRadio extends Mixins(SizeMixin, DesignSystemInject) {
   /**
    * Value of the radio component. Can be `string` / `number` / `boolean`
    */
@@ -56,22 +44,20 @@ export default class SRadio extends Mixins(SizeMixin) {
    * Native name property
    */
   @Prop({ default: '', type: String }) readonly name!: string
+  /**
+   * Binding value of the radio component. Can be `string` / `number` / `boolean`
+   */
+  @ModelSync('value', 'input', { type: [String, Number, Boolean] }) readonly model!: string | number | boolean
 
-  model = this.value
-
-  @Watch('value')
-  private handlePropChange (value: string | number | boolean): void {
-    this.model = value
-  }
-
-  @Watch('model')
-  private handleValueChange (value: string | number | boolean): void {
-    this.$emit('input', value)
-    this.$emit('change', value)
+  get radioComponent () {
+    return this.isRadioButton ? 'el-radio-button' : 'el-radio'
   }
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
     if (this.isStandardSize) {
       cssClasses.push(`s-${this.size}`)
     }
diff --git a/src/components/Radio/SRadioGroup.vue b/src/components/Radio/SRadioGroup.vue
index 36f0ace0..1b657ae8 100644
--- a/src/components/Radio/SRadioGroup.vue
+++ b/src/components/Radio/SRadioGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-radio-group
-    v-model="model"
+    v-model="groupModel"
     :size="computedSize"
     :disabled="disabled"
   >
@@ -9,32 +9,19 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, ModelSync } from 'vue-property-decorator'
 
 import SizeMixin from '../../mixins/SizeMixin'
 
 @Component
 export default class SRadio extends Mixins(SizeMixin) {
-  /**
-   * Binding value of the radio group. Can be `string` / `number` / `boolean`
-   */
-  @Prop() readonly value!: string | number | boolean
   /**
    * Whether the nesting radios are disabled.
    */
   @Prop({ default: false, type: Boolean }) readonly disabled!: boolean
-
-  model = this.value
-
-  @Watch('value')
-  private handlePropChange (value: string | number | boolean): void {
-    this.model = value
-  }
-
-  @Watch('model')
-  private handleValueChange (value: string | number | boolean): void {
-    this.$emit('input', value)
-    this.$emit('change', value)
-  }
+  /**
+   * Binding value of the radio group. Can be `string` / `number` / `boolean`
+   */
+  @ModelSync('value', 'input', { type: [String, Number, Boolean] }) readonly groupModel!: string | number | boolean
 }
 </script>
diff --git a/src/components/Switch/SSwitch.vue b/src/components/Switch/SSwitch.vue
index e8b85bc4..1b220064 100644
--- a/src/components/Switch/SSwitch.vue
+++ b/src/components/Switch/SSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="s-switch">
+  <div class="s-switch" :class="computedClasses">
     <el-switch
       v-model="model"
       :active-icon-class="activeIconСlass"
@@ -17,11 +17,11 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
-import { ElSwitch } from 'element-ui/types/switch'
+import { Mixins, Component, Prop, Watch } from 'vue-property-decorator'
+import { DesignSystemInject } from '../DesignSystem'
 
 @Component
-export default class SSwitch extends Vue {
+export default class SSwitch extends Mixins(DesignSystemInject) {
   /**
    * Value of switch
    */
@@ -78,5 +78,13 @@ export default class SSwitch extends Vue {
   handleChange (value: boolean | string | number): void {
     this.$emit('change', value)
   }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
+    return cssClasses
+  }
 }
 </script>
diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs.vue
index 5fff3a8b..2379be4d 100644
--- a/src/components/Tab/STabs.vue
+++ b/src/components/Tab/STabs.vue
@@ -22,11 +22,12 @@
 <script lang="ts">
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
+import { DesignSystemInject } from '../DesignSystem'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { TabsType, TabsPosition } from './consts'
 
 @Component
-export default class STabs extends Mixins(BorderRadiusMixin) {
+export default class STabs extends Mixins(BorderRadiusMixin, DesignSystemInject) {
   /**
    * Name of the selected tab. Can be used with `v-model`.
    *
@@ -95,6 +96,9 @@ export default class STabs extends Mixins(BorderRadiusMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
     if (this.type === TabsType.ROUNDED &&
       ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
       cssClasses.push('s-rounded')
diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue
index a40eab8b..f07e242a 100644
--- a/src/components/Tooltip/STooltip.vue
+++ b/src/components/Tooltip/STooltip.vue
@@ -28,12 +28,13 @@ import { TooltipEffect } from 'element-ui/types/tooltip'
 import { PopoverPlacement } from 'element-ui/types/popover'
 import debounce from 'throttle-debounce/debounce'
 
+import { DesignSystemInject } from '../DesignSystem'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Theme } from '../../utils/Theme'
 import { TooltipTheme, TooltipPlacement } from './consts'
 
 @Component
-export default class STooltip extends Mixins(BorderRadiusMixin) {
+export default class STooltip extends Mixins(BorderRadiusMixin, DesignSystemInject) {
   /**
    * Theme of the tooltip. Supported values: `"dark"`, `"light"`, or `"auto"`.
    * `"auto"` means that it will be managed with theming controller by `setTheme` function
@@ -115,6 +116,9 @@ export default class STooltip extends Mixins(BorderRadiusMixin) {
 
   get computedPopperClass (): string {
     const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
     if (this.popperClass) {
       cssClasses.push(this.popperClass)
     }
diff --git a/src/mixins/StatusMixin.ts b/src/mixins/StatusMixin.ts
new file mode 100644
index 00000000..60a0a449
--- /dev/null
+++ b/src/mixins/StatusMixin.ts
@@ -0,0 +1,20 @@
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Status } from '../types'
+
+@Component
+export default class StatusMixin extends Vue {
+  /**
+   * Status of component. Possible values: `"default"`, `"success"`, `"warning"`, `"error"`.
+   *
+   * By default it's set to `"default"`
+   */
+  @Prop({ default: Status.DEFAULT }) status!: string
+
+  get isStandardStatus (): boolean {
+    return (Object.values(Status) as Array<string>).includes(this.status)
+  }
+
+  get statusClass (): string {
+    return this.isStandardStatus ? `s-status-${this.status}` : ''
+  }
+}
diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts
index c4b5571f..d93b45f5 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -97,7 +97,7 @@ export const withDifferentTypes = () => ({
                   {{ item.label }}
                 </s-button>
               </s-row>
-            <s-design-system-provider />`,
+            </s-design-system-provider>`,
   props: {
     designSystem: {
       default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts
index b98d05e8..0fe28fcc 100644
--- a/src/stories/SCard.stories.ts
+++ b/src/stories/SCard.stories.ts
@@ -1,8 +1,9 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
-import { SCard, SRow, SDropdown, SDropdownItem } from '../components'
-import { BorderRadius } from '../types'
+import { SCard, SRow, SDropdown, SDropdownItem, SDesignSystemProvider } from '../components'
+import { BorderRadius, Status, Size } from '../types'
 import { CardShadow } from '../components/Card'
+import { DesignSystemTypes } from '../utils/DesignSystem'
 
 export default {
   component: SCard,
@@ -11,10 +12,12 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SCard, SRow, SDropdown, SDropdownItem },
-  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
-               <s-card style="width: 80%;" :shadow="shadow" :border-radius="borderRadius" :clickable="clickable" @click="handleClick">
-                 <template slot="header">
+  components: { SCard, SRow, SDropdown, SDropdownItem, SDesignSystemProvider },
+  template: `
+            <s-design-system-provider :value="designSystem">
+              <s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
+               <s-card style="width: 80%;" :shadow="shadow" :border-radius="borderRadius" :clickable="clickable" :pressed="pressed" :primary="primary" :status="status" :size="size" @click="handleClick">
+                 <template slot="header" v-if="header">
                    <div class="s-flex" style="justify-content: space-between; padding-right: 20px;">
                      <span>{{ header }}</span>
                      <s-dropdown type="ellipsis" :border-radius="borderRadius">
@@ -31,19 +34,35 @@ export const configurable = () => ({
                    {{'List item ' + o }}
                  </div>
                </s-card>
-             </s-row>`,
+              </s-row>
+            </s-design-system-provider>`,
   props: {
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+    },
     shadow: {
       default: select('Shadow', Object.values(CardShadow), CardShadow.HOVER)
     },
     header: {
-      default: text('Header', 'Card header')
+      default: text('Header', 'Card header', undefined)
     },
     borderRadius: {
       default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
     },
+    status: {
+      default: select('Status', Object.values(Status), Status.DEFAULT)
+    },
+    size: {
+      default: select('Size', Object.values(Size), Size.BIG)
+    },
     clickable: {
       default: boolean('Clickable', false)
+    },
+    primary: {
+      default: boolean('Primary', false)
+    },
+    pressed: {
+      default: boolean('Pressed', false)
     }
   },
   methods: {
diff --git a/src/stories/SRadio.stories.ts b/src/stories/SRadio.stories.ts
index 226c63de..77b315b9 100644
--- a/src/stories/SRadio.stories.ts
+++ b/src/stories/SRadio.stories.ts
@@ -1,7 +1,8 @@
 import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
-import { SRadio, SRadioGroup, SRow, SCol } from '../components'
+import { SRadio, SRadioGroup, SRow, SCol, SDesignSystemProvider } from '../components'
 import { Size } from '../types'
+import { DesignSystemTypes } from '../utils/DesignSystem'
 
 export default {
   component: SRadio,
@@ -16,8 +17,10 @@ export const radioData = [
 ]
 
 export const configurable = () => ({
-  components: { SRadio, SRow, SCol },
-  template: `<s-row style="flex: 1;" :gutter="20">
+  components: { SRadio, SRow, SCol, SDesignSystemProvider },
+  template: `
+          <s-design-system-provider :value="designSystem">
+            <s-row style="flex: 1;" :gutter="20">
               <s-col v-for="item in items" :key="item.label" :span="6">
                 <s-radio
                   v-model="vModelValue"
@@ -33,13 +36,17 @@ export const configurable = () => ({
               <s-col :span="12" style="margin-top: 20px;">
                 <span>v-model="{{ vModelValue }}", @change="{{ changeValue }}"</span>
               </s-col>
-            </s-row>`,
+            </s-row>
+          </s-design-system-provider>`,
   data: () => ({
     vModelValue: 'first',
     changeValue: '',
     items: radioData
   }),
   props: {
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+    },
     size: {
       default: select('Size', Object.values(Size), Size.MEDIUM)
     },
@@ -97,10 +104,9 @@ export const radioButtonGroup = () => ({
                 <s-radio
                   v-for="item in items"
                   :key="item.label"
-                  v-model="model"
                   :label="item.label"
                   :size="size"
-                  :isRadioButton="true"
+                  :isRadioButton="isRadioButton"
                 >
                   {{ item.title }}
                 </s-radio>
@@ -119,6 +125,9 @@ export const radioButtonGroup = () => ({
     },
     disabled: {
       default: boolean('Disabled', false)
+    },
+    isRadioButton: {
+      default: boolean('Is radio buttons', true)
     }
   }
 })
diff --git a/src/stories/SSwitch.stories.ts b/src/stories/SSwitch.stories.ts
index 62c76629..c601ead4 100644
--- a/src/stories/SSwitch.stories.ts
+++ b/src/stories/SSwitch.stories.ts
@@ -1,6 +1,7 @@
-import { text, number, boolean, withKnobs } from '@storybook/addon-knobs'
+import { text, number, boolean, select, withKnobs } from '@storybook/addon-knobs'
 
-import { SSwitch } from '../components/Switch'
+import { SSwitch, SDesignSystemProvider } from '../components'
+import { DesignSystemTypes } from '../utils/DesignSystem'
 
 export default {
   component: SSwitch,
@@ -10,8 +11,10 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SSwitch },
-  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
+  components: { SSwitch, SDesignSystemProvider },
+  template: `
+          <s-design-system-provider :value="designSystem">
+            <div class="s-flex" style="flex: 1; flex-direction: column;">
               <s-switch
                 v-model="modelValue"
                 :active-text="activeText"
@@ -25,12 +28,16 @@ export const configurable = () => ({
               <span style="margin-top: 20px;">
                 v-model="{{ modelValue }}", @change="{{ changeValue }}"
               </span>
-            </div>`,
+            </div>
+          </s-design-system-provider>`,
   data: () => ({
     modelValue: true,
     changeValue: true
   }),
   props: {
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+    },
     activeText: {
       default: text('Active Text', '')
     },
diff --git a/src/stories/STooltip.stories.ts b/src/stories/STooltip.stories.ts
index f5b8bbe4..1b4f0e8f 100644
--- a/src/stories/STooltip.stories.ts
+++ b/src/stories/STooltip.stories.ts
@@ -1,8 +1,9 @@
 import { text, withKnobs, boolean, select, number } from '@storybook/addon-knobs'
 
-import { SButton, STooltip, SRow, SMain } from '../components'
+import { SButton, STooltip, SRow, SMain, SDesignSystemProvider } from '../components'
 import { BorderRadius } from '../types'
 import { TooltipPlacement, TooltipTheme } from '../components/Tooltip'
+import { DesignSystemTypes } from '../utils/DesignSystem'
 
 export default {
   component: STooltip,
@@ -12,8 +13,10 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { STooltip, SButton, SRow },
-  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  components: { STooltip, SButton, SRow, SDesignSystemProvider },
+  template: `
+            <s-design-system-provider :value="designSystem">
+              <s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-tooltip
                  :theme="theme"
                  v-model="model"
@@ -26,7 +29,8 @@ export const configurable = () => ({
                >
                  <s-button style="margin: 40px">Custom tooltip</s-button>
                </s-tooltip>
-             </s-row>`,
+              </s-row>
+            </s-design-system-provider>`,
   data: () => ({
     model: false
   }),
@@ -34,6 +38,9 @@ export const configurable = () => ({
     theme: {
       default: select('Theme', Object.values(TooltipTheme), TooltipTheme.AUTO)
     },
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+    },
     content: {
       default: text('Content', 'Custom tooltip')
     },
@@ -75,17 +82,23 @@ export const differentPlacementData = [
   ]
 ]
 export const withDifferentPlacement = () => ({
-  components: { STooltip, SButton, SRow, SMain },
-  template: `<s-main style="padding: 40px 80px;">
+  components: { STooltip, SButton, SRow, SMain, SDesignSystemProvider },
+  template: `
+            <s-design-system-provider :value="designSystem">
+              <s-main style="padding: 40px 80px;">
                <s-row v-for="placements in items" :key="placements[0]" style="padding-bottom: 20px;">
                  <s-tooltip v-for="placement in placements" :key="placement" :placement="placement" :content="placement">
                    <s-button>{{ placement }}</s-button>
                  </s-tooltip>
                </s-row>
-             </s-main>`,
+             </s-main>
+            </s-design-system-provider>`,
   props: {
     items: {
       default: () => differentPlacementData
+    },
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
     }
   }
 })
diff --git a/src/stories/Tab/STabs.stories.ts b/src/stories/Tab/STabs.stories.ts
index 6d066df9..64c727fd 100644
--- a/src/stories/Tab/STabs.stories.ts
+++ b/src/stories/Tab/STabs.stories.ts
@@ -1,8 +1,9 @@
 import { boolean, select, withKnobs } from '@storybook/addon-knobs'
 
-import { STabs, STab } from '../../components'
+import { STabs, STab, SDesignSystemProvider } from '../../components'
 import { BorderRadius } from '../../types'
 import { TabsPosition, TabsType } from '../../components/Tab'
+import { DesignSystemTypes } from '../../utils/DesignSystem'
 
 export default {
   component: STabs,
@@ -11,8 +12,10 @@ export default {
 }
 
 export const defaultUsage = () => ({
-  components: { STabs, STab },
-  template: `<s-tabs
+  components: { STabs, STab, SDesignSystemProvider },
+  template: `
+            <s-design-system-provider :value="designSystem">
+              <s-tabs
                v-model="activeName"
                :type="type"
                :border-radius="borderRadius"
@@ -20,15 +23,19 @@ export const defaultUsage = () => ({
                :closable="closable"
                :addable="addable"
                :editable="editable"
-             >
+              >
                <s-tab label="First tab" name="first">First</s-tab>
                <s-tab label="Second tab" name="second">Second</s-tab>
                <s-tab label="Third tab" name="third">Third</s-tab>
-             </s-tabs>`,
+              </s-tabs>
+            </s-design-system-provider>`,
   data: () => ({
     activeName: 'first'
   }),
   props: {
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+    },
     type: {
       default: select('Type', [...Object.values(TabsType), '––'], '––')
     },
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c3775b6d..27650bf7 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,6 @@
-@import "./neumorphism/index.scss";
+
 @import "./variables";
+@import "./neumorphism/index.scss";
 @import "./element-variables";
 @import "./common";
 @import "./button";
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 626971f0..114526ac 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -49,6 +49,10 @@ $input-padding-left: $s-padding-input - $input-border-width;
     min-height: $s-size-medium;
   }
 
+  &.s-size-small {
+    min-height: $s-size-small;
+  }
+
   .s-placeholder {
     // TODO: add default animation from material-ui
     color: var(--s-color-base-content-tertiary);
diff --git a/src/styles/neumorphism/button.scss b/src/styles/neumorphism/button.scss
index 8bf64f39..94476ed0 100644
--- a/src/styles/neumorphism/button.scss
+++ b/src/styles/neumorphism/button.scss
@@ -27,8 +27,8 @@ $neu-button-primary-border-color: var(--neu-color-base-border-secondary) !defaul
 $neu-button-primary-border-color-hover: var(--neu-color-utility-surface) !default;
 $neu-button-primary-border-color-pressed: $neu-button-primary-border-color-hover !default;
 // Primary button: box-shadow
-$neu-button-primary-box-shadow: 1px 1px 5px var(--neu-color-base-on-accent), -1px -1px 5px var(--neu-color-base-on-accent) !default;
-$neu-button-primary-box-shadow-hover: 1px 1px 5px rgba(255, 255, 255, 0.7), -1px -1px 5px var(--neu-color-base-on-accent), 0px 0px 20px rgba(247, 84, 163, 0.5) !default;
+$neu-button-primary-box-shadow: 1px 1px 5px var(--neu-shadow-color-light), -1px -1px 5px var(--neu-shadow-color-light) !default;
+$neu-button-primary-box-shadow-hover: 1px 1px 5px rgba(255, 255, 255, 0.7), -1px -1px 5px var(--neu-shadow-color-light), 0px 0px 20px rgba(247, 84, 163, 0.5) !default;
 $neu-button-primary-box-shadow-pressed: $neu-button-primary-box-shadow-hover !default;
 $neu-button-primary-box-shadow-alternative: none !default;
 
@@ -49,9 +49,9 @@ $neu-button-secondary-text-color-alternative-active: var(--neu-color-base-on-acc
 $neu-button-secondary-border-color: transparent !default;
 $neu-button-secondary-border-color-active: $neu-button-secondary-border-color !default;
 // Secondary button: box-shadow
-$neu-button-secondary-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1), inset 1px 1px 1px rgba(0, 0, 0, 0.1) !default;
+$neu-button-secondary-box-shadow: $neu-shadow-surface !default;
 $neu-button-secondary-box-shadow-active: $neu-button-secondary-box-shadow !default;
-$neu-button-secondary-box-shadow-alternative: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8) !default;
+$neu-button-secondary-box-shadow-alternative: $neu-shadow-element !default;
 
 // Tertiary button: common
 $neu-button-tertiary-border-width: 0px !default;
@@ -67,7 +67,7 @@ $neu-button-tertiary-text-color-active: var(--neu-color-base-content-primary) !d
 $neu-button-tertiary-border-color: transparent !default;
 $neu-button-tertiary-border-color-active: $neu-button-tertiary-border-color !default;
 // Tertiary button: box-shadow
-$neu-button-tertiary-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), inset 1px 1px 2px #FFFFFF !default;
+$neu-button-tertiary-box-shadow: 1px 1px 2px var(--neu-shadow-color-dark), inset 1px 1px 2px var(--neu-shadow-color-ligh) !default;
 $neu-button-tertiary-box-shadow-active: $neu-button-tertiary-box-shadow !default;
 
 // Action button: common
@@ -90,9 +90,9 @@ $neu-button-action-border-color-hover: $neu-button-action-border-color !default;
 $neu-button-action-border-color-pressed: $neu-button-action-border-color !default;
 $neu-button-action-border-color-alternative: transparent !default;
 // Action button: box-shadow
-$neu-button-action-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8) !default;
+$neu-button-action-box-shadow: var(--neu-shadow-element) !default;
 $neu-button-action-box-shadow-hover: $neu-button-action-box-shadow !default;
-$neu-button-action-box-shadow-pressed: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1) !default;
+$neu-button-action-box-shadow-pressed: var(--neu-shadow-element-pressed) !default;
 $neu-button-action-box-shadow-alternative: none !default;
 
 $neu-button-padding-big: 7px 13px !default;
@@ -128,6 +128,7 @@ $neu-button-padding-mini: 3px 6px !default;
 
 .el-button.neumorphic {
   transition: $neu-button-transition;
+  text-transform: uppercase;
 
   @include size('big', $neu-button-padding-big);
   @include size('medium', $neu-button-padding-medium);
diff --git a/src/styles/neumorphism/card.scss b/src/styles/neumorphism/card.scss
new file mode 100644
index 00000000..514a8e33
--- /dev/null
+++ b/src/styles/neumorphism/card.scss
@@ -0,0 +1,52 @@
+@mixin status ($status: 'success') {
+  &.s-status-#{$status} {
+    background: var(--neu-color-status-#{$status}-background);
+    color: var(--neu-color-status-#{$status});
+  }
+}
+
+.s-card.neumorphic {
+  background: var(--neu-color-base-background);
+  border: none;
+
+  @include status;
+  @include status('warning');
+  @include status('error');
+
+  .el-card {
+    &__header, &__body {
+      padding: 0;
+    }
+  }
+
+  &.s-size {
+    &-big {
+      padding: $s-basic-spacing * 3 $s-basic-spacing * 3 $s-basic-spacing * 4; // 24 24 32 - content card
+    }
+    &-medium {
+      padding: $s-basic-spacing * 2; // 16 16 - status cards, info cards
+    }
+    &-small {
+      padding: $s-basic-spacing $s-basic-spacing * 1.5; // 8 12 accounts
+    }
+    &-mini {
+      padding: $s-basic-spacing * 0.25 $s-basic-spacing * 0.75 // 2 6 - badge
+    }
+  }
+
+  &.is-always-shadow, &.is-hover-shadow:hover, &.is-hover-shadow:focus {
+    box-shadow: var(--neu-shadow-element);
+
+    &.s-pressed {
+      box-shadow: var(--neu-shadow-element-pressed);
+    }
+  }
+
+  &.s-primary {
+    background: var(--neu-color-utility-surface);
+
+    &.is-always-shadow, &.is-hover-shadow:hover, &.is-hover-shadow:focus {
+      box-shadow: var(--neu-shadow-surface);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/neumorphism/index.scss b/src/styles/neumorphism/index.scss
index 6f709c44..72f54d34 100644
--- a/src/styles/neumorphism/index.scss
+++ b/src/styles/neumorphism/index.scss
@@ -1,3 +1,9 @@
 @import "./variables";
 @import "./button.scss";
 @import "./input.scss";
+@import "./card.scss";
+@import "./tabs.scss";
+@import "./radio.scss";
+@import "./switch.scss";
+@import "./tooltip.scss";
+@import "./typography.scss";
diff --git a/src/styles/neumorphism/input.scss b/src/styles/neumorphism/input.scss
index ae590da6..700d9df2 100644
--- a/src/styles/neumorphism/input.scss
+++ b/src/styles/neumorphism/input.scss
@@ -1,12 +1,12 @@
 $neu-input-border-width: 0 !default;
 $neu-input-background: var(--neu-color-base-background) !default;
-$neu-input-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8) !default;
-$neu-input-box-shadow-active: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1) !default;
+$neu-input-box-shadow: var(--neu-shadow-element) !default;
+$neu-input-box-shadow-active: var(--neu-shadow-element-pressed) !default;
 $neu-input-color: var(--neu-color-base-content-primary) !default;
 $neu-input-color-disabled: var(--neu-color-base-content-secondary) !default;
 $neu-input-placeholder-color: var(--neu-color-base-content-secondary) !default;
 $neu-input-placeholder-offset: -2px !default;
-$neu-input-padding: 8px 16px !default;
+$neu-input-padding: $s-basic-spacing $s-basic-spacing * 2 !default;
 
 .s-input.neumorphic {
   border-width: $neu-input-border-width;
@@ -14,6 +14,11 @@ $neu-input-padding: 8px 16px !default;
   color: $neu-input-color;
   padding: $neu-input-padding;
 
+  &.s-size-small {
+    padding-top: $s-basic-spacing / 2;
+    padding-bottom: $s-basic-spacing / 2;
+  }
+
   .el-input, .el-textarea {
     &__inner {
       color: $neu-input-color;
diff --git a/src/styles/neumorphism/radio.scss b/src/styles/neumorphism/radio.scss
new file mode 100644
index 00000000..c43bbc94
--- /dev/null
+++ b/src/styles/neumorphism/radio.scss
@@ -0,0 +1,80 @@
+@mixin inner-size ($size: 'big', $value: 32px) {
+  &.s-#{$size} {
+    > .el-radio__input {
+      .el-radio__inner {
+        width: $value;
+        height: $value;
+
+        &::after {
+          width: $value - 10;
+          height: $value - 10;
+        }
+      }
+    }
+  }
+}
+
+.s-radio.neumorphic {
+  color: var(--neu-color-base-content-primary);
+
+  &.s-big,
+  &.s-medium,
+  &.s-small {
+    > .el-radio__input {
+      .el-radio__inner {
+        border-width: 1px;
+      }
+    }
+  }
+
+  @include inner-size('big', 32px);
+  @include inner-size('medium', 28px);
+  @include inner-size('small', 24px);
+  @include inner-size('mini', 20px);
+
+  > .el-radio__input {
+    &.is-checked {
+      .el-radio__inner {
+        border-color: var(--neu-color-base-border-secondary);
+        background-color: var(--neu-color-base-background);
+      }
+  
+      & + .el-radio__label {
+        color: var(--neu-color-theme-accent);
+      }
+    }
+    &.is-disabled {
+      .el-radio__inner {
+        border-color: var(--neu-color-base-border-secondary);
+        background-color: var(--neu-color-base-background);
+      }
+
+      & + .el-radio__label {
+        color: var(--neu-color-base-on-disabled);
+      }
+    }
+    &.is-disabled.is-checked {
+      .el-radio__inner {
+        border-color: var(--neu-color-base-border-secondary);
+      }
+    }
+  }
+
+  > .el-radio__input {
+    .el-radio__inner {
+      border-width: 1px;
+      border-color: var(--neu-color-base-border-secondary);
+      box-shadow: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1);
+      background-color: var(--neu-color-base-background);
+
+      &:hover {
+        border-color: var(--neu-color-base-border-secondary);
+      }
+
+      &::after {
+        background-color: var(--neu-color-theme-accent);
+        box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/neumorphism/switch.scss b/src/styles/neumorphism/switch.scss
new file mode 100644
index 00000000..12851a04
--- /dev/null
+++ b/src/styles/neumorphism/switch.scss
@@ -0,0 +1,57 @@
+$switch-class: ".el-switch";
+$switch-circle-size: 18px;
+
+.s-switch.neumorphic {
+  #{$switch-class} {
+    &__label {
+      color: var(--neu-color-base-content-primary);
+      &.is-active {
+        color: var(--neu-color-theme-accent);
+      }
+    }
+    &__core {
+      background-color: var(--neu-color-base-background);
+      border: none;
+      box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8);
+
+      &::after {
+        width: $switch-circle-size;
+        height: $switch-circle-size;
+        background-color: var(--neu-color-base-content-secondary);
+      }
+    }
+
+    &.is-disabled {
+      #{$switch-class}__core {
+        background-color: var(--neu-color-base-disabled);
+      }
+    }
+
+    &.is-checked {
+      #{$switch-class}__core {
+        background-color: var(--neu-color-theme-accent);
+        &::after {
+          margin-left: -$switch-circle-size - 1;
+          background-color: var(--neu-color-base-on-accent);
+        }
+      }
+
+      &.is-disabled {
+        #{$switch-class}__core {
+          background-color: var(--neu-color-base-content-quaternary);
+        }
+      }
+    }
+
+    &:hover:not(.is-disabled),
+    &.is-checked:hover:not(.is-disabled) {
+      #{$switch-class}__core {
+        background-color: var(--neu-color-theme-accent-hover);
+
+        &::after {
+          background-color: var(--neu-color-base-on-accent);
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/neumorphism/tabs.scss b/src/styles/neumorphism/tabs.scss
new file mode 100644
index 00000000..72c62f01
--- /dev/null
+++ b/src/styles/neumorphism/tabs.scss
@@ -0,0 +1,46 @@
+.s-tabs.neumorphic {
+  .el-tabs {
+    &__active-bar {
+      background-color: var(--neu-color-theme-accent);
+    }
+    &__nav-wrap {
+      .el-tabs__item {
+        &:not(.is-active) {
+          color: var(--neu-color-base-content-primary);
+        }
+        &.is-active {
+          color: var(--neu-color-theme-accent);
+        }
+      }
+    }
+  }
+
+  &.s-rounded {
+    .el-tabs {
+      &__nav-wrap {
+        background-color: var(--neu-color-base-background);
+        filter: drop-shadow(1px 1px 2px $neu-shadow-color-dark);
+        box-shadow: inset 1px 1px 2px $neu-shadow-color-light;
+
+        .el-tabs__item {
+          &.is-active {
+            &, &:focus.is-focus {
+              color: var(--neu-color-theme-accent);
+              background-color: var(--neu-color-utility-surface);
+              box-shadow: 1px 1px 2px $neu-shadow-color-light, inset 1px 1px 2px $neu-shadow-color-dark;
+            }
+          }
+          &:not(.is-active) {
+            &:hover {
+              color: var(--neu-color-theme-accent-hover);
+            }
+            &:focus.is-focus {
+              box-shadow: none;
+              color: var(--neu-color-theme-accent-focused);
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/neumorphism/tooltip.scss b/src/styles/neumorphism/tooltip.scss
new file mode 100644
index 00000000..0925738c
--- /dev/null
+++ b/src/styles/neumorphism/tooltip.scss
@@ -0,0 +1,51 @@
+$neu-tooltip-max-width: 236px !default;
+$neu-tooltip-padding: 6px 8px !default;
+$neu-tooltip-line-height: $s-line-height-base !default;
+$neu-tooltip-background-color:  var(--neu-color-base-content-secondary) !default;
+
+.el-tooltip__popper.neumorphic {
+  max-width: $neu-tooltip-max-width;
+  padding: $neu-tooltip-padding;
+  line-height: $neu-tooltip-line-height;
+
+  &.is-light {
+    background-color: $neu-tooltip-background-color;
+    border-color: $neu-tooltip-background-color;
+    color: var(--neu-color-utility-body);
+
+    .popper__arrow {
+      border-bottom-color: $neu-tooltip-background-color;
+      &::after {
+        border-bottom-color: inherit;
+      }
+    }
+    &[x-placement^="top"] .popper__arrow {
+      border-top-color: $neu-tooltip-background-color;
+      border-bottom-color: transparent;
+      &::after {
+        border-top-color: inherit;
+      }
+    }
+    &[x-placement^="bottom"] .popper__arrow {
+      border-bottom-color: $neu-tooltip-background-color;
+      &::after {
+        border-top-color: inherit;
+        border-bottom-color: $neu-tooltip-background-color;
+      }
+    }
+    &[x-placement^="right"] .popper__arrow {
+      border-right-color: $neu-tooltip-background-color;
+      border-bottom-color: transparent;
+      &::after {
+        border-right-color: inherit;
+      }
+    }
+    &[x-placement^="left"] .popper__arrow {
+      border-left-color: $neu-tooltip-background-color;
+      border-bottom-color: transparent;
+      &::after {
+        border-left-color: inherit;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/neumorphism/typography.scss b/src/styles/neumorphism/typography.scss
new file mode 100644
index 00000000..944fba93
--- /dev/null
+++ b/src/styles/neumorphism/typography.scss
@@ -0,0 +1,64 @@
+.s-typography {
+  &-input {
+    &-text {
+      font-size: var(--s-font-size-mini);
+      line-height: var(--s-line-height-medium);
+      font-weight: 300;
+
+      &--mini {
+        font-size: var(--s-font-size-extra-mini);
+        line-height: var(--s-line-height-medium);
+        font-weight: 300;
+      }
+    }
+    &-field {
+      font-size: var(--s-font-size-medium);
+      line-height: var(--s-line-height-medium);
+      font-weight: 400;
+
+      &--large {
+        font-size: var(--s-font-size-large);
+        line-height: var(--s-line-height-small);
+        font-weight: 800;
+      }
+    }
+  }
+  &-button {
+    &--mini {
+      font-size: var(--s-font-size-mini);
+      line-height: var(--s-line-height-extra-small);
+      font-weight: 800;
+    }
+    &--small {
+      font-size: var(--s-font-size-small);
+      line-height: var(--s-line-height-small);
+      font-weight: 800;
+    }
+    &--medium {
+      font-size: var(--s-font-size-medium);
+      line-height: var(--s-line-height-reset);
+      font-weight: 800;
+    }
+    &--big {
+      font-size: var(--s-font-size-big);
+      line-height: var(--s-line-height-small);
+      font-weight: 800;
+    }
+    &--large {
+      font-size: var(--s-font-size-large);
+      line-height: var(--s-line-height-reset);
+      font-weight: 800;
+    }
+  }
+  &-text {
+    font-size: var(--s-font-size-extra-small);
+    line-height: var(--s-line-height-base);
+    font-weight: 300;
+
+    &--mini {
+      font-size: var(--s-font-size-extra-mini);
+      line-height: var(--s-line-height-mini);
+      font-weight: 300;
+    }
+  }
+}
diff --git a/src/styles/neumorphism/variables.scss b/src/styles/neumorphism/variables.scss
index c8b3b3c9..067f511c 100644
--- a/src/styles/neumorphism/variables.scss
+++ b/src/styles/neumorphism/variables.scss
@@ -36,11 +36,19 @@ $neu-color-status-warning: #479AEF !default; // Warning text and icon
 $neu-color-status-warning-background: #C6E2FF !default; // Warning state background
 $neu-color-status-error: #F754A3 !default; // Error text and icon
 $neu-color-status-error-background: #FFD8EB !default; // Error state background
-
+// Sizes
 $neu-size-big: 46px !default;
 $neu-size-medium: 42px !default;
 $neu-size-small: 32px !default;
 $neu-size-mini: 24px !default;
+// Shadows
+$neu-shadow-color-dark: rgba(0, 0, 0, 0.1) !default;
+$neu-shadow-color-dark-light: rgba(0, 0, 0, 0.02) !default;
+$neu-shadow-color-light: rgba(255, 255, 255, 1) !default;
+$neu-shadow-color-light-dark: rgba(255, 255, 255, 0.8) !default;
+$neu-shadow-surface: 1px 1px 5px $neu-shadow-color-dark, inset 1px 1px 1px $neu-shadow-color-dark !default; // container
+$neu-shadow-element: -1px -1px 1px $neu-shadow-color-dark-light, 1px 1px 3px $neu-shadow-color-dark, inset 1px 1px 2px $neu-shadow-color-light-dark !default; // input, card
+$neu-shadow-element-pressed: 1px 1px 2px $neu-shadow-color-light, inset 1px 1px 2px $neu-shadow-color-dark !default;
 
 :root {
   --neu-brand-pinky: #{neu-brand-pinky};
@@ -76,4 +84,11 @@ $neu-size-mini: 24px !default;
   --neu-size-medium: #{$neu-size-medium};
   --neu-size-small: #{$neu-size-small};
   --neu-size-mini: #{$neu-size-mini};
+  --neu-shadow-surface: #{$neu-shadow-surface};
+  --neu-shadow-element: #{$neu-shadow-element};
+  --neu-shadow-element-pressed: #{$neu-shadow-element-pressed};
+  --neu-shadow-color-dark: #{$neu-shadow-color-dark};
+  --neu-shadow-color-dark-light: #{$neu-shadow-color-dark-light};
+  --neu-shadow-color-light: #{$neu-shadow-color-light};
+  --neu-shadow-color-light-dark: #{$neu-shadow-color-light-dark};
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 8c0e6d91..4a42c4ff 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -50,6 +50,7 @@ $s-size-mini: 24px !default;
 
 // Padding
 $s-padding-input: 16px;
+$s-basic-spacing: 8px;
 
 $s-border-radius-base: 4px;
 $s-border-radius-mini: $s-border-radius-base !default;
@@ -62,8 +63,13 @@ $s-font-family-default: 'Sora', sans-serif !important;
 $s-font-family-mono: 'JetBrainsMono', monospace !important;
 $s-font-family-icons: 'soramitsu-icons' !important;
 // Font sizes
+$s-font-size-extra-mini: 11px !default;
 $s-font-size-mini: 12px !default;
+$s-font-size-extra-small: 13px !default;
 $s-font-size-small: 14px !default;
+$s-font-size-medium: 16px !default;
+$s-font-size-big: 18px !default;
+$s-font-size-large: 24px !default;
 // Icons font sizes
 $s-icon-font-size-mini: 16px !default;
 $s-icon-font-size-small: 18px !default;
@@ -80,9 +86,11 @@ $s-heading6-font-size: 14px !default;
 $s-heading7-font-size: 12px !default;
 $s-heading8-font-size: 10px !default;
 // Font Line Height
-$s-line-height-base: 1.4 !default;
+$s-line-height-reset: 1 !default;
 $s-line-height-mini: 1.2 !default;
+$s-line-height-extra-small: 1.25 !default;
 $s-line-height-small: 1.3 !default;
+$s-line-height-base: 1.4 !default;
 $s-line-height-medium: 1.5 !default;
 $s-line-height-big: 1.8 !default;
 // Letter Spacing
@@ -162,8 +170,13 @@ $--breakpoints-spec: (
   --s-color-status-warning-background: #{$s-color-status-warning-background};
   --s-color-status-error-background: #{$s-color-status-error-background};
   // Font Sizes
+  --s-font-size-extra-mini: #{$s-font-size-extra-mini};
   --s-font-size-mini: #{$s-font-size-mini};
+  --s-font-size-extra-small: #{$s-font-size-extra-small};
   --s-font-size-small: #{$s-font-size-small};
+  --s-font-size-medium: #{$s-font-size-medium};
+  --s-font-size-big: #{$s-font-size-big};
+  --s-font-size-large: #{$s-font-size-large};
   // Icons font sizes
   --s-icon-font-size-mini: #{$s-icon-font-size-mini};
   --s-icon-font-size-small: #{$s-icon-font-size-small};
@@ -180,9 +193,11 @@ $--breakpoints-spec: (
   --s-heading7-font-size: #{$s-heading7-font-size};
   --s-heading8-font-size: #{$s-heading8-font-size};
   // Font Line Height
-  --s-line-height-base: #{$s-line-height-base};
+  --s-line-height-reset: #{$s-line-height-reset};
   --s-line-height-mini: #{$s-line-height-mini};
+  --s-line-height-extra-small: #{$s-line-height-extra-small};
   --s-line-height-small: #{$s-line-height-small};
+  --s-line-height-base: #{$s-line-height-base};
   --s-line-height-medium: #{$s-line-height-medium};
   --s-line-height-big: #{$s-line-height-big};
   // Letter Spacing
@@ -208,6 +223,7 @@ $--breakpoints-spec: (
   --s-size-big: #{$s-size-big};
   // Padding
   --s-padding-input: #{$s-padding-input};
+  --s-basic-spacing: #{$s-basic-spacing};
   // Border Radius
   --s-border-radius-mini: #{$s-border-radius-mini};
   --s-border-radius-small: #{$s-border-radius-small};
diff --git a/src/types/index.ts b/src/types/index.ts
index dc62dba7..958f7e2f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,7 +1,8 @@
 export enum Size {
   BIG = 'big',
   MEDIUM = 'medium',
-  SMALL = 'small'
+  SMALL = 'small',
+  MINI = 'mini'
 }
 
 export enum BorderRadius {
@@ -11,6 +12,13 @@ export enum BorderRadius {
   MINI = 'mini'
 }
 
+export enum Status {
+  DEFAULT = 'default',
+  SUCCESS = 'success',
+  WARNING = 'warning',
+  ERROR = 'error',
+}
+
 export enum Direction {
   HORIZONTAL = 'horizontal',
   VERTICAL = 'vertical'
diff --git a/yarn.lock b/yarn.lock
index bf3b9dc9..2594feed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15554,7 +15554,7 @@ void-elements@^2.0.1:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
   integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
 
-vue-class-component@^7.1.0, vue-class-component@^7.2.3:
+vue-class-component@^7.2.3:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.3.tgz#a5b1abd53513a72ad51098752e2dedd499807cca"
   integrity sha512-oEqYpXKaFN+TaXU+mRLEx8dX0ah85aAJEe61mpdoUrq0Bhe/6sWhyZX1JjMQLhVsHAkncyhedhmCdDVSasUtDw==
@@ -15642,12 +15642,10 @@ vue-loader@^15.9.1:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-property-decorator@^8.4.1:
-  version "8.4.2"
-  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.4.2.tgz#016e17f259f73bc547e77a50ce282ba18db4ee41"
-  integrity sha512-IqbARlvgPE2pzKfbecKxsu2yEH0Wv7hfHR6m4eZA3LTnNw9hveAX77vDfLFyTeMISS5N7Kucp/xRSHjcQ6bAfQ==
-  dependencies:
-    vue-class-component "^7.1.0"
+vue-property-decorator@^9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz#266a2eac61ba6527e2e68a6933cfb98fddab5457"
+  integrity sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==
 
 vue-router@^3.3.4:
   version "3.3.4"