From df33924eb36cc996488b9fd8d200ace2a8784d2d Mon Sep 17 00:00:00 2001
From: Cole Peters <cole@colepeters.com>
Date: Wed, 4 Nov 2026 16:34:15 -0500
Subject: [PATCH] fix: apply --font-mono to code elements

---
 .changeset/violet-webs-report.md            |  5 +++++
 apps/storybook/src/stories/Text.stories.tsx | 12 ++++++++++++
 packages/ui/src/css/global/reset.css        |  4 ++++
 3 files changed, 21 insertions(+)
 create mode 100644 .changeset/violet-webs-report.md

diff --git a/.changeset/violet-webs-report.md b/.changeset/violet-webs-report.md
new file mode 100644
index 0000000000..556753ff5a
--- /dev/null
+++ b/.changeset/violet-webs-report.md
@@ -0,0 +1,5 @@
+---
+'@sanity/ui': patch
+---
+
+fix: apply --font-mono to code elements in reset
diff --git a/apps/storybook/src/stories/Text.stories.tsx b/apps/storybook/src/stories/Text.stories.tsx
index 15c3df11eb..1dda7622cf 100644
--- a/apps/storybook/src/stories/Text.stories.tsx
+++ b/apps/storybook/src/stories/Text.stories.tsx
@@ -171,3 +171,15 @@ export const Truncate: Story = {
     )
   },
 }
+
+export const NestedElements: Story = {
+  render: (props) => {
+    return (
+      <Text {...props}>
+        Here is a Text component with some nested semantic elements:{' '}
+        <strong>the strong element,</strong> <em>the emphasized element</em> and{' '}
+        <code>the code element.</code>
+      </Text>
+    )
+  },
+}
diff --git a/packages/ui/src/css/global/reset.css b/packages/ui/src/css/global/reset.css
index b614a361f0..d4be5c6155 100644
--- a/packages/ui/src/css/global/reset.css
+++ b/packages/ui/src/css/global/reset.css
@@ -74,6 +74,10 @@
   border-spacing: 0;
 }
 
+:where(code) {
+  font-family: var(--mono);
+}
+
 /* Enforce no animations for users that prefer reduced motion*/
 @media (prefers-reduced-motion: reduce) {
   *,