diff --git a/lib/index.scss b/lib/index.scss
index 0a9a9e9..15d8c99 100644
--- a/lib/index.scss
+++ b/lib/index.scss
@@ -357,7 +357,7 @@ table {
   }
 }
 
-.tna-colour-swatch {
+.tna-ds-colour-swatch {
   width: 2rem;
   height: 2rem;
   margin-right: 0.75rem;
diff --git a/src/styles/colours/index.md b/src/styles/colours/index.md
index be65664..a899c60 100644
--- a/src/styles/colours/index.md
+++ b/src/styles/colours/index.md
@@ -10,106 +10,106 @@ Always use the provided TNA colour palette.
 
 ### The greys
 
-| Colour        | Hex                                                                          |
-| ------------- | ---------------------------------------------------------------------------- |
-| Black         | <span class="tna-colour-swatch" style="background:#000000"></span> `#000000` |
-| Grey          | <span class="tna-colour-swatch" style="background:#8c9694"></span> `#8c9694` |
-| Light grey    | <span class="tna-colour-swatch" style="background:#d9d9d6"></span> `#d9d9d6` |
-| White         | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` |
+| Colour        | Hex                                                                             |
+| ------------- | ------------------------------------------------------------------------------- |
+| Black         | <span class="tna-ds-colour-swatch" style="background:#000000"></span> `#000000` |
+| Grey          | <span class="tna-ds-colour-swatch" style="background:#8c9694"></span> `#8c9694` |
+| Light grey    | <span class="tna-ds-colour-swatch" style="background:#d9d9d6"></span> `#d9d9d6` |
+| White         | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff` |
 
 
 
 ### Primary
 
-| Colour        | Hex                                                                          |
-| ------------- | ---------------------------------------------------------------------------- |
-| Yellow        | <span class="tna-colour-swatch" style="background:#ffcc00"></span> `#ffcc00` |
-| Pink          | <span class="tna-colour-swatch" style="background:#fe1d57"></span> `#fe1d57` |
-| Orange        | <span class="tna-colour-swatch" style="background:#fd3f03"></span> `#fd3f03` |
-| Green         | <span class="tna-colour-swatch" style="background:#86bc25"></span> `#86bc25` |
-| Blue          | <span class="tna-colour-swatch" style="background:#00b0ff"></span> `#00b0ff` |
+| Colour        | Hex                                                                             |
+| ------------- | ------------------------------------------------------------------------------- |
+| Yellow        | <span class="tna-ds-colour-swatch" style="background:#ffcc00"></span> `#ffcc00` |
+| Pink          | <span class="tna-ds-colour-swatch" style="background:#fe1d57"></span> `#fe1d57` |
+| Orange        | <span class="tna-ds-colour-swatch" style="background:#fd3f03"></span> `#fd3f03` |
+| Green         | <span class="tna-ds-colour-swatch" style="background:#86bc25"></span> `#86bc25` |
+| Blue          | <span class="tna-ds-colour-swatch" style="background:#00b0ff"></span> `#00b0ff` |
 
 ### Darks
 
-| Colour        | Hex                                                                          |
-| ------------- | ---------------------------------------------------------------------------- |
-| Brown         | <span class="tna-colour-swatch" style="background:#654e37"></span> `#654e37` |
-| Maroon        | <span class="tna-colour-swatch" style="background:#9c193a"></span> `#9c193a` |
-| Chestnut      | <span class="tna-colour-swatch" style="background:#8f3415"></span> `#8f3415` |
-| Forest        | <span class="tna-colour-swatch" style="background:#00623b"></span> `#00623b` |
-| Navy          | <span class="tna-colour-swatch" style="background:#004c7e"></span> `#004c7e` |
+| Colour        | Hex                                                                             |
+| ------------- | ------------------------------------------------------------------------------- |
+| Brown         | <span class="tna-ds-colour-swatch" style="background:#654e37"></span> `#654e37` |
+| Maroon        | <span class="tna-ds-colour-swatch" style="background:#9c193a"></span> `#9c193a` |
+| Chestnut      | <span class="tna-ds-colour-swatch" style="background:#8f3415"></span> `#8f3415` |
+| Forest        | <span class="tna-ds-colour-swatch" style="background:#00623b"></span> `#00623b` |
+| Navy          | <span class="tna-ds-colour-swatch" style="background:#004c7e"></span> `#004c7e` |
 
 ### Lights
 
-| Colour        | Hex                                                                          |
-| ------------- | ---------------------------------------------------------------------------- |
-| Cream         | <span class="tna-colour-swatch" style="background:#f9f7e2"></span> `#f9f7e2` |
-| Pastel pink   | <span class="tna-colour-swatch" style="background:#fad3d4"></span> `#fad3d4` |
-| Pastel orange | <span class="tna-colour-swatch" style="background:#f9e1bc"></span> `#f9e1bc` |
-| Pastel green  | <span class="tna-colour-swatch" style="background:#dde5d5"></span> `#dde5d5` |
-| Pastel blue   | <span class="tna-colour-swatch" style="background:#d4e5ef"></span> `#d4e5ef` |
+| Colour        | Hex                                                                             |
+| ------------- | ------------------------------------------------------------------------------- |
+| Cream         | <span class="tna-ds-colour-swatch" style="background:#f9f7e2"></span> `#f9f7e2` |
+| Pastel pink   | <span class="tna-ds-colour-swatch" style="background:#fad3d4"></span> `#fad3d4` |
+| Pastel orange | <span class="tna-ds-colour-swatch" style="background:#f9e1bc"></span> `#f9e1bc` |
+| Pastel green  | <span class="tna-ds-colour-swatch" style="background:#dde5d5"></span> `#dde5d5` |
+| Pastel blue   | <span class="tna-ds-colour-swatch" style="background:#d4e5ef"></span> `#d4e5ef` |
 
 ## Theme colours
 
-| Colour/Theme                       | Light                                                                        | Dark                                                                         |
-| ---------------------------------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| `page-background`                  | <span class="tna-colour-swatch" style="background:#f4f4f4;"></span> `#f4f4f4;` | <span class="tna-colour-swatch" style="background:#111111"></span> `#111111` |
-| `background-tint`                  | <span class="tna-colour-swatch" style="background:#d8d8d8"></span> `#d8d8d8` | <span class="tna-colour-swatch" style="background:#333333"></span> `#333333` |
-| `font-base`                        | <span class="tna-colour-swatch" style="background:#343338"></span> `#343338` | <span class="tna-colour-swatch" style="background:rgb(255 255 255/0.95)"></span> `rgb(255 255 255/0.95)` |
-| `font-dark`                        | <span class="tna-colour-swatch" style="background:#000000"></span> `#000000` | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` |
-| `font-light`                       | <span class="tna-colour-swatch" style="background:rgb(52 51 56/0.7)"></span> `rgb(52 51 56/0.7)` | <span class="tna-colour-swatch" style="background:rgb(255 255 255/0.5)"></span> `rgb(255 255 255/0.5)` |
-| `icon-light`                       | <span class="tna-colour-swatch" style="background:rgb(52 51 56/0.45)"></span> `rgb(52 51 56/0.45)` | <span class="tna-colour-swatch" style="background:rgb(255 255 255/0.35)"></span> `rgb(255 255 255/0.35)` |
-| `link`                             | <span class="tna-colour-swatch" style="background:#1d70ab"></span> `#1d70ab` | <span class="tna-colour-swatch" style="background:rgb(0, 176, 255)"></span> `rgb(0, 176, 255)` |
-| `link-visited`                     | <span class="tna-colour-swatch" style="background:#4c2c92"></span> `#4c2c92` | <span class="tna-colour-swatch" style="background:#aa88ff"></span> `#aa88ff` |
-| `focus-outline`                    | <span class="tna-colour-swatch" style="background:rgb(0, 176, 255)"></span> `rgb(0, 176, 255)` | <span class="tna-colour-swatch" style="background:rgb(0, 176, 255)"></span> `rgb(0, 176, 255)` |
-| `keyline`                          | <span class="tna-colour-swatch" style="background:rgb(38 38 42/0.25)"></span> `rgb(38 38 42/0.25)` | <span class="tna-colour-swatch" style="background:rgb(255 255 255/0.25)"></span> `rgb(255 255 255/0.25)` |
-| `keyline-dark`                     | <span class="tna-colour-swatch" style="background:#26262a"></span> `#26262a` | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` |
+| Colour/Theme      | Light                                                                                                 | Dark                                                                                                        |
+| ----------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `page-background` | <span class="tna-ds-colour-swatch" style="background:#f4f4f4"></span> `#f4f4f4`                       | <span class="tna-ds-colour-swatch" style="background:#111111"></span> `#111111`                             |
+| `background-tint` | <span class="tna-ds-colour-swatch" style="background:#d8d8d8"></span> `#d8d8d8`                       | <span class="tna-ds-colour-swatch" style="background:#333333"></span> `#333333`                             |
+| `font-base`       | <span class="tna-ds-colour-swatch" style="background:#343338"></span> `#343338`                       | <span class="tna-ds-colour-swatch" style="background:rgb(255 255 255/0.95)"></span> `rgb(255 255 255/0.95)` |
+| `font-dark`       | <span class="tna-ds-colour-swatch" style="background:#000000"></span> `#000000`                       | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff`                             |
+| `font-light`      | <span class="tna-ds-colour-swatch" style="background:rgb(52 51 56/0.7)"></span> `rgb(52 51 56/0.7)`   | <span class="tna-ds-colour-swatch" style="background:rgb(255 255 255/0.5)"></span> `rgb(255 255 255/0.5)`   |
+| `icon-light`      | <span class="tna-ds-colour-swatch" style="background:rgb(52 51 56/0.45)"></span> `rgb(52 51 56/0.45)` | <span class="tna-ds-colour-swatch" style="background:rgb(255 255 255/0.35)"></span> `rgb(255 255 255/0.35)` |
+| `link`            | <span class="tna-ds-colour-swatch" style="background:#1d70ab"></span> `#1d70ab`                       | <span class="tna-ds-colour-swatch" style="background:rgb(0, 176, 255)"></span> `rgb(0, 176, 255)`           |
+| `link-visited`    | <span class="tna-ds-colour-swatch" style="background:#4c2c92"></span> `#4c2c92`                       | <span class="tna-ds-colour-swatch" style="background:#aa88ff"></span> `#aa88ff`                             |
+| `focus-outline`   | <span class="tna-ds-colour-swatch" style="background:rgb(0, 176, 255)"></span> `rgb(0, 176, 255)`     | <span class="tna-ds-colour-swatch" style="background:rgb(0, 176, 255)"></span> `rgb(0, 176, 255)`           |
+| `keyline`         | <span class="tna-ds-colour-swatch" style="background:rgb(38 38 42/0.25)"></span> `rgb(38 38 42/0.25)` | <span class="tna-ds-colour-swatch" style="background:rgb(255 255 255/0.25)"></span> `rgb(255 255 255/0.25)` |
+| `keyline-dark`    | <span class="tna-ds-colour-swatch" style="background:#26262a"></span> `#26262a`                       | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff`                             |
 
 <!--
 ### Buttons
 
 | Colour/Theme                       | Light                                                                        | Dark                                                                         |
 | ---------------------------------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| `button-text`                      | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `button-background`                | <span class="tna-colour-swatch" style="background:#000000"></span> `#000000` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `button-hover-text`                | <span class="tna-colour-swatch" style="background:#000000"></span> `#000000` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `button-hover-background`          | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `button-text`                      | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `button-background`                | <span class="tna-ds-colour-swatch" style="background:#000000"></span> `#000000` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `button-hover-text`                | <span class="tna-ds-colour-swatch" style="background:#000000"></span> `#000000` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `button-hover-background`          | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
 
 ### Contrasting sections
 
 | Colour/Theme                       | Light                                                                        | Dark                                                                         |
 | ---------------------------------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| `contrast-background`              | <span class="tna-colour-swatch" style="background:#1e1e1e"></span> `#1e1e1e` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `contrast-font-base`               | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `contrast-font-dark`               | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `contrast-font-light`              | <span class="tna-colour-swatch" style="background:rgb(255 255 255/0.7)"></span> `rgb(255 255 255/0.7)` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `contrast-icon-light`              | <span class="tna-colour-swatch" style="background:rgb(255 255 255/0.45)"></span> `rgb(255 255 255/0.45)` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `contrast-link`                    | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `contrast-link-visited`            | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `contrast-keyline`                 | <span class="tna-colour-swatch" style="background:rgb(255 255 255/0.5)"></span> `rgb(255 255 255/0.5)` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `contrast-keyline-dark`            | <span class="tna-colour-swatch" style="background:rgb(255 255 255/0.8)"></span> `rgb(255 255 255/0.8)` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `contrast-button-text`             | <span class="tna-colour-swatch" style="background:#000000"></span> `#000000` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `contrast-button-background`       | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `contrast-button-hover-text`       | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `contrast-button-hover-background` | <span class="tna-colour-swatch" style="background:#000000"></span> `#000000` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `contrast-background`              | <span class="tna-ds-colour-swatch" style="background:#1e1e1e"></span> `#1e1e1e` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `contrast-font-base`               | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `contrast-font-dark`               | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `contrast-font-light`              | <span class="tna-ds-colour-swatch" style="background:rgb(255 255 255/0.7)"></span> `rgb(255 255 255/0.7)` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `contrast-icon-light`              | <span class="tna-ds-colour-swatch" style="background:rgb(255 255 255/0.45)"></span> `rgb(255 255 255/0.45)` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `contrast-link`                    | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `contrast-link-visited`            | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `contrast-keyline`                 | <span class="tna-ds-colour-swatch" style="background:rgb(255 255 255/0.5)"></span> `rgb(255 255 255/0.5)` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `contrast-keyline-dark`            | <span class="tna-ds-colour-swatch" style="background:rgb(255 255 255/0.8)"></span> `rgb(255 255 255/0.8)` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `contrast-button-text`             | <span class="tna-ds-colour-swatch" style="background:#000000"></span> `#000000` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `contrast-button-background`       | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `contrast-button-hover-text`       | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `contrast-button-hover-background` | <span class="tna-ds-colour-swatch" style="background:#000000"></span> `#000000` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
 
 ### Accented sections
 
 | Colour/Theme                       | Light                                                                        | Dark                                                                         |
 | ---------------------------------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| `accent`                           | <span class="tna-colour-swatch" style="background:#d9d9d6"></span> `#d9d9d6` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `accent-background`                | <span class="tna-colour-swatch" style="background:#111"></span> `#111` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `accent-background-light`          | <span class="tna-colour-swatch" style="background:#d9d9d6"></span> `#d9d9d6` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `accent-font-base`                 | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `accent-font-dark`                 | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `accent-font-light`                | <span class="tna-colour-swatch" style="background:rgb(255 255 255/0.7)"></span> `rgb(255 255 255/0.7)` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `accent-icon-light`                | <span class="tna-colour-swatch" style="background:rgb(255 255 255/0.45)"></span> `rgb(255 255 255/0.45)` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `accent-link`                      | <span class="tna-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `accent-link-visited`              | <span class="tna-colour-swatch" style="background:#b9f"></span> `#b9f` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `accent-keyline`                   | <span class="tna-colour-swatch" style="background:rgb(255 255 255/0.5)"></span> `rgb(255 255 255/0.5)` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `accent-keyline-dark`              | <span class="tna-colour-swatch" style="background:rgb(255 255 255/0.8)"></span> `rgb(255 255 255/0.8)` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `button-accent-text`               | <span class="tna-colour-swatch" style="background:#000000"></span> `#000000` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
-| `button-accent-background`         | <span class="tna-colour-swatch" style="background:rgb(140, 150, 148)"></span> `rgb(140, 150, 148)` | <span class="tna-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `accent`                           | <span class="tna-ds-colour-swatch" style="background:#d9d9d6"></span> `#d9d9d6` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `accent-background`                | <span class="tna-ds-colour-swatch" style="background:#111"></span> `#111` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `accent-background-light`          | <span class="tna-ds-colour-swatch" style="background:#d9d9d6"></span> `#d9d9d6` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `accent-font-base`                 | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `accent-font-dark`                 | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `accent-font-light`                | <span class="tna-ds-colour-swatch" style="background:rgb(255 255 255/0.7)"></span> `rgb(255 255 255/0.7)` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `accent-icon-light`                | <span class="tna-ds-colour-swatch" style="background:rgb(255 255 255/0.45)"></span> `rgb(255 255 255/0.45)` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `accent-link`                      | <span class="tna-ds-colour-swatch" style="background:#ffffff"></span> `#ffffff` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `accent-link-visited`              | <span class="tna-ds-colour-swatch" style="background:#b9f"></span> `#b9f` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `accent-keyline`                   | <span class="tna-ds-colour-swatch" style="background:rgb(255 255 255/0.5)"></span> `rgb(255 255 255/0.5)` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `accent-keyline-dark`              | <span class="tna-ds-colour-swatch" style="background:rgb(255 255 255/0.8)"></span> `rgb(255 255 255/0.8)` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `button-accent-text`               | <span class="tna-ds-colour-swatch" style="background:#000000"></span> `#000000` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
+| `button-accent-background`         | <span class="tna-ds-colour-swatch" style="background:rgb(140, 150, 148)"></span> `rgb(140, 150, 148)` | <span class="tna-ds-colour-swatch" style="background:#ff00aa"></span> `#ff00aa` |
 -->
 
 ## Colour contrast