diff --git a/dotcom-rendering/src/components/FollowButton.stories.tsx b/dotcom-rendering/src/components/FollowButton.stories.tsx
index cb648b9f9b0..8d4f4a9a327 100644
--- a/dotcom-rendering/src/components/FollowButton.stories.tsx
+++ b/dotcom-rendering/src/components/FollowButton.stories.tsx
@@ -1,4 +1,5 @@
 import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
+import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import { FollowButton } from './FollowButton';
 
 export default {
@@ -12,25 +13,30 @@ export const NotFollowing = () => {
 			displayName="Contributor"
 			isFollowing={false}
 			onClickHandler={() => undefined}
-			format={{
-				display: ArticleDisplay.Standard,
-				design: ArticleDesign.Standard,
-				theme: Pillar.News,
-			}}
 		/>
 	);
 };
+NotFollowing.decorators = [
+	splitTheme({
+		display: ArticleDisplay.Standard,
+		design: ArticleDesign.Standard,
+		theme: Pillar.News,
+	}),
+];
+
 export const Following = () => {
 	return (
 		<FollowButton
 			displayName="Contributor"
 			isFollowing={true}
 			onClickHandler={() => undefined}
-			format={{
-				display: ArticleDisplay.Standard,
-				design: ArticleDesign.Standard,
-				theme: Pillar.Opinion,
-			}}
 		/>
 	);
 };
+Following.decorators = [
+	splitTheme({
+		display: ArticleDisplay.Standard,
+		design: ArticleDesign.Standard,
+		theme: Pillar.Opinion,
+	}),
+];
diff --git a/dotcom-rendering/src/components/FollowButton.test.tsx b/dotcom-rendering/src/components/FollowButton.test.tsx
index 61dda0a4db1..a9d440810c4 100644
--- a/dotcom-rendering/src/components/FollowButton.test.tsx
+++ b/dotcom-rendering/src/components/FollowButton.test.tsx
@@ -1,4 +1,3 @@
-import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
 import { render, waitFor } from '@testing-library/react';
 import { FollowButton } from './FollowButton';
 
@@ -8,11 +7,6 @@ it('should show a follow button for a single contributor when rendering for apps
 			isFollowing={false}
 			onClickHandler={() => undefined}
 			displayName="Gwyn Topham"
-			format={{
-				display: ArticleDisplay.Standard,
-				design: ArticleDesign.Standard,
-				theme: Pillar.News,
-			}}
 		/>,
 	);
 	expect(getByText('Follow Gwyn Topham')).toBeInTheDocument();
