diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
index 7d97a529c4..dca52d6b22 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
@@ -53,6 +53,16 @@
 			left: 0;
 			top: var(--sk-nav-height);
 			overflow: hidden;
+
+			&::after {
+				content: '';
+				position: absolute;
+				right: 0;
+				top: 0;
+				width: 3px;
+				height: 100%;
+				background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.03));
+			}
 		}
 
 		.page {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 82099510aa..ca5cfac8bb 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -59,7 +59,7 @@
 
 			a {
 				display: block;
-				color: inherit;
+				color: var(--sk-text-3);
 				box-shadow: none; /* unfortunate hack to unset some other CSS */
 
 				/* Only show the title link if it's in the sidebar */
@@ -156,15 +156,8 @@
 					display: block;
 				}
 
-				a.active::before {
-					content: '';
-					position: absolute;
-					left: -2rem;
-					top: calc(50% - 0.6em);
-					height: 1em;
-					width: 1em;
-					background: url($lib/icons/arrow-left.svg);
-					background-size: contain;
+				a.active {
+					color: var(--sk-text-1);
 				}
 			}
 		}
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 2638b9619a..0728fb7707 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -21,7 +21,11 @@
 				<ul>
 					{#each section.children as { metadata, slug }}
 						<li>
-							<a class="page" class:active={`/${slug}` === $page.url.pathname} href="/{slug}">
+							<a
+								class="page"
+								aria-current={`/${slug}` === $page.url.pathname ? 'page' : undefined}
+								href="/{slug}"
+							>
 								{metadata.title}
 							</a>
 						</li>
@@ -77,6 +81,7 @@
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 		font-weight: 600;
+		color: var(--sk-text-2);
 	}
 
 	.page {
@@ -86,8 +91,8 @@
 		padding-bottom: 0.6em;
 	}
 
-	.active {
-		font-weight: 700;
+	[aria-current='page'] {
+		/* font-weight: 700; */
 		color: var(--sk-text-1);
 	}
 
@@ -121,7 +126,7 @@
 			background-color: var(--sk-back-4);
 		}
 
-		.active {
+		[aria-current='page'] {
 			background-color: hsla(var(--sk-theme-1-hsl), 0.1) !important;
 			color: var(--sk-theme-1) !important;
 			font-weight: 400;
@@ -144,7 +149,7 @@
 			overflow-y: auto;
 		}
 
-		.active::after {
+		[aria-current='page']::after {
 			--size: 1.8rem;
 			content: '';
 			position: absolute;
@@ -158,6 +163,7 @@
 			rotate: 45deg;
 			/** needed to synchronise with transition on `*` in `base.css` */
 			transition: background-color 0.5s var(--quint-out);
+			box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 617431fe42..009d932ae0 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -103,10 +103,10 @@ body {
 		--sk-theme-1-hsl: 12, 93%, 43%;
 		--sk-theme-2-hsl: 240, 8%, 44%;
 		--sk-theme-3-hsl: 204, 100%, 63%;
-		--sk-text-1: hsl(0, 0%, 13%);
-		--sk-text-2: hsl(0, 0%, 27%);
-		--sk-text-3: var(--sk-theme-2);
-		--sk-text-4: hsl(0, 0%, 65%);
+		--sk-text-1: hsla(0, 0%, 0%, 0.95);
+		--sk-text-2: hsla(0, 0%, 0%, 0.73);
+		--sk-text-3: hsla(0, 0%, 0%, 0.55);
+		--sk-text-4: hsla(0, 0%, 0%, 0.35);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);
 
@@ -165,10 +165,10 @@ body {
 		--sk-theme-1-hsl: 12, 93%, 43%;
 		--sk-theme-2-hsl: 240, 8%, 44%;
 		--sk-theme-3-hsl: 204, 100%, 63%;
-		--sk-text-1: hsl(0, 0%, 13%);
-		--sk-text-2: hsl(0, 0%, 27%);
-		--sk-text-3: var(--sk-theme-2);
-		--sk-text-4: hsl(0, 0%, 65%);
+		--sk-text-1: hsla(0, 0%, 0%, 0.95);
+		--sk-text-2: hsla(0, 0%, 0%, 0.73);
+		--sk-text-3: hsla(0, 0%, 0%, 0.55);
+		--sk-text-4: hsla(0, 0%, 0%, 0.35);
 		--sk-scrollbar: rgba(0, 0, 0, 0.3);
 		--sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);