diff --git a/packages/ theme_neumorphism/src/sass/__tests__/sass-interface.spec.ts b/packages/ theme_neumorphism/src/sass/__tests__/sass-interface.spec.ts
index 8a9786ec8..616f0eed6 100644
--- a/packages/ theme_neumorphism/src/sass/__tests__/sass-interface.spec.ts	
+++ b/packages/ theme_neumorphism/src/sass/__tests__/sass-interface.spec.ts	
@@ -34,7 +34,7 @@ describe('Exports', () => {
         `
         @use 'v_lib' as l
         body
-          color: #{l.token-as-var('ref.color.button.color-theme-accent')}
+          color: #{l.token-as-var('ref.color.common.color-theme-accent')}
       `,
         'indented',
       ),
@@ -336,12 +336,12 @@ describe('Utils', () => {
         @use 'v_util' as util;
 
         $src: (
-          'ref.color.button.color-theme-accent': '--scp',
+          'ref.color.common.color-theme-accent': '--scp',
           'sys.color.secondary': '--scs',
         );
 
         $values: (
-          'ref.color.button.color-theme-accent': red,
+          'ref.color.common.color-theme-accent': red,
           'sys.color.secondary': blue
         );
         
@@ -363,12 +363,12 @@ describe('Utils', () => {
         @use 'v_util' as util;
 
         $src: (
-          'ref.color.button.color-theme-accent': '--scp',
+          'ref.color.common.color-theme-accent': '--scp',
           'sys.color.secondary': '--scs',
         );
 
         $values: (
-          'ref.color.button.color-theme-accent': 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: (
-          'ref.color.button.color-theme-accent': '--scp',
+          'ref.color.common.color-theme-accent': '--scp',
           'sys.color.secondary': '--scs',
         );
 
@@ -411,7 +411,7 @@ describe('Utils', () => {
         @use 'v_util' as util;
 
         $src: (
-          'ref.color.button.color-theme-accent': '--scp',
+          'ref.color.common.color-theme-accent': '--scp',
           'sys.color.secondary': '--scs',
         );
 
diff --git a/packages/ theme_neumorphism/src/sass/lib.scss b/packages/ theme_neumorphism/src/sass/lib.scss
index b721af1cd..c9b278a7d 100644
--- a/packages/ theme_neumorphism/src/sass/lib.scss	
+++ b/packages/ theme_neumorphism/src/sass/lib.scss	
@@ -34,7 +34,7 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
     (
       ref: (
         'color': (
-          'button': (
+          'common': (
             'color-utility-surface': #FDF7FB,
             'color-base-on-accent': #FFFFFF,
             'color-base-content-tertiary': #D5CDD0,
@@ -64,15 +64,11 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
       ),
       sys: (
         'color': (
-          'background': '',
           'content-tertiary': '',
           'content-secondary': '',
           'content-primary': '',
           'content-quaternary': '',
           'on-disabled': '',
-          'primary': '',
-          'content-on-background-inverted': '',
-          'background-hover': '',
           'primary-pressed': '',
           'primary-hover': '',
           'button': (
@@ -85,24 +81,24 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
               'border-color': #EDE4E7,
             ),
             'secondary': (
-              'text-color': token-as-var('ref.color.button.color-base-on-accent'),
-              'text-color-active': token-as-var('ref.color.button.color-base-on-accent'),
+              '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.button.border-color'),
-              'border-color-active': token-as-var('ref.color.button.border-color'),
+              '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.button.color-base-content-tertiary'),
-              'text-color-active': token-as-var('ref.color.button.color-base-content-secondary'),
+              '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.button.color-utility-body'),
+              '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.button.color-base-content-tertiary'),
-              'text-color-hover': token-as-var('ref.color.button.color-base-content-secondary'),
-              'text-color-active': token-as-var('ref.color.button.color-theme-accent'),
+              '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'),
             )
           ),
           'util': (
@@ -125,10 +121,6 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
             'debug-background': '',
             'debug-background-hover': '',
           ),
-          'border': (
-            'primary': '',
-            'secondary': ''
-          )
         ),
         'border': (
           'button': (
@@ -137,8 +129,8 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
         ),
         'disabled': (
           'button': (
-            'background-color': token-as-var('ref.color.button.color-utility-surface'),
-            'border-color': token-as-var('ref.color.button.color-utility-body'),
+            'background-color': token-as-var('ref.color.common.color-utility-surface'),
+            'border-color': token-as-var('ref.color.common.color-utility-body'),
           ),
         ),
         'transition': (
diff --git a/packages/theme/README.md b/packages/theme/README.md
index 974b9d977..583c5b791 100644
--- a/packages/theme/README.md
+++ b/packages/theme/README.md
@@ -86,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 8a9786ec8..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('ref.color.button.color-theme-accent')}
+          color: #{l.token-as-var('ref.color.common.color-theme-accent')}
       `,
         'indented',
       ),
@@ -336,12 +336,12 @@ describe('Utils', () => {
         @use 'v_util' as util;
 
         $src: (
-          'ref.color.button.color-theme-accent': '--scp',
+          'ref.color.common.color-theme-accent': '--scp',
           'sys.color.secondary': '--scs',
         );
 
         $values: (
-          'ref.color.button.color-theme-accent': red,
+          'ref.color.common.color-theme-accent': red,
           'sys.color.secondary': blue
         );
         
@@ -363,12 +363,12 @@ describe('Utils', () => {
         @use 'v_util' as util;
 
         $src: (
-          'ref.color.button.color-theme-accent': '--scp',
+          'ref.color.common.color-theme-accent': '--scp',
           'sys.color.secondary': '--scs',
         );
 
         $values: (
-          'ref.color.button.color-theme-accent': 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: (
-          'ref.color.button.color-theme-accent': '--scp',
+          'ref.color.common.color-theme-accent': '--scp',
           'sys.color.secondary': '--scs',
         );
 
@@ -411,7 +411,7 @@ describe('Utils', () => {
         @use 'v_util' as util;
 
         $src: (
-          'ref.color.button.color-theme-accent': '--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 a5ee3da79..e16fdd0ae 100644
--- a/packages/theme/src/sass/lib.scss
+++ b/packages/theme/src/sass/lib.scss
@@ -34,7 +34,7 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
     (
       ref: (
         'color': (
-          'button': (
+          'common': (
             'color-utility-surface': #dde0e1,
             'color-base-on-accent': #ffffff,
             'color-base-content-tertiary': #f5f7f8,
@@ -58,15 +58,11 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
       ),
       sys: (
         'color': (
-          'background': #f5f7f8,
           'content-tertiary': #75787b,
           'content-secondary': #53565a,
           'content-primary': #2d2926,
           'content-quaternary': #a3a4a8,
           'on-disabled': #a3a4a8,
-          'primary': #d0021b,
-          'content-on-background-inverted': #ffffff,
-          'background-hover': #eceff0,
           'primary-pressed': #bb0218,
           'primary-hover': #c6021a,
           'button': (
@@ -90,7 +86,7 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
             'action': (
               'background-color': #f5f7f8,
               'background-color-hover': #eceff0,
-              'background-color-pressed': token-as-var('ref.color.button.color-utility-surface'), 
+              'background-color-pressed': token-as-var('ref.color.common.color-utility-surface'), 
               
               'text-color': #2d2926,
               'text-color-hover': '',
@@ -117,10 +113,6 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
             'debug-background': #ffeef4,
             'debug-background-hover': #f3d3de,
           ),
-          'border': (
-            'primary': #dde0e1,
-            'secondary': #eceff0,
-          )
         ),
         'border': (
           'button': (
diff --git a/packages/theme/src/sass/tokens.scss b/packages/theme/src/sass/tokens.scss
index b0e83a29f..07d97ab1a 100644
--- a/packages/theme/src/sass/tokens.scss
+++ b/packages/theme/src/sass/tokens.scss
@@ -1,7 +1,7 @@
 $tokens: (
   'ref': (
     'color': (
-      'button': (
+      'common': (
         'color-utility-surface': null,
         'color-base-on-accent': null,
         'color-base-content-tertiary': null,
@@ -25,15 +25,11 @@ $tokens: (
   ),
   'sys': (
     'color': (
-      'background': null,
       'content-tertiary': null,
       'content-secondary': null,
       'content-primary': null,
       'content-quaternary': null,
       'on-disabled': null,
-      'primary': null,
-      'content-on-background-inverted': null,
-      'background-hover': null,
       'primary-pressed': null,
       'primary-hover': null,
       'button': (
@@ -83,10 +79,6 @@ $tokens: (
         'debug-background': null,
         'debug-background-hover': null,
       ),
-      'border': (
-        'primary': null,
-        'secondary': null,
-      )
     ),
     'border': (
       'button': (
diff --git a/packages/ui/src/components/Accordion/SAccordionItem.vue b/packages/ui/src/components/Accordion/SAccordionItem.vue
index 54e25df83..6f194a5da 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-on-accent');
     }
 
     #{$component}__body-wrapper {
diff --git a/packages/ui/src/components/Button/SButton.vue b/packages/ui/src/components/Button/SButton.vue
index e32152ca8..f23aa208f 100644
--- a/packages/ui/src/components/Button/SButton.vue
+++ b/packages/ui/src/components/Button/SButton.vue
@@ -172,7 +172,7 @@ const handleClick = (event: Event) => {
   $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.button.color-base-content-tertiary');
+    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;
@@ -191,15 +191,15 @@ const handleClick = (event: Event) => {
 
 // Primary
 @mixin apply-theme-primary($theme) {
-  background-color: theme-token($theme,'ref.color.button.color-theme-accent');
-  color: theme-token($theme,'ref.color.button.color-base-on-accent');
+  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.button.color-utility-surface');
+    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.button.color-base-on-accent');
+    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');
     }
@@ -207,9 +207,9 @@ const handleClick = (event: Event) => {
 
   &:active, &.s-pressed {
     background-color:  theme-token($theme,'sys.color.button.primary.background-color-pressed');
-    border-color:  theme-token($theme,'ref.color.button.color-utility-surface');
+    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.button.color-base-on-accent');
+    color:  theme-token($theme,'ref.color.common.color-base-on-accent');
   }
    @include disabled($theme: theme);
 }
@@ -228,7 +228,7 @@ const handleClick = (event: Event) => {
 
 // Secondary
 @mixin apply-theme-secondary($theme) {
-  background-color: theme-token($theme,'ref.color.button.color-base-content-tertiary');
+  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') 
@@ -237,7 +237,7 @@ const handleClick = (event: Event) => {
   box-shadow: theme-token($theme,'ref.color.shadow.shadow-element-pressed');
 
   &:hover, &:focus, &.focusing, &:active, &.s-pressed{
-    background: theme-token($theme,'ref.color.button.color-base-content-secondary');
+    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');
   }
@@ -249,17 +249,17 @@ const handleClick = (event: Event) => {
 
 // Terrtiary
 @mixin apply-theme-tertiary($theme) {
-  background-color: theme-token($theme,'ref.color.button.color-utility-body');
+  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.button.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 {
-    background: theme-token($theme,'ref.color.button.color-utility-body');
-    border-color: theme-token($theme,'ref.color.button.border-color');
+    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 {
@@ -274,7 +274,7 @@ const handleClick = (event: Event) => {
 //Action
 @mixin apply-theme-action($theme) {
   background: theme-token($theme,'sys.color.button.action.background-color'); 
-  border-color: theme-token($theme,'ref.color.button.border-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');
@@ -282,13 +282,13 @@ const handleClick = (event: Event) => {
 
   &:hover, &:focus, &.focusing {
     background: theme-token($theme,'sys.color.button.action.background-color-hover'); 
-    border-color: theme-token($theme,'ref.color.button.border-color');
+    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.button.border-color'); 
+    border-color: theme-token($theme,'ref.color.common.border-color'); 
     box-shadow: theme-token($theme,'ref.color.shadow.shadow-element-pressed');
   }
   &:active {
@@ -301,31 +301,31 @@ const handleClick = (event: Event) => {
     $box-shadow: theme_neumorphism.token-as-var('ref.color.shadow.shadow-element-pressed'),
   );
   &.primary:not(:disabled) {
-    color: theme-token($theme,'ref.color.button.color-base-on-accent')
+    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.button.color-base-content-tertiary');
+  color: theme-token($theme,'ref.color.common.color-base-content-tertiary');
   &, &:hover, &:focus, &.focusing, &:active, &.s-pressed {
-    background-color: theme-token($theme,'ref.color.button.border-color'); 
-    border-color: theme-token($theme,'ref.color.button.border-color'); 
+    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.button.color-base-content-secondary');
+    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.button.border-color'), 
+    $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.button.color-theme-accent');
-  color: theme-token($theme,'ref.color.button.color-base-on-accent');
+  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') 
@@ -334,16 +334,16 @@ const handleClick = (event: Event) => {
 
   &:hover {
     background-color: theme-token($theme,'sys.color.button.primary.background-color-hover');
-    border-color: theme-token($theme,'ref.color.button.color-utility-surface');
+    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.button.color-base-on-accent');
+    color: theme-token($theme,'ref.color.common.color-base-on-accent');
   }
 
   &:active {
     background-color: theme-token($theme,'sys.color.button.primary.background-color-pressed');
-    border-color: theme-token($theme,'ref.color.button.color-utility-surface');
+    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.button.color-base-on-accent');
+    color: theme-token($theme,'ref.color.common.color-base-on-accent');
   }
 }
 
diff --git a/packages/ui/src/components/Checkbox/SCheckboxAtom.scss b/packages/ui/src/components/Checkbox/SCheckboxAtom.scss
index f5585dea3..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.background');
+$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 484601605..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.content-on-background-inverted');
+    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 011ee3514..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.content-on-background-inverted');
+    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 ae2126be4..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 e0ca17050..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.content-on-background-inverted');
+    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 2ef2fb53a..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.content-on-background-inverted');
+          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.content-on-background-inverted');
-        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.content-on-background-inverted');
+        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 02099b421..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.content-on-background-inverted');
+          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 2eccfac17..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.content-on-background-inverted');
+$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 e782cf61d..78ac15a91 100644
--- a/packages/ui/src/components/ProgressBar/SProgressBar.vue
+++ b/packages/ui/src/components/ProgressBar/SProgressBar.vue
@@ -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 31c8b8705..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.content-on-background-inverted');
+      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 45b41d082..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..91854eb1b 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-on-accent');
     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 bc3bab5c7..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('sys.color.content-on-background-inverted');
+  background: theme.token-as-var('ref.color.common.color-base-on-accent');
   overflow-y: auto;
   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 46b906d7f..3c34bf01f 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-on-accent');
   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 ab29ef7d6..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.content-on-background-inverted');
+  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 088d0e07e..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.content-on-background-inverted');
+$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 f8bbe8996..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 b6d414641..ac8929301 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.content-on-background-inverted');
+    $font-color-active: theme.token-as-var('ref.color.common.color-base-on-accent');
 
-    $background-color: theme.token-as-var('sys.color.content-on-background-inverted');
-    $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-on-accent');
     $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 4975fbffd..7c0ecfc24 100644
--- a/packages/ui/src/components/TextField/STextField.vue
+++ b/packages/ui/src/components/TextField/STextField.vue
@@ -341,9 +341,9 @@ $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-bg: theme.token-as-var('ref.color.common.color-base-on-accent');
+$theme-bg-hover: theme.token-as-var('ref.color.common.color-base-content-secondary');
+$theme-border-primary: theme.token-as-var('ref.color.common.color-utility-surface');
 $theme-content-tertiary: theme.token-as-var('sys.color.content-tertiary');
 
 .s-text-field {
diff --git a/packages/ui/src/components/Tooltip/STooltip.vue b/packages/ui/src/components/Tooltip/STooltip.vue
index a4e1ee98a..c451b71d6 100644
--- a/packages/ui/src/components/Tooltip/STooltip.vue
+++ b/packages/ui/src/components/Tooltip/STooltip.vue
@@ -115,25 +115,25 @@ function handleSecondaryButtonClick() {
 .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.content-on-background-inverted');
-        background: theme.token-as-var('sys.color.content-on-background-inverted');
+        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.background');
+      border-color: theme.token-as-var('ref.color.common.color-base-on-accent');
       color: theme.token-as-var('sys.color.on-disabled');
     }
   }