diff --git a/packages/react/src/BaseStyles.dev.stories.module.css b/packages/react/src/BaseStyles.dev.stories.module.css
new file mode 100644
index 00000000000..e7605bc9e47
--- /dev/null
+++ b/packages/react/src/BaseStyles.dev.stories.module.css
@@ -0,0 +1,30 @@
+/* Story-specific styles for BaseStyles dev stories */
+
+.WithSxProps {
+  /* stylelint-disable-next-line color-named */
+  color: red;
+  /* stylelint-disable-next-line color-named */
+  background-color: blue;
+  /* stylelint-disable-next-line primer/typography, font-family-no-missing-generic-family-keyword */
+  font-family: Arial;
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 1.5;
+}
+
+.WithSystemProps {
+  /* stylelint-disable-next-line color-named */
+  color: red;
+  /* stylelint-disable-next-line color-named */
+  background-color: blue;
+  /* stylelint-disable-next-line primer/typography, font-family-no-missing-generic-family-keyword */
+  font-family: Arial;
+  /* stylelint-disable-next-line primer/typography */
+  font-size: 14px;
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 1.5;
+  display: flex;
+}
+
+.WithStyleProps {
+  /* Style prop styles are applied inline, no classes needed */
+}
\ No newline at end of file
diff --git a/packages/react/src/BaseStyles.dev.stories.tsx b/packages/react/src/BaseStyles.dev.stories.tsx
index bbf2e1a6ef9..8de20c07ea9 100644
--- a/packages/react/src/BaseStyles.dev.stories.tsx
+++ b/packages/react/src/BaseStyles.dev.stories.tsx
@@ -1,6 +1,8 @@
 import {BaseStyles} from '.'
 import type {Meta} from '@storybook/react-vite'
 import type {ComponentProps} from './utils/types'
+import {clsx} from 'clsx'
+import classes from './BaseStyles.dev.stories.module.css'
 
 export default {
   title: 'Behaviors/BaseStyles/Dev',
@@ -9,27 +11,12 @@ export default {
 
 export const Default = () => 'Hello'
 
-export const WithSxProps = () => (
-  <BaseStyles
-    sx={{
-      color: 'red',
-      backgroundColor: 'blue',
-      fontFamily: 'Arial',
-      lineHeight: '1.5',
-    }}
-  >
-    Hello
-  </BaseStyles>
-)
+export const WithSxProps = () => <div className={clsx(classes.WithSxProps)}>Hello</div>
 
-export const WithSystemProps = () => (
-  <BaseStyles color="red" backgroundColor="blue" fontFamily="Arial" fontSize="14px" lineHeight="1.5" display="flex">
-    Hello
-  </BaseStyles>
-)
+export const WithSystemProps = () => <div className={clsx(classes.WithSystemProps)}>Hello</div>
 
 export const WithStyleProps = () => (
-  <BaseStyles
+  <div
     style={{
       color: 'red',
       backgroundColor: 'blue',
@@ -38,5 +25,5 @@ export const WithStyleProps = () => (
     }}
   >
     Hello
-  </BaseStyles>
+  </div>
 )