diff --git a/apps/astro-website/src/content/documentation/components/brand-definitions.md b/apps/astro-website/src/content/documentation/components/brand-definitions.md
new file mode 100644
index 0000000000..2e4fa8753c
--- /dev/null
+++ b/apps/astro-website/src/content/documentation/components/brand-definitions.md
@@ -0,0 +1,37 @@
+---
+title: Brands & Theme Definitions
+description: Brands, themes, modes, oh-my. Learn Origami's definitions.
+cta: Learn more about component variations
+
+# Navigation config
+nav_display: true
+nav_label: Brands & Themes
+nav_order: 11
+collection_id: components
+---
+
+# Brands & Theme Definitions
+
+The following all combine to change the look, feel, and function of a component:
+
+<dl>
+  <dt>Brand</dt>
+  <dd>A brand applies to an entire product or suite of products. It applies the defining look and feel for the product. E.g "core" (otherwise know as our ft pink brand), "internal" (the ft, but for internal tools and products), the-banker (a specialist title brand).</dd>
+
+  <dt>Sub-Brand</dt>
+  <dd>A sub-brand inherits from a brand, but provides a point of differentiation. E.g. "professional" and "ft-live" both belong to the "core" brand, but offer their own distinct look and feel.</dd>
+
+  <dt>Theme</dt>
+  <dd>A branded product may make use of multiple themes within a page. E.g. an "inverse" theme may be used to provide emphasis or contrast within a section of a branded product.</dd>
+
+  <dt>Mode</dt>
+  <dd>A mode affects the entire product, like looking through a lens, to provide an alternate style for brand and theme. E.g. dark mode, high contrast mode.</dd>
+
+  <dt>Platform</dt>
+  <dd>Platform variations are made to keep a product consistent but in-keeping with its delivery mechanism, e.g. web, ios, android.</dd>
+
+  <dt>Variant</dt>
+  <dd>This is a generic term to refer to a theme, brand, or other differentiator that makes one instance of a component look different to another instance of the same component. E.g. "mono" and "inverse" themes for a button component are variants of the button, a "big" version of the button is also a variant of the button.</dd>
+</dl>
+
+To learn more about brands, other component variations, and how to customise them see [component customisation](/documentation/components/customisation/).
diff --git a/apps/astro-website/src/content/documentation/components/code.md b/apps/astro-website/src/content/documentation/components/code.md
index d7b2104bde..23a14373ac 100644
--- a/apps/astro-website/src/content/documentation/components/code.md
+++ b/apps/astro-website/src/content/documentation/components/code.md
@@ -6,7 +6,7 @@ cta: Learn more about component code
 # Navigation config
 nav_display: true
 nav_label: Code
-nav_order: 12
+nav_order: 13
 collection_id: components
 ---
 
diff --git a/apps/astro-website/src/content/documentation/components/customisation.md b/apps/astro-website/src/content/documentation/components/customisation.md
index 5e84e68f9e..a698cb21cb 100644
--- a/apps/astro-website/src/content/documentation/components/customisation.md
+++ b/apps/astro-website/src/content/documentation/components/customisation.md
@@ -6,13 +6,13 @@ cta: Read more about how to customise components
 # Navigation config
 nav_display: true
 nav_label: Customisation
-nav_order: 11
+nav_order: 12
 collection_id: components
 ---
 
 # Component Customisation
 
-Origami aims to improve design consistency and reduce the time teams spend repeating work. Providing component APIs for customisation helps achieve those aims by allowing components to be used across different contexts and different brands, and to provide flexibility for novel projects which may introduce a more unique style.
+Origami aims to improve design consistency and reduce the time teams spend repeating work. Providing component APIs for customisation helps achieve those aims by allowing components to be used across different contexts and different brands, and to provide flexibility for novel projects which may introduce a more unique style (see [Brands & Theme Definitions](/documentation/components/brand-definitions/)).
 
 This document aims to help you decide if you should customise a component for your project, show the ways a component may be customised, and demonstrate why other approaches should be avoided.
 
diff --git a/apps/astro-website/src/layouts/Head.astro b/apps/astro-website/src/layouts/Head.astro
index a943c85d20..959281d437 100644
--- a/apps/astro-website/src/layouts/Head.astro
+++ b/apps/astro-website/src/layouts/Head.astro
@@ -130,6 +130,117 @@ const origamiJs = [...jsAndCss].map(js => js.name + js.version).join(",")
 		}
 	</style>
 
