diff --git a/app/assets/tailwind/sure-design-system/_generated.css b/app/assets/tailwind/sure-design-system/_generated.css
index dc4e8f855..75ac3e6cd 100644
--- a/app/assets/tailwind/sure-design-system/_generated.css
+++ b/app/assets/tailwind/sure-design-system/_generated.css
@@ -199,14 +199,14 @@
     --color-success: var(--color-green-500);
     --color-warning: var(--color-yellow-400);
     --color-destructive: var(--color-red-400);
-    --color-shadow: --alpha(var(--color-white) / 8%);
+    --color-shadow: --alpha(var(--color-black) / 25%);
     --budget-unused-fill: var(--color-gray-500);
     --budget-unallocated-fill: var(--color-gray-700);
-    --shadow-xs: 0px 1px 2px 0px --alpha(var(--color-white) / 8%);
-    --shadow-sm: 0px 1px 6px 0px --alpha(var(--color-white) / 8%);
-    --shadow-md: 0px 4px 8px -2px --alpha(var(--color-white) / 8%);
-    --shadow-lg: 0px 12px 16px -4px --alpha(var(--color-white) / 8%);
-    --shadow-xl: 0px 20px 24px -4px --alpha(var(--color-white) / 8%);
+    --shadow-xs: 0px 1px 2px 0px --alpha(var(--color-black) / 25%);
+    --shadow-sm: 0px 1px 6px 0px --alpha(var(--color-black) / 30%);
+    --shadow-md: 0px 4px 8px -2px --alpha(var(--color-black) / 35%);
+    --shadow-lg: 0px 12px 16px -4px --alpha(var(--color-black) / 40%);
+    --shadow-xl: 0px 20px 24px -4px --alpha(var(--color-black) / 50%);
   }
 }
 
diff --git a/design/tokens/sure.tokens.json b/design/tokens/sure.tokens.json
index e8c3ce27c..ee18b677c 100644
--- a/design/tokens/sure.tokens.json
+++ b/design/tokens/sure.tokens.json
@@ -21,7 +21,7 @@
     "success":     { "$value": "{color.green.600}",  "$type": "color", "$extensions": { "sure.dark": "{color.green.500}" } },
     "warning":     { "$value": "{color.yellow.600}", "$type": "color", "$extensions": { "sure.dark": "{color.yellow.400}" } },
     "destructive": { "$value": "{color.red.600}",    "$type": "color", "$extensions": { "sure.dark": "{color.red.400}" } },
-    "shadow":      { "$value": "{color.black|6%}",   "$type": "color", "$extensions": { "sure.dark": "{color.white|8%}" } },
+    "shadow":      { "$value": "{color.black|6%}",   "$type": "color", "$extensions": { "sure.dark": "{color.black|25%}" } },
 
     "gray": {
       "25":  { "$value": "#FAFAFA", "$type": "color" },
@@ -240,11 +240,11 @@
   },
 
   "shadow": {
-    "xs": { "$value": "0px 1px 2px 0px {color.black|6%}",   "$type": "shadow", "$extensions": { "sure.dark": "0px 1px 2px 0px {color.white|8%}" } },
-    "sm": { "$value": "0px 1px 6px 0px {color.black|6%}",   "$type": "shadow", "$extensions": { "sure.dark": "0px 1px 6px 0px {color.white|8%}" } },
-    "md": { "$value": "0px 4px 8px -2px {color.black|6%}",  "$type": "shadow", "$extensions": { "sure.dark": "0px 4px 8px -2px {color.white|8%}" } },
-    "lg": { "$value": "0px 12px 16px -4px {color.black|6%}","$type": "shadow", "$extensions": { "sure.dark": "0px 12px 16px -4px {color.white|8%}" } },
-    "xl": { "$value": "0px 20px 24px -4px {color.black|6%}","$type": "shadow", "$extensions": { "sure.dark": "0px 20px 24px -4px {color.white|8%}" } }
+    "xs": { "$value": "0px 1px 2px 0px {color.black|6%}",   "$type": "shadow", "$extensions": { "sure.dark": "0px 1px 2px 0px {color.black|25%}" } },
+    "sm": { "$value": "0px 1px 6px 0px {color.black|6%}",   "$type": "shadow", "$extensions": { "sure.dark": "0px 1px 6px 0px {color.black|30%}" } },
+    "md": { "$value": "0px 4px 8px -2px {color.black|6%}",  "$type": "shadow", "$extensions": { "sure.dark": "0px 4px 8px -2px {color.black|35%}" } },
+    "lg": { "$value": "0px 12px 16px -4px {color.black|6%}","$type": "shadow", "$extensions": { "sure.dark": "0px 12px 16px -4px {color.black|40%}" } },
+    "xl": { "$value": "0px 20px 24px -4px {color.black|6%}","$type": "shadow", "$extensions": { "sure.dark": "0px 20px 24px -4px {color.black|50%}" } }
   },
 
   "animate": {