diff --git a/src/lib/Previews.svelte b/src/lib/Previews.svelte
index 66887426..519a1b4a 100644
--- a/src/lib/Previews.svelte
+++ b/src/lib/Previews.svelte
@@ -28,6 +28,7 @@
 	].join('');
 
 	export const widths = {
+		'100%': '100%',
 		1300: 'wide',
 		980: 'desktop',
 		740: 'tablet',
@@ -70,7 +71,7 @@
 
 <section id="example">
 	{#each Object.keys(widths) as width}
-		<div class="size">
+		<div class="size {width === '100%' && 'full-width'}">
 			<h4>
 				{widths[width]} size ({width})
 			</h4>
@@ -107,7 +108,7 @@
 	</ul>
 </section>
 
-<style>
+<style lang="scss">
 	#example {
 		box-sizing: border-box;
 		width: 100%;
@@ -121,6 +122,10 @@
 		display: flex;
 		flex-direction: column;
 		width: max-content;
+
+		&.full-width {
+			width: 100%;
+		}
 	}
 
 	iframe {
diff --git a/src/lib/gam.ts b/src/lib/gam.ts
index e1fe5047..c82a9c70 100644
--- a/src/lib/gam.ts
+++ b/src/lib/gam.ts
@@ -1,5 +1,6 @@
 const CLICK_MACRO = '%%CLICK_URL_UNESC%%';
 const CACHE_BUST = '%%CACHEBUSTER%%';
+const DEST_URL = '%%DEST_URL%%';
 
 type GAMVariable<T extends string = string> = T;
 
@@ -36,6 +37,7 @@ export type { GAMVariable };
 export {
 	CACHE_BUST,
 	CLICK_MACRO,
+	DEST_URL,
 	addTrackingPixel,
 	gamVar,
 	isValidReplacedVariable,
diff --git a/src/lib/messenger.ts b/src/lib/messenger.ts
index e3e07520..689bb288 100644
--- a/src/lib/messenger.ts
+++ b/src/lib/messenger.ts
@@ -19,8 +19,6 @@ type ResizeMessage = StandardMessage<
 	{ width?: number | string; height?: number | string }
 >;
 
-type StringMessage = StandardMessage<'message', string>;
-
 type BackgroundMessage = StandardMessage<
 	'background',
 	{
@@ -34,23 +32,36 @@ type BackgroundMessage = StandardMessage<
 	}
 >;
 
-type TypeMessage = StandardMessage<'type', string>;
-
-type GetPageURLMessage = StandardMessage<'get-page-url', string>;
+type FabricBackgroundMessage = StandardMessage<
+	'background',
+	{
+		scrollType: string;
+		backgroundColor: string;
+		backgroundImage: string;
+		backgroundRepeat: string;
+		backgroundPosition: string;
+	}
+>;
 
-type PassbackRefreshMessage = StandardMessage<'passback-refresh', string>;
+type StringMessage = StandardMessage<
+	| 'message'
+	| 'type'
+	| 'get-page-url'
+	| 'passback-refresh'
+	| 'viewport'
+	| 'scroll',
+	string
+>;
 
 type Message =
 	| ResizeMessage
 	| StringMessage
 	| BackgroundMessage
-	| TypeMessage
-	| GetPageURLMessage
-	| PassbackRefreshMessage;
+	| FabricBackgroundMessage;
 
 type MessengerResponse = {
 	id: string;
-	result: string;
+	result: unknown;
 };
 
 const generateId = () => {
@@ -79,12 +90,7 @@ const post = (arg: Message): void => {
 
 const isReplyFromMessenger = (json: unknown): json is MessengerResponse => {
 	const reply = json as MessengerResponse;
-	return (
-		'result' in reply &&
-		typeof reply.result === 'string' &&
-		'id' in reply &&
-		typeof reply.id === 'string'
-	);
+	return 'result' in reply && 'id' in reply && typeof reply.id === 'string';
 };
 
 const decodeReply = (e: MessageEvent<string>): MessengerResponse | void => {
@@ -101,7 +107,7 @@ const decodeReply = (e: MessageEvent<string>): MessengerResponse | void => {
 	}
 };
 
-const postAndListen = (arg: Message): Promise<string | void> =>
+const postAndListen = (arg: Message): Promise<unknown | void> =>
 	timeout(
 		new Promise((resolve) => {
 			const id = generateId();
diff --git a/src/templates/components/AdvertisementLabel.svelte b/src/templates/components/AdvertisementLabel.svelte
new file mode 100644
index 00000000..07f50553
--- /dev/null
+++ b/src/templates/components/AdvertisementLabel.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	export let fullWidth: boolean;
+</script>
+
+<div class="container" class:fullWidth>
+	<div class="text">Advertisement</div>
+</div>
+
+<style lang="scss">
+	@import './fonts/Sans.css';
+
+	.container {
+		position: relative;
+		height: 2em;
+		background-color: #f6f6f6;
+		border-top: 1px solid #dcdcdc;
+		color: #707070;
+		font-family: 'GuardianTextSans', 'Helvetica Neue', Helvetica, Arial,
+			'Lucida Grande', sans-serif;
+		font-size: 0.75rem;
+		line-height: 1.9;
+		font-weight: 400;
+		box-sizing: border-box;
+
+		&.fullWidth {
+			padding: 0 calc(50% - 650px); // Keep the label central for large screens
+		}
+
+		&:not(.fullWidth) {
+			margin: 0 auto;
+			@media (min-width: 740px) {
+				max-width: 740px;
+			}
+			@media (min-width: 980px) {
+				max-width: 980px;
+			}
+			@media (min-width: 1140px) {
+				max-width: 1140px;
+			}
+			@media (min-width: 1300px) {
+				max-width: 1300px;
+			}
+		}
+	}
+
+	.text {
+		padding: 0 10px;
+
+		@media (min-width: 740px) {
+			padding: 0 20px;
+		}
+	}
+</style>
diff --git a/src/templates/components/Pixel.svelte b/src/templates/components/Pixel.svelte
new file mode 100644
index 00000000..031444aa
--- /dev/null
+++ b/src/templates/components/Pixel.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let src: string;
+</script>
+
+<img {src} alt="" class="pixel" />
+
+<style lang="scss">
+	.pixel {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		width: 1px;
+		height: 1px;
+		opacity: 0;
+	}
+</style>
diff --git a/src/templates/components/colours/palette.scss b/src/templates/components/colours/palette.scss
new file mode 100644
index 00000000..a640e6a2
--- /dev/null
+++ b/src/templates/components/colours/palette.scss
@@ -0,0 +1,128 @@
+$guardian-brand: #c70000;
+$guardian-brand-light: #94b1ca;
+$guardian-brand-dark: #121212;
+
+$error: #d61d00;
+$success: #4a7801;
+
+// Neutral palette
+$neutral-1: #333333;
+$neutral-2: #767676;
+$neutral-3: #bdbdbd;
+$neutral-4: #dcdcdc;
+$neutral-5: #dfdfdf;
+$neutral-6: #eaeaea;
+$neutral-7: #f1f1f1;
+$neutral-8: #f6f6f6;
+$neutral-2-contrasted: darken($neutral-2, 3%);
+
+// News palette
+$news-main-1: #005689;
+$news-main-2: #4bc6df;
+$news-support-1: #aad8f1;
+$news-support-2: #197caa;
+$news-support-3: #69d1ca;
+$news-support-4: #66a998;
+$news-support-5: #aad801;
+$news-support-6: #63717a;
+$news-support-7: #484f53;
+
+// Features palette
+$features-main-1: #7d0068;
+$features-main-2: #b82266;
+$features-support-1: #951c55;
+$features-support-2: #4e0375;
+$features-support-3: #fdadba;
+$features-support-4: #dc2a7d;
+
+// Comment palette
+$comment-main-1: #c05303;
+$comment-main-2: #ff9b0b;
+$comment-support-1: #7d7569;
+$comment-support-2: #efefec;
+$comment-support-3: #ffce4b;
+$comment-support-4: #e6711b;
+
+// Multimedia palette
+$multimedia-main-1: #333333;
+$multimedia-main-2: #c70000;
+$multimedia-support-1: #c5d4ea;
+$multimedia-support-2: #507892;
+$multimedia-support-3: #002c59;
+$multimedia-support-4: #484848;
+$multimedia-support-5: #161616;
+
+// Futurelearn palette
+$futurelearn-main-1: #333333;
+$futurelearn-main-2: #f18b00;
+$futurelearn-support-1: #c5d4ea;
+$futurelearn-support-2: #507892;
+$futurelearn-support-3: #002c59;
+$futurelearn-support-4: #484848;
+$futurelearn-support-5: #161616;
+
+// Live palette
+$live-main-1: #f5b3c7;
+$live-main-2: #e71c77;
+$live-support-1: #ff5b3a;
+$live-support-2: #800c0c;
+$live-support-3: #a60947;
+
+// Maps palette
+$maps-main-1: #1c6326;
+$maps-main-2: #298422;
+$maps-support-1: #ceb41d;
+$maps-support-2: #a9af2b;
+$maps-support-3: #5ebfba;
+$maps-support-4: #72af7e;
+
+// External content palette
+$external-main-1: #1c6326;
+$external-support-1: #a9af2b;
+
+$paid-article: #d9d9d9;
+$paid-article-bg: #d1d1d1;
+$paid-article-header: #bfbfbf;
+$paid-article-header-bg: #b8b8b8;
+$paid-article-subheader: #f6f6f6;
+$paid-article-subheader-bg: #c4c4c4;
+$paid-article-media-bg: #bbb7b1;
+$paid-article-icon: #767676;
+$paid-article-brand: #69d1ca;
+$paid-article-mpu: #cccccc;
+$paidfor-background: $news-support-3;
+$rainbow-red: #ed1c24; // from Guss
+$paid-card-kicker: #626262;
+
+$media-background: $multimedia-support-5;
+
+// Membership
+// =============================================================================
+
+$membership-default: #2d4391;
+
+// Lifestyle (magenta)
+$lifestyle-dark: #7d0068;
+$lifestyle-main: #bb3b80;
+$lifestyle-bright: #ffabdb;
+$lifestyle-pastel: #fec8d3;
+$lifestyle-faded: #feeef7;
+
+// New garnett colours
+// =============================================================================
+
+$guardian-books-rebrand: #8e246f;
+$guardian-live-rebrand: #c83877;
+$guardian-jobs-rebrand: #469d93;
+$guardian-travel-rebrand: #007ba6;
+$guardian-money-rebrand: #b39069;
+$guardian-masterclasses-rebrand: #f4bc44;
+$guardian-subscriptions-rebrand: #d01317;
+$guardian-subscriptions-rebrand-blue: #005689;
+$guardian-generic-rebrand: #012937;
+$guardian-weekly-rebrand: #2c363b;
+$guardian-members-rebrand: #bb3a7f;
+$news-garnett-highlight: #ffe500;
+$guardian-patron: #4f5249;
+$guardian-highlight-hover: #f2ae00;
+$guardian-support: #ff7f0f;
diff --git a/src/templates/csr/fabric/ad.json b/src/templates/csr/fabric/ad.json
new file mode 100644
index 00000000..b6339dec
--- /dev/null
+++ b/src/templates/csr/fabric/ad.json
@@ -0,0 +1,3 @@
+{
+	"nativeStyleId": "71299"
+}
diff --git a/src/templates/csr/fabric/index.svelte b/src/templates/csr/fabric/index.svelte
new file mode 100644
index 00000000..b9c0d41c
--- /dev/null
+++ b/src/templates/csr/fabric/index.svelte
@@ -0,0 +1,156 @@
+<!-- https://polyfill.io/v3/polyfill.min.js?features=default -->
+<script lang="ts">
+	import { post } from '$lib/messenger';
+	import { CLICK_MACRO, DEST_URL, GAMVariable } from '$lib/gam';
+	import { isValidReplacedVariable } from '$lib/gam';
+	import AdvertisementLabel from '$templates/components/AdvertisementLabel.svelte';
+	import Pixel from '$templates/components/Pixel.svelte';
+
+	export let Trackingpixel: GAMVariable;
+	export let Researchpixel: GAMVariable;
+	export let Viewabilitypixel: GAMVariable;
+	export let thirdPartyJSTracking: GAMVariable;
+
+	export let BackgroundScrollType: GAMVariable<'parallax' | 'none' | 'fixed'>;
+	export let BackgroundColour: GAMVariable;
+	export let BackgroundImage: GAMVariable;
+	export let BackgroundImagePosition: GAMVariable;
+	export let BackgroundImageRepeat: GAMVariable;
+	export let MobileBackgroundImage: GAMVariable;
+	export let MobileBackgroundImagePosition: GAMVariable;
+	export let MobileBackgroundImageRepeat: GAMVariable;
+
+	export let Layer1BackgroundImage: GAMVariable;
+	export let Layer1BackgroundPosition: GAMVariable;
+	export let Layer2BackgroundImage: GAMVariable;
+	export let Layer2BackgroundPosition: GAMVariable;
+	export let Layer3BackgroundImage: GAMVariable;
+	export let Layer3BackgroundPosition: GAMVariable;
+
+	export let MobileLayer1BackgroundImage: GAMVariable;
+	export let MobileLayer1BackgroundPosition: GAMVariable;
+	export let MobileLayer2BackgroundImage: GAMVariable;
+	export let MobileLayer2BackgroundPosition: GAMVariable;
+	export let MobileLayer3BackgroundImage: GAMVariable;
+	export let MobileLayer3BackgroundPosition: GAMVariable;
+
+	const isMobile = window.matchMedia('(max-width: 739px)').matches;
+	const isTablet = window.matchMedia(
+		'(min-width: 740px) and (max-width: 979px)',
+	).matches;
+
+	const [backgroundImage, backgroundPosition, backgroundRepeat] = isMobile
+		? [
+				MobileBackgroundImage,
+				MobileBackgroundImagePosition,
+				MobileBackgroundImageRepeat,
+		  ]
+		: [BackgroundImage, BackgroundImagePosition, BackgroundImageRepeat];
+
+	const checkScrollType = (scrollType: string): string =>
+		scrollType === 'parallax' && (isMobile || isTablet) ? 'fixed' : scrollType;
+
+	post({
+		type: 'background',
+		value: {
+			scrollType: checkScrollType(BackgroundScrollType),
+			backgroundColor: BackgroundColour,
+			backgroundImage: `url('${backgroundImage}')`,
+			backgroundRepeat,
+			backgroundPosition,
+		},
+	});
+</script>
+
+<svelte:body style:--background-color={BackgroundColour} />
+<AdvertisementLabel fullWidth={BackgroundScrollType === 'parallax'} />
+<a
+	class="fabric-container"
+	class:is-parallax={BackgroundScrollType === 'parallax'}
+	href={`${CLICK_MACRO}${DEST_URL}`}
+	target="_blank"
+>
+	<div
+		class="layer"
+		style:--desktop-background-image={`url('${Layer1BackgroundImage}')`}
+		style:--desktop-background-position={Layer1BackgroundPosition}
+		style:--mobile-background-image={`url('${MobileLayer1BackgroundImage}')`}
+		style:--mobile-background-position={MobileLayer1BackgroundPosition}
+	/>
+	<div
+		class="layer"
+		style:--desktop-background-image={`url('${Layer2BackgroundImage}')`}
+		style:--desktop-background-position={Layer2BackgroundPosition}
+		style:--mobile-background-image={`url('${MobileLayer2BackgroundImage}')`}
+		style:--mobile-background-position={MobileLayer2BackgroundPosition}
+	/>
+	<div
+		class="layer"
+		style:--desktop-background-image={`url('${Layer3BackgroundImage}')`}
+		style:--desktop-background-position={Layer3BackgroundPosition}
+		style:--mobile-background-image={`url('${MobileLayer3BackgroundImage}')`}
+		style:--mobile-background-position={MobileLayer3BackgroundPosition}
+	/>
+</a>
+
+{#if isValidReplacedVariable(Trackingpixel)}
+	<Pixel src={Trackingpixel} />
+{:else if isValidReplacedVariable(Researchpixel)}
+	<Pixel src={Researchpixel} />
+{:else if isValidReplacedVariable(Viewabilitypixel)}
+	<Pixel src={Viewabilitypixel} />
+{/if}
+
+{@html thirdPartyJSTracking}
+
+<style lang="scss">
+	:global(body) {
+		background-color: var(--background-color);
+	}
+
+	.fabric-container {
+		display: block;
+		position: relative;
+		text-decoration: none;
+		margin: 0 auto;
+		height: 250px;
+		overflow: hidden;
+
+		&.is-parallax .layer {
+			background-size: auto;
+		}
+
+		@media (min-width: 740px) {
+			max-width: 740px;
+		}
+		@media (min-width: 980px) {
+			max-width: 980px;
+		}
+		@media (min-width: 1140px) {
+			max-width: 1140px;
+		}
+		@media (min-width: 1300px) {
+			max-width: 1300px;
+		}
+	}
+
+	.layer {
+		width: 100%;
+		height: 250px;
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		background-repeat: no-repeat;
+		background-size: cover;
+		background-image: var(--mobile-background-image);
+		background-position: var(--mobile-background-position);
+	}
+
+	@media (min-width: 740px) {
+		.layer {
+			background-image: var(--desktop-background-image);
+			background-position: var(--desktop-background-position);
+		}
+	}
+</style>
diff --git a/src/templates/csr/fabric/test.json b/src/templates/csr/fabric/test.json
new file mode 100644
index 00000000..30bd3422
--- /dev/null
+++ b/src/templates/csr/fabric/test.json
@@ -0,0 +1,26 @@
+{
+	"Trackingpixel": "",
+	"Researchpixel": "",
+	"Viewabilitypixel": "",
+	"thirdPartyJSTracking": "",
+	"BackgroundScrollType": "parallax",
+	"BackgroundColour": "transparent",
+	"BackgroundImage": "",
+	"BackgroundImagePosition": "center center",
+	"BackgroundImageRepeat": "no-repeat",
+	"Layer1BackgroundImage": "https://tpc.googlesyndication.com/simgad/2711812314176501541?",
+	"Layer1BackgroundPosition": "center center",
+	"Layer2BackgroundImage": "https://tpc.googlesyndication.com/simgad/12134936122847788060?",
+	"Layer2BackgroundPosition": "center center",
+	"Layer3BackgroundImage": "https://tpc.googlesyndication.com/simgad/17595746350082087163?",
+	"Layer3BackgroundPosition": "right top",
+	"MobileBackgroundImage": "",
+	"MobileBackgroundImagePosition": "center center",
+	"MobileBackgroundImageRepeat": "no-repeat",
+	"MobileLayer1BackgroundImage": "https://tpc.googlesyndication.com/simgad/7539644836165961031?",
+	"MobileLayer1BackgroundPosition": "center center",
+	"MobileLayer2BackgroundImage": "",
+	"MobileLayer2BackgroundPosition": "center center",
+	"MobileLayer3BackgroundImage": "",
+	"MobileLayer3BackgroundPosition": "left top"
+}