diff --git a/apps/storybook-react-native/.storybook/storybook.requires.js b/apps/storybook-react-native/.storybook/storybook.requires.js
index 3e8e33307..44f5a58dd 100644
--- a/apps/storybook-react-native/.storybook/storybook.requires.js
+++ b/apps/storybook-react-native/.storybook/storybook.requires.js
@@ -84,6 +84,7 @@ const getStories = () => {
     "./../../packages/design-system-react-native/src/components/temp-components/TextOrChildren/TextOrChildren.stories.tsx": require("../../../packages/design-system-react-native/src/components/temp-components/TextOrChildren/TextOrChildren.stories.tsx"),
     "./../../packages/design-system-react-native/src/components/Text/Text.stories.tsx": require("../../../packages/design-system-react-native/src/components/Text/Text.stories.tsx"),
     "./../../packages/design-system-react-native/src/components/TextButton/TextButton.stories.tsx": require("../../../packages/design-system-react-native/src/components/TextButton/TextButton.stories.tsx"),
+    "./stories/Backgrounds.stories.tsx": require("../stories/Backgrounds.stories.tsx"),
     "./stories/WalletHome.stories.tsx": require("../stories/WalletHome.stories.tsx"),
   };
 };
diff --git a/apps/storybook-react-native/stories/Backgrounds.stories.tsx b/apps/storybook-react-native/stories/Backgrounds.stories.tsx
new file mode 100644
index 000000000..7aeb4b5af
--- /dev/null
+++ b/apps/storybook-react-native/stories/Backgrounds.stories.tsx
@@ -0,0 +1,120 @@
+import {
+  Box,
+  BoxAlignItems,
+  BoxBackgroundColor,
+  BoxFlexDirection,
+  Icon,
+  IconColor,
+  IconName,
+  Text,
+  TextButton,
+  TextColor,
+  TextVariant,
+  Button,
+  ButtonVariant,
+} from '@metamask/design-system-react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { ScrollView } from 'react-native';
+
+const meta: Meta = {
+  title: 'Examples/Backgrounds',
+  component: () => null,
+};
+
+export default meta;
+type Story = StoryObj;
+
+const ButtonComponents = () => (
+  <Box flexDirection={BoxFlexDirection.Row} gap={2}>
+    <Button variant={ButtonVariant.Primary}>Primary Button</Button>
+    <Button variant={ButtonVariant.Secondary}>Secondary Button</Button>
+    <Button variant={ButtonVariant.Tertiary}>Tertiary Button</Button>
+    <TextButton>Text Button</TextButton>
+  </Box>
+);
+
+const TextComponents = () => (
+  <>
+    <Text variant={TextVariant.HeadingSm}>Text & Icon Colors</Text>
+    <Box twClassName="space-y-2">
+      <Box
+        flexDirection={BoxFlexDirection.Row}
+        alignItems={BoxAlignItems.Center}
+        gap={2}
+      >
+        <Icon name={IconName.Info} />
+        <Text>Text Default and Icon Default</Text>
+      </Box>
+      <Box
+        flexDirection={BoxFlexDirection.Row}
+        alignItems={BoxAlignItems.Center}
+        gap={2}
+      >
+        <Icon name={IconName.Info} color={IconColor.IconAlternative} />
+        <Text color={TextColor.TextAlternative}>
+          Text Alternative and Icon Alternative
+        </Text>
+      </Box>
+      <Box
+        flexDirection={BoxFlexDirection.Row}
+        alignItems={BoxAlignItems.Center}
+        gap={2}
+      >
+        <Icon name={IconName.Info} color={IconColor.IconMuted} />
+        <Text color={TextColor.TextMuted}>Text Muted and Icon Muted</Text>
+      </Box>
+    </Box>
+  </>
+);
+
+const Backgrounds: React.FC = () => {
+  const tw = useTailwind();
+  return (
+    <ScrollView style={tw`flex-1 bg-default`}>
+      <Box
+        twClassName="w-full"
+        backgroundColor={BoxBackgroundColor.BackgroundDefault}
+      >
+        {/* Background Default */}
+        <Box
+          flexDirection={BoxFlexDirection.Column}
+          gap={4}
+          twClassName="rounded-2xl"
+        >
+          <Text variant={TextVariant.HeadingMd}>Background Default</Text>
+          <TextComponents />
+          <ButtonComponents />
+          {/* Background Section */}
+          <Box
+            twClassName="p-4 rounded-2xl"
+            backgroundColor={BoxBackgroundColor.BackgroundSection}
+            flexDirection={BoxFlexDirection.Column}
+            gap={4}
+          >
+            <Text variant={TextVariant.HeadingMd}>Background Section</Text>
+            <TextComponents />
+            <ButtonComponents />
+
+            {/* Background Subsection */}
+            <Box
+              twClassName="p-4 rounded-2xl"
+              backgroundColor={BoxBackgroundColor.BackgroundSubsection}
+              flexDirection={BoxFlexDirection.Column}
+              gap={4}
+            >
+              <Text variant={TextVariant.HeadingMd}>Background Subsection</Text>
+              <TextComponents />
+              <ButtonComponents />
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </ScrollView>
+  );
+};
+
+export const Default: Story = {
+  render: () => <Backgrounds />,
+};
diff --git a/apps/storybook-react/stories/Backgrounds.stories.tsx b/apps/storybook-react/stories/Backgrounds.stories.tsx
new file mode 100644
index 000000000..4433c4e6e
--- /dev/null
+++ b/apps/storybook-react/stories/Backgrounds.stories.tsx
@@ -0,0 +1,114 @@
+import {
+  Box,
+  BoxAlignItems,
+  BoxBackgroundColor,
+  BoxFlexDirection,
+  Icon,
+  IconColor,
+  IconName,
+  Text,
+  TextColor,
+  TextVariant,
+  Button,
+  ButtonVariant,
+  TextButton,
+} from '@metamask/design-system-react';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+const meta: Meta = {
+  title: 'Examples/Backgrounds',
+  component: () => null,
+};
+
+export default meta;
+type Story = StoryObj;
+
+const ButtonComponents = () => (
+  <Box flexDirection={BoxFlexDirection.Row} gap={2}>
+    <Button variant={ButtonVariant.Primary}>Primary Button</Button>
+    <Button variant={ButtonVariant.Secondary}>Secondary Button</Button>
+    <Button variant={ButtonVariant.Tertiary}>Tertiary Button</Button>
+    <TextButton>Text Button</TextButton>
+  </Box>
+);
+
+const TextComponents = () => (
+  <>
+    <Text variant={TextVariant.HeadingSm}>Text & Icon Colors</Text>
+    <Box className="space-y-2">
+      <Box
+        flexDirection={BoxFlexDirection.Row}
+        alignItems={BoxAlignItems.Center}
+        gap={2}
+      >
+        <Icon name={IconName.Info} />
+        <Text>Text Default and Icon Default</Text>
+      </Box>
+      <Box
+        flexDirection={BoxFlexDirection.Row}
+        alignItems={BoxAlignItems.Center}
+        gap={2}
+      >
+        <Icon name={IconName.Info} color={IconColor.IconAlternative} />
+        <Text color={TextColor.TextAlternative}>
+          Text Alternative and Icon Alternative
+        </Text>
+      </Box>
+      <Box
+        flexDirection={BoxFlexDirection.Row}
+        alignItems={BoxAlignItems.Center}
+        gap={2}
+      >
+        <Icon name={IconName.Info} color={IconColor.IconMuted} />
+        <Text color={TextColor.TextMuted}>Text Muted and Icon Muted</Text>
+      </Box>
+    </Box>
+  </>
+);
+
+const Backgrounds: React.FC = () => {
+  return (
+    <Box backgroundColor={BoxBackgroundColor.BackgroundDefault}>
+      {/* Background Default */}
+      <Box
+        flexDirection={BoxFlexDirection.Column}
+        gap={4}
+        className="rounded-2xl"
+      >
+        <Text variant={TextVariant.HeadingMd}>Background Default</Text>
+        <TextComponents />
+        <ButtonComponents />
+
+        {/* Background Section */}
+        <Box
+          backgroundColor={BoxBackgroundColor.BackgroundSection}
+          padding={4}
+          flexDirection={BoxFlexDirection.Column}
+          gap={4}
+          className="rounded-2xl"
+        >
+          <Text variant={TextVariant.HeadingMd}>Background Section</Text>
+          <TextComponents />
+          <ButtonComponents />
+          {/* Background Subsection */}
+          <Box
+            backgroundColor={BoxBackgroundColor.BackgroundSubsection}
+            padding={4}
+            flexDirection={BoxFlexDirection.Column}
+            gap={4}
+            className="rounded-2xl"
+          >
+            <Text variant={TextVariant.HeadingMd}>Background Subsection</Text>
+            <TextComponents />
+            <ButtonComponents />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const Default: Story = {
+  render: () => <Backgrounds />,
+};