+	<style lang="scss" is:global>
+		// NOTE
+		// Some temporary styles just to make this look less awful while
+		// we work on it. Remove these as soon as styling work begins
+
+		html,
+		body {
+			margin: 0;
+			height: 100%;
+		}
+
+		abbr {
+			text-decoration: none;
+			border-bottom: 1px dotted black;
+		}
+
+		.no-wrap {
+			white-space: nowrap;
+		}
+
+		aside.no-padding {
+			padding-left: 0;
+			grid-row: span 7;
+
+			p {
+				padding-left: 1em;
+			}
+			pre {
+				margin: 0;
+			}
+		}
+
+		iframe {
+			border: none;
+			margin-bottom: 1em;
+			width: 100%;
+		}
+
+		img {
+			display: inline-block;
+			max-width: 100%;
+		}
+
+		table.o-manifest__table {
+			width: auto;
+		}
+
+		.o-layout__hero:before {
+			background-image: url("/assets/images/home-page-hero.jpg");
+		}
+
+		.o-layout__hero svg {
+			display: none;
+		}
+
+		@media (prefers-reduced-motion: no-preference) and (min-width: 490px) {
+			.o-website__hero--home {
+				padding: 0;
+
+				&.o-layout__hero:before {
+					content: none;
+				}
+
+				svg {
+					position: absolute;
+					display: block;
+					width: 100vw;
+					height: 100%;
+				}
+			}
+
+			.o-website__hero--text {
+				position: absolute;
+				pointer-events: none;
+			}
+		}
+
+		.o-header-services__logo {
+			background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:origami?format=svg&source=origami&width=55);
+		}
+
+		dl {
+			margin: 0 0 var(--o-spacing-s6) 0;
+		}
+
+		dd {
+			margin: var(--o-spacing-s2);
+			margin-bottom: var(--o-spacing-s4);
+		}
+
+		dt,
+		strong {
+			font-weight: 600;
+		}
+
+		// Charts
+
+		.chart {
+			width: 100%;
+			margin-bottom: 1em;
+		}
+
+		.chart-grid {
+			display: flex;
+			flex-wrap: wrap;
+			.chart {
+				width: 50%;
+			}
+		}
+	</style>
+
 	<!-- JS -->
 	<script
 		defer
diff --git a/apps/astro-website/src/pages/index.astro b/apps/astro-website/src/pages/index.astro
index 8e53bd6ba9..3d20a3f13e 100644
--- a/apps/astro-website/src/pages/index.astro
+++ b/apps/astro-website/src/pages/index.astro
@@ -95,104 +95,3 @@ const description =
 		</div>
 	</div>
 </Layout>
-
-<style lang="scss" is:global>
-	// NOTE
-	// Some temporary styles just to make this look less awful while
-	// we work on it. Remove these as soon as styling work begins
-
-	html,
-	body {
-		margin: 0;
-		height: 100%;
-	}
-
-	abbr {
-		text-decoration: none;
-		border-bottom: 1px dotted black;
-	}
-
-	.no-wrap {
-		white-space: nowrap;
-	}
-
-	aside.no-padding {
-		padding-left: 0;
-		grid-row: span 7;
-
-		p {
-			padding-left: 1em;
-		}
-		pre {
-			margin: 0;
-		}
-	}
-
-	iframe {
-		border: none;
-		margin-bottom: 1em;
-		width: 100%;
-	}
-
-	img {
-		display: inline-block;
-		max-width: 100%;
-	}
-
-	table.o-manifest__table {
-		width: auto;
-	}
-
-	.o-layout__hero:before {
-		background-image: url("/assets/images/home-page-hero.jpg");
-	}
-
-	.o-layout__hero svg {
-		display: none;
-	}
-
-	@media (prefers-reduced-motion: no-preference) and (min-width: 490px) {
-		.o-website__hero--home {
-			padding: 0;
-
-			&.o-layout__hero:before {
-				content: none;
-			}
-
-			svg {
-				position: absolute;
-				display: block;
-				width: 100vw;
-				height: 100%;
-			}
-		}
-
-		.o-website__hero--text {
-			position: absolute;
-			pointer-events: none;
-		}
-	}
-
-	.o-header-services__logo {
-		background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:origami?format=svg&source=origami&width=55);
-	}
-
-	strong {
-		font-weight: 600;
-	}
-
-	// Charts
-
-	.chart {
-		width: 100%;
-		margin-bottom: 1em;
-	}
-
-	.chart-grid {
-		display: flex;
-		flex-wrap: wrap;
-		.chart {
-			width: 50%;
-		}
-	}
-</style>