From 0b6d0a08b97d786510ebb3f9a395924a9dbe8ff8 Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <mail@andrewhosgood.com>
Date: Wed, 3 Apr 2024 09:32:38 +0100
Subject: [PATCH] Variable scopes and colours (#112)

* Allow border width change, fix variable scopes

* Improve markup of warning component

* Fix column margin removal classes

* Update card fixtures

* Update button macro options

* Alter CSS variables, switch high contrast to media query only

* Add missing IDs to form elements
---
 .storybook/storybook.scss                     | 22 ++++-
 CHANGELOG.md                                  | 18 ++++
 .../components/button/button.scss             | 12 ++-
 .../components/button/macro-options.json      | 24 ++---
 .../components/card/fixtures.json             | 24 +++++
 .../components/checkboxes/checkboxes.njk      |  2 +-
 .../components/checkboxes/fixtures.json       | 12 +--
 .../components/date-input/fixtures.json       | 10 +-
 .../components/date-input/template.njk        |  2 +-
 .../error-summary/error-summary.scss          |  2 +-
 .../featured-records/featured-records.scss    |  5 +-
 .../global-header/global-header.scss          |  1 -
 .../components/header/header.scss             |  5 +-
 .../components/hero/hero.scss                 |  2 +-
 .../components/radios/fixtures.json           | 12 +--
 .../components/radios/radios.njk              |  2 +-
 .../components/skip-link/skip-link.scss       | 10 +-
 .../components/tabs/tabs.scss                 | 30 +++---
 .../components/warning/fixtures.json          |  2 +-
 .../components/warning/template.njk           |  6 +-
 .../global-header-package.scss                |  2 +-
 src/nationalarchives/tools/_colour.scss       | 92 +++++++++++--------
 src/nationalarchives/tools/_grid.scss         |  6 +-
 src/nationalarchives/utilities/_colour.scss   | 53 +++++------
 src/nationalarchives/utilities/_reset.scss    |  4 +
 src/nationalarchives/variables/_borders.scss  |  1 +
 src/nationalarchives/variables/_colour.scss   |  8 +-
 src/nationalarchives/variables/_index.scss    |  1 +
 tasks/test-package.js                         |  1 +
 29 files changed, 223 insertions(+), 148 deletions(-)
 create mode 100644 src/nationalarchives/variables/_borders.scss

diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
index 93c9adad..55ea25bc 100644
--- a/.storybook/storybook.scss
+++ b/.storybook/storybook.scss
@@ -64,12 +64,26 @@
 .sb-story.sb-unstyled {
   @include colour.colour-css-vars;
 
-  @include colour.colour-background("page-background");
+  @include colour.colour-background("background");
 }
 
-.tna-template--padded {
-  > .tna-template__body {
-    padding: 16px;
+.tna-template {
+  &--high-contrast-theme {
+    @include colour.colour-css-vars-high-contrast;
+
+    * {
+      background-image: none !important;
+    }
+
+    &.tna-template--dark-theme {
+      @include colour.colour-css-vars-high-contrast-dark;
+    }
+  }
+
+  &--padded {
+    > .tna-template__body {
+      padding: 16px;
+    }
   }
 }
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4bade86c..3f0bef7d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,10 +8,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.50...HEAD)
 
 ### Added
+
+- "Thick" and button border widths are customisable
+
 ### Changed
+
+- Improved markup of warning component
+- `--page-background` is now `--background`
+
 ### Deprecated
+
+- Deprecated support for the `tna-template--high-contrast-theme` class - high contrast themes can be used by setting a preference for higher contrast in the operating system
+- `colour-font()` no longer has the ability to define the default palette
+
 ### Removed
+
+- Fallbacks for custom CSS properties are defined in the `var()` function rather than in a separate property - this removes any colouring support for browsers without custom CSS properties
+
 ### Fixed
+
+- Fixed column margin removal classes
+- Added missing IDs to some form elements so they can be linked top from the error summary
+
 ### Security
 
 ## [0.1.50](https://github.com/nationalarchives/tna-frontend/compare/v0.1.49...v0.1.50) - 2024-03-28
diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss
index 005e9702..23a94526 100644
--- a/src/nationalarchives/components/button/button.scss
+++ b/src/nationalarchives/components/button/button.scss
@@ -5,6 +5,8 @@
 @use "../../tools/typography";
 @use "button-group";
 
+$button-border-width: 4px !default;
+
 .tna-button {
   padding: spacing.space(0.25) spacing.space(1);
 
@@ -22,7 +24,7 @@
 
   @include colour.colour-background("button-background");
 
-  @include colour.colour-border("button-background", 4px);
+  @include colour.colour-border("button-background", $button-border-width);
 
   cursor: pointer;
 
@@ -144,7 +146,7 @@
     &:not(.tna-button--plain):hover {
       @include colour.colour-font("font-dark");
 
-      @include colour.colour-background("page-background");
+      @include colour.colour-background("background");
     }
   }
 
@@ -157,9 +159,9 @@
   .tna-background-accent &--accent {
     @include colour.plain;
 
-    @include colour.colour-background("page-background");
+    @include colour.colour-background("background");
 
-    @include colour.colour-border("page-background");
+    @include colour.colour-border("background");
 
     &,
     &:link,
@@ -168,7 +170,7 @@
     }
 
     &:hover {
-      @include colour.colour-font("page-background");
+      @include colour.colour-font("background");
 
       @include colour.colour-background("font-dark");
     }
diff --git a/src/nationalarchives/components/button/macro-options.json b/src/nationalarchives/components/button/macro-options.json
index 9df9f6a0..6d3a1bff 100644
--- a/src/nationalarchives/components/button/macro-options.json
+++ b/src/nationalarchives/components/button/macro-options.json
@@ -3,73 +3,73 @@
     "name": "text",
     "type": "string",
     "required": true,
-    "description": ""
+    "description": "The text of the button."
   },
   {
     "name": "href",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "A URL to use as a link for the button."
   },
   {
     "name": "title",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "A title attribute for the button."
   },
   {
     "name": "icon",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "The name of a Font Awesome icon, without the prefixed `fa-`."
   },
   {
     "name": "accent",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, set the colour of the button to the page's accent colour."
   },
   {
     "name": "small",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, make the button smaller."
   },
   {
     "name": "plain",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, remove the background colour of the button and make it look more like a link."
   },
   {
     "name": "iconOnly",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, don't show the text of the button."
   },
   {
     "name": "iconOnlyOnMobile",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, show both the text and icon on larger devices but only show the icon on smaller devices."
   },
   {
     "name": "rightAlignIcon",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, align the icon to the right hand side of the button."
   },
   {
     "name": "buttonElement",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "If true, use a `<button>` element for the button. This makes the `href` attribute redundant."
   },
   {
     "name": "buttonType",
     "type": "text",
     "required": false,
-    "description": ""
+    "description": "Set the type of button element if `buttonElement` is true."
   },
   {
     "name": "classes",
diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json
index abf0bd45..5dec162a 100644
--- a/src/nationalarchives/components/card/fixtures.json
+++ b/src/nationalarchives/components/card/fixtures.json
@@ -252,6 +252,30 @@
       },
       "html": "<div class=\"tna-card tna-card--horizontal\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
+    {
+      "name": "with classes for href items",
+      "options": {
+        "title": "Card title",
+        "headingLevel": 3,
+        "href": "#",
+        "body": "<p>Card body</p>",
+        "hrefClasses": "card__test-class"
+      },
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link card__test-class\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
+    },
+    {
+      "name": "with attributes for href items",
+      "options": {
+        "title": "Card title",
+        "headingLevel": 3,
+        "href": "#",
+        "body": "<p>Card body</p>",
+        "hrefAttributes": {
+          "data-testattribute": "foobar"
+        }
+      },
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\" data-testattribute=\"foobar\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
+    },
     {
       "name": "with classes",
       "options": {
diff --git a/src/nationalarchives/components/checkboxes/checkboxes.njk b/src/nationalarchives/components/checkboxes/checkboxes.njk
index 91947040..a263920e 100644
--- a/src/nationalarchives/components/checkboxes/checkboxes.njk
+++ b/src/nationalarchives/components/checkboxes/checkboxes.njk
@@ -1,5 +1,5 @@
 {%- macro tnaCheckboxesElement(params, extraAttributes) -%}
-<div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
+<div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}" id="{{ params.id }}">
   {%- for item in params.items %}
   <div class="tna-checkboxes__item">
     <input type="checkbox" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% for attribute, value in extraAttributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if item.checked %} checked{% endif %}>
diff --git a/src/nationalarchives/components/checkboxes/fixtures.json b/src/nationalarchives/components/checkboxes/fixtures.json
index 67c847d5..2f8ce3db 100644
--- a/src/nationalarchives/components/checkboxes/fixtures.json
+++ b/src/nationalarchives/components/checkboxes/fixtures.json
@@ -24,7 +24,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     },
     {
       "name": "small checkboxes",
@@ -78,7 +78,7 @@
         ],
         "small": true
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-ADM\" value=\"ADM\" name=\"categories\"><label for=\"categories-ADM\" class=\"tna-checkboxes__item-label\">Admiralty, Navy, Royal Marines, and Coastguard</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-AIR\" value=\"AIR\" name=\"categories\"><label for=\"categories-AIR\" class=\"tna-checkboxes__item-label\">Air Ministry and Royal Air Force records</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-BT\" value=\"BT\" name=\"categories\"><label for=\"categories-BT\" class=\"tna-checkboxes__item-label\">Board of Trade and successors</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-C\" value=\"C\" name=\"categories\"><label for=\"categories-C\" class=\"tna-checkboxes__item-label\">Chancery, the Wardrobe, Royal Household, Exchequer and various commissions</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-CO\" value=\"CO\" name=\"categories\"><label for=\"categories-CO\" class=\"tna-checkboxes__item-label\">Colonial Office, Commonwealth and Foreign and Commonwealth Offices</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-E\" value=\"E\" name=\"categories\"><label for=\"categories-E\" class=\"tna-checkboxes__item-label\">Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-FO\" value=\"FO\" name=\"categories\"><label for=\"categories-FO\" class=\"tna-checkboxes__item-label\">Foreign Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-HO\" value=\"HO\" name=\"categories\"><label for=\"categories-HO\" class=\"tna-checkboxes__item-label\">Home Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-PROB\" value=\"PROB\" name=\"categories\"><label for=\"categories-PROB\" class=\"tna-checkboxes__item-label\">Prerogative Court of Canterbury</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-WO\" value=\"WO\" name=\"categories\"><label for=\"categories-WO\" class=\"tna-checkboxes__item-label\">War Office, Armed Forces, Judge Advocate General, and related bodies</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-ADM\" value=\"ADM\" name=\"categories\"><label for=\"categories-ADM\" class=\"tna-checkboxes__item-label\">Admiralty, Navy, Royal Marines, and Coastguard</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-AIR\" value=\"AIR\" name=\"categories\"><label for=\"categories-AIR\" class=\"tna-checkboxes__item-label\">Air Ministry and Royal Air Force records</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-BT\" value=\"BT\" name=\"categories\"><label for=\"categories-BT\" class=\"tna-checkboxes__item-label\">Board of Trade and successors</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-C\" value=\"C\" name=\"categories\"><label for=\"categories-C\" class=\"tna-checkboxes__item-label\">Chancery, the Wardrobe, Royal Household, Exchequer and various commissions</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-CO\" value=\"CO\" name=\"categories\"><label for=\"categories-CO\" class=\"tna-checkboxes__item-label\">Colonial Office, Commonwealth and Foreign and Commonwealth Offices</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-E\" value=\"E\" name=\"categories\"><label for=\"categories-E\" class=\"tna-checkboxes__item-label\">Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-FO\" value=\"FO\" name=\"categories\"><label for=\"categories-FO\" class=\"tna-checkboxes__item-label\">Foreign Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-HO\" value=\"HO\" name=\"categories\"><label for=\"categories-HO\" class=\"tna-checkboxes__item-label\">Home Office</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-PROB\" value=\"PROB\" name=\"categories\"><label for=\"categories-PROB\" class=\"tna-checkboxes__item-label\">Prerogative Court of Canterbury</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-WO\" value=\"WO\" name=\"categories\"><label for=\"categories-WO\" class=\"tna-checkboxes__item-label\">War Office, Armed Forces, Judge Advocate General, and related bodies</label></div></div></fieldset></div>"
     },
     {
       "name": "checkboxes with a preselected value",
@@ -104,7 +104,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\" checked><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\" checked><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     },
     {
       "name": "checkboxes with a hint",
@@ -130,7 +130,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"categories-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-hint\" class=\"tna-form__hint\">Select all that apply.</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"categories-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-hint\" class=\"tna-form__hint\">Select all that apply.</p><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     },
     {
       "name": "checkboxes with an error",
@@ -158,7 +158,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" categories-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a category</p><div class=\"tna-checkboxes\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" categories-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Categories</h4></legend><p id=\"categories-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a category</p><div class=\"tna-checkboxes\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     },
     {
       "name": "inline checkboxes",
@@ -184,7 +184,7 @@
         ],
         "inline": true
       },
-      "html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small tna-checkboxes--inline\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Categories</h4></legend><div class=\"tna-checkboxes tna-checkboxes--small tna-checkboxes--inline\" id=\"categories\"><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-alpha\" value=\"alpha\" name=\"categories\"><label for=\"categories-alpha\" class=\"tna-checkboxes__item-label\">Alpha</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-beta\" value=\"beta\" name=\"categories\"><label for=\"categories-beta\" class=\"tna-checkboxes__item-label\">Beta</label></div><div class=\"tna-checkboxes__item\"><input type=\"checkbox\" id=\"categories-gamma\" value=\"gamma\" name=\"categories\"><label for=\"categories-gamma\" class=\"tna-checkboxes__item-label\">Gamma</label></div></div></fieldset></div>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/date-input/fixtures.json b/src/nationalarchives/components/date-input/fixtures.json
index a41e30d1..81855770 100644
--- a/src/nationalarchives/components/date-input/fixtures.json
+++ b/src/nationalarchives/components/date-input/fixtures.json
@@ -10,7 +10,7 @@
         "id": "date",
         "name": "date"
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><div class=\"tna-date-input\" id=\"date\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
     },
     {
       "name": "date input with a preselected value",
@@ -26,7 +26,7 @@
           "year": "1986"
         }
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"24\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"09\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"1986\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><div class=\"tna-date-input\" id=\"date\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"24\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"09\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"1986\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
     },
     {
       "name": "date input with a hint",
@@ -38,7 +38,7 @@
         "name": "date",
         "hint": "The earliest date of the record."
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"date-hint \" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-hint\" class=\"tna-form__hint\">The earliest date of the record.</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"date-hint \" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-hint\" class=\"tna-form__hint\">The earliest date of the record.</p><div class=\"tna-date-input\" id=\"date\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
     },
     {
       "name": "date input with an error",
@@ -52,7 +52,7 @@
           "text": "Date is not valid"
         }
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" date-error\" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Date is not valid</p><div class=\"tna-date-input\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" date-error\" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Enter a start date</h4></legend><p id=\"date-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> Date is not valid</p><div class=\"tna-date-input\" id=\"date\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
     },
     {
       "name": "inline date input",
@@ -64,7 +64,7 @@
         "name": "date",
         "inline": true
       },
