diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
index 427d828a..ab64ee82 100644
--- a/.storybook/storybook.scss
+++ b/.storybook/storybook.scss
@@ -2,6 +2,7 @@
 
 @use "../src/nationalarchives/tools/colour";
 @use "../src/nationalarchives/tools/media";
+@use "../src/nationalarchives/tools/typography";
 
 @import "https://use.typekit.net/hkj3kuz.css";
 
@@ -149,7 +150,10 @@
 }
 
 .tna-colour-contrast-demo {
+  width: 0;
+  max-width: calc(100% - 1px);
   display: table;
+  table-layout: auto;
 
   border-top: rgb(0 0 0/0.25) 1px solid;
   border-left: rgb(0 0 0/0.25) 1px solid;
@@ -164,6 +168,8 @@
 
     display: table-cell;
 
+    @include typography.main-font-weight-bold;
+
     border-right: rgb(0 0 0/0.25) 1px solid;
     border-bottom: rgb(0 0 0/0.25) 1px solid;
   }
@@ -182,6 +188,12 @@
     border-right: rgb(0 0 0/0.25) 1px solid;
     border-bottom: rgb(0 0 0/0.25) 1px solid;
 
+    &:first-child {
+      padding: 1rem;
+
+      @include typography.relative-font-size(14);
+    }
+
     &-content {
       height: 100%;
       padding: 1rem;
@@ -196,9 +208,24 @@
 
   .tna-template {
     min-width: 15.25rem;
+
+    p:not(:first-child) {
+      margin-top: 0.25rem;
+    }
   }
 
   .tna-chip {
     margin: 1rem 0;
   }
+
+  .tna-button-group {
+    margin-top: 1rem;
+
+    gap: 0.5rem;
+    flex-wrap: nowrap;
+  }
+
+  .tna-pagination {
+    margin-top: 1rem;
+  }
 }
diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss
index a57d530c..d82d6d44 100644
--- a/src/nationalarchives/components/button/button.scss
+++ b/src/nationalarchives/components/button/button.scss
@@ -86,14 +86,22 @@
     }
   }
 
-  &--solid-hover,
-  .tna-background-accent-light &,
-  .tna-background-accent &:not(.tna-button--accent) {
+  &--solid-hover/*,
+  // .tna-background-accent-light &,
+  .tna-background-accent &:not(.tna-button--accent)*/ {
     &:not(.tna-button--plain):hover {
+      @include colour.colour-font("font-dark");
+
       @include colour.colour-background("page-background");
     }
   }
 
+  .tna-background-accent & {
+    &:hover {
+      @include colour.colour-font("font-dark");
+    }
+  }
+
   .tna-background-accent &--accent {
     @include colour.plain;
 
@@ -109,8 +117,10 @@
 
     &:hover {
       @include colour.colour-font("page-background");
+      // @include colour.colour-font("accent-font-dark");
 
       @include colour.colour-background("font-dark");
+      // background-color: transparent;
     }
   }
 
diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js
deleted file mode 100644
index eddfa858..00000000
--- a/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import Button from "../../../components/button/template.njk";
-
-export default {
-  title: "Utilities/Colour combinations",
-};
-
-const Template = () => {
-  const themes = [
-    "tna-template--light-theme",
-    "tna-template--dark-theme",
-    "tna-template--light-theme tna-template--high-contrast-theme",
-    "tna-template--dark-theme tna-template--high-contrast-theme",
-  ];
-
-  const accents = [
-    "",
-    "tna-template--black-accent",
-    "tna-template--yellow-accent",
-    "tna-template--pink-accent",
-    "tna-template--orange-accent",
-    "tna-template--green-accent",
-    "tna-template--blue-accent",
-  ];
-
-  const blocks = [
-    "",
-    "tna-background-tint",
-    "tna-background-contrast",
-    "tna-background-accent",
-    "tna-background-accent-light",
-  ];
-
-  return `<div class="tna-colour-contrast-demo">
-  <div class="tna-colour-contrast-demo__header">
-    <div class="tna-colour-contrast-demo__block">
-      Blocks
-    </div>
-    ${blocks.reduce(
-      (blockOutput, block) =>
-        `${blockOutput}<div class="tna-colour-contrast-demo__block">
-      ${block || "Base"}
-    </div>`,
-      "",
-    )}
-  </div>
-  <div class="tna-colour-contrast-demo__examples">
-  ${themes.reduce(
-    (themeOutput, theme) =>
-      `${themeOutput}${accents.reduce(
-        (
-          accentOutput,
-          accent,
-        ) => `${accentOutput}<div class="tna-colour-contrast-demo__theme-accent">
-    <div class="tna-colour-contrast-demo__example">
-      ${theme.replace(/tna-template--/g, "").replace(/-theme/g, "")} / ${accent
-        .replace(/tna-template--/g, "")
-        .replace(/-accent/g, "")}
-    </div>
-    ${blocks.reduce(
-      (blockOutput, block) =>
-        `${blockOutput}<div class="tna-colour-contrast-demo__example tna-template ${theme} ${accent}">
-      <div class="tna-template__body">
-        <div class="tna-colour-contrast-demo__example-content ${block}">
-          <p>Text</p>
-          <p><a href="#">Link</a></p>
-          <p><a href="#" class="tna-colour-contrast-demo__link--visited">Link (visited)</a></p>
-          <span class="tna-chip">Chip</span>
-          ${Button({
-            params: {
-              text: "Button",
-            },
-          })}
-          ${Button({
-            params: {
-              text: "Button",
-              accent: true,
-            },
-          })}
-        </div>
-      </div>
-    </div>`,
-      "",
-    )}
-  </div>`,
-        "",
-      )}`,
-    "",
-  )}
-  </div>
-</div>`;
-};
-
-export const All = Template.bind({});
-All.args = {};
diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
index b8ed02d7..0f08dd39 100644
--- a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
+++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
@@ -73,9 +73,9 @@ const Template = ({ theme, accent }) => {
       ? "tna-template--dark-theme tna-template--high-contrast-theme"
       : ""
   } ${
-    accent === "black"
+    /*accent === "black"
       ? "tna-template--black-accent"
-      : accent === "yellow"
+      : */ accent === "yellow"
       ? "tna-template--yellow-accent"
       : accent === "pink"
       ? "tna-template--pink-accent"
@@ -258,7 +258,6 @@ const Template = ({ theme, accent }) => {
                     params: {
                       text: "Primary button",
                       href: "#",
-                      classes: "tna-button--solid-hover",
                     },
                   })}
                 </div>
