diff --git a/packages/design-system-react-native/src/components/BannerAlert/BannerAlert.constants.ts b/packages/design-system-react-native/src/components/BannerAlert/BannerAlert.constants.ts
index bcb9e91f3..012a8f31b 100644
--- a/packages/design-system-react-native/src/components/BannerAlert/BannerAlert.constants.ts
+++ b/packages/design-system-react-native/src/components/BannerAlert/BannerAlert.constants.ts
@@ -1,11 +1,10 @@
-import { BannerAlertSeverity } from '@metamask/design-system-shared';
-
 import {
+  BannerAlertSeverity,
   BoxBackgroundColor,
   BoxBorderColor,
-  IconColor,
-  IconName,
-} from '../../types';
+} from '@metamask/design-system-shared';
+
+import { IconColor, IconName } from '../../types';
 
 export const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<
   (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],
diff --git a/packages/design-system-react-native/src/components/BannerAlert/BannerAlert.test.tsx b/packages/design-system-react-native/src/components/BannerAlert/BannerAlert.test.tsx
index 3d5f66cbf..e6504af4f 100644
--- a/packages/design-system-react-native/src/components/BannerAlert/BannerAlert.test.tsx
+++ b/packages/design-system-react-native/src/components/BannerAlert/BannerAlert.test.tsx
@@ -1,8 +1,9 @@
+import { BoxBackgroundColor } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { render } from '@testing-library/react-native';
 import React from 'react';
 
-import { BoxBackgroundColor, IconColor, IconName } from '../../types';
+import { IconColor, IconName } from '../../types';
 import { BannerBase } from '../BannerBase';
 
 import { BannerAlert } from './BannerAlert';
diff --git a/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx
index d7a7358b1..53a72b318 100644
--- a/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx
+++ b/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx
@@ -1,13 +1,15 @@
+import {
+  BoxAlignItems,
+  BoxBackgroundColor,
+  BoxFlexDirection,
+} from '@metamask/design-system-shared';
 import React from 'react';
 import { GestureResponderEvent } from 'react-native';
 
 import {
-  BoxAlignItems,
-  BoxBackgroundColor,
   ButtonIconSize,
   ButtonSize,
   FontWeight,
-  BoxFlexDirection,
   IconName,
   TextVariant,
 } from '../../types';
