diff --git a/layouts/_design-system-base.njk b/layouts/_design-system-base.njk
index 10c86ce..a63cd85 100644
--- a/layouts/_design-system-base.njk
+++ b/layouts/_design-system-base.njk
@@ -17,7 +17,18 @@
   <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
 {% endblock %}
 
-{%- set htmlClasses = "tna-template--light-theme tna-template--yellow-accent" -%}
+{%- set htmlClasses = "tna-template--light-theme" -%}
+{% if group === "styles" %}
+  {%- set htmlClasses = htmlClasses + " tna-template--pink-accent" -%}
+{% elseif group === "components" %}
+  {%- set htmlClasses = htmlClasses + " tna-template--green-accent" -%}
+{% elseif group === "patterns" %}
+  {%- set htmlClasses = htmlClasses + " tna-template--blue-accent" -%}
+{% elseif group === "content" %}
+  {%- set htmlClasses = htmlClasses + " tna-template--orange-accent" -%}
+{% else %}
+  {%- set htmlClasses = htmlClasses + " tna-template--yellow-accent" -%}
+{% endif %}
 
 {% block pageTitle %}
   {{ title }} | The National Archives Design System
diff --git a/layouts/_example.njk b/layouts/_example.njk
index 9885671..ca76e6a 100644
--- a/layouts/_example.njk
+++ b/layouts/_example.njk
@@ -6,7 +6,7 @@
   {% set exampleURL = "/design-system/" + params.group + "/" + params.item + "/" + params.example + "/index.html" %}
 
   <section class="tna-ds-component-example">
-    <a href="{{ exampleURL }}" target="_blank" class="tna-ds-component-example__link">Open this example in new tab</a>
+    <small><a href="{{ exampleURL }}" target="_blank" class="tna-ds-component-example__link">Open this example in new tab</a></small>
 
     <div class="tna-ds-component-example__frame-wrapper">
       <iframe title="{{ exampleTitle + " example" }}" class="tna-ds-component-example__frame tna-ds-component-example__frame--resizable{% if params.size %} tna-ds-component-example__frame--{{ params.size }}{% endif %}" src="{{ exampleURL }}" loading="lazy"></iframe>
@@ -18,19 +18,19 @@
     {% set tabItems = [] %}
     {% if params.html %}
       {% set tabItems = tabItems.concat({
-        id: params.group + "-" + params.item + "-" + params.example + "-html",
+        id: "example-" + params.example + "-html",
         title: "HTML",
         body: '<div class="tna-ds-component-example__code"><pre class="language-html"><code class="language-html">' + html + '</code></pre><div>'
       }) %}
     {% endif %}
     {% if params.nunjucks %}
       {% set tabItems = tabItems.concat({
-        id: params.group + "-" + params.item + "-" + params.example + "-nunjucks",
+        id: "example-" + params.example + "-nunjucks",
         title: "Nunjucks",
         body: '<div class="tna-ds-component-example__code"><pre class="language-javascript"><code class="language-javascript">' + nunjucks + '</code></pre><div>'
       }) %}
       {% set tabItems = tabItems.concat({
-        id: params.group + "-" + params.item + "-" + params.example + "-options",
+        id: "example-" + params.example + "-options",
         title: "Nunjucks options",
         body: exampleOptions(params)
       }) %}