@@ -1204,3 +1203,144 @@ DarkHighContrast.args = {
   theme: "dark high-contrast",
   accent: "pink",
 };
+
+const CombinationsTemplate = () => {
+  const themes = [
+    "tna-template--light-theme",
+    "tna-template--light-theme tna-template--high-contrast-theme",
+    "tna-template--dark-theme",
+    "tna-template--dark-theme tna-template--high-contrast-theme",
+  ];
+
+  const accents = [
+    "",
+    // "tna-template--black-accent",
+    "tna-template--yellow-accent",
+    "tna-template--pink-accent",
+    "tna-template--orange-accent",
+    "tna-template--green-accent",
+    "tna-template--blue-accent",
+  ];
+
+  const blocks = [
+    "",
+    "tna-background-tint",
+    "tna-background-accent-light",
+    "tna-background-accent",
+    "tna-background-contrast",
+  ];
+
+  return `<div class="tna-colour-contrast-demo">
+  <div class="tna-colour-contrast-demo__header">
+    <div class="tna-colour-contrast-demo__block">
+      Blocks
+    </div>
+    ${blocks.reduce(
+      (blockOutput, block) =>
+        `${blockOutput}<div class="tna-colour-contrast-demo__block">
+      ${block.replace(/^tna-background-/, "") || "Base"}
+    </div>`,
+      "",
+    )}
+  </div>
+  <div class="tna-colour-contrast-demo__examples">
+  ${themes.reduce(
+    (themeOutput, theme) =>
+      `${themeOutput}${accents.reduce(
+        (
+          accentOutput,
+          accent,
+        ) => `${accentOutput}<div class="tna-colour-contrast-demo__theme-accent">
+    <div class="tna-colour-contrast-demo__example">
+      <p>Theme: <strong>${theme
+        .replace(/tna-template--/g, "")
+        .replace(/-theme/g, "")}</strong></p>
+      <p>Accent: <strong>${
+        accent.replace(/tna-template--/g, "").replace(/-accent/g, "") ||
+        "No accent"
+      }</strong></p>
+    </div>
+    ${blocks.reduce(
+      (blockOutput, block) =>
+        `${blockOutput}<div class="tna-colour-contrast-demo__example tna-template ${theme} ${accent}">
+      <div class="tna-template__body">
+        <div class="tna-colour-contrast-demo__example-content ${block}">
+          <p>Text</p>
+          <p><a href="#">Link</a> / <a href="#" class="tna-colour-contrast-demo__link--visited">Link (visited)</a></p>
+          <span class="tna-chip">Chip</span>
+          <div class="tna-button-group">
+            ${Button({
+              params: {
+                text: "Button",
+                small: true,
+              },
+            })}
+            ${Button({
+              params: {
+                text: "Button",
+                small: true,
+                accent: true,
+              },
+            })}
+            ${Button({
+              params: {
+                text: "Button",
+                small: true,
+                plain: true,
+              },
+            })}
+            <!--${Button({
+              params: {
+                text: "Button",
+                accent: true,
+                class: "tna-button--solid-hover",
+              },
+            })}-->
+          </div>
+          <!--${Pagination({
+            params: {
+              previous: {
+                href: "#",
+              },
+              items: [
+                {
+                  number: 1,
+                  href: "#",
+                },
+                {
+                  ellipsis: true,
+                },
+                {
+                  number: 7,
+                  current: true,
+                  href: "#",
+                },
+                {
+                  ellipsis: true,
+                },
+                {
+                  number: 42,
+                  href: "#",
+                },
+              ],
+              next: {
+                href: "#",
+              },
+            },
+          })}-->
+        </div>
+      </div>
+    </div>`,
+      "",
+    )}
+  </div>`,
+        "",
+      )}`,
+    "",
+  )}
+  </div>
+</div>`;
+};
+
+export const Combinations = CombinationsTemplate.bind({});
+Combinations.args = {};
diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
index e93437ed..84caa402 100644
--- a/src/nationalarchives/tools/_colour.scss
+++ b/src/nationalarchives/tools/_colour.scss
@@ -53,30 +53,30 @@
     --accent-link-visited: #{brand-colour("white")} !important;
     --accent-keyline: #{brand-colour("white", 0.5)} !important;
     --accent-keyline-dark: #{brand-colour("white", 0.8)} !important;