diff --git a/packages/design-system-react-native/src/components/Box/Box.constants.ts b/packages/design-system-react-native/src/components/Box/Box.constants.ts
index 4b7b390d8..ac2577ad4 100644
--- a/packages/design-system-react-native/src/components/Box/Box.constants.ts
+++ b/packages/design-system-react-native/src/components/Box/Box.constants.ts
@@ -1,4 +1,7 @@
-import type { BoxSpacing, BoxBorderWidth } from '../../types';
+import type {
+  BoxSpacing,
+  BoxBorderWidth,
+} from '@metamask/design-system-shared';
 
 export const TWCLASSMAP_BOX_GAP: Record<BoxSpacing, string> = {
   0: 'gap-0',
diff --git a/packages/design-system-react-native/src/components/Box/Box.stories.tsx b/packages/design-system-react-native/src/components/Box/Box.stories.tsx
index bbf77e688..ec3bc7b0b 100644
--- a/packages/design-system-react-native/src/components/Box/Box.stories.tsx
+++ b/packages/design-system-react-native/src/components/Box/Box.stories.tsx
@@ -1,7 +1,3 @@
-import type { Meta, StoryObj } from '@storybook/react-native';
-import React from 'react';
-import { ScrollView } from 'react-native';
-
 import {
   BoxFlexDirection,
   BoxFlexWrap,
@@ -9,8 +5,12 @@ import {
   BoxJustifyContent,
   BoxBackgroundColor,
   BoxBorderColor,
-  TextColor,
-} from '../../types';
+} from '@metamask/design-system-shared';
+import type { Meta, StoryObj } from '@storybook/react-native';
+import React from 'react';
+import { ScrollView } from 'react-native';
+
+import { TextColor } from '../../types';
 import { Text } from '../Text';
 
 import { Box } from './Box';
diff --git a/packages/design-system-react-native/src/components/Box/Box.test.tsx b/packages/design-system-react-native/src/components/Box/Box.test.tsx
index 282a86c09..54088a3fb 100644
--- a/packages/design-system-react-native/src/components/Box/Box.test.tsx
+++ b/packages/design-system-react-native/src/components/Box/Box.test.tsx
@@ -1,10 +1,3 @@
-import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import { renderHook } from '@testing-library/react-hooks';
-import { render } from '@testing-library/react-native';
-import React from 'react';
-import { Text } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-
 import {
   BoxFlexDirection,
   BoxFlexWrap,
@@ -12,7 +5,13 @@ import {
   BoxJustifyContent,
   BoxBackgroundColor,
   BoxBorderColor,
-} from '../../types';
+} from '@metamask/design-system-shared';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { renderHook } from '@testing-library/react-hooks';
+import { render } from '@testing-library/react-native';
+import React from 'react';
+import { Text } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import { Box } from './Box';
 import {
diff --git a/packages/design-system-react-native/src/components/Box/Box.types.ts b/packages/design-system-react-native/src/components/Box/Box.types.ts
index 343bcfab1..bdfa03758 100644
--- a/packages/design-system-react-native/src/components/Box/Box.types.ts
+++ b/packages/design-system-react-native/src/components/Box/Box.types.ts
@@ -1,123 +1,10 @@
+import type { BoxPropsShared } from '@metamask/design-system-shared';
 import type { ViewProps } from 'react-native';
 
-import type {
-  BoxFlexDirection,
-  BoxFlexWrap,
-  BoxSpacing,
-  BoxBorderWidth,
-  BoxAlignItems,
-  BoxJustifyContent,
-  BoxBackgroundColor,
-  BoxBorderColor,
-} from '../../types';
-
-export type BoxProps = {
-  /**
-   * The flexDirection style of the component.
-   */
-  flexDirection?: BoxFlexDirection;
-  /**
-   * The flexWrap style of the component.
-   */
-  flexWrap?: BoxFlexWrap;
-  /**
-   * The gap between the component's children.
-   * Use 1-12 for a gap of 4px-48px.
-   */
-  gap?: BoxSpacing;
-  /**
-   * The alignItems style of the component.
-   */
-  alignItems?: BoxAlignItems;
-  /**
-   * The justifyContent style of the component.
-   */
-  justifyContent?: BoxJustifyContent;
-  /**
-   * The margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  margin?: BoxSpacing;
-  /**
-   * The top margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginTop?: BoxSpacing;
-  /**
-   * The right margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginRight?: BoxSpacing;
-  /**
-   * The bottom margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginBottom?: BoxSpacing;
-  /**
-   * The left margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginLeft?: BoxSpacing;
-  /**
-   * The horizontal margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginHorizontal?: BoxSpacing;
-  /**
-   * The vertical margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginVertical?: BoxSpacing;
-  /**
-   * The padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  padding?: BoxSpacing;
-  /**
-   * The top padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingTop?: BoxSpacing;
-  /**
-   * The right padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingRight?: BoxSpacing;
-  /**
-   * The bottom padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingBottom?: BoxSpacing;
-  /**
-   * The left padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingLeft?: BoxSpacing;
-  /**
-   * The horizontal padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingHorizontal?: BoxSpacing;
-  /**
-   * The vertical padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingVertical?: BoxSpacing;
-  /**
-   * The border width of the component.
-   * Use 0, 1, 2, 4, or 8 for border width of 0px, 1px, 2px, 4px, or 8px.
-   */
-  borderWidth?: BoxBorderWidth;
-  /**
-   * The border color of the component.
-   */
-  borderColor?: BoxBorderColor;
-  /**
-   * The background color of the component.
-   */
-  backgroundColor?: BoxBackgroundColor;
-  /**
-   * Optional prop to add twrnc overriding classNames.
-   */
-  twClassName?: string;
-} & ViewProps;
+export type BoxProps = BoxPropsShared &
+  ViewProps & {
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+  };
diff --git a/packages/design-system-react-native/src/components/Box/index.ts b/packages/design-system-react-native/src/components/Box/index.ts
index a79b71ab8..0cad656a6 100644
--- a/packages/design-system-react-native/src/components/Box/index.ts
+++ b/packages/design-system-react-native/src/components/Box/index.ts
@@ -5,7 +5,8 @@ export {
   BoxJustifyContent,
   BoxBackgroundColor,
   BoxBorderColor,
-} from '../../types';
-export type { BoxSpacing, BoxBorderWidth } from '../../types';
+  type BoxSpacing,
+  type BoxBorderWidth,
+} from '@metamask/design-system-shared';
 export { Box } from './Box';
 export type { BoxProps } from './Box.types';
diff --git a/packages/design-system-react-native/src/components/BoxHorizontal/BoxHorizontal.tsx b/packages/design-system-react-native/src/components/BoxHorizontal/BoxHorizontal.tsx
index 55c53ea2e..f8eca58a1 100644
--- a/packages/design-system-react-native/src/components/BoxHorizontal/BoxHorizontal.tsx
+++ b/packages/design-system-react-native/src/components/BoxHorizontal/BoxHorizontal.tsx
@@ -1,6 +1,9 @@
+import {
+  BoxAlignItems,
+  BoxFlexDirection,
+} from '@metamask/design-system-shared';
 import React from 'react';
 
-import { BoxAlignItems, BoxFlexDirection } from '../../types';
 import { Box } from '../Box';
 import { TextOrChildren } from '../temp-components/TextOrChildren';
 
diff --git a/packages/design-system-react-native/src/components/BoxVertical/BoxVertical.tsx b/packages/design-system-react-native/src/components/BoxVertical/BoxVertical.tsx
index 214ffdb8c..2b05c249a 100644
--- a/packages/design-system-react-native/src/components/BoxVertical/BoxVertical.tsx
+++ b/packages/design-system-react-native/src/components/BoxVertical/BoxVertical.tsx
@@ -1,6 +1,6 @@
+import { BoxFlexDirection } from '@metamask/design-system-shared';
 import React from 'react';
 
-import { BoxFlexDirection } from '../../types';
 import { Box } from '../Box';
 import { TextOrChildren } from '../temp-components/TextOrChildren';
 
diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx
index a867b767c..378d20406 100644
--- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx
+++ b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx
@@ -1,6 +1,7 @@
+import { BoxFlexDirection } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 
-import { BoxFlexDirection, ButtonBaseSize } from '../../types';
+import { ButtonBaseSize } from '../../types';
 import { Box } from '../Box';
 import { IconName } from '../Icon';
 
diff --git a/packages/design-system-react-native/src/components/Card/Card.stories.tsx b/packages/design-system-react-native/src/components/Card/Card.stories.tsx
index d0b66e639..723e231ca 100644
--- a/packages/design-system-react-native/src/components/Card/Card.stories.tsx
+++ b/packages/design-system-react-native/src/components/Card/Card.stories.tsx
@@ -1,7 +1,7 @@
+import { BoxBackgroundColor } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import React from 'react';
 
-import { BoxBackgroundColor } from '../../types';
 import { Box } from '../Box';
 import { Text } from '../Text';
 
diff --git a/packages/design-system-react-native/src/components/MainActionButton/MainActionButton.stories.tsx b/packages/design-system-react-native/src/components/MainActionButton/MainActionButton.stories.tsx
index 36df83704..7112b0cce 100644
--- a/packages/design-system-react-native/src/components/MainActionButton/MainActionButton.stories.tsx
+++ b/packages/design-system-react-native/src/components/MainActionButton/MainActionButton.stories.tsx
@@ -1,6 +1,6 @@
+import { BoxFlexDirection } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 
-import { BoxFlexDirection } from '../../types';
 import { Box } from '../Box';
 import { IconName } from '../Icon';
 
diff --git a/packages/design-system-react-native/src/components/TabEmptyState/TabEmptyState.stories.tsx b/packages/design-system-react-native/src/components/TabEmptyState/TabEmptyState.stories.tsx
index 644312a25..3ed5a3952 100644
--- a/packages/design-system-react-native/src/components/TabEmptyState/TabEmptyState.stories.tsx
+++ b/packages/design-system-react-native/src/components/TabEmptyState/TabEmptyState.stories.tsx
@@ -1,7 +1,7 @@
+import { BoxBackgroundColor } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import React from 'react';
 
-import { BoxBackgroundColor } from '../../types';
 import { Box } from '../Box';
 import { Icon, IconName, IconSize } from '../Icon';
 import { Text } from '../Text';
diff --git a/packages/design-system-react-native/src/components/temp-components/Blockies/Blockies.stories.tsx b/packages/design-system-react-native/src/components/temp-components/Blockies/Blockies.stories.tsx
index 480060b6e..546012384 100644
--- a/packages/design-system-react-native/src/components/temp-components/Blockies/Blockies.stories.tsx
+++ b/packages/design-system-react-native/src/components/temp-components/Blockies/Blockies.stories.tsx
@@ -1,14 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/react-native';
-import { ScrollView } from 'react-native';
-
 import {
-  TextVariant,
-  TextColor,
-  FontWeight,
   BoxFlexDirection,
   BoxFlexWrap,
   BoxAlignItems,
-} from '../../../types';
+} from '@metamask/design-system-shared';
+import type { Meta, StoryObj } from '@storybook/react-native';
+import { ScrollView } from 'react-native';
+
+import { TextVariant, TextColor, FontWeight } from '../../../types';
 import { Box } from '../../Box';
 import { Text } from '../../Text';
 
