diff --git a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
index 3d40548042..120b40e99c 100644
--- a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
+++ b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
@@ -16,7 +16,7 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
-		background-color: var(--sk-bg-2);
+		background-color: var(--sk-bg-1);
 		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 9d54af7af4..334672f692 100644
--- a/apps/svelte.dev/src/routes/+page.svelte
+++ b/apps/svelte.dev/src/routes/+page.svelte
@@ -46,7 +46,7 @@
 
 <style>
 	figcaption {
-		font: var(--sk-font-body-small);
+		font: var(--sk-font-ui-medium);
 	}
 
 	.home :global {
diff --git a/apps/svelte.dev/src/routes/_home/Community.svelte b/apps/svelte.dev/src/routes/_home/Community.svelte
index 9173ffee45..1b0382f79a 100644
--- a/apps/svelte.dev/src/routes/_home/Community.svelte
+++ b/apps/svelte.dev/src/routes/_home/Community.svelte
@@ -27,10 +27,10 @@
 	figcaption {
 		position: relative;
 		top: max(-2vw, calc(-0.02 * (120rem + 2 * var(--sk-page-padding-side))));
-		font: var(--sk-font-body-small);
+		font: var(--sk-font-ui-medium);
 		margin: 0 auto;
 		padding: 0 var(--sk-page-padding-side);
-		color: var(--sk-fg-4);
+		color: var(--sk-fg-3);
 		text-align: center;
 
 		a {
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index e66bb20a18..0252ceaa1d 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -129,7 +129,7 @@
 				top: 0;
 				font: var(--sk-font-ui-medium);
 				text-transform: uppercase;
-				color: var(--sk-fg-4);
+				color: var(--sk-fg-3);
 			}
 		}
 
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index e4813de625..cf580b0eaf 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -45,11 +45,6 @@
 				img {
 					max-width: 100%;
 				}
-
-				figcaption {
-					color: var(--sk-fg-4);
-					font: var(--sk-font-body-small);
-				}
 			}
 
 			video {
@@ -65,7 +60,7 @@
 				font: var(--sk-font-body-small);
 
 				p {
-					color: var(--sk-fg-4);
+					color: inherit;
 					font: inherit;
 				}
 			}
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
index 4c3eed50f3..2390db9e54 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
@@ -40,8 +40,12 @@
 	}
 
 	.toc-container {
-		background: var(--sk-bg-3);
+		background: var(--sk-bg-2);
 		display: none;
+
+		:root.dark & {
+			background: var(--sk-bg-0);
+		}
 	}
 
 	@media (min-width: 832px) {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 185131131a..75dba2fed2 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -74,7 +74,7 @@
 			}
 
 			a {
-				color: var(--sk-fg-3);
+				color: var(--sk-fg-2);
 			}
 		}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
index e3db87fee1..872b901123 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
@@ -191,7 +191,7 @@
 		height: 80%;
 		font: var(--sk-font-mono);
 		padding: 1rem;
-		border-top: 1px solid var(--sk-fg-4);
+		border-top: 1px solid var(--sk-border);
 		background: rgba(255, 255, 255, 0.5);
 		transform: translate(0, 100%);
 		-webkit-transform: translate3d(0, 100%, 0.01);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
index e341b94c8c..44e03789ae 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -76,7 +76,7 @@
 		font: var(--sk-font-mono);
 		padding: 1rem;
 		background: var(--sk-bg-1);
-		border-top: 1px solid var(--sk-fg-4);
+		border-top: 1px solid var(--sk-border);
 		transform: translate(0, 100%);
 		-webkit-transform: translate3d(0, 100%, 0.01);
 		transition: transform 0.3s;
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index fa41bbb873..b67f20f4dd 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -27,12 +27,14 @@
 	<!-- svelte-ignore a11y_label_has_associated_control (TODO this warning should probably be disabled if there's a component)-->
 	<label class="option">
 		<span class="key">dev:</span>
-		<Checkbox
-			checked={workspace.compiler_options.dev!}
-			onchange={(dev) => {
-				workspace.update_compiler_options({ dev });
-			}}
-		/>
+		<span style="font-size: 1.2rem">
+			<Checkbox
+				checked={workspace.compiler_options.dev!}
+				onchange={(dev) => {
+					workspace.update_compiler_options({ dev });
+				}}
+			/>
+		</span>
 		<span class="boolean">{workspace.compiler_options.dev}</span>
 	</label>
 	});
