diff --git a/.changeset/thin-ligers-turn.md b/.changeset/thin-ligers-turn.md
new file mode 100644
index 00000000000..75d28e96077
--- /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 8811cb8ad31..1f43f565228 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 8ca43277629..0e4658786de 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 0a96ed5f783..84d26e997cc 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 9153b0967b3..d794c3a9a12 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 8811cb8ad31..1f43f565228 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 d01e6236894..f62dbd7e430 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 1b9c8687d75..f589e60f443 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 8ca43277629..0e4658786de 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 8811cb8ad31..1f43f565228 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 8ca43277629..0e4658786de 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 2883c76e5a1..d23d83f9bf7 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 a2d9b9de1d6..4ad792342d5 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 2883c76e5a1..d23d83f9bf7 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 5117c4f7aaf..9f23edafd0f 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 55ac1812066..b0117e04891 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 a2d9b9de1d6..4ad792342d5 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 2883c76e5a1..d23d83f9bf7 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 a2d9b9de1d6..4ad792342d5 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 d70083c57f9..04964a4f3c8 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 39436c33531..010777c4a2a 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(:not(a)) {
+    color: var(--fgColor-muted);
+  }
   ${sx};
 `