diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 9ba55fb..f79e83e 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -161,10 +161,10 @@ function SidebarLink({
 				to={to}
 				onClick={onClick}
 				className={clsx(
-					"block rounded px-3 py-1.5 text-sm transition",
+					"block rounded border-l-2 px-3 py-1.5 text-sm transition",
 					active
-						? "bg-[var(--color-accent)]/10 font-medium text-[var(--color-accent)]"
-						: "text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-tertiary)] hover:text-[var(--color-text-primary)]",
+						? "rounded-l-none border-[var(--color-accent)] bg-[var(--color-accent)]/10 font-medium text-[var(--color-accent)]"
+						: "border-transparent text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-tertiary)] hover:text-[var(--color-text-primary)]",
 				)}
 			>
 				{isNew ? (
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 5cc9047..befa4a0 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -7,10 +7,14 @@
 	--color-accent-hover: #9a3412;
 	--color-accent-light: #fff7ed;
 
-	/* Backgrounds */
+	/* Vivid accent tier: fills/glows only — fails AA for text, never use it for copy */
+	--color-accent-vivid: #ea580c;
+	--color-accent-glow: rgba(234, 88, 12, 0.25);
+
+	/* Backgrounds (warmed slightly so the orange reads hotter by contrast) */
 	--color-bg-primary: #ffffff;
-	--color-bg-secondary: #fafaf9;
-	--color-bg-tertiary: #f5f5f4;
+	--color-bg-secondary: #fbf9f6;
+	--color-bg-tertiary: #f6f3f0;
 	--color-bg-code: #1c1917;
 
 	/* Borders */
@@ -37,6 +41,18 @@ body {
 	min-height: 100vh;
 }
 
+/* In base layer so outline-none/focus:* utilities on custom-focus components still win */
+@layer base {
+	::selection {
+		background-color: #fed7aa;
+	}
+
+	:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+}
+
 /* Code syntax highlighting */
 .token.tag {
 	color: var(--color-syntax-tag);
diff --git a/apps/web/src/pages/Home.tsx b/apps/web/src/pages/Home.tsx
index d50a641..ec99512 100644
--- a/apps/web/src/pages/Home.tsx
+++ b/apps/web/src/pages/Home.tsx
@@ -23,7 +23,7 @@ export function Home() {
 				<div className="flex justify-center gap-4 mb-6">
 					<Link
 						to="/docs/"
-						className="rounded-lg bg-[var(--color-accent)] px-5 py-2.5 font-medium text-white transition hover:bg-[var(--color-accent-hover)] sm:px-6 sm:py-3"
+						className="rounded-lg bg-[var(--color-accent)] px-5 py-2.5 font-medium text-white shadow-[0_4px_14px_var(--color-accent-glow)] transition hover:bg-[var(--color-accent-hover)] hover:shadow-[0_6px_20px_var(--color-accent-glow)] sm:px-6 sm:py-3"
 					>
 						Browse Reference
 					</Link>