diff --git a/packages/design-system-react-native/src/components/temp-components/Jazzicon/Jazzicon.stories.tsx b/packages/design-system-react-native/src/components/temp-components/Jazzicon/Jazzicon.stories.tsx
index ac4161abb..194a77f30 100644
--- a/packages/design-system-react-native/src/components/temp-components/Jazzicon/Jazzicon.stories.tsx
+++ b/packages/design-system-react-native/src/components/temp-components/Jazzicon/Jazzicon.stories.tsx
@@ -1,14 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/react-native';
-import { ScrollView } from 'react-native';
-
 import {
-  TextVariant,
-  TextColor,
-  FontWeight,
   BoxFlexDirection,
   BoxFlexWrap,
   BoxAlignItems,
-} from '../../../types';
+} from '@metamask/design-system-shared';
+import type { Meta, StoryObj } from '@storybook/react-native';
+import { ScrollView } from 'react-native';
+
+import { TextVariant, TextColor, FontWeight } from '../../../types';
 import { Box } from '../../Box';
 import { Text } from '../../Text';
 
diff --git a/packages/design-system-react-native/src/components/temp-components/Maskicon/Maskicon.stories.tsx b/packages/design-system-react-native/src/components/temp-components/Maskicon/Maskicon.stories.tsx
index 4907db0e6..03cc785eb 100644
--- a/packages/design-system-react-native/src/components/temp-components/Maskicon/Maskicon.stories.tsx
+++ b/packages/design-system-react-native/src/components/temp-components/Maskicon/Maskicon.stories.tsx
@@ -1,14 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/react-native';
-import { ScrollView } from 'react-native';
-
 import {
-  TextVariant,
-  TextColor,
-  FontWeight,
   BoxFlexDirection,
   BoxFlexWrap,
   BoxAlignItems,
-} from '../../../types';
+} from '@metamask/design-system-shared';
+import type { Meta, StoryObj } from '@storybook/react-native';
+import { ScrollView } from 'react-native';
+
+import { TextVariant, TextColor, FontWeight } from '../../../types';
 import { Box } from '../../Box';
 import { Text } from '../../Text';
 
diff --git a/packages/design-system-react-native/src/types/index.ts b/packages/design-system-react-native/src/types/index.ts
index 6e936c318..f48c5552d 100644
--- a/packages/design-system-react-native/src/types/index.ts
+++ b/packages/design-system-react-native/src/types/index.ts
@@ -30,188 +30,6 @@ export enum AvatarIconSeverity {
   Warning = 'warning',
 }
 
