diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 0b120e9e5..177be4e5c 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -161,7 +161,7 @@
 
     svg,
     span svg {
-      stroke: var(--button-background-color-disabled);
+      stroke: var(--button-foreground-color-disabled);
     }
   }
 }
diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss
index 7489f1884..567709e0c 100644
--- a/frontend/resources/styles/common/refactor/color-defs.scss
+++ b/frontend/resources/styles/common/refactor/color-defs.scss
@@ -16,6 +16,7 @@
   --dark-gray-4: #34393b;
   --white: #fff;
   --off-white: #aab5ba;
+  --off-white-40: #{color.change(#aab5ba, $alpha: 0.4)};
   --green: #91fadb;
   --green-30: rgba(145, 250, 219, 0.3);
   --lilac: #bb97d8;
@@ -38,7 +39,7 @@
   --light-gray-4: #eef0f2;
   --black: #000;
   --off-black: #495e74;
-  --off-black-30: #{color.change(#495e74, $alpha: 0.3)};
+  --off-black-40: #{color.change(#495e74, $alpha: 0.4)};
   --purple: #6911d4;
   --purple-30: rgba(105, 17, 212, 0.2);
   --blue: #1345aa;
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index 41950ee19..ded979f2f 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -23,8 +23,8 @@
   --button-background-color-focus: var(--color-background-secondary);
   --button-foreground-color-focus: var(--color-foreground-primary);
   --button-border-color-focus: var(--color-accent-primary);
-  --button-foreground-color-disabled: var(--color-foreground-secondary);
-  --button-background-color-disabled: var(--color-foreground-disabled);
+  --button-foreground-color-disabled: var(--color-foreground-disabled);
+  --button-background-color-disabled: var(--color-background-quaternary);
   --button-border-color-disabled: var(--color-background-quaternary);
 
   --button-primary-background-color-rest: var(--color-accent-primary);
diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss
index 20b8067dd..862996910 100644
--- a/frontend/resources/styles/common/refactor/themes/default-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss
@@ -16,7 +16,7 @@
   --color-foreground-primary: var(--white);
   --color-foreground-secondary: var(--off-white);
   --color-foreground-tertiary: var(--pink);
-  --color-foreground-disabled: var(--dark-gray-4);
+  --color-foreground-disabled: var(--off-white-40);
   --color-accent-primary: var(--green);
   --color-accent-primary-muted: var(--green-30);
   --color-accent-secondary: var(--lilac);
diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss
index 422c7b0c5..4c8a927fb 100644
--- a/frontend/resources/styles/common/refactor/themes/light-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss
@@ -16,7 +16,7 @@
   --color-foreground-primary: var(--black);
   --color-foreground-secondary: var(--off-black);
   --color-foreground-tertiary: var(--pink);
-  --color-foreground-disabled: var(--off-black-30);
+  --color-foreground-disabled: var(--off-black-40);
   --color-accent-primary: var(--purple);
   --color-accent-primary-muted: var(--purple-30);
   --color-accent-secondary: var(--blue);
@@ -29,7 +29,7 @@
   --error-color: var(--light-error-color);
   --canvas-color: var(--color-canvas);
 
-  --shadow-color: var(--off-black-30);
+  --shadow-color: var(--off-black-40);
   --radio-button-box-shadow: 0 0 0 1px var(--light-gray-2) inset;
 
   @include meta.load-css("hljs-light-theme");
diff --git a/frontend/src/app/main/ui/components/radio_buttons.scss b/frontend/src/app/main/ui/components/radio_buttons.scss
index 51b81415e..0c512f3e8 100644
--- a/frontend/src/app/main/ui/components/radio_buttons.scss
+++ b/frontend/src/app/main/ui/components/radio_buttons.scss
@@ -53,19 +53,19 @@
     cursor: default;
     background-color: transparent;
     svg {
-      stroke: var(--button-background-color-disabled);
+      stroke: var(--button-foreground-color-disabled);
     }
     .title-name {
-      color: var(--button-background-color-disabled);
+      color: var(--button-foreground-color-disabled);
     }
     &:hover {
       border: none;
       background-color: transparent;
       svg {
-        stroke: var(--button-background-color-disabled);
+        stroke: var(--button-foreground-color-disabled);
       }
       .title-name {
-        color: var(--button-background-color-disabled);
+        color: var(--button-foreground-color-disabled);
       }
     }
   }
diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss
index 2fc27b5bb..0a186880d 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette.scss
@@ -46,7 +46,7 @@
   }
   &:disabled {
     svg {
-      stroke: var(--button-background-color-disabled);
+      stroke: var(--button-foreground-color-disabled);
     }
     &::after {
       background-image: none;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
index 8294f1d8b..f5a14d50e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
@@ -29,12 +29,12 @@
   &.disabled {
     cursor: default;
     svg {
-      stroke: var(--button-background-color-disabled);
+      stroke: var(--button-foreground-color-disabled);
     }
     &:hover {
       background-color: var(--panel-background-color);
       svg {
-        stroke: var(--button-background-color-disabled);
+        stroke: var(--button-foreground-color-disabled);
       }
     }
   }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
index 3cf1fa8fe..625a80b71 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
@@ -30,12 +30,12 @@
   &.disabled {
     cursor: default;
     svg {
-      stroke: var(--button-background-color-disabled);
+      stroke: var(--button-foreground-color-disabled);
     }
     &:hover {
       background-color: var(--panel-background-color);
       svg {
-        stroke: var(--button-background-color-disabled);
+        stroke: var(--button-foreground-color-disabled);
       }
     }
   }
diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss
index b3e39120d..faee2df1b 100644
--- a/frontend/src/app/main/ui/workspace/text_palette.scss
+++ b/frontend/src/app/main/ui/workspace/text_palette.scss
@@ -44,7 +44,7 @@
   }
   &:disabled {
     svg {
-      stroke: var(--button-background-color-disabled);
+      stroke: var(--button-foreground-color-disabled);
     }
     &::after {
       background-image: none;
@@ -100,18 +100,21 @@
     width: $s-120;
     color: var(--palette-text-color-selected);
   }
+
   .typography-font {
     @include textEllipsis;
     height: $s-16;
     width: $s-120;
     color: var(--palette-text-color);
   }
+
   .typography-data {
     @include textEllipsis;
     height: $s-16;
     width: $s-120;
     color: var(--palette-text-color);
   }
+
   &.mid-item {
     .typography-name {
       height: $s-16;