diff --git a/.changeset/thin-ligers-turn.md b/.changeset/thin-ligers-turn.md
new file mode 100644
index 000000000000..75d28e960773
--- /dev/null
+++ b/.changeset/thin-ligers-turn.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+BranchName: Fixing text color when rendered as span
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-focus-linux.png
index 8811cb8ad314..1f43f565228b 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-focus-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-linux.png
index 8ca43277629b..0e4658786de3 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-focus-linux.png
index 0a96ed5f783f..84d26e997ccb 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-focus-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-linux.png
index 9153b0967b3b..d794c3a9a12d 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-focus-linux.png
index 8811cb8ad314..1f43f565228b 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-focus-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-focus-linux.png
index d01e62368949..f62dbd7e4306 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-focus-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-linux.png
index 1b9c8687d75f..f589e60f4435 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-linux.png
index 8ca43277629b..0e4658786de3 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-focus-linux.png
index 8811cb8ad314..1f43f565228b 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-focus-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-linux.png
index 8ca43277629b..0e4658786de3 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-colorblind-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-colorblind-focus-linux.png
index 2883c76e5a12..d23d83f9bf7f 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-colorblind-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-colorblind-focus-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-colorblind-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-colorblind-linux.png
index a2d9b9de1d62..4ad792342d58 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-focus-linux.png
index 2883c76e5a12..d23d83f9bf7f 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-focus-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-high-contrast-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-high-contrast-focus-linux.png
index 5117c4f7aaf7..9f23edafd0f0 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-high-contrast-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-high-contrast-focus-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-high-contrast-linux.png
index 55ac1812066d..b0117e048914 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-linux.png
index a2d9b9de1d62..4ad792342d58 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-tritanopia-focus-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-tritanopia-focus-linux.png
index 2883c76e5a12..d23d83f9bf7f 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-tritanopia-focus-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-tritanopia-focus-linux.png differ
diff --git a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-tritanopia-linux.png
index a2d9b9de1d62..4ad792342d58 100644
Binary files a/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/BranchName.test.ts-snapshots/BranchName-Default-light-tritanopia-linux.png differ
diff --git a/packages/react/src/BranchName/BranchName.stories.tsx b/packages/react/src/BranchName/BranchName.stories.tsx
index d70083c57f98..04964a4f3c8e 100644
--- a/packages/react/src/BranchName/BranchName.stories.tsx
+++ b/packages/react/src/BranchName/BranchName.stories.tsx
@@ -1,10 +1,16 @@
 import React from 'react'
 import type {Meta} from '@storybook/react'
 import BranchName from './BranchName'
+import {Stack} from '../Stack'
 
 export default {
   title: 'Components/BranchName',
   component: BranchName,
 } as Meta<typeof BranchName>
 
-export const Default = () => <BranchName href="#">branch_name</BranchName>
+export const Default = () => (
+  <Stack align="start">
+    <BranchName href="#">branch_name</BranchName>
+    <BranchName as="span">branch_name as span</BranchName>
+  </Stack>
+)
diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx
index 39436c33531a..4e9da7cf0c6b 100644
--- a/packages/react/src/BranchName/BranchName.tsx
+++ b/packages/react/src/BranchName/BranchName.tsx
@@ -7,13 +7,15 @@ import type {ComponentProps} from '../utils/types'
 const BranchName = styled.a<SxProp>`
   display: inline-block;
   padding: 2px 6px;
-  font-size: ${get('fontSizes.0')};
-  font-family: ${get('fonts.mono')};
-  color: ${get('colors.accent.fg')};
-  background-color: ${get('colors.accent.subtle')};
-  border-radius: ${get('radii.2')};
+  font-size: var(--text-body-size-small, ${get('fontSizes.0')});
+  font-family: var(--fontStack-monospace, ${get('fonts.mono')});
+  color: var(--fgColor-link, ${get('colors.accent.fg')});
+  background-color: var(--bgColor-accent-muted, ${get('colors.accent.subtle')});
+  border-radius: var(--borderRadius-medium, ${get('radii.2')});
   text-decoration: none;
-
+  &:is(span) {
+    color: var(--fgColor-muted);
+  }
   ${sx};
 `