-      "html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Enter a start date</h4></legend><div class=\"tna-date-input tna-date-input--inline\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\" role=\"group\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Enter a start date</h4></legend><div class=\"tna-date-input tna-date-input--inline\" id=\"date\"><div class=\"tna-date-input__item\"><label for=\"date-day\" class=\"tna-date-input__item-label\">Day</label><input type=\"text\" id=\"date-day\" value=\"\" name=\"date-day\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-month\" class=\"tna-date-input__item-label\">Month</label><input type=\"text\" id=\"date-month\" value=\"\" name=\"date-month\" class=\"tna-date-input__item-input\" inputmode=\"numeric\"></div><div class=\"tna-date-input__item\"><label for=\"date-year\" class=\"tna-date-input__item-label\">Year</label><input type=\"text\" id=\"date-year\" value=\"\" name=\"date-year\" class=\"tna-date-input__item-input tna-date-input__item-input--wider\" inputmode=\"numeric\"></div></div></fieldset></div>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/date-input/template.njk b/src/nationalarchives/components/date-input/template.njk
index da779944..f883d4a2 100644
--- a/src/nationalarchives/components/date-input/template.njk
+++ b/src/nationalarchives/components/date-input/template.njk
@@ -19,7 +19,7 @@
       <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
     </p>
     {%- endif %}
