diff --git a/components/TempDesignSystem/Card/card.module.css b/components/TempDesignSystem/Card/card.module.css
index f158696a8..0235206fd 100644
--- a/components/TempDesignSystem/Card/card.module.css
+++ b/components/TempDesignSystem/Card/card.module.css
@@ -116,10 +116,6 @@
   margin: 0;
 }
 
-.heading {
-  color: var(--font-color);
-}
-
 .bodyText {
   color: var(--font-color);
 }
diff --git a/components/TempDesignSystem/Card/index.tsx b/components/TempDesignSystem/Card/index.tsx
index 4a2ab61a9..fb86ec715 100644
--- a/components/TempDesignSystem/Card/index.tsx
+++ b/components/TempDesignSystem/Card/index.tsx
@@ -5,6 +5,7 @@ import Button from "@/components/TempDesignSystem/Button"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getFontColor } from "@/utils/cardFontColor"
 import { getTheme } from "@/utils/cardTheme"
 
 import { cardVariants } from "./variants"
@@ -29,6 +30,9 @@ export default function Card({
   onSecondaryButtonClick,
 }: CardProps) {
   const buttonTheme = getTheme(theme)
+  const titleFontColor = getFontColor(theme)
+
+  console.log("woop woop", titleFontColor)
 
   imageHeight = imageHeight || 320
 
@@ -71,10 +75,10 @@ export default function Card({
         ) : null}
         <Title
           as="h4"
-          className={styles.heading}
           level="h3"
           textAlign="center"
           textTransform="regular"
+          color={titleFontColor}
         >
           {heading}
         </Title>
diff --git a/utils/cardFontColor.ts b/utils/cardFontColor.ts
new file mode 100644
index 000000000..76371891d
--- /dev/null
+++ b/utils/cardFontColor.ts
@@ -0,0 +1,16 @@
+import { CardProps } from "@/components/TempDesignSystem/Card/card"
+
+import { headingVariants } from "../components/TempDesignSystem/Text/Title/variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export function getFontColor(theme: CardProps["theme"]) {
+  let color: VariantProps<typeof headingVariants>["color"]
+
+  switch (theme) {
+    case "primaryDark":
+      return (color = "pale")
+    default:
+      return (color = "burgundy")
+  }
+}