-    @if $colour != "black" {
-      --button-accent-text: #{brand-colour("white")} !important;
-      @if $colour == "pink" {
-        // --accent: #{brand-colour("pink")} !important;
-        --accent-background: #{brand-colour("maroon")} !important;
-        --accent-background-light: #{brand-colour("pastel-pink")} !important;
-        --button-accent-background: #{brand-colour("maroon")} !important;
-      } @else if $colour == "orange" {
-        // --accent: #{brand-colour("orange")} !important;
-        --accent-background: #{brand-colour("chestnut")} !important;
-        --accent-background-light: #{brand-colour("pastel-orange")} !important;
-        --button-accent-background: #{brand-colour("chestnut")} !important;
-      } @else if $colour == "green" {
-        // --accent: #{brand-colour("green")} !important;
-        --accent-background: #{brand-colour("forest")} !important;
-        --accent-background-light: #{brand-colour("pastel-green")} !important;
-        --button-accent-background: #{brand-colour("forest")} !important;
-      } @else if $colour == "blue" {
-        // --accent: #{brand-colour("blue")} !important;
-        --accent-background: #{brand-colour("navy")} !important;
-        --accent-background-light: #{brand-colour("pastel-blue")} !important;
-        --button-accent-background: #{brand-colour("navy")} !important;
-      }
+    // @if $colour != "black" {
+    --button-accent-text: #{brand-colour("white")} !important;
+    @if $colour == "pink" {
+      // --accent: #{brand-colour("pink")} !important;
+      --accent-background: #{brand-colour("maroon")} !important;
+      --accent-background-light: #{brand-colour("pastel-pink")} !important;
+      --button-accent-background: #{brand-colour("maroon")} !important;
+    } @else if $colour == "orange" {
+      // --accent: #{brand-colour("orange")} !important;
+      --accent-background: #{brand-colour("chestnut")} !important;
+      --accent-background-light: #{brand-colour("pastel-orange")} !important;
+      --button-accent-background: #{brand-colour("chestnut")} !important;
+    } @else if $colour == "green" {
+      // --accent: #{brand-colour("green")} !important;
+      --accent-background: #{brand-colour("forest")} !important;
+      --accent-background-light: #{brand-colour("pastel-green")} !important;
+      --button-accent-background: #{brand-colour("forest")} !important;
+    } @else if $colour == "blue" {
+      // --accent: #{brand-colour("blue")} !important;
+      --accent-background: #{brand-colour("navy")} !important;
+      --accent-background-light: #{brand-colour("pastel-blue")} !important;
+      --button-accent-background: #{brand-colour("navy")} !important;
     }
+    // }
   }
 }
 
@@ -254,7 +254,7 @@
   --font-light: var(--accent-font-light);
   --icon-light: var(--accent-icon-light);
   --link: var(--accent-link);
-  --link-visited: var(--accent-link-visited);
+  --link-visited: var(--accent-link);
   --keyline: var(--accent-keyline);
   --keyline-dark: var(--accent-keyline-dark);
 
