diff --git a/docs/.vuepress/components/Generator.vue b/docs/.vuepress/components/Generator.vue
index fafcf9289..ac1e46edb 100644
--- a/docs/.vuepress/components/Generator.vue
+++ b/docs/.vuepress/components/Generator.vue
@@ -120,33 +120,10 @@ export default {
         font-size: 0.8rem;
     }
 
-    .executable {
-        @apply opacity-50 transition-opacity duration-200;
-
-        .generator:hover & {
-            @apply opacity-100;
-        }
-    }
-
     .make {
         @apply text-red;
     }
 
-    .component {
-        @apply opacity-50 transition-opacity duration-200 delay-100;
-
-        .generator:hover & {
-            @apply opacity-100;
-        }
-    }
-
-    .options {
-        @apply opacity-50 transition-opacity duration-200 delay-200;
-
-        .generator:hover & {
-            @apply opacity-100;
-        }
-    }
     .copy {
         @apply absolute top-0 right-0 mt-4 mr-4 uppercase tracking-widest text-xs;
     }
diff --git a/docs/.vuepress/theme/global-components/BrowserShot.vue b/docs/.vuepress/theme/global-components/BrowserShot.vue
index 3b68a7162..d0f460725 100644
--- a/docs/.vuepress/theme/global-components/BrowserShot.vue
+++ b/docs/.vuepress/theme/global-components/BrowserShot.vue
@@ -15,6 +15,7 @@
         </div>
         <div
           class="viewport"
+          ref="viewport"
           :class="{ 'limit-height': maxHeight }"
           :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null }">
           <div class="image">
@@ -150,6 +151,7 @@
 </style>
 
 <script>
+import { applyTabindexIfOverflowing } from '../util/apply-tabindex-if-overflowing';
 import { v4 as uuidv4 } from 'uuid';
 
 export default {
@@ -213,6 +215,17 @@ export default {
         .replace("http://", "")
         .replace(/\/$/, "");
     }
-  }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      applyTabindexIfOverflowing(this.$refs.viewport);
+
+      const img = this.$refs.viewport.querySelector('img');
+      if (img && !img.complete) {
+        img.addEventListener('load', () =>
+        applyTabindexIfOverflowing(this.$refs.viewport), { once: true });
+      }
+    });
+  },
 };
 </script>
diff --git a/docs/.vuepress/theme/global-components/InfoHud.vue b/docs/.vuepress/theme/global-components/InfoHud.vue
index 29906f2ca..7f68fc8b8 100644
--- a/docs/.vuepress/theme/global-components/InfoHud.vue
+++ b/docs/.vuepress/theme/global-components/InfoHud.vue
@@ -47,7 +47,7 @@ export default {
 }
 
 .info-hud .v-popover {
-  color: #b8c2cc;
+  color: var(--ui-component-color);
   display: inline-block;
   line-height: 0;
 
diff --git a/docs/.vuepress/theme/global-components/Term.vue b/docs/.vuepress/theme/global-components/Term.vue
index 764d310ac..4606d6012 100644
--- a/docs/.vuepress/theme/global-components/Term.vue
+++ b/docs/.vuepress/theme/global-components/Term.vue
@@ -46,7 +46,8 @@
 }
 
 .glossary-term-link {
-    text-decoration: none !important;
+    text-decoration: var(--link-underline-color) dotted underline !important;
+    font-weight: 500;
 }
 
 .glossary-term-heading {
diff --git a/docs/.vuepress/theme/styles/base.pcss b/docs/.vuepress/theme/styles/base.pcss
index 44d606aaf..61202c337 100644
--- a/docs/.vuepress/theme/styles/base.pcss
+++ b/docs/.vuepress/theme/styles/base.pcss
@@ -2,7 +2,7 @@
   --text-color: theme("colors.slate");
   --text-color-muted: #6D7480;
   --text-color-inverted: theme("colors.white");
-  --ui-component-color: #8491A4;
+  --ui-component-color: #7F8C9F;
   --bg-color: theme("colors.white");
   --sidebar-bg-color: theme("colors.softer");
   --search-bg-color: theme("colors.soft");
@@ -11,7 +11,7 @@
   --heading-color: theme("colors.slate");
   --link-color-default: theme("colors.blue.default");
   --code-link-color: theme("colors.blue.darker");
-  --link-underline-color: #5E8BF7;
+  --link-underline-color: var(--link-color-default);
   --sidebar-link-color: theme("colors.slate");
   --sidebar-active-link-color: theme("colors.blue.default");
   --hamburger-color: theme("colors.black");
@@ -30,6 +30,7 @@
   --black: theme("colors.black");
   --custom-focus-outline: 2px solid var(--link-color-default);
   --active-tab-border-color: (theme("colors.slate"));
+  --color-red: #C83D28;
 
   /* Custom button */
   --button-background-color: theme("colors.blue.default");
diff --git a/docs/.vuepress/theme/styles/color-mode.pcss b/docs/.vuepress/theme/styles/color-mode.pcss
index b3ca16832..96ecd1c39 100644
--- a/docs/.vuepress/theme/styles/color-mode.pcss
+++ b/docs/.vuepress/theme/styles/color-mode.pcss
@@ -22,6 +22,7 @@
     --code-bg-color: theme("colors.cinder");
     --custom-block-bg-color: theme("colors.slate");
     --custom-block-border-color: transparent;
+    --color-red: #D8503B;
 
     /* Links */
     --link-color-default: theme("colors.blue.lighter");
@@ -69,6 +70,7 @@
   --code-bg-color: theme("colors.cinder");
   --custom-block-bg-color: theme("colors.slate");
   --custom-block-border-color: transparent;
+  --color-red: #D8503B;
 
   /* Links */
   --link-color-default: theme("colors.blue.lighter");
diff --git a/docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js b/docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js
new file mode 100644
index 000000000..e3da1075c
--- /dev/null
+++ b/docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js
@@ -0,0 +1,8 @@
+export function applyTabindexIfOverflowing(el) {
+  if (!el) return;
+  const isOverflowing = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
+
+  if (isOverflowing) {
+    el.setAttribute('tabindex', '0');
+  }
+}
diff --git a/docs/.vuepress/theme/util/index.js b/docs/.vuepress/theme/util/index.js
index b09739a71..11d407ce9 100644
--- a/docs/.vuepress/theme/util/index.js
+++ b/docs/.vuepress/theme/util/index.js
@@ -1,3 +1,4 @@
+import { applyTabindexIfOverflowing } from "./apply-tabindex-if-overflowing";
 export const hashRE = /#.*$/;
 export const extRE = /\.(md|html)$/;
 export const endingSlashRE = /\/$/;
@@ -631,10 +632,10 @@ function getAnchorHash(path) {
  * allowing users to focus and scroll them using the keyboard.
  */
 export function makeOverflowingContainersFocusable() {
-  document.querySelectorAll('pre,.toggle-tip .wrapper,.viewport.limit-height').forEach(el => {
-    if (el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight) {
-      el.setAttribute('tabindex', '0');
-    }
+  const containers = document.querySelectorAll('pre,.toggle-tip .wrapper');
+
+  containers.forEach(el => {
+    applyTabindexIfOverflowing(el);
   });
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index d5f6acb18..670ed33b4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,7 +22,7 @@ module.exports = {
           "default": "#2963F5",
           "darker": "#1554F4",
         },
-        red: "#da5a47",
+        red: "var(--color-red)",
         cinder: "#131119",
         green: "#27AB83",
         "light-slate": "#66778A",