-    <div class="tna-date-input{% if params.inline %} tna-date-input--inline{% endif %}">
+    <div class="tna-date-input{% if params.inline %} tna-date-input--inline{% endif %}" id="{{ params.id }}">
       <div class="tna-date-input__item">
         <label for="{{ params.id }}-day" class="tna-date-input__item-label">
           Day
diff --git a/src/nationalarchives/components/error-summary/error-summary.scss b/src/nationalarchives/components/error-summary/error-summary.scss
index e0c62567..97599620 100644
--- a/src/nationalarchives/components/error-summary/error-summary.scss
+++ b/src/nationalarchives/components/error-summary/error-summary.scss
@@ -10,7 +10,7 @@
 
   @include colour.plain;
 
-  @include colour.colour-background("page-background");
+  @include colour.colour-background("background");
 
   @include colour.colour-border("form-error", 0.3125rem, solid);
 
diff --git a/src/nationalarchives/components/featured-records/featured-records.scss b/src/nationalarchives/components/featured-records/featured-records.scss
index c3545c02..db7cb702 100644
--- a/src/nationalarchives/components/featured-records/featured-records.scss
+++ b/src/nationalarchives/components/featured-records/featured-records.scss
@@ -2,7 +2,6 @@
 @use "../../tools/media";
 @use "../../tools/spacing";
 @use "../../tools/typography";
