From 34f8ffa5c0f5dba9a89292486e748e05698bf46b Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Sat, 20 Aug 2022 21:21:04 +0100
Subject: [PATCH] theming

---
 .storybook/Wrapper.svelte                     | 10 +++
 .storybook/main.cjs                           |  2 +-
 .storybook/preview.js                         |  6 +-
 .storybook/preview.scss                       | 29 ++++---
 src/components/Article/Article.svelte         |  1 +
 src/components/BeforeAfter/BeforeAfter.svelte | 28 ++++---
 src/components/Block/Block.svelte             | 10 +--
 .../FeaturePhoto/FeaturePhoto.svelte          | 10 +--
 .../GraphicBlock/GraphicBlock.svelte          | 19 ++---
 src/components/GraphicBlock/TextBlock.svelte  |  4 +-
 src/components/Headline/Headline.svelte       | 49 ++++++-----
 .../Headline/stories/docs/component.md        |  1 -
 .../Headline/stories/docs/withByline.md       |  1 -
 src/components/ReutersLogo/ReutersLogo.svelte |  4 +-
 .../SiteFooter/SiteFooter.stories.svelte      | 19 +++--
 src/components/SiteFooter/SiteFooter.svelte   | 36 +-------
 .../SiteFooter/stories/docs/darkTheme.md      | 34 ++------
 .../SiteHeader/MobileMenu/index.svelte        | 13 ++-
 .../SiteHeader/SiteHeader.stories.svelte      | 18 ++--
 src/components/SiteHeader/SiteHeader.svelte   | 53 ++----------
 .../SiteHeader/stories/docs/darkTheme.md      | 34 ++------
 src/components/Theme/@types/component.ts      | 30 +++++++
 src/components/Theme/Theme.stories.svelte     | 82 +++++++++++--------
 src/components/Theme/Theme.svelte             | 49 ++++++-----
 .../Theme/stories/ThemedPage.svelte           | 41 ++++++++++
 .../Theme/stories/docs/component.md           | 14 +++-
 .../Theme/stories/docs/customise.md           | 16 ++++
 .../Theme/stories/docs/inheritance.md         | 17 ++++
 src/components/Theme/themes/dark.js           | 22 +++++
 src/components/Theme/themes/light.js          | 21 +++++
 src/components/Theme/utils/merge.js           | 24 ++++++
 src/components/Video/Video.svelte             | 13 +--
 .../Visible/stories/docs/component.md         |  2 +-
 .../component-guidelines.stories.mdx          |  6 ++
 .../guides/customising-with-scss.stories.mdx  |  6 +-
 src/docs/scss/classes.stories.mdx             | 12 ---
 src/docs/scss/css-variables.stories.mdx       | 52 ++++++++++++
 src/docs/scss/spacers.stories.mdx             | 78 ++++++++++++++++++
 src/index.js                                  | 17 ++--
 src/scss/fonts/_rules.scss                    |  8 +-
 src/scss/main.scss                            |  1 +
 src/scss/mixins/_body-text.scss               | 36 ++++----
 src/scss/mixins/_graphic.scss                 |  6 +-
 src/scss/mixins/_note-text.scss               | 10 +--
 src/scss/spacers/_rules.scss                  | 65 +++++++++++++++
 src/scss/spacers/_variables.scss              | 19 +++++
 46 files changed, 669 insertions(+), 359 deletions(-)
 create mode 100644 .storybook/Wrapper.svelte
 create mode 100644 src/components/Theme/@types/component.ts
 create mode 100644 src/components/Theme/stories/ThemedPage.svelte
 create mode 100644 src/components/Theme/stories/docs/customise.md
 create mode 100644 src/components/Theme/stories/docs/inheritance.md
 create mode 100644 src/components/Theme/themes/dark.js
 create mode 100644 src/components/Theme/themes/light.js
 create mode 100644 src/components/Theme/utils/merge.js
 delete mode 100644 src/docs/scss/classes.stories.mdx
 create mode 100644 src/docs/scss/css-variables.stories.mdx
 create mode 100644 src/docs/scss/spacers.stories.mdx
 create mode 100644 src/scss/spacers/_rules.scss
 create mode 100644 src/scss/spacers/_variables.scss

diff --git a/.storybook/Wrapper.svelte b/.storybook/Wrapper.svelte
new file mode 100644
index 00000000..2ed234b6
--- /dev/null
+++ b/.storybook/Wrapper.svelte
@@ -0,0 +1,10 @@
+<script>
+  import Article from '../src/components/Article/Article.svelte';
+  import Theme from '../src/components/Theme/Theme.svelte';
+</script>
+
+<Theme>
+  <Article>
+    <slot />
+  </Article>
+</Theme>
\ No newline at end of file
diff --git a/.storybook/main.cjs b/.storybook/main.cjs
index 871bccbd..4fc3918e 100644
--- a/.storybook/main.cjs
+++ b/.storybook/main.cjs
@@ -17,7 +17,7 @@ module.exports = {
   },
   "features": {
     "storyStoreV7": false,
-    "previewMdx2": true,
+    "previewMdx2": false, // Until this is fixed: https://github.com/storybookjs/storybook/issues/18556
   },
   typescript: {
     check: false,
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 64f54904..b9d4325a 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,8 +1,8 @@
 import '../src/scss/main.scss';
 import './preview.scss';
 
-import Article from '../src/components/Article/Article.svelte';
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import Wrapper from './Wrapper.svelte';
 import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
 import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
 import svelte from './svelte-highlighting.js';
@@ -41,6 +41,8 @@ export const parameters = {
         ],
         'Layout',
         ['Intro', '*'],
+        'Theming',
+        ['*'],
         'Components',
         ['Intro', '*'],
         '*',
@@ -65,4 +67,4 @@ export const parameters = {
   }
 };
 
-export const decorators = [() => ({ Component: Article })];
+export const decorators = [() => ({ Component: Wrapper })];
diff --git a/.storybook/preview.scss b/.storybook/preview.scss
index 6c3d4cc1..6ff288d3 100644
--- a/.storybook/preview.scss
+++ b/.storybook/preview.scss
@@ -67,14 +67,21 @@ a.sbdocs-a {
 }
 
 
-// .sbdocs {
-//   max-width: 800px;
-//   margin: 0 auto !important;
-//   display: block;
-// }
-// .sbdocs.sbdocs-pre {
-//   max-width: 1000px;
-// }
-// .sbdocs.sbdocs-wrapper, .sbdocs.sbdocs-content, .sbdocs.sbdocs-preview {
-//   max-width: 100%;
-// }
+code {
+  font-size: 90%;
+  margin-left: 2px;
+  margin-right: 2px;
+  background-color: #efefef;
+  padding: 2px 4px;
+}
+
+img {
+  display: block;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+
+div.reset-article {
+  width: calc(100% + 30px);
+  margin-left: -15px;
+}
\ No newline at end of file
diff --git a/src/components/Article/Article.svelte b/src/components/Article/Article.svelte
index b1cdeef7..33dc5f83 100644
--- a/src/components/Article/Article.svelte
+++ b/src/components/Article/Article.svelte
@@ -55,6 +55,7 @@
     margin: 0;
     padding: 0 15px;
     overflow-x: hidden;
+    background-color: var(--theme-colour-background, transparent);
     &.embedded {
       overflow: auto;
     }
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index 715b8908..67e90f2d 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -100,16 +100,16 @@
   const move = (e) => {
     if (sliding && imgOffset) {
       const el = e.touches ? e.touches[0] : e;
-      const figureOffset = figure
-        ? parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
-        : 0;
+      const figureOffset = figure ?
+        parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2)) :
+        0;
       let x = el.pageX - figureOffset - imgOffset.left;
       x =
-        x < handleMargin
-          ? handleMargin
-          : x > w - handleMargin
-          ? w - handleMargin
-          : x;
+        x < handleMargin ?
+          handleMargin :
+          x > w - handleMargin ?
+            w - handleMargin :
+            x;
       offset = x / w;
     }
   };
@@ -229,7 +229,7 @@
 {/if}
 
 <style lang="scss">
