diff --git a/src/components/Appbar/AppbarHeader.tsx b/src/components/Appbar/AppbarHeader.tsx
index ed4ecce48d..a51b0a3e69 100644
--- a/src/components/Appbar/AppbarHeader.tsx
+++ b/src/components/Appbar/AppbarHeader.tsx
@@ -18,7 +18,7 @@ import {
   getAppbarBorders,
 } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import shadow from '../../theme/shadow';
+import { shadow } from '../../theme/tokens/sys/elevation';
 import type { ThemeProp } from '../../types';
 
 export type Props = Omit<
@@ -141,7 +141,7 @@ const AppbarHeader = ({
           paddingHorizontal: Math.max(left, right),
         },
         borderRadius,
-        shadow(elevation) as ViewStyle,
+        shadow(elevation, theme.colors.shadow) as ViewStyle,
       ]}
     >
       <Appbar
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index a3f798d03a..4622beab83 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -23,8 +23,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import MenuItem from './MenuItem';
 import { useInternalTheme } from '../../core/theming';
-import type { Elevation, Theme, ThemeProp } from '../../types';
-import { ElevationLevels } from '../../types';
+import type { Elevation, ElevationLevel, Theme, ThemeProp } from '../../types';
 import { addEventListener } from '../../utils/addEventListener';
 import { BackHandler } from '../../utils/BackHandler/BackHandler';
 import Portal from '../Portal/Portal';
@@ -105,10 +104,6 @@ const EASING = Easing.bezier(0.4, 0, 0.2, 1);
 const WINDOW_LAYOUT = Dimensions.get('window');
 
 const DEFAULT_ELEVATION: Elevation = 2;
-export const ELEVATION_LEVELS_MAP = Object.values(
-  ElevationLevels
-) as ElevationLevels[];
-
 const DEFAULT_MODE = 'elevated';
 
 const focusFirstDOMNode = (el: View | null | undefined) => {
@@ -675,7 +670,9 @@ const Menu = ({
                   shadowMenuContainerStyle,
                   {
                     backgroundColor:
-                      md3Colors.elevation[ELEVATION_LEVELS_MAP[elevation]],
+                      md3Colors.elevation[
+                        `level${elevation}` as ElevationLevel
+                      ],
                   },
                   contentStyle,
                 ]}
diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx
index 7dcfd0a6cd..c1e4add5d9 100644
--- a/src/components/Surface.tsx
+++ b/src/components/Surface.tsx
@@ -10,7 +10,12 @@ import {
 } from 'react-native';
 
 import { useInternalTheme } from '../core/theming';
-import shadow from '../theme/shadow';
+import {
+  androidElevationLevels,
+  elevationInputRange,
+  shadow,
+  shadowLayers,
+} from '../theme/tokens/sys/elevation';
 import type { Elevation, Theme, ThemeProp } from '../types';
 import { isAnimatedValue } from '../utils/animations';
 import { forwardRef } from '../utils/forwardRef';
@@ -75,54 +80,41 @@ const outerLayerStyleProperties: (keyof ViewStyle)[] = [
   'opacity',
 ];
 
-const shadowColor = '#000';
-const iOSShadowOutputRanges = [
-  {
-    shadowOpacity: 0.15,
-    height: [0, 1, 2, 4, 6, 8],
-    shadowRadius: [0, 3, 6, 8, 10, 12],
-  },
-  {
-    shadowOpacity: 0.3,
-    height: [0, 1, 1, 1, 2, 4],
-    shadowRadius: [0, 1, 2, 3, 3, 4],
-  },
-];
-const inputRange = [0, 1, 2, 3, 4, 5];
 function getStyleForShadowLayer(
   elevation: SurfaceElevation,
-  layer: 0 | 1
+  layer: 0 | 1,
+  shadowColor: string
 ): Animated.WithAnimatedValue<ShadowStyleIOS> {
   if (isAnimatedValue(elevation)) {
     return {
       shadowColor,
       shadowOpacity: elevation.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, iOSShadowOutputRanges[layer].shadowOpacity],
+        outputRange: [0, shadowLayers[layer].shadowOpacity],
         extrapolate: 'clamp',
       }),
       shadowOffset: {
         width: 0,
         height: elevation.interpolate({
-          inputRange,
-          outputRange: iOSShadowOutputRanges[layer].height,
+          inputRange: [...elevationInputRange],
+          outputRange: [...shadowLayers[layer].height],
         }),
       },
       shadowRadius: elevation.interpolate({
-        inputRange,
-        outputRange: iOSShadowOutputRanges[layer].shadowRadius,
+        inputRange: [...elevationInputRange],
+        outputRange: [...shadowLayers[layer].shadowRadius],
       }),
     };
   }
 
   return {
     shadowColor,
-    shadowOpacity: elevation ? iOSShadowOutputRanges[layer].shadowOpacity : 0,
+    shadowOpacity: elevation ? shadowLayers[layer].shadowOpacity : 0,
     shadowOffset: {
       width: 0,
-      height: iOSShadowOutputRanges[layer].height[elevation],
+      height: shadowLayers[layer].height[elevation],
     },
-    shadowRadius: iOSShadowOutputRanges[layer].shadowRadius[elevation],
+    shadowRadius: shadowLayers[layer].shadowRadius[elevation],
   };
 }
 
