diff --git a/src/Web/Code/code.view.php b/src/Web/Code/code.view.php
index f1ecc3b..e91e7d5 100644
--- a/src/Web/Code/code.view.php
+++ b/src/Web/Code/code.view.php
@@ -30,7 +30,7 @@
                     </p>
                     <textarea name="code" id="code" class="font-mono bg-(--code-background) p-4 border-(--ui-border-muted) border-2 rounded focus:outline-none w-full text-(--foreground)" rows="20" autofocus>{{ $code }}</textarea>
                     <div class="flex justify-end">
-                        <button type="submit" class="no-primary cursor-pointer rounded-md font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-4 py-2 gap-2 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
+                        <button type="submit" class="no-primary cursor-pointer rounded-md font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-4 py-2 gap-2 ring ring-inset ring-(--ui-border-accented) text-(--ui-text) bg-(--ui-bg-surface) hover:bg-(--ui-bg-surface-hover) disabled:bg-(--ui-bg-surface) aria-disabled:bg-(--ui-bg-surface) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
                           Submit
                         </button>
                     </div>
diff --git a/src/Web/Code/code_preview.view.php b/src/Web/Code/code_preview.view.php
index 22a1a2b..e567fad 100644
--- a/src/Web/Code/code_preview.view.php
+++ b/src/Web/Code/code_preview.view.php
@@ -19,7 +19,7 @@ class="bg-white hover:bg-tempest-blue-500 shadow-xl p-2 border-2 hover:border-wh
 
     <div class="top-0 left-0 absolute flex justify-center items-center w-full h-full">
         <div
-                class="bg-(--ui-bg) border-(--ui-border) rounded-md p-8 max-h-[75%] overflow-auto"
+                class="bg-(--ui-bg-surface) border-(--ui-border) rounded-md p-8 max-h-[75%] overflow-auto"
                 :class="implode([
                     $center ? 'text-center' : '',
                     ($clean || $blank) ?: 'border',
diff --git a/src/Web/Documentation/show.view.php b/src/Web/Documentation/show.view.php
index 709477f..dba47a5 100644
--- a/src/Web/Documentation/show.view.php
+++ b/src/Web/Documentation/show.view.php
@@ -47,7 +47,7 @@ class="
       <x-icon name="tabler:x" class="group-data-[sidebar-visible=false]:hidden size-6 -translate-x-px" />
     </button>
     <!-- Mobile sidebar -->
-    <div data-sidebar data-visible="false" class="xl:hidden data-[visible=false]:opacity-0 data-[visible=false]:scale-80 data-[visible=false]:pointer-events-none fixed inset-3 lg:max-h-[50vh] lg:right-3 lg:inset-auto lg:bottom-24 border border-(--ui-border) rounded-xl overflow-auto z-[9] bg-(--ui-bg) text-(--ui-text) p-8 starting:opacity-0 starting:scale-90 transition origin-bottom-right">
+    <div data-sidebar data-visible="false" class="xl:hidden data-[visible=false]:opacity-0 data-[visible=false]:scale-80 data-[visible=false]:pointer-events-none fixed inset-3 lg:max-h-[50vh] lg:right-3 lg:inset-auto lg:bottom-24 border border-(--ui-border) rounded-xl overflow-auto z-[9] bg-(--ui-bg-surface) text-(--ui-text) p-8 starting:opacity-0 starting:scale-90 transition origin-bottom-right">
       <div class="gap-x-2 grid grid-cols-1 min-[375px]:grid-cols-2 lg:grid-cols-1 text-sm sm:text-base">
         <!-- Menu -->
         <nav class="lg:hidden flex flex-col gap-y-8 overflow-hidden">
diff --git a/src/Web/Homepage/home.view.php b/src/Web/Homepage/home.view.php
index 5bcd70c..0a80612 100644
--- a/src/Web/Homepage/home.view.php
+++ b/src/Web/Homepage/home.view.php
@@ -23,7 +23,7 @@
             With zero configuration and zero boilerplate, Tempest gives you the architectural freedom to focus entirely on your business logic.
         </p>
         <div class="flex items-center gap-x-2 mt-6 md:mt-8 lg:mt-10 xl:mt-12 font-medium">
