diff --git a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
index d02448382c..90508a1c94 100644
--- a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
+++ b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
@@ -17,7 +17,7 @@
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
 		background-color: var(--sk-bg-2);
-		color: var(--sk-fg-1);
+		color: var(--sk-fg-2);
 		white-space: nowrap;
 		flex: 0;
 		gap: 1rem;
diff --git a/apps/svelte.dev/src/routes/+page.svelte b/apps/svelte.dev/src/routes/+page.svelte
index ef2cb2cf01..9d54af7af4 100644
--- a/apps/svelte.dev/src/routes/+page.svelte
+++ b/apps/svelte.dev/src/routes/+page.svelte
@@ -1,5 +1,4 @@
 <script>
-	import { Footer } from '@sveltejs/site-kit/home';
 	import { Section } from '@sveltejs/site-kit/components';
 	import Hero from './_home/Hero.svelte';
 	import Supporters from './_home/Supporters/index.svelte';
@@ -7,6 +6,7 @@
 	import Companies from './_home/Companies.svelte';
 	import Video from './_home/Video.svelte';
 	import Community from './_home/Community.svelte';
+	import Footer from './_home/Footer.svelte';
 </script>
 
 <svelte:head>
diff --git a/packages/site-kit/src/lib/home/Footer.svelte b/apps/svelte.dev/src/routes/_home/Footer.svelte
similarity index 83%
rename from packages/site-kit/src/lib/home/Footer.svelte
rename to apps/svelte.dev/src/routes/_home/Footer.svelte
index 4033e5c52d..dccbd88faf 100644
--- a/packages/site-kit/src/lib/home/Footer.svelte
+++ b/apps/svelte.dev/src/routes/_home/Footer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Section from '../components/Section.svelte';
+	import { Section } from '@sveltejs/site-kit/components';
 </script>
 
 <Section>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
index 5934e7475d..36d97566a0 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
@@ -77,7 +77,7 @@
 		border: 1px solid var(--sk-border);
 		/* TODO this should apply to all buttons/inputs? */
 		border-radius: var(--sk-border-radius);
-		color: var(--sk-fg-1);
+		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 		height: 3.2rem;
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
index 3f5d9888e1..c883dcb501 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -97,9 +97,4 @@
 		padding: 0 1rem;
 		font: var(--sk-font-ui-small);
 	}