-/**
- * Box - all spacing-related props
- */
-export type BoxSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-/**
- * Box - border width values (only valid Tailwind CSS border width utilities)
- */
-export type BoxBorderWidth = 0 | 1 | 2 | 4 | 8;
-
-/**
- * Box - flexDirection
- */
-export enum BoxFlexDirection {
-  Row = 'flex-row',
-  RowReverse = 'flex-row-reverse',
-  Column = 'flex-col',
-  ColumnReverse = 'flex-col-reverse',
-}
-
-/**
- * Box - flexWrap
- */
-export enum BoxFlexWrap {
-  NoWrap = 'flex-nowrap',
-  Wrap = 'flex-wrap',
-  WrapReverse = 'flex-wrap-reverse',
-}
-
-/**
- * Box - alignItems
- */
-export enum BoxAlignItems {
-  Start = 'items-start',
-  Center = 'items-center',
-  End = 'items-end',
-  Stretch = 'items-stretch',
-  Baseline = 'items-baseline',
-}
-
-/**
- * Box - justifyContent
- */
-export enum BoxJustifyContent {
-  Start = 'justify-start',
-  Center = 'justify-center',
-  End = 'justify-end',
-  Between = 'justify-between',
-  Around = 'justify-around',
-  Evenly = 'justify-evenly',
-}
-
-/**
- * Box - backgroundColor
- */
-export enum BoxBackgroundColor {
-  /** Default background color */
-  BackgroundDefault = 'bg-default',
-  /** Alternative background color */
-  BackgroundAlternative = 'bg-alternative',
-  /** Section background color */
-  BackgroundSection = 'bg-section',
-  /** Subsection background color */
-  BackgroundSubsection = 'bg-subsection',
-  /** Muted background color */
-  BackgroundMuted = 'bg-muted',
-  /** Primary default background color */
-  PrimaryDefault = 'bg-primary-default',
-  /** Primary alternative background color */
-  PrimaryAlternative = 'bg-primary-alternative',
-  /** Primary muted background color */
-  PrimaryMuted = 'bg-primary-muted',
-  /** Primary inverse background color */
-  PrimaryInverse = 'bg-primary-inverse',
-  /** Error default background color */
-  ErrorDefault = 'bg-error-default',
-  /** Error alternative background color */
-  ErrorAlternative = 'bg-error-alternative',
-  /** Error muted background color */
-  ErrorMuted = 'bg-error-muted',
-  /** Error inverse background color */
-  ErrorInverse = 'bg-error-inverse',
-  /** Warning default background color */
-  WarningDefault = 'bg-warning-default',
-  /** Warning alternative background color */
-  WarningAlternative = 'bg-warning-alternative',
-  /** Warning muted background color */
-  WarningMuted = 'bg-warning-muted',
-  /** Warning inverse background color */
-  WarningInverse = 'bg-warning-inverse',
-  /** Success default background color */
-  SuccessDefault = 'bg-success-default',
-  /** Success alternative background color */
-  SuccessAlternative = 'bg-success-alternative',
-  /** Success muted background color */
-  SuccessMuted = 'bg-success-muted',
-  /** Success inverse background color */
-  SuccessInverse = 'bg-success-inverse',
-  /** Info default background color */
-  InfoDefault = 'bg-info-default',
-  /** Info muted background color */
-  InfoMuted = 'bg-info-muted',
-  /** Info inverse background color */
-  InfoInverse = 'bg-info-inverse',
-  /** Flask default background color */
-  FlaskDefault = 'bg-flask-default',
-  /** Flask inverse background color */
-  FlaskInverse = 'bg-flask-inverse',
-  /** Overlay alternative background color */
-  OverlayAlternative = 'bg-overlay-alternative',
-  /** Overlay default background color */
-  OverlayDefault = 'bg-overlay-default',
-  /** Overlay inverse background color */
-  OverlayInverse = 'bg-overlay-inverse',
-  /** Transparent background color */
-  Transparent = 'bg-transparent',
-}
-
-/**
- * Box - borderColor
- */
-export enum BoxBorderColor {
-  /** Background default for cut out effect*/
-  BackgroundDefault = 'border-background-default',
-  /** Default border color */
-  BorderDefault = 'border-default',
-  /** Muted border color */
-  BorderMuted = 'border-muted',
-  /** Primary default border color */
-  PrimaryDefault = 'border-primary-default',
-  /** Primary alternative border color */
-  PrimaryAlternative = 'border-primary-alternative',
-  /** Primary muted border color */
-  PrimaryMuted = 'border-primary-muted',
-  /** Primary inverse border color */
-  PrimaryInverse = 'border-primary-inverse',
-  /** Error default border color */
-  ErrorDefault = 'border-error-default',
-  /** Error alternative border color */
-  ErrorAlternative = 'border-error-alternative',
-  /** Error muted border color */
-  ErrorMuted = 'border-error-muted',
-  /** Error inverse border color */
-  ErrorInverse = 'border-error-inverse',
-  /** Warning default border color */
-  WarningDefault = 'border-warning-default',
-  /** Warning alternative border color */
-  WarningAlternative = 'border-warning-alternative',
-  /** Warning muted border color */
-  WarningMuted = 'border-warning-muted',
-  /** Warning inverse border color */
-  WarningInverse = 'border-warning-inverse',
-  /** Success default border color */
-  SuccessDefault = 'border-success-default',
-  /** Success alternative border color */
-  SuccessAlternative = 'border-success-alternative',
-  /** Success muted border color */
-  SuccessMuted = 'border-success-muted',
-  /** Success inverse border color */
-  SuccessInverse = 'border-success-inverse',
-  /** Info default border color */
-  InfoDefault = 'border-info-default',
-  /** Info alternative border color */
-  InfoAlternative = 'border-info-alternative',
-  /** Info muted border color */
-  InfoMuted = 'border-info-muted',
-  /** Info inverse border color */
-  InfoInverse = 'border-info-inverse',
-  /** Flask default border color */
-  FlaskDefault = 'border-flask-default',
-  /** Flask inverse border color */
-  FlaskInverse = 'border-flask-inverse',
-  /** Overlay alternative border color */
-  OverlayAlternative = 'border-overlay-alternative',
-  /** Overlay default border color */
-  OverlayDefault = 'border-overlay-default',
-  /** Overlay inverse border color */
-  OverlayInverse = 'border-overlay-inverse',
-  /** Transparent border color */
-  Transparent = 'border-transparent',
-}
-
 /**
  * ButtonBase - size
  */
diff --git a/packages/design-system-react/src/components/BannerAlert/BannerAlert.constants.ts b/packages/design-system-react/src/components/BannerAlert/BannerAlert.constants.ts
index bcb9e91f3..012a8f31b 100644
--- a/packages/design-system-react/src/components/BannerAlert/BannerAlert.constants.ts
+++ b/packages/design-system-react/src/components/BannerAlert/BannerAlert.constants.ts
@@ -1,11 +1,10 @@
-import { BannerAlertSeverity } from '@metamask/design-system-shared';
-
 import {
+  BannerAlertSeverity,
   BoxBackgroundColor,
   BoxBorderColor,
-  IconColor,
-  IconName,
-} from '../../types';
+} from '@metamask/design-system-shared';
+
+import { IconColor, IconName } from '../../types';
 
 export const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<
   (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],
diff --git a/packages/design-system-react/src/components/BannerAlert/BannerAlert.test.tsx b/packages/design-system-react/src/components/BannerAlert/BannerAlert.test.tsx
index 1e2d68b34..e003e0c8a 100644
--- a/packages/design-system-react/src/components/BannerAlert/BannerAlert.test.tsx
+++ b/packages/design-system-react/src/components/BannerAlert/BannerAlert.test.tsx
@@ -1,7 +1,8 @@
+import { BoxBackgroundColor } from '@metamask/design-system-shared';
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { BoxBackgroundColor, IconColor } from '../../types';
+import { IconColor } from '../../types';
 
 import { BannerAlert } from './BannerAlert';
 
diff --git a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx
index 4a90abad5..e510d68e7 100644
--- a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx
+++ b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx
@@ -1,12 +1,14 @@
-import React, { forwardRef } from 'react';
-
 import {
   BoxAlignItems,
   BoxBackgroundColor,
+  BoxFlexDirection,
+} from '@metamask/design-system-shared';
+import React, { forwardRef } from 'react';
+
+import {
   ButtonIconSize,
   ButtonSize,
   FontWeight,
-  BoxFlexDirection,
   IconName,
   TextVariant,
 } from '../../types';