@@ -94,31 +96,27 @@
 
 	input[type='radio'] + label:before {
 		content: '';
-		background: #eee;
 		display: block;
 		box-sizing: border-box;
 		float: left;
-		width: 15px;
-		height: 15px;
+		width: 1.6rem;
+		height: 1.6rem;
 		margin-left: -21px;
 		margin-top: 4px;
 		/* vertical-align: top; */
 		cursor: pointer;
 		text-align: center;
-		transition: box-shadow 0.1s ease-out;
-	}
-
-	input[type='radio'] + label:before {
+		transition: box-shadow 0.05s ease-out;
 		background-color: var(--sk-fg-4);
 		border-radius: 100%;
-		box-shadow: inset 0 0 0 0.5em rgba(255, 255, 255, 0.95);
-		border: 1px solid var(--sk-fg-4);
+		box-shadow: inset 0 0 0 0.5em var(--sk-bg-2);
+		border: 1px solid var(--sk-border);
 	}
 
 	input[type='radio']:checked + label:before {
 		background-color: var(--sk-fg-accent);
-		box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.95);
-		border: 1px solid var(--sk-fg-4);
+		box-shadow: inset 0 0 0 0.15em var(--sk-bg-2);
+		border: 1px solid var(--sk-fg-accent);
 		transition: box-shadow 0.2s ease-out;
 	}
 </style>
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index e0112c14ba..e7e776214b 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -166,7 +166,6 @@
 <div class="container" class:embedded class:toggleable={$toggleable} bind:clientWidth={width}>
 	<div class="viewport" class:output={show_output}>
 		<SplitPane
-			--color="var(--sk-fg-4)"
 			id="main"
 			type={orientation === 'rows' ? 'vertical' : 'horizontal'}
 			pos="{mobile || fixed ? fixedPos : orientation === 'rows' ? 60 : 50}%"
diff --git a/packages/site-kit/src/lib/components/Checkbox.svelte b/packages/site-kit/src/lib/components/Checkbox.svelte
index 7822a26191..d2e61797ad 100644
--- a/packages/site-kit/src/lib/components/Checkbox.svelte
+++ b/packages/site-kit/src/lib/components/Checkbox.svelte
@@ -49,7 +49,7 @@
 		top: 2px;
 		left: 2px;
 		border-radius: 1em;
-		background: white;
+		background: var(--sk-bg-1);
 		box-shadow:
 			0 0px 1px rgba(0, 0, 0, 0.4),
 			0 4px 2px rgba(0, 0, 0, 0.1);
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 89f5f43cc8..350a39254c 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -512,14 +512,10 @@
 				display: flex;
 				align-items: center;
 				height: 3rem;
-				color: var(--sk-fg-4);
+				color: var(--sk-fg-3);
 				font: var(--sk-font-body-small);
 				user-select: none;
 
-				&:hover {
-					color: var(--sk-fg-3);
-				}
-
 				.legacy &::after {
 					position: absolute;
 					display: flex;
@@ -550,5 +546,10 @@
 				margin-bottom: 0;
 			}
 		}
+
+		figcaption {
+			font: var(--sk-font-ui-medium);
+			color: var(--sk-fg-3);
+		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 775935e4b1..86bd2dc2e2 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -58,7 +58,7 @@
 	nav {
 		top: 0;
 		left: 0;
-		color: var(--sk-fg-3);
+		color: var(--sk-fg-2);
 		position: relative;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 7446b16c1c..b83181934f 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -188,7 +188,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		height: var(--sk-nav-height);
 		margin: 0 auto;
 		padding: 0 var(--sk-page-padding-side);
-		background-color: var(--sk-bg-2);
+		background-color: var(--sk-bg-1);
 		font-family: var(--sk-font-family-body);
 		user-select: none;
 		isolation: isolate;
@@ -203,6 +203,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			height: 4px;
 			background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent);
 		}
