diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss
index 860509c2f..638fd7cdd 100644
--- a/src/styles/custom-properties/colors.scss
+++ b/src/styles/custom-properties/colors.scss
@@ -98,7 +98,8 @@
     --grey-200: hsl(216.9, 19.1%, 26.7%);
     --grey-100-hsl: 215, 27.9%, 16.9%;
     --grey-100: hsl(var(--grey-100-hsl));
-    --grey-50: hsl(220.9, 39.3%, 11%);
+    --grey-50-hsl: 220.9, 39.3%, 11%;
+    --grey-50: hsl(var(--grey-50-hsl));
 
     // Dark grey looks better than black
     --white: var(--grey-50);
diff --git a/src/styles/custom-properties/shadows.scss b/src/styles/custom-properties/shadows.scss
index 23c965a45..5f040ca11 100644
--- a/src/styles/custom-properties/shadows.scss
+++ b/src/styles/custom-properties/shadows.scss
@@ -1,5 +1,5 @@
 :root {
-  --shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12),
+  --shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl), .12),
                0 1px 2px hsla(var(--grey-500-hsl), .24);
   --shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
                0 2px 4px hsla(var(--grey-500-hsl), .10);
@@ -10,13 +10,13 @@
 
   &.dark {
     // Even darker shadows for dark mode
-    --shadow-xs: 0 1px 3px var(--white),
-                 0 1px 2px var(--white);
-    --shadow-sm: 0 3px 6px var(--white),
-                 0 2px 4px var(--white);
-    --shadow-md: 0 10px 20px var(--white),
-                 0 3px 6px var(--white);
-    --shadow-lg: 0 15px 25px var(--white),
-                 0 5px 10px var(--white);
+    --shadow-xs: 0 1px 3px hsla(var(--grey-50-hsl), 0.4),
+                 0 1px 2px hsla(var(--grey-50-hsl), 0.8);
+    --shadow-sm: 0 3px 6px hsla(var(--grey-50-hsl), 0.8),
+                 0 2px 4px hsla(var(--grey-50-hsl), 0.6);
+    --shadow-md: 0 10px 20px hsla(var(--grey-50-hsl), 0.8),
+                 0 3px 6px hsla(var(--grey-50-hsl), 0.6);
+    --shadow-lg: 0 15px 25px hsla(var(--grey-50-hsl), 0.8),
+                 0 5px 10px hsla(var(--grey-50-hsl), 0.4);
   }
 }
\ No newline at end of file