diff --git a/assets/js/search.js b/assets/js/search.js
index 72b1893..9ac173b 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -44,7 +44,7 @@
     const results = index.search({
       query: query,
       enrich: true,
-      limit: {{ .Site.Params.searchLimit | default 20 }}
+      limit: {{ site.Params.searchLimit | default 20 }}
     });
     const items = {};
     results.forEach( function(result) {
diff --git a/assets/js/tracking.js b/assets/js/tracking.js
index e28209c..f69028d 100644
--- a/assets/js/tracking.js
+++ b/assets/js/tracking.js
@@ -5,11 +5,11 @@
  * A JavaScript file for analytic tracking.
  */
 
-var cookiebanner = {{ .Site.Params.cookieConsent | default false }};
+var cookiebanner = {{ site.Params.cookieConsent | default false }};
 var cookieconsent = localStorage.getItem('cookieconsent');
-var idSite = '{{ .Site.Params.piwikSiteID }}';
-var matomoTrackingApiUrl = 'https://{{ .Site.Params.piwikTrackerUrl }}/matomo.php';
-var googleAnalytics = '{{ .Site.GoogleAnalytics }}';
+var idSite = '{{ site.Params.piwikSiteID }}';
+var matomoTrackingApiUrl = 'https://{{ site.Params.piwikTrackerUrl }}/matomo.php';
+var googleAnalytics = '{{ site.GoogleAnalytics }}';
 
 if (idSite) {
   var _paq = window._paq || [];
diff --git a/assets/sass/_colors.scss b/assets/sass/_colors.scss
new file mode 100644
index 0000000..8d71ee4
--- /dev/null
+++ b/assets/sass/_colors.scss
@@ -0,0 +1,87 @@
+// stylelint-disable color-no-hex, color-named
+
+// Base colors.
+$black:                 #000;
+$nearblack:             lighten($black, 20%); // #333
+$grey-dark:             lighten($black, 40%); // #666
+$grey:                  lighten($black, 60%); // #999
+$grey-light:            lighten($black, 80%); // #ccc
+$grey-extra-light:      lighten($black, 93.33%); // #eee
+$white:                 #fff;
+
+$blue:                  #0072b9;
+$red:                   #c00;
+$green:                 #43a808;
+$yellow:                #fd0;
+
+$brand:                 $nearblack;
+$brand-alt:             $grey;
+$brand-dark:            $grey-dark;
+
+// Colour map.
+$colors: (
+  brand:                  $brand,
+  brand-alt:              $brand-alt,
+  brand-dark:             $brand-dark,
+  text:                   $black,
+  text-bg:                $white,
+  text-meta:              $grey-dark,
+
+  link:                   $black,
+  link-visited:           $black,
+  link-hover:             $nearblack,
+  link-active:            $red,
+
+  border:                 $grey-light,
+  border-dark:            $nearblack,
+
+  autocomplete:           $black,
+  autocomplete-bg:        $white,
+  autocomplete-select:    $white,
+  autocomplete-select-bg: $blue,
+
+  body-bg:                $white,
+  header-bg:              $nearblack,
+  backdrop:               $grey-extra-light,
+
+  mobile-menu:            $nearblack,
+  mobile-menu-cover:      rgba($black, .2),
+
+  button:                 $nearblack,
+  button-disabled:        $grey,
+
+  form-error:             $red,
+
+  mark-highlight:         $red,
+  mark-bg:                $yellow,
+
+  menu-active:            $black,
+
+  preview-bg:             lighten($yellow, 43%),
+
+  row-stripe:             $white,
+  row-disabled:           $grey-light,
+
+  status:                 $green,
+  status-bg:              lighten($green, 62%),
+  status-highlight:       $black,
+  warning:                $black,
+  warning-bg:             lighten($yellow, 45%),
+  warning-border:         $yellow,
+  error:                  $red,
+  error-bg:               lighten($red, 57%),
+
+  watermark:              $grey-extra-light,
+
+  headings:               $nearblack,
+
+  code:                   $nearblack,
+);
+
+// Convert colour map to css4 variables.
+// Use like this: var(--color-brand)
+:root {
+  @each $name, $color in $colors {
+    --color-#{$name}: #{$color};
+  }
+}
diff --git a/assets/sass/base/_fonts.scss b/assets/sass/_fonts.scss
similarity index 100%
rename from assets/sass/base/_fonts.scss
rename to assets/sass/_fonts.scss
diff --git a/assets/sass/_init.scss b/assets/sass/_init.scss
index 24c4d1e..cc58e80 100644
--- a/assets/sass/_init.scss
+++ b/assets/sass/_init.scss
@@ -6,8 +6,8 @@
 // project.
 
 // Colours and variables.
-@import 'init/colors';
-@import 'init/variables';
+@import 'colors';
+@import 'variables';
 
 // Add typey to manage font sizes and margins.
 @import 'typey';
diff --git a/assets/sass/init/_variables.scss b/assets/sass/_variables.scss
similarity index 100%
rename from assets/sass/init/_variables.scss
rename to assets/sass/_variables.scss
diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss
index f9ae4bf..8d612a7 100644
--- a/assets/sass/_zen.scss
+++ b/assets/sass/_zen.scss
@@ -3,11 +3,11 @@
 // Page
 
 body {
-  background-color: $backdrop;
+  background-color: var(--color-backdrop);
 }
 
 .page {
-  background-color: $body-bg;
+  background-color: var(--color-body-bg);
 }
 
 .header {
@@ -22,7 +22,7 @@ body {
   @include margin-top(1.5);
   @include padding(.5 0);
   text-align: center;
-  border-top: 2px solid $brand;
+  border-top: 2px solid var(--color-brand);
 
   p {
     margin: 0;
@@ -67,7 +67,7 @@ article > header,
 .header,
 .footer {
   @include typeface(headings);
-  color: $headings;
+  color: var(--color-headings);
   font-weight: normal;
 }
 
@@ -84,7 +84,7 @@ aside {
 
 article {
   & > header {
-    color: $text-meta;
+    color: var(--color-text-meta);
   }
 
   .submitted {
@@ -114,7 +114,7 @@ article {
   }
 
   .content-dates {
-    color: $text-meta;
+    color: var(--color-text-meta);
     text-align: right;
   }
 
@@ -128,11 +128,11 @@ article {
   }
 
   pre {
-    color: $code;
+    color: var(--color-code);
     border-radius: 3px;
     padding: 5px;
-    border: 1px solid $border;
-    background-color: $text-bg;
+    border: 1px solid var(--color-border);
+    background-color: var(--color-text-bg);
     overflow: auto;
     max-height: 300px;
     max-width: 90vw;
@@ -228,19 +228,19 @@ figure {
 
   a {
     display: block;
-    background-color: $brand;
-    color: $text-bg;
+    background-color: var(--color-brand);
+    color: var(--color-text-bg);
     padding: 2px 8px;
     text-decoration: none;
 
     &:hover,
     &:focus {
-      background-color: $brand-dark;
+      background-color: var(--color-brand-dark);
     }
 
     &:active,
     &.active {
-      background-color: $brand;
+      background-color: var(--color-brand);
       text-decoration: underline;
     }
   }
@@ -271,16 +271,16 @@ figure {
 
     &:required+span::after {
       content: ' *';
-      color: $red;
+      color: var(--color-red);
       vertical-align: top;
     }
 
     &:not(:placeholder-shown):valid {
-      background-color: $status-bg;
+      background-color: var(--color-status-bg);
     }
 
     &:not(:placeholder-shown):invalid {
-      background-color: $error-bg;
+      background-color: var(--color-error-bg);
     }
   }
 }
@@ -289,11 +289,11 @@ figure {
   input,
   textarea {
     &:valid {
-      background-color: $status-bg;
+      background-color: var(--color-status-bg);
     }
 
     &:invalid {
-      background-color: $error-bg;
+      background-color: var(--color-error-bg);
     }
   }
 }
diff --git a/assets/sass/base/forms/_forms.scss b/assets/sass/base/forms/_forms.scss
index 3204ef4..95fff17 100644
--- a/assets/sass/base/forms/_forms.scss
+++ b/assets/sass/base/forms/_forms.scss
@@ -166,7 +166,7 @@ input {
 fieldset {
   // Correct the padding in Firefox.
   @include padding(.35 .5 .65);
-  border: 1px solid $border;
+  border: 1px solid var(--color-border);
 }
 
 legend {
diff --git a/assets/sass/base/links/_links.scss b/assets/sass/base/links/_links.scss
index f32c358..5e27b52 100644
--- a/assets/sass/base/links/_links.scss
+++ b/assets/sass/base/links/_links.scss
@@ -13,7 +13,7 @@
 
 a,
 %link {
-  color: $link;
+  color: var(--color-link);
   // stylelint-disable property-no-vendor-prefix
   // Remove gaps in links underline in iOS 8+ and Safari 8+.
   -webkit-text-decoration-skip: objects;
@@ -23,14 +23,14 @@ a,
 // safely lower this selector's specificity. This also ensures visited links
 // with additional styles won't have their styles overridden.
 :visited {
-  color: $link-visited;
+  color: var(--color-link-visited);
 }
 
 a:hover,
 a:focus {
-  color: $link-hover;
+  color: var(--color-link-hover);
 }
 
 a:active {
-  color: $link-active;
+  color: var(--color-link-active);
 }
diff --git a/assets/sass/components/box/_box.scss b/assets/sass/components/box/_box.scss
index 4ef3531..ad94b85 100644
--- a/assets/sass/components/box/_box.scss
+++ b/assets/sass/components/box/_box.scss
@@ -20,7 +20,7 @@
 .box,
 %box {
   @include margin-bottom(1);
-  border: 5px solid $border;
+  border: 5px solid var(--color-border);
   padding: 1em;
 
   // Sass compiles this to the selector: .box__title, %box__title {}
@@ -44,7 +44,7 @@
   &:hover,
   &.is-focus,
   &--is-focus {
-    border-color: $text;
+    border-color: var(--color-text);
   }
 
   // Sass compiles this to the selector: .box--highlight, %box--highlight {}
@@ -52,6 +52,6 @@
   // the "highlight" is a _modifier_, creating a new variation of the standard
   // "box" component.
   &--highlight {
-    border-color: $link;
+    border-color: var(--color-link);
   }
 }
diff --git a/assets/sass/components/button/_button.scss b/assets/sass/components/button/_button.scss
index ef8f2ce..7db215c 100644
--- a/assets/sass/components/button/_button.scss
+++ b/assets/sass/components/button/_button.scss
@@ -29,7 +29,7 @@ button,
   text-decoration: none;
   // Improve usability and consistency of cursor style between image-type `input` and others.
   cursor: pointer;
-  color: $button;
+  color: var(--color-button);
   text-align: center;
   background-image: linear-gradient(#f6f6f6, #e2e2e2);
   border: 1px solid #e4e4e4;
@@ -60,14 +60,14 @@ button,
   &:active {
     // Override any link underlines and color changes.
     text-decoration: none;
-    color: $button;
+    color: var(--color-button);
   }
 
   &:active {
     border-color: #555;
-    text-shadow: $button 0 -1px 0;
-    background: $grey-dark;
-    color: $text-bg;
+    text-shadow: var(--color-button 0 -1px 0)  0 -1px 0;
+    background: var(--color-grey-dark);
+    color: var(--color-text-bg);
   }
 }
 
@@ -91,9 +91,9 @@ button,
 %button--disabled[disabled] {
   // Re-set default cursor for disabled elements.
   cursor: default;
-  color: $button-disabled;
-  background-color: $grey-extra-light;
-  border-color: $grey-extra-light;
+  color: var(--color-button-disabled);
+  background-color: var(--color-grey-extra-light);
+  border-color: var(--color-grey-extra-light);
   background-image: none;
   text-shadow: none;
 
@@ -101,6 +101,6 @@ button,
   &:focus,
   &:active {
     // Override any link underlines and color changes.
-    color: $button-disabled;
+    color: var(--color-button-disabled);
   }
 }
diff --git a/assets/sass/components/cookieconsent/_cookieconsent.scss b/assets/sass/components/cookieconsent/_cookieconsent.scss
index de62a16..74eb4c6 100644
--- a/assets/sass/components/cookieconsent/_cookieconsent.scss
+++ b/assets/sass/components/cookieconsent/_cookieconsent.scss
@@ -5,9 +5,9 @@
   position: sticky;
   bottom: 0;
   width: 100%;
-  color: $warning;
-  background-color: $warning-bg;
-  border-top: 4px solid $warning-border;
+  color: var(--color-warning);
+  background-color: var(--color-warning-bg);
+  border-top: 4px solid var(--color-warning-border);
   text-align: center;
   transform: translateY(100vh);
   transition: all 130ms ease-in;
@@ -19,11 +19,11 @@
 
 .button {
   &--accept {
-    border-color: $status;
+    border-color: var(--color-status);
   }
 
   &--decline {
-    border-color: $warning-border;
+    border-color: var(--color-warning-border);
   }
 }
 
diff --git a/assets/sass/components/divider/_divider.scss b/assets/sass/components/divider/_divider.scss
index caaab32..ce96fed 100644
--- a/assets/sass/components/divider/_divider.scss
+++ b/assets/sass/components/divider/_divider.scss
@@ -6,7 +6,7 @@
 %divider {
   @include margin(1 0);
   border: 0;
-  border-top: 1px solid $border;
+  border-top: 1px solid var(--color-border);
 
   // If used as a container, add a top margin to the first child.
   > :first-child {
diff --git a/assets/sass/components/header/_header.scss b/assets/sass/components/header/_header.scss
index 2e7284b..f5c43b1 100644
--- a/assets/sass/components/header/_header.scss
+++ b/assets/sass/components/header/_header.scss
@@ -31,7 +31,7 @@
   &__site-link {
     &:link,
     &:visited {
-      color: $text;
+      color: var(--color-text);
       text-decoration: none;
     }
 
diff --git a/assets/sass/components/highlight-mark/_highlight-mark.scss b/assets/sass/components/highlight-mark/_highlight-mark.scss
index 3827235..c6510e9 100644
--- a/assets/sass/components/highlight-mark/_highlight-mark.scss
+++ b/assets/sass/components/highlight-mark/_highlight-mark.scss
@@ -6,7 +6,7 @@
 
 .highlight-mark,
 %highlight-mark {
-  color: $mark-highlight;
+  color: var(--color-mark-highlight);
   // Remove background highlighting from <mark> in normalize.
   background-color: transparent;
 }
diff --git a/assets/sass/components/inverted-box/_inverted-box.scss b/assets/sass/components/inverted-box/_inverted-box.scss
index e4f942c..9d5bcc7 100644
--- a/assets/sass/components/inverted-box/_inverted-box.scss
+++ b/assets/sass/components/inverted-box/_inverted-box.scss
@@ -3,13 +3,13 @@
 .inverted-box,
 %inverted-box {
   @include padding(.5);
-  background: $brand;
-  color: $text-bg;
+  background: var(--color-brand);
+  color: var(--color-text-bg);
   border-radius: 5px;
 
   :link,
   :visited {
-    color: $text-bg;
+    color: var(--color-text-bg);
   }
 
   p,
diff --git a/assets/sass/components/messages/_messages.scss b/assets/sass/components/messages/_messages.scss
index 6b1d40e..be1fb9d 100644
--- a/assets/sass/components/messages/_messages.scss
+++ b/assets/sass/components/messages/_messages.scss
@@ -7,20 +7,20 @@
   width: 95%;
 
   &.status {
-    background-color: $status-bg;
-    color: $status;
-    border-color: $status;
+    background-color: var(--color-status-bg);
+    color: var(--color-status);
+    border-color: var(--color-status);
   }
 
   &.warning {
-    background-color: $warning-bg;
-    color: $warning;
-    border-color: $warning;
+    background-color: var(--color-warning-bg);
+    color: var(--color-warning);
+    border-color: var(--color-warning);
   }
 
   &.error {
-    background-color: $error-bg;
-    color: $error;
-    border-color: $error;
+    background-color: var(--color-error-bg);
+    color: var(--color-error);
+    border-color: var(--color-error);
   }
 }
diff --git a/assets/sass/components/watermark/_watermark.scss b/assets/sass/components/watermark/_watermark.scss
index ae9cf31..b992966 100644
--- a/assets/sass/components/watermark/_watermark.scss
+++ b/assets/sass/components/watermark/_watermark.scss
@@ -10,7 +10,7 @@
   overflow: visible;
   // Remove background highlighting from <mark> in normalize.
   background-color: transparent;
-  color: $watermark;
+  color: var(--color-watermark);
   font-size: 75px;
   line-height: 1;
   text-align: center;
diff --git a/assets/sass/components/wireframe/_wireframe.scss b/assets/sass/components/wireframe/_wireframe.scss
index 6be03aa..5f3150d 100644
--- a/assets/sass/components/wireframe/_wireframe.scss
+++ b/assets/sass/components/wireframe/_wireframe.scss
@@ -11,7 +11,7 @@ $with-wireframes: false !default;
 @if $with-wireframes {
   .wireframe,
   %wireframe {
-    outline: 1px solid $border;
+    outline: 1px solid var(--color-border);
   }
 
   //
diff --git a/assets/sass/init/_colors.scss b/assets/sass/init/_colors.scss
deleted file mode 100644
index abbb9cc..0000000
--- a/assets/sass/init/_colors.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-// stylelint-disable color-no-hex, color-named
-
-// Base colors.
-$black:                  #000;
-$nearblack:              lighten($black, 20%); // #333
-$grey-dark:              lighten($black, 40%); // #666
-$grey:                   lighten($black, 60%); // #999
-$grey-light:             lighten($black, 80%); // #ccc
-$grey-extra-light:       lighten($black, 93.33%); // #eee
-$white:                  #fff;
-
-$blue:                   #0072b9;
-$red:                    #c00;
-$green:                  #43a808;
-$yellow:                 #fd0;
-
-// Colors used in the main content area.
-$brand:                  $nearblack;
-$brand-alt:              $grey;
-$brand-dark:             $grey-dark;
-$text:                   $black;
-$text-bg:                $white;
-$text-meta:              $grey-dark;
-
-$link:                   $black;
-$link-visited:           $black;
-$link-hover:             $brand;
-$link-active:            $red;
-
-$border:                 $grey-light;
-$border-dark:            $nearblack;
-
-$autocomplete:           $text;
-$autocomplete-bg:        $text-bg;
-$autocomplete-select:    $white;
-$autocomplete-select-bg: $blue;
-
-$body-bg:                $white;
-$header-bg:              $brand;
-$backdrop:               $grey-extra-light;
-
-$mobile-menu:            $header-bg;
-$mobile-menu-cover:      rgba($black, .2);
-
-$button:                 $nearblack;
-$button-disabled:        $grey;
-
-$form-error:             $red;
-
-$mark-highlight:         $red;
-$mark-bg:                $yellow;
-
-$menu-active:            $text;
-
-$preview-bg:             lighten($yellow, 43%);
-
-$row-stripe:             $white;
-$row-disabled:           $grey-light;
-
-$status:                 $green;
-$status-bg:              lighten($status, 62%);
-$status-highlight:       $text;
-$warning:                $text;
-$warning-bg:             lighten($yellow, 45%);
-$warning-border:         $yellow;
-$error:                  $red;
-$error-bg:               lighten($error, 57%);
-
-$watermark:              $grey-extra-light;
-
-$headings:               $nearblack;
-
-$code:                   $nearblack;
diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss
index 636b598..129e9a9 100644
--- a/assets/sass/mobile.scss
+++ b/assets/sass/mobile.scss
@@ -34,7 +34,7 @@
     position: absolute;
     width: 100vw;
     height: 100vh;
-    background-color: $mobile-menu-cover;
+    background-color: var(--color-mobile-menu-cover);
     opacity: 0;
 
     .js-nav-open & {
@@ -53,9 +53,9 @@
     text-decoration: none;
     font-weight: bold;
     line-height: 1;
-    border: 1px solid $border;
+    border: 1px solid var(--color-border);
     border-radius: 3px;
-    color: $text;
+    color: var(--color-text);
     pointer-events: auto;
 
     @include respond-to(s) {
@@ -63,7 +63,7 @@
     }
 
     .js-nav-open & {
-      color: $text-bg;
+      color: var(--color-text-bg);
     }
 
     &::after {
@@ -72,17 +72,17 @@
       margin-left: $zen-gutters / 4;
       width: $zen-gutters;
       height: $zen-gutters;
-      border-top: 12px double $text;
-      border-bottom: 4px solid $text;
+      border-top: 12px double var(--color-text);
+      border-bottom: 4px solid var(--color-text);
     }
 
     .js-nav-open &::after {
-      border-color: $text-bg;
+      border-color: var(--color-text-bg);
     }
   }
 
   &__sheet {
-    background-color: $mobile-menu;
+    background-color: var(--color-mobile-menu);
     width: 90vw;
     height: 100vh;
     padding: 2rem;
@@ -90,18 +90,18 @@
     z-index: 21;
 
     a {
-      color: $text-bg;
+      color: var(--color-text-bg);
       text-decoration: none;
 
       &:hover,
       &:focus {
-        color: $text-bg;
+        color: var(--color-text-bg);
       }
     }
 
     .js-nav-open & {
       pointer-events: auto;
-      box-shadow: -10px 0 10px -10px $nearblack;
+      box-shadow: -10px 0 10px -10px var(--color-nearblack);
       transform: translateX(10vw);
     }
   }
diff --git a/assets/sass/print.scss b/assets/sass/print.scss
index c6475c7..2a62a75 100644
--- a/assets/sass/print.scss
+++ b/assets/sass/print.scss
@@ -26,7 +26,7 @@ footer {
 
   body,
   .page {
-    background-color: $white;
+    background-color: var(--color-white);
   }
 
   .main {
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index bb5b5d2..326503f 100644
--- a/assets/sass/styles.scss
+++ b/assets/sass/styles.scss
@@ -10,6 +10,10 @@
 
 @import 'init';
 
+// Ensure fonts get loaded first to minimize front-end performance impact.
+
+@import 'fonts';
+
 // Defaults
 //
 // These are the default base styles applied to HTML elements.
@@ -17,9 +21,6 @@
 // Component classes can override these styles, but if no class applies a style
 // to an HTML element, these styles will be the ones displayed.
 
-// Ensure fonts get loaded first to minimize front-end performance impact.
-
-@import 'base/fonts';
 @import 'base/normalize';
 
 // Layouts