-@use "../../variables/typography" as typographyVars;
 
 .tna-featured-records {
   @include spacing.space-above;
@@ -77,9 +76,7 @@
 
   &__date-description {
     @include colour.colour-font("font-light");
-    @include typography.relative-font-size(
-      typographyVars.$body-font-size-px * 0.85
-    );
+    @include typography.relative-font-size(16);
   }
 
   @include media.on-tiny {
diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss
index e2599f6a..b62ceaaa 100644
--- a/src/nationalarchives/components/global-header/global-header.scss
+++ b/src/nationalarchives/components/global-header/global-header.scss
@@ -1,5 +1,4 @@
 @use "sass:math";
-@use "../../variables/grid" as gridVars;
 @use "../../tools/colour";
 @use "../../tools/grid";
 @use "../../tools/media";
diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss
index 826a2b26..7e6cf245 100644
--- a/src/nationalarchives/components/header/header.scss
+++ b/src/nationalarchives/components/header/header.scss
@@ -1,5 +1,4 @@
 @use "sass:math";
-@use "../../variables/colour" as colourVars; // TODO
 @use "../../tools/colour";
 @use "../../tools/grid";
 @use "../../tools/media";
@@ -37,7 +36,7 @@
 
     text-align: right;
 
-    background-color: colourVars.$dark-grey;
+    @include colour.contrast;
   }
 
   &__exit-link {
@@ -292,7 +291,7 @@
       &,
       &:hover {
         &::after {
-          height: 0.375rem;
+          @include colour.thick-keyline-dark(top);
         }
       }
     }
diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss
index f552b7be..c73cdf43 100644
--- a/src/nationalarchives/components/hero/hero.scss
+++ b/src/nationalarchives/components/hero/hero.scss
@@ -156,7 +156,7 @@
   &__content-inner {
     padding: spacing.space(2);
 
-    @include colour.colour-background("page-background");
+    @include colour.colour-background("background");
   }
 
   &__heading {
diff --git a/src/nationalarchives/components/radios/fixtures.json b/src/nationalarchives/components/radios/fixtures.json
index 0d2e7da7..424fc398 100644
--- a/src/nationalarchives/components/radios/fixtures.json
+++ b/src/nationalarchives/components/radios/fixtures.json
@@ -24,7 +24,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><div class=\"tna-radios\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
     },
     {
       "name": "small radios",
@@ -78,7 +78,7 @@
         ],
         "small": true
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><div class=\"tna-radios tna-radios--small\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-ADM\" value=\"ADM\" name=\"type\"><label for=\"type-ADM\" class=\"tna-radios__item-label\">Admiralty, Navy, Royal Marines, and Coastguard</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-AIR\" value=\"AIR\" name=\"type\"><label for=\"type-AIR\" class=\"tna-radios__item-label\">Air Ministry and Royal Air Force records</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-BT\" value=\"BT\" name=\"type\"><label for=\"type-BT\" class=\"tna-radios__item-label\">Board of Trade and successors</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-C\" value=\"C\" name=\"type\"><label for=\"type-C\" class=\"tna-radios__item-label\">Chancery, the Wardrobe, Royal Household, Exchequer and various commissions</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-CO\" value=\"CO\" name=\"type\"><label for=\"type-CO\" class=\"tna-radios__item-label\">Colonial Office, Commonwealth and Foreign and Commonwealth Offices</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-E\" value=\"E\" name=\"type\"><label for=\"type-E\" class=\"tna-radios__item-label\">Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-FO\" value=\"FO\" name=\"type\"><label for=\"type-FO\" class=\"tna-radios__item-label\">Foreign Office</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-HO\" value=\"HO\" name=\"type\"><label for=\"type-HO\" class=\"tna-radios__item-label\">Home Office</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-PROB\" value=\"PROB\" name=\"type\"><label for=\"type-PROB\" class=\"tna-radios__item-label\">Prerogative Court of Canterbury</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-WO\" value=\"WO\" name=\"type\"><label for=\"type-WO\" class=\"tna-radios__item-label\">War Office, Armed Forces, Judge Advocate General, and related bodies</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><div class=\"tna-radios tna-radios--small\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-ADM\" value=\"ADM\" name=\"type\"><label for=\"type-ADM\" class=\"tna-radios__item-label\">Admiralty, Navy, Royal Marines, and Coastguard</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-AIR\" value=\"AIR\" name=\"type\"><label for=\"type-AIR\" class=\"tna-radios__item-label\">Air Ministry and Royal Air Force records</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-BT\" value=\"BT\" name=\"type\"><label for=\"type-BT\" class=\"tna-radios__item-label\">Board of Trade and successors</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-C\" value=\"C\" name=\"type\"><label for=\"type-C\" class=\"tna-radios__item-label\">Chancery, the Wardrobe, Royal Household, Exchequer and various commissions</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-CO\" value=\"CO\" name=\"type\"><label for=\"type-CO\" class=\"tna-radios__item-label\">Colonial Office, Commonwealth and Foreign and Commonwealth Offices</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-E\" value=\"E\" name=\"type\"><label for=\"type-E\" class=\"tna-radios__item-label\">Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-FO\" value=\"FO\" name=\"type\"><label for=\"type-FO\" class=\"tna-radios__item-label\">Foreign Office</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-HO\" value=\"HO\" name=\"type\"><label for=\"type-HO\" class=\"tna-radios__item-label\">Home Office</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-PROB\" value=\"PROB\" name=\"type\"><label for=\"type-PROB\" class=\"tna-radios__item-label\">Prerogative Court of Canterbury</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-WO\" value=\"WO\" name=\"type\"><label for=\"type-WO\" class=\"tna-radios__item-label\">War Office, Armed Forces, Judge Advocate General, and related bodies</label></div></div></fieldset></div>"
     },
     {
       "name": "radios with a preselected value",
@@ -104,7 +104,7 @@
         ],
         "selected": "image"
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><div class=\"tna-radios\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\" checked><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\" checked><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
     },
     {
       "name": "radios with a hint",
@@ -130,7 +130,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"type-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><p id=\"type-hint\" class=\"tna-form__hint\">You can only select one.</p><div class=\"tna-radios\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\"type-hint \"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><p id=\"type-hint\" class=\"tna-form__hint\">You can only select one.</p><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
     },
     {
       "name": "radios with an error",
@@ -158,7 +158,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" type-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><p id=\"type-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a type</p><div class=\"tna-radios\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--error \"><fieldset class=\"tna-form__fieldset\" aria-describedby=\" type-error\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--m\">Type</h4></legend><p id=\"type-error\" class=\"tna-form__error-message\"><span class=\"tna-!--visually-hidden\">Error:</span> You must select a type</p><div class=\"tna-radios\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
     },
     {
       "name": "inline radios",
@@ -184,7 +184,7 @@
         ],
         "inline": true
       },
