diff --git a/src/__tests__/BorderBox.js b/src/__tests__/BorderBox.js
index 9304f6ab166..67a2c3becc8 100644
--- a/src/__tests__/BorderBox.js
+++ b/src/__tests__/BorderBox.js
@@ -40,6 +40,6 @@ describe('BorderBox', () => {
 
   // the test returns the box shadow value without spaces, so had to manually provide the expected string here
   it('renders box shadow', () => {
-    expect(render(<BorderBox boxShadow="small" />)).toHaveStyleRule('box-shadow', '0 1px 1px rgba(27,31,35,0.1)')
+    expect(render(<BorderBox boxShadow="small" />)).toHaveStyleRule('box-shadow', '0 1px 0 rgba(149,157,165,0.1)')
   })
 })
diff --git a/src/__tests__/__snapshots__/BreadcrumbItem.js.snap b/src/__tests__/__snapshots__/BreadcrumbItem.js.snap
index 1d89748a790..85923ae7e9d 100644
--- a/src/__tests__/__snapshots__/BreadcrumbItem.js.snap
+++ b/src/__tests__/__snapshots__/BreadcrumbItem.js.snap
@@ -304,15 +304,15 @@ exports[`Breadcrumb.Item renders the given "as" prop 1`] = `
         "100px",
       ],
       "shadows": Object {
-        "extra-large": "0 10px 50px rgba(27, 31, 35, 0.07)",
+        "extra-large": "0 12px 48px rgba(149, 157, 165, 0.3)",
         "formControl": "inset 0px 2px 0px rgba(225, 228, 232, 0.2)",
         "formControlDisabled": "inset 0px 2px 0px rgba(220, 227, 237, 0.3)",
         "formControlFocus": "rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em",
-        "large": "0 1px 15px rgba(27, 31, 35, 0.15)",
-        "medium": "0 1px 5px rgba(27, 31, 35, 0.15)",
+        "large": "0 8px 24px rgba(149, 157, 165, 0.2)",
+        "medium": "0 3px 6px rgba(149, 157, 165, 0.15)",
         "primaryActiveShadow": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
         "primaryShadow": "0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
-        "small": "0 1px 1px rgba(27, 31, 35, 0.1)",
+        "small": "0 1px 0 rgba(149, 157, 165, 0.1)",
       },
       "space": Array [
         "0",
diff --git a/src/__tests__/__snapshots__/CircleBadge.js.snap b/src/__tests__/__snapshots__/CircleBadge.js.snap
index e35e2e949b2..ccce0cf64b7 100644
--- a/src/__tests__/__snapshots__/CircleBadge.js.snap
+++ b/src/__tests__/__snapshots__/CircleBadge.js.snap
@@ -16,7 +16,7 @@ exports[`CircleBadge respects "as" prop 1`] = `
   justify-content: center;
   background-color: #fff;
   border-radius: 50%;
-  box-shadow: 0 1px 5px rgba(27,31,35,0.15);
+  box-shadow: 0 3px 6px rgba(149,157,165,0.15);
   width: 96px;
   height: 96px;
 }
@@ -42,7 +42,7 @@ exports[`CircleBadge respects the inline prop 1`] = `
   justify-content: center;
   background-color: #fff;
   border-radius: 50%;
-  box-shadow: 0 1px 5px rgba(27,31,35,0.15);
+  box-shadow: 0 3px 6px rgba(149,157,165,0.15);
   width: 96px;
   height: 96px;
 }
@@ -68,7 +68,7 @@ exports[`CircleBadge respects the variant prop 1`] = `
   justify-content: center;
   background-color: #fff;
   border-radius: 50%;
-  box-shadow: 0 1px 5px rgba(27,31,35,0.15);
+  box-shadow: 0 3px 6px rgba(149,157,165,0.15);
   width: 128px;
   height: 128px;
 }