-
-	option:disabled {
-		color: var(--sk-fg-1);
-		font-weight: bold;
-	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
index e1cd06bca7..b468b09dff 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -141,7 +141,7 @@
 
 	input {
 		background: var(--sk-bg-1);
-		color: var(--sk-fg-1) !important;
+		color: var(--sk-fg-2) !important;
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
 		border: 2px solid transparent;
 		padding: 0 0.5rem;
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index 372964e783..219e2027ce 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -110,12 +110,12 @@
 	}
 
 	.cm-tooltip.cm-tooltip-autocomplete {
-		color: var(--sk-fg-2) !important;
+		color: var(--sk-fg-3) !important;
 		perspective: 1px;
 
 		& > ul > li[aria-selected] {
 			background-color: var(--sk-bg-4);
-			color: var(--sk-fg-1) !important;
+			color: var(--sk-fg-2) !important;
 		}
 
 		& > ul {
@@ -126,7 +126,7 @@
 	.cm-panels {
 		font: var(--sk-font-ui-small);
 		background: var(--sk-bg-2);
-		color: var(--sk-fg-1);
+		color: var(--sk-fg-2);
 
 		&.cm-panels-top,
 		&.cm-panels-bottom {
@@ -178,7 +178,7 @@
 			.cm-textfield {
 				font: inherit;
 				background: inherit;
-				color: var(--sk-fg-1);
+				color: inherit;
 				border: 1px solid var(--sk-border);
 				border-radius: var(--sk-border-radius);
 				margin: 0;
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 27c2ed7014..e9768528be 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -87,10 +87,10 @@
 	{#if workspace.current.name.endsWith('.md')}
 		<button class="active">Markdown</button>
 	{:else}
-		<button class:active={view === 'result'} onclick={() => (view = 'result')}>Result</button>
-		<button class:active={view === 'js'} onclick={() => (view = 'js')}>JS output</button>
-		<button class:active={view === 'css'} onclick={() => (view = 'css')}>CSS output</button>
-		<button class:active={view === 'ast'} onclick={() => (view = 'ast')}>AST output</button>
+		<button aria-current={view === 'result'} onclick={() => (view = 'result')}>Result</button>
+		<button aria-current={view === 'js'} onclick={() => (view = 'js')}>JS output</button>
+		<button aria-current={view === 'css'} onclick={() => (view = 'css')}>CSS output</button>
+		<button aria-current={view === 'ast'} onclick={() => (view = 'ast')}>AST output</button>
 	{/if}
 </div>
 
@@ -170,13 +170,12 @@
 		border: none;
 		border-bottom: 1px solid transparent;
 		padding: 0 1rem;
-		color: var(--sk-fg-2, #999);
+		color: var(--sk-fg-2);
 		border-radius: 0;
-	}
 
-	button.active {
-		border-bottom: 1px solid var(--sk-fg-accent, --prime);
-		color: var(--sk-fg-1, #333);
+		&[aria-current='true'] {
+			border-bottom: 1px solid var(--sk-fg-accent);
+		}
 	}
 
 	div[slot] {
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index 210a47de6f..4a52e836e0 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -60,7 +60,7 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: 0 0.5em;
+		padding: 0.5rem 0.5rem 0.5rem 1rem;
 		cursor: pointer;
 	}
 
@@ -71,7 +71,7 @@
 	.panel-heading {
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
-		color: var(--sk-fg-1);
+		color: var(--sk-fg-2);
 		flex: 1;
 		text-align: left;
 	}
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 6659ba496c..69036ebfe9 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -301,7 +301,7 @@
 			</div>
 
 			<div slot="panel-header">
-				<button on:click|stopPropagation={clear_logs}>
+				<button class="raised" disabled={logs.length === 0} on:click|stopPropagation={clear_logs}>
 					{#if logs.length > 0}
 						({logs.length})
 					{/if}
@@ -347,14 +347,16 @@
 		opacity: 0.25;
 	}
 
+	/* TODO this stuff should live in global styles */
 	button {
 		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
 		display: block;
+		padding: 0.3rem 0.8rem;
 
-		&:hover {
-			color: var(--sk-fg-1);
+		&:disabled {
+			color: var(--sk-fg-4);
 		}
 	}
 
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index f101cc0a24..e1906aed66 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -84,10 +84,6 @@
 			"default": "./src/lib/components/index.ts",
 			"svelte": "./src/lib/components/index.ts"
 		},
-		"./home": {
-			"default": "./src/lib/home/index.ts",
-			"svelte": "./src/lib/home/index.ts"
-		},
 		"./docs": {
 			"default": "./src/lib/docs/index.ts",
 			"svelte": "./src/lib/docs/index.ts"
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index d75e61a900..cbd6ffda91 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -417,7 +417,6 @@
 		}
 
 		blockquote {
-			color: var(--sk-fg-1);
 			padding: 0 0 0 4.5rem;
 
 			&.note,
diff --git a/packages/site-kit/src/lib/home/Blurb.svelte b/packages/site-kit/src/lib/home/Blurb.svelte
deleted file mode 100644
index 15b2830264..0000000000
--- a/packages/site-kit/src/lib/home/Blurb.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-	import Section from '../components/Section.svelte';
-	import type { Snippet } from 'svelte';
-
-	let { one, two, three }: { one?: Snippet; two?: Snippet; three?: Snippet } = $props();
-</script>
-
-<Section>
-	<div class="grid">
-		{#if one}
-			<div>
-				{@render one()}
-			</div>
-		{/if}
-
-		{#if two}
-			<div>
-				{@render two()}
-			</div>
-		{/if}
-
-		{#if three}
-			<div>
-				{@render three()}
-			</div>
-		{/if}
-	</div>
-</Section>
-
-<style>
-	.grid {
-		--columns: 1;
-
-		display: grid;
-		grid-template-columns: repeat(var(--columns), 1fr);
-		grid-gap: 1rem;
-	}
-
-	.grid {
-		display: grid;
-		gap: 1em;
-		margin: 0 0 4rem 0;
-	}
-
-	.grid:last-child {
-		margin-bottom: 0;
-	}
-
-	@media (min-width: 900px) {
-		.grid {
-			--columns: 3;
-
-			gap: 7rem;
-		}
-	}
-</style>
diff --git a/packages/site-kit/src/lib/home/TrySection.svelte b/packages/site-kit/src/lib/home/TrySection.svelte
deleted file mode 100644
index 4523cb1787..0000000000
--- a/packages/site-kit/src/lib/home/TrySection.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts">
-	import Section from '../components/Section.svelte';
-	import TryTerminal from './TryTerminal.svelte';
-	import type { Snippet } from 'svelte';
-
-	let { content_heading, content }: { content_heading?: Snippet; content?: Snippet } = $props();
-</script>
-
-<Section>
-	<div class="grid" style="--columns: 2">
-		<div class="copy">
-			<h2>
-				{#if content_heading}{@render content_heading()}{:else}see for yourself{/if}
-			</h2>
-			<div>
-				{#if content}{@render content()}{:else}
-					Try it locally, <a target="_blank" rel="noreferrer" href="https://sveltekit.new"
-						>on StackBlitz</a
-					>, or with
-					<a target="_blank" href="https://svelte.dev/tutorial">the interactive tutorial</a>.
-				{/if}
-			</div>
-		</div>
-
-		<div class="try">
-			<TryTerminal />
-		</div>
-	</div>
-</Section>
-
-<style>
-	.grid {
-		display: grid;
-		gap: 2em;
-		margin: 0 0 4rem 0;
-	}
-
-	.grid:last-child {
-		margin-bottom: 0;
-	}
-
-	.try {
-		width: 100%;
-		margin: 0 auto;
-		color: var(--sk-fg-1);
-	}
-
-	.copy {
-		text-align: left;
-		font: var(--sk-font-body);
-	}
-
-	h2 {
-		display: inline-block;
-		margin: 0 0 1rem;
-	}
-
-	@media (min-width: 900px) {
-		.grid {
-			grid-template-columns: repeat(var(--columns), 1fr);
-			gap: 7rem;
-		}
-
-		.copy {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			order: 2;
-		}
-
-		.copy div {
-			max-width: 15em;
-			text-align: center;
-		}
-	}
-</style>
diff --git a/packages/site-kit/src/lib/home/TryTerminal.svelte b/packages/site-kit/src/lib/home/TryTerminal.svelte
deleted file mode 100644
index 9cd4dc37c0..0000000000
--- a/packages/site-kit/src/lib/home/TryTerminal.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<div class="terminal">
-	<div class="chrome">
-		<span class="dot"></span>
-		<span class="dot"></span>
-		<span class="dot"></span>
-		<span class="title">terminal</span>
-	</div>
-	<pre><code
-			><span class="line">npx <span class="orange-highlight">sv</span> create my-app</span>
-<span class="line">cd my-app</span>
-<span class="line">npm install</span>
-<span class="line">npm run dev -- --open</span></code
-		></pre>
-</div>
-
-<style>
-	.terminal {
-		background: #212121;
-		margin: 0;
-		border-radius: var(--sk-border-radius);
-		overflow: hidden;
-	}
-
-	.terminal .chrome {
-		position: relative;
-		background: hsl(0, 0%, 10%);
-		color: #999;
-		display: flex;
-		align-items: center;
-		font-size: 1.8rem;
-		padding: 1rem;
-		gap: 1rem;
-		border-bottom: 1px #29252a solid;
-	}
-
-	.terminal .dot {
-		width: 1rem;
-		height: 1rem;
-		border-radius: 50%;
-		background-color: #999;
-	}
-
-	.title {
-		position: absolute;
-		display: flex;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		padding-top: 0.4rem;
-		align-items: center;
-		justify-content: center;
-		font-family: var(--sk-font-family-ui);
-	}
-
-	.terminal pre {
-		font: var(--sk-font-mono);
-		padding: 1em;
-	}
-
-	.line::before {
-		content: '$ ';
-		opacity: 0.3;
-	}
-
-	pre code {
-		color: white;
-		font-size: 1em;
-	}
-
-	.orange-highlight {
-		color: hsl(15, 100%, 65%);
-	}
-</style>
diff --git a/packages/site-kit/src/lib/home/index.ts b/packages/site-kit/src/lib/home/index.ts
deleted file mode 100644
index 33980d7923..0000000000
--- a/packages/site-kit/src/lib/home/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Blurb } from './Blurb.svelte';
-export { default as Footer } from './Footer.svelte';
-export { default as TrySection } from './TrySection.svelte';
diff --git a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
index 24ccad0d22..49b98b06c2 100644
--- a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
@@ -94,7 +94,6 @@
 		padding-bottom: 0.8rem;
 		font: var(--sk-font-ui-medium);
 		text-transform: uppercase;
-		color: var(--sk-fg-1);
 	}
 
 	h2 {
diff --git a/packages/site-kit/src/lib/nav/SkipLink.svelte b/packages/site-kit/src/lib/nav/SkipLink.svelte
index 50cffe2390..548786cb38 100644
--- a/packages/site-kit/src/lib/nav/SkipLink.svelte
+++ b/packages/site-kit/src/lib/nav/SkipLink.svelte
@@ -13,14 +13,17 @@ Accessibility helper component to skip to the main content
 
 <style>
 	a {
+		display: flex;
+		align-items: center;
 		background: var(--sk-bg-1);
 		color: var(--sk-fg-2);
-		border: 2px solid var(--sk-fg-1);
-		padding: 8px;
+		height: calc(var(--sk-nav-height) - 2rem);
+		padding: 0 1rem;
 		position: absolute;
-		inset-block-start: 0;
-		inset-inline-start: 0;
+		inset-block-start: 1rem;
+		inset-inline-start: 1rem;
 		transform: translateY(-999px);
+		font: var(--sk-font-ui-medium);
 		z-index: 1000; /* 1 more than the banner z-index */
 	}
 
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 66d8c45ce6..6bc79f6182 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -189,7 +189,6 @@
 			width: calc(100% + 1rem);
 			left: -0.5rem;
 			overflow: hidden;
-			color: var(--sk-fg-1);
 
 			&::before,
 			&::after {
@@ -227,7 +226,6 @@
 		:global(mark) {
 			--highlight-color: rgba(255, 255, 0, 0.4);
 			background: none;
-			color: var(--sk-fg-1);
 			background: var(--highlight-color);
 			outline: 2px solid var(--highlight-color);
 		}
diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css
index ae6f6566b9..fae3e3ad27 100644
--- a/packages/site-kit/src/lib/styles/tokens/colours.css
+++ b/packages/site-kit/src/lib/styles/tokens/colours.css
@@ -9,10 +9,10 @@
 	color-scheme: light;
 
 	/* Foreground colours */
-	--sk-fg-1: hsl(0, 0%, 5%);
-	--sk-fg-2: hsl(0, 0%, 12%);
-	--sk-fg-3: hsl(0, 0%, 27%);
-	--sk-fg-4: hsl(0, 0%, 45%);
+	--sk-fg-1: hsl(0, 0%, 5%); /* for headings, and (very sparingly) as a highlight colour */
+	--sk-fg-2: hsl(0, 0%, 12%); /* most text should be this colour */
+	--sk-fg-3: hsl(0, 0%, 27%); /* secondary text (e.g. figcaptions) */
+	--sk-fg-4: hsl(0, 0%, 45%); /* faded text (disabled buttons, comments etc) */
 	--sk-fg-accent: hsl(12, 93%, 43%);
 
 	/* Background colours */