-      "html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Type</h4></legend><div class=\"tna-radios tna-radios--small tna-radios--inline\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
+      "html": "<div class=\"tna-form__group tna-form__group--inline\"><fieldset class=\"tna-form__fieldset\"><legend class=\"tna-form__legend\"><h4 class=\"tna-form__heading tna-form__heading--xs\">Type</h4></legend><div class=\"tna-radios tna-radios--small tna-radios--inline\" id=\"type\"><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-audio\" value=\"audio\" name=\"type\"><label for=\"type-audio\" class=\"tna-radios__item-label\">Audio</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-image\" value=\"image\" name=\"type\"><label for=\"type-image\" class=\"tna-radios__item-label\">Image</label></div><div class=\"tna-radios__item\"><input type=\"radio\" id=\"type-video\" value=\"video\" name=\"type\"><label for=\"type-video\" class=\"tna-radios__item-label\">Video</label></div></div></fieldset></div>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/radios/radios.njk b/src/nationalarchives/components/radios/radios.njk
index 60c3d7ab..31e0dffc 100644
--- a/src/nationalarchives/components/radios/radios.njk
+++ b/src/nationalarchives/components/radios/radios.njk
@@ -1,5 +1,5 @@
 {%- macro tnaRadiosElement(params, extraAttributes) -%}
-<div class="tna-radios{% if params.small or params.inline %} tna-radios--small{% endif %}{% if params.inline %} tna-radios--inline{% endif %}">
+<div class="tna-radios{% if params.small or params.inline %} tna-radios--small{% endif %}{% if params.inline %} tna-radios--inline{% endif %}" id="{{ params.id }}">
   {%- for item in params.items %}
   <div class="tna-radios__item">
     <input type="radio" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% for attribute, value in extraAttributes %} {{ attribute }}="{{ value }}"{% endfor %}{% if params.selected and item.value === params.selected %} checked{% endif %}>
diff --git a/src/nationalarchives/components/skip-link/skip-link.scss b/src/nationalarchives/components/skip-link/skip-link.scss
index e910f9ad..ffbf1f8c 100644
--- a/src/nationalarchives/components/skip-link/skip-link.scss
+++ b/src/nationalarchives/components/skip-link/skip-link.scss
@@ -1,5 +1,8 @@
+@use "../../variables/a11y" as a11yVars;
+@use "../../tools/a11y";
 @use "../../tools/colour";
 @use "../../tools/spacing";