@@ -24,11 +18,6 @@ it('should show a follow button for a single contributor when rendering for apps
 			onClickHandler={() => undefined}
 			displayName="Gwyn Topham"
 			isFollowing={true}
-			format={{
-				display: ArticleDisplay.Standard,
-				design: ArticleDesign.Standard,
-				theme: Pillar.News,
-			}}
 		/>,
 	);
 	await waitFor(() =>
diff --git a/dotcom-rendering/src/components/FollowButton.tsx b/dotcom-rendering/src/components/FollowButton.tsx
index 16e1c1493a6..58ae514a3e1 100644
--- a/dotcom-rendering/src/components/FollowButton.tsx
+++ b/dotcom-rendering/src/components/FollowButton.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { remSpace, textSans } from '@guardian/source-foundations';
-import { decidePalette } from '../lib/decidePalette';
+import { palette } from '../palette';
 
 type IconProps = {
 	isFollowing: boolean;
@@ -30,9 +30,9 @@ const FollowIcon = ({ isFollowing }: IconProps) => {
 	);
 };
 
-const buttonStyles = (format: ArticleFormat) => css`
+const buttonStyles = css`
 	${textSans.small()}
-	color: ${decidePalette(format).text.articleLink};
+	color: ${palette('--article-link')};
 	background: none;
 	border: none;
 	display: block;
@@ -58,30 +58,22 @@ const containerStyles = css`
 type Props = {
 	displayName: string;
 	isFollowing: boolean;
-	format: ArticleFormat;
 	onClickHandler: () => void;
 };
 
 export const FollowButton = ({
 	displayName,
 	isFollowing,
-	format,
 	onClickHandler,
 }: Props) => {
 	return (
-		<>
-			<button
-				onClick={onClickHandler}
-				type="button"
-				css={buttonStyles(format)}
-			>
-				<span css={containerStyles}>
-					<FollowIcon isFollowing={isFollowing} />
-					<span>
-						{isFollowing ? 'Unfollow' : 'Follow'} {displayName}
-					</span>
+		<button onClick={onClickHandler} type="button" css={buttonStyles}>
+			<span css={containerStyles}>
+				<FollowIcon isFollowing={isFollowing} />
+				<span>
+					{isFollowing ? 'Unfollow' : 'Follow'} {displayName}
 				</span>
-			</button>
-		</>
+			</span>
+		</button>
 	);
 };
diff --git a/dotcom-rendering/src/components/FollowWrapper.importable.tsx b/dotcom-rendering/src/components/FollowWrapper.importable.tsx
index f57479e64fd..6003f9472ee 100644
--- a/dotcom-rendering/src/components/FollowWrapper.importable.tsx
+++ b/dotcom-rendering/src/components/FollowWrapper.importable.tsx
@@ -56,7 +56,6 @@ export const FollowWrapper = ({ id, displayName, format }: Props) => {
 				onClickHandler={
 					isFollowing !== undefined ? handler : () => undefined
 				}
-				format={format}
 			/>
 		</div>
 	);
diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
index 4d8a9bb4efe..6ff7553fe86 100644
--- a/dotcom-rendering/src/palette.ts
+++ b/dotcom-rendering/src/palette.ts
@@ -128,6 +128,139 @@ const avatarDark = ({ design, theme }: ArticleFormat): string => {
 	}
 };
 
+const articleLinkLight = ({ design, theme }: ArticleFormat): string => {
+	switch (design) {
+		case ArticleDesign.LiveBlog:
+		case ArticleDesign.DeadBlog:
+			switch (theme) {
+				case Pillar.News:
+					return sourcePalette.news[400];
+				case Pillar.Lifestyle:
+					return sourcePalette.lifestyle[400];
+				case Pillar.Sport:
+					return sourcePalette.sport[400];
+				case Pillar.Culture:
+					return sourcePalette.culture[350];
+				case Pillar.Opinion:
+					return sourcePalette.opinion[300];
+				case ArticleSpecial.Labs:
+					return sourcePalette.specialReport[400];
+				case ArticleSpecial.SpecialReport:
+					return sourcePalette.specialReport[400];
+				case ArticleSpecial.SpecialReportAlt:
+					return sourcePalette.news[400];
+			}
+		case ArticleDesign.Gallery:
+		case ArticleDesign.Picture:
+			return sourcePalette.neutral[86];
+		case ArticleDesign.Analysis:
+		case ArticleDesign.Comment:
+		case ArticleDesign.Editorial:
+		case ArticleDesign.Explainer:
+		case ArticleDesign.Feature:
+		case ArticleDesign.FullPageInteractive:
+		case ArticleDesign.Interactive:
+		case ArticleDesign.Interview:
+		case ArticleDesign.Letter:
+		case ArticleDesign.NewsletterSignup:
+		case ArticleDesign.PhotoEssay:
+		case ArticleDesign.Review:
+		case ArticleDesign.Standard:
+			switch (theme) {
+				case Pillar.News:
+					return sourcePalette.news[300];
+				case Pillar.Lifestyle:
+					return sourcePalette.lifestyle[300];
+				case Pillar.Sport:
+					return sourcePalette.sport[300];
+				case Pillar.Culture:
+					return sourcePalette.culture[300];
+				case Pillar.Opinion:
+					return sourcePalette.opinion[300];
+				case ArticleSpecial.Labs:
+					return sourcePalette.specialReport[300];
+				case ArticleSpecial.SpecialReport:
+					return sourcePalette.specialReport[300];
+				case ArticleSpecial.SpecialReportAlt:
+					return sourcePalette.specialReportAlt[200];
+			}
+		default:
+			switch (theme) {
+				case Pillar.News:
+					return sourcePalette.news[300];
+				case Pillar.Lifestyle:
+					return sourcePalette.lifestyle[300];
+				case Pillar.Sport:
+					return sourcePalette.sport[300];
+				case Pillar.Culture:
+					return sourcePalette.culture[300];
+				case Pillar.Opinion:
+					return sourcePalette.opinion[300];
+				case ArticleSpecial.Labs:
+					return sourcePalette.specialReport[300];
+				case ArticleSpecial.SpecialReport:
+					return sourcePalette.specialReport[300];
+				case ArticleSpecial.SpecialReportAlt:
+					return sourcePalette.news[300];
+			}
+	}
+};
+
+const articleLinkDark = ({ theme, design }: ArticleFormat): string => {
+	switch (design) {
+		case ArticleDesign.Standard:
+		case ArticleDesign.Review:
+		case ArticleDesign.Explainer:
+		case ArticleDesign.Feature:
+		case ArticleDesign.Interview:
+		case ArticleDesign.Interactive:
+		case ArticleDesign.PhotoEssay:
+		case ArticleDesign.FullPageInteractive:
+		case ArticleDesign.NewsletterSignup:
+		case ArticleDesign.Comment:
+		case ArticleDesign.Letter:
+		case ArticleDesign.Editorial:
+		case ArticleDesign.Analysis:
+			switch (theme) {
+				case Pillar.News:
+					return sourcePalette.news[500];
+				case Pillar.Lifestyle:
+					return sourcePalette.lifestyle[500];
+				case Pillar.Sport:
+					return sourcePalette.sport[500];
+				case Pillar.Culture:
+					return sourcePalette.culture[500];
+				case Pillar.Opinion:
+					return sourcePalette.opinion[500];
+				case ArticleSpecial.Labs:
+					return sourcePalette.specialReport[500];
+				case ArticleSpecial.SpecialReport:
+					return sourcePalette.specialReport[500];
+				case ArticleSpecial.SpecialReportAlt:
+					return sourcePalette.specialReportAlt[700];
+			}
+		default:
+			switch (theme) {
+				case Pillar.News:
+					return sourcePalette.news[500];
+				case Pillar.Lifestyle:
+					return sourcePalette.lifestyle[500];
+				case Pillar.Sport:
+					return sourcePalette.sport[500];
+				case Pillar.Culture:
+					return sourcePalette.culture[500];
+				case Pillar.Opinion:
+					return sourcePalette.opinion[500];
+				case ArticleSpecial.Labs:
+					return sourcePalette.specialReport[500];
+				case ArticleSpecial.SpecialReport:
+					return sourcePalette.specialReport[500];
+				case ArticleSpecial.SpecialReportAlt:
+					return sourcePalette.news[500];
+			}
+	}
+};
+
 const starRatingFillColourLight = (): string => sourcePalette.neutral[7];
 const starRatingFillColourDark = (): string => sourcePalette.neutral[0];
 const starRatingBackgroundColourLight = (): string =>
@@ -706,6 +839,10 @@ const paletteColours = {
 		light: standfirstLinkBorderLight,
 		dark: standfirstLinkBorderDark,
 	},
+	'--article-link': {
+		light: articleLinkLight,
+		dark: articleLinkDark,
+	},
 } satisfies PaletteColours;
 
 /**