diff --git a/docs/ensnode.io/src/components/molecules/HostedEnsNodeInstance.astro b/docs/ensnode.io/src/components/molecules/HostedEnsNodeInstance.astro
index 17a286887..d7755f133 100644
--- a/docs/ensnode.io/src/components/molecules/HostedEnsNodeInstance.astro
+++ b/docs/ensnode.io/src/components/molecules/HostedEnsNodeInstance.astro
@@ -14,7 +14,7 @@ const hostedEnsNodeVersion = ACTIVE_OMNIGRAPH_VERSION;
         style={{ marginTop: "20px" }}
         class="flex flex-col xl:flex-row justify-start xl:items-center gap-4">
         <a
-          class="sl-markdown-content underline underline-offset-4 hover:underline-offset-2 hover:text-[var(--sl-color-accent-high)] transition-all duration-200"
+          class="sl-markdown-content underline underline-offset-4 hover:underline-offset-2 transition-[text-underline-offset] duration-200"
           href={instanceURL}>{instanceURL}</a
         >
         <a
diff --git a/docs/ensnode.io/src/components/organisms/OmnigraphStaticExampleSet.astro b/docs/ensnode.io/src/components/organisms/OmnigraphStaticExampleSet.astro
index 0084023b3..adfbbacc5 100644
--- a/docs/ensnode.io/src/components/organisms/OmnigraphStaticExampleSet.astro
+++ b/docs/ensnode.io/src/components/organisms/OmnigraphStaticExampleSet.astro
@@ -126,11 +126,8 @@ const data = resolveOmnigraphStaticExample(id);
     <a
       class="group w-fit flex flex-row justify-start items-center gap-2"
       href="/docs/integrate/omnigraph/examples">
-      <Icon
-        name="left-arrow"
-        class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-white)] transition-colors duration-200"
-      />
-      <p class="not-content m-0 underline underline-offset-4 group-hover:underline-offset-2 transition-all duration-200">
+      <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)]" />
+      <p class="not-content m-0 underline underline-offset-4 group-hover:underline-offset-2 transition-[text-underline-offset] duration-200">
         Back to Examples{" "}
       </p>
     </a>
diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx
index ef60fd4d9..57282fc1d 100644
--- a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx
+++ b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx
@@ -28,11 +28,8 @@ The embedded StackBlitz editor runs entirely in your browser. Downloading and in
   class="group w-fit flex flex-row justify-start items-center gap-2 mt-4"
   href="/docs/integrate/integration-options/enskit"
 >
-  <Icon
-    name="left-arrow"
-    class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-accent-high)] transition-colors duration-200"
-  />
-  <div class="not-content m-0 underline underline-offset-4 group-hover:underline-offset-2 group-hover:text-[var(--sl-color-accent-high)] transition-all duration-200">
+  <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)]" />
+  <div class="not-content m-0 underline underline-offset-4 group-hover:underline-offset-2 transition-[text-underline-offset] duration-200">
     Back to enskit overview
   </div>
 </a>
diff --git a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx
index f8532f98d..c9bea05d6 100644
--- a/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx
+++ b/docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx
@@ -30,11 +30,8 @@ You can edit the script and re-execute **`npm start`** in the terminal to run it
   class="group w-fit flex flex-row justify-start items-center gap-2 mt-4"
   href="/docs/integrate/integration-options/enssdk"
 >
-  <Icon
-    name="left-arrow"
-    class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-accent-high)] transition-colors duration-200"
-  />
-  <div class="not-content m-0 underline underline-offset-4 group-hover:underline-offset-2 group-hover:text-[var(--sl-color-accent-high)] transition-all duration-200">
+  <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)]" />
+  <div class="not-content m-0 underline underline-offset-4 group-hover:underline-offset-2 transition-[text-underline-offset] duration-200">
     Back to enssdk overview
   </div>
 </a>
diff --git a/docs/ensnode.io/src/styles/starlight.css b/docs/ensnode.io/src/styles/starlight.css
index 066993e2d..6fb73dd9d 100644
--- a/docs/ensnode.io/src/styles/starlight.css
+++ b/docs/ensnode.io/src/styles/starlight.css
@@ -211,8 +211,12 @@ a[rel="prev"]:hover {
   color: var(--sl-color-white);
 }
 
+/* Override Starlight's default markdown link hover (which switches to
+   --sl-color-white): keep links their base color on hover so only the
+   underline-offset animates. */
+.sl-markdown-content a:hover:not(:where(.not-content *)),
 .sl-markdown-content a:hover:not(:where(.not-content *)) > span {
-  color: var(--sl-color-accent);
+  color: var(--sl-color-text-accent);
 }
 
 .sl-markdown-content > p a:not(:has(code), [role="tab"]),
@@ -221,19 +225,27 @@ a[rel="prev"]:hover {
   text-decoration: underline;
   text-underline-offset: 4px;
 
-  transition:
-    color 0.2s ease-in-out,
-    text-underline-offset 0.2s ease-in-out;
+  transition: text-underline-offset 0.2s ease-in-out;
+
+  &:hover {
+    text-underline-offset: 2px;
+  }
+}
+
+.sl-markdown-content > p a:has(code):not([role="tab"]),
+.sl-markdown-content :is(ul, ol) > li a:has(code):not([role="tab"]) {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+
+  transition: text-underline-offset 0.2s ease-in-out;
 
   &:hover {
     text-underline-offset: 2px;
   }
 }
 
-.sl-markdown-content > p a:not([role="tab"]):hover,
-.sl-markdown-content :is(ul, ol) > li a:not([role="tab"]):hover,
 starlight-toc a:hover {
-  color: var(--sl-color-accent-high);
+  color: var(--sl-color-text-accent);
 }
 
 .sl-markdown-content :is(h1, h2, h3, h4, h5, h6) > a {