@@ -94,7 +94,7 @@ exports[`CircleBadge uses the size prop to override the variant prop 1`] = `
   justify-content: center;
   background-color: #fff;
   border-radius: 50%;
-  box-shadow: 0 1px 5px rgba(27,31,35,0.15);
+  box-shadow: 0 3px 6px rgba(149,157,165,0.15);
   width: 20px;
   height: 20px;
 }
diff --git a/src/__tests__/__snapshots__/FilterListItem.js.snap b/src/__tests__/__snapshots__/FilterListItem.js.snap
index 6fb22ed9084..210b44246b5 100644
--- a/src/__tests__/__snapshots__/FilterListItem.js.snap
+++ b/src/__tests__/__snapshots__/FilterListItem.js.snap
@@ -317,15 +317,15 @@ exports[`FilterList.Item renders the given "as" prop 1`] = `
         "100px",
       ],
       "shadows": Object {
-        "extra-large": "0 10px 50px rgba(27, 31, 35, 0.07)",
+        "extra-large": "0 12px 48px rgba(149, 157, 165, 0.3)",
         "formControl": "inset 0px 2px 0px rgba(225, 228, 232, 0.2)",
         "formControlDisabled": "inset 0px 2px 0px rgba(220, 227, 237, 0.3)",
         "formControlFocus": "rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em",
-        "large": "0 1px 15px rgba(27, 31, 35, 0.15)",
-        "medium": "0 1px 5px rgba(27, 31, 35, 0.15)",
+        "large": "0 8px 24px rgba(149, 157, 165, 0.2)",
+        "medium": "0 3px 6px rgba(149, 157, 165, 0.15)",
         "primaryActiveShadow": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
         "primaryShadow": "0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
-        "small": "0 1px 1px rgba(27, 31, 35, 0.1)",
+        "small": "0 1px 0 rgba(149, 157, 165, 0.1)",
       },
       "space": Array [
         "0",
diff --git a/src/__tests__/__snapshots__/SubNavLink.js.snap b/src/__tests__/__snapshots__/SubNavLink.js.snap
index c18f1a79131..5539e999aa1 100644
--- a/src/__tests__/__snapshots__/SubNavLink.js.snap
+++ b/src/__tests__/__snapshots__/SubNavLink.js.snap
@@ -344,15 +344,15 @@ exports[`SubNav.Link renders the given "as" prop 1`] = `
         "100px",
       ],
       "shadows": Object {
-        "extra-large": "0 10px 50px rgba(27, 31, 35, 0.07)",
+        "extra-large": "0 12px 48px rgba(149, 157, 165, 0.3)",
         "formControl": "inset 0px 2px 0px rgba(225, 228, 232, 0.2)",
         "formControlDisabled": "inset 0px 2px 0px rgba(220, 227, 237, 0.3)",
         "formControlFocus": "rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em",
-        "large": "0 1px 15px rgba(27, 31, 35, 0.15)",
-        "medium": "0 1px 5px rgba(27, 31, 35, 0.15)",
+        "large": "0 8px 24px rgba(149, 157, 165, 0.2)",
+        "medium": "0 3px 6px rgba(149, 157, 165, 0.15)",
         "primaryActiveShadow": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
         "primaryShadow": "0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
-        "small": "0 1px 1px rgba(27, 31, 35, 0.1)",
+        "small": "0 1px 0 rgba(149, 157, 165, 0.1)",
       },
       "space": Array [
         "0",
diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
index 7060a25b054..165dc2b1335 100644
--- a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
+++ b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
@@ -321,15 +321,15 @@ exports[`UnderlineNav.Link renders the given "as" prop 1`] = `
         "100px",
       ],
       "shadows": Object {
-        "extra-large": "0 10px 50px rgba(27, 31, 35, 0.07)",
+        "extra-large": "0 12px 48px rgba(149, 157, 165, 0.3)",
         "formControl": "inset 0px 2px 0px rgba(225, 228, 232, 0.2)",
         "formControlDisabled": "inset 0px 2px 0px rgba(220, 227, 237, 0.3)",
         "formControlFocus": "rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em",
-        "large": "0 1px 15px rgba(27, 31, 35, 0.15)",
-        "medium": "0 1px 5px rgba(27, 31, 35, 0.15)",
+        "large": "0 8px 24px rgba(149, 157, 165, 0.2)",
+        "medium": "0 3px 6px rgba(149, 157, 165, 0.15)",
         "primaryActiveShadow": "inset 0px 1px 0px rgba(20, 70, 32, 0.2)",
         "primaryShadow": "0px 1px 0px rgba(20, 70, 32, 0.1), inset 0px 2px 0px rgba(255, 255, 255, 0.03)",
-        "small": "0 1px 1px rgba(27, 31, 35, 0.1)",
+        "small": "0 1px 0 rgba(149, 157, 165, 0.1)",
       },
       "space": Array [
         "0",
diff --git a/src/theme.js b/src/theme.js
index 79bbd79b2ac..d94a38017cc 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -192,10 +192,10 @@ const theme = {
   lineHeights,
   radii: ['0', '3px', '6px', '100px'],
   shadows: {
-    small: '0 1px 1px rgba(27, 31, 35, 0.1)',
-    medium: '0 1px 5px rgba(27, 31, 35, 0.15)',
-    large: '0 1px 15px rgba(27, 31, 35, 0.15)',
-    'extra-large': '0 10px 50px rgba(27, 31, 35, 0.07)',
+    small: '0 1px 0 rgba(149, 157, 165, 0.1)',
+    medium: '0 3px 6px rgba(149, 157, 165, 0.15)',
+    large: '0 8px 24px rgba(149, 157, 165, 0.2)',
+    'extra-large': '0 12px 48px rgba(149, 157, 165, 0.3)',
     formControl: 'inset 0px 2px 0px rgba(225, 228, 232, 0.2)',
     formControlDisabled: 'inset 0px 2px 0px rgba(220, 227, 237, 0.3)',
     formControlFocus: 'rgba(3, 102, 214, 0.3) 0px 0px 0px 0.2em',