-  @import '../../scss/mixins/fonts';
+  @import '../../scss/fonts/variables';
   @import '../../scss/colours/thematic/tr';
   figure.before-after-container {
     overflow: hidden;
@@ -257,7 +257,8 @@
       position: absolute;
       :global {
         p {
-          @include font-display;
+          font-family: var(--theme-font-family-note, $font-family-display);
+          color: var(--theme-colour-text-primary);
           font-size: 1rem;
           line-height: 1.2rem;
           &:last-child {
@@ -329,11 +330,12 @@
   }
   aside.before-after-caption {
     margin: 0 auto;
-    @include font-display;
+    font-family: var(--theme-font-family-note, $font-family-display);
+    color: var(--theme-colour-text-secondary, $tr-medium-grey);
     :global {
       p {
-        @include font-display;
-        color: $tr-medium-grey;
+        font-family: var(--theme-font-family-note, $font-family-display);
+        color: var(--theme-colour-text-secondary, $tr-medium-grey);
         font-size: 0.9rem;
         line-height: 1.2rem;
         &:last-of-type {
diff --git a/src/components/Block/Block.svelte b/src/components/Block/Block.svelte
index f98a8fdf..a1eecc1a 100644
--- a/src/components/Block/Block.svelte
+++ b/src/components/Block/Block.svelte
@@ -12,9 +12,6 @@
   /** Snap block to column widths, rather than fluidly resizing them. */
   export let snap: boolean = false;
 
-  /** By default, all blocks have a margin bottom, except the last child. Set to `false` to remove this margin or set a `cls`/`id` and target with custom CSS. */
-  export let noMargin: boolean = false;
-
   /** ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block */
   export let role: string | null = null;
 
@@ -26,7 +23,6 @@
   {id}
   class="article-block {width} {cls}"
   class:snap={snap && width !== 'fluid' && width !== 'widest'}
-  class:no-margin={noMargin}
   {role}
   aria-label={ariaLabel}
 >
@@ -43,11 +39,7 @@
     margin-right: auto;
     margin-top: 0;
     &:not(:last-child) {
-      margin-bottom: 4rem;
-    }
-
-    &.no-margin {
-      margin-bottom: 0;
+      margin-bottom: 3rem;
     }
 
     &.narrower {
diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index a96a5d14..f1fca5f6 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -89,8 +89,8 @@
 </Block>
 
 <style lang="scss">
-  @import "@reuters-graphics/style-main/scss/fonts/mixins";
-  @import "@reuters-graphics/style-color/scss/thematic/brand";
+  @import "../../scss/fonts/variables";
+  @import "../../scss/colours/thematic/tr";
 
   figure {
     width: 100%;
@@ -106,7 +106,7 @@
     }
 
     div.alt-warning {
-      @include font-display;
+      font-family: $font-family-display;
       padding: 5px 10px;
       background-color: red;
       color: white;
@@ -118,10 +118,10 @@
     }
 
     figcaption {
-      @include font-display;
       font-weight: 400;
       font-size: 0.8rem;
-      color: $brand-secondary;
+      font-family: var(--theme-font-family-note, $font-family-display);
+      color: var(--theme-colour-text-secondary, $tr-medium-grey);
     }
 
     &.fluid {
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index 27cd34b4..5620cbf2 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
   import type { ContainerWidth } from '../@types/global';
   
-  /** 
+  /**
    * Width of the component within the text well.
    * @type {string}
    */
   export let width: ContainerWidth = 'normal';
 
-  /** 
+  /**
    * Add an id to the block tag to target it with custom CSS.
    * @type {string}
    */
   export let id: string = '';
-  /** 
+  /**
    * Add extra classes to the block tag to target it with custom CSS.
    * @type {string}
    */
@@ -21,10 +21,7 @@
   /** Snap block to column widths, rather than fluidly resizing them. */
   export let snap: boolean = false;
 
-  /** By default, all blocks have a margin bottom, except the last child. Set to `false` to remove this margin or set a `cls`/`id` and target with custom CSS. */
-  export let noMargin: boolean = false;
-
-  /** 
+  /**
    * ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block
    * @type {string}
    */
@@ -37,7 +34,7 @@
   export let notes: string | null = null;
 
   /**
-   * Set a different width for the text within the text well, for example, 
+   * Set a different width for the text within the text well, for example,
    * "normal" to keep the title, description and notes inline with the rest
    * of the text well. Can't ever be wider than `width`.
    * @type {string}
@@ -68,12 +65,12 @@
   export let ariaDescription: string | null = null;
 
   import AriaHidden from './AriaHidden.svelte';
-  import TextBlock from "./TextBlock.svelte";
-  import Block from "../Block/Block.svelte";
+  import TextBlock from './TextBlock.svelte';
+  import Block from '../Block/Block.svelte';
   import { marked } from 'marked';
 </script>
 
-<Block {id} {snap} {noMargin} {role} {width} {ariaLabel} cls="graphic {cls}">
+<Block {id} {snap} {role} {width} {ariaLabel} cls="graphic {cls}">
   <div>
     {#if $$slots.title}
       <TextBlock width={textWidth}>
diff --git a/src/components/GraphicBlock/TextBlock.svelte b/src/components/GraphicBlock/TextBlock.svelte
index 291cc446..ebc15014 100644
--- a/src/components/GraphicBlock/TextBlock.svelte
+++ b/src/components/GraphicBlock/TextBlock.svelte
@@ -3,11 +3,11 @@
   
   /** Width of the component within the text well. */
   export let width: ContainerWidth | null = null;
-  import Block from "../Block/Block.svelte";
+  import Block from '../Block/Block.svelte';
 </script>
 
 {#if (width)}
-  <Block {width} noMargin={true}>
+  <Block {width} cls="m-0">
     <slot></slot>
   </Block>
 {:else}
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 43e6654b..19dd69a6 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -11,21 +11,21 @@
    * Section title
    */
   export let section: string | null = null;
-  /**
-   * Section colour
-   */
-  export let sectionColour: string = 'red';
 
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block>
+<Block cls="mb-1">
   <header class="headline">
-    <!-- Crown named slot -->
-    <slot name="crown"></slot>
+    {#if $$slots.crown}
+      <div class="crown-container">
+        <!-- Crown named slot -->
+        <slot name="crown"></slot>
+      </div>
+    {/if}
     <div class="title">
       {#if section}
-        <p class={`section-title color-${sectionColour}`}>{section}</p>
+        <p class={'section-title'}>{section}</p>
       {/if}
       {#if $$slots.hed}
         <!-- Headline override named slot -->
@@ -38,7 +38,7 @@
       {/if}
     </div>
     {#if ($$slots.byline || $$slots.dateline)}
-      <aside class="article-metadata">
+      <aside class="article-metadata" class:pt-1={!dek}>
         {#if $$slots.byline}
           <div class="byline-container">
             <div class="byline">
@@ -61,37 +61,41 @@
 </Block>
 
 <style lang="scss">
-  @import "@reuters-graphics/style-color/scss/thematic/brand";
-  @import "../../scss/mixins";
+  @import "../../scss/colours/thematic/tr";
+  @import "../../scss/fonts/variables";
 
   header.headline {
     text-align: center;
     margin-top: 4rem;
-    margin-bottom: 3rem;
+    margin-bottom: 0;
+    color: var(--theme-colour-text-primary, $tr-dark-grey);
 
     :global {
       h1 {
         font-size: 4rem;
         margin: 5px 0;
         line-height: 1.1;
+        font-family: var(--theme-font-family-hed, $font-family-display);
+        color: var(--theme-colour-text-primary, $tr-dark-grey);
       }
 
       p {
-        @include font-display;
-
+        font-family: var(--theme-font-family-subhed, $font-family-display);
+        color: var(--theme-colour-text-primary, $tr-dark-grey);
         margin: 0;
         font-weight: 200;
 
         &.section-title {
           font-size: 1rem;
           font-weight: 800;
+          color: var(--theme-colour-accent, $tr-dark-red);
         }
       }
     }
     .article-metadata {
       padding: 40px 0;
-
-      @include font-sans;
+      font-family: var(--theme-font-family-note, $font-family-display);
+      color: var(--theme-colour-text-primary, $tr-dark-grey);
 
       text-align: center;
 
@@ -102,7 +106,7 @@
       .byline {
         :global {
           a {
-            color: $brand-text;
+            color: var(--theme-colour-text-primary, $tr-dark-grey);
             text-decoration: none;
           }
         }
@@ -111,16 +115,17 @@
       .dateline-container {
         text-transform: uppercase;
 
-        color: $brand-text-secondary;
+        color: var(--theme-colour-text-secondary, $tr-medium-grey);
         font-size: 0.8rem;
         line-height: 1.2rem;
+        letter-spacing: 0.2px;
       }
     }
 
-    section.headline {
-      .article-metadata {
-        padding: 2rem 0 0;
-      }
+    div.crown-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   }
 </style>
diff --git a/src/components/Headline/stories/docs/component.md b/src/components/Headline/stories/docs/component.md
index 36c5ac63..904afa54 100644
--- a/src/components/Headline/stories/docs/component.md
+++ b/src/components/Headline/stories/docs/component.md
@@ -9,6 +9,5 @@ Reuters Graphics headline
   hed="{'Reuters Graphics Interactive'}"
   dek="{'The beginning of a beautiful page'}"
   section="{'Global news'}"
-  sectionColour="{'orange'}"
 />
 ```
diff --git a/src/components/Headline/stories/docs/withByline.md b/src/components/Headline/stories/docs/withByline.md
index 3f59865d..1badf2df 100644
--- a/src/components/Headline/stories/docs/withByline.md
+++ b/src/components/Headline/stories/docs/withByline.md
@@ -9,7 +9,6 @@ Add a byline and dateline with `byline` and `dateline` named slots.
   hed="{'Reuters Graphics Interactive'}"
   dek="{'The beginning of a beautiful page'}"
   section="{'Global news'}"
-  sectionColour="{'orange'}"
 >
   <!-- Use named slots to add a byline... -->
   <span slot="byline">By <strong>Peppa Pig</strong></span>
diff --git a/src/components/ReutersLogo/ReutersLogo.svelte b/src/components/ReutersLogo/ReutersLogo.svelte
index e218a9bf..0ba74528 100644
--- a/src/components/ReutersLogo/ReutersLogo.svelte
+++ b/src/components/ReutersLogo/ReutersLogo.svelte
@@ -15,8 +15,8 @@
 >
   <path
     d="M79.231 36.006a4.171 4.171 0 11-8.342 0 4.171 4.171 0 018.342 0zm-12.81-7.292a2.506 2.506 0 100 5.011 2.506 2.506 0 000-5.01zm-2.959-8.744a3.187 3.187 0 100 6.373 3.187 3.187 0 000-6.373zm-5.165-6.632a2.944 2.944 0 100 5.888 2.944 2.944 0 000-5.888zM51.8 9.387a2.51 2.51 0 100 5.02 2.51 2.51 0 000-5.02zm-6.882-1.626a2.123 2.123 0 100 4.245 2.123 2.123 0 000-4.245zm-6.745.297a1.637 1.637 0 100 3.273 1.637 1.637 0 000-3.273zm-5.868 1.416a1.408 1.408 0 100 2.816 1.408 1.408 0 000-2.816zm-5.015 2.238a1.214 1.214 0 100 2.43 1.214 1.214 0 000-2.43zm-4.426 2.904a1.41 1.41 0 100 2.82 1.41 1.41 0 000-2.82zm-4.182 4.064a1.633 1.633 0 100 3.265 1.633 1.633 0 000-3.265zm-3.501 5.452a1.94 1.94 0 100 3.881 1.94 1.94 0 000-3.88zm-2.023 7.008a2.058 2.058 0 100 4.116 2.058 2.058 0 000-4.116zm.143 7.139a2.508 2.508 0 100 5.016 2.508 2.508 0 000-5.016zm2.956 7.387a3.185 3.185 0 100 6.37 3.185 3.185 0 000-6.37zm5.203 7.099a2.942 2.942 0 100 5.883 2.942 2.942 0 000-5.883zm6.27 4.703a2.505 2.505 0 100 5.01 2.505 2.505 0 000-5.01zm7.08 2.544a2.12 2.12 0 100 4.241 2.12 2.12 0 000-4.24zm6.733.666a1.63 1.63 0 100 3.26 1.63 1.63 0 000-3.26zm5.885-.96a1.41 1.41 0 100 2.821 1.41 1.41 0 000-2.82zm5.01-1.86a1.212 1.212 0 100 2.425 1.212 1.212 0 000-2.424zm4.425-3.29a1.415 1.415 0 100 2.829 1.415 1.415 0 000-2.83zm4.189-4.51a1.637 1.637 0 100 3.274 1.637 1.637 0 000-3.273zm3.492-6.07a1.939 1.939 0 100 3.879 1.939 1.939 0 000-3.878zm2.03-7.231a2.048 2.048 0 100 4.096 2.048 2.048 0 000-4.096zm-8.018-2.354a1.943 1.943 0 100 3.887 1.943 1.943 0 000-3.886zm-7.522-1.729a1.1 1.1 0 100 2.201 1.1 1.1 0 000-2.201zm-2.08-5.232a1.513 1.513 0 100 3.026 1.513 1.513 0 000-3.027zm-4.94-4.396a2.066 2.066 0 100 4.13 2.066 2.066 0 000-4.13zm-6.704-.742a2.33 2.33 0 100 4.66 2.33 2.33 0 000-4.66zm-5.678 3.236a2.216 2.216 0 100 4.432 2.216 2.216 0 000-4.432zm-2.91 6.09a1.492 1.492 0 100 2.984 1.492 1.492 0 000-2.985zm.116 5.686a1.098 1.098 0 100 2.197 1.098 1.098 0 000-2.197zm1.971 4.365a1.514 1.514 0 100 3.028 1.514 1.514 0 000-3.028zm4.97 3.369a2.064 2.064 0 100 4.128 2.064 2.064 0 000-4.128zm6.685.171a2.326 2.326 0 100 4.653 2.326 2.326 0 000-4.653zm5.712-3.023a2.222 2.222 0 100 4.444 2.222 2.222 0 000-4.444zm2.9-4.616a1.494 1.494 0 100 2.988 1.494 1.494 0 000-2.988zM57.58 26.61a2.498 2.498 0 100 4.996 2.498 2.498 0 000-4.996zm-4.232-7.013a2.986 2.986 0 100 5.972 2.986 2.986 0 000-5.972zm-6.385-3.924a2.676 2.676 0 100 5.353 2.676 2.676 0 000-5.353zm-7.088-.78a2.35 2.35 0 100 4.7 2.35 2.35 0 000-4.7zm-7.085 2.27a1.758 1.758 0 100 3.516 1.758 1.758 0 000-3.517zm-5.984 4.16a1.618 1.618 0 100 3.234 1.618 1.618 0 000-3.235zm-4.045 5.94a1.624 1.624 0 100 3.248 1.624 1.624 0 000-3.249zm-1.704 6.503a1.936 1.936 0 100 3.873 1.936 1.936 0 000-3.873zm.991 6.655a2.501 2.501 0 100 5.002 2.501 2.501 0 000-5.002zm4.229 6.055a2.98 2.98 0 100 5.96 2.98 2.98 0 000-5.96zm6.416 4.522a2.686 2.686 0 100 5.372 2.686 2.686 0 000-5.372zm7.066 1.415a2.366 2.366 0 100 4.733 2.366 2.366 0 000-4.733zm7.09-1.05a1.758 1.758 0 100 3.516 1.758 1.758 0 000-3.516zm5.992-3.852a1.62 1.62 0 100 3.238 1.62 1.62 0 000-3.238zm4.042-6a1.62 1.62 0 100 3.239 1.62 1.62 0 000-3.238zm16.53-20.253a3.603 3.603 0 100 7.205 3.603 3.603 0 000-7.205zm-4.581-8.281a3.066 3.066 0 100 6.133 3.066 3.066 0 000-6.133zm-6.8-6.497a2.642 2.642 0 100 5.284 2.642 2.642 0 000-5.284zm-7.626-3.932a2.14 2.14 0 100 4.279 2.14 2.14 0 000-4.28zM46.907.534a1.842 1.842 0 100 3.685 1.842 1.842 0 000-3.685zM39.855 0a1.585 1.585 0 100 3.17 1.585 1.585 0 000-3.17zm-7.03.526a1.847 1.847 0 100 3.694 1.847 1.847 0 000-3.693zm-7.5 2.022a2.141 2.141 0 100 4.282 2.141 2.141 0 000-4.282zm-7.633 3.924a2.644 2.644 0 100 5.288 2.644 2.644 0 000-5.288zm-6.801 6.505a3.064 3.064 0 100 6.127 3.064 3.064 0 000-6.127zM6.315 21.27a3.603 3.603 0 100 7.205 3.603 3.603 0 000-7.205zM4.662 31.835a4.171 4.171 0 100 8.342 4.171 4.171 0 000-8.342zm1.655 11.696a3.606 3.606 0 100 7.21 3.606 3.606 0 000-7.21zm4.578 9.374a3.062 3.062 0 100 6.125 3.062 3.062 0 000-6.125zm6.792 7.34a2.644 2.644 0 100 5.288 2.644 2.644 0 000-5.288zm7.638 4.927a2.142 2.142 0 100 4.284 2.142 2.142 0 000-4.284zm7.505 2.616a1.845 1.845 0 100 3.69 1.845 1.845 0 000-3.69zm7.041 1.036a1.588 1.588 0 100 3.176 1.588 1.588 0 000-3.176zm7.03-1.038a1.845 1.845 0 100 3.69 1.845 1.845 0 000-3.69zm7.505-2.61a2.148 2.148 0 100 4.297 2.148 2.148 0 000-4.297zm7.632-4.938a2.646 2.646 0 100 5.292 2.646 2.646 0 000-5.292zm6.8-7.335a3.059 3.059 0 100 6.118 3.059 3.059 0 000-6.118zm4.578-9.366a3.609 3.609 0 100 7.217 3.609 3.609 0 000-7.217z"
-    fill="{logoColour}"></path>
+    style="fill: {logoColour};"></path>
   <path
     d="M121.865 50.29c0 .287-.167.497-.498.497h-5.085c-.455 0-.624-.422-.83-.833l-5.997-10.096h-.922c-1.087 0-4.451-.119-5.41-.168v10.264c0 .456-.336.833-.793.833h-4.165a.837.837 0 01-.83-.833V22.667c0-.833.494-1.125 1.333-1.248 2.166-.331 6.82-.537 9.864-.537 6.41 0 12.331 2.291 12.331 9.407v.378c0 4.407-2.204 6.82-5.616 8.146l6.532 11.141a.543.543 0 01.086.336zm-6.746-20c0-3.123-2.422-4.456-6.586-4.456-.878 0-4.666.084-5.41.168v9.026c.661.043 4.695.127 5.41.127 4.284 0 6.586-.826 6.586-4.488v-.378zm144.946 20c0 .287-.166.497-.498.497h-5.084c-.456 0-.625-.422-.83-.833l-5.998-10.096h-.922c-1.087 0-4.45-.119-5.41-.168v10.264c0 .456-.335.833-.793.833h-4.165a.837.837 0 01-.83-.833V22.667c0-.833.494-1.125 1.333-1.248 2.167-.331 6.82-.537 9.865-.537 6.41 0 12.33 2.291 12.33 9.407v.378c0 4.407-2.204 6.82-5.615 8.146l6.532 11.141a.544.544 0 01.085.336zm-6.745-20c0-3.123-2.423-4.456-6.587-4.456-.878 0-4.666.084-5.41.168v9.026c.661.043 4.695.127 5.41.127 4.284 0 6.587-.826 6.587-4.488v-.378zm-121.253 7.603h13.327a.835.835 0 00.833-.827V34.06a.837.837 0 00-.833-.829h-13.327v-3.818c0-3.482.134-3.578 3.284-3.578h10.54a.842.842 0 00.835-.836v-2.66c0-.585-.21-.796-.835-.876-1.332-.204-4.045-.58-8.995-.58-6.912 0-10.578-.048-10.578 8.53v13.174c0 8.579 3.666 8.531 10.578 8.531 4.95 0 7.663-.372 8.995-.583.625-.08.835-.288.835-.875v-2.66a.837.837 0 00-.835-.83h-10.54c-3.15 0-3.284-.094-3.284-3.583v-4.693zm82.266 0h13.326a.835.835 0 00.834-.827V34.06a.837.837 0 00-.834-.829h-13.326v-3.818c0-3.482.133-3.578 3.283-3.578h10.54a.842.842 0 00.836-.836v-2.66c0-.585-.21-.796-.835-.876-1.333-.204-4.045-.58-8.996-.58-6.912 0-10.578-.048-10.578 8.53v13.174c0 8.579 3.666 8.531 10.578 8.531 4.95 0 7.663-.372 8.996-.583.625-.08.835-.288.835-.875v-2.66a.837.837 0 00-.835-.83h-10.541c-3.15 0-3.284-.094-3.284-3.583v-4.693zM177 39.331V22.004c0-.462-.374-.791-.837-.791h-4.121c-.458 0-.83.329-.83.79v17.328c0 4.749-2.192 7-6.69 7-4.489 0-6.685-2.251-6.685-7V22.004c0-.462-.372-.791-.834-.791h-4.114c-.457 0-.836.329-.836.79v17.328c0 8.873 5.77 11.786 12.47 11.786 6.705 0 12.477-2.913 12.477-11.786zm26.923-13.292h-8.304v23.915a.84.84 0 01-.839.833h-4.117a.834.834 0 01-.83-.833V26.04h-8.315c-.455 0-.834-.288-.834-.745v-3.29c0-.462.379-.791.834-.791h22.404c.458 0 .835.33.835.791v3.29c0 .457-.377.745-.834.745zm81.586 16.38c0-3.994-2.27-6.06-5.788-7.48-2.766-1.112-5.196-2.057-7.046-2.785-1.842-.73-3.41-1.993-3.41-3.364 0-1.87 2.319-2.955 5.392-2.955 3.626 0 6.477.506 9.227.757h.084c.414 0 .703-.338.703-.75V22.76c0-.413-.327-.706-.746-.787-1.411-.339-5.044-1.094-9.015-1.094-7.74 0-11.432 3.33-11.432 7.912 0 2.911 1.283 5.781 4.912 7.279 3.636 1.5 11.08 3.228 11.08 6.35 0 2.414-1.124 3.741-4.833 3.741-3.848 0-7.745-.545-9.412-.754h-.083a.793.793 0 00-.789.793v3c0 .458.375.745.79.828 2.002.46 5.735 1.094 9.41 1.094 8.335 0 10.956-4.5 10.956-8.703zm3.039-15.501c0 3.27 2.412 6.038 6.092 6.038 3.68 0 6.119-2.769 6.119-6.038 0-3.296-2.44-6.006-6.12-6.006-3.679 0-6.091 2.71-6.091 6.006zm.887 0c0-2.908 2.049-5.23 5.205-5.23 3.183 0 5.23 2.322 5.23 5.23 0 2.909-2.047 5.263-5.23 5.263-3.156 0-5.204-2.354-5.204-5.263zm7.97 2.69l-1.321-2.25c.69-.267 1.136-.754 1.136-1.644v-.075c0-1.438-1.196-1.9-2.491-1.9-.612 0-1.553.042-1.99.11-.169.023-.269.082-.269.25v5.51a.17.17 0 00.169.167h.84c.091 0 .158-.076.158-.167v-2.073c.195.01.875.035 1.092.035h.187l1.213 2.038c.04.082.074.167.166.167h1.027c.065 0 .1-.043.1-.1 0-.019 0-.043-.017-.067zm-1.345-3.893c0 .738-.464.905-1.331.905-.14 0-.955-.017-1.092-.026v-1.821a21.3 21.3 0 011.092-.034c.842 0 1.331.269 1.331.9v.076z"
-    fill="{textColour}"></path>
+    style="fill: {textColour};"></path>
 </svg>
diff --git a/src/components/SiteFooter/SiteFooter.stories.svelte b/src/components/SiteFooter/SiteFooter.stories.svelte
index 9a704635..e75cead5 100644
--- a/src/components/SiteFooter/SiteFooter.stories.svelte
+++ b/src/components/SiteFooter/SiteFooter.stories.svelte
@@ -8,20 +8,18 @@
   // @ts-ignore
   import customReferralsDocs from './stories/docs/customReferrals.md?raw';
 
-  import SiteFooter, { themes } from './SiteFooter.svelte';
+  import SiteFooter from './SiteFooter.svelte';
+  import Theme from '../Theme/Theme.svelte';
 
   import {
     withComponentDocs,
-    withStoryDocs,
+    withStoryDocs
   } from '$lib/docs/utils/withParams.js';
 
   const meta = {
     title: 'Components/SiteFooter',
     component: SiteFooter,
     ...withComponentDocs(componentDocs),
-    argsTypes: {
-      themes: { control: { disable: true } },
-    },
   };
 
   const customReferrals = [
@@ -54,11 +52,14 @@
 
 <Story
   name="Customised theme"
-  args={{
-    theme: themes.dark,
-  }}
   {...withStoryDocs(darkThemeDocs)}
-/>
+>
+  <div>
+    <Theme base="dark">
+      <SiteFooter />
+    </Theme>
+  </div>
+</Story>
 
 <Story
   name="Customised referrals"
diff --git a/src/components/SiteFooter/SiteFooter.svelte b/src/components/SiteFooter/SiteFooter.svelte
index d202bf2c..ce5e186e 100644
--- a/src/components/SiteFooter/SiteFooter.svelte
+++ b/src/components/SiteFooter/SiteFooter.svelte
@@ -1,21 +1,3 @@
-<script context="module">
-  /**
-   * Exported preset themes you can use to customise the `theme` prop.
-   */
-  export const themes = {
-    default: {
-      background: '#fff',
-      primary: '#404040',
-      rules: '#d0d0d0',
-    },
-    dark: {
-      background: '#333',
-      primary: '#eee',
-      rules: '#999',
-    },
-  };
-</script>
-
 <script lang="ts">
   import QuickLinks from './QuickLinks.svelte';
   import CompanyLinks from './CompanyLinks.svelte';
@@ -24,17 +6,6 @@
 
   import data from './data.json';
 
-  interface Theme {
-    background?: string;
-    primary?: string;
-    accent?: string;
-    rules?: string;
-  }
-
-  /**
-   * Pass in a custom theme to control the colours in the header.
-   */
-  export let theme: Theme = {};
   
   interface Referral {
     url: URL;
@@ -48,14 +19,13 @@
    */
   export let referrals: Referral[] = [];
 
-  const navTheme = { ...themes.default, ...theme };
 </script>
 
 <footer
   style="{`
-    --nav-background: ${navTheme.background};
-    --nav-primary: ${navTheme.primary};
-    --nav-rules: ${navTheme.rules};
+    --nav-background: var(--theme-colour-background, #fff);
+    --nav-primary: var(--theme-colour-text-primary, #404040);
+    --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
   `}"
 >
   <div>
diff --git a/src/components/SiteFooter/stories/docs/darkTheme.md b/src/components/SiteFooter/stories/docs/darkTheme.md
index bf936914..7535eb57 100644
--- a/src/components/SiteFooter/stories/docs/darkTheme.md
+++ b/src/components/SiteFooter/stories/docs/darkTheme.md
@@ -1,35 +1,11 @@
-Customise colours by passing an object to the `theme` prop. You can customise any or all of the following default properties:
-
-```javascript
-// Customisable colours
-{
-  background: '#fff',
-  primary: '#404040',
-  accent: '#fa6400',
-  rules: '#d0d0d0',
-  shadow: '0 1px 4px 2px rgb(64 64 64 / 8%)',
-}
-```
-
-The component also exports some preset themes you can use or customise:
+Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component.
 
 ```svelte
 <script>
-  import {
-    SiteFooter,
-    SiteFooterThemes,
-  } from '@reuters-graphics/graphics-components';
+  import { SiteFooter, Theme } from '@reuters-graphics/graphics-components';
 </script>
 
-<!-- Use a preset theme. -->
-<SiteFooter theme="{SiteFooterThemes.dark}" />
-
-<!-- Customise a couple colours in a theme. -->
-<SiteFooter
-  theme="{{
-    ...SiteFooterThemes.default,
-    background: '#e0d3b8',
-    rules: '#aaa',
-  }}"
-/>
+<Theme base="dark">
+  <SiteFooter />
+</Theme>
 ```
diff --git a/src/components/SiteHeader/MobileMenu/index.svelte b/src/components/SiteHeader/MobileMenu/index.svelte
index d400a5ca..66529512 100644
--- a/src/components/SiteHeader/MobileMenu/index.svelte
+++ b/src/components/SiteHeader/MobileMenu/index.svelte
@@ -4,7 +4,6 @@
   import { normalizeUrl } from '../NavBar/utils/index.js';
 
   export let data = [];
-  export let theme = {};
   export let isMobileMenuOpen = false;
   export let releaseMobileMenu = () => {};
 </script>
@@ -14,16 +13,16 @@
     class="overlay"
     aria-modal="true"
     style="{`
-      --nav-background: ${theme.background};
-      --nav-primary: ${theme.primary};
-      --nav-accent: ${theme.accent};
-      --nav-rules: ${theme.rules};
-      --nav-shadow: ${theme.shadow};
+      --nav-background: var(--theme-colour-background, #fff);
+      --nav-primary: var(--theme-colour-text-primary, #404040);
+      --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
+      --nav-accent: var(--theme-colour-brand-logo, #fa6400);
+      --nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgb(255 255 255 / 10%));
     `}"
   >
     <header class="header">
       <div class="logo">
-        <ReutersLogo logoColour="{theme.accent}" textColour="{theme.primary}" />
+        <ReutersLogo logoColour="var(--nav-accent)" textColour="var(--nav-primary)" />
       </div>
       <button class="button close-button" on:click="{releaseMobileMenu}">
         <div class="button-container">
diff --git a/src/components/SiteHeader/SiteHeader.stories.svelte b/src/components/SiteHeader/SiteHeader.stories.svelte
index 15474496..019ede1e 100644
--- a/src/components/SiteHeader/SiteHeader.stories.svelte
+++ b/src/components/SiteHeader/SiteHeader.stories.svelte
@@ -6,12 +6,12 @@
   // @ts-ignore
   import darkThemeDocs from './stories/docs/darkTheme.md?raw';
 
-  import SiteHeader, { themes } from './SiteHeader.svelte';
-  import Block from '../Block/Block.svelte';
+  import SiteHeader from './SiteHeader.svelte';
+  import Theme from '../Theme/Theme.svelte';
 
   import {
     withComponentDocs,
-    withStoryDocs,
+    withStoryDocs
   } from '$lib/docs/utils/withParams.js';
 
   const meta = {
@@ -36,13 +36,17 @@
   name="Default"
 />
 
+
 <Story
   name="Customised theme"
-  args={{
-    theme: themes.dark,
-  }}
   {...withStoryDocs(darkThemeDocs)}
-/>
+>
+  <div>
+    <Theme base="dark">
+      <SiteHeader />
+    </Theme>
+  </div>
+</Story>
 
 
 <style>
diff --git a/src/components/SiteHeader/SiteHeader.svelte b/src/components/SiteHeader/SiteHeader.svelte
index a07040bc..c8cc5fc7 100644
--- a/src/components/SiteHeader/SiteHeader.svelte
+++ b/src/components/SiteHeader/SiteHeader.svelte
@@ -1,39 +1,4 @@
-<script context="module">
-  /**
-   * Exported preset themes you can use to customise the `theme` prop.
-   */
-  export const themes = {
-    default: {
-      background: '#fff',
-      primary: '#404040',
-      accent: '#fa6400',
-      rules: '#d0d0d0',
-      shadow: '0 1px 4px 2px rgb(64 64 64 / 8%)',
-    },
-    dark: {
-      background: '#333',
-      primary: '#eee',
-      accent: '#fa6400',
-      rules: '#999',
-      shadow: '0 1px 4px 2px rgb(255 255 255 / 10%)',
-    },
-  };
-</script>
-
 <script lang="ts">
-  interface Theme {
-    background?: string;
-    primary?: string;
-    accent?: string;
-    rules?: string;
-    shadow?: string;
-  }
-
-  /**
-   * Pass in a custom theme to control the colours in the header.
-   */
-  export let theme: Theme = {};
-
   import { ReutersLogo } from '../../index.js';
   import NavBar from './NavBar/index.svelte';
   import data from './data.json';
@@ -42,9 +7,6 @@
   import MenuIcon from './svgs/Menu.svelte';
   import MobileMenu from './MobileMenu/index.svelte';
 
-  const navTheme = { ...themes.default, ...theme };
-
-  setContext('nav-theme', writable(navTheme));
   setContext('nav-active-section', writable(null));
 
   const { sections } = data[0];
@@ -54,11 +16,11 @@
 
 <header
   style="{`
-    --nav-background: ${navTheme.background};
-    --nav-primary: ${navTheme.primary};
-    --nav-accent: ${navTheme.accent};
-    --nav-rules: ${navTheme.rules};
-    --nav-shadow: ${navTheme.shadow};
+    --nav-background: var(--theme-colour-background, #fff);
+    --nav-primary: var(--theme-colour-text-primary, #404040);
+    --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
+    --nav-accent: var(--theme-colour-brand-logo, #fa6400);
+    --nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgb(255 255 255 / 10%));
   `}"
 >
   <div class="nav-container show-nav">
@@ -69,8 +31,8 @@
             <div class="logo">
               <a href="https://www.reuters.com">
                 <ReutersLogo
-                  logoColour="{navTheme.accent}"
-                  textColour="{navTheme.primary}"
+                  logoColour="var(--nav-accent)"
+                  textColour="var(--nav-primary)"
                 />
               </a>
             </div>
@@ -105,7 +67,6 @@
 </header>
 
 <MobileMenu
-  theme="{navTheme}"
   isMobileMenuOpen="{isMobileMenuOpen}"
   releaseMobileMenu="{() => {
     isMobileMenuOpen = false;
diff --git a/src/components/SiteHeader/stories/docs/darkTheme.md b/src/components/SiteHeader/stories/docs/darkTheme.md
index 6afcbbce..492e8157 100644
--- a/src/components/SiteHeader/stories/docs/darkTheme.md
+++ b/src/components/SiteHeader/stories/docs/darkTheme.md
@@ -1,35 +1,11 @@
-Customise colours by passing an object to the `theme` prop. You can customise any or all of the following default properties:
-
-```javascript
-// Customisable colours
-{
-  background: '#fff',
-  primary: '#404040',
-  accent: '#fa6400',
-  rules: '#d0d0d0',
-  shadow: '0 1px 4px 2px rgb(64 64 64 / 8%)',
-}
-```
-
-The component also exports some preset themes you can use or customise:
+Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component.
 
 ```svelte
 <script>
-  import {
-    SiteHeader,
-    SiteHeaderThemes,
-  } from '@reuters-graphics/graphics-components';
+  import { SiteHeader, Theme } from '@reuters-graphics/graphics-components';
 </script>
 
-<!-- Use a preset theme. -->
-<SiteHeader theme="{SiteHeaderThemes.dark}" />
-
-<!-- Customise a couple colours in a theme. -->
-<SiteHeader
-  theme="{{
-    ...SiteHeaderThemes.default,
-    background: '#e0d3b8',
-    rules: '#aaa',
-  }}"
-/>
+<Theme base="dark">
+  <SiteHeader />
+</Theme>
 ```
diff --git a/src/components/Theme/@types/component.ts b/src/components/Theme/@types/component.ts
new file mode 100644
index 00000000..2f8f7715
--- /dev/null
+++ b/src/components/Theme/@types/component.ts
@@ -0,0 +1,30 @@
+interface Colour {
+  background: string;
+  'text-primary': string;
+  'text-secondary': string;
+  accent: string;
+  'brand-logo': string;
+  'brand-rules': string;
+  'brand-shadow': string;
+};
+
+interface Font {
+  'size-base': string;
+  'family-serif': string,
+  'family-sans-serif': string,
+  'family-monospace': string,
+  'family-hed': string;
+  'family-subhed': string;
+  'family-body': string;
+  'family-note': string;
+}
+
+export interface Theme {
+  colour: Colour,
+  font: Font;
+};
+
+export interface CustomTheme {
+  colour?: Partial<Colour>,
+  font?: Partial<Font>
+}
diff --git a/src/components/Theme/Theme.stories.svelte b/src/components/Theme/Theme.stories.svelte
index d87bdcf7..2a69269a 100644
--- a/src/components/Theme/Theme.stories.svelte
+++ b/src/components/Theme/Theme.stories.svelte
@@ -3,28 +3,30 @@
 
   // @ts-ignore
   import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore
+  import customiseDocs from './stories/docs/customise.md?raw';
+  // @ts-ignore
+  import inheritanceDocs from './stories/docs/inheritance.md?raw';
+
+  import ThemedPage from './stories/ThemedPage.svelte';
 
   import Theme, { themes } from './Theme.svelte';
 
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+  import { withComponentDocs, withStoryDocs } from '$lib/docs/utils/withParams.js';
 
   const meta = {
-    title: 'Components/Theme',
+    title: 'Theming/Theme',
     component: Theme,
     ...withComponentDocs(componentDocs),
     argTypes: {
-      styles: {
-        options: Object.keys(themes), // An array of serializable values
-        mapping: themes, // Maps serializable option values to complex arg values
-        control: {
-          type: 'select', // Type 'select' is automatically inferred when 'options' is defined
-          labels: {
-            // 'labels' maps option values to string labels
-            main: 'Main',
-            dark: 'Dark',
-          },
-        },
+      base: {
+        control: 'select',
+        options: [
+          'light',
+          'dark',
+        ],
       },
+      themes: { control: false },
     },
   };
 </script>
@@ -32,42 +34,54 @@
 <Meta {...meta} />
 
 <Template let:args>
-  <Theme {...args}>
-    <div class="themed">
-      <p>My theme</p>
-    </div>
-  </Theme>
+  <div class="reset-article">
+    <Theme {...args}>
+      <ThemedPage />
+    </Theme>
+  </div>
 </Template>
 
 <Story
   name="Default"
   args="{{
-    styles: themes.main,
+    theme: themes.light,
+    base: 'light',
   }}"
 />
 
 <Story
-  name="Inheritance"
-  args="{{
-    styles: themes.main,
-  }}"
+  name="Custom theme"
+  {...withStoryDocs(customiseDocs)}
 >
-  <Theme styles="{themes.main}">
+  <Theme base="dark" theme={{ colour: { accent: 'yellow' }, font: { 'family-hed': 'freight-book' } }}>
+    <ThemedPage />
+  </Theme>
+</Story>
+
+<Story
+  name="Inheritance"
+  {...withStoryDocs(inheritanceDocs)}
+>
+  <Theme theme="{themes.light}">
     <div class="themed">
-      <p>My theme</p>
-      <Theme styles="{themes.dark}">
+      <p>Theme</p>
+      <Theme theme="{themes.dark}">
         <div class="themed">
-          <p>My sub-theme</p>
-          <Theme styles="{themes.main}">
+          <p>Sub-theme</p>
+          <Theme theme="{themes.light}">
             <div class="themed">
-              <p>My sub-sub-theme</p>
+              <p>Sub-sub</p>
             </div>
           </Theme>
           <Theme
-            styles="{{ colour: { background: 'steelblue', primary: '#fff' } }}"
+            theme="{{
+              colour: { background: 'steelblue', 'text-primary': '#fff' },
+              font: { 'family-note': 'freight-book' },
+            }}"
+            base='dark'
           >
             <div class="themed">
-              <p>My other sub-sub-theme</p>
+              <p>Sub-sub sibling</p>
             </div>
           </Theme>
         </div>
@@ -86,11 +100,11 @@
     display: flex;
     justify-content: center;
     flex-flow: column;
-    border: 1px solid var(--theme-colour-primary);
+    border: 1px solid var(--theme-colour-text-primary);
     border-radius: 20px;
     p {
-      @include font-display;
-      color: var(--theme-colour-primary);
+      font-family: var(--theme-font-family-note);
+      color: var(--theme-colour-text-primary);
       text-align: center;
       margin: 0;
       display: block;
diff --git a/src/components/Theme/Theme.svelte b/src/components/Theme/Theme.svelte
index 09888c4c..1fa4ae69 100644
--- a/src/components/Theme/Theme.svelte
+++ b/src/components/Theme/Theme.svelte
@@ -1,38 +1,43 @@
 <script context="module" lang="ts">
-  const main = {
-    colour: {
-      background: '#ffffff',
-      primary: '#333333',
-    },
-  };
-  const dark = {
-    colour: {
-      background: '#333333',
-      primary: '#ffffff',
-    },
-  };
-
-  export const themes = {
-    main,
-    dark,
-  };
+  import light from './themes/light.js';
+  import dark from './themes/dark.js';
+  /**
+   * Pre-made themes you can import.
+   * @type {{ light, dark }}
+   */
+  export const themes = { light, dark };
 </script>
 
 <script lang="ts">
-  export let styles: object = main;
-  export let name: string = 'theme';
+  import type { CustomTheme } from './@types/component';
+  /** Custom theme object. Can be a partial theme with just
+   * what you want to change.
+   */
+  export let theme: CustomTheme = {};
+
+  type Base = 'light' | 'dark';
+  /**
+   * Base theme is one of `light` or `dark` and will be merged
+   * with your custom theme to fill in any values you don't
+   * explicitly set.
+   */
+  export let base: Base = 'light';
 
   import cssVariables from '../../actions/cssVariables';
   import flatten from './utils/flatten';
+  import mergeThemes from './utils/merge';
+
+  /** @type {Theme} */
+  $: mergedTheme = mergeThemes({}, themes[base] || themes.light, theme);
 </script>
 
 <div
-  class="theme theme-{name}"
+  class="theme"
   style="display: contents;"
-  use:cssVariables="{flatten({ [name]: styles })}"
+  use:cssVariables="{flatten({ theme: mergedTheme })}"
 >
   <!-- Clients can override the theme above by attaching custom properties to this element. -->
-  <div class="theme-client-override theme-{name}" style="display: contents;">
+  <div class="theme-client-override" style="display: contents;">
     <!-- Themed content -->
     <slot />
   </div>
diff --git a/src/components/Theme/stories/ThemedPage.svelte b/src/components/Theme/stories/ThemedPage.svelte
new file mode 100644
index 00000000..ed4e478e
--- /dev/null
+++ b/src/components/Theme/stories/ThemedPage.svelte
@@ -0,0 +1,41 @@
+<script>
+  import Article from '../../Article/Article.svelte';
+  import Headline from '../../Headline/Headline.svelte';
+  import BodyText from '../../BodyText/BodyText.svelte';
+  import GraphicBlock from '../../GraphicBlock/GraphicBlock.svelte';
+</script>
+<Article>
+  <Headline
+    hed="{'Reuters Graphics Interactive'}"
+    dek="{'The beginning of a beautiful page'}"
+    section="{'Global news'}"
+  >
+    <!-- Use named slots to add a byline... -->
+    <span slot="byline">By <strong>Peppa Pig</strong></span>
+    <!-- ...and a dateline. -->
+    <span slot="dateline">Published <time datetime="{new Date('2020-01-01').toISOString()}">Jan. 1, 2020</time></span>
+  </Headline>
+  <BodyText text={`Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.
+
+Prosciutto kevin brisket sirloin pork loin shoulder cupim sausage chicken jowl strip steak rump pork ball tip ham hock. Swine pork belly fatback alcatra jowl.
+
+## Brisket sirloin
+
+Shank strip steak turkey shoulder shankle leberkas pork chop, t-bone picanha buffalo ground round burgdoggen ribeye.   
+  `} />
+  <GraphicBlock
+    title="Steak tar-tar"
+    description="Andouille pork loin cow buffalo pork chop shoulder."
+    notes="Source: U.S. FDA"
+  >
+    <div class="fake-graphic"></div>
+  </GraphicBlock>
+  <BodyText text={'Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.'} />
+</Article>
+
+<style>
+  div.fake-graphic {
+    height: 200px;
+    border: 1px solid var(--theme-colour-text-primary);
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Theme/stories/docs/component.md b/src/components/Theme/stories/docs/component.md
index 7528df87..8fa84f7a 100644
--- a/src/components/Theme/stories/docs/component.md
+++ b/src/components/Theme/stories/docs/component.md
@@ -1,3 +1,13 @@
-> ⏳ Coming soon!
+The `Theme` component wraps your page content and uses [CSS variables](../?path=/docs/scss-css-variables--page) to set major colour and typography styles for your page. All of the components in this library will use those CSS variables for styling by default.
 
-Set a theme for your page.
+```svelte
+<script>
+  import { Theme } from '@reuters-graphics/graphics-components';
+</script>
+
+<Theme base="light">
+  <!-- ...page stuff, now styled according to your theme! -->
+</Theme>
+```
+
+> For Kit users, the `Theme` is set for you in your graphics homepage (`pages/+page.svelte`). You can customise it there for the whole page.
diff --git a/src/components/Theme/stories/docs/customise.md b/src/components/Theme/stories/docs/customise.md
new file mode 100644
index 00000000..a3f22d18
--- /dev/null
+++ b/src/components/Theme/stories/docs/customise.md
@@ -0,0 +1,16 @@
+You can customise the theme of your page in two ways:
+
+First, you can choose the `base` theme, either `light` or `dark`.
+
+From there, you can pass a custom theme object to the `theme` prop. (Check out the "Control" column for `theme` in the table above to see what properties you can customise.)
+
+```svelte
+<Theme
+  base="dark"
+  theme={{
+    colour: { accent: 'yellow' },
+    font: { 'family-hed': 'freight-book' },
+  }}>
+  <!-- Page content -->
+</Theme>
+```
diff --git a/src/components/Theme/stories/docs/inheritance.md b/src/components/Theme/stories/docs/inheritance.md
new file mode 100644
index 00000000..12a1d680
--- /dev/null
+++ b/src/components/Theme/stories/docs/inheritance.md
@@ -0,0 +1,17 @@
+Styles that use `Theme`'s CSS variables will always use those set by the nearest parent `Theme`. That lets you change the theme for parts of your page by simply wrapping that bit in a _new_ `Theme` with different styles.
+
+The demo below shows a more complex example of nesting themes, but more likely you'll so something like this:
+
+```svelte
+<script>
+  import { Theme } from '@reuters-graphics/graphics-components';
+</script>
+
+<Theme>
+  <!-- Page content styled with the default light theme. -->
+  <Theme theme={{ colour: { background: 'lightgrey' }}}>
+    <!-- A darker background for this section. -->
+  </Theme>
+  <!-- Back to normal here... -->
+</Theme>
+```
diff --git a/src/components/Theme/themes/dark.js b/src/components/Theme/themes/dark.js
new file mode 100644
index 00000000..61de24b6
--- /dev/null
+++ b/src/components/Theme/themes/dark.js
@@ -0,0 +1,22 @@
+/** @type {import('../@types/component').Theme} */
+export default {
+  colour: {
+    background: '#2e3440',
+    'text-primary': '#ffffff',
+    'text-secondary': 'rgb(255 255 255 / 60%)',
+    accent: ' #ef3c2a',
+    'brand-logo': '#fa6400',
+    'brand-rules': '#999999',
+    'brand-shadow': 'rgb(255 255 255 / 10%)',
+  },
+  font: {
+    'size-base': '1.375',
+    'family-serif': 'freight-book, serif',
+    'family-sans-serif': 'Knowledge, sans-serif',
+    'family-monospace': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    'family-hed': 'var(--theme-font-family-sans-serif)',
+    'family-subhed': 'var(--theme-font-family-sans-serif)',
+    'family-body': 'var(--theme-font-family-serif)',
+    'family-note': 'var(--theme-font-family-sans-serif)',
+  },
+};
diff --git a/src/components/Theme/themes/light.js b/src/components/Theme/themes/light.js
new file mode 100644
index 00000000..d1e38111
--- /dev/null
+++ b/src/components/Theme/themes/light.js
@@ -0,0 +1,21 @@
+export default {
+  colour: {
+    background: '#ffffff',
+    'text-primary': '#404040',
+    'text-secondary': '#666666',
+    accent: ' #fa6400',
+    'brand-logo': '#fa6400',
+    'brand-rules': '#d0d0d0',
+    'brand-shadow': 'rgb(64 64 64 / 80%)',
+  },
+  font: {
+    'size-base': '1.375',
+    'family-serif': 'freight-book, serif',
+    'family-sans-serif': 'Knowledge, sans-serif',
+    'family-monospace': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    'family-hed': 'var(--theme-font-family-sans-serif)',
+    'family-subhed': 'var(--theme-font-family-sans-serif)',
+    'family-body': 'var(--theme-font-family-serif)',
+    'family-note': 'var(--theme-font-family-sans-serif)',
+  },
+};
diff --git a/src/components/Theme/utils/merge.js b/src/components/Theme/utils/merge.js
new file mode 100644
index 00000000..a058be63
--- /dev/null
+++ b/src/components/Theme/utils/merge.js
@@ -0,0 +1,24 @@
+
+function isObject(item) {
+  return (item && typeof item === 'object' && !Array.isArray(item));
+}
+
+/**
+ * Deep merges theme objects.
+ */
+export default function merge(target, ...sources) {
+  if (!sources.length) return target;
+  const source = sources.shift();
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        merge(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+  return merge(target, ...sources);
+}
diff --git a/src/components/Video/Video.svelte b/src/components/Video/Video.svelte
index 4f9126de..a671955d 100644
--- a/src/components/Video/Video.svelte
+++ b/src/components/Video/Video.svelte
@@ -16,8 +16,8 @@
   export let ariaDescription = null;
   export let caption = '';
   
-  /** 
-   * Width of the block within the article well. 
+  /**
+   * Width of the block within the article well.
    * @type {string}
    */
   export let width: ContainerWidth = 'normal';
@@ -163,9 +163,9 @@
                   on:pausePlayEvent="{pausePlayEvent}"
                   paused="{paused}"
                   clickedOnPauseBtn="{clickedOnPauseBtn}"
-                  controlsOpacity="{hoverToSeeControls
-                    ? interactiveControlsOpacity
-                    : controlsOpacity}"
+                  controlsOpacity="{hoverToSeeControls ?
+                    interactiveControlsOpacity :
+                    controlsOpacity}"
                   controlsPosition="{controlsPosition}"
                   widthVideoContainer="{widthVideoContainer}"
                   heightVideoContainer="{heightVideoContainer}"
@@ -262,6 +262,7 @@
 </Block>
 
 <style lang="scss">
+  @import "../../scss/colours/thematic/tr";
   .video-wrapper {
     position: relative;
     video {
@@ -283,7 +284,7 @@
   }
   figcaption {
     font-size: 0.8rem;
-    color: #666666;
+    color: var(--theme-colour-text-secondary, $tr-medium-grey);
   }
 
   button {
diff --git a/src/components/Visible/stories/docs/component.md b/src/components/Visible/stories/docs/component.md
index d5cf5ba3..8061e116 100644
--- a/src/components/Visible/stories/docs/component.md
+++ b/src/components/Visible/stories/docs/component.md
@@ -1,6 +1,6 @@
 Wrap components or other HTML elements to determine if they are visible on the page using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
 
-This is especially useful for lazy loading elements, especially expensive media files or components that fetch lots of data. You can also use it trigger animations or play media once a reader scrolls a component into view.
+This is really useful for lazy loading elements, especially expensive media files or components that fetch lots of data. You can also use it trigger animations or play media once a reader scrolls a component into view.
 
 > **Pro tip:** Don't use this for content that's "above the fold" at the top of the page. That'll just slow down the first load of important visible content.
 
diff --git a/src/docs/contributing/component-guidelines.stories.mdx b/src/docs/contributing/component-guidelines.stories.mdx
index 4d4b7947..1bd35422 100644
--- a/src/docs/contributing/component-guidelines.stories.mdx
+++ b/src/docs/contributing/component-guidelines.stories.mdx
@@ -96,6 +96,12 @@ If your component docs still aren't working, check if you're using other future-
 
 ## Styles
 
+### Theming
+
+Always respect styles set by the [`Theme`](/?path=/docs/theming-theme--default) component by using [CSS variables](?path=/docs/scss-css-variables--page) where they apply to your component.
+
+Always set [fallback values](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values) for the default light theme.
+
 ### SCSS
 
 Use SCSS with the `lang` attribute to write your styles.
diff --git a/src/docs/guides/customising-with-scss.stories.mdx b/src/docs/guides/customising-with-scss.stories.mdx
index 6d26adff..1d0c89bf 100644
--- a/src/docs/guides/customising-with-scss.stories.mdx
+++ b/src/docs/guides/customising-with-scss.stories.mdx
@@ -41,19 +41,19 @@ In our case, we want to change the absolute position of those elements. To test
 
 <img src={testImg} width="600" style={{ margin: '0 0 1rem' }} />
 
-Now that we know we can change what we need through CSS it's time to write some SCSS.
+Now that we know we can change what we need through CSS it's time to write some SCSS, either in your `global.scss` file or directly in a component like `App.svelte`.
 
 First, let's look at the class of the style rule we changed in the inspector:
 
 `figure.before-after-container.s-khJY-w4TYkp5 .overlay-container.before.s-khJY-w4TYkp5`
 
-The first thing we need to do is <span class="highlight">strip out any Svelte class names</span>, i.e., those weird `.s-khJY-w4TYkp5` classes. Why? Those are random classes Svelte adds to CSS, and we can't guarantee they won't change.
+One thing we always need to do is <span class="highlight">strip out any Svelte class names</span>, i.e., those weird `.s-khJY-w4TYkp5` classes. Why? Those are random classes Svelte adds to CSS, and we can't guarantee they won't change.
 
 That leaves us with:
 
 `figure.before-after-container .overlay-container.before`
 
-But we need our style rule to _beat_ the original style in the CSS cascade, and right now, it's less specific.
+But we need our style rule to _beat_ the original style in the CSS cascade, and right now, it's less specific without those class names we stripped.
 
 The easiest way to make sure your style rule wins out is to <span class="highlight">add an ID either directly to the element or to a parent</span>. In our case, let's add an ID through the `BeforeAfter` `id` prop. Now we can use it! (For extra credit, though, we'll drop the `.before` so our new style rule applies to _both_ overlays.)
 
diff --git a/src/docs/scss/classes.stories.mdx b/src/docs/scss/classes.stories.mdx
deleted file mode 100644
index bba63353..00000000
--- a/src/docs/scss/classes.stories.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { parameters } from '$docs/utils/docsPage.js';
-
-<Meta title="SCSS/Classes" parameters={{ ...parameters }} />
-
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
-# CSS classes
-
-Pre-written CSS classes you can add directly to elements.
-
-TK.
diff --git a/src/docs/scss/css-variables.stories.mdx b/src/docs/scss/css-variables.stories.mdx
new file mode 100644
index 00000000..7f40fe47
--- /dev/null
+++ b/src/docs/scss/css-variables.stories.mdx
@@ -0,0 +1,52 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+
+<Meta title="SCSS/CSS variables" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# CSS variables
+
+Several [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are provided by the [`Theme`](?path=/docs/components-theme--default) component. All other components in this library use these variables for styling basic colours and typography. You can (and probably _should_) use them in you own code, too.
+
+> In the future, client's may be allowed to override our CSS variables to match their own house styles. So when using CSS variables, it's a good idea to set a [fallback value](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values), in case a client misconfigures a variable override.
+>
+> **Note:** CSS variables do not currently affect [ai2svelte](https://github.com/reuters-graphics/ai2svelte/) graphics, so you should continue to make sure your colours match the theme of your page directly in Adobe Illustrator for those graphics.
+
+```svelte
+<p>My custom text</p>
+
+<style lang="scss">
+  p {
+    color: var(--theme-colour-text-primary, #333);
+    font-family: var(--theme-font-family-body, Knowledge);
+  }
+</style>
+```
+
+## Variables
+
+### Colours
+
+| CSS variable                    | Role                            |
+| ------------------------------- | ------------------------------- |
+| `--theme-colour-background`     | Background colour               |
+| `--theme-colour-text-primary`   | Primary text colour body text   |
+| `--theme-colour-text-secondary` | Secondary text colour for notes |
+| `--theme-colour-accent`         | A single accent colour          |
+| `--theme-colour-brand-logo`     | Reuters logo kinesis colour     |
+| `--theme-colour-brand-rules`    | Rules in header and footer      |
+| `--theme-colour-brand-shadow`   | Box shadow on header            |
+
+### Fonts
+
+| CSS variable                     | Role                            |
+| -------------------------------- | ------------------------------- |
+| `--theme-font-size-base`         | Base font size                  |
+| `--theme-font-family-serif`      | Base serif font family          |
+| `--theme-font-family-sans-serif` | Base sans-serif font family     |
+| `--theme-font-family-monospace`  | Base monospace font family      |
+| `--theme-font-family-hed`        | Headline (`h1`) font family     |
+| `--theme-font-family-subhed`     | Subhead (`h2`-`h6`) font family |
+| `--theme-font-family-body`       | Body text font family           |
+| `--theme-font-family-note`       | Note font family                |
diff --git a/src/docs/scss/spacers.stories.mdx b/src/docs/scss/spacers.stories.mdx
new file mode 100644
index 00000000..9588d797
--- /dev/null
+++ b/src/docs/scss/spacers.stories.mdx
@@ -0,0 +1,78 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+
+<Meta title="SCSS/Spacers" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Spacers
+
+You can control spacing — margin and padding — of your elements by adding one or more of our spacer classes.
+
+```svelte
+<!-- Adds margin-top and padding -->
+<div class="mt-2 p-2">
+  <p>My spaced out content</p>
+</div>
+```
+
+### Levels
+
+Spacer classes are specified with a level, from `0` - `6`, where `0` is no spacing and `6` is the largest amount of spacing.
+
+### Margin
+
+| Class        | Property          |
+| ------------ | ----------------- |
+| `m-{level}`  | margin            |
+| `mt-{level}` | margin-top        |
+| `mr-{level}` | margin-right      |
+| `mb-{level}` | margin-bottom     |
+| `ml-{level}` | margin-left       |
+| `mx-{level}` | margin-left/right |
+| `my-{level}` | margin-top/bottom |
+
+### Padding
+
+| Class        | Property           |
+| ------------ | ------------------ |
+| `p-{level}`  | padding            |
+| `pt-{level}` | padding-top        |
+| `pr-{level}` | padding-right      |
+| `pb-{level}` | padding-bottom     |
+| `pl-{level}` | padding-left       |
+| `px-{level}` | padding-left/right |
+| `py-{level}` | padding-top/bottom |
+
+## Customising spacing levels
+
+You can customise the spacing levels in your project by defining the following SCSS variables, shown below with their default values:
+
+```scss
+$margin-levels: (
+  '0': 0,
+  '1': 1rem,
+  '2': 2rem,
+  '3': 3rem,
+  '4': 4rem,
+  '5': 5rem,
+  '6': 6rem,
+);
+
+$padding-levels: (
+  '0': 0,
+  '1': 0.5rem,
+  '2': 1rem,
+  '3': 1.75rem,
+  '4': 2.25rem,
+  '5': 3rem,
+  '6': 4rem,
+);
+```
+
+Make sure you import or define these variables _before_ importing the style library.
+
+```scss
+@import 'my-custom-variables'; // Where you overrided the spacer variables
+@import '@reuters-graphics/graphics-components/dist/scss/main';
+```
diff --git a/src/index.js b/src/index.js
index ec9aff7a..749daa06 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,16 +15,13 @@ export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.sve
 export { default as Scroller } from './components/Scroller/Scroller.svelte';
 export { default as SEO } from './components/SEO/SEO.svelte';
 export { default as Sharer } from './components/Sharer/Sharer.svelte';
-export {
-  default as SiteFooter,
-  // @ts-ignore
-  themes as SiteFooterThemes
-} from './components/SiteFooter/SiteFooter.svelte';
-export {
-  default as SiteHeader,
-  // @ts-ignore
-  themes as SiteHeaderThemes
-} from './components/SiteHeader/SiteHeader.svelte';
+export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte';
+export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
 export { default as Spinner } from './components/Spinner/Spinner.svelte';
+export {
+  default as Theme,
+  // @ts-ignore
+  themes
+} from './components/Theme/Theme.svelte';
 export { default as Video } from './components/Video/Video.svelte';
 export { default as Visible } from './components/Visible/Visible.svelte';
diff --git a/src/scss/fonts/_rules.scss b/src/scss/fonts/_rules.scss
index cd53dd94..e1c5ec11 100644
--- a/src/scss/fonts/_rules.scss
+++ b/src/scss/fonts/_rules.scss
@@ -1,17 +1,17 @@
 @import "../mixins";
 
 .font-sans {
-  @include font-sans;
+  @include font-sans(true);
 }
 
 .font-serif {
-  @include font-serif;
+  @include font-serif(true);
 }
 
 .font-monospace {
-  @include font-monospace;
+  @include font-monospace(true);
 }
 
 .font-display {
-  @include font-display;
+  @include font-display(true);
 }
diff --git a/src/scss/main.scss b/src/scss/main.scss
index bcf6718e..3bb366da 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -15,6 +15,7 @@
 @import "fonts/rules";
 @import "typography/rules";
 @import "typography/main";
+@import "spacers/rules";
 
 // Components
 @import "components/article-metadata";
diff --git a/src/scss/mixins/_body-text.scss b/src/scss/mixins/_body-text.scss
index cba784b4..03c5a6fd 100644
--- a/src/scss/mixins/_body-text.scss
+++ b/src/scss/mixins/_body-text.scss
@@ -1,34 +1,36 @@
 @import './fonts';
+@import '../fonts/variables';
 @import '../typography/font-size';
 @import '../colours/thematic/tr';
 
 @mixin body-text {
+  h2, h3, h4, h5, h6, p, li, blockquote {
+    color: var(--theme-colour-text-primary, $tr-dark-grey);
+  }
   p,
   ul li,
   ul li p,
   ol li,
   ol li p {
-    @include font-serif;
+    -webkit-font-smoothing: antialiased;
+    font-family: var(--theme-font-family-body, $font-family-serif);
+    color: var(--theme-colour-text-primary, $tr-dark-grey);
 
     @extend .paragraph-size;
 
-    -webkit-font-smoothing: antialiased;
-
-    color: $tr-dark-grey;
-
     a {
       color: currentColor;
       background-size: 1px 1px;
-      background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" stroke="rgba(0, 0, 0, 0.8)" /></svg>');
+      background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" style="stroke: currentColor; opacity: 0.8;" /></svg>');
       background-position: 0 1.3rem;
       background-repeat: repeat-x;
       text-decoration: none;
       // TODO: Assign this to background colour CSS var and the underline will skip descenders
-      //   text-shadow:
-      // 1px 1px white,
-      // 1px -1px white,
-      // -1px 1px white,
-      // -1px -1px white;
+      text-shadow:
+        1px 1px var(--theme-colour-background, #ffffff),
+        1px -1px var(--theme-colour-background, #ffffff),
+        -1px 1px var(--theme-colour-background, #ffffff),
+        -1px -1px var(--theme-colour-background, #ffffff);
 
       @media (max-width: 540px) {
         background-position: 0 1.1rem;
@@ -48,7 +50,7 @@
     &::after {
       display: block;
       content: '';
-      background: $tr-medium-grey;
+      background: var(--theme-colour-text-secondary, $tr-medium-grey);
       height: 3px;
       width: 100px;
       margin: 10px auto 2rem;
@@ -65,11 +67,12 @@
 
   blockquote {
     margin: 30px 0;
-    border-left: 2px solid $tr-medium-grey;
+    border-left: 2px solid var(--theme-colour-text-secondary, $tr-medium-grey);
     padding-left: 15px;
 
     p {
       @extend .blockquote-size;
+      font-family: var(--theme-font-family-body, $font-family-serif);
     }
 
     // Markdown cheat to use for attribution
@@ -79,7 +82,8 @@
       margin: -5px 0 0;
 
       p {
-        color: $tr-dark-grey;
+        font-family: var(--theme-font-family-body, $font-family-serif);
+        color: var(--theme-colour-text-primary, $tr-dark-grey);
         font-size: 1rem;
 
         @media (max-width: 540px) {
@@ -95,8 +99,6 @@
   }
 
   &.font-sans {
-    p {
-      @include font-sans;
-    }
+    font-family: var(--theme-font-family-sans-serif, $font-family-sans-serif) !important;
   }
 }
diff --git a/src/scss/mixins/_graphic.scss b/src/scss/mixins/_graphic.scss
index b3bdeb23..6a935761 100644
--- a/src/scss/mixins/_graphic.scss
+++ b/src/scss/mixins/_graphic.scss
@@ -4,7 +4,7 @@
 @mixin graphic-text {
   h3 {
     margin-bottom: 0.5rem;
-    color: $tr-dark-grey;
+    color: var(--theme-colour-text-primary, $tr-dark-grey);
   }
 
   p {
@@ -12,7 +12,7 @@
     @include font-display;
     font-size: 1.1rem;
     line-height: 1.5rem;
-    color: $tr-dark-grey;
+    color: var(--theme-colour-text-primary, $tr-dark-grey);
     margin-bottom: 1rem;
     &:last-of-type {
       margin-bottom: 1rem;
@@ -42,7 +42,7 @@
     p {
       @include font-display;
       margin-bottom: 0;
-      color: $tr-medium-grey;
+      color: var(--theme-colour-text-secondary, $tr-medium-grey);
       font-size: 0.9rem;
       line-height: 1.2rem;
       &:last-of-type {
diff --git a/src/scss/mixins/_note-text.scss b/src/scss/mixins/_note-text.scss
index db1dab5b..d5493756 100644
--- a/src/scss/mixins/_note-text.scss
+++ b/src/scss/mixins/_note-text.scss
@@ -1,4 +1,4 @@
-@import './fonts';
+@import '../fonts/variables';
 
 @mixin note-text {
   h2,
@@ -6,18 +6,18 @@
   h4,
   h5,
   h6 {
-    @include font-display;
-
+    font-family: var(--theme-font-family-note, $font-family-display);
+    color: var(--theme-colour-text-primary);
     margin: 1rem 0 0;
     font-size: 1rem;
     letter-spacing: 0.5px;
   }
 
   p {
-    @include font-display;
-
+    font-family: var(--theme-font-family-note, $font-family-display);
     font-size: 1rem;
     font-weight: 200;
+    color: var(--theme-colour-text-primary);
     a {
       color: currentColor;
       background-size: 1px 1px;
diff --git a/src/scss/spacers/_rules.scss b/src/scss/spacers/_rules.scss
new file mode 100644
index 00000000..93565c7a
--- /dev/null
+++ b/src/scss/spacers/_rules.scss
@@ -0,0 +1,65 @@
+@import "variables";
+
+@each $level, $value in $margin-levels {
+  .m-#{$level} {
+    margin: $value !important;
+  }
+  .mt-#{$level} {
+    margin-top: $value !important;
+  }
+  .mr-#{$level} {
+    margin-right: $value !important;
+  }
+  .mb-#{$level} {
+    margin-bottom: $value !important;
+  }
+  .ml-#{$level} {
+    margin-left: $value !important;
+  }
+  .mx-#{$level} {
+    margin-right: $value !important;
+    margin-left: $value !important;
+  }
+  .my-#{$level} {
+    margin-top: $value !important;
+    margin-bottom: $value !important;
+  }
+}
+
+.m-auto {
+  margin: auto !important;
+}
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+@each $level, $value in $padding-levels {
+  .p-#{$level} {
+    padding: $value !important;
+  }
+  .pt-#{$level} {
+    padding-top: $value !important;
+  }
+  .pr-#{$level} {
+    padding-right: $value !important;
+  }
+  .pb-#{$level} {
+    padding-bottom: $value !important;
+  }
+  .pl-#{$level} {
+    padding-left: $value !important;
+  }
+  .px-#{$level} {
+    padding-right: $value !important;
+    padding-left: $value !important;
+  }
+  .py-#{$level} {
+    padding-top: $value !important;
+    padding-bottom: $value !important;
+  }
+}
\ No newline at end of file
diff --git a/src/scss/spacers/_variables.scss b/src/scss/spacers/_variables.scss
new file mode 100644
index 00000000..eabfc899
--- /dev/null
+++ b/src/scss/spacers/_variables.scss
@@ -0,0 +1,19 @@
+$margin-levels: (
+  "0": 0,
+  "1": 1rem,
+  "2": 2rem,
+  "3": 3rem,
+  "4": 4rem,
+  "5": 5rem,
+  "6": 6rem,
+) !default;
+
+$padding-levels: (
+  "0": 0,
+  "1": 0.5rem,
+  "2": 1rem,
+  "3": 1.75rem,
+  "4": 2.25rem,
+  "5": 3rem,
+  "6": 4rem,
+) !default;