+@use "../../tools/typography";
 
 .tna-skip-link {
   width: 1px !important;
@@ -29,8 +32,11 @@
   &:focus {
     @include colour.colour-background("button-background", $important: true);
 
-    @include colour.colour-border("focus-outline", 5px, $important: true);
-
+    @include colour.colour-border(
+      "focus-outline",
+      a11yVars.$focus-outline-width,
+      $important: true
+    );
     outline: none !important;
   }
 
diff --git a/src/nationalarchives/components/tabs/tabs.scss b/src/nationalarchives/components/tabs/tabs.scss
index 2ddd671d..5695361d 100644
--- a/src/nationalarchives/components/tabs/tabs.scss
+++ b/src/nationalarchives/components/tabs/tabs.scss
@@ -47,15 +47,11 @@
     }
 
     &::after {
-      height: 0;
-
       position: absolute;
       right: 0;
       bottom: 0;
       left: 0;
 
-      @include colour.colour-background("keyline-dark");
-
       content: "";
     }
 
@@ -65,7 +61,7 @@
       text-decoration: none;
 
       &::after {
-        height: 0.25rem;
+        @include colour.thick-keyline-dark(top);
       }
     }
 
@@ -74,9 +70,7 @@
 
       &:hover {
         &::after {
-          height: 0.125rem;
-
-          @include colour.colour-background("font-light");
+          @include colour.thick-keyline(top);
         }
       }
 
@@ -85,9 +79,7 @@
 
         &::after,
         &:hover::after {
-          height: 0.25rem;
-
-          @include colour.colour-background("keyline-dark");
+          @include colour.thick-keyline-dark(top);
         }
       }
     }
@@ -135,15 +127,15 @@
     }
   }
 
-  @include colour.on-forced-colours {
-    &__list-item-link {
-      &--selected {
-        padding-bottom: spacing.space(0.125);
+  // @include colour.on-forced-colours {
+  //   &__list-item-link {
+  //     &--selected {
+  //       padding-bottom: spacing.space(0.125);
 
-        border-bottom-width: 0.375rem;
-      }
-    }
-  }
+  //       border-bottom-width: 0.375rem;
+  //     }
+  //   }
+  // }
 
   @include media.on-print {
     &__list {
diff --git a/src/nationalarchives/components/warning/fixtures.json b/src/nationalarchives/components/warning/fixtures.json
index 2c0da605..8cf7e2a6 100644
--- a/src/nationalarchives/components/warning/fixtures.json
+++ b/src/nationalarchives/components/warning/fixtures.json
@@ -7,7 +7,7 @@
         "headingLevel": 2,
         "body": "Please note this page references hunger strikes and force feeding, which some people may find upsetting."
       },
-      "html": "<div class=\"tna-warning \"><h2 class=\"tna-warning__heading tna-visually-hidden\">Important information</h2><span class=\"tna-warning__heading-icon\" aria-hidden=\"true\">!</span><div class=\"tna-warning__body\">Please note this page references hunger strikes and force feeding, which some people may find upsetting.</div></div>"
+      "html": "<div class=\"tna-warning \"><h2 class=\"tna-warning__heading\"><span class=\"tna-visually-hidden\">Important information</span><span class=\"tna-warning__heading-icon\" aria-hidden=\"true\">!</span></h2><div class=\"tna-warning__body\">Please note this page references hunger strikes and force feeding, which some people may find upsetting.</div></div>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/warning/template.njk b/src/nationalarchives/components/warning/template.njk
index f5d6a4c8..f462e8d9 100644
--- a/src/nationalarchives/components/warning/template.njk
+++ b/src/nationalarchives/components/warning/template.njk
@@ -1,9 +1,9 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <div class="tna-warning {{ containerClasses | join(' ') }}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <h{{ params.headingLevel }} class="tna-warning__heading tna-visually-hidden">
-    {{ params.heading or 'Important information' }}
+  <h{{ params.headingLevel }} class="tna-warning__heading">
+    <span class="tna-visually-hidden">{{ params.heading or 'Important information' }}</span>
+    <span class="tna-warning__heading-icon" aria-hidden="true">!</span>
   </h{{ params.headingLevel }}>
-  <span class="tna-warning__heading-icon" aria-hidden="true">!</span>
   <div class="tna-warning__body">
     {{ params.body | safe }}
   </div>
diff --git a/src/nationalarchives/global-header-package.scss b/src/nationalarchives/global-header-package.scss
index 662129a5..c9a3c95f 100644
--- a/src/nationalarchives/global-header-package.scss
+++ b/src/nationalarchives/global-header-package.scss
@@ -41,7 +41,7 @@
   text-size-adjust: none;
   direction: ltr;
 
-  --page-background: #fff;
+  --background: #fff;
 }
 
 hr {
diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
index 6f3750e8..b5f68976 100644
--- a/src/nationalarchives/tools/_colour.scss
+++ b/src/nationalarchives/tools/_colour.scss
@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:list";
+@use "../variables/borders";
 @use "../variables/colour";
 @use "../tools/media";
 
@@ -39,19 +40,17 @@
   }
 }
 
