diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx
index ba48d62bac3..c0287ac0a68 100644
--- a/dotcom-rendering/src/components/ArticleHeadline.tsx
+++ b/dotcom-rendering/src/components/ArticleHeadline.tsx
@@ -270,6 +270,10 @@ const darkBackground = css`
 	background-color: ${themePalette('--headline-background')};
 `;
 
+const immersiveDarkBackground = css`
+	background-color: ${themePalette('--headline-background-immersive')};
+`;
+
 const invertedText = css`
 	color: white;
 	background-color: black;
@@ -299,7 +303,7 @@ const gridHeadlineTextBelowDesktop = css`
 
 	${until.desktop} {
 		color: white;
-		background-color: ${themePalette('--headline-background')};
+		background-color: ${themePalette('--headline-background-immersive')};
 		white-space: pre-wrap;
 		padding-bottom: ${space[1]}px;
 		padding-left: 12px;
@@ -322,7 +326,7 @@ const immersiveHeadlineStyles = (
 	}
 
 	if (layoutType === 'immersiveLandscape') {
-		return [invertedText, darkBackground];
+		return [invertedText, immersiveDarkBackground];
 	}
 
 	return gridHeadlineTextBelowDesktop;
@@ -560,7 +564,10 @@ export const ArticleHeadline = ({
 													`,
 												]
 											: isInverted
-												? [invertedText, darkBackground]
+												? [
+														invertedText,
+														immersiveDarkBackground,
+													]
 												: gridHeadlineText,
 									]}
 								>
diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
index 04411be9fd0..bb628ec27f5 100644
--- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
@@ -173,7 +173,7 @@ export const StandardLayoutArticleGrid = ({
 	const isShowcase = format.display === ArticleDisplay.Showcase;
 	const isImmersive = format.display === ArticleDisplay.Immersive;
 	const isFeature = format.design === ArticleDesign.Feature;
-	const headlineBackground = themePalette('--headline-background');
+	const headlineBackground = themePalette('--headline-background-immersive');
 
 	const isFootballMatchReport =
 		format.design === ArticleDesign.MatchReport && !!footballMatchStatsUrl;
@@ -220,12 +220,22 @@ export const StandardLayoutArticleGrid = ({
 				`,
 				grid.container,
 				grid.outerRules(),
-				isImmersive &&
+				isLabs &&
+					isImmersive &&
 					css`
-						&::before,
-						&::after {
-							z-index: ${getZIndex('immersiveGridOuterRules')};
+						${from.desktop} {
+							&::before,
+							&::after {
+								z-index: ${getZIndex(
+									'immersiveGridOuterRules',
+								)};
+							}
 						}
+						/* Anchor the title consistently while wrapped text extends the media below it. */
+						grid-template-rows: ${immersiveMediaRowHeight} repeat(
+								6,
+								auto
+							);
 					`,
 				!isLabs &&
 					css`
@@ -247,16 +257,6 @@ export const StandardLayoutArticleGrid = ({
 									: '90px'} auto auto auto auto auto;
 						}
 					`,
-				isImmersive &&
-					css`
-						${until.desktop} {
-							/* Anchor the title consistently while wrapped text extends the media below it. */
-							grid-template-rows: ${immersiveMediaRowHeight} repeat(
-									6,
-									auto
-								);
-						}
-					`,
 			]}
 		>
 			<GridItem
@@ -358,6 +358,12 @@ export const StandardLayoutArticleGrid = ({
 								padding-bottom: ${space[8]}px;
 							}
 						`,
+					layoutType === 'immersiveLandscape' &&
+						css`
+							${from.desktop} {
+								padding-bottom: ${space[8]}px;
+							}
+						`,
 					layoutType === 'immersivePortrait' &&
 						css`
 							${from.desktop} {
@@ -367,12 +373,6 @@ export const StandardLayoutArticleGrid = ({
 									${themePalette('--article-border')};
 							}
 						`,
-					layoutType === 'immersiveLandscape' &&
-						css`
-							${from.desktop} {
-								padding-bottom: ${space[8]}px;
-							}
-						`,
 				]}
 			>
 				<ArticleHeadline
diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
index ddf413919d4..2aadb2c4148 100644
--- a/dotcom-rendering/src/paletteDeclarations.ts
+++ b/dotcom-rendering/src/paletteDeclarations.ts
@@ -298,6 +298,28 @@ const headlineBackgroundDark: PaletteFunction = ({
 	}
 };
 
+// Merge this with the above functions once the new immersive grid layouts
+// are fully rolled out and the old layout removed
+const headlineBackgroundImmersiveLight: PaletteFunction = ({ theme }) => {
+	switch (theme) {
+		case Pillar.Lifestyle:
+			return '#310028';
+		case Pillar.Culture:
+			return '#251F15';
+		case Pillar.Sport:
+			return '#00243A';
+		case Pillar.Opinion:
+			return '#3E1302';
+		case Pillar.News:
+			return sourcePalette.neutral[10];
+		default:
+			return sourcePalette.neutral[7];
+	}
+};
+
+const headlineBackgroundImmersiveDark: PaletteFunction = () =>
+	sourcePalette.neutral[10];
+
 const headlineBlogBackgroundLight: PaletteFunction = ({
 	design,
 	display,
@@ -7603,6 +7625,10 @@ const paletteColours = {
 		light: headlineBackgroundLight,
 		dark: headlineBackgroundDark,
 	},
+	'--headline-background-immersive': {
+		light: headlineBackgroundImmersiveLight,
+		dark: headlineBackgroundImmersiveDark,
+	},
 	'--headline-blog-background': {
 		light: headlineBlogBackgroundLight,
 		dark: headlineBlogBackgroundDark,