diff --git a/packages/design-system/src/components/avatar.tsx b/packages/design-system/src/components/avatar.tsx
index 3ec503f894..2f39c8c1ce 100644
--- a/packages/design-system/src/components/avatar.tsx
+++ b/packages/design-system/src/components/avatar.tsx
@@ -67,7 +67,7 @@ const StyledAvatar = styled(AvatarPrimitive.Root, {
         color: "$loContrast",
       },
       gray: {
-        backgroundColor: "$slate5",
+        backgroundColor: "$slate6",
       },
       tomato: {
         backgroundColor: "$tomato5",
diff --git a/packages/design-system/src/components/button.tsx b/packages/design-system/src/components/button.tsx
index edee5f240b..07517cc519 100644
--- a/packages/design-system/src/components/button.tsx
+++ b/packages/design-system/src/components/button.tsx
@@ -194,12 +194,12 @@ export const Button = styled("button", {
         color: "$slate11",
         "@hover": {
           "&:hover": {
-            backgroundColor: "$slate5",
+            backgroundColor: "$slate6",
             boxShadow: "inset 0 0 0 1px $colors$slate8",
           },
         },
         "&:active": {
-          backgroundColor: "$slate5",
+          backgroundColor: "$slate6",
         },
         "&:focus": {
           boxShadow: "inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8",
@@ -212,12 +212,12 @@ export const Button = styled("button", {
         pointerEvents: "none",
         "@hover": {
           "&:hover": {
-            backgroundColor: "$slate5",
+            backgroundColor: "$slate6",
             boxShadow: "inset 0 0 0 1px $colors$slate8",
           },
         },
         "&:active": {
-          backgroundColor: "$slate5",
+          backgroundColor: "$slate6",
         },
         "&:focus": {
           boxShadow: "inset 0 0 0 1px $colors$slate8",
diff --git a/packages/design-system/src/components/switch.tsx b/packages/design-system/src/components/switch.tsx
index 2e75124b29..56e42f908b 100644
--- a/packages/design-system/src/components/switch.tsx
+++ b/packages/design-system/src/components/switch.tsx
@@ -40,7 +40,7 @@ const StyledSwitch = styled(SwitchPrimitive.Root, {
   outline: "none",
   WebkitTapHighlightColor: "rgba(0,0,0,0)",
 
-  backgroundColor: "$slate5",
+  backgroundColor: "$slate6",
   borderRadius: "$pill",
   position: "relative",
   "&:focus": {
diff --git a/packages/design-system/src/components/toggle-group.tsx b/packages/design-system/src/components/toggle-group.tsx
index d3b86afd09..c0456df718 100644
--- a/packages/design-system/src/components/toggle-group.tsx
+++ b/packages/design-system/src/components/toggle-group.tsx
@@ -3,7 +3,7 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 
 export const Root = styled(ToggleGroupPrimitive.Root, {
   display: "inline-flex",
-  backgroundColor: "$slate5",
+  backgroundColor: "$slate6",
   borderRadius: 4,
   boxShadow: `0 2px 10px $blackA7`,
 });