diff --git a/packages/react/src/Box/Box.stories.module.css b/packages/react/src/Box/Box.stories.module.css
new file mode 100644
index 00000000000..04489f012a5
--- /dev/null
+++ b/packages/react/src/Box/Box.stories.module.css
@@ -0,0 +1,6 @@
+.PlaygroundBox {
+  border-width: var(--borderWidth-thin);
+  border-style: solid;
+  border-color: var(--borderColor-default);
+  padding: var(--base-size-12);
+}
diff --git a/packages/react/src/Box/Box.stories.tsx b/packages/react/src/Box/Box.stories.tsx
index 69d862ca616..20f73da0a23 100644
--- a/packages/react/src/Box/Box.stories.tsx
+++ b/packages/react/src/Box/Box.stories.tsx
@@ -1,23 +1,23 @@
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import Box from './Box'
+import {clsx} from 'clsx'
+import classes from './Box.stories.module.css'
 
 export default {
   title: 'Deprecated/Components/Box',
   component: Box,
 } as Meta<typeof Box>
 
-export const Default = () => <Box>Default Box</Box>
+export const Default = () => <div>Default Box</div>
 
-export const Playground: StoryFn<typeof Box> = args => <Box {...args}>Playground</Box>
+export const Playground: StoryFn<typeof Box> = args => {
+  const as = args.as || 'div'
+  const Element = as as keyof JSX.IntrinsicElements
+  return <Element className={clsx(classes.PlaygroundBox)}>Playground</Element>
+}
 
 Playground.args = {
   as: 'div',
-  sx: {
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: 'border.default',
-    p: 3,
-  },
 }
 
 Playground.argTypes = {