-          <a :href="uri([DocumentationController::class, 'index'])" class="bg-(--ui-bg-inverted) text-(--ui-bg) hover:bg-(--ui-bg-inverted)/90 rounded-xl px-5 py-2.5 gap-1.5 transition">
+          <a :href="uri([DocumentationController::class, 'index'])" class="bg-(--ui-bg-inverted) text-(--ui-bg-surface) hover:bg-(--ui-bg-inverted)/90 rounded-xl px-5 py-2.5 gap-1.5 transition">
             Get started
           </a>
           <button onclick="scrollToFeatures()" class="cursor-pointer hidden min-[401px]:flex text-(--ui-text) hover:bg-(--ui-info)/10 group rounded-xl px-4 py-2.5 items-center gap-x-2 transition">
diff --git a/src/Web/Homepage/x-home-section.view.php b/src/Web/Homepage/x-home-section.view.php
index e55fa97..be50c09 100644
--- a/src/Web/Homepage/x-home-section.view.php
+++ b/src/Web/Homepage/x-home-section.view.php
@@ -11,7 +11,7 @@
       </p>
       </div>
       <div class="mt-8">
-        <a :href="$linkUri" class="group no-primary rounded-lg font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3.5 py-2 gap-2.5 ring ring-inset ring-(--ui-border) text-(--ui-text) bg-(--ui-bg) hover:bg-(--ui-bg-elevated) disabled:bg-(--ui-bg) aria-disabled:bg-(--ui-bg) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
+        <a :href="$linkUri" class="group no-primary rounded-lg font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3.5 py-2 gap-2.5 ring ring-inset ring-(--ui-border) text-(--ui-text) bg-(--ui-bg-surface) hover:bg-(--ui-bg-surface-hover) disabled:bg-(--ui-bg-surface) aria-disabled:bg-(--ui-bg-surface) focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted)">
           <div class="relative flex justify-center items-center size-4.5">
             <x-icon :name="$icon" class="absolute inset-0 opacity-100 group-hover:opacity-0 size-full group-hover:scale-80 transition delay-100 group-hover:delay-0"/>
             <x-icon name="tabler:arrow-right" class="absolute inset-0 opacity-0 group-hover:opacity-100 size-full scale-20 group-hover:scale-100 transition -translate-x-1/2 group-hover:translate-x-0 delay-0 group-hover:delay-100"/>
diff --git a/src/Web/assets/highlighting.css b/src/Web/assets/highlighting.css
index 32b11ea..97ff827 100644
--- a/src/Web/assets/highlighting.css
+++ b/src/Web/assets/highlighting.css
@@ -1,5 +1,5 @@
 :root {
-	--code-border: var(--ui-border);
+	--code-border: var(--ui-border-accented);
 	--code-background: var(--ui-bg-elevated);
 	--code-foreground: var(--ui-text);
 	--code-keyword: #4f95d1;
@@ -9,9 +9,9 @@
 	--code-value: #515248;
 	--code-variable: #515248;
 	--code-comment: #888888;
-	--code-highlight: #22dddd33;
-	--code-addition: #00ff0022;
-	--code-deletion: #ff000011;
+	--code-highlight: #e8edf3;
+	--code-addition: #e6ffec;
+	--code-deletion: #ffebe9;
 	--code-gutter: #555555;
 	--code-gutter-addition: #34a853;
 	--code-gutter-deletion: #ea4334;
@@ -21,6 +21,8 @@
 	--code-passive: #dcfce7;
 	--code-complex-phrase: #f3e8ff;
 	--code-qualified: #f1f5f9;
+	--code-mark-a: #fdf0a8;
+	--code-mark-b: #f3ddf8;
 }
 
 .dark {
@@ -46,6 +48,8 @@
 	--code-passive: #b877db80;
 	--code-complex-phrase: #25b0bc33;
 	--code-qualified: #6c6f9333;
+	--code-mark-a: #ffff0033;
+	--code-mark-b: #ff00ff33;
 }
 
 .prose pre {
@@ -143,10 +147,10 @@
 }
 
 .hl-a {
-	background-color: #ffff0077;
+	background-color: var(--code-mark-a);
 }
 .hl-b {
-	background-color: #ff00ff33;
+	background-color: var(--code-mark-b);
 }
 
 .hl-addition {
diff --git a/src/Web/assets/main.entrypoint.css b/src/Web/assets/main.entrypoint.css
index 5487f3f..04f8887 100644
--- a/src/Web/assets/main.entrypoint.css
+++ b/src/Web/assets/main.entrypoint.css
@@ -66,29 +66,36 @@
 			--ui-header-height: --spacing(28);
 		}
 
