diff --git a/eleventy.config.cjs b/eleventy.config.cjs
index 54904ab..83b4749 100644
--- a/eleventy.config.cjs
+++ b/eleventy.config.cjs
@@ -1,6 +1,7 @@
 'use strict';
 
 const { EleventyRenderPlugin } = require('@11ty/eleventy');
+const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const formatDistanceToNow = require('date-fns/formatDistanceToNow');
 const yaml = require('js-yaml');
 const markdown = require('markdown-it');
@@ -101,6 +102,7 @@ module.exports = (eleventyConfig) => {
   );
 
   eleventyConfig.addPlugin(EleventyRenderPlugin);
+  eleventyConfig.addPlugin(syntaxHighlight);
 
   // settings
   return {
diff --git a/package.json b/package.json
index f13a9ad..b63e1ac 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
diff --git a/source/assets/sass/components/_alerts.scss b/source/assets/sass/components/_alerts.scss
index 46336d9..dcd3a36 100644
--- a/source/assets/sass/components/_alerts.scss
+++ b/source/assets/sass/components/_alerts.scss
@@ -1,14 +1,11 @@
 @use 'sass:color';
 @use '../functions';
-@use '../visual-design/theme';
+@use '../config/color/brand';
 @use '../visual-design/typography';
 
 .sl-c-alert {
-  background: var(
-    --alert-bg,
-    color.adjust(theme.$sl-color--hopbush, $lightness: -10%)
-  );
-  color: theme.$sl-color--white;
+  background: var(--alert-bg, var(--sl-color--highlight));
+  color: var(--sl-color--white);
   font-size: var(--sl-font-size--small);
 
   padding: {
@@ -37,24 +34,27 @@
   }
 
   a {
-    border-bottom-color: rgba(theme.$sl-color--white, 0.5);
-    color: theme.$sl-color--white;
+    border-bottom-color: rgba(
+      brand.$sl-color--white,
+      var(--opacity-border, 0.5)
+    );
+    color: var(--sl-color--white);
     font-weight: typography.$sl-font-weight--bold;
 
     &:hover,
     &:focus {
-      background: rgba(black, 0.0625);
-      border-bottom-color: rgba(theme.$sl-color--white, 0.75);
+      --color-link-bg: rgba(0, 0, 0, 6.25%);
+      --opacity-border: 0.75;
     }
 
     &:active {
-      border-bottom-color: theme.$sl-color--white;
+      --opacity-border: 1;
     }
   }
 }
 
 .sl-c-alert--info {
-  --alert-bg: theme.$sl-color--midnight-blue;
+  --alert-bg: var(--sl-color--midnight-blue);
 }
 
 .sl-c-alert--special {
diff --git a/source/assets/sass/components/_buttons.scss b/source/assets/sass/components/_buttons.scss
index 4d992f2..dedad24 100644
--- a/source/assets/sass/components/_buttons.scss
+++ b/source/assets/sass/components/_buttons.scss
@@ -1,49 +1,46 @@
 @use 'sass:color';
 @use '../functions';
-@use '../visual-design/theme';
 
 .sl-c-button {
-  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  margin: 0;
   border: 0;
   border-radius: var(--sl-border-radius--large);
-  padding: var(--sl-gutter--minus) var(--sl-gutter);
-  background: theme.$sl-color--iron;
-  box-shadow: 0 2px 1px rgba(theme.$sl-color--midnight-blue, 0.125);
-  color: color.adjust(theme.$sl-color--hopbush, $lightness: -10%);
+  background: var(--color-button-bg, var(--sl-color--iron));
+  box-shadow: 0 2px 1px var(--sl-color--shadow);
+  color: var(--color-button-text, var(--sl-color--highlight));
   cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  margin: 0;
+  padding: var(--sl-gutter--minus) var(--sl-gutter);
 
   &:hover,
   &:focus {
-    color: color.adjust(theme.$sl-color--bouquet, $lightness: -10%);
+    --color-button-text: var(--sl-color--action);
+    --color-button-bg: var(--sl-color-link--action);
   }
 
   &:active {
-    color: color.adjust(theme.$sl-color--venus, $lightness: -10%);
+    --color-button-text: var(--sl-color--active);
   }
 
   &--primary {
-    background-color: color.adjust(theme.$sl-color--hopbush, $lightness: -10%);
+    --color-button-bg: var(--sl-color--highlight);
 
     &,
     &:hover,
     &:focus,
     &:active {
-      color: theme.$sl-color--white;
+      --color-button-text: var(--sl-color--white);
     }
 
     &:hover,
     &:focus {
-      background-color: color.adjust(
-        theme.$sl-color--bouquet,
-        $lightness: -10%
-      );
+      --color-button-bg: var(--sl-color--action);
     }
 
     &:active {
-      background-color: color.adjust(theme.$sl-color--venus, $lightness: -10%);
+      --color-button-bg: var(--sl-color--active);
     }
   }
 }
diff --git a/source/assets/sass/components/_link-header.scss b/source/assets/sass/components/_link-header.scss
index eb04087..c825c9b 100644
--- a/source/assets/sass/components/_link-header.scss
+++ b/source/assets/sass/components/_link-header.scss
@@ -72,8 +72,6 @@ h6 {
   }
 
   to {
-    background-color: #f8f8f8;
-
-    // background-color: <%= Rouge::Themes::Github.get_style(Rouge::Token::Tokens::Text)[:bg] %>;
+    background-color: var(--sl-color-code--bg);
   }
 }
diff --git a/source/assets/sass/config/_index.scss b/source/assets/sass/config/_index.scss
index 2c9049e..a6265b6 100644
--- a/source/assets/sass/config/_index.scss
+++ b/source/assets/sass/config/_index.scss
@@ -1,2 +1,3 @@
 @forward 'scale';
 @forward 'utility';
+@forward 'color';
diff --git a/source/assets/sass/config/_utility.scss b/source/assets/sass/config/_utility.scss
index 67fe20c..c197ed9 100644
--- a/source/assets/sass/config/_utility.scss
+++ b/source/assets/sass/config/_utility.scss
@@ -1,12 +1,16 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'scale';
+@use 'color/brand';
+@use 'color/content';
 
 /// Returns all the variables defined in a module,
 /// as a map from variable names (without $)
 /// to the values of those variables.
 /// @link https://sass-lang.com/documentation/modules/meta#module-variables
 $scale: meta.module-variables('scale');
+$brand-colors: meta.module-variables('brand');
+$content-colors: meta.module-variables('content');
 
 // Loops through and returns all tokens from above files as CSS variables.
 @mixin tokens($map, $prefix: null) {
diff --git a/source/assets/sass/config/color/_brand.scss b/source/assets/sass/config/color/_brand.scss
new file mode 100644
index 0000000..52352a0
--- /dev/null
+++ b/source/assets/sass/config/color/_brand.scss
@@ -0,0 +1,12 @@
+$sl-color--hopbush: #c69;
+$sl-color--bouquet: #b37399;
+$sl-color--venus: #998099;
+$sl-color--patina: #699;
+$sl-color--nebula: #d2e1dd;
+$sl-color--white: white;
+$sl-color--dawn-pink: #f2ece4;
+$sl-color--wafer: #e1d7d2;
+$sl-color--iron: #dadbdf;
+$sl-color--regent-grey: #808c99;
+$sl-color--pale-sky: #6b717f;
+$sl-color--midnight-blue: #036;
diff --git a/source/assets/sass/config/color/_config.scss b/source/assets/sass/config/color/_config.scss
new file mode 100644
index 0000000..64c2d1e
--- /dev/null
+++ b/source/assets/sass/config/color/_config.scss
@@ -0,0 +1,288 @@
+@use 'sass:math';
+@use 'sass:color';
+@use 'sass:list';
+@use 'brand';
+
+@function luminance($color) {
+  $red: list.nth($linear-channel-values, color.red($color) + 1);
+  $green: list.nth($linear-channel-values, color.green($color) + 1);
+  $blue: list.nth($linear-channel-values, color.blue($color) + 1);
+
+  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+@function contrast($back, $front) {
+  $backLum: luminance($back) + 0.05;
+  $foreLum: luminance($front) + 0.05;
+
+  @return math.div(max($backLum, $foreLum), min($backLum, $foreLum));
+}
+
+@function choose-contrast-color($color) {
+  $lightContrast: contrast($color, brand.$sl-color--white);
+  $darkContrast: contrast($color, brand.$sl-color--black);
+
+  @if $lightContrast > $darkContrast {
+    @return brand.$sl-color--white;
+  } @else {
+    @return brand.$sl-color--black;
+  }
+}
+
+/* prettier-ignore */
+$linear-channel-values: 0
+  .0003035269835488375
+  .000607053967097675
+  .0009105809506465125
+  .00121410793419535
+  .0015176349177441874
+  .001821161901293025
+  .0021246888848418626
+  .0024282158683907
+  .0027317428519395373
+  .003035269835488375
+  .003346535763899161
+  .003676507324047436
+  .004024717018496307
+  .004391442037410293
+  .004776953480693729
+  .005181516702338386
+  .005605391624202723
+  .006048833022857054
+  .006512090792594475
+  .006995410187265387
+  .007499032043226175
+  .008023192985384994
+  .008568125618069307
+  .009134058702220787
+  .00972121732023785
+  .010329823029626936
+  .010960094006488246
+  .011612245179743885
+  .012286488356915872
+  .012983032342173012
+  .013702083047289686
+  .014443843596092545
+  .01520851442291271
+  .01599629336550963
+  .016807375752887384
+  .017641954488384078
+  .018500220128379697
+  .019382360956935723
+  .0202885630566524
+  .021219010376003555
+  .022173884793387385
+  .02315336617811041
+  .024157632448504756
+  .02518685962736163
+  .026241221894849898
+  .027320891639074894
+  .028426039504420793
+  .0295568344378088
+  .030713443732993635
+  .03189603307301153
+  .033104766570885055
+  .03433980680868217
+  .03560131487502034
+  .03688945040110004
+  .0382043715953465
+  .03954623527673284
+  .04091519690685319
+  .042311410620809675
+  .043735029256973465
+  .04518620438567554
+  .046665086336880095
+  .04817182422688942
+  .04970656598412723
+  .05126945837404324
+  .052860647023180246
+  .05448027644244237
+  .05612849004960009
+  .05780543019106723
+  .0595112381629812
+  .06124605423161761
+  .06301001765316767
+  .06480326669290577
+  .06662593864377289
+  .06847816984440017
+  .07036009569659588
+  .07227185068231748
+  .07421356838014963
+  .07618538148130785
+  .07818742180518633
+  .08021982031446832
+  .0822827071298148
+  .08437621154414882
+  .08650046203654976
+  .08865558628577294
+  .09084171118340768
+  .09305896284668745
+  .0953074666309647
+  .09758734714186246
+  .09989872824711389
+  .10224173308810132
+  .10461648409110419
+  .10702310297826761
+  .10946171077829933
+  .1119324278369056
+  .11443537382697373
+  .11697066775851084
+  .11953842798834562
+  .12213877222960187
+  .12477181756095049
+  .12743768043564743
+  .1301364766903643
+  .13286832155381798
+  .13563332965520566
+  .13843161503245183
+  .14126329114027164
+  .14412847085805777
+  .14702726649759498
+  .14995978981060856
+  .15292615199615017
+  .1559264637078274
+  .1589608350608804
+  .162029375639111
+  .1651321945016676
+  .16826940018969075
+  .1714411007328226
+  .17464740365558504
+  .17788841598362912
+  .18116424424986022
+  .184474994500441
+  .18782077230067787
+  .19120168274079138
+  .1946178304415758
+  .19806931955994886
+  .20155625379439707
+  .20507873639031693
+  .20863687014525575
+  .21223075741405523
+  .21586050011389926
+  .2195261997292692
+  .2232279573168085
+  .22696587351009836
+  .23074004852434915
+  .23455058216100522
+  .238397573812271
+  .24228112246555486
+  .24620132670783548
+  .25015828472995344
+  .25415209433082675
+  .2581828529215958
+  .26225065752969623
+  .26635560480286247
+  .2704977910130658
+  .27467731206038465
+  .2788942634768104
+  .2831487404299921
+  .2874408377269175
+  .29177064981753587
+  .2961382707983211
+  .3005437944157765
+  .3049873140698863
+  .30946892281750854
+  .31398871337571754
+  .31854677812509186
+  .32314320911295075
+  .3277780980565422
+  .33245153634617935
+  .33716361504833037
+  .3419144249086609
+  .3467040563550296
+  .35153259950043936
+  .3564001441459435
+  .3613067797835095
+  .3662525955988395
+  .3712376804741491
+  .3762621229909065
+  .38132601143253014
+  .386429433787049
+  .39157247774972326
+  .39675523072562685
+  .4019777798321958
+  .4072402119017367
+  .41254261348390375
+  .4178850708481375
+  .4232676699860717
+  .4286904966139066
+  .43415363617474895
+  .4396571738409188
+  .44520119451622786
+  .45078578283822346
+  .45641102318040466
+  .4620769996544071
+  .467783796112159
+  .47353149614800955
+  .4793201831008268
+  .4851499400560704
+  .4910208498478356
+  .4969329950608704
+  .5028864580325687
+  .5088813208549338
+  .5149176653765214
+  .5209955732043543
+  .5271151257058131
+  .5332764040105052
+  .5394794890121072
+  .5457244613701866
+  .5520114015120001
+  .5583403896342679
+  .5647115057049292
+  .5711248294648731
+  .5775804404296506
+  .5840784178911641
+  .5906188409193369
+  .5972017883637634
+  .6038273388553378
+  .6104955708078648
+  .6172065624196511
+  .6239603916750761
+  .6307571363461468
+  .6375968739940326
+  .6444796819705821
+  .6514056374198242
+  .6583748172794485
+  .665387298282272
+  .6724431569576875
+  .6795424696330938
+  .6866853124353135
+  .6938717612919899
+  .7011018919329731
+  .7083757798916868
+  .7156935005064807
+  .7230551289219693
+  .7304607400903537
+  .7379104087727308
+  .7454042095403874
+  .7529422167760779
+  .7605245046752924
+  .768151147247507
+  .7758222183174236
+  .7835377915261935
+  .7912979403326302
+  .799102738014409
+  .8069522576692516
+  .8148465722161012
+  .8227857543962835
+  .8307698767746546
+  .83879901174074
+  .846873231509858
+  .8549926081242338
+  .8631572134541023
+  .8713671191987972
+  .8796223968878317
+  .8879231178819663
+  .8962693533742664
+  .9046611743911496
+  .9130986517934192
+  .9215818562772946
+  .9301108583754237
+  .938685728457888
+  .9473065367331999
+  .9559733532492861
+  .9646862478944651
+  .9734452903984125
+  .9822505503331171
+  .9911020971138298
+  1;
diff --git a/source/assets/sass/config/color/_content.scss b/source/assets/sass/config/color/_content.scss
new file mode 100644
index 0000000..75120e3
--- /dev/null
+++ b/source/assets/sass/config/color/_content.scss
@@ -0,0 +1,10 @@
+@use 'sass:color';
+@use 'brand';
+
+$color--highlight: color.adjust(brand.$sl-color--hopbush, $lightness: -10%);
+$color--action: color.adjust(brand.$sl-color--bouquet, $lightness: -10%);
+$color--shadow: rgba(brand.$sl-color--midnight-blue, 0.125);
+$color--active: color.adjust(brand.$sl-color--venus, $lightness: -10%);
+$color-code--bg: #f8f8f8;
+$color-code--text: color.adjust(brand.$sl-color--pale-sky, $lightness: -25%);
+$color-link--action: rgba(218, 219, 223, 25%);
diff --git a/source/assets/sass/config/color/_index.scss b/source/assets/sass/config/color/_index.scss
new file mode 100644
index 0000000..919ecee
--- /dev/null
+++ b/source/assets/sass/config/color/_index.scss
@@ -0,0 +1,3 @@
+@forward 'brand';
+@forward 'config';
+@forward 'content';
diff --git a/source/assets/sass/vendor/_syntax-accessible.scss b/source/assets/sass/vendor/_syntax-accessible.scss
index 7626014..3cd76dc 100644
--- a/source/assets/sass/vendor/_syntax-accessible.scss
+++ b/source/assets/sass/vendor/_syntax-accessible.scss
@@ -1,273 +1,116 @@
 @use '../functions';
 
-// Stylesheet pulled from Rogue stylesheet with colours updated for a11y
+/**
+ * Based on the GHColors theme by Avi Aryan (http://aviaryan.in)
+ * Inspired by GitHub syntax coloring
+ */
 
-.highlight table td { padding: functions.sl-px-to-rem(5px); }
-.highlight table pre { margin: 0; }
-.highlight .cm {
-  color: #656556;
+code[class*="language-"],
+pre[class*="language-"] {
+  background-color: var(--sl-color-code--bg);
+  hyphens: none;
+  word-break: normal;
+  word-spacing: normal;
+  tab-size: 4;
+  text-align: left;
+}
+
+.token {
+  color: var(--sl-color-code--text);
+}
+
+.token table td {
+  padding: functions.sl-px-to-rem(5px);
+}
+
+.token table pre {
+  margin: 0;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  --sl-color-code--text: #656556;
   font-style: italic;
 }
 
-.highlight .cp {
-  color: #999999;
+[class*="language-css"] {
+  & .token.comment {
+    --sl-color-code--text: #006666;
+  }
+}
+
+.token.namespace {
+  opacity: 0.7;
+}
+
+.token.string,
+.token.attr-value {
+  --sl-color-code--text: #df1144;
+}
+
+.token.punctuation,
+.token.operator {
+  --sl-color-code--text: #393A34;
+  /* no highlight */
   font-weight: bold;
 }
 
-.highlight .c1 {
-  color: #656556;
+.token.entity,
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.constant,
+.token.property,
+.token.regex,
+.token.inserted {
+  --sl-color-code--text: #990000;
+  font-weight: bold;
+}
+
+
+.token.atrule,
+.token.keyword,
+.token.attr-name,
+.language-autohotkey .token.selector {
+  --sl-color-code--text: #000000;
+  font-weight: bold;
+}
+
+.token.function,
+.token.deleted,
+.language-autohotkey .token.tag {
+  --sl-color-code--text: #9a050f;
+}
+
+.token.tag,
+.token.selector,
+.language-autohotkey .token.keyword {
+  --sl-color-code--text: #445588;
+  font-weight: bold;
+}
+
+.token.important,
+.token.function,
+.token.bold {
+  font-weight: bold;
+}
+
+[class*="language-shell"] {
+  & .token.function {
+    --sl-color-code--text: unset;
+    font-weight: normal;
+  }
+}
+
+.token.italic {
   font-style: italic;
 }
 
-.highlight .cs {
-  color: #999999;
-  font-weight: bold;
-  font-style: italic;
+.token.variable,
+.token[class*="placeholder"] {
+  --sl-color-code--text: #006666;
+  font-weight: normal;
 }
-
-.highlight .c, .highlight .cd {
-  color: #006666;
-  font-style: italic;
-}
-
-.highlight .err {
-  color: #a61717;
-  background-color: #e3d2d2;
-}
-
-.highlight .gd {
-  color: #000000;
-  background-color: #ffdddd;
-}
-
-.highlight .ge {
-  color: #000000;
-  font-style: italic;
-}
-
-.highlight .gr {
-  color: #aa0000;
-}
-
-.highlight .gh {
-  color: #999999;
-}
-
-.highlight .gi {
-  color: #000000;
-  background-color: #ddffdd;
-}
-
-.highlight .go {
-  color: #888888;
-}
-
-.highlight .gp {
-  color: #555555;
-}
-
-.highlight .gs {
-  font-weight: bold;
-}
-
-.highlight .gu {
-  color: #aaaaaa;
-}
-
-.highlight .gt {
-  color: #aa0000;
-}
-
-.highlight .kc {
-  color: #000000;
-  font-weight: bold;
-}
-
-.highlight .kd {
-  color: #000000;
-  font-weight: bold;
-}
-
-.highlight .kn {
-  color: #000000;
-  font-weight: bold;
-}
-
-.highlight .kp {
-  color: #000000;
-  font-weight: bold;
-}
-
-.highlight .kr {
-  color: #000000;
-  font-weight: bold;
-}
-
-.highlight .kt {
-  color: #445588;
-  font-weight: bold;
-}
-
-.highlight .k, .highlight .kv {
-  color: #000000;
-  font-weight: bold;
-}
-
-.highlight .mf {
-  color: #006666;
-}
-
-.highlight .mh {
-  color: #006666;
-}
-
-.highlight .il {
-  color: #006666;
-}
-
-.highlight .mi {
-  color: #006666;
-}
-
-.highlight .mo {
-  color: #006666;
-}
-
-.highlight .m, .highlight .mb, .highlight .mx {
-  color: #006666;
-}
-
-.highlight .sb {
-  color: #d14;
-}
-
-.highlight .sc {
-  color: #d14;
-}
-
-.highlight .sd {
-  color: #d14;
-}
-
-.highlight .s2 {
-  color: #d14;
-}
-
-.highlight .se {
-  color: #d14;
-}
-
-.highlight .sh {
-  color: #d14;
-}
-
-.highlight .si {
-  color: #d14;
-}
-
-.highlight .sx {
-  color: #d14;
-}
-
-.highlight .sr {
-  color: #006619;
-}
-
-.highlight .s1 {
-  color: #d14;
-}
-
-.highlight .ss {
-  color: #990073;
-}
-
-.highlight .s {
-  color: #d14;
-}
-
-.highlight .na {
-  color: #006666;
-}
-
-.highlight .bp {
-  color: #666666;
-}
-
-.highlight .nb {
-  color: #006080;
-}
-
-.highlight .nc {
-  color: #445588;
-  font-weight: bold;
-}
-
-.highlight .no {
-  color: #004D4D;
-}
-
-.highlight .nd {
-  color: #3c5d5d;
-  font-weight: bold;
-}
-
-.highlight .ni {
-  color: #800080;
-}
-
-.highlight .ne {
-  color: #990000;
-  font-weight: bold;
-}
-
-.highlight .nf {
-  color: #990000;
-  font-weight: bold;
-}
-
-.highlight .nl {
-  color: #990000;
-  font-weight: bold;
-}
-
-.highlight .nn {
-  color: #555555;
-}
-
-.highlight .nt {
-  color: #000080;
-}
-
-.highlight .vc {
-  color: #004D4D;
-}
-
-.highlight .vg {
-  color: #004D4D;
-}
-
-.highlight .vi {
-  color: #004D4D;
-}
-
-.highlight .nv {
-  color: #006666;
-}
-
-.highlight .ow {
-  color: #000000;
-  font-weight: bold;
-}
-
-.highlight .o {
-  color: #000000;
-  font-weight: bold;
-}
-
-.highlight .w {
-  color: #bbbbbb;
-}
-
-.highlight {
-  background-color: #f8f8f8;
-}
\ No newline at end of file
diff --git a/source/assets/sass/vendor/_syntax.scss.erb b/source/assets/sass/vendor/_syntax.scss.erb
deleted file mode 100644
index 188511c..0000000
--- a/source/assets/sass/vendor/_syntax.scss.erb
+++ /dev/null
@@ -1 +0,0 @@
-<%= Rouge::Themes::Github.render(:scope => '.highlight') %>
diff --git a/source/assets/sass/vendor/typedoc/_highlight.css b/source/assets/sass/vendor/typedoc/_highlight.css
deleted file mode 100644
index 638da89..0000000
--- a/source/assets/sass/vendor/typedoc/_highlight.css
+++ /dev/null
@@ -1,85 +0,0 @@
-:root {
-    --light-hl-0: #0000FF;
-    --dark-hl-0: #569CD6;
-    --light-hl-1: #000000;
-    --dark-hl-1: #D4D4D4;
-    --light-hl-2: #001080;
-    --dark-hl-2: #9CDCFE;
-    --light-hl-3: #795E26;
-    --dark-hl-3: #DCDCAA;
-    --light-hl-4: #A31515;
-    --dark-hl-4: #CE9178;
-    --light-hl-5: #008000;
-    --dark-hl-5: #6A9955;
-    --light-hl-6: #AF00DB;
-    --dark-hl-6: #C586C0;
-    --light-hl-7: #800000;
-    --dark-hl-7: #D7BA7D;
-    --light-hl-8: #800000;
-    --dark-hl-8: #569CD6;
-    --light-code-background: #FFFFFF;
-    --dark-code-background: #1E1E1E;
-}
-
-@media (prefers-color-scheme: light) { :root {
-    --hl-0: var(--light-hl-0);
-    --hl-1: var(--light-hl-1);
-    --hl-2: var(--light-hl-2);
-    --hl-3: var(--light-hl-3);
-    --hl-4: var(--light-hl-4);
-    --hl-5: var(--light-hl-5);
-    --hl-6: var(--light-hl-6);
-    --hl-7: var(--light-hl-7);
-    --hl-8: var(--light-hl-8);
-    --code-background: var(--light-code-background);
-} }
-
-@media (prefers-color-scheme: dark) { :root {
-    --hl-0: var(--dark-hl-0);
-    --hl-1: var(--dark-hl-1);
-    --hl-2: var(--dark-hl-2);
-    --hl-3: var(--dark-hl-3);
-    --hl-4: var(--dark-hl-4);
-    --hl-5: var(--dark-hl-5);
-    --hl-6: var(--dark-hl-6);
-    --hl-7: var(--dark-hl-7);
-    --hl-8: var(--dark-hl-8);
-    --code-background: var(--dark-code-background);
-} }
-
-body.light {
-    --hl-0: var(--light-hl-0);
-    --hl-1: var(--light-hl-1);
-    --hl-2: var(--light-hl-2);
-    --hl-3: var(--light-hl-3);
-    --hl-4: var(--light-hl-4);
-    --hl-5: var(--light-hl-5);
-    --hl-6: var(--light-hl-6);
-    --hl-7: var(--light-hl-7);
-    --hl-8: var(--light-hl-8);
-    --code-background: var(--light-code-background);
-}
-
-body.dark {
-    --hl-0: var(--dark-hl-0);
-    --hl-1: var(--dark-hl-1);
-    --hl-2: var(--dark-hl-2);
-    --hl-3: var(--dark-hl-3);
-    --hl-4: var(--dark-hl-4);
-    --hl-5: var(--dark-hl-5);
-    --hl-6: var(--dark-hl-6);
-    --hl-7: var(--dark-hl-7);
-    --hl-8: var(--dark-hl-8);
-    --code-background: var(--dark-code-background);
-}
-
-.hl-0 { color: var(--hl-0); }
-.hl-1 { color: var(--hl-1); }
-.hl-2 { color: var(--hl-2); }
-.hl-3 { color: var(--hl-3); }
-.hl-4 { color: var(--hl-4); }
-.hl-5 { color: var(--hl-5); }
-.hl-6 { color: var(--hl-6); }
-.hl-7 { color: var(--hl-7); }
-.hl-8 { color: var(--hl-8); }
-pre, code { background: var(--code-background); }
diff --git a/source/assets/sass/vendor/typedoc/_highlight.scss b/source/assets/sass/vendor/typedoc/_highlight.scss
index eb7b494..f20c407 100644
--- a/source/assets/sass/vendor/typedoc/_highlight.scss
+++ b/source/assets/sass/vendor/typedoc/_highlight.scss
@@ -1,16 +1,16 @@
 @use '../syntax-accessible';
 
 // Colors updated to match the standard Sass styling.
-.typedoc pre { @extend .highlight; }
+.typedoc pre { @extend .token; }
 
-.hl-0 { @extend .k; }
-.hl-1 { @extend .p !optional; }
-.hl-2 { @extend .na; }
-.hl-3 { @extend .nx !optional; }
-.hl-4 { @extend .k; }
-.hl-5 { @extend .s2; }
-.hl-6 { @extend .k; }
-.hl-7 { @extend .c1; }
-.hl-8 { @extend .na; }
-.hl-9 { @extend .nx !optional; }
-.hl-10 { @extend .nb; }
+.hl-0 { @extend .keyword; }
+.hl-1 { @extend .punctuation; }
+.hl-2 { @extend .variable; }
+.hl-3 { @extend .function; }
+.hl-4 { @extend .keyword; }
+.hl-5 { @extend .string; }
+.hl-6 { @extend .keyword; }
+.hl-7 { @extend .comment; }
+.hl-8 { @extend .variable; }
+.hl-9 { @extend .comment; }
+.hl-10 { @extend .variable; }
diff --git a/source/assets/sass/visual-design/_theme.scss b/source/assets/sass/visual-design/_theme.scss
index 957f565..e608459 100644
--- a/source/assets/sass/visual-design/_theme.scss
+++ b/source/assets/sass/visual-design/_theme.scss
@@ -31,290 +31,6 @@ $sl-colors: (
   midnight-blue: $sl-color--midnight-blue,
 );
 
-@function luminance($color) {
-  $red: list.nth($linear-channel-values, color.red($color) + 1);
-  $green: list.nth($linear-channel-values, color.green($color) + 1);
-  $blue: list.nth($linear-channel-values, color.blue($color) + 1);
-
-  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
-}
-
-@function contrast($back, $front) {
-  $backLum: luminance($back) + 0.05;
-  $foreLum: luminance($front) + 0.05;
-
-  @return math.div(max($backLum, $foreLum), min($backLum, $foreLum));
-}
-
-@function choose-contrast-color($color) {
-  $lightContrast: contrast($color, $sl-color--white);
-  $darkContrast: contrast($color, $sl-color--black);
-
-  @if $lightContrast > $darkContrast {
-    @return $sl-color--white;
-  } @else {
-    @return $sl-color--black;
-  }
-}
-
-/* prettier-ignore */
-$linear-channel-values: 0
-  .0003035269835488375
-  .000607053967097675
-  .0009105809506465125
-  .00121410793419535
-  .0015176349177441874
-  .001821161901293025
-  .0021246888848418626
-  .0024282158683907
-  .0027317428519395373
-  .003035269835488375
-  .003346535763899161
-  .003676507324047436
-  .004024717018496307
-  .004391442037410293
-  .004776953480693729
-  .005181516702338386
-  .005605391624202723
-  .006048833022857054
-  .006512090792594475
-  .006995410187265387
-  .007499032043226175
-  .008023192985384994
-  .008568125618069307
-  .009134058702220787
-  .00972121732023785
-  .010329823029626936
-  .010960094006488246
-  .011612245179743885
-  .012286488356915872
-  .012983032342173012
-  .013702083047289686
-  .014443843596092545
-  .01520851442291271
-  .01599629336550963
-  .016807375752887384
-  .017641954488384078
-  .018500220128379697
-  .019382360956935723
-  .0202885630566524
-  .021219010376003555
-  .022173884793387385
-  .02315336617811041
-  .024157632448504756
-  .02518685962736163
-  .026241221894849898
-  .027320891639074894
-  .028426039504420793
-  .0295568344378088
-  .030713443732993635
-  .03189603307301153
-  .033104766570885055
-  .03433980680868217
-  .03560131487502034
-  .03688945040110004
-  .0382043715953465
-  .03954623527673284
-  .04091519690685319
-  .042311410620809675
-  .043735029256973465
-  .04518620438567554
-  .046665086336880095
-  .04817182422688942
-  .04970656598412723
-  .05126945837404324
-  .052860647023180246
-  .05448027644244237
-  .05612849004960009
-  .05780543019106723
-  .0595112381629812
-  .06124605423161761
-  .06301001765316767
-  .06480326669290577
-  .06662593864377289
-  .06847816984440017
-  .07036009569659588
-  .07227185068231748
-  .07421356838014963
-  .07618538148130785
-  .07818742180518633
-  .08021982031446832
-  .0822827071298148
-  .08437621154414882
-  .08650046203654976
-  .08865558628577294
-  .09084171118340768
-  .09305896284668745
-  .0953074666309647
-  .09758734714186246
-  .09989872824711389
-  .10224173308810132
-  .10461648409110419
-  .10702310297826761
-  .10946171077829933
-  .1119324278369056
-  .11443537382697373
-  .11697066775851084
-  .11953842798834562
-  .12213877222960187
-  .12477181756095049
-  .12743768043564743
-  .1301364766903643
-  .13286832155381798
-  .13563332965520566
-  .13843161503245183
-  .14126329114027164
-  .14412847085805777
-  .14702726649759498
-  .14995978981060856
-  .15292615199615017
-  .1559264637078274
-  .1589608350608804
-  .162029375639111
-  .1651321945016676
-  .16826940018969075
-  .1714411007328226
-  .17464740365558504
-  .17788841598362912
-  .18116424424986022
-  .184474994500441
-  .18782077230067787
-  .19120168274079138
-  .1946178304415758
-  .19806931955994886
-  .20155625379439707
-  .20507873639031693
-  .20863687014525575
-  .21223075741405523
-  .21586050011389926
-  .2195261997292692
-  .2232279573168085
-  .22696587351009836
-  .23074004852434915
-  .23455058216100522
-  .238397573812271
-  .24228112246555486
-  .24620132670783548
-  .25015828472995344
-  .25415209433082675
-  .2581828529215958
-  .26225065752969623
-  .26635560480286247
-  .2704977910130658
-  .27467731206038465
-  .2788942634768104
-  .2831487404299921
-  .2874408377269175
-  .29177064981753587
-  .2961382707983211
-  .3005437944157765
-  .3049873140698863
-  .30946892281750854
-  .31398871337571754
-  .31854677812509186
-  .32314320911295075
-  .3277780980565422
-  .33245153634617935
-  .33716361504833037
-  .3419144249086609
-  .3467040563550296
-  .35153259950043936
-  .3564001441459435
-  .3613067797835095
-  .3662525955988395
-  .3712376804741491
-  .3762621229909065
-  .38132601143253014
-  .386429433787049
-  .39157247774972326
-  .39675523072562685
-  .4019777798321958
-  .4072402119017367
-  .41254261348390375
-  .4178850708481375
-  .4232676699860717
-  .4286904966139066
-  .43415363617474895
-  .4396571738409188
-  .44520119451622786
-  .45078578283822346
-  .45641102318040466
-  .4620769996544071
-  .467783796112159
-  .47353149614800955
-  .4793201831008268
-  .4851499400560704
-  .4910208498478356
-  .4969329950608704
-  .5028864580325687
-  .5088813208549338
-  .5149176653765214
-  .5209955732043543
-  .5271151257058131
-  .5332764040105052
-  .5394794890121072
-  .5457244613701866
-  .5520114015120001
-  .5583403896342679
-  .5647115057049292
-  .5711248294648731
-  .5775804404296506
-  .5840784178911641
-  .5906188409193369
-  .5972017883637634
-  .6038273388553378
-  .6104955708078648
-  .6172065624196511
-  .6239603916750761
-  .6307571363461468
-  .6375968739940326
-  .6444796819705821
-  .6514056374198242
-  .6583748172794485
-  .665387298282272
-  .6724431569576875
-  .6795424696330938
-  .6866853124353135
-  .6938717612919899
-  .7011018919329731
-  .7083757798916868
-  .7156935005064807
-  .7230551289219693
-  .7304607400903537
-  .7379104087727308
-  .7454042095403874
-  .7529422167760779
-  .7605245046752924
-  .768151147247507
-  .7758222183174236
-  .7835377915261935
-  .7912979403326302
-  .799102738014409
-  .8069522576692516
-  .8148465722161012
-  .8227857543962835
-  .8307698767746546
-  .83879901174074
-  .846873231509858
-  .8549926081242338
-  .8631572134541023
-  .8713671191987972
-  .8796223968878317
-  .8879231178819663
-  .8962693533742664
-  .9046611743911496
-  .9130986517934192
-  .9215818562772946
-  .9301108583754237
-  .938685728457888
-  .9473065367331999
-  .9559733532492861
-  .9646862478944651
-  .9734452903984125
-  .9822505503331171
-  .9911020971138298
-  1;
-
 @each $name, $value in $sl-colors {
   // to avoid Sass yelling at using 'white' or 'black' as a color name
   .sl-background--#{'' + $name} {
@@ -328,6 +44,8 @@ $linear-channel-values: 0
 }
 
 html {
+  @include config.tokens(config.$brand-colors);
+  @include config.tokens(config.$content-colors, 'sl-');
   @include config.tokens(config.$scale, 'sl-');
 
   background: #f8f9fa
@@ -345,6 +63,7 @@ body {
 
 a {
   border-bottom: var(--sl-border--small) solid rgba($sl-color--iron, 0.5);
+  background: var(--color-link-bg, transparent);
   color: $sl-color--midnight-blue;
 
   .c1 & {
@@ -353,8 +72,9 @@ a {
 
   &:hover,
   &:focus {
+    --color-link-bg: var(--sl-color-link--action);
+
     border-bottom-color: rgba($sl-color--iron, 0.75);
-    background: rgba($sl-color--iron, 0.25);
   }
 
   &:active {
@@ -365,7 +85,7 @@ a {
 code,
 pre {
   border-radius: var(--sl-border-radius--small);
-  color: color.adjust($sl-color--pale-sky, $lightness: -25%);
+  color: var(--sl-color-code--text);
 
   a & {
     color: inherit;
diff --git a/yarn.lock b/yarn.lock
index c59f595..d0c5025 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -33,6 +33,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@11ty/eleventy-plugin-syntaxhighlight@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "@11ty/eleventy-plugin-syntaxhighlight@npm:4.2.0"
+  dependencies:
+    linkedom: ^0.14.19
+    prismjs: ^1.29.0
+  checksum: 6109f5f68bed0286b1cec572808b1239c1442baf04d3db78de21e3bbdef920ef7985dd3643f28282a12db894bebed5207bf171823b7bb98f4b71fb66169e4fac
+  languageName: node
+  linkType: hard
+
 "@11ty/eleventy-utils@npm:^1.0.1":
   version: 1.0.1
   resolution: "@11ty/eleventy-utils@npm:1.0.1"
@@ -2343,6 +2353,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"boolbase@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "boolbase@npm:1.0.0"
+  checksum: 3e25c80ef626c3a3487c73dbfc70ac322ec830666c9ad915d11b701142fab25ec1e63eff2c450c74347acfd2de854ccde865cd79ef4db1683f7c7b046ea43bb0
+  languageName: node
+  linkType: hard
+
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -2698,6 +2715,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-select@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "css-select@npm:5.1.0"
+  dependencies:
+    boolbase: ^1.0.0
+    css-what: ^6.1.0
+    domhandler: ^5.0.2
+    domutils: ^3.0.1
+    nth-check: ^2.0.1
+  checksum: 2772c049b188d3b8a8159907192e926e11824aea525b8282981f72ba3f349cf9ecd523fdf7734875ee2cb772246c22117fc062da105b6d59afe8dcd5c99c9bda
+  languageName: node
+  linkType: hard
+
 "css-tree@npm:^2.3.1":
   version: 2.3.1
   resolution: "css-tree@npm:2.3.1"
@@ -2708,6 +2738,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-what@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "css-what@npm:6.1.0"
+  checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe
+  languageName: node
+  linkType: hard
+
 "cssesc@npm:^3.0.0":
   version: 3.0.0
   resolution: "cssesc@npm:3.0.0"
@@ -2717,6 +2754,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssom@npm:^0.5.0":
+  version: 0.5.0
+  resolution: "cssom@npm:0.5.0"
+  checksum: 823471aa30091c59e0a305927c30e7768939b6af70405808f8d2ce1ca778cddcb24722717392438329d1691f9a87cb0183b64b8d779b56a961546d54854fde01
+  languageName: node
+  linkType: hard
+
 "date-fns@npm:^2.29.3":
   version: 2.29.3
   resolution: "date-fns@npm:2.29.3"
@@ -2902,7 +2946,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0":
+"dom-serializer@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "dom-serializer@npm:2.0.0"
+  dependencies:
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.2
+    entities: ^4.2.0
+  checksum: cd1810544fd8cdfbd51fa2c0c1128ec3a13ba92f14e61b7650b5de421b88205fd2e3f0cc6ace82f13334114addb90ed1c2f23074a51770a8e9c1273acbc7f3e6
+  languageName: node
+  linkType: hard
+
+"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0, domelementtype@npm:^2.3.0":
   version: 2.3.0
   resolution: "domelementtype@npm:2.3.0"
   checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
@@ -2918,6 +2973,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"domhandler@npm:^5.0.1, domhandler@npm:^5.0.2":
+  version: 5.0.3
+  resolution: "domhandler@npm:5.0.3"
+  dependencies:
+    domelementtype: ^2.3.0
+  checksum: 0f58f4a6af63e6f3a4320aa446d28b5790a009018707bce2859dcb1d21144c7876482b5188395a188dfa974238c019e0a1e610d2fc269a12b2c192ea2b0b131c
+  languageName: node
+  linkType: hard
+
 "domutils@npm:^2.8.0":
   version: 2.8.0
   resolution: "domutils@npm:2.8.0"
@@ -2929,6 +2993,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"domutils@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "domutils@npm:3.0.1"
+  dependencies:
+    dom-serializer: ^2.0.0
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.1
+  checksum: 23aa7a840572d395220e173cb6263b0d028596e3950100520870a125af33ff819e6f609e1606d6f7d73bd9e7feb03bb404286e57a39063b5384c62b724d987b3
+  languageName: node
+  linkType: hard
+
 "ee-first@npm:1.1.1":
   version: 1.1.1
   resolution: "ee-first@npm:1.1.1"
@@ -3001,6 +3076,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^4.2.0, entities@npm:^4.3.0":
+  version: 4.4.0
+  resolution: "entities@npm:4.4.0"
+  checksum: 84d250329f4b56b40fa93ed067b194db21e8815e4eb9b59f43a086f0ecd342814f6bc483de8a77da5d64e0f626033192b1b4f1792232a7ea6b970ebe0f3187c2
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -3955,6 +4037,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-escaper@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "html-escaper@npm:3.0.3"
+  checksum: a2678be42c15d2ef6e629775dac0925a729f4615c6593db8358b9262c7565c4627134987c00f548eb4eb76cbc3b3392f78475cd02b022f8ae7aeb9a88280831b
+  languageName: node
+  linkType: hard
+
 "html-tags@npm:^3.2.0":
   version: 3.2.0
   resolution: "html-tags@npm:3.2.0"
@@ -3974,6 +4063,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"htmlparser2@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "htmlparser2@npm:8.0.1"
+  dependencies:
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.2
+    domutils: ^3.0.1
+    entities: ^4.3.0
+  checksum: 06d5c71e8313597722bc429ae2a7a8333d77bd3ab07ccb916628384b37332027b047f8619448d8f4a3312b6609c6ea3302a4e77435d859e9e686999e6699ca39
+  languageName: node
+  linkType: hard
+
 "http-cache-semantics@npm:^4.1.0":
   version: 4.1.1
   resolution: "http-cache-semantics@npm:4.1.1"
@@ -4701,6 +4802,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"linkedom@npm:^0.14.19":
+  version: 0.14.22
+  resolution: "linkedom@npm:0.14.22"
+  dependencies:
+    css-select: ^5.1.0
+    cssom: ^0.5.0
+    html-escaper: ^3.0.3
+    htmlparser2: ^8.0.1
+    uhyphen: ^0.1.0
+  checksum: 56024a50ac69e5a232a0679a52069dfd5cb211147f46b9fe30573464b02703bc88dc89a5362fa445b04c38d9d58029f307797ede5cb55a98c648869e5ce08e8b
+  languageName: node
+  linkType: hard
+
 "linkify-it@npm:^4.0.1":
   version: 4.0.1
   resolution: "linkify-it@npm:4.0.1"
@@ -5384,6 +5498,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nth-check@npm:^2.0.1":
+  version: 2.1.1
+  resolution: "nth-check@npm:2.1.1"
+  dependencies:
+    boolbase: ^1.0.0
+  checksum: 5afc3dafcd1573b08877ca8e6148c52abd565f1d06b1eb08caf982e3fa289a82f2cae697ffb55b5021e146d60443f1590a5d6b944844e944714a5b549675bcd3
+  languageName: node
+  linkType: hard
+
 "nunjucks@npm:^3.2.3":
   version: 3.2.3
   resolution: "nunjucks@npm:3.2.3"
@@ -5816,6 +5939,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prismjs@npm:^1.29.0":
+  version: 1.29.0
+  resolution: "prismjs@npm:1.29.0"
+  checksum: 007a8869d4456ff8049dc59404e32d5666a07d99c3b0e30a18bd3b7676dfa07d1daae9d0f407f20983865fd8da56de91d09cb08e6aa61f5bc420a27c0beeaf93
+  languageName: node
+  linkType: hard
+
 "promise-each@npm:^2.2.0":
   version: 2.2.0
   resolution: "promise-each@npm:2.2.0"
@@ -6307,6 +6437,7 @@ __metadata:
   resolution: "sass-site@workspace:."
   dependencies:
     "@11ty/eleventy": ^2.0.0
+    "@11ty/eleventy-plugin-syntaxhighlight": ^4.2.0
     "@babel/core": ^7.20.12
     "@babel/preset-env": ^7.20.2
     "@babel/preset-typescript": ^7.18.6
@@ -7180,6 +7311,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uhyphen@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "uhyphen@npm:0.1.0"
+  checksum: 1df304800387900f76365ff8090ee3667534a944184b9330cd96dbf4b1ad3fb0d376969f92f8b03decfc2e701f0d2eabeda7d002c909f2d125062e5e064d23ef
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"