diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-tritanopia-linux.png
index a74b1f880a1..39d05d10791 100644
Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-on-Description-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-forced-colors-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-forced-colors-dark-linux.png
index 8864c514386..b4d5c10bc44 100644
Binary files a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-forced-colors-dark-linux.png and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-Default-forced-colors-dark-linux.png differ
diff --git a/packages/react/src/Hidden/Hidden.examples.stories.module.css b/packages/react/src/Hidden/Hidden.examples.stories.module.css
new file mode 100644
index 00000000000..884169ac298
--- /dev/null
+++ b/packages/react/src/Hidden/Hidden.examples.stories.module.css
@@ -0,0 +1,12 @@
+.Container {
+  padding: var(--base-size-16);
+}
+
+.DescriptionText {
+  font-size: var(--text-body-size-small);
+  color: var(--fgColor-muted);
+}
+
+.BoldLink {
+  font-weight: var(--base-text-weight-semibold);
+}
diff --git a/packages/react/src/Hidden/Hidden.examples.stories.tsx b/packages/react/src/Hidden/Hidden.examples.stories.tsx
index 8073aff28be..2e873c631b7 100644
--- a/packages/react/src/Hidden/Hidden.examples.stories.tsx
+++ b/packages/react/src/Hidden/Hidden.examples.stories.tsx
@@ -1,9 +1,10 @@
 import type {Meta} from '@storybook/react-vite'
-import {Button, Link, Text, StateLabel, BranchName, Box} from '..'
+import {Button, Link, StateLabel, BranchName} from '..'
 import {ArrowRightIcon} from '@primer/octicons-react'
 
 import {PageHeader} from '../PageHeader'
 import {Hidden} from '.'
+import classes from './Hidden.examples.stories.module.css'
 
 export default {
   title: 'Experimental/Components/Hidden/Examples',
@@ -20,7 +21,7 @@ const setViewportParamToNarrow = {
   },
 }
 export const Webhooks = () => (
-  <Box sx={{padding: 3}}>
+  <div className={classes.Container}>
     <PageHeader role="banner" aria-label="Webhooks">
       <PageHeader.ContextArea>
         <PageHeader.ParentLink href="http://github.com">Repository settings</PageHeader.ParentLink>
@@ -39,7 +40,7 @@ export const Webhooks = () => (
         </PageHeader.Actions>
       </PageHeader.TitleArea>
     </PageHeader>
-  </Box>
+  </div>
 )
 
 export const WebhooksOnNarrowViewport = () => {
@@ -49,7 +50,7 @@ export const WebhooksOnNarrowViewport = () => {
 WebhooksOnNarrowViewport.parameters = setViewportParamToNarrow
 
 export const PullRequestPage = () => (
-  <Box sx={{padding: 3}}>
+  <div className={classes.Container}>
     <PageHeader role="banner" aria-label="Add Hidden utility component">
       <PageHeader.ContextArea>
         <PageHeader.ParentLink href="http://github.com">Pull requests</PageHeader.ParentLink>
@@ -60,8 +61,8 @@ export const PullRequestPage = () => (
       <PageHeader.Description>
         <StateLabel status="pullOpened">Open</StateLabel>
         <Hidden when={['narrow']}>
-          <Text sx={{fontSize: 1, color: 'fg.muted'}}>
-            <Link href="#" muted sx={{fontWeight: 'bold'}}>
+          <span className={classes.DescriptionText}>
+            <Link href="#" muted className={classes.BoldLink}>
               broccolinisoup
             </Link>{' '}
             wants to merge 3 commits into
@@ -72,18 +73,18 @@ export const PullRequestPage = () => (
             <BranchName href="#" style={{textDecoration: 'underline'}}>
               broccolinisoup/add-hidden-component
             </BranchName>
-          </Text>
+          </span>
         </Hidden>
         <Hidden when={['regular', 'wide']}>
-          <Text sx={{fontSize: 1, color: 'fg.muted'}}>
+          <span className={classes.DescriptionText}>
             <BranchName href="#">main</BranchName>
             <ArrowRightIcon />
             <BranchName href="#">page-header-initial</BranchName>
-          </Text>
+          </span>
         </Hidden>
       </PageHeader.Description>
     </PageHeader>
-  </Box>
+  </div>
 )
 
 export const PullRequestPageOnNarrowViewport = () => {