From 8bd85891dfc210019720ed84205ddbd8150c21ea Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Fri, 28 Nov 2025 15:41:58 +0000
Subject: [PATCH 01/15] Basic layout and styling for match stat

---
 .../components/FootballMatchStat.stories.tsx  | 29 ++++++++
 .../src/components/FootballMatchStat.tsx      | 66 +++++++++++++++++++
 2 files changed, 95 insertions(+)
 create mode 100644 dotcom-rendering/src/components/FootballMatchStat.stories.tsx
 create mode 100644 dotcom-rendering/src/components/FootballMatchStat.tsx

diff --git a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
new file mode 100644
index 00000000000..1549f5152e1
--- /dev/null
+++ b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+import { palette, space } from '@guardian/source/foundations';
+
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { FootballMatchStat } from './FootballMatchStat';
+
+const meta = {
+	title: 'Components/Football Match Stat',
+	component: FootballMatchStat,
+	decorators: [
+		(Story) => (
+			<div
+				css={css`
+					padding: ${space[4]}px;
+					background-color: ${palette.neutral[97]};
+				`}
+			>
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta<typeof FootballMatchStat>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Possession = {
+	args: {},
+} satisfies Story;
diff --git a/dotcom-rendering/src/components/FootballMatchStat.tsx b/dotcom-rendering/src/components/FootballMatchStat.tsx
new file mode 100644
index 00000000000..542c4cb5871
--- /dev/null
+++ b/dotcom-rendering/src/components/FootballMatchStat.tsx
@@ -0,0 +1,66 @@
+import { css } from '@emotion/react';
+import {
+	palette,
+	textSansBold14,
+	textSansBold20,
+} from '@guardian/source/foundations';
+
+const colourHome = '#da020e';
+const colourAway = '#023474';
+
+const containerCss = css`
+	padding: 5px 10px 10px;
+	border: 1px solid ${palette.neutral[86]};
+	border-radius: 6px;
+`;
+
+const headerCss = css`
+	display: flex;
+	justify-content: space-between;
+`;
+
+const statCss = css`
+	${textSansBold20};
+	color: var(--stat-colour);
+`;
+
+const labelCss = css`
+	${textSansBold14};
+	color: ${palette.neutral[7]};
+`;
+
+const chartCss = css`
+	display: flex;
+	gap: 10px;
+`;
+
+const barCss = css`
+	height: 8px;
+	width: var(--bar-width);
+	background-color: var(--bar-colour);
+	border-radius: 8px;
+`;
+
+export const FootballMatchStat = () => (
+	<div css={containerCss}>
+		<div css={headerCss}>
+			<span css={statCss} style={{ '--stat-colour': colourHome }}>
+				39%
+			</span>
+			<span css={labelCss}>Possession</span>
+			<span css={statCss} style={{ '--stat-colour': colourAway }}>
+				61%
+			</span>
+		</div>
+		<div css={chartCss}>
+			<div
+				css={barCss}
+				style={{ '--bar-width': '39%', '--bar-colour': colourHome }}
+			></div>
+			<div
+				css={barCss}
+				style={{ '--bar-width': '61%', '--bar-colour': colourAway }}
+			></div>
+		</div>
+	</div>
+);

From 757f6a40701a7509485cd837a25bd59fab7976e4 Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Fri, 28 Nov 2025 16:18:28 +0000
Subject: [PATCH 02/15] Add divider to chart

---
 dotcom-rendering/src/components/FootballMatchStat.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/dotcom-rendering/src/components/FootballMatchStat.tsx b/dotcom-rendering/src/components/FootballMatchStat.tsx
index 542c4cb5871..e7b37dc0896 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.tsx
@@ -9,9 +9,19 @@ const colourHome = '#da020e';
 const colourAway = '#023474';
 
 const containerCss = css`
+	position: relative;
 	padding: 5px 10px 10px;
 	border: 1px solid ${palette.neutral[86]};
 	border-radius: 6px;
+	&::before {
+		position: absolute;
+		content: '';
+		left: 50%;
+		bottom: 0;
+		width: 1px;
+		height: 24px;
+		background-color: ${palette.neutral[86]};
+	}
 `;
 
 const headerCss = css`
@@ -30,6 +40,7 @@ const labelCss = css`
 `;
 
 const chartCss = css`
+	position: relative;
 	display: flex;
 	gap: 10px;
 `;

From 35ef64923f68c637c0c9ede495f80821a9507e41 Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Fri, 28 Nov 2025 16:30:43 +0000
Subject: [PATCH 03/15] Move hardcoded values to props

---
 .../components/FootballMatchStat.stories.tsx  | 13 +++++-
 .../src/components/FootballMatchStat.tsx      | 45 +++++++++++++------
 2 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
index 1549f5152e1..6752919dc4d 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
@@ -19,11 +19,22 @@ const meta = {
 			</div>
 		),
 	],
+	parameters: {
+		viewport: {
+			defaultViewport: 'mobile',
+		},
+	},
 } satisfies Meta<typeof FootballMatchStat>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Possession = {
-	args: {},
+	args: {
+		label: 'Possession',
+		homeColour: '#da020e',
+		awayColour: '#023474',
+		homeValue: '39%',
+		awayValue: '61%',
+	},
 } satisfies Story;
diff --git a/dotcom-rendering/src/components/FootballMatchStat.tsx b/dotcom-rendering/src/components/FootballMatchStat.tsx
index e7b37dc0896..316e106acc9 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.tsx
@@ -5,9 +5,6 @@ import {
 	textSansBold20,
 } from '@guardian/source/foundations';
 
-const colourHome = '#da020e';
-const colourAway = '#023474';
-
 const containerCss = css`
 	position: relative;
 	padding: 5px 10px 10px;
@@ -31,7 +28,7 @@ const headerCss = css`
 
 const statCss = css`
 	${textSansBold20};
-	color: var(--stat-colour);
+	color: var(--match-stat-colour);
 `;
 
 const labelCss = css`
@@ -47,30 +44,50 @@ const chartCss = css`
 
 const barCss = css`
 	height: 8px;
-	width: var(--bar-width);
-	background-color: var(--bar-colour);
+	width: var(--match-stat-bar-width);
+	background-color: var(--match-stat-bar-colour);
 	border-radius: 8px;
 `;
 
-export const FootballMatchStat = () => (
+type Props = {
+	label: string;
+	homeColour: string;
+	awayColour: string;
+	homeValue: string;
+	awayValue: string;
+};
+
+export const FootballMatchStat = ({
+	label,
+	homeColour,
+	awayColour,
+	homeValue,
+	awayValue,
+}: Props) => (
 	<div css={containerCss}>
 		<div css={headerCss}>
-			<span css={statCss} style={{ '--stat-colour': colourHome }}>
-				39%
+			<span css={statCss} style={{ '--match-stat-colour': homeColour }}>
+				{homeValue}
 			</span>
-			<span css={labelCss}>Possession</span>
-			<span css={statCss} style={{ '--stat-colour': colourAway }}>
-				61%
+			<span css={labelCss}>{label}</span>
+			<span css={statCss} style={{ '--match-stat-colour': awayColour }}>
+				{awayValue}
 			</span>
 		</div>
 		<div css={chartCss}>
 			<div
 				css={barCss}
-				style={{ '--bar-width': '39%', '--bar-colour': colourHome }}
+				style={{
+					'--match-stat-bar-width': homeValue,
+					'--match-stat-bar-colour': homeColour,
+				}}
 			></div>
 			<div
 				css={barCss}
-				style={{ '--bar-width': '61%', '--bar-colour': colourAway }}
+				style={{
+					'--match-stat-bar-width': awayValue,
+					'--match-stat-bar-colour': awayColour,
+				}}
 			></div>
 		</div>
 	</div>

From bcbc28a9c53051947261631c1d73758d88b85c4f Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Fri, 28 Nov 2025 16:50:13 +0000
Subject: [PATCH 04/15] Calculate bar width

---
 .../components/FootballMatchStat.stories.tsx  | 16 +++-
 .../src/components/FootballMatchStat.tsx      | 76 +++++++++++--------
 2 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
index 6752919dc4d..ff4f5020214 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { palette, space } from '@guardian/source/foundations';
-
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FootballMatchStat } from './FootballMatchStat';
 
@@ -34,7 +33,18 @@ export const Possession = {
 		label: 'Possession',
 		homeColour: '#da020e',
 		awayColour: '#023474',
-		homeValue: '39%',
-		awayValue: '61%',
+		homeValue: 39,
+		awayValue: 61,
+		showPercentage: true,
+	},
+} satisfies Story;
+
+export const GoalAttempts = {
+	args: {
+		label: 'Goal Attempts',
+		homeColour: '#722642',
+		awayColour: '#383838',
+		homeValue: 7,
+		awayValue: 4,
 	},
 } satisfies Story;
diff --git a/dotcom-rendering/src/components/FootballMatchStat.tsx b/dotcom-rendering/src/components/FootballMatchStat.tsx
index 316e106acc9..bb56b18f0ea 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.tsx
@@ -53,42 +53,58 @@ type Props = {
 	label: string;
 	homeColour: string;
 	awayColour: string;
-	homeValue: string;
-	awayValue: string;
+	homeValue: number;
+	awayValue: number;
+	showPercentage?: boolean;
 };
 
+const formatValue = (value: number, showPercentage: boolean) =>
+	`${value}${showPercentage ? '%' : ''}`;
+
 export const FootballMatchStat = ({
 	label,
 	homeColour,
 	awayColour,
 	homeValue,
 	awayValue,
-}: Props) => (
-	<div css={containerCss}>
-		<div css={headerCss}>
-			<span css={statCss} style={{ '--match-stat-colour': homeColour }}>
-				{homeValue}
-			</span>
-			<span css={labelCss}>{label}</span>
-			<span css={statCss} style={{ '--match-stat-colour': awayColour }}>
-				{awayValue}
-			</span>
-		</div>
-		<div css={chartCss}>
-			<div
-				css={barCss}
-				style={{
-					'--match-stat-bar-width': homeValue,
-					'--match-stat-bar-colour': homeColour,
-				}}
-			></div>
-			<div
-				css={barCss}
-				style={{
-					'--match-stat-bar-width': awayValue,
-					'--match-stat-bar-colour': awayColour,
-				}}
-			></div>
+	showPercentage = false,
+}: Props) => {
+	const homePercentage = (homeValue / (homeValue + awayValue)) * 100;
+	const awayPercentage = (awayValue / (homeValue + awayValue)) * 100;
+
+	return (
+		<div css={containerCss}>
+			<div css={headerCss}>
+				<span
+					css={statCss}
+					style={{ '--match-stat-colour': homeColour }}
+				>
+					{formatValue(homeValue, showPercentage)}
+				</span>
+				<span css={labelCss}>{label}</span>
+				<span
+					css={statCss}
+					style={{ '--match-stat-colour': awayColour }}
+				>
+					{formatValue(awayValue, showPercentage)}
+				</span>
+			</div>
+			<div css={chartCss}>
+				<div
+					css={barCss}
+					style={{
+						'--match-stat-bar-width': `${homePercentage}%`,
+						'--match-stat-bar-colour': homeColour,
+					}}
+				></div>
+				<div
+					css={barCss}
+					style={{
+						'--match-stat-bar-width': `${awayPercentage}%`,
+						'--match-stat-bar-colour': awayColour,
+					}}
+				></div>
+			</div>
 		</div>
-	</div>
-);
+	);
+};

From 9d071af344806f134c015ef4ad3462d346680127 Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Mon, 1 Dec 2025 14:52:03 +0000
Subject: [PATCH 05/15] Include team name for accessibility

---
 .../components/FootballMatchStat.stories.tsx  | 29 ++++++---
 .../src/components/FootballMatchStat.tsx      | 59 ++++++++++++-------
 2 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
index ff4f5020214..e6cf28e3f08 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
@@ -31,10 +31,16 @@ type Story = StoryObj<typeof meta>;
 export const Possession = {
 	args: {
 		label: 'Possession',
-		homeColour: '#da020e',
-		awayColour: '#023474',
-		homeValue: 39,
-		awayValue: 61,
+		home: {
+			teamName: 'Manchester United',
+			teamColour: '#da020e',
+			value: 39,
+		},
+		away: {
+			teamName: 'Arsenal',
+			teamColour: '#023474',
+			value: 61,
+		},
 		showPercentage: true,
 	},
 } satisfies Story;
@@ -42,9 +48,16 @@ export const Possession = {
 export const GoalAttempts = {
 	args: {
 		label: 'Goal Attempts',
-		homeColour: '#722642',
-		awayColour: '#383838',
-		homeValue: 7,
-		awayValue: 4,
+		home: {
+			teamName: 'West Ham',
+			teamColour: '#722642',
+			value: 7,
+		},
+		away: {
+			teamName: 'Newcastle',
+			teamColour: '#383838',
+			value: 4,
+		},
+		showPercentage: true,
 	},
 } satisfies Story;
diff --git a/dotcom-rendering/src/components/FootballMatchStat.tsx b/dotcom-rendering/src/components/FootballMatchStat.tsx
index bb56b18f0ea..027418b0f0e 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.tsx
@@ -3,6 +3,7 @@ import {
 	palette,
 	textSansBold14,
 	textSansBold20,
+	visuallyHidden,
 } from '@guardian/source/foundations';
 
 const containerCss = css`
@@ -28,7 +29,7 @@ const headerCss = css`
 
 const statCss = css`
 	${textSansBold20};
-	color: var(--match-stat-colour);
+	color: var(--match-stat-team-colour);
 `;
 
 const labelCss = css`
@@ -44,17 +45,21 @@ const chartCss = css`
 
 const barCss = css`
 	height: 8px;
-	width: var(--match-stat-bar-width);
-	background-color: var(--match-stat-bar-colour);
+	width: var(--match-stat-percentage);
+	background-color: var(--match-stat-team-colour);
 	border-radius: 8px;
 `;
 
+export type MatchStatistic = {
+	teamName: string;
+	teamColour: string;
+	value: number;
+};
+
 type Props = {
 	label: string;
-	homeColour: string;
-	awayColour: string;
-	homeValue: number;
-	awayValue: number;
+	home: MatchStatistic;
+	away: MatchStatistic;
 	showPercentage?: boolean;
 };
 
@@ -63,45 +68,57 @@ const formatValue = (value: number, showPercentage: boolean) =>
 
 export const FootballMatchStat = ({
 	label,
-	homeColour,
-	awayColour,
-	homeValue,
-	awayValue,
+	home,
+	away,
 	showPercentage = false,
 }: Props) => {
-	const homePercentage = (homeValue / (homeValue + awayValue)) * 100;
-	const awayPercentage = (awayValue / (homeValue + awayValue)) * 100;
+	const homePercentage = (home.value / (home.value + away.value)) * 100;
+	const awayPercentage = (away.value / (home.value + away.value)) * 100;
 
 	return (
 		<div css={containerCss}>
 			<div css={headerCss}>
 				<span
 					css={statCss}
-					style={{ '--match-stat-colour': homeColour }}
+					style={{ '--match-stat-team-colour': home.teamColour }}
 				>
-					{formatValue(homeValue, showPercentage)}
+					<span
+						css={css`
+							${visuallyHidden}
+						`}
+					>
+						{away.teamName}
+					</span>
+					{formatValue(home.value, showPercentage)}
 				</span>
 				<span css={labelCss}>{label}</span>
 				<span
 					css={statCss}
-					style={{ '--match-stat-colour': awayColour }}
+					style={{ '--match-stat-team-colour': away.teamColour }}
 				>
-					{formatValue(awayValue, showPercentage)}
+					<span
+						css={css`
+							${visuallyHidden}
+						`}
+					>
+						{away.teamName}
+					</span>
+					{formatValue(away.value, showPercentage)}
 				</span>
 			</div>
 			<div css={chartCss}>
 				<div
 					css={barCss}
 					style={{
-						'--match-stat-bar-width': `${homePercentage}%`,
-						'--match-stat-bar-colour': homeColour,
+						'--match-stat-percentage': `${homePercentage}%`,
+						'--match-stat-team-colour': home.teamColour,
 					}}
 				></div>
 				<div
 					css={barCss}
 					style={{
-						'--match-stat-bar-width': `${awayPercentage}%`,
-						'--match-stat-bar-colour': awayColour,
+						'--match-stat-percentage': `${awayPercentage}%`,
+						'--match-stat-team-colour': away.teamColour,
 					}}
 				></div>
 			</div>

From 66b837655ff1c02755ae578894a188e4953835df Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Mon, 1 Dec 2025 17:14:22 +0000
Subject: [PATCH 06/15] Add FootballMiniMatchStats components

---
 .../components/FootballMatchStat.stories.tsx  |  2 +-
 .../src/components/FootballMatchStat.tsx      |  2 +-
 .../FootballMiniMatchStats.stories.tsx        | 51 ++++++++++++++
 .../src/components/FootballMiniMatchStats.tsx | 69 +++++++++++++++++++
 4 files changed, 122 insertions(+), 2 deletions(-)
 create mode 100644 dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx
 create mode 100644 dotcom-rendering/src/components/FootballMiniMatchStats.tsx

diff --git a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
index e6cf28e3f08..fb2096b7ea9 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
@@ -20,7 +20,7 @@ const meta = {
 	],
 	parameters: {
 		viewport: {
-			defaultViewport: 'mobile',
+			defaultViewport: 'mobileMedium',
 		},
 	},
 } satisfies Meta<typeof FootballMatchStat>;
diff --git a/dotcom-rendering/src/components/FootballMatchStat.tsx b/dotcom-rendering/src/components/FootballMatchStat.tsx
index 027418b0f0e..1716bd626d9 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.tsx
@@ -50,7 +50,7 @@ const barCss = css`
 	border-radius: 8px;
 `;
 
-export type MatchStatistic = {
+type MatchStatistic = {
 	teamName: string;
 	teamColour: string;
 	value: number;
diff --git a/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx b/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx
new file mode 100644
index 00000000000..30b9bfb559d
--- /dev/null
+++ b/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx
@@ -0,0 +1,51 @@
+import { css } from '@emotion/react';
+import { palette, space } from '@guardian/source/foundations';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { FootballMiniMatchStats } from './FootballMiniMatchStats';
+
+const meta = {
+	title: 'Components/Football Mini Match Stats',
+	component: FootballMiniMatchStats,
+	decorators: [
+		(Story) => (
+			<div
+				css={css`
+					padding: ${space[4]}px;
+					background-color: ${palette.neutral[97]};
+				`}
+			>
+				<Story />
+			</div>
+		),
+	],
+	parameters: {
+		viewport: {
+			defaultViewport: 'mobileMedium',
+		},
+	},
+} satisfies Meta<typeof FootballMiniMatchStats>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FootballMiniMatchStatsMobile = {
+	args: {
+		homeTeam: {
+			name: 'Manchester United',
+			colour: '#da020e',
+		},
+		awayTeam: {
+			name: 'Arsenal',
+			colour: '#023474',
+		},
+		stats: [
+			{
+				label: 'Possession',
+				homeValue: 39,
+				awayValue: 61,
+				showPercentage: true,
+			},
+			{ label: 'Goal Attempts', homeValue: 7, awayValue: 4 },
+		],
+	},
+} satisfies Story;
diff --git a/dotcom-rendering/src/components/FootballMiniMatchStats.tsx b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
new file mode 100644
index 00000000000..89bc5bc39d6
--- /dev/null
+++ b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
@@ -0,0 +1,69 @@
+import { css } from '@emotion/react';
+import { palette } from '@guardian/source/foundations';
+import {
+	LinkButton,
+	SvgArrowRightStraight,
+} from '@guardian/source/react-components';
+import { FootballMatchStat } from './FootballMatchStat';
+
+const containerCss = css`
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+`;
+
+type FootballTeam = {
+	name: string;
+	colour: string;
+};
+
+type MatchStatistic = {
+	label: string;
+	homeValue: number;
+	awayValue: number;
+	showPercentage?: boolean;
+};
+
+type Props = {
+	homeTeam: FootballTeam;
+	awayTeam: FootballTeam;
+	stats: MatchStatistic[];
+};
+
+export const FootballMiniMatchStats = ({
+	homeTeam,
+	awayTeam,
+	stats,
+}: Props) => {
+	console.log(homeTeam, awayTeam, stats);
+	return (
+		<div css={containerCss}>
+			{stats.map((stat) => (
+				<FootballMatchStat
+					key={stat.label}
+					label={stat.label}
+					home={{
+						teamName: homeTeam.name,
+						teamColour: homeTeam.colour,
+						value: stat.homeValue,
+					}}
+					away={{
+						teamName: awayTeam.name,
+						teamColour: awayTeam.colour,
+						value: stat.awayValue,
+					}}
+					showPercentage={stat.showPercentage}
+				/>
+			))}
+			<LinkButton
+				href="#"
+				size="small"
+				icon={<SvgArrowRightStraight />}
+				iconSide="right"
+				theme={{ backgroundPrimary: palette.sport[400] }}
+			>
+				More stats, line-ups and tables
+			</LinkButton>
+		</div>
+	);
+};

From a34d5534f922ac4e4876df460ffb6a3640f06c9f Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Mon, 1 Dec 2025 17:39:43 +0000
Subject: [PATCH 07/15] Update match stat stories

---
 dotcom-rendering/src/components/FootballMatchStat.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
index fb2096b7ea9..b39609f3c47 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
@@ -58,6 +58,5 @@ export const GoalAttempts = {
 			teamColour: '#383838',
 			value: 4,
 		},
-		showPercentage: true,
 	},
 } satisfies Story;

From 03a63045e07b980eb5c812856ffc64d02fd443e8 Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Tue, 2 Dec 2025 18:08:41 +0000
Subject: [PATCH 08/15] Simplified live grid layout for stories

---
 .../FootballMiniMatchStats.stories.tsx        | 43 ++++++++++++++-----
 .../src/components/FootballMiniMatchStats.tsx | 18 +++++++-
 2 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx b/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx
index 30b9bfb559d..98fe222b509 100644
--- a/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx
+++ b/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx
@@ -1,26 +1,49 @@
 import { css } from '@emotion/react';
-import { palette, space } from '@guardian/source/foundations';
+import { breakpoints, from, palette } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FootballMiniMatchStats } from './FootballMiniMatchStats';
 
+const gridCss = css`
+	background-color: ${palette.neutral[97]};
+	/**
+	 * Extremely simplified live blog grid layout as we're only interested in
+	 * the 240px wide left column added at the desktop breakpoint.
+	 * dotcom-rendering/src/layouts/LiveLayout.tsx
+	 */
+	${from.desktop} {
+		display: grid;
+		grid-column-gap: 20px;
+		grid-template-columns: 240px 1fr;
+	}
+`;
+
+const containerCss = css`
+	padding: 10px;
+	${from.desktop} {
+		padding-left: 20px;
+		padding-right: 0;
+	}
+`;
+
 const meta = {
 	title: 'Components/Football Mini Match Stats',
 	component: FootballMiniMatchStats,
 	decorators: [
 		(Story) => (
-			<div
-				css={css`
-					padding: ${space[4]}px;
-					background-color: ${palette.neutral[97]};
-				`}
-			>
-				<Story />
+			<div css={gridCss}>
+				<div css={containerCss}>
+					<Story />
+				</div>
 			</div>
 		),
 	],
 	parameters: {
-		viewport: {
-			defaultViewport: 'mobileMedium',
+		chromatic: {
+			viewports: [
+				breakpoints.mobileMedium,
+				breakpoints.tablet,
+				breakpoints.wide,
+			],
 		},
 	},
 } satisfies Meta<typeof FootballMiniMatchStats>;
diff --git a/dotcom-rendering/src/components/FootballMiniMatchStats.tsx b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
index 89bc5bc39d6..61a99f47f3e 100644
--- a/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
+++ b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { palette } from '@guardian/source/foundations';
+import { from, palette } from '@guardian/source/foundations';
 import {
 	LinkButton,
 	SvgArrowRightStraight,
@@ -12,6 +12,19 @@ const containerCss = css`
 	gap: 10px;
 `;
 
+const buttonTextCss = css`
+	${from.desktop} {
+		display: none;
+	}
+`;
+
+const buttonTextShortCss = css`
+	display: none;
+	${from.desktop} {
+		display: inline;
+	}
+`;
+
 type FootballTeam = {
 	name: string;
 	colour: string;
@@ -62,7 +75,8 @@ export const FootballMiniMatchStats = ({
 				iconSide="right"
 				theme={{ backgroundPrimary: palette.sport[400] }}
 			>
-				More stats, line-ups and tables
+				<span css={buttonTextCss}>More stats, line-ups and tables</span>
+				<span css={buttonTextShortCss}>Stats and line ups</span>
 			</LinkButton>
 		</div>
 	);

From 6f403f8e5a7c951daa67a6f38313043438684bb8 Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Wed, 3 Dec 2025 08:24:22 +0000
Subject: [PATCH 09/15] Rename stories

---
 .../components/FootballMatchStat.stories.tsx   | 18 +++++++++---------
 .../FootballMiniMatchStats.stories.tsx         |  8 ++++----
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
index b39609f3c47..e83678da561 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
@@ -28,35 +28,35 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Possession = {
+export const Default = {
 	args: {
-		label: 'Possession',
+		label: 'Goal Attempts',
 		home: {
 			teamName: 'Manchester United',
 			teamColour: '#da020e',
-			value: 39,
+			value: 7,
 		},
 		away: {
 			teamName: 'Arsenal',
 			teamColour: '#023474',
-			value: 61,
+			value: 4,
 		},
-		showPercentage: true,
 	},
 } satisfies Story;
 
-export const GoalAttempts = {
+export const ShownAsPercentage = {
 	args: {
-		label: 'Goal Attempts',
+		label: 'Possession',
 		home: {
 			teamName: 'West Ham',
 			teamColour: '#722642',
-			value: 7,
+			value: 39,
 		},
 		away: {
 			teamName: 'Newcastle',
 			teamColour: '#383838',
-			value: 4,
+			value: 61,
 		},
+		showPercentage: true,
 	},
 } satisfies Story;
diff --git a/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx b/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx
index 98fe222b509..0749d03aa9c 100644
--- a/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx
+++ b/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { breakpoints, from, palette } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { FootballMiniMatchStats } from './FootballMiniMatchStats';
+import { FootballMiniMatchStats as FootballMiniMatchStatsComponent } from './FootballMiniMatchStats';
 
 const gridCss = css`
 	background-color: ${palette.neutral[97]};
@@ -27,7 +27,7 @@ const containerCss = css`
 
 const meta = {
 	title: 'Components/Football Mini Match Stats',
-	component: FootballMiniMatchStats,
+	component: FootballMiniMatchStatsComponent,
 	decorators: [
 		(Story) => (
 			<div css={gridCss}>
@@ -46,12 +46,12 @@ const meta = {
 			],
 		},
 	},
-} satisfies Meta<typeof FootballMiniMatchStats>;
+} satisfies Meta<typeof FootballMiniMatchStatsComponent>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const FootballMiniMatchStatsMobile = {
+export const FootballMiniMatchStats = {
 	args: {
 		homeTeam: {
 			name: 'Manchester United',

From 7b719ea656ab5dd82e3bc17e1273c58fe1d61544 Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Wed, 3 Dec 2025 09:49:46 +0000
Subject: [PATCH 10/15] Support layout variations for use in different contexts

---
 .../components/FootballMatchStat.stories.tsx  | 14 +++++
 .../src/components/FootballMatchStat.tsx      | 55 ++++++++++++++++---
 .../src/components/FootballMiniMatchStats.tsx |  1 +
 3 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
index e83678da561..65e3cdb6457 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
@@ -60,3 +60,17 @@ export const ShownAsPercentage = {
 		showPercentage: true,
 	},
 } satisfies Story;
+
+export const RaisedLabelOnDesktop = {
+	args: {
+		...Default.args,
+		raiseLabelOnDesktop: true,
+	},
+} satisfies Story;
+
+export const LargeNumbersOnDesktop = {
+	args: {
+		...Default.args,
+		largeNumbersOnDesktop: true,
+	},
+} satisfies Story;
diff --git a/dotcom-rendering/src/components/FootballMatchStat.tsx b/dotcom-rendering/src/components/FootballMatchStat.tsx
index 1716bd626d9..259859e1a02 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.tsx
@@ -1,8 +1,11 @@
 import { css } from '@emotion/react';
 import {
+	from,
 	palette,
 	textSansBold14,
+	textSansBold15,
 	textSansBold20,
+	textSansBold28,
 	visuallyHidden,
 } from '@guardian/source/foundations';
 
@@ -23,18 +26,44 @@ const containerCss = css`
 `;
 
 const headerCss = css`
-	display: flex;
-	justify-content: space-between;
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-template-areas: 'home-stat label away-stat';
 `;
 
-const statCss = css`
-	${textSansBold20};
-	color: var(--match-stat-team-colour);
+const raiseLabelCss = css`
+	${from.desktop} {
+		grid-template-areas:
+			'label     label label'
+			'home-stat .     away-stat';
+	}
 `;
 
 const labelCss = css`
 	${textSansBold14};
+	grid-area: label;
+	justify-self: center;
 	color: ${palette.neutral[7]};
+	${from.desktop} {
+		${textSansBold15};
+	}
+`;
+
+const numberCss = css`
+	${textSansBold20};
+	grid-area: home-stat;
+	color: var(--match-stat-team-colour);
+`;
+
+const largeNumberCss = css`
+	${from.desktop} {
+		${textSansBold28}
+	}
+`;
+
+const awayStatCss = css`
+	grid-area: away-stat;
+	justify-self: end;
 `;
 
 const chartCss = css`
@@ -61,6 +90,8 @@ type Props = {
 	home: MatchStatistic;
 	away: MatchStatistic;
 	showPercentage?: boolean;
+	raiseLabelOnDesktop?: boolean;
+	largeNumbersOnDesktop?: boolean;
 };
 
 const formatValue = (value: number, showPercentage: boolean) =>
@@ -71,15 +102,18 @@ export const FootballMatchStat = ({
 	home,
 	away,
 	showPercentage = false,
+	raiseLabelOnDesktop = false,
+	largeNumbersOnDesktop = false,
 }: Props) => {
 	const homePercentage = (home.value / (home.value + away.value)) * 100;
 	const awayPercentage = (away.value / (home.value + away.value)) * 100;
 
 	return (
 		<div css={containerCss}>
-			<div css={headerCss}>
+			<div css={[headerCss, raiseLabelOnDesktop && raiseLabelCss]}>
+				<span css={labelCss}>{label}</span>
 				<span
-					css={statCss}
+					css={[numberCss, largeNumbersOnDesktop && largeNumberCss]}
 					style={{ '--match-stat-team-colour': home.teamColour }}
 				>
 					<span
@@ -91,9 +125,12 @@ export const FootballMatchStat = ({
 					</span>
 					{formatValue(home.value, showPercentage)}
 				</span>
-				<span css={labelCss}>{label}</span>
 				<span
-					css={statCss}
+					css={[
+						numberCss,
+						awayStatCss,
+						largeNumbersOnDesktop && largeNumberCss,
+					]}
 					style={{ '--match-stat-team-colour': away.teamColour }}
 				>
 					<span
diff --git a/dotcom-rendering/src/components/FootballMiniMatchStats.tsx b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
index 61a99f47f3e..d5159f6d8b1 100644
--- a/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
+++ b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
@@ -66,6 +66,7 @@ export const FootballMiniMatchStats = ({
 						value: stat.awayValue,
 					}}
 					showPercentage={stat.showPercentage}
+					raiseLabelOnDesktop={true}
 				/>
 			))}
 			<LinkButton

From 43baedf1e2d3d257d84344aeea1880ff4b25d92d Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Wed, 3 Dec 2025 10:24:44 +0000
Subject: [PATCH 11/15] Hide chart from assistive technology

---
 dotcom-rendering/src/components/FootballMatchStat.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dotcom-rendering/src/components/FootballMatchStat.tsx b/dotcom-rendering/src/components/FootballMatchStat.tsx
index 259859e1a02..a9dbf332d7f 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.tsx
@@ -143,7 +143,7 @@ export const FootballMatchStat = ({
 					{formatValue(away.value, showPercentage)}
 				</span>
 			</div>
-			<div css={chartCss}>
+			<div aria-hidden="true" css={chartCss}>
 				<div
 					css={barCss}
 					style={{

From 26ab8de5fcb9b16f025163513a78bcc2637401fa Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Wed, 3 Dec 2025 15:58:54 +0000
Subject: [PATCH 12/15] Add football stat colours to palette

---
 .../src/components/FootballMatchStat.stories.tsx |  7 +++++--
 .../src/components/FootballMatchStat.tsx         |  8 ++++----
 .../FootballMiniMatchStats.stories.tsx           |  5 +++--
 .../src/components/FootballMiniMatchStats.tsx    |  9 +++++++--
 dotcom-rendering/src/paletteDeclarations.ts      | 16 ++++++++++++++++
 5 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
index 65e3cdb6457..339ecc24a57 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.stories.tsx
@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
-import { palette, space } from '@guardian/source/foundations';
+import { space } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { palette } from '../palette';
 import { FootballMatchStat } from './FootballMatchStat';
 
 const meta = {
@@ -11,7 +12,9 @@ const meta = {
 			<div
 				css={css`
 					padding: ${space[4]}px;
-					background-color: ${palette.neutral[97]};
+					background-color: ${palette(
+						'--football-live-blog-background',
+					)};
 				`}
 			>
 				<Story />
diff --git a/dotcom-rendering/src/components/FootballMatchStat.tsx b/dotcom-rendering/src/components/FootballMatchStat.tsx
index a9dbf332d7f..47e55f94bd0 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.tsx
@@ -1,18 +1,18 @@
 import { css } from '@emotion/react';
 import {
 	from,
-	palette,
 	textSansBold14,
 	textSansBold15,
 	textSansBold20,
 	textSansBold28,
 	visuallyHidden,
 } from '@guardian/source/foundations';
+import { palette } from '../palette';
 
 const containerCss = css`
 	position: relative;
 	padding: 5px 10px 10px;
-	border: 1px solid ${palette.neutral[86]};
+	border: 1px solid ${palette('--footall-match-stat-border')};
 	border-radius: 6px;
 	&::before {
 		position: absolute;
@@ -21,7 +21,7 @@ const containerCss = css`
 		bottom: 0;
 		width: 1px;
 		height: 24px;
-		background-color: ${palette.neutral[86]};
+		background-color: ${palette('--footall-match-stat-border')};
 	}
 `;
 
@@ -43,7 +43,7 @@ const labelCss = css`
 	${textSansBold14};
 	grid-area: label;
 	justify-self: center;
-	color: ${palette.neutral[7]};
+	color: ${palette('--footall-match-stat-name')};
 	${from.desktop} {
 		${textSansBold15};
 	}
diff --git a/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx b/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx
index 0749d03aa9c..7bfc0cbcbff 100644
--- a/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx
+++ b/dotcom-rendering/src/components/FootballMiniMatchStats.stories.tsx
@@ -1,10 +1,11 @@
 import { css } from '@emotion/react';
-import { breakpoints, from, palette } from '@guardian/source/foundations';
+import { breakpoints, from } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { palette } from '../palette';
 import { FootballMiniMatchStats as FootballMiniMatchStatsComponent } from './FootballMiniMatchStats';
 
 const gridCss = css`
-	background-color: ${palette.neutral[97]};
+	background-color: ${palette('--football-live-blog-background')};
 	/**
 	 * Extremely simplified live blog grid layout as we're only interested in
 	 * the 240px wide left column added at the desktop breakpoint.
diff --git a/dotcom-rendering/src/components/FootballMiniMatchStats.tsx b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
index d5159f6d8b1..badfac1d18f 100644
--- a/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
+++ b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
@@ -1,9 +1,10 @@
 import { css } from '@emotion/react';
-import { from, palette } from '@guardian/source/foundations';
+import { from } from '@guardian/source/foundations';
 import {
 	LinkButton,
 	SvgArrowRightStraight,
 } from '@guardian/source/react-components';
+import { palette } from '../palette';
 import { FootballMatchStat } from './FootballMatchStat';
 
 const containerCss = css`
@@ -74,7 +75,11 @@ export const FootballMiniMatchStats = ({
 				size="small"
 				icon={<SvgArrowRightStraight />}
 				iconSide="right"
-				theme={{ backgroundPrimary: palette.sport[400] }}
+				theme={{
+					backgroundPrimary: palette(
+						'--footall-match-stat-button-background',
+					),
+				}}
 			>
 				<span css={buttonTextCss}>More stats, line-ups and tables</span>
 				<span css={buttonTextShortCss}>Stats and line ups</span>
diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
index c6b0d50efc7..31239e3c77a 100644
--- a/dotcom-rendering/src/paletteDeclarations.ts
+++ b/dotcom-rendering/src/paletteDeclarations.ts
@@ -7043,6 +7043,10 @@ const paletteColours = {
 		light: () => '#3DB540',
 		dark: () => '#3DB540',
 	},
+	'--football-live-blog-background': {
+		light: () => sourcePalette.neutral[97],
+		dark: () => sourcePalette.neutral[10],
+	},
 	'--football-match-hover': {
 		light: () => sourcePalette.neutral[93],
 		dark: () => sourcePalette.neutral[38],
@@ -7055,6 +7059,18 @@ const paletteColours = {
 		light: () => sourcePalette.sport[500],
 		dark: () => sourcePalette.sport[500],
 	},
+	'--footall-match-stat-border': {
+		light: () => sourcePalette.neutral[86],
+		dark: () => sourcePalette.neutral[20],
+	},
+	'--footall-match-stat-button-background': {
+		light: () => sourcePalette.sport[400],
+		dark: () => sourcePalette.sport[400],
+	},
+	'--footall-match-stat-name': {
+		light: () => sourcePalette.neutral[7],
+		dark: () => sourcePalette.neutral[86],
+	},
 	'--football-score-border': {
 		light: () => sourcePalette.neutral[7],
 		dark: () => sourcePalette.neutral[7],

From 17db668b0a30e3b3f5043969d94a3dedb4d55dd0 Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Wed, 3 Dec 2025 16:02:08 +0000
Subject: [PATCH 13/15] Update dark mode palette based on latest designs

---
 dotcom-rendering/src/components/FootballMatchStat.tsx  |  6 +++---
 .../src/components/FootballMiniMatchStats.tsx          |  2 +-
 dotcom-rendering/src/paletteDeclarations.ts            | 10 +++++-----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/dotcom-rendering/src/components/FootballMatchStat.tsx b/dotcom-rendering/src/components/FootballMatchStat.tsx
index 47e55f94bd0..106637d4447 100644
--- a/dotcom-rendering/src/components/FootballMatchStat.tsx
+++ b/dotcom-rendering/src/components/FootballMatchStat.tsx
@@ -12,7 +12,7 @@ import { palette } from '../palette';
 const containerCss = css`
 	position: relative;
 	padding: 5px 10px 10px;
-	border: 1px solid ${palette('--footall-match-stat-border')};
+	border: 1px solid ${palette('--football-match-stat-border')};
 	border-radius: 6px;
 	&::before {
 		position: absolute;
@@ -21,7 +21,7 @@ const containerCss = css`
 		bottom: 0;
 		width: 1px;
 		height: 24px;
-		background-color: ${palette('--footall-match-stat-border')};
+		background-color: ${palette('--football-match-stat-border')};
 	}
 `;
 
@@ -43,7 +43,7 @@ const labelCss = css`
 	${textSansBold14};
 	grid-area: label;
 	justify-self: center;
-	color: ${palette('--footall-match-stat-name')};
+	color: ${palette('--football-match-stat-name')};
 	${from.desktop} {
 		${textSansBold15};
 	}
diff --git a/dotcom-rendering/src/components/FootballMiniMatchStats.tsx b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
index badfac1d18f..f4d40a01373 100644
--- a/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
+++ b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
@@ -77,7 +77,7 @@ export const FootballMiniMatchStats = ({
 				iconSide="right"
 				theme={{
 					backgroundPrimary: palette(
-						'--footall-match-stat-button-background',
+						'--football-match-stat-button-background',
 					),
 				}}
 			>
diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
index 31239e3c77a..7f83f005e34 100644
--- a/dotcom-rendering/src/paletteDeclarations.ts
+++ b/dotcom-rendering/src/paletteDeclarations.ts
@@ -7059,15 +7059,15 @@ const paletteColours = {
 		light: () => sourcePalette.sport[500],
 		dark: () => sourcePalette.sport[500],
 	},
-	'--footall-match-stat-border': {
+	'--football-match-stat-border': {
 		light: () => sourcePalette.neutral[86],
-		dark: () => sourcePalette.neutral[20],
+		dark: () => sourcePalette.neutral[38],
 	},
-	'--footall-match-stat-button-background': {
+	'--football-match-stat-button-background': {
 		light: () => sourcePalette.sport[400],
-		dark: () => sourcePalette.sport[400],
+		dark: () => sourcePalette.sport[500],
 	},
-	'--footall-match-stat-name': {
+	'--football-match-stat-name': {
 		light: () => sourcePalette.neutral[7],
 		dark: () => sourcePalette.neutral[86],
 	},

From d432bc4869b88990acc699f322556c348856c255 Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Wed, 3 Dec 2025 16:59:00 +0000
Subject: [PATCH 14/15] Add button hover colours to palette

---
 dotcom-rendering/src/components/FootballMiniMatchStats.tsx | 3 +++
 dotcom-rendering/src/paletteDeclarations.ts                | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/dotcom-rendering/src/components/FootballMiniMatchStats.tsx b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
index f4d40a01373..23ecea0b33e 100644
--- a/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
+++ b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
@@ -79,6 +79,9 @@ export const FootballMiniMatchStats = ({
 					backgroundPrimary: palette(
 						'--football-match-stat-button-background',
 					),
+					backgroundPrimaryHover: palette(
+						'--football-match-stat-button-background-hover',
+					),
 				}}
 			>
 				<span css={buttonTextCss}>More stats, line-ups and tables</span>
diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
index 7f83f005e34..91be5d18441 100644
--- a/dotcom-rendering/src/paletteDeclarations.ts
+++ b/dotcom-rendering/src/paletteDeclarations.ts
@@ -7067,6 +7067,10 @@ const paletteColours = {
 		light: () => sourcePalette.sport[400],
 		dark: () => sourcePalette.sport[500],
 	},
+	'--football-match-stat-button-background-hover': {
+		light: () => '#00679E', // replace with Source's `calculateHoverColour` when available
+		dark: () => '#00A1E6',
+	},
 	'--football-match-stat-name': {
 		light: () => sourcePalette.neutral[7],
 		dark: () => sourcePalette.neutral[86],

From 7106f31855695e889567daa6e56c7faab7a30825 Mon Sep 17 00:00:00 2001
From: James Mockett <1166188+jamesmockett@users.noreply.github.com>
Date: Tue, 9 Dec 2025 16:17:25 +0000
Subject: [PATCH 15/15] Remove console log

---
 dotcom-rendering/src/components/FootballMiniMatchStats.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/dotcom-rendering/src/components/FootballMiniMatchStats.tsx b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
index 23ecea0b33e..0c335fcb1cd 100644
--- a/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
+++ b/dotcom-rendering/src/components/FootballMiniMatchStats.tsx
@@ -49,7 +49,6 @@ export const FootballMiniMatchStats = ({
 	awayTeam,
 	stats,
 }: Props) => {
-	console.log(homeTeam, awayTeam, stats);
 	return (
 		<div css={containerCss}>
 			{stats.map((stat) => (