-		--ui-primary: hsl(212.1, 87.8%, 64.5%);
+		/* Logo blue (#0071BC) */
+		--ui-primary: hsl(203.9, 100%, 36.9%);
 		--ui-secondary: var(--color-green-500);
 		--ui-success: var(--color-green-500);
 		--ui-info: var(--color-blue-500);
 		--ui-warning: var(--color-yellow-600);
 		--ui-error: var(--color-red-500);
 
-		--ui-text-dimmed: var(--color-slate-400);
-		--ui-text-muted: var(--color-slate-500);
-		--ui-text-toned: var(--color-slate-600);
-		--ui-text: var(--color-slate-700);
+		--ui-text-dimmed: var(--color-slate-500);
+		--ui-text-muted: var(--color-slate-600);
+		--ui-text-toned: var(--color-slate-700);
+		--ui-text: var(--color-slate-800);
 		--ui-text-highlighted: var(--color-slate-900);
 
-		--ui-bg: var(--color-white);
-		--ui-bg-muted: var(--color-slate-50);
-		--ui-bg-elevated: var(--color-neutral-50);
-		--ui-bg-accented: var(--color-neutral-200);
-		--ui-bg-inverted: var(--color-neutral-900);
+		--ui-bg: var(--color-slate-50);
+		--ui-bg-muted: var(--color-slate-100);
+		--ui-bg-elevated: var(--color-white);
+		--ui-bg-accented: var(--color-slate-200);
+		--ui-bg-inverted: var(--color-slate-900);
+
+		/* Interactive surfaces: sit above the ground, darken on hover */
+		--ui-bg-surface: var(--color-white);
+		--ui-bg-surface-hover: var(--color-slate-100);
 
 		--ui-border: var(--color-slate-200);
 		--ui-border-muted: var(--color-slate-200);
 		--ui-border-accented: var(--color-slate-300);
 		--ui-border-inverted: var(--color-slate-900);