diff --git a/layouts/homepage.njk b/layouts/homepage.njk
new file mode 100644
index 0000000..1f2bd83
--- /dev/null
+++ b/layouts/homepage.njk
@@ -0,0 +1,111 @@
+{% extends "./_design-system-base.njk" %}
+
+{%- from "nationalarchives/components/button/macro.njk" import tnaButton -%}
+{%- from "nationalarchives/components/card/macro.njk" import tnaCard -%}
+{%- from "nationalarchives/components/hero/macro.njk" import tnaHero -%}
+
+{% block main %}
+  {{ tnaHero({
+    heading: "Design your service using National Archives styles, components and patterns",
+    body: "<p>Use this design system to make government services consistent with The National Archives. Learn from the research and experience of other service teams and avoid repeating work that has already been done.</p>" + tnaButton({ text: "Get started", href: "/design-system/get-started/", classes: "tna-button--large" }),
+    image: {
+      src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+      alt: "The front of The National Archives office in Kew",
+      width: 640,
+      height: 360
+    }
+  }) }}
+  <main class="tna-main-wrapper {{ mainClasses }}" id="main-content" role="main">
+    <div class="tna-section">
+      <div class="tna-container">
+        <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+          {{ tnaCard({
+            title: "Styles",
+            headingLevel: 2,
+            headingSize: "l",
+            body: "<p>Make your service look part of The National Archives with guides for applying layout, typography, colour and images.</p>",
+            imageSrc: "https://fakeimg.pl/600x400/9c193a/fff?text=Styles&font=bebas",
+            imageAlt: "",
+            imageWidth: 600,
+            imageHeight: 400,
+            htmlElement: "article",
+            actions: [
+              {
+                text: "Browse styles",
+                href: "/design-system/styles/"
+              }
+            ]
+          }) }}
+        </div>
+        <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+          {{ tnaCard({
+            title: "Components",
+            headingLevel: 2,
+            headingSize: "l",
+            body: "<p>Save time with reusable, accessible components for forms, navigation, panels, tables and more.</p>",
+            imageSrc: "https://fakeimg.pl/600x400/00623b/fff?text=Components&font=bebas",
+            imageAlt: "",
+            imageWidth: 600,
+            imageHeight: 400,
+            htmlElement: "article",
+            actions: [
+              {
+                text: "Browse components",
+                href: "/design-system/components/"
+              }
+            ]
+          }) }}
+        </div>
+        <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+          {{ tnaCard({
+            title: "Patterns",
+            headingLevel: 2,
+            headingSize: "l",
+            body: "<p>Help users complete common tasks like entering names and addresses, filling in forms and creating accounts.</p>",
+            imageSrc: "https://fakeimg.pl/600x400/004c7e/fff?text=Patterns&font=bebas",
+            imageAlt: "",
+            imageWidth: 600,
+            imageHeight: 400,
+            htmlElement: "article",
+            actions: [
+              {
+                text: "Browse patterns",
+                href: "/design-system/patterns/"
+              }
+            ]
+          }) }}
+        </div>
+        <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+          {{ tnaCard({
+            title: "Content",
+            headingLevel: 2,
+            headingSize: "l",
+            body: "<p>Write content in a consistent and understandable way that makes it easier for users to use your service.</p>",
+            imageSrc: "https://fakeimg.pl/600x400/8f3415/fff?text=Content&font=bebas",
+            imageAlt: "",
+            imageWidth: 600,
+            imageHeight: 400,
+            htmlElement: "article",
+            actions: [
+              {
+                text: "Browse content",
+                href: "/design-system/content/"
+              }
+            ]
+          }) }}
+        </div>
+      </div>
+    </div>
+    <hr>
+    <div class="tna-section">
+      <div class="tna-container">
+        <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny">
+          {{ contents | safe }}
+        </div>
+      </div>
+    </div>
+
+
+  </main>
+  {% block afterContent %}{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/lib/index.scss b/lib/index.scss
index 0740794..1f292ae 100644
--- a/lib/index.scss
+++ b/lib/index.scss
@@ -176,10 +176,58 @@ $code-background: #f1ece9;
 
 p {
   code {
+    color: colour.brand-colour("maroon");
+
     background-color: $code-background;
   }
 }
 
+.tna-template__body {
+  > .tna-header + .tna-container {
+    flex: 1;
+  }
+}
+
+.tna-button {
+  &--large {
+    @include typography.relative-font-size(22);
+  }
+}
+
+.tna-hero {
+  &__image {
+    filter: grayscale(1) contrast(1.5) brightness(1.2);
+  }
+
+  &__inner {
+    z-index: 4;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+
+    content: "";
+  }
+
+  &::before {
+    z-index: 2;
+
+    background-color: #004c7e;
+
+    mix-blend-mode: screen;
+  }
+
+  &::after {
+    z-index: 3;
+
+    background-color: #fc0;
+
+    mix-blend-mode: multiply;
+  }
+}
+
 .app-example-page {
   min-height: auto;
   padding: 2rem;
diff --git a/src/index.md b/src/index.md
index 3ed9cc9..985f75d 100644
--- a/src/index.md
+++ b/src/index.md
@@ -1,16 +1,12 @@
 ---
-layout: simple.njk
+layout: homepage.njk
 title: Welcome
 description: Designing services for The National Archives
 order: 1
 ---
 
-# Welcome to The National Archives Design System
+## Principles we follow
 
-Hello
+The National Archives Design System helps teams that work on National Archive services follow the [Government Design Principles](https://www.gov.uk/guidance/government-design-principles) and [GOV.UK Service Manual](https://www.gov.uk/service-manual).
 
-- alpha
-- beta
-
-1. alpha
-1. beta
+This website also follows the [style guide](https://www.gov.uk/guidance/style-guide) and [content design guidance](https://www.gov.uk/guidance/content-design) used by GOV.UK.