diff --git a/packages/ theme_neumorphism/README.md b/packages/ theme_neumorphism/README.md
new file mode 100644
index 000000000..3916168d5
--- /dev/null
+++ b/packages/ theme_neumorphism/README.md	
@@ -0,0 +1,39 @@
+First read `packages/theme/README.md`
+
+This is neumorphism theme
+It contains **tokens** and **typography** in lib.scss
+
+In this mixin you could specify the token, for example 'color-utility-surface'
+
+```scss
+@mixin tokens-preset-light() {
+  @include eval-tokens(
+    (
+      ref: (
+        'color': (
+          'button': (
+            'color-utility-surface': #FDF7FB,
+          )
+        )
+      )
+    )
+  )
+}
+```
+
+If we don't need this token for current theme, then we set it to ` '' `
+```scss
+@mixin tokens-preset-light() {
+  @include eval-tokens(
+    (
+      sys: (
+        'color': (
+          'status': (
+            'success': '',
+          )
+        )
+      )
+    )
+  )
+}
+```
diff --git a/packages/ theme_neumorphism/jest-exports.config.js b/packages/ theme_neumorphism/jest-exports.config.js
new file mode 100644
index 000000000..5eb384021
--- /dev/null
+++ b/packages/ theme_neumorphism/jest-exports.config.js	
@@ -0,0 +1,4 @@
+module.exports = {
+  testMatch: ['<rootDir>/test/lib-exports.spec.js'],
+  resolver: 'jest-resolver-enhanced',
+}
diff --git a/packages/ theme_neumorphism/jest.config.js b/packages/ theme_neumorphism/jest.config.js
new file mode 100644
index 000000000..08da2b528
--- /dev/null
+++ b/packages/ theme_neumorphism/jest.config.js	
@@ -0,0 +1,7 @@
+module.exports = {
+  testMatch: ['<rootDir>/src/**/*.spec.ts'],
+  transform: {
+    '^.+\\.tsx?$': ['esbuild-jest', { sourcemap: true }],
+  },
+  testEnvironment: 'jest-environment-node-single-context',
+}
diff --git a/packages/ theme_neumorphism/package.json b/packages/ theme_neumorphism/package.json
new file mode 100644
index 000000000..4bebb9c84
--- /dev/null
+++ b/packages/ theme_neumorphism/package.json	
@@ -0,0 +1,53 @@
+{
+  "name": "@soramitsu-ui/theme_neumorphism",
+  "version": "0.1.0",
+  "main": "dist/lib.cjs.js",
+  "module": "dist/lib.esm.js",
+  "types": "dist/lib.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/lib.esm.js",
+      "require": "./dist/lib.cjs.js"
+    },
+    "./sass": "./src/sass/lib.scss",
+    "./sass/*": "./src/sass/*",
+    "./fonts/Sora": "./src/fonts/Sora/index.css"
+  },
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src/sass",
+    "src/fonts/Sora"
+  ],
+  "scripts": {
+    "clean": "del dist dist-ts",
+    "build": "run-s clean build:tsc build:rollup",
+    "build:tsc": "tsc --outDir dist-ts",
+    "build:rollup": "rollup -c",
+    "test": "run-p test:main test:exports",
+    "test:main": "jest",
+    "test:exports": "jest -c jest-exports.config.js"
+  },
+  "dependencies": {
+    "windicss": "^3.1.7"
+  },
+  "devDependencies": {
+    "@types/jest": "^27.0.2",
+    "@types/node": "^17.0.14",
+    "del-cli": "^4.0.1",
+    "esbuild-jest": "^0.5.0",
+    "jest": "^27.3.1",
+    "jest-environment-node-single-context": "^27.3.0",
+    "jest-resolver-enhanced": "^1.0.1",
+    "npm-run-all": "^4.1.5",
+    "rollup": "^2.58.3",
+    "rollup-plugin-dts": "^4.0.0",
+    "sass": "^1.49.0",
+    "sucrase": "^3.20.3",
+    "type-fest": "^2.18.1",
+    "typescript": "4.7.4"
+  }
+}
diff --git a/packages/ theme_neumorphism/rollup.config.js b/packages/ theme_neumorphism/rollup.config.js
new file mode 100644
index 000000000..9359cc0c0
--- /dev/null
+++ b/packages/ theme_neumorphism/rollup.config.js	
@@ -0,0 +1,3 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+require('sucrase/register')
+module.exports = require('./scripts/rollup.config.ts')
diff --git a/packages/ theme_neumorphism/src/sass/__tests__/sass-interface.spec.ts b/packages/ theme_neumorphism/src/sass/__tests__/sass-interface.spec.ts
new file mode 100644
index 000000000..616f0eed6
--- /dev/null
+++ b/packages/ theme_neumorphism/src/sass/__tests__/sass-interface.spec.ts	
@@ -0,0 +1,445 @@
+import sass from 'sass'
+import path from 'path'
+
+function resolveUrl(relativePath: string): URL {
+  return new URL('file://' + path.resolve(__dirname, relativePath))
+}
+
+function compileInline(source: string, syntax: sass.Syntax = 'scss'): string {
+  const result = sass.compileString(source, {
+    syntax,
+    importers: [
+      {
+        findFileUrl: (url) => {
+          switch (url) {
+            case 'v_lib':
+              return resolveUrl('../lib.scss')
+            case 'v_util':
+              return resolveUrl('../util.scss')
+            default:
+              return null
+          }
+        },
+      },
+    ],
+  })
+
+  return result.css
+}
+
+describe('Exports', () => {
+  test('token-as-var() returns a correct variable name', () => {
+    expect(
+      compileInline(
+        `
+        @use 'v_lib' as l
+        body
+          color: #{l.token-as-var('ref.color.common.color-theme-accent')}
+      `,
+        'indented',
+      ),
+    ).toMatchInlineSnapshot(`
+      "body {
+        color: var(--sora_sys_color_primary);
+      }"
+    `)
+  })
+
+  test('eval-tokens() throws due to incompleteness of the tree', () => {
+    expect(() =>
+      compileInline(`
+        @use 'v_lib' as l;
+        :root {
+          @include l.eval-tokens(
+            (
+              'sys': (
+                'color': (
+                  'primary': red,
+                ),
+              ),
+            )
+          );
+        }
+      `),
+    ).toThrowError(/Provided tokens data is incomplete/)
+  })
+
+  test('eval-tokens-partial() completes ok', () => {
+    expect(
+      compileInline(`
+        @use 'v_lib' as l;
+
+        :root {
+          @include l.eval-tokens-partial(
+            (
+              'sys': (
+                'color': (
+                  'primary': red,
+                ),
+              ),
+            )
+          );
+        }`),
+    ).toMatchInlineSnapshot(`
+      ":root {
+        --sora_sys_color_primary: red;
+      }"
+    `)
+  })
+
+  test('light tokens preset matches to snapshot', () => {
+    expect(
+      compileInline(`
+        @use 'v_lib' as l;
+        :root {
+          @include l.tokens-preset-light;
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      ":root {
+        --sora_sys_color_primary: #d0021b;
+        --sora_sys_color_primary-hover: #c6021a;
+        --sora_sys_color_primary-pressed: #bb0218;
+        --sora_sys_color_primary-focused: #b10217;
+        --sora_sys_color_primary-background: #fae6e8;
+        --sora_sys_color_primary-hover-background: #f6ccd1;
+        --sora_sys_color_primary-pressed-background: #f1b3bb;
+        --sora_sys_color_primary-focused-background: #ec9aa4;
+        --sora_sys_color_content-primary: #2d2926;
+        --sora_sys_color_content-secondary: #53565a;
+        --sora_sys_color_content-tertiary: #75787b;
+        --sora_sys_color_content-quaternary: #a3a4a8;
+        --sora_sys_color_content-on-background-inverted: #fff;
+        --sora_sys_color_background: #f5f7f8;
+        --sora_sys_color_background-hover: #eceff0;
+        --sora_sys_color_background-inverted: #4e4e4e;
+        --sora_sys_color_border-primary: #dde0e1;
+        --sora_sys_color_border-secondary: #eceff0;
+        --sora_sys_color_disabled: #f5f7f8;
+        --sora_sys_color_on-disabled: #a3a4a8;
+        --sora_sys_color_util_body: #fff;
+        --sora_sys_color_util_surface: #fff;
+        --sora_sys_color_util_surface-overlay: rgba(255, 255, 255, 0.7);
+        --sora_sys_color_util_overlay: rgba(0, 0, 0, 0.45);
+        --sora_sys_color_status_success: #009900;
+        --sora_sys_color_status_success-background: #ddf4dd;
+        --sora_sys_color_status_success-background-hover: #b2f1b2;
+        --sora_sys_color_status_warning: #ff9900;
+        --sora_sys_color_status_warning-background: #fff2df;
+        --sora_sys_color_status_warning-background-hover: #ffe3ba;
+        --sora_sys_color_status_error: #ff0000;
+        --sora_sys_color_status_error-background: #fff9fa;
+        --sora_sys_color_status_error-background-hover: #ffd9df;
+        --sora_sys_color_status_info: #1070ca;
+        --sora_sys_color_status_info-background: #f3f6ff;
+        --sora_sys_color_status_info-background-hover: #dbe4ff;
+        --sora_sys_color_status_debug: #aa0e42;
+        --sora_sys_color_status_debug-background: #ffeef4;
+        --sora_sys_color_status_debug-background-hover: #f3d3de;
+        --sora_sys_shadow_page-header: 0px 24px 80px rgba(10, 2, 34, 0.07), 0px 10.0266px 33.4221px rgba(10, 2, 34, 0.0558697), 0px 5.36071px 17.869px rgba(10, 2, 34, 0.05437), 0px 3.00517px 10.0172px rgba(10, 2, 34, 0.0484701), 0px 1.59602px 5.32008px rgba(10, 2, 34, 0.0371562), 0px 0.664142px 2.21381px rgba(10, 2, 34, 0.0208172);
+        --sora_sys_shadow_page-header-light: 0px 6px 30px rgba(10, 2, 34, 0.03), 0px 3px 9px rgba(10, 2, 34, 0.02), 0px 5.36071px 6px rgba(10, 2, 34, 0.04), 0px 3.00517px 7px rgba(10, 2, 34, 0.03), 0px 1.59602px 5.32008px rgba(10, 2, 34, 0.0371562);
+        --sora_sys_shadow_modal-window-header: 0px -8px 80px rgba(10, 2, 34, 0.07), 0px 1px 33.4221px rgba(10, 2, 34, 0.0558697), 0px 0px 17.869px rgba(10, 2, 34, 0.05437), 0px 2px 10.0172px rgba(10, 2, 34, 0.0484701), 0px 1.59602px 5.32008px rgba(10, 2, 34, 0.0371562), 0px 0.664142px 2.21381px rgba(10, 2, 34, 0.0208172);
+        --sora_sys_shadow_floating-notification: 0px 68px 80px rgba(24, 24, 29, 0.09), 0px 30.1471px 24.1177px rgba(24, 24, 29, 0.058643), 0px 12.5216px 10.0172px rgba(24, 24, 29, 0.045), 0px 4.5288px 3.62304px rgba(24, 24, 29, 0.031357);
+        --sora_sys_shadow_dropdown: 0px 0px 4px rgba(45, 41, 38, 0.08), 0px 4px 16px rgba(45, 41, 38, 0.08);
+        --sora_sys_shadow_active-tab: 0px 1px 1px rgba(83, 86, 90, 0.1);
+      }"
+    `)
+  })
+
+  test("typography('d2') succeeds", () => {
+    expect(
+      compileInline(`
+        @use 'v_lib' as l;
+        @include l.typography('d2') {
+          font-family: Sora;
+          font-size: 36px;
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      ".sora-tpg-d2 {
+        font-family: Sora;
+        font-size: 36px;
+      }"
+    `)
+  })
+
+  test("typography('regulus') fails", () => {
+    expect(() => compileInline(`@use 'v_lib' as l; @include l.typography('regulus');`)).toThrowError(
+      /Wrong typography token: "regulus"/,
+    )
+  })
+
+  test('typography default preset matches snapshot', () => {
+    expect(compileInline(`@use 'v_lib' as l; @include l.typography-preset-default;`)).toMatchInlineSnapshot(`
+      ".sora-tpg-d1 {
+        font-family: Sora;
+        font-size: 40px;
+        font-weight: bold;
+        line-height: 120%;
+        letter-spacing: -0.02em;
+      }
+
+      .sora-tpg-d2 {
+        font-family: Sora;
+        font-size: 30px;
+        font-weight: bold;
+        line-height: 130%;
+        letter-spacing: -0.04em;
+      }
+
+      .sora-tpg-h1 {
+        font-family: Sora;
+        font-size: 36px;
+        font-weight: 400;
+        line-height: 120%;
+        letter-spacing: -0.04em;
+      }
+
+      .sora-tpg-h2 {
+        font-family: Sora;
+        font-size: 30px;
+        font-weight: 400;
+        line-height: 130%;
+        letter-spacing: -0.04em;
+      }
+
+      .sora-tpg-h3 {
+        font-family: Sora;
+        font-size: 24px;
+        font-weight: 400;
+        line-height: 130%;
+        letter-spacing: -0.02em;
+      }
+
+      .sora-tpg-h4 {
+        font-family: Sora;
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 150%;
+        letter-spacing: -0.02em;
+      }
+
+      .sora-tpg-h4-bold {
+        font-family: Sora;
+        font-size: 18px;
+        font-weight: bold;
+        line-height: 150%;
+        letter-spacing: 0;
+      }
+
+      .sora-tpg-h5 {
+        font-family: Sora;
+        font-size: 16px;
+        font-weight: bold;
+        line-height: 150%;
+        letter-spacing: 0.01em;
+      }
+
+      .sora-tpg-h6 {
+        font-family: Sora;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 150%;
+        letter-spacing: 0;
+      }
+
+      .sora-tpg-h7 {
+        font-family: Sora;
+        font-size: 12px;
+        font-weight: bold;
+        line-height: 150%;
+        letter-spacing: 0;
+      }
+
+      .sora-tpg-ch1 {
+        font-family: Sora;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 130%;
+        letter-spacing: 0.01em;
+        text-transform: uppercase;
+      }
+
+      .sora-tpg-ch2 {
+        font-family: Sora;
+        font-size: 12px;
+        font-weight: bold;
+        line-height: 130%;
+        letter-spacing: 0.03em;
+        text-transform: uppercase;
+      }
+
+      .sora-tpg-ch3 {
+        font-family: Sora;
+        font-size: 10px;
+        font-weight: bold;
+        line-height: 140%;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+      }
+
+      .sora-tpg-p1 {
+        font-family: Sora;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 170%;
+        letter-spacing: 0;
+      }
+
+      .sora-tpg-p2 {
+        font-family: Sora;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 180%;
+        letter-spacing: 0;
+      }
+
+      .sora-tpg-p3 {
+        font-family: Sora;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 180%;
+        letter-spacing: 0;
+      }
+
+      .sora-tpg-p4 {
+        font-family: Sora;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 180%;
+        letter-spacing: 0;
+      }
+
+      .sora-tpg-p5 {
+        font-family: Sora;
+        font-size: 10px;
+        font-weight: 400;
+        line-height: 160%;
+        letter-spacing: 0;
+      }
+
+      .sora-tpg-s1 {
+        font-family: Sora;
+        font-size: 15px;
+        font-weight: 400;
+        line-height: 16px;
+        letter-spacing: 0;
+      }"
+    `)
+  })
+})
+
+describe('Utils', () => {
+  test('full tokens tree evaluation - ok', () => {
+    expect(
+      compileInline(`
+        @use 'v_util' as util;
+
+        $src: (
+          'ref.color.common.color-theme-accent': '--scp',
+          'sys.color.secondary': '--scs',
+        );
+
+        $values: (
+          'ref.color.common.color-theme-accent': red,
+          'sys.color.secondary': blue
+        );
+        
+        :root {
+          @include util.eval-tokens($src, $values)
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      ":root {
+        --scp: red;
+        --scs: blue;
+      }"
+    `)
+  })
+
+  test('full tokens tree evaluation - error if there are excessive tokens', () => {
+    expect(() =>
+      compileInline(`
+        @use 'v_util' as util;
+
+        $src: (
+          'ref.color.common.color-theme-accent': '--scp',
+          'sys.color.secondary': '--scs',
+        );
+
+        $values: (
+          'ref.color.common.color-theme-accent': red,
+          'sys.color.secondary': blue,
+          'sys.color.tertiary': green
+        );
+        
+        :root {
+          @include util.eval-tokens($src, $values)
+        }
+      `),
+    ).toThrowError(/excessive/)
+  })
+
+  test('partial tokens tree evaluation - ok', () => {
+    expect(
+      compileInline(`
+        @use 'v_util' as util;
+
+        $src: (
+          'ref.color.common.color-theme-accent': '--scp',
+          'sys.color.secondary': '--scs',
+        );
+
+        $values: (
+          'sys.color.secondary': blue
+        );
+        
+        :root {
+          @include util.eval-tokens($src, $values, true)
+        }
+      `),
+    ).toMatchInlineSnapshot(`
+      ":root {
+        --scs: blue;
+      }"
+    `)
+  })
+
+  test('partial tokens tree evaluation - fails if there are excessive tokens', () => {
+    expect(() =>
+      compileInline(`
+        @use 'v_util' as util;
+
+        $src: (
+          'ref.color.common.color-theme-accent': '--scp',
+          'sys.color.secondary': '--scs',
+        );
+
+        $values: (
+          'sys.color.tertiary': green
+        );
+        
+        :root {
+          @include util.eval-tokens($src, $values, true)
+        }
+    `),
+    ).toThrowError(/excessive/)
+  })
+
+  describe('lists-diff', () => {
+    test('works correct if there are equal elements on 0 index', () => {
+      expect(
+        compileInline(`
+          @use 'v_util' as util;
+          body {
+            color: util.lists-diff(red blue, red green);
+          }
+      `),
+      ).toMatchInlineSnapshot(`
+        "body {
+          color: blue;
+        }"
+      `)
+    })
+  })
+})
diff --git a/packages/ theme_neumorphism/src/sass/lib.scss b/packages/ theme_neumorphism/src/sass/lib.scss
new file mode 100644
index 000000000..389f4567a
--- /dev/null
+++ b/packages/ theme_neumorphism/src/sass/lib.scss	
@@ -0,0 +1,260 @@
+@use '../../../theme/src/sass/tokens.scss';
+@use '../../../theme/src/sass/util.scss';
+@use 'sass:list';
+
+$vars-prefix: '--sora_neu_';
+$typography-prefix: 'sora-tpg-';
+
+$tokens-compiled: util.tree-flatten(tokens.$tokens);
+$tokens-compiled: util.map-filter-non-null-values($tokens-compiled);
+$tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
+
+@function token($id) {
+  @if not map-has-key($tokens-compiled, $id) {
+    @error "Cannot resolve token with id #{inspect($id)} with initial id #{$id}";
+  }
+  @return map-get($tokens-compiled, $id);
+}
+
+@function token-as-var($id) {
+  $value: token($id);
+  @return var($value);
+}
+
+@mixin eval-tokens($values-map) {
+  @include util.eval-tokens($tokens-compiled, $values-map);
+}
+
+@mixin eval-tokens-partial($partial-values-map) {
+  @include util.eval-tokens($tokens-compiled, $partial-values-map, true);
+}
+
+@mixin tokens-preset-light() {
+  @include eval-tokens(
+    (
+      ref: (
+        'color': (
+          'common': (
+            'color-utility-surface': #FDF7FB,
+            'color-base-on-accent': #FFFFFF,
+            'color-base-content-tertiary': #D5CDD0,
+            'color-base-content-secondary': #A19A9D,
+            'color-utility-body': #F7F3F4,
+            'color-theme-accent': #F8087B,
+            'border-color': transparent,
+          ),
+          'shadow': (
+            'color-light': rgba(255, 255, 255, 1),
+            'color-light-dark': rgba(255, 255, 255, 0.8),
+            'color-dark': rgba(0, 0, 0, 0.1),
+
+            'shadow-element': (1px 1px 5px token-as-var('ref.color.shadow.color-light'),
+              inset -5px -5px 5px rgba(255, 255, 255, 0.5),
+              inset 1px 1px 10px token-as-var('ref.color.shadow.color-dark')),
+
+            'shadow-element-pressed': (-5px -5px 10px token-as-var('ref.color.shadow.color-light'),
+                1px 1px 10px token-as-var('ref.color.shadow.color-dark'),
+                inset 1px 1px 2px token-as-var('ref.color.shadow.color-light-dark')),
+          ),
+        ),
+        'border': (
+          'width': 0px,
+          'style': solid,
+        ),
+      ),
+      sys: (
+        'color': (
+          'content-tertiary': '',
+          'content-secondary': #A19A9D,
+          'content-primary': '',
+          'content-quaternary': '',
+          'on-disabled': '',
+          'primary-pressed': '',
+          'primary-hover': '',
+          'button': (
+            'primary': (
+              'background-color-hover': #F754A3,
+              'background-color-pressed': #E44592,
+              'background-color-alternative': #44E5B2,
+              'background-color-alternative-active': #24DAA0,
+
+              'border-color': #EDE4E7,
+            ),
+            'secondary': (
+              'text-color': token-as-var('ref.color.common.color-base-on-accent'),
+              'text-color-active': token-as-var('ref.color.common.color-base-on-accent'),
+
+              'border-color': token-as-var('ref.color.common.border-color'),
+              'border-color-active': token-as-var('ref.color.common.border-color'),
+            ),
+            'tertiary': (
+              'text-color': token-as-var('ref.color.common.color-base-content-tertiary'),
+              'text-color-active': token-as-var('ref.color.common.color-base-content-secondary'),
+            ),
+            'action': (
+              'background-color': token-as-var('ref.color.common.color-utility-body'),
+              'background-color-hover': token-as-var('sys.color.button.action.background-color'),
+              'background-color-pressed': token-as-var('sys.color.button.action.background-color'),
+
+              'text-color': token-as-var('ref.color.common.color-base-content-tertiary'),
+              'text-color-hover': token-as-var('ref.color.common.color-base-content-secondary'),
+              'text-color-active': token-as-var('ref.color.common.color-theme-accent'),
+            )
+          ),
+          'textfield': (
+            'background-color': #FAF4F8,
+            'background-color-hover': #FAF4F8,
+            'border-color': #F7F3F4,
+            'label-color': #D5CDD0,
+            'counter-color': #909399,
+            'outline-color': rgba(0, 0, 0, 0.5),
+          ),
+          'util': (
+            'overlay': '',
+          ),
+          'status': (
+            'success': '',
+            'success-background': '',
+            'success-background-hover': '',
+            'warning': '',
+            'warning-background': '',
+            'warning-background-hover': '',
+            'error': '',
+            'error-background': '',
+            'error-background-hover': '',
+            'info': '',
+            'info-background': '',
+            'info-background-hover': '',
+            'debug': '',
+            'debug-background': '',
+            'debug-background-hover': '',
+          ),
+        ),
+        'border': (
+          'button': (
+            'width': 2px,
+          ),
+        ),
+        'disabled': (
+          'button': (
+            'background-color': token-as-var('ref.color.common.color-utility-surface'),
+            'border-color': token-as-var('ref.color.common.color-utility-body'),
+          ),
+        ),
+        'transition': (
+          'button': all 0.25s ease-in-out
+        ),
+        'shadow': (
+          'modal-window-header': '',
+          'floating-notification': '',
+          'dropdown': '',
+          'active-tab': '',
+          'button': (
+            'primary': (
+              'box-shadow': (1px 1px 5px token-as-var('ref.color.shadow.color-light'),
+                -1px -1px 5px token-as-var('ref.color.shadow.color-light')),
+
+              'box-shadow-hover': (1px 1px 5px rgba(255, 255, 255, 0.7),
+                -1px -1px 5px token-as-var('ref.color.shadow.color-light'),
+                0px 0px 20px rgba(247, 84, 163, 0.5)),
+              'box-shadow-pressed': token-as-var('sys.shadow.button.primary.box-shadow-hover'),
+              
+              'box-shadow-alternative': none,    
+            ),
+          ),
+        ),
+      ),
+    ),
+  );
+}
+
+@mixin typography($id) {
+  @if list.index(tokens.$typography-tokens, $id) == '' {
+    @error "Wrong typography token: #{inspect($id)}";
+  }
+
+  .#{$typography-prefix}#{$id} {
+    @content;
+  }
+}
+
+@mixin typography-preset-default() {
+  @include typography('d1') {
+    @include util.typography-factory($size: 40px, $height: 120%, $spacing: -0.02em, $weight: bold);
+  }
+
+  @include typography('d2') {
+    @include util.typography-factory($size: 30px, $height: 130%, $spacing: -0.04em, $weight: bold);
+  }
+
+  @include typography('h1') {
+    @include util.typography-factory($size: 36px, $height: 120%, $spacing: -0.04em);
+  }
+
+  @include typography('h2') {
+    @include util.typography-factory($size: 30px, $height: 130%, $spacing: -0.04em);
+  }
+
+  @include typography('h3') {
+    @include util.typography-factory($size: 24px, $height: 130%, $spacing: -0.02em);
+  }
+
+  @include typography('h4') {
+    @include util.typography-factory($size: 18px, $height: 150%, $spacing: -0.02em);
+  }
+
+  @include typography('h4-bold') {
+    @include util.typography-factory($size: 18px, $height: 150%, $spacing: 0, $weight: bold);
+  }
+
+  @include typography('h5') {
+    @include util.typography-factory($size: 16px, $height: 150%, $spacing: 0.01em, $weight: bold);
+  }
+
+  @include typography('h6') {
+    @include util.typography-factory($size: 14px, $height: 150%, $weight: bold);
+  }
+
+  @include typography('h7') {
+    @include util.typography-factory($size: 12px, $height: 150%, $weight: bold);
+  }
+
+  @include typography('ch1') {
+    @include util.typography-factory($size: 14px, $height: 130%, $spacing: 0.01em, $weight: bold);
+    text-transform: uppercase;
+  }
+
+  @include typography('ch2') {
+    @include util.typography-factory($size: 12px, $height: 130%, $spacing: 0.03em, $weight: bold);
+    text-transform: uppercase;
+  }
+
+  @include typography('ch3') {
+    @include util.typography-factory($size: 10px, $height: 140%, $spacing: 0.06em, $weight: bold);
+    text-transform: uppercase;
+  }
+
+  @include typography('p1') {
+    @include util.typography-factory($size: 16px, $height: 170%);
+  }
+
+  @include typography('p2') {
+    @include util.typography-factory($size: 14px, $height: 180%, $weight: 600);
+  }
+
+  @include typography('p3') {
+    @include util.typography-factory($size: 14px, $height: 180%);
+  }
+
+  @include typography('p4') {
+    @include util.typography-factory($size: 12px, $height: 180%);
+  }
+
+  @include typography('p5') {
+    @include util.typography-factory($size: 10px, $height: 160%);
+  }
+
+  @include typography('s1') {
+    @include util.typography-factory($size: 15px, $height: 16px);
+  }
+}
diff --git a/packages/ theme_neumorphism/tsconfig.json b/packages/ theme_neumorphism/tsconfig.json
new file mode 100644
index 000000000..e96a4f0b0
--- /dev/null
+++ b/packages/ theme_neumorphism/tsconfig.json	
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "types": ["jest", "node"],
+    "declaration": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/theme/README.md b/packages/theme/README.md
index 8ae6313b0..583c5b791 100644
--- a/packages/theme/README.md
+++ b/packages/theme/README.md
@@ -1,3 +1,60 @@
+This is the default theme
+It contains `packages/theme/src/sass/tokens.scss`, **tokens** in this file are the same for all themes, and all **tokens** set to null
+
+We have 2 themes: **theme** and  **theme_neumorphism**, so in this file we have **tokens** for both themes
+
+For example we set color-utility-surface to null
+```scss
+$tokens: (
+  'ref': (
+    'color': (
+      'button': (
+        'color-utility-surface': null,
+      )
+    )
+  )
+)
+```
+
+In `packages/theme/src/sass/lib.scss` we assign values to **tokens**
+
+For example we assign `color-utility-surface` to `#dde0e1`
+
+```scss
+@mixin tokens-preset-light() {
+  @include eval-tokens(
+    (
+      ref: (
+        'color': (
+          'button': (
+            'color-utility-surface': #dde0e1,
+          )
+        )
+      )
+    )
+  )
+}
+```
+
+If we don't need this token for current theme, then we set it to ` '' `
+```scss
+@mixin tokens-preset-light() {
+  @include eval-tokens(
+    (
+      ref: (
+        'color': (
+          'button': (
+            'color-utility-body': '',
+          )
+        )
+      )
+    )
+  )
+}
+```
+
+
+
 # @soramitsu-ui/theme
 
 This package contains the core part of Soramitsu's Design System - it's **tokens** and **typography** - and also their **presets**.
@@ -29,7 +86,7 @@ Quick setup with Sass:
 }
 
 .your-button {
-  color: theme.token-as-var('sys.color.primary');
+  color: theme.token-as-var('ref.color.common.color-theme-accent');
 }
 ```
 
diff --git a/packages/theme/src/sass/__tests__/sass-interface.spec.ts b/packages/theme/src/sass/__tests__/sass-interface.spec.ts
index 1476997f9..616f0eed6 100644
--- a/packages/theme/src/sass/__tests__/sass-interface.spec.ts
+++ b/packages/theme/src/sass/__tests__/sass-interface.spec.ts
@@ -34,7 +34,7 @@ describe('Exports', () => {
         `
         @use 'v_lib' as l
         body
-          color: #{l.token-as-var('sys.color.primary')}
+          color: #{l.token-as-var('ref.color.common.color-theme-accent')}
       `,
         'indented',
       ),
@@ -336,12 +336,12 @@ describe('Utils', () => {
         @use 'v_util' as util;
 
         $src: (
-          'sys.color.primary': '--scp',
+          'ref.color.common.color-theme-accent': '--scp',
           'sys.color.secondary': '--scs',
         );
 
         $values: (
-          'sys.color.primary': red,
+          'ref.color.common.color-theme-accent': red,
           'sys.color.secondary': blue
         );
         
@@ -363,12 +363,12 @@ describe('Utils', () => {
         @use 'v_util' as util;
 
         $src: (
-          'sys.color.primary': '--scp',
+          'ref.color.common.color-theme-accent': '--scp',
           'sys.color.secondary': '--scs',
         );
 
         $values: (
-          'sys.color.primary': red,
+          'ref.color.common.color-theme-accent': red,
           'sys.color.secondary': blue,
           'sys.color.tertiary': green
         );
@@ -386,7 +386,7 @@ describe('Utils', () => {
         @use 'v_util' as util;
 
         $src: (
-          'sys.color.primary': '--scp',
+          'ref.color.common.color-theme-accent': '--scp',
           'sys.color.secondary': '--scs',
         );
 
@@ -411,7 +411,7 @@ describe('Utils', () => {
         @use 'v_util' as util;
 
         $src: (
-          'sys.color.primary': '--scp',
+          'ref.color.common.color-theme-accent': '--scp',
           'sys.color.secondary': '--scs',
         );
 
diff --git a/packages/theme/src/sass/lib.scss b/packages/theme/src/sass/lib.scss
index d5400c152..1965f86f8 100644
--- a/packages/theme/src/sass/lib.scss
+++ b/packages/theme/src/sass/lib.scss
@@ -13,7 +13,6 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
   @if not map-has-key($tokens-compiled, $id) {
     @error "Cannot resolve token with id #{inspect($id)}";
   }
-
   @return map-get($tokens-compiled, $id);
 }
 
@@ -33,32 +32,76 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
 @mixin tokens-preset-light() {
   @include eval-tokens(
     (
+      ref: (
+        'color': (
+          'common': (
+            'color-utility-surface': #dde0e1,
+            'color-base-on-accent': #ffffff,
+            'color-base-content-tertiary': #f5f7f8,
+            'color-base-content-secondary': #eceff0,
+            'color-utility-body': '',
+            'color-theme-accent': #d0021b,
+            'border-color': '',
+          ),
+          'shadow': (
+            'color-light': '',
+            'color-light-dark': '',
+            'color-dark': '',
+            'shadow-element': '',
+            'shadow-element-pressed': '',
+          ),
+        ),
+        'border': (
+          'width': '',
+          'style': '',
+        ),
+      ),
       sys: (
         'color': (
-          'primary': #d0021b,
-          'primary-hover': #c6021a,
-          'primary-pressed': #bb0218,
-          'primary-focused': #b10217,
-          'primary-background': #fae6e8,
-          'primary-hover-background': #f6ccd1,
-          'primary-pressed-background': #f1b3bb,
-          'primary-focused-background': #ec9aa4,
-          'content-primary': #2d2926,
-          'content-secondary': #53565a,
           'content-tertiary': #75787b,
+          'content-secondary': #53565a,
+          'content-primary': #2d2926,
           'content-quaternary': #a3a4a8,
-          'content-on-background-inverted': #fff,
-          'background': #f5f7f8,
-          'background-hover': #eceff0,
-          'background-inverted': #4e4e4e,
-          'border-primary': #dde0e1,
-          'border-secondary': #eceff0,
-          'disabled': #f5f7f8,
           'on-disabled': #a3a4a8,
+          'primary-pressed': #bb0218,
+          'primary-hover': #c6021a,
+          'button': (
+            'primary': (
+              'background-color-hover': #c6021a,
+              'background-color-pressed': #bb0218,
+              'background-color-alternative': #d0021b,
+              'background-color-alternative-active': #d0021b,
+              'border-color': #2d2926,
+            ),
+            'secondary': (
+              'text-color': #53565a,
+              'text-color-active': #2d2926,
+              'border-color': #eceff0,
+              'border-color-active': '',
+            ),
+            'tertiary': (
+              'text-color': #75787b,
+              'text-color-active': #a3a4a8,
+            ),
+            'action': (
+              'background-color': #f5f7f8,
+              'background-color-hover': #eceff0,
+              'background-color-pressed': token-as-var('ref.color.common.color-utility-surface'), 
+              
+              'text-color': #2d2926,
+              'text-color-hover': '',
+              'text-color-active': '',
+            )
+          ),
+          'textfield': (
+            'background-color': #F5F7F8,
+            'background-color-hover': #ECEFF0,
+            'border-color': #DDE0E1,
+            'label-color': #75787B,
+            'counter-color': #75787B,
+            'outline-color': '',
+          ),
           'util': (
-            'body': #fff,
-            'surface': #fff,
-            'surface-overlay': rgba(255, 255, 255, 0.7),
             'overlay': rgba(0, 0, 0, 0.45),
           ),
           'status': (
@@ -79,22 +122,21 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
             'debug-background-hover': #f3d3de,
           ),
         ),
-        'shadow': (
-          'page-header': (
-            0px 24px 80px rgba(10, 2, 34, 0.07),
-            0px 10.0266px 33.4221px rgba(10, 2, 34, 0.0558697),
-            0px 5.36071px 17.869px rgba(10, 2, 34, 0.05437),
-            0px 3.00517px 10.0172px rgba(10, 2, 34, 0.0484701),
-            0px 1.59602px 5.32008px rgba(10, 2, 34, 0.0371562),
-            0px 0.664142px 2.21381px rgba(10, 2, 34, 0.0208172),
+        'border': (
+          'button': (
+            'width': '',
           ),
-          'page-header-light': (
-            0px 6px 30px rgba(10, 2, 34, 0.03),
-            0px 3px 9px rgba(10, 2, 34, 0.02),
-            0px 5.36071px 6px rgba(10, 2, 34, 0.04),
-            0px 3.00517px 7px rgba(10, 2, 34, 0.03),
-            0px 1.59602px 5.32008px rgba(10, 2, 34, 0.0371562),
+        ),
+        'disabled': (
+          'button': (
+            'background-color': #f5f7f8,
+            'border-color': #a3a4a8,
           ),
+        ),
+        'transition': (
+          'button': ''
+        ),
+        'shadow': (
           'modal-window-header': (
             0px -8px 80px rgba(10, 2, 34, 0.07),
             0px 1px 33.4221px rgba(10, 2, 34, 0.0558697),
@@ -114,9 +156,19 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
             0px 4px 16px rgba(45, 41, 38, 0.08),
           ),
           'active-tab': 0px 1px 1px rgba(83, 86, 90, 0.1),
+          'button': (
+            'primary': (
+              'box-shadow': '',
+
+              'box-shadow-hover': '',
+              'box-shadow-pressed': '',
+              
+              'box-shadow-alternative': '',    
+            ),
+          ),
         ),
       ),
-    )
+    ),
   );
 }
 
diff --git a/packages/theme/src/sass/tokens.scss b/packages/theme/src/sass/tokens.scss
index 23dc4a919..25712adee 100644
--- a/packages/theme/src/sass/tokens.scss
+++ b/packages/theme/src/sass/tokens.scss
@@ -1,69 +1,119 @@
 $tokens: (
   'ref': (
-    // empty, yet
+    'color': (
+      'common': (
+        'color-utility-surface': null,
+        'color-base-on-accent': null,
+        'color-base-content-tertiary': null,
+        'color-base-content-secondary': null,
+        'color-utility-body': null,
+        'color-theme-accent': null,
+        'border-color': null,
+      ),
+      'shadow': (
+        'color-light': null,
+        'color-light-dark': null,
+        'color-dark': null,
+        'shadow-element': null,
+        'shadow-element-pressed': null,
+      ),
+    ),
+    'border': (
+      'width': null,
+      'style': null,
+    ),
   ),
   'sys': (
     'color': (
-      // Primary
-      'primary': null,
-      'primary-background': null,
-      'primary-hover': null,
-      'primary-hover-background': null,
-      'primary-pressed': null,
-      'primary-pressed-background': null,
-      'primary-focused': null,
-      'primary-focused-background': null,
-      // Neutral - Content
-      'content-primary': null,
-      'content-secondary': null,
       'content-tertiary': null,
+      'content-secondary': null,
+      'content-primary': null,
       'content-quaternary': null,
-      'content-on-background-inverted': null,
-      // Neutral - Background
-      'background': null,
-      'background-hover': null,
-      'background-inverted': null,
-      // Neutral - Border
-      'border-primary': null,
-      'border-secondary': null,
-      // Neutral - State
-      'disabled': null,
       'on-disabled': null,
-      // Utility
-      'util':
-        (
-          'body': null,
-          'surface': null,
-          'surface-overlay': null,
-          'overlay': null,
+      'primary-pressed': null,
+      'primary-hover': null,
+      'button': (
+        'primary': (
+          'background-color-hover': null,
+          'background-color-pressed': null,
+          'background-color-alternative': null,
+          'background-color-alternative-active': null,
+          'border-color': null,
+        ),
+        'secondary': (
+          'text-color': null,
+          'text-color-active': null,
+          'border-color': null,
+          'border-color-active': null,
         ),
-      // Status
-      'status':
-        (
-          'success': null,
-          'success-background': null,
-          'success-background-hover': null,
-          'warning': null,
-          'warning-background': null,
-          'warning-background-hover': null,
-          'error': null,
-          'error-background': null,
-          'error-background-hover': null,
-          'info': null,
-          'info-background': null,
-          'info-background-hover': null,
-          'debug': null,
-          'debug-background': null,
-          'debug-background-hover': null,
+        'tertiary': (
+          'text-color': null,
+          'text-color-active': null,
         ),
+        'action': (
+          'background-color': null,
+          'background-color-hover': null,
+          'background-color-pressed': null,
+          'text-color': null,
+          'text-color-hover': null,
+          'text-color-active': null,
+        ),
+      ),
+      'textfield': (
+        'background-color': null,
+        'background-color-hover': null,
+        'border-color': null,
+        'label-color': null,
+        'counter-color': null,
+        'outline-color': null,
+      ),
+      'util': (
+        'overlay': null,
+      ),
+      'status': (
+        'success': null,
+        'success-background': null,
+        'success-background-hover': null,
+        'warning': null,
+        'warning-background': null,
+        'warning-background-hover': null,
+        'error': null,
+        'error-background': null,
+        'error-background-hover': null,
+        'info': null,
+        'info-background': null,
+        'info-background-hover': null,
+        'debug': null,
+        'debug-background': null,
+        'debug-background-hover': null,
+      ),
+    ),
+    'border': (
+      'button': (
+        'width': null,
+    )),
+    'disabled': (
+      'button': (
+        'background-color': null,
+        'border-color': null,
+      ),
+    ),
+    'transition': (
+      'button': null,
     ),
     'shadow': (
-      'page-header': null,
-      'page-header-light': null,
       'modal-window-header': null,
       'floating-notification': null,
       'dropdown': null,
       'active-tab': null,
+      'button': (
+        'primary': (
+          'box-shadow': null,
+          'box-shadow-hover': null,
+          'box-shadow-pressed': null,
+          'box-shadow-alternative': null,
+        ),
+      ),
     ),
   ),
   'comp': (
diff --git a/packages/ui/.storybook/custom.scss b/packages/ui/.storybook/custom.scss
index 1a8097fd1..e603a113a 100644
--- a/packages/ui/.storybook/custom.scss
+++ b/packages/ui/.storybook/custom.scss
@@ -1,8 +1,14 @@
 @use '@/theme';
+@use '@/theme_neumorphism';
 @use '@soramitsu-ui/theme/fonts/Sora';
 
 @include theme.typography-preset-default;
+@include theme_neumorphism.typography-preset-default;
 
 :root {
   @include theme.tokens-preset-light;
+  @include theme_neumorphism.tokens-preset-light;
+}
+body {
+  background-color: #F7F3F4;
 }
diff --git a/packages/ui/.storybook/preview.js b/packages/ui/.storybook/preview.js
index 35bac2499..2e7b7979f 100644
--- a/packages/ui/.storybook/preview.js
+++ b/packages/ui/.storybook/preview.js
@@ -1,5 +1,14 @@
 import 'virtual:windi.css'
 import './custom.scss'
+import { useDark, useToggle } from '@vueuse/core'
+import { SCheckboxSolo } from '@/lib'
+
+const isNeomorph = useDark({
+  attribute: 'theme',
+  valueDark: 'neumorphism',
+})
+
+const toggleNeumorphism = useToggle(isNeomorph)
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -10,3 +19,30 @@ export const parameters = {
     },
   },
 }
+
+const withThemeProvider = (Story) => {
+  return {
+    components: { Story, SCheckboxSolo },
+    template: `
+      <div>
+        <SCheckboxSolo
+          v-model="isNeomorph"
+          style="margin-bottom: 10px;"
+          :checked="isNeomorph"
+          @click="toggleNeumorphism()"
+        >
+          Toggle Neumorphism
+        </SCheckboxSolo>
+        <story />
+      </div>
+    `,
+    setup() {
+      return {
+        isNeomorph,
+        toggleNeumorphism,
+      }
+    },
+  }
+}
+
+export const decorators = [withThemeProvider]
diff --git a/packages/ui/cypress/support/custom.scss b/packages/ui/cypress/support/custom.scss
index 1a8097fd1..d78e8ba88 100644
--- a/packages/ui/cypress/support/custom.scss
+++ b/packages/ui/cypress/support/custom.scss
@@ -1,8 +1,10 @@
 @use '@/theme';
+@use '@/theme_neumorphism';
 @use '@soramitsu-ui/theme/fonts/Sora';
 
 @include theme.typography-preset-default;
 
 :root {
   @include theme.tokens-preset-light;
-}
+  @include theme_neumorphism.tokens-preset-light;
+}
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 212eb0ae2..aad6bdac6 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -53,6 +53,7 @@
     "@microsoft/api-extractor": "7.18.*",
     "@soramitsu-ui/icons": "0.1.0",
     "@soramitsu-ui/theme": "0.3.0",
+    "@soramitsu-ui/theme_neumorphism": "0.1.0",
     "@soramitsu-ui/vite-plugin-svg": "0.1.0",
     "@storybook/addon-actions": "^7.0.23",
     "@storybook/addon-essentials": "^7.0.23",
diff --git a/packages/ui/src/components/Accordion/SAccordionItem.vue b/packages/ui/src/components/Accordion/SAccordionItem.vue
index 0deef4292..ce9832c7d 100644
--- a/packages/ui/src/components/Accordion/SAccordionItem.vue
+++ b/packages/ui/src/components/Accordion/SAccordionItem.vue
@@ -125,7 +125,7 @@ if (groupApi) {
 
 .s-accordion-item {
   @apply flex flex-col;
-  border: 1px solid theme.token-as-var('sys.color.border-secondary');
+  border: 1px solid theme.token-as-var('ref.color.common.color-base-content-secondary');
   $component: &;
 
   &_expanded {
@@ -134,7 +134,7 @@ if (groupApi) {
     }
 
     #{$component}__trigger {
-      background-color: theme.token-as-var('sys.color.background');
+      background-color: theme.token-as-var('ref.color.common.color-base-content-tertiary');
     }
 
     #{$component}__body-wrapper {
diff --git a/packages/ui/src/components/Button/SButton.vue b/packages/ui/src/components/Button/SButton.vue
index a81a1c863..f23aa208f 100644
--- a/packages/ui/src/components/Button/SButton.vue
+++ b/packages/ui/src/components/Button/SButton.vue
@@ -22,6 +22,8 @@ const props = withDefaults(
     disabled?: boolean
     loading?: boolean
     uppercase?: boolean
+    alternative?: boolean
+    primary?: boolean
   }>(),
   {
     type: 'secondary',
@@ -33,6 +35,8 @@ const props = withDefaults(
     disabled: false,
     loading: false,
     uppercase: false,
+    alternative: false,
+    primary: false,
   },
 )
 
@@ -49,6 +53,16 @@ const font = computed(() => {
 
   return FONT_SIZE[definitelySize.value]
 })
+const pressed = ref(false)
+
+const handleClick = (event: Event) => {
+  pressed.value = true
+  setTimeout(() => {
+    pressed.value = false
+  }, 500)
+}
+
+
 </script>
 
 <template>
@@ -64,9 +78,13 @@ const font = computed(() => {
         's-button_disabled': loading || disabled,
         's-button_rounded': isAction && rounded,
         's-button_loading': loading,
+        [`s-button_type_${definitelyType}_alternative`]: alternative,
+        [`s-button_type_${definitelyType}_primary`]: primary,
+        's-pressed': pressed,
       },
     ]"
     :disabled="loading || disabled"
+    @click="handleClick"
   >
     <SSpinner
       v-if="loading"
@@ -99,7 +117,12 @@ const font = computed(() => {
 </template>
 
 <style lang="scss">
-@use '@/theme';
+@use 'sass:meta';
+@use '@/theme_neumorphism' as theme_neumorphism;
+@use '@/theme' as theme;
+@import '../../themes.scss';
+
+
 
 @mixin button-type($name, $default, $hover, $active, $disabled) {
   &_type_#{$name} {
@@ -138,100 +161,267 @@ const font = computed(() => {
   }
 }
 
-.s-button {
-  @apply cursor-pointer inline-flex rounded select-none items-center justify-center;
-  fill: currentColor;
-  $component: &;
+@mixin disabled (
+  $theme,
+  $border-width: null, 
+  $background-color: null, 
+  $box-shadow: null
+) {
+  $border-width: if($border-width == null, theme.token-as-var('sys.border.button.width'), $border-width);
+  $background-color: if($background-color == null, theme.token-as-var('sys.disabled.button.background-color'), $background-color);
+  $box-shadow: if($box-shadow == null, theme.token-as-var('ref.color.shadow.shadow-element'), $box-shadow);
+
+  &_disabled, &_disabled:hover {
+    color: theme.token-as-var('ref.color.common.color-base-content-tertiary');
+    background: $background-color;
+    border-color: theme.token-as-var('sys.disabled.button.border-color');
+    box-shadow: $box-shadow;
+    border-width: $border-width;
+  }
+}
 
-  &_disabled {
-    @apply cursor-default;
+// Main button
+@mixin apply-theme-button($theme) {
+  border: 
+  theme.token-as-var('sys.border.button.width') 
+  theme.token-as-var('ref.border.style') 
+  theme.token-as-var('sys.color.button.primary.border-color');
+  transition: theme.token-as-var('sys.transition.button');
+}
+
+// Primary
+@mixin apply-theme-primary($theme) {
+  background-color: theme-token($theme,'ref.color.common.color-theme-accent');
+  color: theme-token($theme,'ref.color.common.color-base-on-accent');
+  box-shadow: theme-token($theme,'sys.shadow.button.primary.box-shadow');
+
+  &:hover,&:focus, &.focusing {
+    background-color: theme-token($theme,'sys.color.button.primary.background-color-hover');
+    border-color: theme-token($theme,'ref.color.common.color-utility-surface');
+    box-shadow:  theme-token($theme,'sys.shadow.button.primary.box-shadow-hover');
+    color: theme-token($theme,'ref.color.common.color-base-on-accent');
+    &.is-circle {
+      border-color: theme-token($theme,'sys.color.button.primary.background-color-hover');
+    }
   }
 
-  &_icon-position_left {
-    @apply flex-row;
+  &:active, &.s-pressed {
+    background-color:  theme-token($theme,'sys.color.button.primary.background-color-pressed');
+    border-color:  theme-token($theme,'ref.color.common.color-utility-surface');
+    box-shadow:   theme-token($theme,'sys.shadow.button.primary.box-shadow-pressed');
+    color:  theme-token($theme,'ref.color.common.color-base-on-accent');
   }
+   @include disabled($theme: theme);
+}
+// Primary-alternative
+@mixin apply-theme-primary-alternative($theme) {
+  background-color: theme-token($theme,'sys.color.button.primary.background-color-alternative');
+  box-shadow: theme-token($theme,'sys.shadow.button.primary.box-shadow-alternative');
+  border-width: theme-token($theme,'ref.border.width');
+
+  &:hover, &:focus, &.focusing, &:active, &.s-pressed {
+    background-color: theme-token($theme,'sys.color.button.primary.background-color-alternative-active');
+    box-shadow:  theme-token($theme,'sys.shadow.button.primary.box-shadow-alternative');
+  }
+  @include disabled($theme: theme,$border-width: theme_neumorphism.token-as-var('ref.border.width'));
+}
 
-  &_icon-position_left &__icon {
-    @apply mr-8px;
+// Secondary
+@mixin apply-theme-secondary($theme) {
+  background-color: theme-token($theme,'ref.color.common.color-base-content-tertiary');
+  color: theme-token($theme,'sys.color.button.secondary.text-color');
+  border: 
+  theme-token($theme,'ref.border.width') 
+  theme-token($theme,'ref.border.style') 
+  theme-token($theme,'sys.color.button.secondary.border-color');
+  box-shadow: theme-token($theme,'ref.color.shadow.shadow-element-pressed');
+
+  &:hover, &:focus, &.focusing, &:active, &.s-pressed{
+    background: theme-token($theme,'ref.color.common.color-base-content-secondary');
+    border-color: theme-token($theme,'sys.color.button.secondary.border-color-active');
+    color: theme-token($theme,'sys.color.button.secondary.text-color-active');
+  }
+  &:active,&.s-pressed {
+    box-shadow: theme-token($theme,'ref.color.shadow.shadow-element');
   }
+  @include disabled($theme: theme, $border-width: theme_neumorphism.token-as-var('ref.border.width'));
+}
 
-  &_size_mini#{&}_icon-position_left &__icon {
-    @apply mr-6px;
+// Terrtiary
+@mixin apply-theme-tertiary($theme) {
+  background-color: theme-token($theme,'ref.color.common.color-utility-body');
+  color: theme-token($theme,'sys.color.button.tertiary.text-color');
+  border: 
+  theme-token($theme,'ref.border.width') 
+  theme-token($theme,'ref.border.style') 
+  theme-token($theme,'ref.color.common.border-color');
+  box-shadow: theme-token($theme,'ref.color.shadow.shadow-element-pressed');
+
+  &:hover, &:focus, &.focusing, &:active, &.s-pressed {
+    background: theme-token($theme,'ref.color.common.color-utility-body');
+    border-color: theme-token($theme,'ref.color.common.border-color');
+    color: theme-token($theme,'sys.color.button.tertiary.text-color-active');
   }
+  &:hover, &:focus, &.focusing {
+    box-shadow: theme-token($theme,'ref.color.shadow.shadow-element');
+  }
+  &:active, &.s-pressed {
+    box-shadow: theme-token($theme,'ref.color.shadow.shadow-element');
+  }
+  @include disabled($theme: theme, $border-width: theme_neumorphism.token-as-var('ref.border.width'));
+}
 
-  &_icon-position_right {
-    @apply flex-row-reverse;
+//Action
+@mixin apply-theme-action($theme) {
+  background: theme-token($theme,'sys.color.button.action.background-color'); 
+  border-color: theme-token($theme,'ref.color.common.border-color'); 
+  border-style: theme-token($theme,'ref.border.style');
+  border-width: theme-token($theme,'ref.border.width');
+  box-shadow: theme-token($theme,'ref.color.shadow.shadow-element-pressed');
+  color: theme-token($theme,'sys.color.button.action.text-color');
+
+  &:hover, &:focus, &.focusing {
+    background: theme-token($theme,'sys.color.button.action.background-color-hover'); 
+    border-color: theme-token($theme,'ref.color.common.border-color');
+    color: theme-token($theme,'sys.color.button.action.text-color-hover');
+    box-shadow: theme-token($theme,'ref.color.shadow.shadow-element');
+  }
+  &:active, &.s-pressed {
+    background: theme-token($theme,'sys.color.button.action.background-color-pressed');
+    border-color: theme-token($theme,'ref.color.common.border-color'); 
+    box-shadow: theme-token($theme,'ref.color.shadow.shadow-element-pressed');
+  }
+  &:active {
+    color: theme-token($theme,'sys.color.button.action.text-color-active');
+  }
+  @include disabled(
+    $theme: theme,
+    $border-width: theme_neumorphism.token-as-var('ref.border.width'), 
+    $background-color: theme_neumorphism.token-as-var('sys.color.button.action.background-color'), 
+    $box-shadow: theme_neumorphism.token-as-var('ref.color.shadow.shadow-element-pressed'),
+  );
+  &.primary:not(:disabled) {
+    color: theme-token($theme,'ref.color.common.color-base-on-accent')
+  }
+}
+// Action-alternative
+@mixin apply-theme-action-alternative($theme) {
+  color: theme-token($theme,'ref.color.common.color-base-content-tertiary');
+  &, &:hover, &:focus, &.focusing, &:active, &.s-pressed {
+    background-color: theme-token($theme,'ref.color.common.border-color'); 
+    border-color: theme-token($theme,'ref.color.common.border-color'); 
+    box-shadow: theme-token($theme,'ref.color.shadow.shadow-element-pressed'); 
+  }
+  &:hover, &:focus, &.focusing, &:active, &.s-pressed {
+    color: theme-token($theme,'ref.color.common.color-base-content-secondary');
+  }
+  @include disabled( 
+    $theme: theme,
+    $border-width: theme_neumorphism.token-as-var('ref.border.width'), 
+    $background-color: theme_neumorphism.token-as-var('ref.color.common.border-color'), 
+    $box-shadow: theme_neumorphism.token-as-var('ref.color.shadow.shadow-element-pressed'),
+  );
+}
+// Action-primary
+@mixin apply-theme-action-primary($theme) {
+  background-color: theme-token($theme,'ref.color.common.color-theme-accent');
+  color: theme-token($theme,'ref.color.common.color-base-on-accent');
+  box-shadow:  theme-token($theme,'sys.shadow.button.primary.box-shadow');
+  border: 
+  theme-token($theme,'sys.border.button.width') 
+  theme-token($theme,'ref.border.style') 
+  theme-token($theme,'sys.color.button.primary.border-color');
+
+  &:hover {
+    background-color: theme-token($theme,'sys.color.button.primary.background-color-hover');
+    border-color: theme-token($theme,'ref.color.common.color-utility-surface');
+    box-shadow: theme-token($theme,'sys.shadow.button.primary.box-shadow-hover');
+    color: theme-token($theme,'ref.color.common.color-base-on-accent');
   }
 
-  &_icon-position_right &__icon {
-    @apply ml-8px;
+  &:active {
+    background-color: theme-token($theme,'sys.color.button.primary.background-color-pressed');
+    border-color: theme-token($theme,'ref.color.common.color-utility-surface');
+    box-shadow: theme-token($theme,'sys.shadow.button.primary.box-shadow-pressed');
+    color: theme-token($theme,'ref.color.common.color-base-on-accent');
   }
+}
 
-  &_size_mini#{&}_icon-position_right &__icon {
-    @apply ml-6px;
+
+@mixin apply-theme($theme-name, $theme-variable) {
+  .s-button {
+    @include apply-theme-button($theme: $theme-variable);
+  }
+  .s-button_type_primary {
+    @include apply-theme-primary($theme: $theme-variable);
+  }
+  .s-button_type_primary_alternative {
+    @include apply-theme-primary-alternative($theme: $theme-variable);
+  }
+  .s-button_type_secondary {
+    @include apply-theme-secondary($theme: $theme-variable);
   }
 
-  &_type_action &__icon,
-  &_size_mini#{&}_type_action &__icon,
-  & &__icon:empty {
-    @apply mx-0;
+  .s-button_type_action {
+    @include apply-theme-action($theme: $theme-variable);
   }
 
-  &_type_primary {
-    background-color: theme.token-as-var('sys.color.primary');
-    color: theme.token-as-var('sys.color.content-on-background-inverted');
 
-    &:hover {
-      background-color: theme.token-as-var('sys.color.primary-hover');
+  @if $theme-name != '' {
+    .s-button_type_tertiary {
+      @include apply-theme-tertiary($theme: $theme-variable);
     }
-
-    &:active {
-      background-color: theme.token-as-var('sys.color.primary-pressed');
+      .s-button_type_action_alternative {
+      @include apply-theme-action-alternative($theme: $theme-variable);
+    }
+    .s-button_type_action_primary {
+      @include apply-theme-action-primary($theme: $theme-variable);
     }
   }
+}
 
-  &_type_primary#{&}_disabled {
-    background-color: theme.token-as-var('sys.color.primary-hover-background');
+@each $theme-name, $theme-variable in $themes {
+  [theme="#{$theme-name}"] {
+    @include apply-theme($theme-name, $theme-variable);
   }
+}
 
-  &_type_secondary,
-  &_type_action {
-    background-color: theme.token-as-var('sys.color.background');
-    color: theme.token-as-var('sys.color.content-primary');
 
-    &:hover {
-      background-color: theme.token-as-var('sys.color.background-hover');
-    }
+.s-button {
+  background-color: theme.token-as-var('sys.color.button.action.background-color');
+  color: theme.token-as-var('sys.color.button.secondary.text-color');
+  @apply cursor-pointer inline-flex rounded select-none items-center justify-center;
+  fill: currentColor;
+  $component: &;
 
-    &:active {
-      background-color: theme.token-as-var('sys.color.border-primary');
-    }
+  &_icon-position_left {
+    @apply flex-row;
   }
 
-  &_type_secondary#{&}_disabled,
-  &_type_action#{&}_disabled {
-    background-color: theme.token-as-var('sys.color.disabled');
-    color: theme.token-as-var('sys.color.on-disabled');
+  &_icon-position_left &__icon {
+    @apply mr-8px;
   }
 
-  &_type_outline {
-    border: 1px solid theme.token-as-var('sys.color.border-primary');
-    color: theme.token-as-var('sys.color.content-primary');
+  &_size_mini#{&}_icon-position_left &__icon {
+    @apply mr-6px;
+  }
 
-    &:hover {
-      border: 1px solid theme.token-as-var('sys.color.primary-hover');
-      color: theme.token-as-var('sys.color.primary-hover');
-    }
+  &_icon-position_right {
+    @apply flex-row-reverse;
+  }
 
-    &:active {
-      border: 1px solid theme.token-as-var('sys.color.primary-pressed');
-      color: theme.token-as-var('sys.color.primary-pressed');
-    }
+  &_icon-position_right &__icon {
+    @apply ml-8px;
   }
 
-  &_type_outline#{&}_disabled {
-    border: 1px solid theme.token-as-var('sys.color.disabled');
-    color: theme.token-as-var('sys.color.on-disabled');
+  &_size_mini#{&}_icon-position_right &__icon {
+    @apply ml-6px;
+  }
+
+  &_type_action &__icon,
+  &_size_mini#{&}_type_action &__icon,
+  & &__icon:empty {
+    @apply mx-0;
   }
 
   @include button-size(xs, $height: 24px, $padding: px-8px, $icon-size: 12px, $border-radius: 2px);
diff --git a/packages/ui/src/components/Button/consts.ts b/packages/ui/src/components/Button/consts.ts
index c4d6b4326..eaeb55637 100644
--- a/packages/ui/src/components/Button/consts.ts
+++ b/packages/ui/src/components/Button/consts.ts
@@ -1,4 +1,4 @@
-export const BUTTON_TYPE_VALUES = ['primary', 'secondary', 'outline', 'action'] as const
+export const BUTTON_TYPE_VALUES = ['primary','alternative','tertiary', 'secondary', 'outline', 'action'] as const
 export const BUTTON_SIZE_VALUES = ['xs', 'sm', 'md', 'lg'] as const
 export const BUTTON_ICON_POSITION_VALUES = ['left', 'right'] as const
 
diff --git a/packages/ui/src/components/Checkbox/SCheckboxAtom.scss b/packages/ui/src/components/Checkbox/SCheckboxAtom.scss
index 4e1163abb..b98603054 100644
--- a/packages/ui/src/components/Checkbox/SCheckboxAtom.scss
+++ b/packages/ui/src/components/Checkbox/SCheckboxAtom.scss
@@ -8,12 +8,12 @@ $sizes: (
 );
 
 $border-radius: 3px;
-$color-disabled: theme.token-as-var('sys.color.disabled');
+$color-disabled: theme.token-as-var('ref.color.common.color-base-on-accent');
 $color-on-disabled: theme.token-as-var('sys.color.on-disabled');
-$color-primary: theme.token-as-var('sys.color.primary');
-$color-border-primary: theme.token-as-var('sys.color.border-primary');
-$color-border-secondary: theme.token-as-var('sys.color.border-secondary');
-$color-on-accent: theme.token-as-var('sys.color.content-on-background-inverted');
+$color-primary: theme.token-as-var('ref.color.common.color-theme-accent');
+$color-border-primary: theme.token-as-var('ref.color.common.color-utility-surface');
+$color-border-secondary: theme.token-as-var('ref.color.common.color-base-content-secondary');
+$color-on-accent: theme.token-as-var('ref.color.common.color-base-on-accent');
 
 .s-checkbox-atom {
   @apply flex items-center justify-center;
diff --git a/packages/ui/src/components/DatePicker/SDatePicker.vue b/packages/ui/src/components/DatePicker/SDatePicker.vue
index c83b299f6..ef2c0c89a 100644
--- a/packages/ui/src/components/DatePicker/SDatePicker.vue
+++ b/packages/ui/src/components/DatePicker/SDatePicker.vue
@@ -559,7 +559,7 @@ watch(
 .s-date-picker {
   &__header {
     border-radius: 4px;
-    border: 1px solid theme.token-as-var('sys.color.border-primary');
+    border: 1px solid theme.token-as-var('ref.color.common.color-utility-surface');
 
     .arrow {
       position: absolute;
@@ -579,7 +579,7 @@ watch(
 
   &__panels {
     display: grid;
-    background-color: theme.token-as-var('sys.color.util.surface');
+    background-color: theme.token-as-var('ref.color.common.color-base-on-accent');
 
     grid-template-areas:
       'options calendars time'
diff --git a/packages/ui/src/components/DatePicker/SDatePickerPanelCustom.vue b/packages/ui/src/components/DatePicker/SDatePickerPanelCustom.vue
index 0d57baf5d..af6faac28 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerPanelCustom.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerPanelCustom.vue
@@ -187,12 +187,12 @@ const onDoneClick = () => {
 
 .s-date-picker-custom-panel {
   grid-area: custom;
-  border-top: 1px solid theme.token-as-var('sys.color.border-primary');
+  border-top: 1px solid theme.token-as-var('ref.color.common.color-utility-surface');
   height: 52px;
 
   &__input {
     outline: none;
-    border: 1px solid theme.token-as-var('sys.color.border-primary');
+    border: 1px solid theme.token-as-var('ref.color.common.color-utility-surface');
     border-radius: 4px;
     padding: 5px 10px;
     width: 120px;
@@ -208,9 +208,9 @@ const onDoneClick = () => {
     font-size: 10px;
     width: 44px;
     height: 24px;
-    background: theme.token-as-var('sys.color.primary');
+    background: theme.token-as-var('ref.color.common.color-theme-accent');
     border-radius: 2px;
-    color: theme.token-as-var('sys.color.util.surface');
+    color: theme.token-as-var('ref.color.common.color-base-on-accent');
     font-weight: 700;
   }
 }
diff --git a/packages/ui/src/components/DatePicker/SDatePickerPanelMonths.vue b/packages/ui/src/components/DatePicker/SDatePickerPanelMonths.vue
index 4e2d5286b..6f04ff510 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerPanelMonths.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerPanelMonths.vue
@@ -81,7 +81,7 @@ const changeView = (viewName: string) => {
 
       &.active,
       &:hover {
-        color: theme.token-as-var('sys.color.primary');
+        color: theme.token-as-var('ref.color.common.color-theme-accent');
       }
     }
   }
diff --git a/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue b/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue
index 8115c3e7a..4b5d20f4b 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue
@@ -45,7 +45,7 @@ const onMenuClick = (data: PossiblePresetOption) => {
 .s-date-picker-options-panel {
   @apply flex flex-col justify-start;
   grid-area: options;
-  border-right: 1px solid theme.token-as-var('sys.color.border-primary');
+  border-right: 1px solid theme.token-as-var('ref.color.common.color-utility-surface');
 
   &__item {
     padding: 10px 16px;
@@ -53,10 +53,10 @@ const onMenuClick = (data: PossiblePresetOption) => {
     position: relative;
     width: 150px;
     &:hover {
-      background-color: theme.token-as-var('sys.color.background-hover');
+      background-color: theme.token-as-var('ref.color.common.color-base-content-secondary');
     }
     &.active {
-      background-color: theme.token-as-var('sys.color.background-hover');
+      background-color: theme.token-as-var('ref.color.common.color-base-content-secondary');
     }
   }
 
diff --git a/packages/ui/src/components/DatePicker/SDatePickerPanelTime.vue b/packages/ui/src/components/DatePicker/SDatePickerPanelTime.vue
index 1920b2c1f..6d936e6e4 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerPanelTime.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerPanelTime.vue
@@ -46,7 +46,7 @@ const updateTime = (e: any) => {
   grid-area: time;
   max-height: 342px;
 
-  scrollbar-color: theme.token-as-var('sys.color.border-primary') transparent;
+  scrollbar-color: theme.token-as-var('ref.color.common.color-utility-surface') transparent;
   scrollbar-arrow-color: transparent;
   scrollbar-width: thin;
 
@@ -68,13 +68,13 @@ const updateTime = (e: any) => {
   }
 
   &::-webkit-scrollbar-thumb {
-    background: theme.token-as-var('sys.color.border-primary');
+    background: theme.token-as-var('ref.color.common.color-utility-surface');
     border-radius: 2px;
   }
 
   .active {
-    background-color: theme.token-as-var('sys.color.primary');
-    color: theme.token-as-var('sys.color.util.surface');
+    background-color: theme.token-as-var('ref.color.common.color-theme-accent');
+    color: theme.token-as-var('ref.color.common.color-base-on-accent');
     border-radius: 2px;
   }
 }
diff --git a/packages/ui/src/components/DatePicker/SDatePickerTableDate.vue b/packages/ui/src/components/DatePicker/SDatePickerTableDate.vue
index 154d18a50..78255b89a 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerTableDate.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerTableDate.vue
@@ -369,12 +369,12 @@ const handleClick = (ev: any) => {
 
       &.today {
         position: relative;
-        color: theme.token-as-var('sys.color.primary');
+        color: theme.token-as-var('ref.color.common.color-theme-accent');
         font-weight: 700;
 
         &.end-date span,
         &.start-date span {
-          color: theme.token-as-var('sys.color.util.surface');
+          color: theme.token-as-var('ref.color.common.color-base-on-accent');
         }
       }
 
@@ -387,18 +387,18 @@ const handleClick = (ev: any) => {
       }
 
       &.available:hover:not(.start-date, .end-date, .current, .disabled) {
-        color: theme.token-as-var('sys.color.primary');
+        color: theme.token-as-var('ref.color.common.color-theme-accent');
       }
 
       &.in-range {
-        background-color: theme.token-as-var('sys.color.background');
+        background-color: theme.token-as-var('ref.color.common.color-base-on-accent');
       }
 
       &.current,
       &.end-date,
       &.start-date {
-        color: theme.token-as-var('sys.color.util.surface');
-        background-color: theme.token-as-var('sys.color.primary');
+        color: theme.token-as-var('ref.color.common.color-base-on-accent');
+        background-color: theme.token-as-var('ref.color.common.color-theme-accent');
         border-radius: 2px;
 
         &.disabled .date-table__cell-text {
@@ -407,16 +407,16 @@ const handleClick = (ev: any) => {
       }
 
       &.selected {
-        background-color: theme.token-as-var('sys.color.primary');
-        color: theme.token-as-var('sys.color.util.surface');
+        background-color: theme.token-as-var('ref.color.common.color-theme-accent');
+        color: theme.token-as-var('ref.color.common.color-base-on-accent');
       }
     }
 
     &__title {
       padding: 4px;
       font-weight: 400;
-      border-bottom: 1px solid theme.token-as-var('sys.color.border-primary');
-      border-top: 1px solid theme.token-as-var('sys.color.border-primary');
+      border-bottom: 1px solid theme.token-as-var('ref.color.common.color-utility-surface');
+      border-top: 1px solid theme.token-as-var('ref.color.common.color-utility-surface');
       color: theme.token-as-var('sys.color.content-primary');
       text-align: center;
     }
diff --git a/packages/ui/src/components/DatePicker/SDatePickerTableMonths.vue b/packages/ui/src/components/DatePicker/SDatePickerTableMonths.vue
index e782233e4..4762d6c7d 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerTableMonths.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerTableMonths.vue
@@ -134,16 +134,16 @@ const gridCells: ComputedRef<MonthCell[]> = computed(() => {
       &.today {
         & .end-date .cell,
         &.start-date .cell {
-          color: theme.token-as-var('sys.color.util.surface');
+          color: theme.token-as-var('ref.color.common.color-base-on-accent');
         }
       }
 
       &.current:not(.disabled) .cell {
-        color: theme.token-as-var('sys.color.primary');
+        color: theme.token-as-var('ref.color.common.color-theme-accent');
       }
 
       &.today .cell {
-        color: theme.token-as-var('sys.color.primary');
+        color: theme.token-as-var('ref.color.common.color-theme-accent');
         font-weight: 700;
       }
 
@@ -155,7 +155,7 @@ const gridCells: ComputedRef<MonthCell[]> = computed(() => {
         border-radius: 18px;
 
         &:hover {
-          color: theme.token-as-var('sys.color.primary');
+          color: theme.token-as-var('ref.color.common.color-theme-accent');
         }
       }
     }
diff --git a/packages/ui/src/components/DatePicker/SDatePickerTableYears.vue b/packages/ui/src/components/DatePicker/SDatePickerTableYears.vue
index e1b4ba320..24e1413dc 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerTableYears.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerTableYears.vue
@@ -96,16 +96,16 @@ const handleYearTableClick = (event: any) => {
       cursor: pointer;
 
       &.today .cell {
-        color: theme.token-as-var('sys.color.primary');
+        color: theme.token-as-var('ref.color.common.color-theme-accent');
         font-weight: 700;
       }
 
       & .cell:hover {
-        color: theme.token-as-var('sys.color.primary');
+        color: theme.token-as-var('ref.color.common.color-theme-accent');
       }
 
       &.current .cell {
-        color: theme.token-as-var('sys.color.primary');
+        color: theme.token-as-var('ref.color.common.color-theme-accent');
       }
     }
   }
diff --git a/packages/ui/src/components/JsonInput/SJsonInput.vue b/packages/ui/src/components/JsonInput/SJsonInput.vue
index 4da8f83f1..5846b0c03 100755
--- a/packages/ui/src/components/JsonInput/SJsonInput.vue
+++ b/packages/ui/src/components/JsonInput/SJsonInput.vue
@@ -212,8 +212,8 @@ $footer-height: 26px;
 
 $color-content-primary: theme.token-as-var('sys.color.content-primary');
 $color-content-tertiary: theme.token-as-var('sys.color.content-primary');
-$color-bg: theme.token-as-var('sys.color.background');
-$color-bg-hover: theme.token-as-var('sys.color.background-hover');
+$color-bg: theme.token-as-var('ref.color.common.color-base-on-accent');
+$color-bg-hover: theme.token-as-var('ref.color.common.color-base-content-secondary');
 
 .s-json-input__editor {
   .jsoneditor {
diff --git a/packages/ui/src/components/Modal/SModalCard.vue b/packages/ui/src/components/Modal/SModalCard.vue
index f14d38314..8f3f05bbf 100644
--- a/packages/ui/src/components/Modal/SModalCard.vue
+++ b/packages/ui/src/components/Modal/SModalCard.vue
@@ -63,7 +63,7 @@ function closeClick() {
 <style lang="scss">
 @use '@/theme';
 
-$col-surface: theme.token-as-var('sys.color.util.surface');
+$col-surface: theme.token-as-var('ref.color.common.color-base-on-accent');
 $shadow: theme.token-as-var('sys.shadow.floating-notification');
 $shadow-header: theme.token-as-var('sys.shadow.modal-window-header');
 
diff --git a/packages/ui/src/components/NavigationMenu/SNavigationMenu.vue b/packages/ui/src/components/NavigationMenu/SNavigationMenu.vue
index c7e3f1212..a69af0507 100644
--- a/packages/ui/src/components/NavigationMenu/SNavigationMenu.vue
+++ b/packages/ui/src/components/NavigationMenu/SNavigationMenu.vue
@@ -68,7 +68,7 @@ provide(NAVIGATION_MENU_API_KEY, api)
 
 .s-navigation-menu {
   background-color: #2e2e36; // Base [night] / Background
-  color: theme.token-as-var('sys.color.content-on-background-inverted');
+  color: theme.token-as-var('ref.color.common.color-base-on-accent');
   width: 220px;
   height: 100%;
   transition: 150ms ease-in-out width;
diff --git a/packages/ui/src/components/NavigationMenu/SNavigationMenuItemBody.vue b/packages/ui/src/components/NavigationMenu/SNavigationMenuItemBody.vue
index 663826616..7bacb9935 100644
--- a/packages/ui/src/components/NavigationMenu/SNavigationMenuItemBody.vue
+++ b/packages/ui/src/components/NavigationMenu/SNavigationMenuItemBody.vue
@@ -101,7 +101,7 @@ const props = withDefaults(
   &_active,
   &:hover {
     background-color: #26262d; // Utility [night] / Surface
-    box-shadow: inset 5px 0 theme.token-as-var('sys.color.primary');
+    box-shadow: inset 5px 0 theme.token-as-var('ref.color.common.color-theme-accent');
   }
 
   &_highlighted {
@@ -114,7 +114,7 @@ const props = withDefaults(
 
     #{$root}__prepend::before {
       content: '';
-      background-color: theme.token-as-var('sys.color.primary');
+      background-color: theme.token-as-var('ref.color.common.color-theme-accent');
       width: 5px;
       height: 5px;
     }
diff --git a/packages/ui/src/components/Notifications/SNotificationBody.vue b/packages/ui/src/components/Notifications/SNotificationBody.vue
index 3aca544f9..7cf3103b4 100644
--- a/packages/ui/src/components/Notifications/SNotificationBody.vue
+++ b/packages/ui/src/components/Notifications/SNotificationBody.vue
@@ -88,7 +88,7 @@ function onTimeout() {
   @apply relative overflow-hidden;
 
   background: theme.token-as-var('sys.color.content-primary');
-  color: theme.token-as-var('sys.color.content-on-background-inverted');
+  color: theme.token-as-var('ref.color.common.color-base-on-accent');
   box-shadow: theme.token-as-var('sys.shadow.floating-notification');
 
   @mixin apply-icon-color($status) {
diff --git a/packages/ui/src/components/ProgressBar/SProgressBar.vue b/packages/ui/src/components/ProgressBar/SProgressBar.vue
index 1258d2f0f..78ac15a91 100644
--- a/packages/ui/src/components/ProgressBar/SProgressBar.vue
+++ b/packages/ui/src/components/ProgressBar/SProgressBar.vue
@@ -30,7 +30,7 @@ const progressBarHeight = computed(() => {
 </template>
 
 <style lang="scss">
-@use '@/theme';
+@use '@/theme' as theme;
 $active-bar-width: v-bind(activeBarWidth);
 $progress-bar-height: v-bind(progressBarHeight);
 $progress-bar-border-radius: v-bind(borderRadius);
@@ -38,13 +38,13 @@ $progress-bar-border-radius: v-bind(borderRadius);
 .s-progress-bar {
   height: $progress-bar-height;
   width: 100%;
-  background: theme.token-as-var('sys.color.border-secondary');
+  background: theme.token-as-var('ref.color.common.color-base-content-secondary');
   border-radius: $progress-bar-border-radius;
 
   &__active-bar {
     height: 100%;
     border-radius: $progress-bar-border-radius;
-    background: linear-gradient(90deg, theme.token-as-var('sys.color.primary') $active-bar-width, transparent 0%);
+    background: linear-gradient(90deg, theme.token-as-var('ref.color.common.color-theme-accent') $active-bar-width, transparent 0%);
   }
 }
 </style>
diff --git a/packages/ui/src/components/Radio/SRadioAtom.scss b/packages/ui/src/components/Radio/SRadioAtom.scss
index 9d72a6209..724554a11 100644
--- a/packages/ui/src/components/Radio/SRadioAtom.scss
+++ b/packages/ui/src/components/Radio/SRadioAtom.scss
@@ -19,8 +19,8 @@ $dot-border: (
   xl: 2px,
 );
 
-$color-primary: theme.token-as-var('sys.color.primary');
-$color-border-primary: theme.token-as-var('sys.color.border-primary');
+$color-primary: theme.token-as-var('ref.color.common.color-theme-accent');
+$color-border-primary: theme.token-as-var('ref.color.common.color-utility-surface');
 
 $transition-dur-easing: 0.2s ease;
 
@@ -48,7 +48,7 @@ $transition-dur-easing: 0.2s ease;
     background: $color-primary;
     border: {
       style: solid;
-      color: theme.token-as-var('sys.color.util.body');
+      color: theme.token-as-var('ref.color.common.color-base-on-accent');
     }
     width: 100%;
     height: 100%;
diff --git a/packages/ui/src/components/Radio/SRadioBody.scss b/packages/ui/src/components/Radio/SRadioBody.scss
index e0e6225f0..60c871b8f 100644
--- a/packages/ui/src/components/Radio/SRadioBody.scss
+++ b/packages/ui/src/components/Radio/SRadioBody.scss
@@ -1,8 +1,8 @@
 @use '@/theme';
 
-$primary: theme.token-as-var('sys.color.primary');
+$primary: theme.token-as-var('ref.color.common.color-theme-accent');
 $on-disabled: theme.token-as-var('sys.color.on-disabled');
-$border-primary: theme.token-as-var('sys.color.border-primary');
+$border-primary: theme.token-as-var('ref.color.common.color-utility-surface');
 
 $dur-easing: 0.2s ease;
 
diff --git a/packages/ui/src/components/Select/SSelectButton.vue b/packages/ui/src/components/Select/SSelectButton.vue
index 35754b826..fc6c20aba 100644
--- a/packages/ui/src/components/Select/SSelectButton.vue
+++ b/packages/ui/src/components/Select/SSelectButton.vue
@@ -91,12 +91,12 @@ const slots = useSlots()
   @apply select-none inline-flex items-center space-x-2 cursor-pointer;
 
   &_default {
-    background: theme.token-as-var('sys.color.background');
+    background: theme.token-as-var('ref.color.common.color-base-content-tertiary');
     color: theme.token-as-var('sys.color.content-primary');
     @apply rounded px-4;
 
     &:hover {
-      background: theme.token-as-var('sys.color.background-hover');
+      background: theme.token-as-var('ref.color.common.color-base-content-secondary');
     }
   }
 
diff --git a/packages/ui/src/components/Select/SSelectChip.vue b/packages/ui/src/components/Select/SSelectChip.vue
index 9db9f742f..6520174d4 100644
--- a/packages/ui/src/components/Select/SSelectChip.vue
+++ b/packages/ui/src/components/Select/SSelectChip.vue
@@ -36,6 +36,6 @@ const emit = defineEmits<(event: 'click:delete') => void>()
 @use '@/theme';
 
 .s-select-chip {
-  background: theme.token-as-var('sys.color.background');
+  background: theme.token-as-var('ref.color.common.color-base-on-accent');
 }
 </style>
diff --git a/packages/ui/src/components/Select/SSelectDropdown.vue b/packages/ui/src/components/Select/SSelectDropdown.vue
index 2043a4607..b520d9ed4 100644
--- a/packages/ui/src/components/Select/SSelectDropdown.vue
+++ b/packages/ui/src/components/Select/SSelectDropdown.vue
@@ -193,13 +193,13 @@ const dropdownHeight = computed(() => {
 
 .s-select-dropdown {
   @apply rounded overflow-hidden;
+  background: theme.token-as-var('ref.color.common.color-base-on-accent');
   overflow-y: auto;
-  background: theme.token-as-var('sys.color.util.surface');
   box-shadow: theme.token-as-var('sys.shadow.dropdown');
 
   &__header {
     color: theme.token-as-var('sys.color.content-tertiary');
-    border-bottom: 1px solid theme.token-as-var('sys.color.border-primary');
+    border-bottom: 1px solid theme.token-as-var('ref.color.common.color-utility-surface');
   }
 
   &__action {
@@ -207,8 +207,8 @@ const dropdownHeight = computed(() => {
   }
 
   &__search {
-    border-bottom: 1px solid theme.token-as-var('sys.color.border-primary');
-    background: theme.token-as-var('sys.color.background');
+    border-bottom: 1px solid theme.token-as-var('ref.color.common.color-utility-surface');
+    background: theme.token-as-var('ref.color.common.color-base-on-accent');
 
     &:focus-within {
       background: transparent;
diff --git a/packages/ui/src/components/Select/SSelectInput.vue b/packages/ui/src/components/Select/SSelectInput.vue
index d8c60f410..5d7ee3820 100644
--- a/packages/ui/src/components/Select/SSelectInput.vue
+++ b/packages/ui/src/components/Select/SSelectInput.vue
@@ -259,7 +259,7 @@ function handleChevronClick(event: MouseEvent) {
   @apply rounded flex items-center px-4;
   @apply select-none cursor-pointer;
 
-  background: theme.token-as-var('sys.color.background');
+  background: theme.token-as-var('ref.color.common.color-base-content-tertiary');
   color: theme.token-as-var('sys.color.content-primary');
   border: 1px solid transparent;
 
@@ -268,12 +268,12 @@ function handleChevronClick(event: MouseEvent) {
   }
 
   &:hover {
-    background: theme.token-as-var('sys.color.background-hover');
+    background: theme.token-as-var('ref.color.common.color-base-content-secondary');
   }
 
   &:focus-within {
     background: transparent;
-    border: 1px solid theme.token-as-var('sys.color.border-primary');
+    border: 1px solid theme.token-as-var('ref.color.common.color-utility-surface');
   }
 
   &__label,
diff --git a/packages/ui/src/components/Select/SSelectOption.vue b/packages/ui/src/components/Select/SSelectOption.vue
index 9d87dced1..af462b724 100644
--- a/packages/ui/src/components/Select/SSelectOption.vue
+++ b/packages/ui/src/components/Select/SSelectOption.vue
@@ -79,13 +79,13 @@ const CHECK_ICON_SIZE = {
 @use '@/theme';
 
 .s-select-option {
-  background: theme.token-as-var('sys.color.util.surface');
+  background: theme.token-as-var('ref.color.common.color-base-on-accent');
   @apply flex items-center px-[10px] py-1 select-none cursor-pointer space-x-8px;
 
   &:hover,
   &:active,
   &_selected {
-    background: theme.token-as-var('sys.color.background');
+    background: theme.token-as-var('ref.color.common.color-base-on-accent');
   }
 
   &__content {
diff --git a/packages/ui/src/components/Switch/SSwitch.vue b/packages/ui/src/components/Switch/SSwitch.vue
index d38de32df..90c7b3e30 100644
--- a/packages/ui/src/components/Switch/SSwitch.vue
+++ b/packages/ui/src/components/Switch/SSwitch.vue
@@ -51,12 +51,12 @@ const model = useVModel(props, 'modelValue', emit)
 <style lang="scss" scoped>
 @use '@/theme';
 
-$border-primary: theme.token-as-var('sys.color.border-primary');
+$border-primary: theme.token-as-var('ref.color.common.color-utility-surface');
 $content-primary: theme.token-as-var('sys.color.content-primary');
 $content-quaternary: theme.token-as-var('sys.color.content-quaternary');
-$primary: theme.token-as-var('sys.color.primary');
+$primary: theme.token-as-var('ref.color.common.color-theme-accent');
 $primary-hover: theme.token-as-var('sys.color.primary-hover');
-$util-surface: theme.token-as-var('sys.color.util.surface');
+$util-surface: theme.token-as-var('ref.color.common.color-base-on-accent');
 
 .s-switch {
   display: flex;
diff --git a/packages/ui/src/components/Table/STable.vue b/packages/ui/src/components/Table/STable.vue
index e49a20de7..0428ef41a 100644
--- a/packages/ui/src/components/Table/STable.vue
+++ b/packages/ui/src/components/Table/STable.vue
@@ -825,8 +825,8 @@ $col-number: v-bind(cardsGridColumnNumber);
   }
 
   &__card {
-    border-right: 1px solid theme.token-as-var('sys.color.border-secondary');
-    border-top: 1px solid theme.token-as-var('sys.color.border-secondary');
+    border-right: 1px solid theme.token-as-var('ref.color.common.color-base-content-secondary');
+    border-top: 1px solid theme.token-as-var('ref.color.common.color-base-content-secondary');
 
     &_last-column {
       border-right: none;
@@ -853,13 +853,13 @@ $col-number: v-bind(cardsGridColumnNumber);
 
   &__tr:hover > &__td,
   &__tr_current > &__td {
-    background-color: theme.token-as-var('sys.color.background');
+    background-color: theme.token-as-var('ref.color.common.color-base-on-accent');
   }
 
   &__td,
   &__th {
     height: 48px;
-    border-bottom: 1px solid theme.token-as-var('sys.color.border-secondary');
+    border-bottom: 1px solid theme.token-as-var('ref.color.common.color-base-content-secondary');
     transition: background-color 0.25s ease;
     min-width: 0;
     box-sizing: border-box;
@@ -890,8 +890,8 @@ $col-number: v-bind(cardsGridColumnNumber);
   }
 
   &__expanded-cell {
-    background-color: theme.token-as-var('sys.color.background');
-    border-bottom: 1px solid theme.token-as-var('sys.color.border-secondary');
+    background-color: theme.token-as-var('ref.color.common.color-base-on-accent');
+    border-bottom: 1px solid theme.token-as-var('ref.color.common.color-base-content-secondary');
     min-height: 40px;
   }
 
@@ -901,7 +901,7 @@ $col-number: v-bind(cardsGridColumnNumber);
 
     &_active {
       visibility: visible;
-      fill: theme.token-as-var('sys.color.primary');
+      fill: theme.token-as-var('ref.color.common.color-theme-accent');
     }
 
     &_asc {
diff --git a/packages/ui/src/components/Table/STableCard.vue b/packages/ui/src/components/Table/STableCard.vue
index dc0e89803..9abebb397 100644
--- a/packages/ui/src/components/Table/STableCard.vue
+++ b/packages/ui/src/components/Table/STableCard.vue
@@ -162,7 +162,7 @@ function select() {
 
 .s-table-card {
   &_selected {
-    background: theme.token-as-var('sys.color.background');
+    background: theme.token-as-var('ref.color.common.color-base-on-accent');
   }
 
   &__label {
@@ -179,7 +179,7 @@ function select() {
   }
 
   &__expanded-block {
-    background-color: theme.token-as-var('sys.color.background');
+    background-color: theme.token-as-var('ref.color.common.color-base-on-accent');
   }
 }
 </style>
diff --git a/packages/ui/src/components/Table/STableCellDetails.vue b/packages/ui/src/components/Table/STableCellDetails.vue
index a4611bd0b..e085ec630 100644
--- a/packages/ui/src/components/Table/STableCellDetails.vue
+++ b/packages/ui/src/components/Table/STableCellDetails.vue
@@ -13,7 +13,7 @@ import { IconArrowsChevronRightXs24 } from '@/components/icons'
 
 .s-table-cell-details {
   &:hover {
-    background: theme.token-as-var('sys.color.background-hover');
+    background: theme.token-as-var('ref.color.common.color-base-content-secondary');
   }
 
   &__icon {
diff --git a/packages/ui/src/components/Tabs/STab.vue b/packages/ui/src/components/Tabs/STab.vue
index 77cd1cb2a..747c6aec1 100644
--- a/packages/ui/src/components/Tabs/STab.vue
+++ b/packages/ui/src/components/Tabs/STab.vue
@@ -98,12 +98,12 @@ $font-color-disabled: theme.token-as-var('sys.color.content-quaternary');
   }
 
   &_background_primary {
-    $font-color-active: theme.token-as-var('sys.color.util.body');
+    $font-color-active: theme.token-as-var('ref.color.common.color-base-on-accent');
 
-    $background-color: theme.token-as-var('sys.color.util.body');
-    $background-color-active: theme.token-as-var('sys.color.primary');
+    $background-color: theme.token-as-var('ref.color.common.color-base-on-accent');
+    $background-color-active: theme.token-as-var('ref.color.common.color-theme-accent');
 
-    $border: 1px solid theme.token-as-var('sys.color.border-primary');
+    $border: 1px solid theme.token-as-var('ref.color.common.color-utility-surface');
     $border-active: 1px solid $background-color-active;
 
     background: $background-color;
@@ -118,7 +118,7 @@ $font-color-disabled: theme.token-as-var('sys.color.content-quaternary');
 
   &_background_secondary {
     $font-color-active: theme.token-as-var('sys.color.content-primary');
-    $background-color: theme.token-as-var('sys.color.background');
+    $background-color: theme.token-as-var('ref.color.common.color-base-content-tertiary');
     $tab-shadow-active: theme.token-as-var('sys.shadow.active-tab');
 
     background: $background-color;
@@ -135,13 +135,13 @@ $font-color-disabled: theme.token-as-var('sys.color.content-quaternary');
   }
 
   &_background_none {
-    $font-color-active: theme.token-as-var('sys.color.primary');
+    $font-color-active: theme.token-as-var('ref.color.common.color-theme-accent');
 
     $background-color: none;
     $background-color-active: none;
 
-    $border: 2px solid theme.token-as-var('sys.color.border-primary');
-    $border-active: 2px solid theme.token-as-var('sys.color.primary');
+    $border: 2px solid theme.token-as-var('ref.color.common.color-utility-surface');
+    $border-active: 2px solid theme.token-as-var('ref.color.common.color-theme-accent');
 
     background: $background-color;
     border-bottom: $border;
diff --git a/packages/ui/src/components/TextField/STextField.vue b/packages/ui/src/components/TextField/STextField.vue
index 10f6c1160..484587c14 100644
--- a/packages/ui/src/components/TextField/STextField.vue
+++ b/packages/ui/src/components/TextField/STextField.vue
@@ -153,9 +153,8 @@ function onInput(e: Event) {
 
 const isValueEmpty = computed(() => !model.value)
 const isFocused = ref(false)
-const labelTypographyClass = computed(() =>
-  !(props.filledState || isFocused.value) && isValueEmpty.value ? 'sora-tpg-p3' : 'sora-tpg-p4',
-)
+const labelTypographyClass = computed(() => 'sora-tpg-p3');
+
 
 const inputRef = ref<MaybeElementRef>(null)
 
@@ -284,6 +283,7 @@ const shouldShowValidationsList = computed(
       @mousedown="handleInputWrapperMouseDown"
     >
       <label
+        v-if="isValueEmpty"
         :for="id"
         :class="labelTypographyClass"
       >
@@ -382,55 +382,88 @@ const shouldShowValidationsList = computed(
 </template>
 
 <style lang="scss">
-@use '@/theme';
+@use 'sass:meta';
+@use '@/theme_neumorphism' as theme_neumorphism;
+@use '@/theme' as theme;
+@import '../../themes.scss';
+
 
 $height: 56px;
-$input-padding: 24px 16px 6px 16px;
+$input-padding: 15px;
 $label-top-primary: 16px;
 $label-top-secondary: 6px;
 $message-icon-alignment-fix: -1px;
 
-$theme-bg: theme.token-as-var('sys.color.background');
-$theme-bg-hover: theme.token-as-var('sys.color.background-hover');
-$theme-border-primary: theme.token-as-var('sys.color.border-primary');
-$theme-content-tertiary: theme.token-as-var('sys.color.content-tertiary');
+@mixin apply-theme-text-field($theme) {
+  &__input-wrapper {
+    background-color: theme-token($theme,'sys.color.textfield.background-color');
+    box-shadow: theme-token($theme,'ref.color.shadow.shadow-element');
+    &:hover:not(:focus-within) {
+      background-color: theme-token($theme,'sys.color.textfield.background-color-hover');
+    }
+    &:focus-within {
+      border-color: theme-token($theme,'sys.color.textfield.border-color');
+      background-color: theme-token($theme,'sys.color.textfield.background-color');
+      outline: 1px solid theme-token($theme,'sys.color.textfield.outline-color');
+    }
+    label {
+      color: theme-token($theme,'sys.color.textfield.label-color');
+    }
+  }
+  &__counter {
+    color: theme-token($theme,'sys.color.textfield.counter-color');
+  }
+  &__eye,
+  &__append svg {
+    color: theme-token($theme,'sys.color.content-secondary');
+    fill: theme-token($theme,'sys.color.content-secondary');
+  }
+
+}
+
+@mixin apply-theme($theme-name, $theme-variable) {
+  .s-text-field {
+    @include apply-theme-text-field($theme: $theme-variable);
+  }
+}
+
+@each $theme-name, $theme-variable in $themes {
+  [theme="#{$theme-name}"] {
+    @include apply-theme($theme-name, $theme-variable);
+  }
+}
 
 .s-text-field {
   $root: &;
 
   &_disabled &__input-wrapper {
     @apply pointer-events-none opacity-75;
-    // todo
   }
 
+  &_disabled:hover {
+    cursor: not-allowed;
+  }
   &:not(&_empty),
   &_filled-state,
   &:focus-within {
     label {
-      transform: translateY(#{$label-top-secondary});
-      // @apply s-ty-p4;
+      transform: translateY(#{$label-top-primary});
     }
   }
 
   &__input-wrapper {
-    background: $theme-bg;
     @apply rounded border border-transparent;
     @apply relative flex;
     @apply transition-all;
 
     min-height: $height;
 
-    &:hover:not(:focus-within) {
-      background: $theme-bg-hover;
-    }
-
     &:focus-within {
-      border-color: $theme-border-primary;
       @apply bg-transparent;
     }
 
     label {
-      color: $theme-content-tertiary;
+
       @apply pointer-events-none;
       @apply absolute top-0 left-4;
       @apply transition-all;
@@ -458,10 +491,6 @@ $theme-content-tertiary: theme.token-as-var('sys.color.content-tertiary');
     @apply flex items-center space-x-4 pr-4;
   }
 
-  &__counter {
-    color: $theme-content-tertiary;
-  }
-
   @each $status in 'success', 'warning', 'error' {
     $col: theme.token-as-var('sys.color.status.#{$status}');
     $bg: theme.token-as-var('sys.color.status.#{$status}-background');
@@ -525,6 +554,7 @@ $theme-content-tertiary: theme.token-as-var('sys.color.content-tertiary');
   &__eye {
     cursor: pointer;
     position: relative;
+    
 
     // icon size
     // approximately, not strict by design system
diff --git a/packages/ui/src/components/Tooltip/STooltip.vue b/packages/ui/src/components/Tooltip/STooltip.vue
index 10f5a2ba3..9e6b4dacb 100644
--- a/packages/ui/src/components/Tooltip/STooltip.vue
+++ b/packages/ui/src/components/Tooltip/STooltip.vue
@@ -105,29 +105,31 @@ function handleSecondaryButtonClick() {
 
 <style lang="scss">
 @use '@/theme';
+@use '@/theme_neumorphism';
+
 
 .s-tooltip {
   &__body {
     background: theme.token-as-var('sys.color.content-primary');
-    color: theme.token-as-var('sys.color.content-on-background-inverted');
+    color: theme.token-as-var('ref.color.common.color-base-on-accent');
     border-radius: 4px;
   }
 
   &__button.s-button {
     &_type_outline {
-      border-color: theme.token-as-var('sys.color.border-primary');
-      color: theme.token-as-var('sys.color.content-on-background-inverted');
+      border-color: theme.token-as-var('ref.color.common.color-utility-surface');
+      color: theme.token-as-var('ref.color.common.color-base-on-accent');
 
       &:hover,
       &:active {
-        border-color: theme.token-as-var('sys.color.util.surface');
-        background: theme.token-as-var('sys.color.util.surface');
+        border-color: theme.token-as-var('ref.color.common.color-base-on-accent');
+        background: theme.token-as-var('ref.color.common.color-base-on-accent');
         color: theme.token-as-var('sys.color.content-primary');
       }
     }
 
     &_type_outline#{&}_disabled {
-      border-color: theme.token-as-var('sys.color.disabled');
+      border-color: theme.token-as-var('ref.color.common.color-base-on-accent');
       color: theme.token-as-var('sys.color.on-disabled');
     }
   }
diff --git a/packages/ui/src/components/icons/index.ts b/packages/ui/src/components/icons/index.ts
index a8e76aa66..1ef090c73 100644
--- a/packages/ui/src/components/icons/index.ts
+++ b/packages/ui/src/components/icons/index.ts
@@ -43,6 +43,9 @@ import IconChevronBottom16 from '@soramitsu-ui/icons/icomoon/chevron-bottom-16.s
 import IconBasicExternalLink24 from '@soramitsu-ui/icons/icomoon/basic-external-link-24.svg'
 
 import IconBasicSearch24 from '@soramitsu-ui/icons/icomoon/basic-search-24.svg'
+import IconBasicCirclePlus24 from '@soramitsu-ui/icons/icomoon/basic-circle-plus-24.svg'
+import IconBasicCircleX24 from '@soramitsu-ui/icons/icomoon/basic-circle-x-24.svg'
+import IconBasicEye24 from '@soramitsu-ui/icons/icomoon/basic-eye-24.svg'
 import IconQuestion from '@soramitsu-ui/icons/icomoon/notifications-question-circle-24.svg'
 import IconCopy from '@soramitsu-ui/icons/icomoon/basic-copy-24.svg'
 
@@ -71,6 +74,9 @@ export {
   IconChevronsRight16,
   IconChevronsLeft16,
   IconBasicSearch24,
+  IconBasicCirclePlus24,
+  IconBasicCircleX24,
+  IconBasicEye24,
   IconQuestion,
   IconCopy,
 }
diff --git a/packages/ui/src/theme/_index.scss b/packages/ui/src/theme/_index.scss
index d3dbfd389..62cbb4a61 100644
--- a/packages/ui/src/theme/_index.scss
+++ b/packages/ui/src/theme/_index.scss
@@ -1 +1 @@
-@forward '@soramitsu-ui/theme/sass';
+@forward '@soramitsu-ui/theme/sass';
\ No newline at end of file
diff --git a/packages/ui/src/theme_neumorphism/_index.scss b/packages/ui/src/theme_neumorphism/_index.scss
new file mode 100644
index 000000000..7d9c634d9
--- /dev/null
+++ b/packages/ui/src/theme_neumorphism/_index.scss
@@ -0,0 +1 @@
+@forward '@soramitsu-ui/theme_neumorphism/sass';
\ No newline at end of file
diff --git a/packages/ui/src/themes.scss b/packages/ui/src/themes.scss
new file mode 100644
index 000000000..2c648d3c8
--- /dev/null
+++ b/packages/ui/src/themes.scss
@@ -0,0 +1,19 @@
+$themes: (
+	'': 'theme',
+	'neumorphism': 'theme_neumorphism',
+);
+
+@function theme-token($theme, $token) {
+	@if $theme =='theme_neumorphism' {
+		@return theme_neumorphism.token-as-var($token);
+	}
+
+	@else if $theme =='theme' {
+		@return theme.token-as-var($token);
+	}
+
+	@else {
+		@error "Unknown theme: #{$theme}";
+	}
+}
+
diff --git a/packages/ui/stories/components/Button.stories.ts b/packages/ui/stories/components/Button.stories.ts
index 17e461154..bbacba987 100644
--- a/packages/ui/stories/components/Button.stories.ts
+++ b/packages/ui/stories/components/Button.stories.ts
@@ -1,27 +1,83 @@
 import { SButton, BUTTON_TYPE_VALUES, BUTTON_SIZE_VALUES, BUTTON_ICON_POSITION_VALUES } from '@/lib'
-import { IconClose } from '@/components/icons'
+import { IconClose,IconBasicCirclePlus24, IconBasicCircleX24, IconBasicEye24, } from '@/components/icons'
 import type { Meta } from '@storybook/vue3'
 
 export default {
   component: defineComponent({
-    components: { SButton, IconClose },
+    components: { SButton, IconClose,IconBasicCirclePlus24,IconBasicCircleX24, IconBasicEye24 },
     template: `
       <div class="flex flex-col items-start space-y-4">
-        <SButton v-bind="$attrs">
-          <template #icon>
-            <IconClose style="width: 1em; height: 1em;"/>
-          </template>
-          {{ $attrs.type }}
-        </SButton>
         <SButton v-bind="$attrs">
           <template #icon>
             <IconClose
-              v-if="$attrs.type === 'action'"
-              style="width: 1em; height: 1em;"
             />
           </template>
           {{ $attrs.type }}
         </SButton>
+        <SButton v-bind="$attrs" type="primary" :alternative="true">
+          Primary Alternative
+        </SButton>
+        <SButton v-bind="$attrs" type="secondary">
+          Secondary
+        </SButton>
+         <SButton v-bind="$attrs" type="tertiary">
+          Tertiary
+        </SButton>
+        <s-col >
+          <s-button-group size="big" border-radius="big" style="margin-right: 24px;">
+            <SButton v-bind="$attrs" type="action">
+              <template #icon>
+                <IconBasicCirclePlus24 style="width: 1em; height: 1em;"/>
+              </template>
+            </SButton>
+            <SButton v-bind="$attrs" type="action">
+              <template #icon>
+                <IconBasicCircleX24 style="width: 1em; height: 1em;" />
+              </template>
+            </SButton>
+            <SButton v-bind="$attrs" type="action">
+              <template #icon>
+                <IconBasicEye24 style="width: 1em; height: 1em;" />
+              </template>
+            </SButton>
+
+          </s-button-group>
+          <s-button-group size="big" border-radius="big" style="margin-right: 24px;">
+            <SButton v-bind="$attrs" type="action" :alternative="true">
+              <template #icon>
+                <IconBasicCirclePlus24 style="width: 1em; height: 1em;"/>
+              </template>
+            </SButton>
+            <SButton v-bind="$attrs" type="action" :alternative="true">
+              <template #icon>
+                <IconBasicCircleX24 style="width: 1em; height: 1em;" />
+              </template>
+            </SButton>
+            <SButton v-bind="$attrs" type="action" :alternative="true">
+              <template #icon>
+                <IconBasicEye24 style="width: 1em; height: 1em;" />
+              </template>
+            </SButton>
+          </s-button-group>
+          
+          <s-button-group size="big" border-radius="big" style="margin-right: 24px; gap: 10px">
+            <SButton v-bind="$attrs" type="action" :primary="true">
+              <template #icon>
+                <IconBasicCirclePlus24 style="width: 1em; height: 1em;"/>
+              </template>
+            </SButton>
+            <SButton v-bind="$attrs" type="action" :primary="true" style="margin-right: 4px; margin-left: 4px">
+              <template #icon>
+                <IconBasicCircleX24 style="width: 1em; height: 1em;" />
+              </template>
+            </SButton>
+            <SButton v-bind="$attrs" type="action" :primary="true">
+              <template #icon>
+                <IconBasicEye24 style="width: 1em; height: 1em;" />
+              </template>
+            </SButton>
+          </s-button-group>
+        </s-col>
       </div>
     `,
   }),
@@ -34,6 +90,8 @@ export default {
     rounded: false,
     loading: false,
     uppercase: false,
+    alternative: false,
+    primary: false,
   },
   argTypes: {
     type: {
@@ -53,6 +111,7 @@ export default {
     rounded: { control: 'boolean' },
     loading: { control: 'boolean' },
     uppercase: { control: 'boolean' },
+    alternative: { control: 'boolean' },
   },
 } as Meta
 
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index 08f1795cb..b0ac82015 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -103,6 +103,7 @@ export default defineConfig({
         '@popperjs/core',
         /^@vueuse/,
         '@soramitsu-ui/theme',
+        '@soramitsu-ui/theme_neumorphism',
         'body-scroll-lock',
         'focus-trap',
       ],