+
+		--ui-shadow: 0 2px 12px rgb(15 23 42 / 0.08);
 	}
 
 	.dark {
@@ -111,11 +118,17 @@
 		--ui-bg-accented: var(--color-neutral-700);
 		--ui-bg-inverted: var(--color-white);
 
+		/* Interactive surfaces: sit on the ground, lighten on hover */
+		--ui-bg-surface: var(--color-neutral-950);
+		--ui-bg-surface-hover: var(--color-neutral-900);
+
 		--ui-border: var(--color-neutral-800);
 		--ui-border-muted: var(--color-neutral-700);
 		--ui-border-accented: var(--color-neutral-700);
 		--ui-border-inverted: var(--color-white);
 
+		--ui-shadow: 0 2px 12px rgb(0 0 0 / 0.4);
+
 		--color-ray-1: var(--color-pink-900);
 		--color-ray-2: var(--color-indigo-900);
 		--color-ray-3: var(--color-blue-900);
@@ -304,7 +317,7 @@ pre {
 		display: block;
 		clear:both;
 		padding: 1em 2ch;
-		box-shadow: 0 0 15px 5px var(--ui-border);
+		box-shadow: var(--ui-shadow);
 		overflow-x: auto;
 		line-height: 1.8em;
 	}
@@ -312,7 +325,7 @@ pre {
 
 .prose img {
 	border-radius: 3px;
-	box-shadow: 0 0 15px 5px var(--ui-border);
+	box-shadow: var(--ui-shadow);
 }
 
 .swatch {
diff --git a/src/Web/assets/typography.css b/src/Web/assets/typography.css
index 46fb66e..aca1f3d 100644
--- a/src/Web/assets/typography.css
+++ b/src/Web/assets/typography.css
@@ -28,17 +28,17 @@
 	}
 
 	div.warning {
-		@apply bg-(--ui-warning)/10 text-(--ui-warning) ring-(--ui-warning)/25
+		@apply bg-(--ui-warning)/10 border-l-4 border-(--ui-warning) ring-(--ui-warning)/25
 		[--tw-prose-links:var(--ui-warning)];
 	}
 
 	div.info {
-		@apply bg-(--ui-info)/5 text-(--ui-info) ring-(--ui-info)/25
+		@apply bg-(--ui-info)/5 border-l-4 border-(--ui-info) ring-(--ui-info)/25
 		[--tw-prose-links:var(--ui-info)];
 	}
 
 	div.success {
-		@apply bg-(--ui-success)/10 text-(--ui-success) ring-(--ui-success)/25
+		@apply bg-(--ui-success)/10 border-l-4 border-(--ui-success) ring-(--ui-success)/25
 		[--tw-prose-links:var(--ui-success)];
 	}
 
diff --git a/src/Web/x-header.view.php b/src/Web/x-header.view.php
index 056cb10..a3cd800 100644
--- a/src/Web/x-header.view.php
+++ b/src/Web/x-header.view.php
@@ -13,7 +13,7 @@
 <!-- Header -->
 <div class="relative inset-x-0 z-[1] h-(--ui-header-height)">
   <header
-      class="group transition-[top,border] z-[1] fixed top-4 data-[scrolling]:top-0 flex justify-center bg-[transparent] border-b border-transparent data-[scrolling]:border-(--ui-border) w-full duration-200 data-[scrolling]:backdrop-blur data-[scrolling]:bg-(--ui-bg)/75"
+      class="group transition-[top,border] z-[1] fixed top-4 data-[scrolling]:top-0 flex justify-center bg-[transparent] border-b border-transparent data-[scrolling]:border-(--ui-border) w-full duration-200 data-[scrolling]:backdrop-blur data-[scrolling]:bg-(--ui-bg-surface)/75"
       id="header"
   >
     <div class="grid grid-cols-[auto_1fr_auto] items-center gap-x-4 px-8 py-4 w-full 2xl:max-w-8xl lg:max-w-5xl xl:max-w-7xl">
@@ -27,7 +27,7 @@ class="group transition-[top,border] z-[1] fixed top-4 data-[scrolling]:top-0 fl
           <span class="hidden lg:inline font-medium">Tempest</span>
         </a>
 
-        <a class="hidden md:inline text-xs tracking-wide font-medium text-(--ui-text-muted) bg-(--ui-bg)/50 px-2 py-1 rounded-lg border border-(--ui-border)" href="https://github.com/tempestphp/tempest-framework/releases/{{ $latest_release }}">
+        <a class="hidden md:inline text-xs tracking-wide font-medium text-(--ui-text-muted) bg-(--ui-bg-surface)/50 px-2 py-1 rounded-lg border border-(--ui-border)" href="https://github.com/tempestphp/tempest-framework/releases/{{ $latest_release }}">
           {{ $this->latest_release }}
         </a>
       </div>
diff --git a/src/Web/x-search.view.php b/src/Web/x-search.view.php
index 6794c3b..6ff82e6 100644
--- a/src/Web/x-search.view.php
+++ b/src/Web/x-search.view.php
@@ -1,4 +1,4 @@
-<button toggle-palette class="hidden sm:flex items-center gap-2 min-w-0 cursor-pointer rounded-lg border border-(--ui-border) bg-(--ui-bg)/50 dark:bg-transparent px-3 py-1.5 text-sm text-(--ui-text-muted) hover:bg-(--ui-bg-elevated) hover:border-(--ui-border-accented) transition group-data-[scrolling]:border-transparent group-data-[scrolling]:bg-transparent group-data-[scrolling]:hover:bg-(--ui-bg-elevated)">
+<button toggle-palette class="hidden sm:flex items-center gap-2 min-w-0 cursor-pointer rounded-lg border border-(--ui-border) bg-(--ui-bg-surface)/50 dark:bg-transparent px-3 py-1.5 text-sm text-(--ui-text-muted) hover:bg-(--ui-bg-surface-hover) hover:border-(--ui-border-accented) transition group-data-[scrolling]:border-transparent group-data-[scrolling]:bg-transparent group-data-[scrolling]:hover:bg-(--ui-bg-surface-hover)">
     <label for="search" class="sr-only">Search</label>
     <x-icon name="tabler:search" class="size-4 shrink-0 text-(--ui-text-dimmed)"/>
     <span class="truncate">Search docs, blog...</span>