diff --git a/site/content/docs/00-introduction.md b/site/content/docs/00-introduction.md
index 4fc3f05..0148a9e 100644
--- a/site/content/docs/00-introduction.md
+++ b/site/content/docs/00-introduction.md
@@ -2,7 +2,9 @@
 title: Introduction
 ---
 
-*Note: Sapper is in early development, and some things may change before we hit version 1.*
+### Before we begin
+
+> Sapper is in early development, and some things may change before we hit version 1.0. This document is a work-in-progress. If you get stuck, reach out for help in the [Discord chatroom](https://discord.gg/yy75DKs).
 
 ### What is Sapper?
 
@@ -29,7 +31,7 @@ For web developers, the stakes are generally lower than for combat engineers. Bu
 
 * Sapper is powered by Svelte instead of React, so it's faster and your apps are smaller
 * Instead of route masking, we encode route parameters in filenames (see the [routing](guide#routing) section below)
-* As well as *pages*, you can create *server routes* in your `src/routes` directory. This makes it very easy to, for example, add a JSON API such as the one powering this very page (try visiting [/guide.json](/guide.json))
+* As well as *pages*, you can create *server routes* in your `src/routes` directory. This makes it very easy to, for example, add a JSON API such as the one powering this very page (try visiting [/docs.json](/docs.json))
 * Links are just `<a>` elements, rather than framework-specific `<Link>` components. That means, for example, that [this link right here](/), despite being inside a blob of markdown, works with the router as you'd expect
 
 
diff --git a/site/src/routes/_layout.svelte b/site/src/routes/_layout.svelte
index e5768a8..98f9286 100644
--- a/site/src/routes/_layout.svelte
+++ b/site/src/routes/_layout.svelte
@@ -6,20 +6,23 @@
 </script>
 
 <style>
+	:global(html) {
+		--prime: rgb(21, 151, 148) !important; /* TODO remove .theme-default from shared, so we don't need !important */
+	}
+
 	main {
 		position: relative;
 		margin: 0 auto;
 		/* padding: var(--nav-h) var(--side-nav) 0 var(--side-nav); */
 		padding: var(--nav-h) 0 0 0;
 		overflow-x: hidden;
-		--prime: rgb(21, 151, 148);
 	}
 </style>
 
 <Icons/>
 
 <Nav {segment} {page} logo="sapper-logo-horizontal.svg">
-	<NavItem segment="guide">Guide</NavItem>
+	<NavItem segment="docs">Docs</NavItem>
 
 	<NavItem external="https://svelte.dev">Svelte</NavItem>
 
diff --git a/site/src/routes/docs/index.svelte b/site/src/routes/docs/index.svelte
index 255bfa4..0f4be18 100644
--- a/site/src/routes/docs/index.svelte
+++ b/site/src/routes/docs/index.svelte
@@ -319,18 +319,19 @@
 	}
 
 	section > :global(.code-block) > :global(pre) {
-		display: inline-block;
-		background: var(--back-api);
+		/* display: inline-block; */
+		/* background: var(--back-api);
 		color: white;
 		padding: .3rem .8rem;
-		margin: 0;
+		margin: 0; */
 		max-width: 100%;
+		width: var(--linemax);
 	}
 
-	section > :global(.code-block)> :global(pre.language-markup) {
+	/* section > :global(.code-block)> :global(pre.language-markup) {
 		padding: .3rem .8rem .2rem;
 		background: var(--back-api);
-	}
+	} */
 
 	section > :global(p) {
 		max-width: var(--linemax)
diff --git a/site/src/template.html b/site/src/template.html
index 4030010..2f02313 100644
--- a/site/src/template.html
+++ b/site/src/template.html
@@ -21,6 +21,20 @@
 	     lazily loaded when it precaches secondary pages -->
 	%sapper.styles%
 
+	<style>
+		.hljs, .hljs-subst { color: #333; }
+		.hljs-comment { color: #999; }
+		.hljs-tag { color: #170; }
+		.hljs-keyword { color: #708; }
+		.hljs-attr { color: #333; }
+		.hljs-number { color: #164; }
+		.hljs-type, .hljs-string, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion { color: rgb(16,94,16); }
+		.hljs-title, .hljs-section { color: rgb(16,94,16); }
+		.hljs-literal { color: #170; }
+		.hljs-meta { color: #555; }
+		.hljs-meta-string { color: #555; }
+	</style>
+
 	<!-- This contains the contents of the <svelte:head> component, if
 	     the current page has one -->
 	%sapper.head%