-@mixin colour-font(
-  $colour,
-  $important: false,
-  $default-palette: colour.$colour-palette-default
-) {
-  color: map.get($default-palette, $colour) if($important, !important, null);
-  color: var(--#{$colour}) if($important, !important, null);
+@mixin colour-font($colour, $important: false) {
+  color: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
+    if($important, !important, null);
 }
 
 @mixin colour-background($colour, $important: false) {
-  background-color: map.get(colour.$colour-palette-default, $colour)
+  background-color: var(
+      --#{$colour},
+      #{map.get(colour.$colour-palette-default, $colour)}
+    )
     if($important, !important, null);
-  background-color: var(--#{$colour}) if($important, !important, null);
 }
 
 @mixin colour-background-brand($brandColour, $important: false) {
@@ -67,35 +66,29 @@
 ) {
   @if $direction != "" {
     @if $width != "" {
-      $property: border-#{$direction};
-      border-#{$direction}: $width
-        map.get(colour.$colour-palette-default, $colour)
-        $style
-        if($important, !important, null);
       border-#{$direction}: $width
-        var(--#{$colour})
+        var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
         $style
         if($important, !important, null);
     } @else {
-      border-#{$direction}-color: map.get(
-          colour.$colour-palette-default,
-          $colour
+      border-#{$direction}-color: var(
+          --#{$colour},
+          #{map.get(colour.$colour-palette-default, $colour)}
         )
         if($important, !important, null);
-      border-#{$direction}-color: var(--#{$colour})
-        if($important, !important, null);
     }
   } @else {
     @if $width != "" {
       border: $width
-        map.get(colour.$colour-palette-default, $colour)
+        var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
         $style
         if($important, !important, null);
-      border: $width var(--#{$colour}) $style if($important, !important, null);
     } @else {
-      border-color: map.get(colour.$colour-palette-default, $colour)
+      border-color: var(
+          --#{$colour},
+          #{map.get(colour.$colour-palette-default, $colour)}
+        )
         if($important, !important, null);
-      border-color: var(--#{$colour}) if($important, !important, null);
     }
   }
 }
@@ -103,41 +96,62 @@
 @mixin colour-outline($colour, $width: "", $style: solid, $important: false) {
   @if $width != "" {
     outline: $width
-      map.get(colour.$colour-palette-default, $colour)
+      var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
       $style
       if($important, !important, null);
-    outline: $width var(--#{$colour}) $style if($important, !important, null);
   } @else {
-    outline-color: map.get(colour.$colour-palette-default, $colour)
+    outline-color: var(
+        --#{$colour},
+        #{map.get(colour.$colour-palette-default, $colour)}
+      )
       if($important, !important, null);
-    outline-color: var(--#{$colour}) if($important, !important, null);
   }
 }
 
 @mixin colour-fill($colour, $important: false) {
-  fill: map.get(colour.$colour-palette-default, $colour)
+  fill: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})
     if($important, !important, null);
-  fill: var(--#{$colour}) if($important, !important, null);
 }
 
 @mixin thick-keyline($direction) {
-  @include colour-border("keyline", 5px, solid, $direction);
+  @include colour-border(
+    "keyline",
+    borders.$thick-border-width,
+    solid,
+    $direction
+  );
 }
 
 @mixin thick-keyline-dark($direction) {
-  @include colour-border("keyline-dark", 5px, solid, $direction);
+  @include colour-border(
+    "keyline-dark",
+    borders.$thick-border-width,
+    solid,
+    $direction
+  );
 }
 
 @mixin thick-keyline-accent($direction) {
-  @include colour-border("accent-background", 5px, solid, $direction);
+  @include colour-border(
+    "accent-background",
+    borders.$thick-border-width,
+    solid,
+    $direction
+  );
 }
 
 @mixin thick-keyline-error($direction) {
-  @include colour-border("form-error", 5px, solid, $direction);
+  @include colour-border(
+    "form-error",
+    borders.$thick-border-width,
+    solid,
+    $direction
+  );
 }
 
 @mixin thick-keyline-brand($direction, $brandColour) {
-  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;
+  border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}
+    solid;
 }
 
 %light {
@@ -201,7 +215,7 @@
     @include colour-css-vars-high-contrast-dark;
   }
 
-  --background: var(--page-background);
+  @include colour-background("background");
 }
 
 @mixin plain {
@@ -225,7 +239,7 @@
 
   @include colour-background("background");
 
-  @include colour-font("font-base", false, colour.$colour-palette-dark);
+  @include colour-font("font-base");
 }
 
 @mixin contrast {
@@ -250,7 +264,7 @@
 
     @include colour-background("background");
 
-    @include colour-font("font-base", false, colour.$colour-palette-dark);
+    @include colour-font("font-base");
   }
 }
 
@@ -271,7 +285,7 @@
 
   @include colour-background("background");
 
-  @include colour-font("font-base", false, colour.$colour-palette-dark);
+  @include colour-font("font-base");
 }
 
 @mixin accent {
diff --git a/src/nationalarchives/tools/_grid.scss b/src/nationalarchives/tools/_grid.scss
index 1cc7051c..b95b0344 100644
--- a/src/nationalarchives/tools/_grid.scss
+++ b/src/nationalarchives/tools/_grid.scss
@@ -75,12 +75,14 @@
           margin-left: math.div(100%, $count) * $i;
         }
       }
+    }
 
-      &--no-margin-right-#{$suffix} {
+    @if $suffix != "" {
+      &--no-margin-right#{$suffix} {
         margin-right: 0;
       }
 
-      &--no-margin-left-#{$suffix} {
+      &--no-margin-left#{$suffix} {
         margin-left: 0;
       }
     }