diff --git a/packages/design-system-react/src/components/Box/Box.constants.ts b/packages/design-system-react/src/components/Box/Box.constants.ts
index 4b7b390d8..ac2577ad4 100644
--- a/packages/design-system-react/src/components/Box/Box.constants.ts
+++ b/packages/design-system-react/src/components/Box/Box.constants.ts
@@ -1,4 +1,7 @@
-import type { BoxSpacing, BoxBorderWidth } from '../../types';
+import type {
+  BoxSpacing,
+  BoxBorderWidth,
+} from '@metamask/design-system-shared';
 
 export const TWCLASSMAP_BOX_GAP: Record<BoxSpacing, string> = {
   0: 'gap-0',
diff --git a/packages/design-system-react/src/components/Box/Box.stories.tsx b/packages/design-system-react/src/components/Box/Box.stories.tsx
index 0e13c8d7f..855a93df9 100644
--- a/packages/design-system-react/src/components/Box/Box.stories.tsx
+++ b/packages/design-system-react/src/components/Box/Box.stories.tsx
@@ -1,6 +1,3 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
 import {
   BoxFlexDirection,
   BoxFlexWrap,
@@ -8,8 +5,11 @@ import {
   BoxJustifyContent,
   BoxBackgroundColor,
   BoxBorderColor,
-  TextColor,
-} from '../../types';
+} from '@metamask/design-system-shared';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { TextColor } from '../../types';
 import { Text } from '../Text';
 
 import { Box } from './Box';
diff --git a/packages/design-system-react/src/components/Box/Box.test.tsx b/packages/design-system-react/src/components/Box/Box.test.tsx
index e0af3750a..4420ba742 100644
--- a/packages/design-system-react/src/components/Box/Box.test.tsx
+++ b/packages/design-system-react/src/components/Box/Box.test.tsx
@@ -1,6 +1,3 @@
-import { render, screen } from '@testing-library/react';
-import React, { createRef } from 'react';
-
 import {
   BoxAlignItems,
   BoxFlexDirection,
@@ -8,7 +5,9 @@ import {
   BoxJustifyContent,
   BoxBackgroundColor,
   BoxBorderColor,
-} from '../../types';
+} from '@metamask/design-system-shared';
+import { render, screen } from '@testing-library/react';
+import React, { createRef } from 'react';
 
 import { Box } from './Box';
 import {
diff --git a/packages/design-system-react/src/components/Box/Box.types.ts b/packages/design-system-react/src/components/Box/Box.types.ts
index 18684ff9c..3b0558265 100644
--- a/packages/design-system-react/src/components/Box/Box.types.ts
+++ b/packages/design-system-react/src/components/Box/Box.types.ts
@@ -1,130 +1,17 @@
+import type { BoxPropsShared } from '@metamask/design-system-shared';
 import type { ComponentProps } from 'react';
 
-import type {
-  BoxFlexDirection,
-  BoxFlexWrap,
-  BoxSpacing,
-  BoxBorderWidth,
-  BoxAlignItems,
-  BoxJustifyContent,
-  BoxBackgroundColor,
-  BoxBorderColor,
-} from '../../types';
-
-export type BoxProps = ComponentProps<'div'> & {
-  /**
-   * The flex-direction style of the component.
-   */
-  flexDirection?: BoxFlexDirection;
-  /**
-   * The flex-wrap style of the component.
-   */
-  flexWrap?: BoxFlexWrap;
-  /**
-   * The gap between the component's children.
-   * Use 0-12 for a gap of 0px-48px.
-   */
-  gap?: BoxSpacing;
-  /**
-   * The align-items style of the component.
-   */
-  alignItems?: BoxAlignItems;
-  /**
-   * The justify-content style of the component.
-   */
-  justifyContent?: BoxJustifyContent;
-  /**
-   * The margin of the component.
-   * Use 0-12 for margin of 0px-48px.
-   */
-  margin?: BoxSpacing;
-  /**
-   * The top margin of the component.
-   * Use 0-12 for margin of 0px-48px.
-   */
-  marginTop?: BoxSpacing;
-  /**
-   * The right margin of the component.
-   * Use 0-12 for margin of 0px-48px.
-   */
-  marginRight?: BoxSpacing;
-  /**
-   * The bottom margin of the component.
-   * Use 0-12 for margin of 0px-48px.
-   */
-  marginBottom?: BoxSpacing;
-  /**
-   * The left margin of the component.
-   * Use 0-12 for margin of 0px-48px.
-   */
-  marginLeft?: BoxSpacing;
-  /**
-   * The horizontal margin of the component.
-   * Use 0-12 for margin of 0px-48px.
-   */
-  marginHorizontal?: BoxSpacing;
-  /**
-   * The vertical margin of the component.
-   * Use 0-12 for margin of 0px-48px.
-   */
-  marginVertical?: BoxSpacing;
-  /**
-   * The padding of the component.
-   * Use 0-12 for padding of 0px-48px.
-   */
-  padding?: BoxSpacing;
-  /**
-   * The top padding of the component.
-   * Use 0-12 for padding of 0px-48px.
-   */
-  paddingTop?: BoxSpacing;
-  /**
-   * The right padding of the component.
-   * Use 0-12 for padding of 0px-48px.
-   */
-  paddingRight?: BoxSpacing;
-  /**
-   * The bottom padding of the component.
-   * Use 0-12 for padding of 0px-48px.
-   */
-  paddingBottom?: BoxSpacing;
-  /**
-   * The left padding of the component.
-   * Use 0-12 for padding of 0px-48px.
-   */
-  paddingLeft?: BoxSpacing;
-  /**
-   * The horizontal padding of the component.
-   * Use 0-12 for padding of 0px-48px.
-   */
-  paddingHorizontal?: BoxSpacing;
-  /**
-   * The vertical padding of the component.
-   * Use 0-12 for padding of 0px-48px.
-   */
-  paddingVertical?: BoxSpacing;
-  /**
-   * The border width of the component.
-   * Use 0, 1, 2, 4, or 8 for border width of 0px, 1px, 2px, 4px, or 8px.
-   */
-  borderWidth?: BoxBorderWidth;
-  /**
-   * The border color of the component.
-   */
-  borderColor?: BoxBorderColor;
-  /**
-   * The background color of the component.
-   */
-  backgroundColor?: BoxBackgroundColor;
-  /**
-   * Optional prop for additional CSS classes to be applied to the Box component.
-   */
-  className?: string;
-  /**
-   * Optional boolean that determines if the component should merge its props onto its immediate child
-   * instead of rendering a div element
-   *
-   * @default false
-   */
-  asChild?: boolean;
-};
+export type BoxProps = ComponentProps<'div'> &
+  BoxPropsShared & {
+    /**
+     * Optional prop for additional CSS classes to be applied to the Box component.
+     */
+    className?: string;
+    /**
+     * Optional boolean that determines if the component should merge its props onto its immediate child
+     * instead of rendering a div element
+     *
+     * @default false
+     */
+    asChild?: boolean;
+  };
diff --git a/packages/design-system-react/src/components/Box/index.ts b/packages/design-system-react/src/components/Box/index.ts
index 5105a0ca0..0cad656a6 100644
--- a/packages/design-system-react/src/components/Box/index.ts
+++ b/packages/design-system-react/src/components/Box/index.ts
@@ -5,7 +5,8 @@ export {
   BoxJustifyContent,
   BoxBackgroundColor,
   BoxBorderColor,
-} from '../../types';
-export type { BoxSpacing } from '../../types';
+  type BoxSpacing,
+  type BoxBorderWidth,
+} from '@metamask/design-system-shared';
 export { Box } from './Box';
 export type { BoxProps } from './Box.types';
diff --git a/packages/design-system-react/src/types/index.ts b/packages/design-system-react/src/types/index.ts
index 282da3545..cfbb4992f 100644
--- a/packages/design-system-react/src/types/index.ts
+++ b/packages/design-system-react/src/types/index.ts
@@ -30,188 +30,6 @@ export enum AvatarGroupVariant {
   Token = 'token',
 }
 
-/**
- * Box - all spacing-related props
- */
-export type BoxSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-/**
- * Box - border width values (only valid Tailwind CSS border width utilities)
- */
-export type BoxBorderWidth = 0 | 1 | 2 | 4 | 8;
-
-/**
- * Box - flexDirection
- */
-export enum BoxFlexDirection {
-  Row = 'flex-row',
-  RowReverse = 'flex-row-reverse',
-  Column = 'flex-col',
-  ColumnReverse = 'flex-col-reverse',
-}
-
-/**
- * Box - flexWrap
- */
-export enum BoxFlexWrap {
-  NoWrap = 'flex-nowrap',
-  Wrap = 'flex-wrap',
-  WrapReverse = 'flex-wrap-reverse',
-}
-
-/**
- * Box - alignItems
- */
-export enum BoxAlignItems {
-  Start = 'items-start',
-  Center = 'items-center',
-  End = 'items-end',
-  Stretch = 'items-stretch',
-  Baseline = 'items-baseline',
-}
-
-/**
- * Box - justifyContent
- */
-export enum BoxJustifyContent {
-  Start = 'justify-start',
-  Center = 'justify-center',
-  End = 'justify-end',
-  Between = 'justify-between',
-  Around = 'justify-around',
-  Evenly = 'justify-evenly',
-}
-
-/**
- * Box - backgroundColor
- */
-export enum BoxBackgroundColor {
-  /** Default background color */
-  BackgroundDefault = 'bg-default',
-  /** Alternative background color */
-  BackgroundAlternative = 'bg-alternative',
-  /** Section background color */
-  BackgroundSection = 'bg-section',
-  /** Subsection background color */
-  BackgroundSubsection = 'bg-subsection',
-  /** Muted background color */
-  BackgroundMuted = 'bg-muted',
-  /** Primary default background color */
-  PrimaryDefault = 'bg-primary-default',
-  /** Primary alternative background color */
-  PrimaryAlternative = 'bg-primary-alternative',
-  /** Primary muted background color */
-  PrimaryMuted = 'bg-primary-muted',
-  /** Primary inverse background color */
-  PrimaryInverse = 'bg-primary-inverse',
-  /** Error default background color */
-  ErrorDefault = 'bg-error-default',
-  /** Error alternative background color */
-  ErrorAlternative = 'bg-error-alternative',
-  /** Error muted background color */
-  ErrorMuted = 'bg-error-muted',
-  /** Error inverse background color */
-  ErrorInverse = 'bg-error-inverse',
-  /** Warning default background color */
-  WarningDefault = 'bg-warning-default',
-  /** Warning alternative background color */
-  WarningAlternative = 'bg-warning-alternative',
-  /** Warning muted background color */
-  WarningMuted = 'bg-warning-muted',
-  /** Warning inverse background color */
-  WarningInverse = 'bg-warning-inverse',
-  /** Success default background color */
-  SuccessDefault = 'bg-success-default',
-  /** Success alternative background color */
-  SuccessAlternative = 'bg-success-alternative',
-  /** Success muted background color */
-  SuccessMuted = 'bg-success-muted',
-  /** Success inverse background color */
-  SuccessInverse = 'bg-success-inverse',
-  /** Info default background color */
-  InfoDefault = 'bg-info-default',
-  /** Info muted background color */
-  InfoMuted = 'bg-info-muted',
-  /** Info inverse background color */
-  InfoInverse = 'bg-info-inverse',
-  /** Flask default background color */
-  FlaskDefault = 'bg-flask-default',
-  /** Flask inverse background color */
-  FlaskInverse = 'bg-flask-inverse',
-  /** Overlay alternative background color */
-  OverlayAlternative = 'bg-overlay-alternative',
-  /** Overlay default background color */
-  OverlayDefault = 'bg-overlay-default',
-  /** Overlay inverse background color */
-  OverlayInverse = 'bg-overlay-inverse',
-  /** Transparent background color */
-  Transparent = 'bg-transparent',
-}
-
-/**
- * Box - borderColor
- */
-export enum BoxBorderColor {
-  /** Background default for cut out effect */
-  BackgroundDefault = 'border-background-default',
-  /** Default border color */
-  BorderDefault = 'border-default',
-  /** Muted border color */
-  BorderMuted = 'border-muted',
-  /** Primary default border color */
-  PrimaryDefault = 'border-primary-default',
-  /** Primary alternative border color */
-  PrimaryAlternative = 'border-primary-alternative',
-  /** Primary muted border color */
-  PrimaryMuted = 'border-primary-muted',
-  /** Primary inverse border color */
-  PrimaryInverse = 'border-primary-inverse',
-  /** Error default border color */
-  ErrorDefault = 'border-error-default',
-  /** Error alternative border color */
-  ErrorAlternative = 'border-error-alternative',
-  /** Error muted border color */
-  ErrorMuted = 'border-error-muted',
-  /** Error inverse border color */
-  ErrorInverse = 'border-error-inverse',
-  /** Warning default border color */
-  WarningDefault = 'border-warning-default',
-  /** Warning alternative border color */
-  WarningAlternative = 'border-warning-alternative',
-  /** Warning muted border color */
-  WarningMuted = 'border-warning-muted',
-  /** Warning inverse border color */
-  WarningInverse = 'border-warning-inverse',
-  /** Success default border color */
-  SuccessDefault = 'border-success-default',
-  /** Success alternative border color */
-  SuccessAlternative = 'border-success-alternative',
-  /** Success muted border color */
-  SuccessMuted = 'border-success-muted',
-  /** Success inverse border color */
-  SuccessInverse = 'border-success-inverse',
-  /** Info default border color */
-  InfoDefault = 'border-info-default',
-  /** Info alternative border color */
-  InfoAlternative = 'border-info-alternative',
-  /** Info muted border color */
-  InfoMuted = 'border-info-muted',
-  /** Info inverse border color */
-  InfoInverse = 'border-info-inverse',
-  /** Flask default border color */
-  FlaskDefault = 'border-flask-default',
-  /** Flask inverse border color */
-  FlaskInverse = 'border-flask-inverse',
-  /** Overlay alternative border color */
-  OverlayAlternative = 'border-overlay-alternative',
-  /** Overlay default border color */
-  OverlayDefault = 'border-overlay-default',
-  /** Overlay inverse border color */
-  OverlayInverse = 'border-overlay-inverse',
-  /** Transparent border color */
-  Transparent = 'border-transparent',
-}
-
 /**
  * ButtonBase - size
  */
diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts
index 31966ee8b..392ed56ad 100644
--- a/packages/design-system-shared/src/index.ts
+++ b/packages/design-system-shared/src/index.ts
@@ -71,3 +71,16 @@ export {
   AvatarAccountVariant,
   type AvatarAccountPropsShared,
 } from './types/AvatarAccount';
+
+// Box types (ADR-0003 + ADR-0004)
+export {
+  BoxFlexDirection,
+  BoxFlexWrap,
+  BoxAlignItems,
+  BoxJustifyContent,
+  BoxBackgroundColor,
+  BoxBorderColor,
+  type BoxSpacing,
+  type BoxBorderWidth,
+  type BoxPropsShared,
+} from './types/Box';
diff --git a/packages/design-system-shared/src/types/Box/Box.types.ts b/packages/design-system-shared/src/types/Box/Box.types.ts
new file mode 100644
index 000000000..13945171a
--- /dev/null
+++ b/packages/design-system-shared/src/types/Box/Box.types.ts
@@ -0,0 +1,308 @@
+/**
+ * Box - all spacing-related props
+ */
+export type BoxSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+/**
+ * Box - border width values (only valid Tailwind CSS border width utilities)
+ */
+export type BoxBorderWidth = 0 | 1 | 2 | 4 | 8;
+
+/**
+ * Box - flexDirection
+ * Convert from enum to const object (ADR-0003)
+ */
+export const BoxFlexDirection = {
+  Row: 'flex-row',
+  RowReverse: 'flex-row-reverse',
+  Column: 'flex-col',
+  ColumnReverse: 'flex-col-reverse',
+} as const;
+export type BoxFlexDirection =
+  (typeof BoxFlexDirection)[keyof typeof BoxFlexDirection];
+
+/**
+ * Box - flexWrap
+ * Convert from enum to const object (ADR-0003)
+ */
+export const BoxFlexWrap = {
+  NoWrap: 'flex-nowrap',
+  Wrap: 'flex-wrap',
+  WrapReverse: 'flex-wrap-reverse',
+} as const;
+export type BoxFlexWrap = (typeof BoxFlexWrap)[keyof typeof BoxFlexWrap];
+
+/**
+ * Box - alignItems
+ * Convert from enum to const object (ADR-0003)
+ */
+export const BoxAlignItems = {
+  Start: 'items-start',
+  Center: 'items-center',
+  End: 'items-end',
+  Stretch: 'items-stretch',
+  Baseline: 'items-baseline',
+} as const;
+export type BoxAlignItems = (typeof BoxAlignItems)[keyof typeof BoxAlignItems];
+
+/**
+ * Box - justifyContent
+ * Convert from enum to const object (ADR-0003)
+ */
+export const BoxJustifyContent = {
+  Start: 'justify-start',
+  Center: 'justify-center',
+  End: 'justify-end',
+  Between: 'justify-between',
+  Around: 'justify-around',
+  Evenly: 'justify-evenly',
+} as const;
+export type BoxJustifyContent =
+  (typeof BoxJustifyContent)[keyof typeof BoxJustifyContent];
+
+/**
+ * Box - backgroundColor
+ * Convert from enum to const object (ADR-0003)
+ */
+export const BoxBackgroundColor = {
+  /** Default background color */
+  BackgroundDefault: 'bg-default',
+  /** Alternative background color */
+  BackgroundAlternative: 'bg-alternative',
+  /** Section background color */
+  BackgroundSection: 'bg-section',
+  /** Subsection background color */
+  BackgroundSubsection: 'bg-subsection',
+  /** Muted background color */
+  BackgroundMuted: 'bg-muted',
+  /** Primary default background color */
+  PrimaryDefault: 'bg-primary-default',
+  /** Primary alternative background color */
+  PrimaryAlternative: 'bg-primary-alternative',
+  /** Primary muted background color */
+  PrimaryMuted: 'bg-primary-muted',
+  /** Primary inverse background color */
+  PrimaryInverse: 'bg-primary-inverse',
+  /** Error default background color */
+  ErrorDefault: 'bg-error-default',
+  /** Error alternative background color */
+  ErrorAlternative: 'bg-error-alternative',
+  /** Error muted background color */
+  ErrorMuted: 'bg-error-muted',
+  /** Error inverse background color */
+  ErrorInverse: 'bg-error-inverse',
+  /** Warning default background color */
+  WarningDefault: 'bg-warning-default',
+  /** Warning alternative background color */
+  WarningAlternative: 'bg-warning-alternative',
+  /** Warning muted background color */
+  WarningMuted: 'bg-warning-muted',
+  /** Warning inverse background color */
+  WarningInverse: 'bg-warning-inverse',
+  /** Success default background color */
+  SuccessDefault: 'bg-success-default',
+  /** Success alternative background color */
+  SuccessAlternative: 'bg-success-alternative',
+  /** Success muted background color */
+  SuccessMuted: 'bg-success-muted',
+  /** Success inverse background color */
+  SuccessInverse: 'bg-success-inverse',
+  /** Info default background color */
+  InfoDefault: 'bg-info-default',
+  /** Info muted background color */
+  InfoMuted: 'bg-info-muted',
+  /** Info inverse background color */
+  InfoInverse: 'bg-info-inverse',
+  /** Flask default background color */
+  FlaskDefault: 'bg-flask-default',
+  /** Flask inverse background color */
+  FlaskInverse: 'bg-flask-inverse',
+  /** Overlay alternative background color */
+  OverlayAlternative: 'bg-overlay-alternative',
+  /** Overlay default background color */
+  OverlayDefault: 'bg-overlay-default',
+  /** Overlay inverse background color */
+  OverlayInverse: 'bg-overlay-inverse',
+  /** Transparent background color */
+  Transparent: 'bg-transparent',
+} as const;
+export type BoxBackgroundColor =
+  (typeof BoxBackgroundColor)[keyof typeof BoxBackgroundColor];
+
+/**
+ * Box - borderColor
+ * Convert from enum to const object (ADR-0003)
+ */
+export const BoxBorderColor = {
+  /** Background default for cut out effect */
+  BackgroundDefault: 'border-background-default',
+  /** Default border color */
+  BorderDefault: 'border-default',
+  /** Muted border color */
+  BorderMuted: 'border-muted',
+  /** Primary default border color */
+  PrimaryDefault: 'border-primary-default',
+  /** Primary alternative border color */
+  PrimaryAlternative: 'border-primary-alternative',
+  /** Primary muted border color */
+  PrimaryMuted: 'border-primary-muted',
+  /** Primary inverse border color */
+  PrimaryInverse: 'border-primary-inverse',
+  /** Error default border color */
+  ErrorDefault: 'border-error-default',
+  /** Error alternative border color */
+  ErrorAlternative: 'border-error-alternative',
+  /** Error muted border color */
+  ErrorMuted: 'border-error-muted',
+  /** Error inverse border color */
+  ErrorInverse: 'border-error-inverse',
+  /** Warning default border color */
+  WarningDefault: 'border-warning-default',
+  /** Warning alternative border color */
+  WarningAlternative: 'border-warning-alternative',
+  /** Warning muted border color */
+  WarningMuted: 'border-warning-muted',
+  /** Warning inverse border color */
+  WarningInverse: 'border-warning-inverse',
+  /** Success default border color */
+  SuccessDefault: 'border-success-default',
+  /** Success alternative border color */
+  SuccessAlternative: 'border-success-alternative',
+  /** Success muted border color */
+  SuccessMuted: 'border-success-muted',
+  /** Success inverse border color */
+  SuccessInverse: 'border-success-inverse',
+  /** Info default border color */
+  InfoDefault: 'border-info-default',
+  /** Info alternative border color */
+  InfoAlternative: 'border-info-alternative',
+  /** Info muted border color */
+  InfoMuted: 'border-info-muted',
+  /** Info inverse border color */
+  InfoInverse: 'border-info-inverse',
+  /** Flask default border color */
+  FlaskDefault: 'border-flask-default',
+  /** Flask inverse border color */
+  FlaskInverse: 'border-flask-inverse',
+  /** Overlay alternative border color */
+  OverlayAlternative: 'border-overlay-alternative',
+  /** Overlay default border color */
+  OverlayDefault: 'border-overlay-default',
+  /** Overlay inverse border color */
+  OverlayInverse: 'border-overlay-inverse',
+  /** Transparent border color */
+  Transparent: 'border-transparent',
+} as const;
+export type BoxBorderColor =
+  (typeof BoxBorderColor)[keyof typeof BoxBorderColor];
+
+/**
+ * Box component shared props (ADR-0004)
+ * Platform-independent properties shared across React and React Native.
+ */
+export type BoxPropsShared = {
+  /**
+   * The flex-direction style of the component.
+   */
+  flexDirection?: BoxFlexDirection;
+  /**
+   * The flex-wrap style of the component.
+   */
+  flexWrap?: BoxFlexWrap;
+  /**
+   * The gap between the component's children.
+   * Use 0-12 for a gap of 0px-48px.
+   */
+  gap?: BoxSpacing;
+  /**
+   * The align-items style of the component.
+   */
+  alignItems?: BoxAlignItems;
+  /**
+   * The justify-content style of the component.
+   */
+  justifyContent?: BoxJustifyContent;
+  /**
+   * The margin of the component.
+   * Use 0-12 for margin of 0px-48px.
+   */
+  margin?: BoxSpacing;
+  /**
+   * The top margin of the component.
+   * Use 0-12 for margin of 0px-48px.
+   */
+  marginTop?: BoxSpacing;
+  /**
+   * The right margin of the component.
+   * Use 0-12 for margin of 0px-48px.
+   */
+  marginRight?: BoxSpacing;
+  /**
+   * The bottom margin of the component.
+   * Use 0-12 for margin of 0px-48px.
+   */
+  marginBottom?: BoxSpacing;
+  /**
+   * The left margin of the component.
+   * Use 0-12 for margin of 0px-48px.
+   */
+  marginLeft?: BoxSpacing;
+  /**
+   * The horizontal margin of the component.
+   * Use 0-12 for margin of 0px-48px.
+   */
+  marginHorizontal?: BoxSpacing;
+  /**
+   * The vertical margin of the component.
+   * Use 0-12 for margin of 0px-48px.
+   */
+  marginVertical?: BoxSpacing;
+  /**
+   * The padding of the component.
+   * Use 0-12 for padding of 0px-48px.
+   */
+  padding?: BoxSpacing;
+  /**
+   * The top padding of the component.
+   * Use 0-12 for padding of 0px-48px.
+   */
+  paddingTop?: BoxSpacing;
+  /**
+   * The right padding of the component.
+   * Use 0-12 for padding of 0px-48px.
+   */
+  paddingRight?: BoxSpacing;
+  /**
+   * The bottom padding of the component.
+   * Use 0-12 for padding of 0px-48px.
+   */
+  paddingBottom?: BoxSpacing;
+  /**
+   * The left padding of the component.
+   * Use 0-12 for padding of 0px-48px.
+   */
+  paddingLeft?: BoxSpacing;
+  /**
+   * The horizontal padding of the component.
+   * Use 0-12 for padding of 0px-48px.
+   */
+  paddingHorizontal?: BoxSpacing;
+  /**
+   * The vertical padding of the component.
+   * Use 0-12 for padding of 0px-48px.
+   */
+  paddingVertical?: BoxSpacing;
+  /**
+   * The border width of the component.
+   * Use 0, 1, 2, 4, or 8 for border width of 0px, 1px, 2px, 4px, or 8px.
+   */
+  borderWidth?: BoxBorderWidth;
+  /**
+   * The border color of the component.
+   */
+  borderColor?: BoxBorderColor;
+  /**
+   * The background color of the component.
+   */
+  backgroundColor?: BoxBackgroundColor;
+};
diff --git a/packages/design-system-shared/src/types/Box/index.ts b/packages/design-system-shared/src/types/Box/index.ts
new file mode 100644
index 000000000..7b4f9957b
--- /dev/null
+++ b/packages/design-system-shared/src/types/Box/index.ts
@@ -0,0 +1,11 @@
+export {
+  BoxFlexDirection,
+  BoxFlexWrap,
+  BoxAlignItems,
+  BoxJustifyContent,
+  BoxBackgroundColor,
+  BoxBorderColor,
+  type BoxSpacing,
+  type BoxBorderWidth,
+  type BoxPropsShared,
+} from './Box.types';