@@ -289,8 +289,8 @@
   --font-base: #{map.get(colour.$colour-palette-default, "font-base")};
   --font-dark: #{map.get(colour.$colour-palette-default, "font-dark")};
   --font-light: #{map.get(colour.$colour-palette-default, "font-light")};
-  --link: #{map.get(colour.$colour-palette-default, "font-dark")};
-  --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+  // --link: #{map.get(colour.$colour-palette-default, "link")};
+  // --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
   --keyline: #{map.get(colour.$colour-palette-default, "keyline")};
   --keyline-dark: #{map.get(colour.$colour-palette-default, "keyline-dark")};
   --button-text: #{map.get(colour.$colour-palette-default, "button-text")};
@@ -309,6 +309,18 @@
 
   @include colour-background("background");
   @include colour-font("font-base");
+
+  .tna-template--system-theme & {
+    @media (prefers-color-scheme: dark) {
+      --link: #{map.get(colour.$colour-palette-default, "link")};
+      --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+    }
+  }
+
+  .tna-template--dark-theme & {
+    --link: #{map.get(colour.$colour-palette-default, "link")};
+    --link-visited: #{map.get(colour.$colour-palette-default, "link-visited")};
+  }
 }
 
 @mixin accent-light {
diff --git a/src/nationalarchives/utilities/_colour.scss b/src/nationalarchives/utilities/_colour.scss
index e3045481..b0fdab9f 100644
--- a/src/nationalarchives/utilities/_colour.scss
+++ b/src/nationalarchives/utilities/_colour.scss
@@ -49,9 +49,9 @@
     }
   }
 
-  &--black-accent {
-    @include colour.accent-css-vars("black");
-  }
+  // &--black-accent {
+  //   @include colour.accent-css-vars("black");
+  // }
 
   &--yellow-accent {
     @include colour.accent-css-vars("yellow");
diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss
index 300b0802..fce3d69b 100644
--- a/src/nationalarchives/utilities/_typography.scss
+++ b/src/nationalarchives/utilities/_typography.scss
@@ -143,6 +143,14 @@ small {
   @include colour.accent;
 
   @include colour.colour-border("accent-background", 0.125rem);
+
+  .tna-background-accent &:not(#{&}--plain) {
+    @include colour.plain;
+
+    // background-color: #f0a !important;
+
+    @include colour.colour-border("background");
+  }
 }
 
 .tna-chip {
diff --git a/src/nationalarchives/variables/_colour.scss b/src/nationalarchives/variables/_colour.scss
index 84e05d49..821f5451 100644
--- a/src/nationalarchives/variables/_colour.scss
+++ b/src/nationalarchives/variables/_colour.scss
@@ -39,7 +39,8 @@ $colour-palette-brand: (
 
 $dark-grey: #26262a;
 $base-font: #343338 !default;
-$link-colour: brand-colour("navy") !default;
+// $link-colour: brand-colour("navy") !default;
+$link-colour: #14659f !default;
 $link-colour-visited: #4c2c92 !default;
 
 /*
@@ -49,7 +50,7 @@ LIGHT THEME (DEFAULT)
 */
 $colour-palette-default: (
   "page-background": #f4f4f4,
-  "background-tint": #e2e2e2,
+  "background-tint": #ededed,
   "font-base": $base-font,
   "font-dark": brand-colour("black"),
   "font-light": hex-to-rgb($base-font, 0.7),
@@ -79,7 +80,7 @@ $colour-palette-default: (
   "contrast-button-hover-background": brand-colour("black"),
   // "accent": map.get($colour-palette-brand, "light-grey"),
   "accent-background": #111,
-  "accent-background-light": map.get($colour-palette-brand, "light-grey"),
+  "accent-background-light": #ededed,
   "accent-font-base": brand-colour("white"),
   "accent-font-dark": brand-colour("white"),
   "accent-font-light": brand-colour("white", 0.7),
@@ -118,7 +119,7 @@ $colour-palette-dark: map.merge(
     "contrast-background": #111,
     "contrast-link-visited":
       map.get($colour-palette-default, "contrast-link-visited"),
-    "accent-background-light": brand-colour("light-grey"),
+    // "accent-background-light": brand-colour("light-grey"),
   )
 ) !default;
 
@@ -143,8 +144,8 @@ $colour-palette-high-contrast: map.merge(
     "contrast-font-base": brand-colour("black"),
     "contrast-font-dark": brand-colour("black"),
     "contrast-font-light": brand-colour("black"),
-    "contrast-link": brand-colour("navy"),
-    "contrast-link-visited": brand-colour("black"),
+    "contrast-link": #34d,
+    "contrast-link-visited": #848,
     "contrast-keyline": brand-colour("black"),
     "contrast-keyline-dark": brand-colour("black"),
     "contrast-button-text": brand-colour("white"),