diff --git a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
index 3b1b6661743..2cdf3076013 100644
--- a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
@@ -1,8 +1,9 @@
-import styled from 'styled-components'
+import type React from 'react'
 import LabelGroup from './LabelGroup'
 import type {Meta, StoryFn} from '@storybook/react'
 import Token from '../Token/Token'
 import Label from '../Label/Label'
+import classes from './LabelGroupStories.module.css'
 
 const meta: Meta = {
   title: 'Components/LabelGroup/Features',
@@ -18,13 +19,11 @@ const meta: Meta = {
   ],
 }
 
-const ResizableContainer = styled.div`
-  outline: 1px solid black;
-  overflow: auto;
-  padding: 0.25rem;
-  resize: horizontal;
-  width: 600px;
-`
+const ResizableContainer = ({children, ...props}: {children: React.ReactNode}) => (
+  <div className={classes.ResizableContainer} {...props}>
+    {children}
+  </div>
+)
 
 export const TruncateAuto: StoryFn = () => (
   <ResizableContainer>
diff --git a/packages/react/src/LabelGroup/LabelGroup.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
index ca012013753..5ba40863b77 100644
--- a/packages/react/src/LabelGroup/LabelGroup.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
@@ -1,21 +1,20 @@
-import styled from 'styled-components'
+import type React from 'react'
 import type {LabelGroupProps} from './LabelGroup'
 import LabelGroup from './LabelGroup'
 import type {Meta, StoryFn} from '@storybook/react'
 import Label from '../Label/Label'
+import classes from './LabelGroupStories.module.css'
 
 const meta: Meta = {
   title: 'Components/LabelGroup',
   component: LabelGroup,
 }
 
-const ResizableContainer = styled.div`
-  outline: 1px solid black;
-  overflow: auto;
-  padding: 0.25rem;
-  resize: horizontal;
-  width: 600px;
-`
+const ResizableContainer = ({children, ...props}: {children: React.ReactNode}) => (
+  <div className={classes.ResizableContainer} {...props}>
+    {children}
+  </div>
+)
 
 export const Default: StoryFn = () => (
   <LabelGroup>
diff --git a/packages/react/src/LabelGroup/LabelGroupStories.module.css b/packages/react/src/LabelGroup/LabelGroupStories.module.css
new file mode 100644
index 00000000000..6acb3a46069
--- /dev/null
+++ b/packages/react/src/LabelGroup/LabelGroupStories.module.css
@@ -0,0 +1,9 @@
+.ResizableContainer {
+  /* stylelint-disable-next-line color-named */
+  outline: 1px solid black;
+  overflow: auto;
+  padding: var(--base-size-4);
+  resize: horizontal;
+  /* stylelint-disable-next-line primer/responsive-widths */
+  width: 600px;
+}
diff --git a/packages/react/src/Text/Text.test.tsx b/packages/react/src/Text/Text.test.tsx
index b8608b084cc..869f404add8 100644
--- a/packages/react/src/Text/Text.test.tsx
+++ b/packages/react/src/Text/Text.test.tsx
@@ -62,7 +62,6 @@ describe('Text', () => {
   })
 
   it('respects fontFamily="mono"', () => {
-    // styled-components removes the whitespace between font-family values
     const mono = theme.fonts.mono.replace(/, /g, ',')
     expect(render(<Text fontFamily="mono" />)).toHaveStyleRule('font-family', mono)
   })
diff --git a/packages/react/src/stories/AnchoredPositionStories.module.css b/packages/react/src/stories/AnchoredPositionStories.module.css
new file mode 100644
index 00000000000..a705edd980b
--- /dev/null
+++ b/packages/react/src/stories/AnchoredPositionStories.module.css
@@ -0,0 +1,42 @@
+.Float {
+  position: absolute;
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+  background-color: var(--bgColor-attention-muted);
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+  padding: var(--base-size-16);
+}
+
+.Anchor {
+  position: absolute;
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+  background-color: var(--bgColor-accent-muted);
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+  padding: var(--base-size-16);
+}
+
+.Nav {
+  width: 300px;
+  padding: var(--base-size-16);
+  position: relative;
+  overflow: hidden;
+  border-right: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.Main {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
diff --git a/packages/react/src/stories/FocusTrapStories.module.css b/packages/react/src/stories/FocusTrapStories.module.css
new file mode 100644
index 00000000000..c08cd5f1df0
--- /dev/null
+++ b/packages/react/src/stories/FocusTrapStories.module.css
@@ -0,0 +1,5 @@
+.MarginButton {
+  margin: var(--base-size-8) 0;
+}
+
+/* Helper styles for focus trap visual aids */
diff --git a/packages/react/src/stories/FocusZoneStories.module.css b/packages/react/src/stories/FocusZoneStories.module.css
new file mode 100644
index 00000000000..f25a0d54079
--- /dev/null
+++ b/packages/react/src/stories/FocusZoneStories.module.css
@@ -0,0 +1,3 @@
+.MarginButton {
+  margin: var(--base-size-8);
+}
diff --git a/packages/react/src/stories/ThemeProvider.stories.tsx b/packages/react/src/stories/ThemeProvider.stories.tsx
index dee9bdf4a0f..b9e3cdd7929 100644
--- a/packages/react/src/stories/ThemeProvider.stories.tsx
+++ b/packages/react/src/stories/ThemeProvider.stories.tsx
@@ -1,8 +1,8 @@
 import type {Meta, StoryFn} from '@storybook/react'
 
-import {ThemeProvider, BaseStyles, Box, themeGet, useTheme} from '..'
+import {ThemeProvider, BaseStyles, Box, useTheme} from '..'
 import type {ThemeProviderProps} from '../ThemeProvider'
-import {createGlobalStyle} from 'styled-components'
+import './ThemeProviderStories.module.css'
 
 export default {
   title: 'Behaviors/ThemeProvider',
@@ -17,12 +17,6 @@ export default {
   },
 } as Meta
 
-const GlobalStyle = createGlobalStyle`
-    body {
-        background-color: ${themeGet('colors.bg.canvas')};
-    }
-`
-
 function ActiveColorScheme() {
   const {colorScheme} = useTheme()
   return <span>Active color scheme: {colorScheme}</span>
@@ -31,7 +25,6 @@ function ActiveColorScheme() {
 export const Default: StoryFn<ThemeProviderProps> = args => {
   return (
     <ThemeProvider {...args}>
-      <GlobalStyle />
       <BaseStyles>
         <ActiveColorScheme />
       </BaseStyles>
@@ -87,7 +80,6 @@ function InverseMode() {
 export const Nested: StoryFn<ThemeProviderProps> = args => {
   return (
     <ThemeProvider {...args}>
-      <GlobalStyle />
       <BaseStyles>
         <ActiveColorScheme />
         <NightMode />
diff --git a/packages/react/src/stories/ThemeProviderStories.module.css b/packages/react/src/stories/ThemeProviderStories.module.css
new file mode 100644
index 00000000000..2461d6ad654
--- /dev/null
+++ b/packages/react/src/stories/ThemeProviderStories.module.css
@@ -0,0 +1,3 @@
+:global(body) {
+  background-color: var(--bgColor-default);
+}
diff --git a/packages/react/src/stories/deprecated/ActionList.stories.tsx b/packages/react/src/stories/deprecated/ActionList.stories.tsx
index f3a5303ab22..b81c9513fe2 100644
--- a/packages/react/src/stories/deprecated/ActionList.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionList.stories.tsx
@@ -13,13 +13,12 @@ import {
 } from '@primer/octicons-react'
 import type {Meta} from '@storybook/react'
 import React, {forwardRef} from 'react'
-import styled from 'styled-components'
 import {Label, ThemeProvider} from '../..'
 import {ActionList as _ActionList} from '../../deprecated/ActionList'
 import {Header} from '../../deprecated/ActionList/Header'
 import BaseStyles from '../../BaseStyles'
-import sx from '../../sx'
 import {ReactRouterLikeLink} from '../../__tests__/mocks/ReactRouterLink'
+import classes from './ActionListStories.module.css'
 
 const ActionList = Object.assign(_ActionList, {
   Header,
@@ -45,14 +44,16 @@ const meta: Meta = {
 }
 export default meta
 
-const ErsatzOverlay = styled.div<{maxWidth?: string}>`
-  border-radius: 12px;
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.12),
-    0 8px 24px rgba(149, 157, 165, 0.2);
-  overflow: hidden;
-  max-width: ${({maxWidth}) => maxWidth || 'none'};
-`
+const ErsatzOverlay = ({maxWidth, children, ...props}: {maxWidth?: string; children: React.ReactNode}) => (
+  <div
+    className={classes.ErsatzOverlay}
+    style={maxWidth ? ({'--ersatz-overlay-max-width': maxWidth} as React.CSSProperties) : undefined}
+    data-max-width={maxWidth ? '' : undefined}
+    {...props}
+  >
+    {children}
+  </div>
+)
 
 export function ActionsStory(): JSX.Element {
   return (
@@ -152,9 +153,6 @@ export function MultiSelectListStory(): JSX.Element {
 MultiSelectListStory.storyName = 'Multi Select'
 
 export function ComplexListInsetVariantStory(): JSX.Element {
-  const StyledDiv = styled.div`
-    ${sx}
-  `
   return (
     <>
       <h1>Complex List</h1>
@@ -172,9 +170,9 @@ export function ComplexListInsetVariantStory(): JSX.Element {
                 <ActionList.Item
                   {...props}
                   leadingVisual={() => (
-                    <StyledDiv sx={{'&>svg': {fill: 'white'}}}>
+                    <div className={classes.StyledDivWithWhiteFill}>
                       {LeadingVisual && <LeadingVisual></LeadingVisual>}
-                    </StyledDiv>
+                    </div>
                   )}
                 />
               ),
@@ -228,9 +226,6 @@ export function ComplexListInsetVariantStory(): JSX.Element {
 ComplexListInsetVariantStory.storyName = 'Complex List — Inset Variant'
 
 export function ComplexListFullVariantStory(): JSX.Element {
-  const StyledDiv = styled.div`
-    ${sx}
-  `
   return (
     <>
       <h1>Complex List</h1>
@@ -249,9 +244,9 @@ export function ComplexListFullVariantStory(): JSX.Element {
                 <ActionList.Item
                   {...props}
                   leadingVisual={() => (
-                    <StyledDiv sx={{'&>svg': {fill: 'white'}}}>
+                    <div className={classes.StyledDivWithWhiteFill}>
                       {LeadingVisual && <LeadingVisual></LeadingVisual>}
-                    </StyledDiv>
+                    </div>
                   )}
                 />
               ),
diff --git a/packages/react/src/stories/deprecated/ActionListStories.module.css b/packages/react/src/stories/deprecated/ActionListStories.module.css
new file mode 100644
index 00000000000..02f8e972f5f
--- /dev/null
+++ b/packages/react/src/stories/deprecated/ActionListStories.module.css
@@ -0,0 +1,18 @@
+.ErsatzOverlay {
+  border-radius: var(--borderRadius-large);
+  /* stylelint-disable primer/box-shadow */
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 8px 24px rgba(149, 157, 165, 0.2);
+  /* stylelint-enable primer/box-shadow */
+  overflow: hidden;
+}
+
+.ErsatzOverlay[data-max-width] {
+  max-width: var(--ersatz-overlay-max-width);
+}
+
+.StyledDivWithWhiteFill > svg {
+  /* stylelint-disable-next-line color-named */
+  fill: white;
+}
diff --git a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
index 572add701ca..f9895115845 100644
--- a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
@@ -14,13 +14,13 @@ import {
 import type {Meta} from '@storybook/react'
 import type React from 'react'
 import {useCallback, useState, useRef} from 'react'
-import styled from 'styled-components'
 import {ThemeProvider} from '../..'
 import type {ActionMenuProps} from '../../deprecated'
 import {ActionMenu, ActionList} from '../../deprecated'
 import type {ItemProps} from '../../deprecated/ActionList'
 import BaseStyles from '../../BaseStyles'
 import {Button, type ButtonProps} from '../../Button'
+import classes from './ActionMenuStories.module.css'
 
 const meta: Meta = {
   title: 'Deprecated/Components/ActionMenu',
@@ -42,13 +42,11 @@ const meta: Meta = {
 }
 export default meta
 
-const ErsatzOverlay = styled.div`
-  border-radius: 12px;
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.12),
-    0 8px 24px rgba(149, 157, 165, 0.2);
-  padding: 8px;
-`
+const ErsatzOverlay = ({children, ...props}: {children: React.ReactNode}) => (
+  <div className={classes.ErsatzOverlay} {...props}>
+    {children}
+  </div>
+)
 
 export function ActionsStory(): JSX.Element {
   const [option, setOption] = useState('Select an option')
diff --git a/packages/react/src/stories/deprecated/ActionMenuStories.module.css b/packages/react/src/stories/deprecated/ActionMenuStories.module.css
new file mode 100644
index 00000000000..4968006ec4c
--- /dev/null
+++ b/packages/react/src/stories/deprecated/ActionMenuStories.module.css
@@ -0,0 +1,8 @@
+/* stylelint-disable primer/box-shadow */
+.ErsatzOverlay {
+  border-radius: var(--borderRadius-large);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 8px 24px rgba(149, 157, 165, 0.2);
+  padding: var(--base-size-8);
+}
diff --git a/packages/react/src/stories/useAnchoredPosition.stories.tsx b/packages/react/src/stories/useAnchoredPosition.stories.tsx
index dcc36720fa7..9f19fce0a8d 100644
--- a/packages/react/src/stories/useAnchoredPosition.stories.tsx
+++ b/packages/react/src/stories/useAnchoredPosition.stories.tsx
@@ -2,11 +2,10 @@ import React from 'react'
 import type {Meta} from '@storybook/react'
 import {BaseStyles, Box, ThemeProvider} from '..'
 import {useAnchoredPosition} from '../hooks'
-import styled from 'styled-components'
-import {get} from '../constants'
 import type {AnchorSide} from '@primer/behaviors'
 import Portal, {registerPortalRoot} from '../Portal'
 import {Button} from '../Button'
+import classes from './AnchoredPositionStories.module.css'
 
 export default {
   title: 'Hooks/useAnchoredPosition',
@@ -65,30 +64,17 @@ export default {
   },
 } as Meta
 
-const Float = styled(Box)`
-  position: absolute;
-  border: 1px solid ${get('colors.black')};
-  border-radius: ${get('radii.2')};
-  background-color: ${get('colors.orange.3')};
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  font-size: ${get('fontSizes.3')};
-  font-weight: ${get('fontWeights.bold')};
-  padding: ${get('space.3')};
-`
-const Anchor = styled(Box)`
-  position: absolute;
-  border: 1px solid ${get('colors.black')};
-  border-radius: ${get('radii.2')};
-  background-color: ${get('colors.blue.3')};
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  font-size: ${get('fontSizes.3')};
-  font-weight: ${get('fontWeights.bold')};
-  padding: ${get('space.3')};
-`
+const Float = ({children, ...props}: React.ComponentProps<typeof Box>) => (
+  <Box className={classes.Float} {...props}>
+    {children}
+  </Box>
+)
+
+const Anchor = ({children, ...props}: React.ComponentProps<typeof Box>) => (
+  <Box className={classes.Anchor} {...props}>
+    {children}
+  </Box>
+)
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const UseAnchoredPosition = (args: any) => {
@@ -239,21 +225,17 @@ export const ComplexAncestry = () => {
   )
 }
 
-const Nav = styled('nav')`
-  width: 300px;
-  padding: ${get('space.3')};
-  position: relative;
-  overflow: hidden;
-  border-right: 1px solid ${get('colors.border.gray')};
-`
-const Main = styled('main')`
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-`
+const Nav = ({children, ...props}: React.ComponentPropsWithoutRef<'nav'>) => (
+  <nav className={classes.Nav} {...props}>
+    {children}
+  </nav>
+)
+
+const Main = ({children, ...props}: React.ComponentPropsWithRef<'main'>) => (
+  <main className={classes.Main} {...props}>
+    {children}
+  </main>
+)
 
 /*
 
diff --git a/packages/react/src/stories/useFocusTrap.stories.tsx b/packages/react/src/stories/useFocusTrap.stories.tsx
index ac8273eedbb..dd508175d90 100644
--- a/packages/react/src/stories/useFocusTrap.stories.tsx
+++ b/packages/react/src/stories/useFocusTrap.stories.tsx
@@ -1,10 +1,9 @@
 import React, {useCallback, useEffect} from 'react'
 import type {Meta} from '@storybook/react'
-import styled, {createGlobalStyle} from 'styled-components'
 
 import {BaseStyles, Box, Button, Flash, Text, ThemeProvider} from '..'
 import {useFocusTrap} from '../hooks/useFocusTrap'
-import {themeGet} from '@styled-system/theme-get'
+import classes from './FocusTrapStories.module.css'
 
 export default {
   title: 'Hooks/useFocusTrap',
@@ -21,23 +20,28 @@ export default {
   ],
 } as Meta
 
-// NOTE: the below styles are solely intended as a visual aid for
-// this Storybook story, but they're not recommended for a real site!
-const HelperGlobalStyling = createGlobalStyle`
-  *:focus {
-    outline: 2px solid ${themeGet('colors.auto.blue.3')} !important;
-  }
-  [data-focus-trap='active'] {
-    background-color: ${themeGet('colors.auto.green.2')}
-  }
-  [data-focus-trap='suspended'] {
-    background-color: ${themeGet('colors.auto.yellow.2')}
-  }
-`
+// Helper styles for visual aid in this story
+const HelperGlobalStyling = () => (
+  <style>
+    {`
+      *:focus {
+        outline: 2px solid var(--bgColor-accent-emphasis) !important;
+      }
+      [data-focus-trap='active'] {
+        background-color: var(--bgColor-success-muted);
+      }
+      [data-focus-trap='suspended'] {
+        background-color: var(--bgColor-attention-muted);
+      }
+    `}
+  </style>
+)
 
-const MarginButton = styled(Button)`
-  margin: ${themeGet('space.1')} 0;
-`
+const MarginButton = ({children, ...props}: React.ComponentProps<typeof Button>) => (
+  <Button className={classes.MarginButton} {...props}>
+    {children}
+  </Button>
+)
 
 export const FocusTrap = () => {
   const [trapEnabled, setTrapEnabled] = React.useState(false)
diff --git a/packages/react/src/stories/useFocusZone.stories.tsx b/packages/react/src/stories/useFocusZone.stories.tsx
index f9266de4ef7..7fa559a58f5 100644
--- a/packages/react/src/stories/useFocusZone.stories.tsx
+++ b/packages/react/src/stories/useFocusZone.stories.tsx
@@ -1,14 +1,13 @@
 import React, {useCallback, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react'
-import styled from 'styled-components'
 import {Box, BaseStyles, Flash, theme, ThemeProvider} from '..'
 import {Button} from '../Button'
 import Link from '../Link'
 import {FocusKeys} from '@primer/behaviors'
 import type {Direction} from '@primer/behaviors'
-import {themeGet} from '@styled-system/theme-get'
 import {useFocusZone} from '../hooks/useFocusZone'
 import {useTheme} from '../ThemeProvider'
+import classes from './FocusZoneStories.module.css'
 
 export default {
   title: 'Hooks/useFocusZone',
@@ -25,9 +24,11 @@ export default {
   ],
 } as Meta
 
-const MarginButton = styled(Button)`
-  margin: ${themeGet('space.1')};
-`
+const MarginButton = ({children, ...props}: React.ComponentProps<typeof Button>) => (
+  <Button className={classes.MarginButton} {...props}>
+    {children}
+  </Button>
+)
 
 export const BasicFocusZone = () => {
   // Display each key press in the top-right corner of the page as a visual aid