diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index d096f2719..a3189ed2b 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -10,7 +10,7 @@ export default function NotFound() {
         <h1 className="mt-3 font-display text-3xl tracking-tight text-slate-900 dark:text-white">
           Page not found
         </h1>
-        <p className="mt-2 text-sm text-slate-500 dark:text-dark-text-secondary">
+        <p className="mt-2 text-sm text-slate-500 dark:text-dark-paragraph-text">
           Sorry, we couldn’t find the page you’re looking for.
         </p>
         <Link
diff --git a/src/components/Prose.tsx b/src/components/Prose.tsx
index 9bf525ae1..7cba80a8c 100644
--- a/src/components/Prose.tsx
+++ b/src/components/Prose.tsx
@@ -13,13 +13,13 @@ export function Prose<T extends React.ElementType = 'div'>({
 		<Component
 			className={clsx(
 				className,
-				'prose prose-slate max-w-none dark:prose-invert dark:text-dark-text-secondary',
+				'prose prose-slate max-w-none dark:prose-invert dark:text-dark-paragraph-text',
 				// headings
 				'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]',
 				// For headings anchor
 				'prose-headings:relative prose-headings:flex prose-headings:items-center',
 				// lead
-				'prose-lead:text-slate-500 dark:prose-lead:text-dark-text-secondary',
+				'prose-lead:text-slate-500 dark:prose-lead:text-dark-paragraph-text',
 				// links
 				'prose-a:font-semibold prose-a:text-vermilion-00 hover:prose-a-text:[#606060] visited:text-[#4A4A4A] hover:visited:text-[#606060] dark:prose-a:vermilion-11 dark:hover:prose-a:dark-text-secondary dark:visited:text-[#606060] dark:hover:visited:text-[#A9A9A9]',
 				// link underline
diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
index 1e7245694..ca1f23680 100644
--- a/src/components/ThemeSelector.tsx
+++ b/src/components/ThemeSelector.tsx
@@ -73,7 +73,7 @@ export function ThemeSelector(
 									'text-link': selected,
 									'text-slate-700 dark:text-white':
 										active && !selected,
-									'text-slate-700 dark:text-dark-text-secondary':
+									'text-slate-700 dark:text-dark-paragraph-text':
 										!active && !selected,
 									'bg-vermilion-08 text-vermilion-11': active
 								},
diff --git a/src/components/VersionSelector.tsx b/src/components/VersionSelector.tsx
index 742156016..a3eac47f7 100644
--- a/src/components/VersionSelector.tsx
+++ b/src/components/VersionSelector.tsx
@@ -39,7 +39,7 @@ export default function VersionSelector() {
 			<div>
 				<Menu.Button
 					className="inline-flex w-full items-center justify-center gap-x-1.5
-				rounded-md px-2 py-2 text-xs font-medium text-slate-500 shadow-sm ring-1 ring-inset ring-light-border-2 hover:bg-vermilion-08 hover:text-vermilion-11 dark:bg-dark-bg-2 dark:text-dark-text-secondary dark:ring-inset dark:ring-dark-border"
+				rounded-md px-2 py-2 text-xs font-medium text-slate-500 shadow-sm ring-1 ring-inset ring-light-border-2 hover:bg-vermilion-08 hover:text-vermilion-11 dark:bg-dark-bg-2 dark:text-dark-paragraph-text dark:ring-inset dark:ring-dark-border"
 				>
 					{selectedVersion.name}
 					<ChevronDownIcon
@@ -58,7 +58,7 @@ export default function VersionSelector() {
 				leaveFrom="transform opacity-100 scale-100"
 				leaveTo="transform opacity-0 scale-95"
 			>
-				<Menu.Items className="divide- absolute right-0 z-10 mt-2 flex w-32 origin-top-right flex-col divide-light-border rounded-md bg-light-bg-1 text-xs text-slate-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:divide-dark-border dark:bg-dark-bg-2 dark:text-dark-text-secondary sm:w-48 sm:text-sm">
+				<Menu.Items className="divide- absolute right-0 z-10 mt-2 flex w-32 origin-top-right flex-col divide-light-border rounded-md bg-light-bg-1 text-xs text-slate-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:divide-dark-border dark:bg-dark-bg-2 dark:text-dark-paragraph-text sm:w-48 sm:text-sm">
 					{/* Versions */}
 					{versions.length > 0 &&
 						versions.map((version, count) => (
diff --git a/src/components/mdx/LinkCards.tsx b/src/components/mdx/LinkCards.tsx
index 751d2ddb8..8e43e1b3f 100644
--- a/src/components/mdx/LinkCards.tsx
+++ b/src/components/mdx/LinkCards.tsx
@@ -36,7 +36,7 @@ export function LinkCard({
 					<h3 className="slate-900 font-display text-xl dark:text-white">
 						{title}
 					</h3>
-					<p className="font-normal text-slate-700 dark:text-dark-text-secondary">
+					<p className="font-normal text-slate-700 dark:text-dark-paragraph-text">
 						{description}
 					</p>
 					<CustomLink version={version} href={href}>
diff --git a/src/components/mdx/ProductCards.tsx b/src/components/mdx/ProductCards.tsx
index 7d81b3b6e..ac298fb5e 100644
--- a/src/components/mdx/ProductCards.tsx
+++ b/src/components/mdx/ProductCards.tsx
@@ -37,7 +37,7 @@ export function ProductCard({
 						</CustomLink>
 					</h2>
 
-					<p className="mt-1 text-sm text-slate-700 dark:text-dark-text-secondary">
+					<p className="mt-1 text-sm text-slate-700 dark:text-dark-paragraph-text">
 						{description}
 					</p>
 				</div>
diff --git a/src/components/mdx/QuickLinks.tsx b/src/components/mdx/QuickLinks.tsx
index 89026d4cc..6e95bbdea 100644
--- a/src/components/mdx/QuickLinks.tsx
+++ b/src/components/mdx/QuickLinks.tsx
@@ -35,7 +35,7 @@ export function QuickLink({
 						{title}
 					</CustomLink>
 				</h2>
-				<p className="mt-1 text-sm text-slate-700 dark:text-dark-text-secondary">
+				<p className="mt-1 text-sm text-slate-700 dark:text-dark-paragraph-text">
 					{description}
 				</p>
 			</div>
diff --git a/src/components/mdx/TierCallout.tsx b/src/components/mdx/TierCallout.tsx
index d5fe1b411..75fa62009 100644
--- a/src/components/mdx/TierCallout.tsx
+++ b/src/components/mdx/TierCallout.tsx
@@ -5,7 +5,7 @@ import { Users, Flag } from 'lucide-react';
 const styles = {
   container: 'border-slate-300 border-[#eaeaea] dark:border-[#333333]',
   icon: 'text-inherit',
-  body: 'text-[#334155] dark:text-dark-text-secondary'
+  body: 'text-[#334155] dark:text-dark-paragraph-text'
 };
 
 export function TierCallout({
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4c5cb7a8b..8f4780d30 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -84,6 +84,7 @@ export default {
       'light-text-muted': '#060000', // Vermilion-07
       'dark-text-primary': '#FFF3F0', // Vermilion-11
       'dark-text-secondary': '#A9A9A9',
+      'dark-paragraph-text': '#FFF3F0',
       'sggray': {
         100: '#F5F7FB',
         200: '#DBE2F0',