diff --git a/.changeset/olive-rats-serve.md b/.changeset/olive-rats-serve.md
new file mode 100644
index 00000000000..38e82f92605
--- /dev/null
+++ b/.changeset/olive-rats-serve.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update Text component to no longer support sx.
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.module.css b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.module.css
new file mode 100644
index 00000000000..d2aee9d9598
--- /dev/null
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.module.css
@@ -0,0 +1,10 @@
+.TextMutedWithMargin {
+  color: var(--fgColor-muted);
+  margin-left: var(--base-size-4);
+}
+
+.TextSmallMutedWithMargin {
+  font-size: var(--text-body-size-small);
+  color: var(--fgColor-muted);
+  margin-left: var(--base-size-4);
+}
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
index 2af45cb998f..0c11a0d85ec 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
@@ -8,6 +8,7 @@ import {Button} from '../Button'
 import Octicon from '../Octicon'
 import {action} from 'storybook/actions'
 import {Stack} from '../Stack/Stack'
+import classes from './AnchoredOverlay.stories.module.css'
 
 export default {
   title: 'Components/AnchoredOverlay',
@@ -22,7 +23,7 @@ const hoverCard = (
     </Stack>
     <Stack direction="horizontal" gap="none">
       <Text weight="medium">monalisa</Text>
-      <Text color={'var(--fgColor-muted)'} ml={1}>
+      <Text className={classes.TextMutedWithMargin}>
         <Link inline muted href="#">
           Monalisa Octocat
         </Link>
@@ -31,15 +32,11 @@ const hoverCard = (
     <Text size="medium">Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
     <Stack direction="horizontal" gap="none">
       <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
-      <Text size="small" color={'var(--fgColor-muted)'} ml={1}>
-        Interwebs
-      </Text>
+      <Text className={classes.TextSmallMutedWithMargin}>Interwebs</Text>
     </Stack>
     <Stack direction="horizontal" gap="none">
       <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
-      <Text size="small" color={'var(--fgColor-muted)'} ml={1}>
-        Owns this repository
-      </Text>
+      <Text className={classes.TextSmallMutedWithMargin}>Owns this repository</Text>
     </Stack>
   </Stack>
 )
diff --git a/packages/react/src/Button/Button.dev.stories.module.css b/packages/react/src/Button/Button.dev.stories.module.css
new file mode 100644
index 00000000000..351a8f5622c
--- /dev/null
+++ b/packages/react/src/Button/Button.dev.stories.module.css
@@ -0,0 +1,3 @@
+.DefaultText {
+  color: var(--fgColor-default);
+}
diff --git a/packages/react/src/Button/Button.dev.stories.tsx b/packages/react/src/Button/Button.dev.stories.tsx
index 977b86a74f5..1ec0d70bb6d 100644
--- a/packages/react/src/Button/Button.dev.stories.tsx
+++ b/packages/react/src/Button/Button.dev.stories.tsx
@@ -2,6 +2,7 @@ import {SearchIcon, TriangleDownIcon, EyeIcon, IssueClosedIcon, HeartFillIcon} f
 import {Button, IconButton} from '.'
 import {default as Text} from '../Text'
 import {Stack} from '../Stack'
+import classes from './Button.dev.stories.module.css'
 
 export default {
   title: 'Components/Button/Dev',
@@ -67,7 +68,7 @@ export const TestSxProp = () => {
         Invariant color overridden
       </Button>
       <Button leadingVisual={IssueClosedIcon} sx={{color: 'done.fg'}}>
-        <Text sx={{color: 'fg.default'}}>Close issue</Text>
+        <Text className={classes.DefaultText}>Close issue</Text>
       </Button>
       <Button
         size="small"
diff --git a/packages/react/src/DataTable/Table.module.css b/packages/react/src/DataTable/Table.module.css
index 3320808e167..142ca253d3e 100644
--- a/packages/react/src/DataTable/Table.module.css
+++ b/packages/react/src/DataTable/Table.module.css
@@ -285,3 +285,7 @@
     grid-column: -1 /1;
   }
 }
+
+.PlaceholderText {
+  color: var(--fgColor-muted);
+}
diff --git a/packages/react/src/DataTable/Table.tsx b/packages/react/src/DataTable/Table.tsx
index e093c015dc9..4a4bee37f6c 100644
--- a/packages/react/src/DataTable/Table.tsx
+++ b/packages/react/src/DataTable/Table.tsx
@@ -227,7 +227,7 @@ function TableCell({align, className, children, scope, ...rest}: TableCellProps)
 type TableCellPlaceholderProps = React.PropsWithChildren
 
 function TableCellPlaceholder({children}: TableCellPlaceholderProps) {
-  return <Text color="fg.subtle">{children}</Text>
+  return <Text className={classes.PlaceholderText}>{children}</Text>
 }
 
 // ----------------------------------------------------------------------------
diff --git a/packages/react/src/Dialog/Dialog.dev.stories.tsx b/packages/react/src/Dialog/Dialog.dev.stories.tsx
index 2cb2a5134e1..946efdb4b2a 100644
--- a/packages/react/src/Dialog/Dialog.dev.stories.tsx
+++ b/packages/react/src/Dialog/Dialog.dev.stories.tsx
@@ -3,6 +3,7 @@ import {useState, useCallback, useRef} from 'react'
 import {Text, Button} from '..'
 import type {DialogProps, DialogWidth, DialogHeight} from './Dialog'
 import {Dialog} from './Dialog'
+import classes from './Dialog.stories.module.css'
 
 /* Dialog Version 2 */
 
@@ -12,7 +13,7 @@ export default {
 
 const lipsum = (
   <>
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
       lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
       nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
@@ -22,7 +23,7 @@ const lipsum = (
       luctus tempus posuere.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis
       lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis
       sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim
diff --git a/packages/react/src/Dialog/Dialog.features.stories.tsx b/packages/react/src/Dialog/Dialog.features.stories.tsx
index 5f67b70948d..7aa688ce18e 100644
--- a/packages/react/src/Dialog/Dialog.features.stories.tsx
+++ b/packages/react/src/Dialog/Dialog.features.stories.tsx
@@ -2,6 +2,7 @@ import React, {useState, useRef, useCallback} from 'react'
 import {Stack, TextInput, Text, Button, ActionList} from '..'
 import type {DialogProps, DialogWidth, DialogHeight} from './Dialog'
 import {Dialog} from './Dialog'
+import classes from './Dialog.stories.module.css'
 
 /* Dialog Version 2 */
 
@@ -11,7 +12,7 @@ export default {
 
 const lipsum = (
   <>
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
       lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
       nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
@@ -21,7 +22,7 @@ const lipsum = (
       luctus tempus posuere.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis
       lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis
       sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim
@@ -29,7 +30,7 @@ const lipsum = (
       sem. Mauris a est tellus.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales
       molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo,
       condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend
@@ -37,13 +38,13 @@ const lipsum = (
       pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in
       nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend
       lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non
       consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam
       pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet.
@@ -229,7 +230,7 @@ export const ReproMultistepDialogWithConditionalFooter = ({width, height}: Dialo
 }
 
 const bodyContent = (
-  <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+  <Text className={classes.SmallParagraphText} as="p">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
     lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
     nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
diff --git a/packages/react/src/Dialog/Dialog.stories.module.css b/packages/react/src/Dialog/Dialog.stories.module.css
new file mode 100644
index 00000000000..5b8e489c39c
--- /dev/null
+++ b/packages/react/src/Dialog/Dialog.stories.module.css
@@ -0,0 +1,4 @@
+.SmallParagraphText {
+  font-size: var(--text-body-size-medium, 0.75rem);
+  margin-block-start: 0;
+}
diff --git a/packages/react/src/Dialog/Dialog.stories.tsx b/packages/react/src/Dialog/Dialog.stories.tsx
index ae938b2c425..84a17f8131c 100644
--- a/packages/react/src/Dialog/Dialog.stories.tsx
+++ b/packages/react/src/Dialog/Dialog.stories.tsx
@@ -3,6 +3,7 @@ import type {Meta} from '@storybook/react-vite'
 import {Button, Text} from '..'
 import type {DialogProps} from './Dialog'
 import {Dialog} from './Dialog'
+import classes from './Dialog.stories.module.css'
 
 /* Dialog Version 2 */
 
@@ -18,7 +19,7 @@ export default meta
 
 const lipsum = (
   <>
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
       lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
       nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
@@ -28,7 +29,7 @@ const lipsum = (
       luctus tempus posuere.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis
       lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis
       sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim
@@ -36,7 +37,7 @@ const lipsum = (
       sem. Mauris a est tellus.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales
       molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo,
       condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend
@@ -44,13 +45,13 @@ const lipsum = (
       pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in
       nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend
       lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo.
     </Text>
 
-    <Text sx={{fontSize: 1, marginBlockStart: 0}} as="p">
+    <Text className={classes.SmallParagraphText} as="p">
       Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non
       consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam
       pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet.
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..ef1f5074ceb
--- /dev/null
+++ b/packages/react/src/Hidden/Hidden.examples.stories.module.css
@@ -0,0 +1,4 @@
+.SmallMutedText {
+  font-size: var(--text-body-size-small, 0.75rem);
+  color: var(--fgColor-muted);
+}
diff --git a/packages/react/src/Hidden/Hidden.examples.stories.tsx b/packages/react/src/Hidden/Hidden.examples.stories.tsx
index a9cbda74ad9..1faebaa21c7 100644
--- a/packages/react/src/Hidden/Hidden.examples.stories.tsx
+++ b/packages/react/src/Hidden/Hidden.examples.stories.tsx
@@ -4,6 +4,7 @@ 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',
@@ -60,7 +61,7 @@ export const PullRequestPage = () => (
       <PageHeader.Description>
         <StateLabel status="pullOpened">Open</StateLabel>
         <Hidden when={['narrow']}>
-          <Text sx={{fontSize: 1, color: 'fg.muted'}}>
+          <Text className={classes.SmallMutedText}>
             <Link href="#" muted style={{fontWeight: 'var(--base-text-weight-semibold)'}}>
               broccolinisoup
             </Link>{' '}
@@ -75,7 +76,7 @@ export const PullRequestPage = () => (
           </Text>
         </Hidden>
         <Hidden when={['regular', 'wide']}>
-          <Text sx={{fontSize: 1, color: 'fg.muted'}}>
+          <Text className={classes.SmallMutedText}>
             <BranchName href="#">main</BranchName>
             <ArrowRightIcon />
             <BranchName href="#">page-header-initial</BranchName>
diff --git a/packages/react/src/KeybindingHint/components/Chord.module.css b/packages/react/src/KeybindingHint/components/Chord.module.css
new file mode 100644
index 00000000000..bd8ff1887cc
--- /dev/null
+++ b/packages/react/src/KeybindingHint/components/Chord.module.css
@@ -0,0 +1,44 @@
+.Chord {
+  display: inline-flex;
+  border: var(--borderWidth-thin) solid;
+  font-weight: var(--base-text-weight-normal);
+  gap: 0.5ch;
+  box-shadow: none;
+  vertical-align: baseline;
+  overflow: hidden;
+  justify-content: center;
+}
+
+.ChordNormal {
+  background: var(--bgColor-transparent);
+  color: var(--fgColor-muted);
+  border-color: var(--borderColor-default);
+}
+
+.ChordOnEmphasis {
+  background: var(--counter-bgColor-emphasis);
+  color: var(--fgColor-onEmphasis);
+  border-color: transparent;
+}
+
+.ChordOnPrimary {
+  background: var(--button-primary-bgColor-active);
+  color: var(--fgColor-onEmphasis);
+  border-color: transparent;
+}
+
+.ChordSmall {
+  border-radius: var(--borderRadius-small);
+  font-size: 11px; /* stylelint-disable-line primer/typography */
+  padding: var(--base-size-2);
+  line-height: var(--base-size-8); /* stylelint-disable-line primer/typography */
+  min-width: var(--base-size-16);
+}
+
+.ChordNormal:not(.ChordSmall) {
+  border-radius: var(--borderRadius-medium);
+  font-size: var(--text-body-size-small, 0.75rem);
+  padding: var(--base-size-4);
+  line-height: 10px; /* stylelint-disable-line primer/typography */
+  min-width: var(--base-size-20);
+}
diff --git a/packages/react/src/KeybindingHint/components/Chord.tsx b/packages/react/src/KeybindingHint/components/Chord.tsx
index 9baca1c88f0..264fb70b0df 100644
--- a/packages/react/src/KeybindingHint/components/Chord.tsx
+++ b/packages/react/src/KeybindingHint/components/Chord.tsx
@@ -3,6 +3,8 @@ import Text from '../../Text'
 import type {KeybindingHintProps} from '../props'
 import {Key} from './Key'
 import {accessibleKeyName} from '../key-names'
+import {clsx} from 'clsx'
+import classes from './Chord.module.css'
 
 /**
  * Consistent sort order for modifier keys. There should never be more than one non-modifier
@@ -29,33 +31,14 @@ const splitChord = (chord: string) =>
     .map(k => k.toLowerCase())
     .sort(compareLowercaseKeys)
 
-const backgroundColors = {
-  normal: 'var(--bgColor-transparent)',
-  onEmphasis: 'var(--counter-bgColor-emphasis)',
-  onPrimary: 'var(--button-primary-bgColor-active)',
-}
-
 export const Chord = ({keys, format = 'condensed', variant = 'normal', size = 'normal'}: KeybindingHintProps) => (
   <Text
-    sx={{
-      display: 'inline-flex',
-      bg: backgroundColors[variant],
-      color: variant === 'normal' ? 'var(--fgColor-muted)' : 'var(--fgColor-onEmphasis)',
-      border: '1px solid',
-      borderColor: variant === 'normal' ? 'var(--borderColor-default)' : 'transparent',
-      borderRadius: size === 'small' ? 1 : 2,
-      fontWeight: 'normal',
-      fontFamily: 'normal',
-      fontSize: size === 'small' ? '11px' : 0,
-      p: size === 'small' ? '2px' : 1,
-      gap: '0.5ch',
-      boxShadow: 'none',
-      verticalAlign: 'baseline',
-      overflow: 'hidden',
-      lineHeight: size === 'small' ? '8px' : '10px',
-      minWidth: size === 'small' ? 'var(--base-size-16)' : 'var(--base-size-20)',
-      justifyContent: 'center',
-    }}
+    className={clsx(classes.Chord, {
+      [classes.ChordNormal]: variant === 'normal',
+      [classes.ChordOnEmphasis]: variant === 'onEmphasis',
+      [classes.ChordOnPrimary]: variant === 'onPrimary',
+      [classes.ChordSmall]: size === 'small',
+    })}
   >
     {splitChord(keys).map((k, i) => (
       <Fragment key={i}>
diff --git a/packages/react/src/Overlay/Overlay.features.stories.module.css b/packages/react/src/Overlay/Overlay.features.stories.module.css
index 590996551c4..4b2c380e4d2 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.module.css
+++ b/packages/react/src/Overlay/Overlay.features.stories.module.css
@@ -137,6 +137,21 @@
   top: var(--base-size-4);
 }
 
+.MediumTextMuted {
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+}
+
+.MediumText {
+  font-size: var(--text-body-size-medium);
+}
+
+.MediumTextWithMargin {
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+  margin-bottom: var(--base-size-12);
+}
+
 .IssueLink {
   display: block;
   border: var(--borderWidth-thin) solid var(--borderColor-default);
diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
index a8860d992c9..2966536e1b4 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -258,9 +258,7 @@ export const MemexNestedOverlays = ({role, open}: Args) => {
         >
           <form onSubmit={() => setOverlayOpen(false)} className={classes.FormContainer} aria-label="Set Duration Form">
             <div className={classes.FormRow}>
-              <Text color="fg.muted" sx={{fontSize: 1}}>
-                Duration:
-              </Text>
+              <Text className={classes.MediumTextMuted}>Duration:</Text>
               <TextInput defaultValue={2} aria-label="Duration" />
               <ActionMenu>
                 <ActionMenu.Button sx={{width: 200}} aria-label="Change duration unit">
@@ -384,7 +382,7 @@ export const NestedOverlays = ({role, open}: Args) => {
               ref={secondaryContainer}
             >
               <form className={classes.CreateFormContent} aria-label="Set Duration Form">
-                <Text color="fg.muted" sx={{fontSize: 1, mb: 3}}>
+                <Text className={classes.MediumTextWithMargin}>
                   Create a list to organize your starred repositories.
                 </Text>
                 <TextInput placeholder="Name this list" className={classes.TextInputWithMargin} />
@@ -452,8 +450,8 @@ export const MemexIssueOverlay = ({role, open}: Args) => {
               <Label size="large">
                 <IssueDraftIcon /> Draft
               </Label>
-              <Text sx={{fontSize: 1}}>opened 2 days ago,</Text>
-              <Text sx={{fontSize: 1}}>showing {editing ? 'input' : 'button'}</Text>
+              <Text className={classes.MediumText}>opened 2 days ago,</Text>
+              <Text className={classes.MediumText}>showing {editing ? 'input' : 'button'}</Text>
             </div>
             {editing ? (
               <TextInput
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css
index 943e332fe70..8ebf0ef2aad 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css
+++ b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.module.css
@@ -13,3 +13,15 @@
 .LabelAndCaption {
   flex-grow: 1;
 }
+
+.TextLargeBold {
+  display: block;
+  font-size: var(--text-body-size-large);
+  font-weight: var(--base-text-weight-semibold);
+}
+
+.TextMediumSubtle {
+  display: block;
+  font-size: var(--text-body-size-medium);
+  color: var(--fgColor-muted);
+}
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx
index 927a96d9a1f..eab5b81d777 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.features.stories.tsx
@@ -139,10 +139,10 @@ IconOnly.storyName = 'Icon only'
 export const AssociatedWithALabelAndCaption = () => (
   <div className={classes.LabelAndCaptionContainer}>
     <div className={classes.LabelAndCaption}>
-      <Text fontSize={2} fontWeight="bold" id="scLabel-vert" display="block">
+      <Text className={classes.TextLargeBold} id="scLabel-vert" display="block">
         File view
       </Text>
-      <Text color="fg.subtle" fontSize={1} id="scCaption-vert" display="block">
+      <Text className={classes.TextMediumSubtle} id="scCaption-vert" display="block">
         Change the way the file is viewed
       </Text>
     </div>
diff --git a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
index a8ba175b04c..5db418a413a 100644
--- a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
@@ -248,9 +248,7 @@ export const AllVariants = () => {
 
   return (
     <>
-      <Text fontSize={3} fontWeight="bold">
-        Showcase of all the SelectPanel variants
-      </Text>
+      <Text className={classes.TextTitleMediumBold}>Showcase of all the SelectPanel variants</Text>
       <br />
       <Text>
         Test the different interactions below to see how the SelectPanel behaves in different selection and anchoring
@@ -266,9 +264,7 @@ export const AllVariants = () => {
       <br />
       <br />
 
-      <Text fontSize={2} fontWeight="bold">
-        Extra controls:
-      </Text>
+      <Text className={classes.TextLargeBold}>Extra controls:</Text>
       <FormControl>
         <FormControl.Label>secondaryAction</FormControl.Label>
         <Select value={secondaryAction} onChange={e => setSecondaryAction(e.target.value)}>
diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.module.css b/packages/react/src/SelectPanel/SelectPanel.features.stories.module.css
index fc3a583305d..034c1fe28ed 100644
--- a/packages/react/src/SelectPanel/SelectPanel.features.stories.module.css
+++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.module.css
@@ -12,3 +12,8 @@
   color: var(--fgColor-muted);
   display: inline-block;
 }
+
+.TextLargeBold {
+  font-size: var(--text-body-size-large);
+  font-weight: var(--base-text-weight-semibold);
+}
diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
index b450a4ab45a..76193eeb64b 100644
--- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
@@ -650,7 +650,7 @@ export const CustomisedNoInitialItems = () => {
 
   return (
     <>
-      <Text id="toggle" fontWeight={'bold'} fontSize={2}>
+      <Text id="toggle" className={classes.TextLargeBold}>
         Enable Error State :{isError ? 'On' : 'Off'}
       </Text>
       <ToggleSwitch onClick={onClick} checked={isError} aria-labelledby="toggle" />
diff --git a/packages/react/src/SelectPanel/SelectPanel.stories.module.css b/packages/react/src/SelectPanel/SelectPanel.stories.module.css
index d4233de92a1..73dc3adabbd 100644
--- a/packages/react/src/SelectPanel/SelectPanel.stories.module.css
+++ b/packages/react/src/SelectPanel/SelectPanel.stories.module.css
@@ -6,3 +6,8 @@
   border-width: var(--borderWidth-thin);
   border-style: solid;
 }
+
+.TextLargeBold {
+  font-size: var(--text-body-size-large);
+  font-weight: var(--base-text-weight-semibold);
+}
diff --git a/packages/react/src/Text/Text.docs.json b/packages/react/src/Text/Text.docs.json
index ae33a19eef5..bc7eceb7ffe 100644
--- a/packages/react/src/Text/Text.docs.json
+++ b/packages/react/src/Text/Text.docs.json
@@ -41,12 +41,7 @@
       "name": "as",
       "defaultValue": "'span'",
       "type": "React.ElementType"
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
-    },
+    }, 
     {
       "name": "size",
       "type": "'large' | 'medium' | 'small'"
diff --git a/packages/react/src/Text/Text.stories.tsx b/packages/react/src/Text/Text.stories.tsx
index 7b053088702..36f2bab2566 100644
--- a/packages/react/src/Text/Text.stories.tsx
+++ b/packages/react/src/Text/Text.stories.tsx
@@ -20,12 +20,6 @@ Playground.argTypes = {
   as: {
     type: 'string',
   },
-  sx: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
   ref: {
     controls: false,
     table: {
diff --git a/packages/react/src/Text/Text.test.module.css b/packages/react/src/Text/Text.test.module.css
new file mode 100644
index 00000000000..472cb03fd93
--- /dev/null
+++ b/packages/react/src/Text/Text.test.module.css
@@ -0,0 +1,66 @@
+/* CSS classes for Text component tests */
+
+.BoldText {
+  font-weight: var(--base-text-weight-semibold);
+}
+
+.NormalWeight {
+  font-weight: var(--base-text-weight-normal);
+}
+
+.ItalicText {
+  font-style: italic;
+}
+
+.NormalStyle {
+  font-style: normal;
+}
+
+.MonoFont {
+  font-family: var(--fontStack-monospace);
+}
+
+.LargeText {
+  font-size: var(--text-title-size-large);
+}
+
+.ExtraLargeText {
+  /* stylelint-disable-next-line primer/typography */
+  font-size: var(--base-size-96);
+}
+
+.SmallFont {
+  font-size: var(--text-body-size-small);
+}
+
+.MediumFont {
+  font-size: var(--text-body-size-large);
+}
+
+.CondensedLine {
+  line-height: var(--text-body-lineHeight-medium);
+}
+
+.DefaultLine {
+  line-height: var(--text-body-lineHeight-large);
+}
+
+.ResponsiveFont {
+  font-size: var(--text-body-size-medium);
+}
+
+@media (min-width: 768px) {
+  .ResponsiveFont {
+    font-size: var(--text-body-size-large);
+  }
+}
+
+.ResponsiveLine {
+  line-height: var(--text-body-lineHeight-medium);
+}
+
+@media (min-width: 768px) {
+  .ResponsiveLine {
+    line-height: var(--text-body-lineHeight-large);
+  }
+}
diff --git a/packages/react/src/Text/Text.test.tsx b/packages/react/src/Text/Text.test.tsx
index 62ed2818296..fa3bdc88310 100644
--- a/packages/react/src/Text/Text.test.tsx
+++ b/packages/react/src/Text/Text.test.tsx
@@ -1,6 +1,7 @@
 import {Text} from '..'
 import {render} from '@testing-library/react'
 import {describe, it, expect} from 'vitest'
+import testClasses from './Text.test.module.css'
 
 describe('Text', () => {
   it('renders a <span> by default', () => {
@@ -28,27 +29,27 @@ describe('Text', () => {
     expect(container.firstChild).toHaveAttribute('data-testid', 'text-element')
   })
 
-  it('respects fontWeight', () => {
-    const {container} = render(<Text fontWeight="bold">Bold text</Text>)
+  it('applies bold font weight with CSS class', () => {
+    const {container} = render(<Text className={testClasses.BoldText}>Bold text</Text>)
     const textElement = container.firstChild as HTMLElement
-    expect(getComputedStyle(textElement).fontWeight).toBe('700')
+    expect(getComputedStyle(textElement).fontWeight).toBe('600')
   })
 
-  it('respects fontWeight normal', () => {
-    const {container} = render(<Text fontWeight="normal">Normal text</Text>)
+  it('applies normal font weight with CSS class', () => {
+    const {container} = render(<Text className={testClasses.NormalWeight}>Normal text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(getComputedStyle(textElement).fontWeight).toBe('400')
   })
 
-  it('respects the "fontStyle" prop', () => {
-    const {container} = render(<Text fontStyle="italic">Italic text</Text>)
+  it('applies italic font style with CSS class', () => {
+    const {container} = render(<Text className={testClasses.ItalicText}>Italic text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(getComputedStyle(textElement).fontStyle).toBe('italic')
   })
 
-  it('respects fontStyle normal', () => {
+  it('applies normal font style with CSS class', () => {
     const {container} = render(
-      <Text as="i" fontStyle="normal">
+      <Text as="i" className={testClasses.NormalStyle}>
         Not italic
       </Text>,
     )
@@ -56,54 +57,58 @@ describe('Text', () => {
     expect(getComputedStyle(textElement).fontStyle).toBe('normal')
   })
 
-  it('respects fontFamily="mono"', () => {
-    const {container} = render(<Text fontFamily="mono">Monospace text</Text>)
+  it('applies monospace font family with CSS class', () => {
+    const {container} = render(<Text className={testClasses.MonoFont}>Monospace text</Text>)
     const textElement = container.firstChild as HTMLElement
     const fontFamily = getComputedStyle(textElement).fontFamily
     expect(fontFamily).toContain('mono')
   })
 
-  it('respects other values for fontSize', () => {
-    const {container} = render(<Text fontSize="2em">Large text</Text>)
+  it('applies large font size with CSS class', () => {
+    const {container} = render(<Text className={testClasses.LargeText}>Large text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(getComputedStyle(textElement).fontSize).toBe('32px')
   })
 
-  it('respects numeric fontSize values', () => {
-    const {container} = render(<Text fontSize={100}>Very large text</Text>)
+  it('applies extra large font size with CSS class', () => {
+    const {container} = render(<Text className={testClasses.ExtraLargeText}>Very large text</Text>)
     const textElement = container.firstChild as HTMLElement
-    expect(getComputedStyle(textElement).fontSize).toBe('100px')
+    expect(getComputedStyle(textElement).fontSize).toBe('96px')
   })
 
-  it('applies theme fontSize values', () => {
-    // Test different fontSize values from the theme
-    const fontSizes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-    for (const size of fontSizes) {
-      const {container} = render(<Text fontSize={size}>Text</Text>)
+  it('applies different font sizes with CSS classes', () => {
+    // Test different fontSize values using CSS classes
+    const fontSizeClasses = [testClasses.SmallFont, testClasses.MediumFont]
+    for (const fontClass of fontSizeClasses) {
+      const {container} = render(<Text className={fontClass}>Text</Text>)
       const textElement = container.firstChild as HTMLElement
       expect(textElement).toBeInTheDocument()
+      expect(textElement).toHaveClass(fontClass)
     }
   })
 
-  it('applies theme lineHeight values', () => {
-    // Test different lineHeight values
-    const lineHeights = ['condensed', 'condensedUltra', 'default']
-    for (const lineHeight of lineHeights) {
-      const {container} = render(<Text lineHeight={lineHeight}>Text</Text>)
+  it('applies different line heights with CSS classes', () => {
+    // Test different lineHeight values using CSS classes
+    const lineHeightClasses = [testClasses.CondensedLine, testClasses.DefaultLine]
+    for (const lineClass of lineHeightClasses) {
+      const {container} = render(<Text className={lineClass}>Text</Text>)
       const textElement = container.firstChild as HTMLElement
       expect(textElement).toBeInTheDocument()
+      expect(textElement).toHaveClass(lineClass)
     }
   })
 
-  it('supports responsive fontSize arrays', () => {
-    const {container} = render(<Text fontSize={[1, 2]}>Responsive text</Text>)
+  it('supports responsive font size with CSS classes', () => {
+    const {container} = render(<Text className={testClasses.ResponsiveFont}>Responsive text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(textElement).toBeInTheDocument()
+    expect(textElement).toHaveClass(testClasses.ResponsiveFont)
   })
 
-  it('supports responsive lineHeight arrays', () => {
-    const {container} = render(<Text lineHeight={['condensed', 'default']}>Responsive text</Text>)
+  it('supports responsive line height with CSS classes', () => {
+    const {container} = render(<Text className={testClasses.ResponsiveLine}>Responsive text</Text>)
     const textElement = container.firstChild as HTMLElement
     expect(textElement).toBeInTheDocument()
+    expect(textElement).toHaveClass(testClasses.ResponsiveLine)
   })
 })
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 26a9cd1f41f..c3e63438856 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -2,10 +2,8 @@ import {clsx} from 'clsx'
 import {type StyledComponent} from 'styled-components'
 import React, {forwardRef} from 'react'
 import type {SystemCommonProps, SystemTypographyProps} from '../constants'
-import type {SxProp} from '../sx'
 import {useRefObjectAsForwardedRef} from '../hooks'
 import classes from './Text.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 type StyledTextProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -14,7 +12,6 @@ type StyledTextProps = {
   weight?: 'light' | 'normal' | 'medium' | 'semibold'
 } & SystemTypographyProps &
   SystemCommonProps &
-  SxProp &
   React.HTMLAttributes<HTMLSpanElement>
 
 const Text = forwardRef(({as: Component = 'span', className, size, weight, ...props}, forwardedRef) => {
@@ -22,8 +19,7 @@ const Text = forwardRef(({as: Component = 'span', className, size, weight, ...pr
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
   return (
-    <BoxWithFallback
-      as={Component}
+    <Component
       className={clsx(className, classes.Text)}
       data-size={size}
       data-weight={weight}
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
index 4b55d451b29..75fa82130b9 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
@@ -40,3 +40,23 @@
     flex-shrink: 0;
   }
 }
+
+.OverflowCountSmall {
+  color: var(--fgColor-muted);
+  font-size: var(--text-body-size-small);
+}
+
+.OverflowCountMedium {
+  color: var(--fgColor-muted);
+  font-size: var(--text-body-size-medium);
+}
+
+.OverflowCountLarge {
+  color: var(--fgColor-muted);
+  font-size: var(--text-body-size-medium);
+}
+
+.OverflowCountXLarge {
+  color: var(--fgColor-muted);
+  font-size: var(--text-body-size-large);
+}
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index a0f3b0a2954..01b89d24554 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -64,11 +64,11 @@ export type TextInputWithTokensProps<TokenComponentType extends AnyReactComponen
   visibleTokenCount?: number
 } & Omit<TextInputProps, 'size'>
 
-const overflowCountFontSizeMap: Record<TokenSizeKeys, number> = {
-  small: 0,
-  medium: 1,
-  large: 1,
-  xlarge: 2,
+const overflowCountClassMap: Record<TokenSizeKeys, string> = {
+  small: styles.OverflowCountSmall,
+  medium: styles.OverflowCountMedium,
+  large: styles.OverflowCountLarge,
+  xlarge: styles.OverflowCountXLarge,
 }
 
 // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
@@ -319,9 +319,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
           />
         ))}
         {tokensAreTruncated && tokens.length - visibleTokens.length ? (
-          <Text color="fg.muted" fontSize={overflowCountFontSizeMap[size]}>
-            +{tokens.length - visibleTokens.length}
-          </Text>
+          <Text className={overflowCountClassMap[size]}>+{tokens.length - visibleTokens.length}</Text>
         ) : null}
       </div>
       <TextInputInnerVisualSlot
diff --git a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
index 940998b6a58..64b2f26be43 100644
--- a/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/packages/react/src/TextInputWithTokens/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -1033,9 +1033,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
             </span>
           </span>
           <span
-            class="sc-aXZVg eKNwWh prc-Text-Text-jAl-N"
-            color="fg.muted"
-            font-size="2"
+            class="prc-TextInputWithTokens-OverflowCountXLarge-zydSJ prc-Text-Text-jAl-N"
           >
             +
             6
@@ -1154,9 +1152,7 @@ exports[`TextInputWithTokens > renders a truncated set of tokens 1`] = `
           </span>
         </span>
         <span
-          class="sc-aXZVg eKNwWh prc-Text-Text-jAl-N"
-          color="fg.muted"
-          font-size="2"
+          class="prc-TextInputWithTokens-OverflowCountXLarge-zydSJ prc-Text-Text-jAl-N"
         >
           +
           6
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.stories.module.css b/packages/react/src/ToggleSwitch/ToggleSwitch.stories.module.css
new file mode 100644
index 00000000000..e97bcbb8d80
--- /dev/null
+++ b/packages/react/src/ToggleSwitch/ToggleSwitch.stories.module.css
@@ -0,0 +1,9 @@
+.TextMediumBold {
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+}
+
+.TextLargeBold {
+  font-size: var(--text-body-size-large);
+  font-weight: var(--base-text-weight-semibold);
+}
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.stories.tsx b/packages/react/src/ToggleSwitch/ToggleSwitch.stories.tsx
index 31f12cc92b4..3b20150974f 100644
--- a/packages/react/src/ToggleSwitch/ToggleSwitch.stories.tsx
+++ b/packages/react/src/ToggleSwitch/ToggleSwitch.stories.tsx
@@ -3,6 +3,7 @@ import type {ComponentProps} from '../utils/types'
 import ToggleSwitch from './ToggleSwitch'
 import {Text} from '..'
 import ToggleSwitchStoryWrapper from './ToggleSwitchStoryWrapper'
+import classes from './ToggleSwitch.stories.module.css'
 
 export default {
   title: 'Components/ToggleSwitch',
@@ -16,7 +17,7 @@ export default {
 
 export const Playground: StoryFn<typeof ToggleSwitch> = args => (
   <>
-    <Text id="toggle" fontWeight={'bold'} fontSize={2}>
+    <Text id="toggle" className={classes.TextLargeBold}>
       Toggle label
     </Text>
     <ToggleSwitch {...args} aria-labelledby="toggle" />
@@ -65,7 +66,7 @@ Playground.argTypes = {
 
 export const Default = () => (
   <>
-    <Text id="toggle" fontWeight="bold" fontSize={1}>
+    <Text id="toggle" className={classes.TextMediumBold}>
       Toggle label
     </Text>
     <ToggleSwitch aria-labelledby="toggle" />
diff --git a/packages/react/src/__tests__/ThemeProvider.test.tsx b/packages/react/src/__tests__/ThemeProvider.test.tsx
index 0ac937b6880..c51a9450fa2 100644
--- a/packages/react/src/__tests__/ThemeProvider.test.tsx
+++ b/packages/react/src/__tests__/ThemeProvider.test.tsx
@@ -2,7 +2,7 @@ import {render, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {describe, expect, it, vi} from 'vitest'
 import React from 'react'
-import {Text, ThemeProvider, useColorSchemeVar, useTheme} from '..'
+import {Box, ThemeProvider, useColorSchemeVar, useTheme} from '..'
 
 // window.matchMedia() is not implemented by JSDOM so we have to create a mock:
 // https://vijs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
@@ -53,9 +53,9 @@ it('respects theme prop', () => {
 
   render(
     <ThemeProvider theme={theme}>
-      <Text color="text" mb={1}>
+      <Box color="text" mb={1}>
         Hello
-      </Text>
+      </Box>
     </ThemeProvider>,
   )
 
@@ -66,9 +66,9 @@ it('respects theme prop', () => {
 it('has default theme', () => {
   render(
     <ThemeProvider>
-      <Text color="fg.default" mb={1}>
+      <Box color="fg.default" mb={1}>
         Hello
-      </Text>
+      </Box>
     </ThemeProvider>,
   )
 
@@ -79,7 +79,7 @@ it('inherits theme from parent', () => {
   render(
     <ThemeProvider theme={exampleTheme}>
       <ThemeProvider>
-        <Text color="text">Hello</Text>
+        <Box color="text">Hello</Box>
       </ThemeProvider>
     </ThemeProvider>,
   )
@@ -90,7 +90,7 @@ it('inherits theme from parent', () => {
 it('defaults to light color scheme', () => {
   render(
     <ThemeProvider theme={exampleTheme}>
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -100,7 +100,7 @@ it('defaults to light color scheme', () => {
 it('defaults to dark color scheme in night mode', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="night">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -112,7 +112,7 @@ it('defaults to first color scheme when passed an invalid color scheme name', ()
 
   render(
     <ThemeProvider theme={exampleTheme} dayScheme="foo">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -125,7 +125,7 @@ it('defaults to first color scheme when passed an invalid color scheme name', ()
 it('respects nightScheme prop', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme="dark_dimmed">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -135,7 +135,7 @@ it('respects nightScheme prop', () => {
 it('respects nightScheme prop with colorMode="dark"', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="dark" nightScheme="dark_dimmed">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -145,7 +145,7 @@ it('respects nightScheme prop with colorMode="dark"', () => {
 it('respects dayScheme prop', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -155,7 +155,7 @@ it('respects dayScheme prop', () => {
 it('respects dayScheme prop with colorMode="light"', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="light" dayScheme="dark" nightScheme="dark_dimmed">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -165,7 +165,7 @@ it('respects dayScheme prop with colorMode="light"', () => {
 it('works in auto mode', () => {
   render(
     <ThemeProvider theme={exampleTheme} colorMode="auto">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -186,7 +186,7 @@ it('works in auto mode (dark)', () => {
 
   render(
     <ThemeProvider theme={exampleTheme} colorMode="auto">
-      <Text color="text">Hello</Text>
+      <Box color="text">Hello</Box>
     </ThemeProvider>,
   )
 
@@ -202,7 +202,7 @@ it('updates when colorMode prop changes', async () => {
     const [colorMode, setColorMode] = React.useState<'day' | 'night'>('day')
     return (
       <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
-        <Text color="text">{colorMode}</Text>
+        <Box color="text">{colorMode}</Box>
         <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
           Toggle
         </button>
@@ -230,7 +230,7 @@ it('updates when dayScheme prop changes', async () => {
     const [dayScheme, setDayScheme] = React.useState('light')
     return (
       <ThemeProvider theme={exampleTheme} dayScheme={dayScheme}>
-        <Text color="text">{dayScheme}</Text>
+        <Box color="text">{dayScheme}</Box>
         <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
           Toggle
         </button>
@@ -258,7 +258,7 @@ it('updates when nightScheme prop changes', async () => {
     const [nightScheme, setNightScheme] = React.useState('dark')
     return (
       <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme={nightScheme}>
-        <Text color="text">{nightScheme}</Text>
+        <Box color="text">{nightScheme}</Box>
         <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
           Toggle
         </button>
@@ -290,7 +290,7 @@ it('inherits colorMode from parent', async () => {
           Toggle
         </button>
         <ThemeProvider>
-          <Text color="text">{colorMode}</Text>
+          <Box color="text">{colorMode}</Box>
         </ThemeProvider>
       </ThemeProvider>
     )
@@ -316,7 +316,7 @@ it('inherits dayScheme from parent', async () => {
           Toggle
         </button>
         <ThemeProvider colorMode="day">
-          <Text color="text">{dayScheme}</Text>
+          <Box color="text">{dayScheme}</Box>
         </ThemeProvider>
       </ThemeProvider>
     )
@@ -342,7 +342,7 @@ it('inherits nightScheme from parent', async () => {
           Toggle
         </button>
         <ThemeProvider colorMode="night">
-          <Text color="text">{nightScheme}</Text>
+          <Box color="text">{nightScheme}</Box>
         </ThemeProvider>
       </ThemeProvider>
     )
@@ -372,7 +372,7 @@ describe('setColorMode', () => {
 
     render(
       <ThemeProvider theme={exampleTheme} colorMode="day">
-        <Text color="text">Hello</Text>
+        <Box color="text">Hello</Box>
         <ToggleMode />
       </ThemeProvider>,
     )
@@ -402,7 +402,7 @@ describe('setDayScheme', () => {
 
     render(
       <ThemeProvider theme={exampleTheme} colorMode="day">
-        <Text color="text">Hello</Text>
+        <Box color="text">Hello</Box>
         <ToggleDayScheme />
       </ThemeProvider>,
     )
@@ -432,7 +432,7 @@ describe('setNightScheme', () => {
 
     render(
       <ThemeProvider theme={exampleTheme} colorMode="night">
-        <Text color="text">Hello</Text>
+        <Box color="text">Hello</Box>
         <ToggleNightScheme />
       </ThemeProvider>,
     )
@@ -470,7 +470,7 @@ describe('useColorSchemeVar', () => {
         'inherit',
       )
 
-      return <Text bg={customBg}>Hello</Text>
+      return <Box bg={customBg}>Hello</Box>
     }
 
     render(
@@ -502,7 +502,7 @@ describe('useColorSchemeVar', () => {
     function CustomBg() {
       const customBg = useColorSchemeVar({dark: 'blue'}, 'red')
 
-      return <Text bg={customBg}>Hello</Text>
+      return <Box bg={customBg}>Hello</Box>
     }
 
     render(
@@ -525,7 +525,7 @@ describe('useTheme().resolvedColorScheme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
 
-      return <Text data-testid="text">{resolvedColorScheme}</Text>
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
     }
 
     render(<Component />)
@@ -537,7 +537,7 @@ describe('useTheme().resolvedColorScheme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
 
-      return <Text data-testid="text">{resolvedColorScheme}</Text>
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
     }
 
     render(
@@ -553,7 +553,7 @@ describe('useTheme().resolvedColorScheme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
 
-      return <Text data-testid="text">{resolvedColorScheme}</Text>
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
     }
 
     const schemeToApply = 'dark'
@@ -573,7 +573,7 @@ describe('useTheme().resolvedColorScheme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
 
-      return <Text data-testid="text">{resolvedColorScheme}</Text>
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
     }
 
     const schemeToApply = 'totally-invalid-colorscheme'
@@ -598,7 +598,7 @@ describe('useTheme().resolvedColorScheme', () => {
       const Component = () => {
         const {resolvedColorScheme} = useTheme()
 
-        return <Text data-testid="text">{resolvedColorScheme}</Text>
+        return <Box data-testid="text">{resolvedColorScheme}</Box>
       }
 
       const schemeToApply = 'dark'
@@ -621,7 +621,7 @@ describe('useTheme().resolvedColorScheme', () => {
       const Component = () => {
         const {resolvedColorScheme} = useTheme()
 
-        return <Text data-testid="text">{resolvedColorScheme}</Text>
+        return <Box data-testid="text">{resolvedColorScheme}</Box>
       }
 
       const schemeToApply = 'totally-invalid-colorscheme'
diff --git a/packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
index 1d218553be9..ab7d44ec634 100644
--- a/packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`has default theme 1`] = `
-<span
-  class="sc-aXZVg hPmBIl prc-Text-Text-jAl-N"
+<div
+  class="sc-aXZVg hPmBIl"
   color="fg.default"
 >
   Hello
-</span>
+</div>
 `;
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css
index 731d400ca03..e7896e2c805 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css
@@ -15,6 +15,10 @@
   color: var(--fgColor-muted);
 }
 
+.TextMuted {
+  color: var(--fgColor-muted);
+}
+
 .FilterButtons {
   display: flex;
   margin-top: var(--base-size-4);
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
index b21b6b87d07..49506802d89 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
@@ -643,7 +643,7 @@ export const ShortSelectPanel = () => {
       </p>
       <SelectPanel title="Select notification channels" onSubmit={onSubmit} onCancel={onCancel}>
         <SelectPanel.Button>
-          <Text sx={{color: 'fg.muted'}}>Notify me:</Text>{' '}
+          <Text className={classes.TextMuted}>Notify me:</Text>{' '}
           {Object.keys(channels)
             .filter(channel => channels[channel as keyof typeof channels])
             .join(', ') || 'Never'}
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx
index bd7735d1fb3..1aa1bcd45b3 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx
@@ -7,10 +7,10 @@ import {clsx} from 'clsx'
 
 type CheckboxOrRadioGroupCaptionProps = React.PropsWithChildren<SxProp> & {className?: string}
 
-const CheckboxOrRadioGroupCaption: React.FC<CheckboxOrRadioGroupCaptionProps> = ({className, children, sx}) => {
+const CheckboxOrRadioGroupCaption: React.FC<CheckboxOrRadioGroupCaptionProps> = ({className, children}) => {
   const {captionId} = React.useContext(CheckboxOrRadioGroupContext)
   return (
-    <Text className={clsx(className, classes.CheckboxOrRadioGroupCaption)} id={captionId} sx={sx}>
+    <Text className={clsx(className, classes.CheckboxOrRadioGroupCaption)} id={captionId}>
       {children}
     </Text>
   )
diff --git a/packages/react/src/internal/components/InputValidation.tsx b/packages/react/src/internal/components/InputValidation.tsx
index fd5d3344956..4dd5bb5bf95 100644
--- a/packages/react/src/internal/components/InputValidation.tsx
+++ b/packages/react/src/internal/components/InputValidation.tsx
@@ -21,7 +21,7 @@ const validationIconMap: Record<
   error: AlertFillIcon,
 }
 
-const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, className, id, validationStatus, sx}) => {
+const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, className, id, validationStatus}) => {
   const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined
 
   // TODO: use `text-caption-lineHeight` token as a custom property when it's available
@@ -31,7 +31,7 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, cl
   const iconBoxMinHeight = iconSize * captionLineHeight
 
   return (
-    <Text className={clsx(className, classes.InputValidation)} data-validation-status={validationStatus} sx={sx}>
+    <Text className={clsx(className, classes.InputValidation)} data-validation-status={validationStatus}>
       {IconComponent ? (
         <span
           aria-hidden="true"
diff --git a/packages/styled-react/src/components/Text.tsx b/packages/styled-react/src/components/Text.tsx
new file mode 100644
index 00000000000..ee1c22a6385
--- /dev/null
+++ b/packages/styled-react/src/components/Text.tsx
@@ -0,0 +1,21 @@
+import {Text as PrimerText, type TextProps as PrimerTextProps} from '@primer/react'
+import {sx, type SxProp} from '../sx'
+import styled from 'styled-components'
+import type React from 'react'
+import {type StyledComponent} from 'styled-components'
+import {forwardRef} from 'react'
+
+type TextProps = PrimerTextProps & SxProp
+
+const StyledText = styled(PrimerText).withConfig<TextProps>({
+  shouldForwardProp: prop => (prop as keyof TextProps) !== 'sx',
+})<TextProps>`
+  ${sx}
+`
+
+const Text = forwardRef<'span', TextProps>(({as, ...props}, ref) => {
+  return <StyledText {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}) as StyledComponent<'span', any, TextProps, never>
+
+export {Text, type TextProps}
diff --git a/packages/styled-react/src/components/Token.tsx b/packages/styled-react/src/components/Token.tsx
index 2564a1e5ff1..1a0e2102744 100644
--- a/packages/styled-react/src/components/Token.tsx
+++ b/packages/styled-react/src/components/Token.tsx
@@ -15,7 +15,7 @@ type TokenProps = PropsWithChildren<PrimerTokenProps> & SxProp
 const Token: ForwardRefComponent<'a' | 'button' | 'span', TokenProps> = React.forwardRef<HTMLElement, TokenProps>(
   ({sx: sxProp, style, ...rest}, ref) => {
     const contextTheme = useTheme()
-    const theme = contextTheme?.theme || defaultTheme
+    const theme = contextTheme.theme || defaultTheme
 
     // If no sx prop is provided, just return PrimerToken directly
     if (!sxProp) {
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index da4ea253af7..2f0a5b90e3e 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -6,7 +6,6 @@ export {Details} from '@primer/react'
 export {IconButton} from '@primer/react'
 export {ProgressBar} from '@primer/react'
 export {Select} from '@primer/react'
-export {Text} from '@primer/react'
 export {Textarea} from '@primer/react'
 export {TextInput} from '@primer/react'
 export {type TextInputProps} from '@primer/react'
@@ -54,6 +53,7 @@ export {
 export {Spinner, type SpinnerProps} from './components/Spinner'
 export {StateLabel, type StateLabelProps} from './components/StateLabel'
 export {SubNav, type SubNavProps, type SubNavLinkProps} from './components/SubNav'
+export {Text, type TextProps} from './components/Text'
 export {
   Timeline,
   type TimelineProps,