diff --git a/.changeset/great-roses-pump.md b/.changeset/great-roses-pump.md
index 16a49bd464..0e15d186d4 100644
--- a/.changeset/great-roses-pump.md
+++ b/.changeset/great-roses-pump.md
@@ -4,7 +4,7 @@
 
 Previously, the color of the Entity Context Menu (in the Entity Page Header) was hardcoded as `white`.
 
-This was an issue for themes that use a header with a white background. By default, the color of the icon is now `theme.palette.bursts.fontColor`.
+This was an issue for themes that use a header with a white background. By default, the color of the icon is now `theme.page.fontColor`.
 
 It can now also be overridden in the theme, which is only necessary if the header title, subtitle and three-dots icon need to have different colors. For example:
 
diff --git a/.changeset/serious-houses-watch.md b/.changeset/serious-houses-watch.md
new file mode 100644
index 0000000000..63d5253bcb
--- /dev/null
+++ b/.changeset/serious-houses-watch.md
@@ -0,0 +1,7 @@
+---
+'@backstage/theme': patch
+---
+
+**DEPRECATED**: The `bursts` object from `BackstagePaletteAdditions` has been depreciated and will be removed in a future release
+
+The `genPageTheme` function now includes an optional options object with an optional `fontColor` which defaults to white if not provided.
diff --git a/.changeset/tricky-ravens-visit.md b/.changeset/tricky-ravens-visit.md
new file mode 100644
index 0000000000..8500c9b64e
--- /dev/null
+++ b/.changeset/tricky-ravens-visit.md
@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-catalog': patch
+---
+
+Updated to remove usage of the `bursts` object in the theme palette
diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx
index a32d116b56..1badb4eb98 100644
--- a/packages/core-components/src/layout/Header/Header.tsx
+++ b/packages/core-components/src/layout/Header/Header.tsx
@@ -66,13 +66,13 @@ const useStyles = makeStyles<BackstageTheme>(
       alignItems: 'center',
     },
     title: {
-      color: theme.palette.bursts.fontColor,
+      color: theme.page.fontColor,
       wordBreak: 'break-word',
       fontSize: theme.typography.h3.fontSize,
       marginBottom: 0,
     },
     subtitle: {
-      color: theme.palette.bursts.fontColor,
+      color: theme.page.fontColor,
       opacity: 0.8,
       display: 'inline-block', // prevents margin collapse of adjacent siblings
       marginTop: theme.spacing(1),
@@ -83,10 +83,10 @@ const useStyles = makeStyles<BackstageTheme>(
       fontSize: 11,
       opacity: 0.8,
       marginBottom: theme.spacing(1),
-      color: theme.palette.bursts.fontColor,
+      color: theme.page.fontColor,
     },
     breadcrumb: {
-      color: theme.palette.bursts.fontColor,
+      color: theme.page.fontColor,
     },
     breadcrumbType: {
       fontSize: 'inherit',
diff --git a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx
index a34d773ce3..d9443ffc9a 100644
--- a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx
+++ b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx
@@ -27,7 +27,7 @@ const styles = (theme: BackstageTheme) =>
     root: {
       color: theme.palette.common.white,
       padding: theme.spacing(2, 2, 3),
-      backgroundImage: theme.palette.bursts.gradient.linear,
+      backgroundImage: theme.getPageTheme({ themeId: 'card' }).backgroundImage,
       backgroundPosition: 0,
       backgroundSize: 'inherit',
     },
diff --git a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx
index b51e3cbc0d..c85e6d11f2 100644
--- a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx
+++ b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx
@@ -85,14 +85,14 @@ const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
 
     overlayHeader: {
       display: 'flex',
-      color: theme.palette.bursts.fontColor,
+      color: theme.palette.text.primary,
       alignItems: 'center',
       justifyContent: 'space-between',
       padding: theme.spacing(2, 3),
     },
 
     overlayHeaderClose: {
-      color: theme.palette.bursts.fontColor,
+      color: theme.palette.text.primary,
     },
 
     marginMobileSidebar: props => ({
diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md
index 772e868635..92958c9c7e 100644
--- a/packages/theme/api-report.md
+++ b/packages/theme/api-report.md
@@ -116,7 +116,13 @@ export function createThemeOverrides(theme: BackstageTheme): Overrides;
 export const darkTheme: BackstageTheme;
 
 // @public
-export function genPageTheme(colors: string[], shape: string): PageTheme;
+export function genPageTheme(props: {
+  colors: string[];
+  shape: string;
+  options?: {
+    fontColor?: string;
+  };
+}): PageTheme;
 
 // @public
 export const lightTheme: BackstageTheme;
@@ -126,6 +132,7 @@ export type PageTheme = {
   colors: string[];
   shape: string;
   backgroundImage: string;
+  fontColor: string;
 };
 
 // @public
diff --git a/packages/theme/src/pageTheme.ts b/packages/theme/src/pageTheme.ts
index ae81dc8534..5b5eb24be9 100644
--- a/packages/theme/src/pageTheme.ts
+++ b/packages/theme/src/pageTheme.ts
@@ -52,6 +52,7 @@ export const colorVariants: Record<string, string[]> = {
   eveningSea: ['#00FFF2', '#035355'],
   teal: ['#005B4B'],
   pinkSea: ['#C8077A', '#C2297D'],
+  greens: ['#4BB8A5', '#187656'],
 };
 
 /**
@@ -63,12 +64,25 @@ export const colorVariants: Record<string, string[]> = {
  * As the background shapes and colors are decorative, we place them onto the
  * page as a css background-image instead of an html element of its own.
  */
-export function genPageTheme(colors: string[], shape: string): PageTheme {
+export function genPageTheme(props: {
+  colors: string[];
+  shape: string;
+  options?: {
+    fontColor?: string;
+  };
+}): PageTheme {
+  const { colors, shape, options } = props;
   const gradientColors = colors.length === 1 ? [colors[0], colors[0]] : colors;
   const gradient = `linear-gradient(90deg, ${gradientColors.join(', ')})`;
   const backgroundImage = `${shape},  ${gradient}`;
+  const fontColor = options?.fontColor ?? '#FFFFFF';
 
-  return { colors, shape, backgroundImage };
+  return {
+    colors: colors,
+    shape: shape,
+    backgroundImage: backgroundImage,
+    fontColor: fontColor,
+  };
 }
 
 /**
@@ -77,13 +91,20 @@ export function genPageTheme(colors: string[], shape: string): PageTheme {
  * @public
  */
 export const pageTheme: Record<string, PageTheme> = {
-  home: genPageTheme(colorVariants.teal, shapes.wave),
-  documentation: genPageTheme(colorVariants.pinkSea, shapes.wave2),
-  tool: genPageTheme(colorVariants.purpleSky, shapes.round),
-  service: genPageTheme(colorVariants.marineBlue, shapes.wave),
-  website: genPageTheme(colorVariants.veryBlue, shapes.wave),
-  library: genPageTheme(colorVariants.rubyRed, shapes.wave),
-  other: genPageTheme(colorVariants.darkGrey, shapes.wave),
-  app: genPageTheme(colorVariants.toastyOrange, shapes.wave),
-  apis: genPageTheme(colorVariants.teal, shapes.wave2),
+  home: genPageTheme({ colors: colorVariants.teal, shape: shapes.wave }),
+  documentation: genPageTheme({
+    colors: colorVariants.pinkSea,
+    shape: shapes.wave2,
+  }),
+  tool: genPageTheme({ colors: colorVariants.purpleSky, shape: shapes.round }),
+  service: genPageTheme({
+    colors: colorVariants.marineBlue,
+    shape: shapes.wave,
+  }),
+  website: genPageTheme({ colors: colorVariants.veryBlue, shape: shapes.wave }),
+  library: genPageTheme({ colors: colorVariants.rubyRed, shape: shapes.wave }),
+  other: genPageTheme({ colors: colorVariants.darkGrey, shape: shapes.wave }),
+  app: genPageTheme({ colors: colorVariants.toastyOrange, shape: shapes.wave }),
+  apis: genPageTheme({ colors: colorVariants.teal, shape: shapes.wave2 }),
+  card: genPageTheme({ colors: colorVariants.greens, shape: shapes.wave }),
 };
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
index b921154005..96b7c54f9b 100644
--- a/packages/theme/src/types.ts
+++ b/packages/theme/src/types.ts
@@ -63,6 +63,9 @@ export type BackstagePaletteAdditions = {
   tabbar: {
     indicator: string;
   };
+  /**
+   * @deprecated The entire `bursts` section will be removed in a future release
+   */
   bursts: {
     fontColor: string;
     slackChannelText: string;
@@ -161,4 +164,5 @@ export type PageTheme = {
   colors: string[];
   shape: string;
   backgroundImage: string;
+  fontColor: string;
 };
diff --git a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx
index e37362a1e3..41610ed13c 100644
--- a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx
+++ b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx
@@ -40,7 +40,7 @@ const useStyles = makeStyles(
   (theme: BackstageTheme) => {
     return {
       button: {
-        color: theme.palette.bursts.fontColor,
+        color: theme.page.fontColor,
       },
     };
   },
diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
index c07815f39e..fc050feb2a 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
+++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
@@ -110,14 +110,14 @@ const monochromeTheme = (outer: BackstageTheme) =>
     ...outer,
     defaultPageTheme: 'home',
     pageTheme: {
-      home: genPageTheme(['#444'], shapes.wave2),
-      documentation: genPageTheme(['#474747'], shapes.wave2),
-      tool: genPageTheme(['#222'], shapes.wave2),
-      service: genPageTheme(['#aaa'], shapes.wave2),
-      website: genPageTheme(['#0e0e0e'], shapes.wave2),
-      library: genPageTheme(['#9d9d9d'], shapes.wave2),
-      other: genPageTheme(['#aaa'], shapes.wave2),
-      app: genPageTheme(['#666'], shapes.wave2),
+      home: genPageTheme({ colors: ['#444'], shape: shapes.wave2 }),
+      documentation: genPageTheme({ colors: ['#474747'], shape: shapes.wave2 }),
+      tool: genPageTheme({ colors: ['#222'], shape: shapes.wave2 }),
+      service: genPageTheme({ colors: ['#aaa'], shape: shapes.wave2 }),
+      website: genPageTheme({ colors: ['#0e0e0e'], shape: shapes.wave2 }),
+      library: genPageTheme({ colors: ['#9d9d9d'], shape: shapes.wave2 }),
+      other: genPageTheme({ colors: ['#aaa'], shape: shapes.wave2 }),
+      app: genPageTheme({ colors: ['#666'], shape: shapes.wave2 }),
     },
   });