diff --git a/src/nationalarchives/utilities/_colour.scss b/src/nationalarchives/utilities/_colour.scss
index d202c658..30739364 100644
--- a/src/nationalarchives/utilities/_colour.scss
+++ b/src/nationalarchives/utilities/_colour.scss
@@ -1,26 +1,27 @@
 @use "../tools/colour";
 
 .tna-template {
-  @include colour.colour-background("page-background");
+  @include colour.colour-background("background");
 
   &--system-theme,
   &--light-theme {
     @include colour.colour-css-vars;
-    // @include colour.light;
+
+    @media (prefers-contrast: more) {
+      @include colour.colour-css-vars-high-contrast;
+    }
   }
 
   &--system-theme {
+    // @include colour.colour-css-vars;
+
     @media (prefers-color-scheme: dark) {
       @include colour.colour-css-vars-dark;
     }
 
-    @media (prefers-contrast: more) {
-      @include colour.colour-css-vars-high-contrast;
-
-      * {
-        background-image: none !important;
-      }
-    }
+    // @media (prefers-contrast: more) {
+    //   @include colour.colour-css-vars-high-contrast;
+    // }
 
     @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
       @include colour.colour-css-vars-high-contrast-dark;
@@ -29,35 +30,35 @@
 
   // &--light-theme {
   //   @include colour.colour-css-vars;
+
+  //   @media (prefers-contrast: more) {
+  //     @include colour.colour-css-vars-high-contrast;
+  //   }
   // }
 
   &--dark-theme {
     @include colour.colour-css-vars-dark;
-  }
-
-  &--high-contrast-theme {
-    @include colour.colour-css-vars-high-contrast;
 
-    * {
-      background-image: none !important;
-    }
-
-    &.tna-template--dark-theme {
+    @media (prefers-contrast: more) {
       @include colour.colour-css-vars-high-contrast-dark;
     }
   }
 
+  // &--high-contrast-theme {
+  //   @include colour.colour-css-vars-high-contrast;
+
+  //   * {
+  //     background-image: none !important;
+  //   }
+
+  //   &.tna-template--dark-theme {
+  //     @include colour.colour-css-vars-high-contrast-dark;
+  //   }
+  // }
+
   &--yellow-accent {
     --accent-background: #{colour.brand-colour("yellow")} !important;
     --accent-background-light: #{colour.brand-colour("cream")} !important;
-    // --accent-font-base: #{colour.brand-colour("black")} !important;
-    // --accent-font-dark: #{colour.brand-colour("black")} !important;
-    // --accent-font-light: #{colour.brand-colour("black", 0.7)} !important;
-    // --accent-icon-light: #{colour.brand-colour("black", 0.45)} !important;
-    // --accent-link: #{colour.brand-colour("black")} !important;
-    // --accent-link-visited: #{colour.brand-colour("black")} !important;
-    // --accent-keyline: #{colour.brand-colour("black", 0.5)} !important;
-    // --accent-keyline-dark: #{colour.brand-colour("black", 0.8)} !important;
     --button-accent-background: #{colour.brand-colour("yellow")} !important;
   }
 
diff --git a/src/nationalarchives/utilities/_reset.scss b/src/nationalarchives/utilities/_reset.scss
index 03c6e6ef..edaf152f 100644
--- a/src/nationalarchives/utilities/_reset.scss
+++ b/src/nationalarchives/utilities/_reset.scss
@@ -8,6 +8,10 @@
     animation: none !important;
     transition: none !important;
   }
+
+  @media (prefers-contrast: more) {
+    background-image: none !important;
+  }
 }
 
 img,
diff --git a/src/nationalarchives/variables/_borders.scss b/src/nationalarchives/variables/_borders.scss
new file mode 100644
index 00000000..c81f007b
--- /dev/null
+++ b/src/nationalarchives/variables/_borders.scss
@@ -0,0 +1 @@
+$thick-border-width: 5px !default;
diff --git a/src/nationalarchives/variables/_colour.scss b/src/nationalarchives/variables/_colour.scss
index 416188a7..3f76c880 100644
--- a/src/nationalarchives/variables/_colour.scss
+++ b/src/nationalarchives/variables/_colour.scss
@@ -48,7 +48,7 @@ LIGHT THEME (DEFAULT)
 =========================================
 */
 $colour-palette-default: (
-  "page-background": #f4f4f4,
+  "background": #f4f4f4,
   "background-tint": brand-colour("light-grey"),
   "font-base": $base-font,
   "font-dark": brand-colour("black"),
@@ -102,7 +102,7 @@ DARK THEME
 $colour-palette-dark: map.merge(
   $colour-palette-default,
   (
-    "page-background": #212223,
+    "background": #212223,
     "background-tint": #323334,
     "font-base": brand-colour("white", 0.95),
     "font-dark": brand-colour("white"),
@@ -135,7 +135,7 @@ LIGHT, HIGH_CONTRAST THEME
 $colour-palette-high-contrast: map.merge(
   $colour-palette-default,
   (
-    "page-background": brand-colour("white"),
+    "background": brand-colour("white"),
     "font-base": brand-colour("black"),
     "font-light": brand-colour("black"),
     "icon-light": brand-colour("black", 0.75),
@@ -167,7 +167,7 @@ DARK, HIGH_CONTRAST THEME
 $colour-palette-high-contrast-dark: map.merge(
   $colour-palette-dark,
   (
-    "page-background": #111,
+    "background": #111,
     "font-base": brand-colour("white"),
     "font-light": brand-colour("white"),
     "icon-light": brand-colour("white", 0.75),
diff --git a/src/nationalarchives/variables/_index.scss b/src/nationalarchives/variables/_index.scss
index 5fa541c0..19c27e4e 100644
--- a/src/nationalarchives/variables/_index.scss
+++ b/src/nationalarchives/variables/_index.scss
@@ -1,5 +1,6 @@
 @use "a11y";
 @use "assets";
+@use "borders";
 @use "colour";
 @use "features";
 @use "forms";
diff --git a/tasks/test-package.js b/tasks/test-package.js
index e64df4a8..8c661ca0 100644
--- a/tasks/test-package.js
+++ b/tasks/test-package.js
@@ -130,6 +130,7 @@ const checkExists = [
   // Variables
   "nationalarchives/variables/_a11y.scss",
   "nationalarchives/variables/_assets.scss",
+  "nationalarchives/variables/_borders.scss",
   "nationalarchives/variables/_colour.scss",
   "nationalarchives/variables/_features.scss",
   "nationalarchives/variables/_forms.scss",