+
+		:root.dark & {
+			background-color: var(--sk-bg-3);
+		}
 	}
 
 	a {
diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css
index 659ff74ec8..bfabccf0f3 100644
--- a/packages/site-kit/src/lib/styles/tokens/colours.css
+++ b/packages/site-kit/src/lib/styles/tokens/colours.css
@@ -9,17 +9,17 @@
 	color-scheme: light;
 
 	/* Foreground colours */
-	--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) and icons */
-	--sk-fg-4: hsl(0, 0%, 45%); /* faded text (disabled buttons, comments etc) */
+	--sk-fg-1: hsl(0, 0%, 8%); /* for headings, and (very sparingly) as a highlight colour */
+	--sk-fg-2: hsl(0, 0%, 15%); /* most text should be this colour */
+	--sk-fg-3: hsl(0, 0%, 40%); /* secondary text (e.g. figcaptions) and icons */
+	--sk-fg-4: hsl(0, 0%, 50%); /* faded text (disabled buttons, comments etc) */
 	--sk-fg-accent: hsl(12, 93%, 43%);
 
 	/* Background colours */
 	--sk-bg-1: hsl(0, 0%, 100%);
-	--sk-bg-2: hsl(0, 0%, 100%);
-	--sk-bg-3: hsl(0, 0%, 99%);
-	--sk-bg-4: hsl(0, 0%, 95%);
+	--sk-bg-2: hsl(0, 0%, 99.3%);
+	--sk-bg-3: hsl(0, 0%, 98.2%);
+	--sk-bg-4: hsl(0, 0%, 95%); /* hover states and highlights */
 	--sk-bg-accent: var(--sk-fg-accent);
 	--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
 
@@ -49,21 +49,22 @@
 	--sk-bg-hue: 220;
 
 	/* Foreground colours */
-	--sk-fg-1: hsl(var(--sk-bg-hue), 10%, 90%);
-	--sk-fg-2: hsl(var(--sk-bg-hue), 10%, 80%);
-	--sk-fg-3: hsl(var(--sk-bg-hue), 10%, 65%);
-	--sk-fg-4: hsl(var(--sk-bg-hue), 10%, 45%);
+	--sk-fg-1: hsl(var(--sk-bg-hue), 2%, 90%);
+	--sk-fg-2: hsl(var(--sk-bg-hue), 3%, 80%);
+	--sk-fg-3: hsl(var(--sk-bg-hue), 5%, 65%);
+	--sk-fg-4: hsl(var(--sk-bg-hue), 5%, 55%);
 	--sk-fg-accent: hsl(12, 94%, 62%);
 
 	/* Background colours */
-	--sk-bg-1: hsl(var(--sk-bg-hue), 15%, 8%);
-	--sk-bg-2: hsl(var(--sk-bg-hue), 15%, 15%);
-	--sk-bg-3: hsl(var(--sk-bg-hue), 15%, 12%);
-	--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 22%);
+	--sk-bg-0: hsl(var(--sk-bg-hue), 8%, 10%); /* docs sidebar (dark mode only) */
+	--sk-bg-1: hsl(var(--sk-bg-hue), 10%, 12%);
+	--sk-bg-2: hsl(var(--sk-bg-hue), 12%, 14%);
+	--sk-bg-3: hsl(var(--sk-bg-hue), 14%, 16%);
+	--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 21%);
 	--sk-bg-accent: hsl(15, 100%, 35%);
 
 	/* Border colour */
-	--sk-border: hsl(var(--sk-bg-hue), 15%, 25%);
+	--sk-border: hsl(var(--sk-bg-hue), 15%, 22%);
 
 	/* Syntax highlighting */
 	--shiki-color-text: hsl(45, 7%, 75%);
diff --git a/packages/site-kit/src/lib/styles/tokens/typography.css b/packages/site-kit/src/lib/styles/tokens/typography.css
index 8aac82de84..d276d5fc3b 100644
--- a/packages/site-kit/src/lib/styles/tokens/typography.css
+++ b/packages/site-kit/src/lib/styles/tokens/typography.css
@@ -25,7 +25,7 @@
 	--sk-font-h3: 500 var(--sk-font-size-h3) / 1.2 var(--sk-font-family-heading);
 	--sk-font-body: 400 var(--sk-font-size-body) / var(--sk-line-height-body)
 		var(--sk-font-family-body);
-	--sk-font-body-small: 400 var(--sk-font-size-body-small) / var(--sk-line-height-body)
+	--sk-font-body-small: 400 var(--sk-font-size-body-small) / var(--sk-line-height-body-small)
 		var(--sk-font-family-body);
 	--sk-font-ui-small: 400 var(--sk-font-size-ui-small) / 1.5 var(--sk-font-family-ui);
 	--sk-font-ui-medium: 400 var(--sk-font-size-ui-medium) / 1.5 var(--sk-font-family-ui);