diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss
index 9f08d80d2..b62a8484e 100644
--- a/src/styles/variables/colors.scss
+++ b/src/styles/variables/colors.scss
@@ -5,7 +5,8 @@
   --grey-200: hsl(220, 13%, 91%);
   --grey-300: hsl(216, 12.2%, 83.9%);
   --grey-400: hsl(217.9, 10.6%, 64.9%);
-  --grey-500: hsl(220, 8.9%, 46.1%);
+  --grey-500-hsl: 220, 8.9%, 46.1%;
+  --grey-500: hsla(var(--grey-500-hsl), 1);
   --grey-600: hsl(215, 13.8%, 34.1%);
   --grey-700: hsl(216.9, 19.1%, 26.7%);
   --grey-800: hsl(215, 27.9%, 16.9%);
@@ -50,7 +51,8 @@ $grey-lightest: $grey-100;
     --grey-800: hsl(220, 14.3%, 95.9%);
     --grey-700: hsl(220, 13%, 91%);
     --grey-600: hsl(216, 12.2%, 83.9%);
-    --grey-500: hsl(217.9, 10.6%, 64.9%);
+    --grey-500-hsl: 217.9, 10.6%, 64.9%;
+    --grey-500: hsla(var(--grey-500-hsl), 1);
     --grey-400: hsl(220, 8.9%, 46.1%);
     --grey-300: hsl(215, 13.8%, 34.1%);
     --grey-200: hsl(216.9, 19.1%, 26.7%);
diff --git a/src/styles/variables/shadows.scss b/src/styles/variables/shadows.scss
index 5782efd99..b817c1708 100644
--- a/src/styles/variables/shadows.scss
+++ b/src/styles/variables/shadows.scss
@@ -1,5 +1,5 @@
-$shadow-xs: 0 1px 3px rgba($grey-500, .12), 0 1px 2px rgba($grey-500, .24);
-$shadow-sm: 0 3px 6px rgba($grey-500, .12), 0 2px 4px rgba($grey-500, .10);
-$shadow-md: 0 10px 20px rgba($grey-500, .12), 0 3px 6px rgba($grey-500, .08);
-$shadow-lg: 0 15px 25px rgba($grey-500, .12), 0 5px 10px rgba($grey-500, .05);
-$shadow-xl: 0 20px 40px rgba($grey-500, .2);
+$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);
+$shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12), 0 3px 6px hsla(var(--grey-500-hsl), .08);
+$shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12), 0 5px 10px hsla(var(--grey-500-hsl), .05);
+$shadow-xl: 0 20px 40px hsla(var(--grey-500-hsl), .2);