@@ -131,6 +123,7 @@ const SurfaceIOS = forwardRef<
   Omit<Props, 'elevation'> & {
     elevation: SurfaceElevation;
     backgroundColor?: string | Animated.AnimatedInterpolation<string | number>;
+    shadowColor: string;
   }
 >(
   (
@@ -138,6 +131,7 @@ const SurfaceIOS = forwardRef<
       elevation,
       style,
       backgroundColor,
+      shadowColor,
       testID,
       children,
       mode = 'elevated',
@@ -173,14 +167,14 @@ const SurfaceIOS = forwardRef<
       const isElevated = mode === 'elevated';
 
       const outerLayerViewStyles = {
-        ...(isElevated && getStyleForShadowLayer(elevation, 0)),
+        ...(isElevated && getStyleForShadowLayer(elevation, 0, shadowColor)),
         ...outerLayerStyles,
         ...borderRadiusStyles,
         backgroundColor: bgColor,
       };
 
       const innerLayerViewStyles = {
-        ...(isElevated && getStyleForShadowLayer(elevation, 1)),
+        ...(isElevated && getStyleForShadowLayer(elevation, 1, shadowColor)),
         ...filteredStyles,
         ...borderRadiusStyles,
         flex:
@@ -191,7 +185,7 @@ const SurfaceIOS = forwardRef<
       };
 
       return [outerLayerViewStyles, innerLayerViewStyles];
-    }, [style, elevation, backgroundColor, mode, container]);
+    }, [style, elevation, backgroundColor, shadowColor, mode, container]);
 
     return (
       <Animated.View
@@ -255,13 +249,11 @@ const Surface = forwardRef<View, Props>(
 
     const { colors } = theme as Theme;
 
-    const inputRange = [0, 1, 2, 3, 4, 5];
-
     const backgroundColor = (() => {
       if (isAnimatedValue(elevation)) {
         return elevation.interpolate({
-          inputRange,
-          outputRange: inputRange.map((elevation) => {
+          inputRange: [...elevationInputRange],
+          outputRange: [...elevationInputRange].map((elevation) => {
             return colors.elevation?.[`level${elevation as Elevation}`];
           }),
         });
@@ -282,7 +274,9 @@ const Surface = forwardRef<View, Props>(
           testID={testID}
           style={[
             { backgroundColor },
-            elevation && isElevated ? shadow(elevation) : null,
+            elevation && isElevated
+              ? shadow(elevation, theme.colors.shadow)
+              : null,
             style,
           ]}
         >
@@ -292,12 +286,12 @@ const Surface = forwardRef<View, Props>(
     }
 
     if (Platform.OS === 'android') {
-      const elevationLevel = [0, 3, 6, 9, 12, 15];
+      const elevationLevel = [...androidElevationLevels];
 
       const getElevationAndroid = () => {
         if (isAnimatedValue(elevation)) {
           return elevation.interpolate({
-            inputRange,
+            inputRange: [...elevationInputRange],
             outputRange: elevationLevel,
           });
         }
@@ -340,6 +334,7 @@ const Surface = forwardRef<View, Props>(
         ref={ref}
         elevation={elevation}
         backgroundColor={backgroundColor}
+        shadowColor={theme.colors.shadow}
         style={style}
         testID={testID}
         mode={mode}
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
index c7b786a718..641dbe80b2 100644
--- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
     {
       "backgroundColor": "rgba(254, 247, 255, 1)",
       "height": 64,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -31,7 +31,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
         "paddingLeft": undefined,
         "paddingRight": undefined,
         "paddingTop": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -48,7 +48,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
         {
           "backgroundColor": "rgba(236, 230, 240, 1)",
           "borderRadius": 28,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -68,7 +68,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
             "borderRadius": 28,
             "flex": undefined,
             "flexDirection": "row",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -87,7 +87,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
               "borderRadius": 20,
               "height": 40,
               "margin": 6,
-              "shadowColor": "#000",
+              "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
                 "width": 0,
@@ -110,7 +110,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                 "elevation": 0,
                 "flex": 1,
                 "overflow": "hidden",
-                "shadowColor": "#000",
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
                   "width": 0,
@@ -279,7 +279,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                 "borderRadius": 20,
                 "height": 40,
                 "margin": 6,
-                "shadowColor": "#000",
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
                   "width": 0,
@@ -302,7 +302,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                   "elevation": 0,
                   "flex": 1,
                   "overflow": "hidden",
-                  "shadowColor": "#000",
+                  "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
                     "width": 0,
@@ -427,7 +427,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
     {
       "backgroundColor": "rgba(254, 247, 255, 1)",
       "height": 64,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -451,7 +451,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
         "paddingLeft": undefined,
         "paddingRight": undefined,
         "paddingTop": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -470,7 +470,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -493,7 +493,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -721,7 +721,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -744,7 +744,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
diff --git a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
index a5a8abd1ac..d1492cc475 100644
--- a/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
+++ b/src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Card renders an outlined card 1`] = `
     {
       "backgroundColor": "rgba(254, 247, 255, 1)",
       "borderRadius": 12,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -25,7 +25,7 @@ exports[`Card renders an outlined card 1`] = `
         "backgroundColor": "rgba(254, 247, 255, 1)",
         "borderRadius": 12,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
diff --git a/src/components/__tests__/Menu.test.tsx b/src/components/__tests__/Menu.test.tsx
index 753124e478..cc566c34e2 100644
--- a/src/components/__tests__/Menu.test.tsx
+++ b/src/components/__tests__/Menu.test.tsx
@@ -4,9 +4,9 @@ import { Animated, Dimensions, StyleSheet, View } from 'react-native';
 import { act, render, screen, waitFor } from '@testing-library/react-native';
 
 import { getTheme } from '../../core/theming';
-import { Elevation } from '../../types';
+import { Elevation, ElevationLevel } from '../../types';
 import Button from '../Button/Button';
-import Menu, { ELEVATION_LEVELS_MAP } from '../Menu/Menu';
+import Menu from '../Menu/Menu';
 import Portal from '../Portal/Portal';
 
 const styles = StyleSheet.create({
@@ -87,7 +87,8 @@ it('renders menu with content styles', () => {
     );
 
     expect(getByTestId('menu-surface')).toHaveStyle({
-      backgroundColor: theme.colors.elevation[ELEVATION_LEVELS_MAP[elevation]],
+      backgroundColor:
+        theme.colors.elevation[`level${elevation}` as ElevationLevel],
     });
   })
 );
diff --git a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
index eea7087336..fad6addacc 100644
--- a/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/AnimatedFAB.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`renders animated fab 1`] = `
       "borderRadius": 16,
       "opacity": 1,
       "position": "absolute",
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -32,7 +32,7 @@ exports[`renders animated fab 1`] = `
         "backgroundColor": "transparent",
         "borderRadius": 16,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
@@ -296,7 +296,7 @@ exports[`renders animated fab with label on the left 1`] = `
       "borderRadius": 16,
       "opacity": 1,
       "position": "absolute",
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -319,7 +319,7 @@ exports[`renders animated fab with label on the left 1`] = `
         "backgroundColor": "transparent",
         "borderRadius": 16,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
@@ -585,7 +585,7 @@ exports[`renders animated fab with label on the right by default 1`] = `
       "borderRadius": 16,
       "opacity": 1,
       "position": "absolute",
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -608,7 +608,7 @@ exports[`renders animated fab with label on the right by default 1`] = `
         "backgroundColor": "transparent",
         "borderRadius": 16,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
index 6be6a1afa3..2b7d4fd813 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`render visible banner, with custom theme 1`] = `
     {
       "backgroundColor": "rgba(247, 242, 250, 1)",
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 1,
         "width": 0,
@@ -24,13 +24,13 @@ exports[`render visible banner, with custom theme 1`] = `
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
         },
         "shadowOpacity": 0.3,
-        "shadowRadius": 1,
+        "shadowRadius": 2,
       }
     }
     testID="surface"
@@ -124,7 +124,7 @@ exports[`render visible banner, with custom theme 1`] = `
                 "backgroundColor": "transparent",
                 "borderRadius": 20,
                 "margin": 4,
-                "shadowColor": "#000",
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
                   "width": 0,
@@ -146,7 +146,7 @@ exports[`render visible banner, with custom theme 1`] = `
                   "borderWidth": 0,
                   "flex": undefined,
                   "minWidth": "auto",
-                  "shadowColor": "#000",
+                  "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
                     "width": 0,
@@ -283,7 +283,7 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
     {
       "backgroundColor": "rgba(247, 242, 250, 1)",
       "opacity": 0,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 1,
         "width": 0,
@@ -300,13 +300,13 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
         },
         "shadowOpacity": 0.3,
-        "shadowRadius": 1,
+        "shadowRadius": 2,
       }
     }
     testID="surface"
@@ -418,7 +418,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
     {
       "backgroundColor": "rgba(247, 242, 250, 1)",
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 1,
         "width": 0,
@@ -435,13 +435,13 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
         },
         "shadowOpacity": 0.3,
-        "shadowRadius": 1,
+        "shadowRadius": 2,
       }
     }
     testID="surface"
@@ -557,7 +557,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                 "backgroundColor": "transparent",
                 "borderRadius": 20,
                 "margin": 4,
-                "shadowColor": "#000",
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
                   "width": 0,
@@ -579,7 +579,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                   "borderWidth": 0,
                   "flex": undefined,
                   "minWidth": "auto",
-                  "shadowColor": "#000",
+                  "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
                     "width": 0,
@@ -716,7 +716,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
     {
       "backgroundColor": "rgba(247, 242, 250, 1)",
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 1,
         "width": 0,
@@ -733,13 +733,13 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
         },
         "shadowOpacity": 0.3,
-        "shadowRadius": 1,
+        "shadowRadius": 2,
       }
     }
     testID="surface"
@@ -833,7 +833,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                 "backgroundColor": "transparent",
                 "borderRadius": 20,
                 "margin": 4,
-                "shadowColor": "#000",
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
                   "width": 0,
@@ -855,7 +855,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                   "borderWidth": 0,
                   "flex": undefined,
                   "minWidth": "auto",
-                  "shadowColor": "#000",
+                  "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
                     "width": 0,
@@ -985,7 +985,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                 "backgroundColor": "transparent",
                 "borderRadius": 20,
                 "margin": 4,
-                "shadowColor": "#000",
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
                   "width": 0,
@@ -1007,7 +1007,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                   "borderWidth": 0,
                   "flex": undefined,
                   "minWidth": "auto",
-                  "shadowColor": "#000",
+                  "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
                     "width": 0,
@@ -1144,7 +1144,7 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
     {
       "backgroundColor": "rgba(247, 242, 250, 1)",
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 1,
         "width": 0,
@@ -1161,13 +1161,13 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
         },
         "shadowOpacity": 0.3,
-        "shadowRadius": 1,
+        "shadowRadius": 2,
       }
     }
     testID="surface"
@@ -1289,7 +1289,7 @@ exports[`renders visible banner, without action buttons and without image 1`] =
     {
       "backgroundColor": "rgba(247, 242, 250, 1)",
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 1,
         "width": 0,
@@ -1306,13 +1306,13 @@ exports[`renders visible banner, without action buttons and without image 1`] =
       {
         "backgroundColor": "rgba(247, 242, 250, 1)",
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
         },
         "shadowOpacity": 0.3,
-        "shadowRadius": 1,
+        "shadowRadius": 2,
       }
     }
     testID="surface"
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
index 587006fa3d..7b5d8ad45e 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
@@ -78,7 +78,7 @@ exports[`allows customizing Route's type via generics 1`] = `
         "bottom": 0,
         "left": 0,
         "right": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -97,7 +97,7 @@ exports[`allows customizing Route's type via generics 1`] = `
         {
           "backgroundColor": "transparent",
           "flex": undefined,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -745,7 +745,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
         "bottom": 0,
         "left": 0,
         "right": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -764,7 +764,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
         {
           "backgroundColor": "transparent",
           "flex": undefined,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -1486,7 +1486,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
         "bottom": 0,
         "left": 0,
         "right": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -1505,7 +1505,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
         {
           "backgroundColor": "transparent",
           "flex": undefined,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -2359,7 +2359,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
         "bottom": 0,
         "left": 0,
         "right": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -2378,7 +2378,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
         {
           "backgroundColor": "transparent",
           "flex": undefined,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -4088,7 +4088,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
         "bottom": 0,
         "left": 0,
         "right": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -4107,7 +4107,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
         {
           "backgroundColor": "transparent",
           "flex": undefined,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -5562,7 +5562,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
         "bottom": 0,
         "left": 0,
         "right": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -5581,7 +5581,7 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
         {
           "backgroundColor": "transparent",
           "flex": undefined,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -6264,7 +6264,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
         "bottom": 0,
         "left": 0,
         "right": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -6283,7 +6283,7 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
         {
           "backgroundColor": "transparent",
           "flex": undefined,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -7258,7 +7258,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
         "bottom": 0,
         "left": 0,
         "right": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -7277,7 +7277,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
         {
           "backgroundColor": "transparent",
           "flex": undefined,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -8359,7 +8359,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
         "bottom": 0,
         "left": 0,
         "right": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -8378,7 +8378,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
         {
           "backgroundColor": "transparent",
           "flex": undefined,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -9307,7 +9307,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
         "bottom": 0,
         "left": 0,
         "right": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -9326,7 +9326,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
         {
           "backgroundColor": "transparent",
           "flex": undefined,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -10408,7 +10408,7 @@ exports[`renders shifting bottom navigation 1`] = `
         "bottom": 0,
         "left": 0,
         "right": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -10427,7 +10427,7 @@ exports[`renders shifting bottom navigation 1`] = `
         {
           "backgroundColor": "transparent",
           "flex": undefined,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
index 6c34864a74..992205a103 100644
--- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`renders button with an accessibility hint 1`] = `
     {
       "backgroundColor": "transparent",
       "borderRadius": 20,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -29,7 +29,7 @@ exports[`renders button with an accessibility hint 1`] = `
         "borderWidth": 0,
         "flex": undefined,
         "minWidth": 64,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -160,7 +160,7 @@ exports[`renders button with an accessibility label 1`] = `
     {
       "backgroundColor": "transparent",
       "borderRadius": 20,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -182,7 +182,7 @@ exports[`renders button with an accessibility label 1`] = `
         "borderWidth": 0,
         "flex": undefined,
         "minWidth": 64,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -313,7 +313,7 @@ exports[`renders button with button color 1`] = `
     {
       "backgroundColor": "#e91e63",
       "borderRadius": 20,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -335,7 +335,7 @@ exports[`renders button with button color 1`] = `
         "borderWidth": 0,
         "flex": undefined,
         "minWidth": 64,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -465,7 +465,7 @@ exports[`renders button with color 1`] = `
     {
       "backgroundColor": "transparent",
       "borderRadius": 20,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -487,7 +487,7 @@ exports[`renders button with color 1`] = `
         "borderWidth": 0,
         "flex": undefined,
         "minWidth": 64,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -617,7 +617,7 @@ exports[`renders button with custom testID 1`] = `
     {
       "backgroundColor": "transparent",
       "borderRadius": 20,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -639,7 +639,7 @@ exports[`renders button with custom testID 1`] = `
         "borderWidth": 0,
         "flex": undefined,
         "minWidth": 64,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -769,7 +769,7 @@ exports[`renders button with icon 1`] = `
     {
       "backgroundColor": "transparent",
       "borderRadius": 20,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -791,7 +791,7 @@ exports[`renders button with icon 1`] = `
         "borderWidth": 0,
         "flex": undefined,
         "minWidth": 64,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -970,7 +970,7 @@ exports[`renders button with icon in reverse order 1`] = `
     {
       "backgroundColor": "transparent",
       "borderRadius": 20,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -992,7 +992,7 @@ exports[`renders button with icon in reverse order 1`] = `
         "borderWidth": 0,
         "flex": undefined,
         "minWidth": 64,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -1173,7 +1173,7 @@ exports[`renders contained contained with mode 1`] = `
     {
       "backgroundColor": "rgba(103, 80, 164, 1)",
       "borderRadius": 20,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -1195,7 +1195,7 @@ exports[`renders contained contained with mode 1`] = `
         "borderWidth": 0,
         "flex": undefined,
         "minWidth": 64,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -1326,7 +1326,7 @@ exports[`renders disabled button 1`] = `
     {
       "backgroundColor": "transparent",
       "borderRadius": 20,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -1348,7 +1348,7 @@ exports[`renders disabled button 1`] = `
         "borderWidth": 0,
         "flex": undefined,
         "minWidth": 64,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -1478,7 +1478,7 @@ exports[`renders loading button 1`] = `
     {
       "backgroundColor": "transparent",
       "borderRadius": 20,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -1500,7 +1500,7 @@ exports[`renders loading button 1`] = `
         "borderWidth": 0,
         "flex": undefined,
         "minWidth": 64,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -1838,7 +1838,7 @@ exports[`renders outlined button with mode 1`] = `
     {
       "backgroundColor": "transparent",
       "borderRadius": 20,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -1860,7 +1860,7 @@ exports[`renders outlined button with mode 1`] = `
         "borderWidth": 1,
         "flex": undefined,
         "minWidth": 64,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -1991,7 +1991,7 @@ exports[`renders text button by default 1`] = `
     {
       "backgroundColor": "transparent",
       "borderRadius": 20,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -2013,7 +2013,7 @@ exports[`renders text button by default 1`] = `
         "borderWidth": 0,
         "flex": undefined,
         "minWidth": 64,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -2143,7 +2143,7 @@ exports[`renders text button with mode 1`] = `
     {
       "backgroundColor": "transparent",
       "borderRadius": 20,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -2165,7 +2165,7 @@ exports[`renders text button with mode 1`] = `
         "borderWidth": 0,
         "flex": undefined,
         "minWidth": 64,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
index 4c6358aa1d..736f79b6fe 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`renders chip with close button 1`] = `
     {
       "backgroundColor": "rgba(232, 222, 248, 1)",
       "borderRadius": 8,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -29,7 +29,7 @@ exports[`renders chip with close button 1`] = `
         "borderWidth": 1,
         "flex": undefined,
         "flexDirection": "column",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -305,7 +305,7 @@ exports[`renders chip with custom close button 1`] = `
     {
       "backgroundColor": "rgba(232, 222, 248, 1)",
       "borderRadius": 8,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -327,7 +327,7 @@ exports[`renders chip with custom close button 1`] = `
         "borderWidth": 1,
         "flex": undefined,
         "flexDirection": "column",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -603,7 +603,7 @@ exports[`renders chip with icon 1`] = `
     {
       "backgroundColor": "rgba(232, 222, 248, 1)",
       "borderRadius": 8,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -625,7 +625,7 @@ exports[`renders chip with icon 1`] = `
         "borderWidth": 1,
         "flex": undefined,
         "flexDirection": "column",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -808,7 +808,7 @@ exports[`renders chip with onPress 1`] = `
     {
       "backgroundColor": "rgba(232, 222, 248, 1)",
       "borderRadius": 8,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -830,7 +830,7 @@ exports[`renders chip with onPress 1`] = `
         "borderWidth": 1,
         "flex": undefined,
         "flexDirection": "column",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -968,7 +968,7 @@ exports[`renders outlined disabled chip 1`] = `
     {
       "backgroundColor": "transparent",
       "borderRadius": 8,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -990,7 +990,7 @@ exports[`renders outlined disabled chip 1`] = `
         "borderWidth": 1,
         "flex": undefined,
         "flexDirection": "column",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -1128,7 +1128,7 @@ exports[`renders selected chip 1`] = `
     {
       "backgroundColor": "rgba(232, 222, 248, 1)",
       "borderRadius": 8,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -1150,7 +1150,7 @@ exports[`renders selected chip 1`] = `
         "borderWidth": 1,
         "flex": undefined,
         "flexDirection": "column",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
index f6071c245c..0f997739ba 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -387,7 +387,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -410,7 +410,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -529,7 +529,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -552,7 +552,7 @@ exports[`DataTable.Pagination renders data table pagination 1`] = `
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -729,7 +729,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -752,7 +752,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -871,7 +871,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -894,7 +894,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -1013,7 +1013,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -1036,7 +1036,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -1155,7 +1155,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -1178,7 +1178,7 @@ exports[`DataTable.Pagination renders data table pagination with fast-forward bu
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -1355,7 +1355,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -1378,7 +1378,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -1497,7 +1497,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -1520,7 +1520,7 @@ exports[`DataTable.Pagination renders data table pagination with label 1`] = `
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -1702,7 +1702,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             "backgroundColor": "transparent",
             "borderRadius": 20,
             "marginRight": 16,
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -1724,7 +1724,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
               "borderWidth": 1,
               "flex": undefined,
               "minWidth": 64,
-              "shadowColor": "#000",
+              "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
                 "width": 0,
@@ -1943,7 +1943,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -1966,7 +1966,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -2085,7 +2085,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -2108,7 +2108,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -2227,7 +2227,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -2250,7 +2250,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -2369,7 +2369,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -2392,7 +2392,7 @@ exports[`DataTable.Pagination renders data table pagination with options select
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
diff --git a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
index 7dbef02469..386ce68373 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`renders FAB with custom size prop 1`] = `
       "backgroundColor": "rgba(234, 221, 255, 1)",
       "borderRadius": 25,
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -32,7 +32,7 @@ exports[`renders FAB with custom size prop 1`] = `
         "backgroundColor": "rgba(234, 221, 255, 1)",
         "borderRadius": 25,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
@@ -182,7 +182,7 @@ exports[`renders custom color for the icon and label of the FAB 1`] = `
       "backgroundColor": "rgba(234, 221, 255, 1)",
       "borderRadius": 16,
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -206,7 +206,7 @@ exports[`renders custom color for the icon and label of the FAB 1`] = `
         "backgroundColor": "rgba(234, 221, 255, 1)",
         "borderRadius": 16,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
@@ -356,7 +356,7 @@ exports[`renders default FAB 1`] = `
       "backgroundColor": "rgba(234, 221, 255, 1)",
       "borderRadius": 16,
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -380,7 +380,7 @@ exports[`renders default FAB 1`] = `
         "backgroundColor": "rgba(234, 221, 255, 1)",
         "borderRadius": 16,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
@@ -530,7 +530,7 @@ exports[`renders extended FAB 1`] = `
       "backgroundColor": "rgba(234, 221, 255, 1)",
       "borderRadius": 16,
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -554,7 +554,7 @@ exports[`renders extended FAB 1`] = `
         "backgroundColor": "rgba(234, 221, 255, 1)",
         "borderRadius": 16,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
@@ -745,7 +745,7 @@ exports[`renders extended FAB with custom size prop 1`] = `
       "backgroundColor": "rgba(234, 221, 255, 1)",
       "borderRadius": 25,
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -769,7 +769,7 @@ exports[`renders extended FAB with custom size prop 1`] = `
         "backgroundColor": "rgba(234, 221, 255, 1)",
         "borderRadius": 25,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
@@ -959,7 +959,7 @@ exports[`renders large FAB 1`] = `
       "backgroundColor": "rgba(234, 221, 255, 1)",
       "borderRadius": 28,
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -983,7 +983,7 @@ exports[`renders large FAB 1`] = `
         "backgroundColor": "rgba(234, 221, 255, 1)",
         "borderRadius": 28,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
@@ -1133,7 +1133,7 @@ exports[`renders loading FAB 1`] = `
       "backgroundColor": "rgba(234, 221, 255, 1)",
       "borderRadius": 16,
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -1157,7 +1157,7 @@ exports[`renders loading FAB 1`] = `
         "backgroundColor": "rgba(234, 221, 255, 1)",
         "borderRadius": 16,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
@@ -1438,7 +1438,7 @@ exports[`renders loading FAB with custom size prop 1`] = `
       "backgroundColor": "rgba(234, 221, 255, 1)",
       "borderRadius": 25,
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -1462,7 +1462,7 @@ exports[`renders loading FAB with custom size prop 1`] = `
         "backgroundColor": "rgba(234, 221, 255, 1)",
         "borderRadius": 25,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
@@ -1743,7 +1743,7 @@ exports[`renders not visible FAB 1`] = `
       "backgroundColor": "rgba(234, 221, 255, 1)",
       "borderRadius": 16,
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -1767,7 +1767,7 @@ exports[`renders not visible FAB 1`] = `
         "backgroundColor": "rgba(234, 221, 255, 1)",
         "borderRadius": 16,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
@@ -1917,7 +1917,7 @@ exports[`renders small FAB 1`] = `
       "backgroundColor": "rgba(234, 221, 255, 1)",
       "borderRadius": 12,
       "opacity": 1,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -1941,7 +1941,7 @@ exports[`renders small FAB 1`] = `
         "backgroundColor": "rgba(234, 221, 255, 1)",
         "borderRadius": 12,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
@@ -2091,7 +2091,7 @@ exports[`renders visible FAB 1`] = `
       "backgroundColor": "rgba(234, 221, 255, 1)",
       "borderRadius": 16,
       "opacity": 0,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 4,
         "width": 0,
@@ -2115,7 +2115,7 @@ exports[`renders visible FAB 1`] = `
         "backgroundColor": "rgba(234, 221, 255, 1)",
         "borderRadius": 16,
         "flex": undefined,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 1,
           "width": 0,
diff --git a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
index 2836d107fd..d80a56d27c 100644
--- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`renders disabled icon button 1`] = `
       "borderRadius": 20,
       "height": 40,
       "margin": 6,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -32,7 +32,7 @@ exports[`renders disabled icon button 1`] = `
         "elevation": 0,
         "flex": 1,
         "overflow": "hidden",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -158,7 +158,7 @@ exports[`renders icon button by default 1`] = `
       "borderRadius": 20,
       "height": 40,
       "margin": 6,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -181,7 +181,7 @@ exports[`renders icon button by default 1`] = `
         "elevation": 0,
         "flex": 1,
         "overflow": "hidden",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -302,7 +302,7 @@ exports[`renders icon button with color 1`] = `
       "borderRadius": 20,
       "height": 40,
       "margin": 6,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -325,7 +325,7 @@ exports[`renders icon button with color 1`] = `
         "elevation": 0,
         "flex": 1,
         "overflow": "hidden",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -446,7 +446,7 @@ exports[`renders icon button with size 1`] = `
       "borderRadius": 23,
       "height": 46,
       "margin": 6,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -469,7 +469,7 @@ exports[`renders icon button with size 1`] = `
         "elevation": 0,
         "flex": 1,
         "overflow": "hidden",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -590,7 +590,7 @@ exports[`renders icon change animated 1`] = `
       "borderRadius": 20,
       "height": 40,
       "margin": 6,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -613,7 +613,7 @@ exports[`renders icon change animated 1`] = `
         "elevation": 0,
         "flex": 1,
         "overflow": "hidden",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
index d194b59877..f0dae5994d 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -123,7 +123,7 @@ exports[`renders list item with custom description 1`] = `
               {
                 "backgroundColor": "rgba(232, 222, 248, 1)",
                 "borderRadius": 8,
-                "shadowColor": "#000",
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
                   "width": 0,
@@ -145,7 +145,7 @@ exports[`renders list item with custom description 1`] = `
                   "borderWidth": 1,
                   "flex": undefined,
                   "flexDirection": "column",
-                  "shadowColor": "#000",
+                  "shadowColor": "rgba(0, 0, 0, 1)",
                   "shadowOffset": {
                     "height": 0,
                     "width": 0,
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
index 66123507e2..8df341420d 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
@@ -75,6 +75,14 @@ exports[`renders list section with custom title style 1`] = `
         "tertiaryFixedDim": "rgba(239, 184, 200, 1)",
       },
       "dark": false,
+      "elevation": {
+        "level0": 0,
+        "level1": 1,
+        "level2": 2,
+        "level3": 3,
+        "level4": 4,
+        "level5": 5,
+      },
       "fonts": {
         "bodyLarge": {
           "fontFamily": "System",
@@ -858,6 +866,14 @@ exports[`renders list section with subheader 1`] = `
         "tertiaryFixedDim": "rgba(239, 184, 200, 1)",
       },
       "dark": false,
+      "elevation": {
+        "level0": 0,
+        "level1": 1,
+        "level2": 2,
+        "level3": 3,
+        "level4": 4,
+        "level5": 5,
+      },
       "fonts": {
         "bodyLarge": {
           "fontFamily": "System",
@@ -1639,6 +1655,14 @@ exports[`renders list section without subheader 1`] = `
         "tertiaryFixedDim": "rgba(239, 184, 200, 1)",
       },
       "dark": false,
+      "elevation": {
+        "level0": 0,
+        "level1": 1,
+        "level2": 2,
+        "level3": 3,
+        "level4": 4,
+        "level5": 5,
+      },
       "fonts": {
         "bodyLarge": {
           "fontFamily": "System",
diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
index 9d426f228c..ee711c93f8 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`renders menu with content styles 1`] = `
           {
             "backgroundColor": "transparent",
             "borderRadius": 20,
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -42,7 +42,7 @@ exports[`renders menu with content styles 1`] = `
               "borderWidth": 1,
               "flex": undefined,
               "minWidth": 64,
-              "shadowColor": "#000",
+              "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
                 "width": 0,
@@ -267,7 +267,7 @@ exports[`renders menu with content styles 1`] = `
               "borderTopLeftRadius": 0,
               "borderTopRightRadius": 0,
               "opacity": 0,
-              "shadowColor": "#000",
+              "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 2,
                 "width": 0,
@@ -297,7 +297,7 @@ exports[`renders menu with content styles 1`] = `
                 "borderTopRightRadius": 0,
                 "flex": undefined,
                 "paddingVertical": 8,
-                "shadowColor": "#000",
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 1,
                   "width": 0,
@@ -583,7 +583,7 @@ exports[`renders not visible menu 1`] = `
         {
           "backgroundColor": "transparent",
           "borderRadius": 20,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -605,7 +605,7 @@ exports[`renders not visible menu 1`] = `
             "borderWidth": 1,
             "flex": undefined,
             "minWidth": 64,
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -751,7 +751,7 @@ exports[`renders visible menu 1`] = `
           {
             "backgroundColor": "transparent",
             "borderRadius": 20,
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -773,7 +773,7 @@ exports[`renders visible menu 1`] = `
               "borderWidth": 1,
               "flex": undefined,
               "minWidth": 64,
-              "shadowColor": "#000",
+              "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
                 "width": 0,
@@ -996,7 +996,7 @@ exports[`renders visible menu 1`] = `
               "backgroundColor": "rgba(243, 237, 247, 1)",
               "borderRadius": 4,
               "opacity": 0,
-              "shadowColor": "#000",
+              "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 2,
                 "width": 0,
@@ -1024,7 +1024,7 @@ exports[`renders visible menu 1`] = `
                 "borderRadius": 4,
                 "flex": undefined,
                 "paddingVertical": 8,
-                "shadowColor": "#000",
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 1,
                   "width": 0,
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
index 278bd963a4..9222d34725 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`activity indicator snapshot test 1`] = `
     {
       "backgroundColor": "rgba(236, 230, 240, 1)",
       "borderRadius": 28,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -27,7 +27,7 @@ exports[`activity indicator snapshot test 1`] = `
         "borderRadius": 28,
         "flex": undefined,
         "flexDirection": "row",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -46,7 +46,7 @@ exports[`activity indicator snapshot test 1`] = `
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -69,7 +69,7 @@ exports[`activity indicator snapshot test 1`] = `
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -425,7 +425,7 @@ exports[`renders with placeholder 1`] = `
     {
       "backgroundColor": "rgba(236, 230, 240, 1)",
       "borderRadius": 28,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -445,7 +445,7 @@ exports[`renders with placeholder 1`] = `
         "borderRadius": 28,
         "flex": undefined,
         "flexDirection": "row",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -464,7 +464,7 @@ exports[`renders with placeholder 1`] = `
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -487,7 +487,7 @@ exports[`renders with placeholder 1`] = `
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -656,7 +656,7 @@ exports[`renders with placeholder 1`] = `
             "borderRadius": 20,
             "height": 40,
             "margin": 6,
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -679,7 +679,7 @@ exports[`renders with placeholder 1`] = `
               "elevation": 0,
               "flex": 1,
               "overflow": "hidden",
-              "shadowColor": "#000",
+              "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
                 "width": 0,
@@ -802,7 +802,7 @@ exports[`renders with text 1`] = `
     {
       "backgroundColor": "rgba(236, 230, 240, 1)",
       "borderRadius": 28,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -822,7 +822,7 @@ exports[`renders with text 1`] = `
         "borderRadius": 28,
         "flex": undefined,
         "flexDirection": "row",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -841,7 +841,7 @@ exports[`renders with text 1`] = `
           "borderRadius": 20,
           "height": 40,
           "margin": 6,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -864,7 +864,7 @@ exports[`renders with text 1`] = `
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -1029,7 +1029,7 @@ exports[`renders with text 1`] = `
             "borderRadius": 20,
             "height": 40,
             "margin": 6,
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -1052,7 +1052,7 @@ exports[`renders with text 1`] = `
               "elevation": 0,
               "flex": 1,
               "overflow": "hidden",
-              "shadowColor": "#000",
+              "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
                 "width": 0,
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
index ce2a9c8637..bc4642cc3f 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`renders snackbar with Text as a child 1`] = `
         "borderRadius": 4,
         "margin": 8,
         "opacity": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -56,7 +56,7 @@ exports[`renders snackbar with Text as a child 1`] = `
           "flexDirection": "row",
           "justifyContent": "space-between",
           "minHeight": 48,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 1,
             "width": 0,
@@ -116,7 +116,7 @@ exports[`renders snackbar with View & Text as a child 1`] = `
         "borderRadius": 4,
         "margin": 8,
         "opacity": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -144,7 +144,7 @@ exports[`renders snackbar with View & Text as a child 1`] = `
           "flexDirection": "row",
           "justifyContent": "space-between",
           "minHeight": 48,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 1,
             "width": 0,
@@ -230,7 +230,7 @@ exports[`renders snackbar with action button 1`] = `
         "borderRadius": 4,
         "margin": 8,
         "opacity": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -258,7 +258,7 @@ exports[`renders snackbar with action button 1`] = `
           "flexDirection": "row",
           "justifyContent": "space-between",
           "minHeight": 48,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 1,
             "width": 0,
@@ -326,7 +326,7 @@ exports[`renders snackbar with action button 1`] = `
               "borderRadius": 20,
               "marginLeft": 4,
               "marginRight": 8,
-              "shadowColor": "#000",
+              "shadowColor": "rgba(0, 0, 0, 1)",
               "shadowOffset": {
                 "height": 0,
                 "width": 0,
@@ -348,7 +348,7 @@ exports[`renders snackbar with action button 1`] = `
                 "borderWidth": 0,
                 "flex": undefined,
                 "minWidth": 64,
-                "shadowColor": "#000",
+                "shadowColor": "rgba(0, 0, 0, 1)",
                 "shadowOffset": {
                   "height": 0,
                   "width": 0,
@@ -501,7 +501,7 @@ exports[`renders snackbar with content 1`] = `
         "borderRadius": 4,
         "margin": 8,
         "opacity": 0,
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -529,7 +529,7 @@ exports[`renders snackbar with content 1`] = `
           "flexDirection": "row",
           "justifyContent": "space-between",
           "minHeight": 48,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 1,
             "width": 0,
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
index dbe10b45cc..facd344c1e 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -2039,7 +2039,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
           "borderRadius": 20,
           "height": 40,
           "margin": 0,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -2062,7 +2062,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
@@ -2435,7 +2435,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
           "borderRadius": 20,
           "height": 40,
           "margin": 0,
-          "shadowColor": "#000",
+          "shadowColor": "rgba(0, 0, 0, 1)",
           "shadowOffset": {
             "height": 0,
             "width": 0,
@@ -2458,7 +2458,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "elevation": 0,
             "flex": 1,
             "overflow": "hidden",
-            "shadowColor": "#000",
+            "shadowColor": "rgba(0, 0, 0, 1)",
             "shadowOffset": {
               "height": 0,
               "width": 0,
diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
index a8feb453e3..28e6269c7b 100644
--- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`renders disabled toggle button 1`] = `
       "borderRadius": 4,
       "height": 42,
       "margin": 0,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -32,7 +32,7 @@ exports[`renders disabled toggle button 1`] = `
         "elevation": 0,
         "flex": 1,
         "overflow": "hidden",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -156,7 +156,7 @@ exports[`renders toggle button 1`] = `
       "borderRadius": 4,
       "height": 42,
       "margin": 0,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -179,7 +179,7 @@ exports[`renders toggle button 1`] = `
         "elevation": 0,
         "flex": 1,
         "overflow": "hidden",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
@@ -298,7 +298,7 @@ exports[`renders unchecked toggle button 1`] = `
       "borderRadius": 4,
       "height": 42,
       "margin": 0,
-      "shadowColor": "#000",
+      "shadowColor": "rgba(0, 0, 0, 1)",
       "shadowOffset": {
         "height": 0,
         "width": 0,
@@ -321,7 +321,7 @@ exports[`renders unchecked toggle button 1`] = `
         "elevation": 0,
         "flex": 1,
         "overflow": "hidden",
-        "shadowColor": "#000",
+        "shadowColor": "rgba(0, 0, 0, 1)",
         "shadowOffset": {
           "height": 0,
           "width": 0,
diff --git a/src/theme/schemes/base.ts b/src/theme/schemes/base.ts
index 47d5e20c8e..c3737fecdf 100644
--- a/src/theme/schemes/base.ts
+++ b/src/theme/schemes/base.ts
@@ -1,3 +1,4 @@
+import { defaultElevation } from '../tokens/sys/elevation';
 import { expressiveMotion } from '../tokens/sys/motion';
 import { defaultShapes } from '../tokens/sys/shape';
 import { defaultState } from '../tokens/sys/state';
@@ -15,4 +16,5 @@ export const themeDefaults: ThemeDefaults = {
   state: defaultState,
   shapes: defaultShapes,
   motion: expressiveMotion,
+  elevation: defaultElevation,
 };
diff --git a/src/theme/shadow.tsx b/src/theme/shadow.tsx
index 58070cede8..dd1fe96078 100644
--- a/src/theme/shadow.tsx
+++ b/src/theme/shadow.tsx
@@ -1,44 +1,10 @@
-import { Animated } from 'react-native';
-
 import { Palette } from './tokens';
-
-const SHADOW_OPACITY = 0.3;
-const SHADOW_COLOR = Palette.primary0;
-
-export default function shadow(elevation: number | Animated.Value = 0) {
-  const inputRange = [0, 1, 2, 3, 4, 5];
-  const shadowHeight = [0, 1, 2, 4, 6, 8];
-  const shadowRadius = [0, 3, 6, 8, 10, 12];
-
-  if (elevation instanceof Animated.Value) {
-    return {
-      shadowColor: SHADOW_COLOR,
-      shadowOffset: {
-        width: new Animated.Value(0),
-        height: elevation.interpolate({
-          inputRange,
-          outputRange: shadowHeight,
-        }),
-      },
-      shadowOpacity: elevation.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, SHADOW_OPACITY],
-        extrapolate: 'clamp',
-      }),
-      shadowRadius: elevation.interpolate({
-        inputRange,
-        outputRange: shadowRadius,
-      }),
-    };
-  } else {
-    return {
-      shadowColor: SHADOW_COLOR,
-      shadowOpacity: elevation ? SHADOW_OPACITY : 0,
-      shadowOffset: {
-        width: 0,
-        height: shadowHeight[elevation],
-      },
-      shadowRadius: shadowRadius[elevation],
-    };
-  }
+import { shadow as _shadow } from './tokens/sys/elevation';
+
+/**
+ * @deprecated Pass `theme.colors.shadow` as the second argument and import
+ * `shadow` from `react-native-paper/theme/tokens/sys/elevation`. Will be removed in a future version.
+ */
+export default function shadow(elevation: Parameters<typeof _shadow>[0]) {
+  return _shadow(elevation, Palette.primary0);
 }
diff --git a/src/theme/tokens/sys/elevation.ts b/src/theme/tokens/sys/elevation.ts
new file mode 100644
index 0000000000..bc7fc160f4
--- /dev/null
+++ b/src/theme/tokens/sys/elevation.ts
@@ -0,0 +1,69 @@
+// M3 elevation tokens and shadow builder per spec:
+// https://m3.material.io/styles/elevation/tokens
+
+import { Animated } from 'react-native';
+
+import type { ThemeElevation } from '../../types';
+
+export const defaultElevation: ThemeElevation = {
+  level0: 0,
+  level1: 1,
+  level2: 2,
+  level3: 3,
+  level4: 4,
+  level5: 5,
+};
+
+export const elevationInputRange = [0, 1, 2, 3, 4, 5] as const;
+
+export const androidElevationLevels = [0, 1, 3, 6, 8, 12] as const;
+
+export const shadowLayers = [
+  {
+    shadowOpacity: 0.15,
+    height: [0, 1, 2, 4, 6, 8],
+    shadowRadius: [0, 3, 6, 8, 10, 12],
+  },
+  {
+    shadowOpacity: 0.3,
+    height: [0, 1, 1, 1, 2, 4],
+    shadowRadius: [0, 2, 2, 3, 3, 4],
+  },
+] as const;
+
+export function shadow(
+  elevation: number | Animated.Value = 0,
+  shadowColor: string
+) {
+  if (elevation instanceof Animated.Value) {
+    return {
+      shadowColor,
+      shadowOffset: {
+        width: new Animated.Value(0),
+        height: elevation.interpolate({
+          inputRange: [...elevationInputRange],
+          outputRange: [...shadowLayers[0].height],
+        }),
+      },
+      shadowOpacity: elevation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 0.3],
+        extrapolate: 'clamp',
+      }),
+      shadowRadius: elevation.interpolate({
+        inputRange: [...elevationInputRange],
+        outputRange: [...shadowLayers[0].shadowRadius],
+      }),
+    };
+  }
+
+  return {
+    shadowColor,
+    shadowOpacity: elevation ? 0.3 : 0,
+    shadowOffset: {
+      width: 0,
+      height: shadowLayers[0].height[elevation],
+    },
+    shadowRadius: shadowLayers[0].shadowRadius[elevation],
+  };
+}
diff --git a/src/theme/types/elevation.ts b/src/theme/types/elevation.ts
index 9267a6c81b..1589fd8962 100644
--- a/src/theme/types/elevation.ts
+++ b/src/theme/types/elevation.ts
@@ -1,14 +1,13 @@
 export type Elevation = 0 | 1 | 2 | 3 | 4 | 5;
 
-export enum ElevationLevels {
-  'level0',
-  'level1',
-  'level2',
-  'level3',
-  'level4',
-  'level5',
-}
+export type ElevationLevel =
+  | 'level0'
+  | 'level1'
+  | 'level2'
+  | 'level3'
+  | 'level4'
+  | 'level5';
 
-export type ElevationColors = {
-  [key in keyof typeof ElevationLevels]: string;
-};
+export type ElevationColors = Record<ElevationLevel, string>;
+
+export type ThemeElevation = Record<ElevationLevel, Elevation>;
diff --git a/src/theme/types/theme.ts b/src/theme/types/theme.ts
index 0d22e3fab4..0280495369 100644
--- a/src/theme/types/theme.ts
+++ b/src/theme/types/theme.ts
@@ -1,6 +1,7 @@
 import type { $DeepPartial } from '@callstack/react-theme-provider';
 
 import type { ThemeColors } from './color';
+import type { ThemeElevation } from './elevation';
 import type { MotionConfig } from './motion';
 import type { ThemeShapes } from './shape';
 import type { ThemeState } from './state';
@@ -26,6 +27,7 @@ export type Theme = ThemeBase & {
   state: ThemeState;
   shapes: ThemeShapes;
   motion: MotionConfig;
+  elevation: ThemeElevation;
 };
 
 export type InternalTheme = Theme;