diff --git a/apps/svelte.dev/src/lib/components/Modal.svelte b/apps/svelte.dev/src/lib/components/Modal.svelte
index 26e814a0e5..454db1b961 100644
--- a/apps/svelte.dev/src/lib/components/Modal.svelte
+++ b/apps/svelte.dev/src/lib/components/Modal.svelte
@@ -66,8 +66,8 @@
 		transform: translate(-50%, -50%);
 		width: calc(100vw - 2rem);
 		max-width: 56rem;
-		background: var(--sk-back-2);
-		color: var(--sk-text-2);
+		background: var(--sk-bg-2);
+		color: var(--sk-fg-2);
 		padding: 2rem;
 		border: none;
 		border-radius: 0.5rem;
diff --git a/apps/svelte.dev/src/lib/components/PageControls.svelte b/apps/svelte.dev/src/lib/components/PageControls.svelte
index 0641cd8f51..41b946926f 100644
--- a/apps/svelte.dev/src/lib/components/PageControls.svelte
+++ b/apps/svelte.dev/src/lib/components/PageControls.svelte
@@ -61,7 +61,7 @@
 
 	.controls {
 		max-width: calc(var(--sk-page-content-width) + 1rem);
-		border-top: 1px solid var(--sk-back-4);
+		border-top: 1px solid var(--sk-border-medium);
 		padding: 1rem 0 0 0;
 		margin: 1rem 0 0 0;
 		text-wrap: balance;
@@ -83,7 +83,7 @@
 		span {
 			font: var(--sk-font-ui-medium);
 			text-transform: uppercase;
-			color: var(--sk-text-3);
+			color: var(--sk-fg-3);
 
 			&.faded {
 				opacity: 0.4;
diff --git a/apps/svelte.dev/src/lib/components/PreloadingIndicator.svelte b/apps/svelte.dev/src/lib/components/PreloadingIndicator.svelte
index 0d684d4064..b1aa533118 100644
--- a/apps/svelte.dev/src/lib/components/PreloadingIndicator.svelte
+++ b/apps/svelte.dev/src/lib/components/PreloadingIndicator.svelte
@@ -42,7 +42,7 @@
 		left: 0;
 		top: 0;
 		height: 100%;
-		background-color: var(--sk-theme-1);
+		background-color: var(--sk-fg-accent);
 		transition: width 0.4s;
 	}
 
diff --git a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
index 91c6e97da7..d02448382c 100644
--- a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
+++ b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
@@ -16,8 +16,8 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
-		background-color: var(--sk-back-2);
-		color: var(--sk-text-1);
+		background-color: var(--sk-bg-2);
+		color: var(--sk-fg-1);
 		white-space: nowrap;
 		flex: 0;
 		gap: 1rem;
diff --git a/apps/svelte.dev/src/lib/components/SelectIcon.svelte b/apps/svelte.dev/src/lib/components/SelectIcon.svelte
index 31a43144c1..991221459b 100644
--- a/apps/svelte.dev/src/lib/components/SelectIcon.svelte
+++ b/apps/svelte.dev/src/lib/components/SelectIcon.svelte
@@ -20,7 +20,7 @@
 		position: relative;
 
 		&:has(select:focus-visible) .raised.icon {
-			outline: 2px solid hsla(var(--sk-theme-1-hsl), 0.6);
+			outline: 2px solid var(--sk-fg-accent);
 			border-radius: var(--sk-border-radius);
 		}
 
@@ -47,7 +47,7 @@
 
 	.icon {
 		position: relative;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		line-height: 1;
 		background-size: 1.8rem;
 		z-index: 999;
diff --git a/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts b/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts
index c1cec0fece..6580c581f0 100644
--- a/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts
+++ b/apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts
@@ -10,7 +10,7 @@ import type { Adapter } from '$lib/tutorial';
 import type { Item, File } from 'editor';
 
 const converter = new AnsiToHtml({
-	fg: 'var(--sk-text-3)'
+	fg: 'var(--sk-fg-3)'
 });
 
 /** Web container singleton */
diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
index a27237f04e..0def54f1d5 100644
--- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -156,7 +156,7 @@
 		padding: 0 0 0 3.2rem;
 		position: relative;
 		margin: 1rem 0;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 
 		.avatar {
@@ -181,7 +181,7 @@
 		font: var(--sk-font-ui-medium);
 		z-index: 2;
 		justify-content: space-between;
-		outline: 1rem solid var(--sk-back-1);
+		outline: 1rem solid var(--sk-bg-1);
 	}
 
 	.controls::after {
@@ -190,7 +190,7 @@
 		width: 100%;
 		bottom: -2rem;
 		height: 2rem;
-		background: linear-gradient(to bottom, var(--sk-back-1) 0%, var(--sk-back-1) 50%, transparent);
+		background: linear-gradient(to bottom, var(--sk-bg-1) 0%, var(--sk-bg-1) 50%, transparent);
 	}
 
 	.controls form {
@@ -209,7 +209,7 @@
 		padding: 0.5rem 1rem;
 		line-height: 1;
 		display: flex;
-		border: 1px solid var(--sk-back-5);
+		border: 1px solid var(--sk-border-medium);
 		border-radius: var(--sk-border-radius);
 		z-index: 2;
 		font: var(--sk-font-ui-large);
@@ -241,7 +241,7 @@
 	}
 
 	h2 {
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -249,7 +249,7 @@
 
 	li a {
 		display: block;
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		padding: 1rem 3rem 1rem 1rem;
 		height: 100%;
 		line-height: 1;
@@ -259,7 +259,7 @@
 
 	li span {
 		font: var(--sk-font-ui-small);
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 	}
 
 	li label {
@@ -275,7 +275,7 @@
 	}
 
 	ul:not(.selecting) li:hover a {
-		background-color: var(--sk-back-4);
+		background-color: var(--sk-bg-4);
 	}
 
 	ul:not(.selecting) li:hover input {
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index 41f3121b8f..a16ef352ab 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -215,7 +215,7 @@
 		height: calc(100% - var(--sk-nav-height) - var(--sk-banner-height));
 		height: calc(100dvh - var(--sk-nav-height) - var(--sk-banner-height));
 		overflow: hidden;
-		background-color: var(--sk-back-1);
+		background-color: var(--sk-bg-1);
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 6686f69198..49d392c6e5 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -262,7 +262,7 @@
 
 	.icon {
 		position: relative;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		line-height: 1;
 		background-size: 1.8rem;
 		z-index: 999;
@@ -303,7 +303,7 @@
 
 	input {
 		background: transparent;
-		border: 1px solid var(--sk-back-4);
+		border: 1px solid var(--sk-border-medium);
 		border-radius: var(--sk-border-radius);
 		color: currentColor;
 		width: 0;
@@ -315,7 +315,7 @@
 
 	.badge {
 		position: absolute;
-		background: var(--sk-theme-1);
+		background: var(--sk-fg-accent);
 		border-radius: 50%;
 		width: 1rem;
 		height: 1rem;
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
index f74f5acebf..9ed41e3564 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
@@ -65,7 +65,7 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background-color: var(--sk-back-1);
+		background-color: var(--sk-bg-1);
 		overflow: hidden;
 		box-sizing: border-box;
 		display: flex;
diff --git a/apps/svelte.dev/src/routes/_home/Community.svelte b/apps/svelte.dev/src/routes/_home/Community.svelte
index eb03d6070d..9173ffee45 100644
--- a/apps/svelte.dev/src/routes/_home/Community.svelte
+++ b/apps/svelte.dev/src/routes/_home/Community.svelte
@@ -30,7 +30,7 @@
 		font: var(--sk-font-body-small);
 		margin: 0 auto;
 		padding: 0 var(--sk-page-padding-side);
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 		text-align: center;
 
 		a {
diff --git a/apps/svelte.dev/src/routes/_home/Companies.svelte b/apps/svelte.dev/src/routes/_home/Companies.svelte
index 7278d5c2e7..03b9c2261a 100644
--- a/apps/svelte.dev/src/routes/_home/Companies.svelte
+++ b/apps/svelte.dev/src/routes/_home/Companies.svelte
@@ -37,7 +37,7 @@
 		text-align: center;
 		justify-self: center;
 		z-index: 2;
-		filter: drop-shadow(0 0 1rem var(--sk-back-1)) drop-shadow(0 0 1rem var(--sk-back-1));
+		filter: drop-shadow(0 0 1rem var(--sk-bg-1)) drop-shadow(0 0 1rem var(--sk-bg-1));
 	}
 
 	.wing {
diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
index 8e0bac9728..9d7b71d1fe 100644
--- a/apps/svelte.dev/src/routes/_home/Hero.svelte
+++ b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -59,12 +59,12 @@
 			height: 200%;
 			left: 0;
 			top: -8rem; /* prevent cutoff on overscroll */
-			background: linear-gradient(to bottom, transparent, var(--sk-back-1)),
+			background: linear-gradient(to bottom, transparent, var(--sk-bg-1)),
 				radial-gradient(circle at 40% 30%, rgb(235, 243, 249), rgb(214, 222, 228));
 		}
 
 		:root.dark &::before {
-			background: linear-gradient(to bottom, transparent, var(--sk-back-1)),
+			background: linear-gradient(to bottom, transparent, var(--sk-bg-1)),
 				radial-gradient(
 					64.14% 72.25% at 47.58% 31.75%,
 					hsl(209deg 6% 47% / 52%) 0%,
@@ -104,7 +104,7 @@
 	.cta {
 		font: var(--sk-font-ui-medium);
 		font-size: 2rem;
-		color: var(--sk-theme-1);
+		color: var(--sk-fg-accent);
 		text-transform: uppercase;
 		display: flex;
 		align-items: center;
diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
index f76bf717e1..71e460e263 100644
--- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte
+++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
@@ -166,10 +166,10 @@
 			padding: 0.25em 0.5em;
 			line-height: 1;
 			text-transform: uppercase;
-			background: var(--sk-text-2);
+			background: var(--sk-fg-2);
 			border-radius: var(--sk-border-radius);
 			font: var(--sk-font-ui-small);
-			color: var(--sk-back-2);
+			color: var(--sk-bg-2);
 
 			&::after {
 				content: 'adj.';
diff --git a/apps/svelte.dev/src/routes/_home/Video.svelte b/apps/svelte.dev/src/routes/_home/Video.svelte
index 51674d6fc6..e10b9a8e2a 100644
--- a/apps/svelte.dev/src/routes/_home/Video.svelte
+++ b/apps/svelte.dev/src/routes/_home/Video.svelte
@@ -172,7 +172,7 @@
 	}
 
 	video:focus {
-		outline: 1px solid var(--sk-theme-1);
+		outline: 1px solid var(--sk-fg-accent);
 	}
 
 	video::cue {
@@ -190,7 +190,7 @@
 		left: 0;
 		bottom: 0;
 		height: 0.5rem;
-		background: var(--sk-theme-1);
+		background: var(--sk-fg-accent);
 		transition: height 0.2s;
 	}
 
@@ -242,7 +242,7 @@
 	}
 
 	.video-player input:focus-visible ~ img {
-		outline: 2px solid var(--sk-theme-1);
+		outline: 2px solid var(--sk-fg-accent);
 		outline-offset: 2px;
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 80b7cb2100..9259f891f2 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -74,7 +74,7 @@
 
 	h2 {
 		display: inline-block;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		font: var(--sk-font-h3);
 	}
 
@@ -88,14 +88,14 @@
 
 			h2 {
 				font: var(--sk-font-h1);
-				color: var(--sk-text-2);
+				color: var(--sk-fg-2);
 			}
 		}
 
 		a {
 			display: block;
 			text-decoration: none;
-			color: var(--sk-text-2);
+			color: var(--sk-fg-2);
 
 			&:hover h2 {
 				text-decoration: underline;
@@ -104,7 +104,7 @@
 
 		p {
 			font: var(--sk-font-body-small);
-			color: var(--sk-text-3);
+			color: var(--sk-fg-3);
 			margin: 0 0 0.5em 0;
 		}
 	}
@@ -130,7 +130,7 @@
 				top: 0;
 				font: var(--sk-font-ui-medium);
 				text-transform: uppercase;
-				color: var(--sk-text-4);
+				color: var(--sk-fg-4);
 			}
 		}
 
@@ -164,7 +164,7 @@
 			a {
 				display: block;
 				font: var(--sk-font-body);
-				color: var(--sk-text-2);
+				color: var(--sk-fg-2);
 			}
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index e8fbce5f9a..e4813de625 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -47,7 +47,7 @@
 				}
 
 				figcaption {
-					color: var(--sk-text-4);
+					color: var(--sk-fg-4);
 					font: var(--sk-font-body-small);
 				}
 			}
@@ -61,11 +61,11 @@
 				margin: 0 0 1em 1em;
 				width: 16rem;
 				z-index: 2;
-				color: var(--sk-text-4);
+				color: var(--sk-fg-4);
 				font: var(--sk-font-body-small);
 
 				p {
-					color: var(--sk-text-4);
+					color: var(--sk-fg-4);
 					font: inherit;
 				}
 			}
@@ -87,7 +87,7 @@
 				position: relative;
 				border: none;
 				height: 1px;
-				background: radial-gradient(circle at center, var(--sk-text-4), transparent);
+				background: radial-gradient(circle at center, var(--sk-fg-4), transparent);
 				margin: 7rem 0;
 				overflow: visible;
 
@@ -99,8 +99,8 @@
 					left: 50%;
 					top: 2px;
 					transform: rotate(45deg) translate(-50%, -50%);
-					background: var(--sk-back-1);
-					border: 1px solid var(--sk-text-4);
+					background: var(--sk-bg-1);
+					border: 1px solid var(--sk-fg-4);
 				}
 			}
 		}
@@ -112,7 +112,7 @@
 
 	.standfirst {
 		font: var(--sk-font-body-small);
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		margin: 0 0 1em 0;
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index 864415d7c7..6af1962320 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -111,14 +111,14 @@
 
 	.options a {
 		display: block;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		margin: 1em -1.6rem;
 		padding: 1.6rem;
-		background-color: var(--sk-back-1);
+		background-color: var(--sk-bg-1);
 		border-radius: var(--sk-border-radius);
 
 		&:hover {
-			background-color: var(--sk-back-2);
+			background-color: var(--sk-bg-2);
 			filter: drop-shadow(1px 2px 4px rgb(0 0 0 / 0.1));
 			text-decoration: none;
 			-webkit-transform: var(--safari-fix);
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
index fbf33ff853..4c3eed50f3 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
@@ -40,7 +40,7 @@
 	}
 
 	.toc-container {
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		display: none;
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
index 6c2ef53b9e..1dafc4f940 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
@@ -11,7 +11,7 @@
 <style>
 	.breadcrumbs {
 		font: var(--sk-font-ui-small);
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 		text-transform: uppercase;
 
 		span:not(:last-child)::after {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 8368fc1698..12f07fd486 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-text-3);
+				color: var(--sk-fg-3);
 			}
 		}
 
@@ -96,10 +96,10 @@
 				padding: 0.2rem 0 0 3rem;
 				height: 3rem;
 				text-transform: uppercase;
-				color: var(--sk-text-4);
+				color: var(--sk-fg-4);
 
 				&:hover {
-					color: var(--sk-text-3);
+					color: var(--sk-fg-3);
 				}
 
 				&::before,
@@ -145,7 +145,7 @@
 
 				h3 {
 					font: var(--sk-font-ui-small);
-					color: var(--sk-text-4);
+					color: var(--sk-fg-4);
 					margin: 0;
 					display: block;
 				}
@@ -216,7 +216,7 @@
 				}
 
 				a.active {
-					color: var(--sk-text-1);
+					color: var(--sk-fg-1);
 					text-decoration: underline;
 				}
 			}
diff --git a/apps/svelte.dev/src/routes/search/+page.svelte b/apps/svelte.dev/src/routes/search/+page.svelte
index 86581b4461..806c79fdf6 100644
--- a/apps/svelte.dev/src/routes/search/+page.svelte
+++ b/apps/svelte.dev/src/routes/search/+page.svelte
@@ -47,6 +47,6 @@
 		border-radius: var(--sk-border-radius);
 		padding: 2rem 2rem 2rem 5rem;
 		background: no-repeat 1rem 50% / 3rem 3rem url(/icons/search.svg);
-		color: var(--sk-text-1);
+		color: var(--sk-fg-1);
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 52ea0de260..870ee987ec 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -369,7 +369,7 @@
 		/* we transform the default state, rather than the editor state, because otherwise
 		   the positioning of tooltips is wrong (doesn't take into account transforms) */
 		transform: translate(50%, 0);
-		border-top: 1px solid var(--sk-back-5);
+		border-top: 1px solid var(--sk-border-medium);
 	}
 
 	.top.offset {
@@ -386,13 +386,13 @@
 		position: relative;
 		min-height: 100%;
 		height: 100%;
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		--menu-width: 5rem;
 	}
 
 	.navigator {
 		position: relative;
-		background: var(--sk-back-2);
+		background: var(--sk-bg-2);
 		display: flex;
 		flex-direction: column;
 		font: var(--sk-font-ui-small);
@@ -405,7 +405,7 @@
 
 	.editor-container {
 		position: relative;
-		background-color: var(--sk-back-3);
+		background-color: var(--sk-bg-3);
 	}
 
 	.mobile .navigator {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
index 51bf179f68..22b640ad00 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
@@ -63,7 +63,6 @@
 		width: 100%;
 		height: 4rem;
 		display: flex;
-		border-top: 1px solid var(--sk-back-4);
 		padding: 0.2rem;
 		gap: 0.2rem;
 	}
@@ -75,10 +74,10 @@
 	input {
 		flex: 1;
 		padding: 0.2rem 0.6rem;
-		border: 1px solid var(--sk-back-4);
+		border: 1px solid var(--sk-border-medium);
 		/* TODO this should apply to all buttons/inputs? */
 		border-radius: var(--sk-border-radius);
-		color: var(--sk-text-1);
+		color: var(--sk-fg-1);
 		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 72946ce6d0..3f5d9888e1 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte
@@ -87,7 +87,7 @@
 
 		span:not(:last-child)::after {
 			content: ' / ';
-			color: var(--sk-text-4);
+			color: var(--sk-fg-4);
 			font: var(--sk-font-ui-small);
 		}
 	}
@@ -99,7 +99,7 @@
 	}
 
 	option:disabled {
-		color: var(--sk-text-1);
+		color: var(--sk-fg-1);
 		font-weight: bold;
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
index 5311555407..f81adcef55 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
@@ -119,7 +119,7 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		background: var(--sk-back-2);
+		background: var(--sk-bg-2);
 		user-select: none;
 		font: var(--sk-font-ui-small);
 	}
@@ -157,7 +157,7 @@
 	}
 
 	button {
-		color: var(--sk-theme-1);
+		color: var(--sk-fg-accent);
 		padding: 0 0 1px;
 		position: relative;
 	}
@@ -168,12 +168,12 @@
 
 	small {
 		font: var(--sk-font-ui-small);
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		text-transform: uppercase;
 	}
 
 	span {
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 	}
 
 	svg {
@@ -184,6 +184,6 @@
 	:global(.dark) .loading {
 		--faded: #444;
 		--progress: #555;
-		--cutout: var(--sk-back-2);
+		--cutout: var(--sk-bg-2);
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
index bc3ddd28d5..e3db87fee1 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
@@ -169,7 +169,7 @@
 		min-height: 0;
 		height: 100%;
 		max-height: 100%;
-		background: var(--sk-back-2);
+		background: var(--sk-bg-2);
 		--menu-width: 5.4rem;
 	}
 
@@ -180,7 +180,7 @@
 		resize: none;
 		box-sizing: border-box;
 		border: none;
-		background: var(--sk-back-2);
+		background: var(--sk-bg-2);
 	}
 
 	.terminal {
@@ -191,7 +191,7 @@
 		height: 80%;
 		font: var(--sk-font-mono);
 		padding: 1rem;
-		border-top: 1px solid var(--sk-text-4);
+		border-top: 1px solid var(--sk-fg-4);
 		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 0b1ad018e2..e341b94c8c 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -63,7 +63,7 @@
 		min-height: 0;
 		height: 100%;
 		max-height: 100%;
-		background: var(--sk-back-2);
+		background: var(--sk-bg-2);
 		--menu-width: 5.4rem;
 	}
 
@@ -75,8 +75,8 @@
 		height: 80%;
 		font: var(--sk-font-mono);
 		padding: 1rem;
-		background: var(--sk-back-1);
-		border-top: 1px solid var(--sk-text-4);
+		background: var(--sk-bg-1);
+		border-top: 1px solid var(--sk-fg-4);
 		transform: translate(0, 100%);
 		-webkit-transform: translate3d(0, 100%, 0.01);
 		transition: transform 0.3s;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
index 8dfdbe1054..b88621b2a2 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
@@ -116,7 +116,7 @@
 	.text {
 		flex: 1 1 auto;
 		padding: 2.2rem var(--sk-page-padding-side);
-		background: var(--sk-back-1);
+		background: var(--sk-bg-1);
 
 		:global {
 			[data-file],
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
index 4d99ec4d54..90f18514d5 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
@@ -51,8 +51,8 @@
 	ul {
 		margin: 0;
 		padding: 0;
-		background-color: var(--sk-back-3);
-		border: 1px solid var(--sk-theme-1);
+		background-color: var(--sk-bg-3);
+		border: 1px solid var(--sk-fg-accent);
 	}
 
 	li {
@@ -61,11 +61,11 @@
 		width: 1fr;
 	}
 	li:hover {
-		background-color: var(--sk-theme-1-variant);
+		background-color: var(--sk-bg-accent);
 	}
 
 	button {
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		width: 100%;
 		text-align: left;
 		border: 0px;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
index cf5403c480..6925730db9 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte
@@ -158,7 +158,7 @@
 		overflow-x: hidden;
 		padding: 1rem 0rem;
 		margin: 0;
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		list-style: none;
 	}
 
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 b916b7e94a..e1cd06bca7 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -111,7 +111,7 @@
 
 <style>
 	li {
-		--bg: var(--sk-back-3);
+		--bg: var(--sk-bg-3);
 		--inset: calc((var(--depth) * 1.2rem) + 1.5rem);
 		display: flex;
 		position: relative;
@@ -121,11 +121,11 @@
 		background: var(--bg) var(--icon) no-repeat;
 		background-position: calc(var(--inset) - 0.5rem) 50%;
 		background-size: 1.2rem;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 	}
 
 	li:hover {
-		--bg: var(--sk-back-3);
+		--bg: var(--sk-bg-3);
 	}
 
 	button,
@@ -140,10 +140,10 @@
 	}
 
 	input {
-		background: var(--sk-back-1);
-		color: var(--sk-text-1) !important;
+		background: var(--sk-bg-1);
+		color: var(--sk-fg-1) !important;
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
-		border: 1px solid var(--sk-back-5);
+		border: 2px solid transparent;
 		padding: 0 0.5rem;
 		font: inherit;
 	}
@@ -200,7 +200,7 @@
 	}
 
 	[aria-current='true'] {
-		color: var(--sk-theme-1);
+		color: var(--sk-fg-accent);
 	}
 
 	[aria-current='true']:has(:focus-visible)::after,
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index f47639ec1a..b7fc35260a 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -3,19 +3,19 @@
 }
 
 .cm-editor {
-	color: var(--sk-code-base);
+	color: var(--shiki-color-text);
 	background-color: transparent;
 	height: 100%;
 
 	&.cm-focused {
 		.cm-cursor {
-			border-left-color: var(--sk-text-3);
+			border-left-color: var(--sk-fg-3);
 		}
 
 		> .cm-scroller > .cm-selectionLayer .cm-selectionBackground,
 		.cm-selectionBackground,
 		.cm-content ::selection {
-			background-color: var(--sk-selection-color);
+			background-color: var(--sk-bg-selection);
 		}
 
 		.cm-matchingBracket,
@@ -29,18 +29,18 @@
 	}
 
 	.cm-gutters {
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		border: none;
 		padding: 0;
 		width: 5rem;
 	}
 
 	.cm-activeLine {
-		background: var(--sk-back-translucent);
+		background: var(--sk-bg-3);
 	}
 
 	.cm-activeLineGutter {
-		background-color: var(--sk-back-3);
+		background-color: var(--sk-bg-3);
 	}
 
 	.cm-lineNumbers {
@@ -101,16 +101,16 @@
 
 	.cm-selectionMatch {
 		background: var(--selection-color);
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 	}
 
 	.cm-tooltip.cm-tooltip-autocomplete {
-		color: var(--sk-text-2) !important;
+		color: var(--sk-fg-2) !important;
 		perspective: 1px;
 
 		& > ul > li[aria-selected] {
-			background-color: var(--sk-back-4);
-			color: var(--sk-text-1) !important;
+			background-color: var(--sk-bg-4);
+			color: var(--sk-fg-1) !important;
 		}
 
 		& > ul {
@@ -119,24 +119,24 @@
 	}
 
 	.cm-panels {
-		background: var(--sk-back-4);
-		color: var(--sk-text-1);
+		background: var(--sk-bg-4);
+		color: var(--sk-fg-1);
 
 		&.cm-panels-top,
 		&.cm-panels-bottom {
-			border-top: 1px solid var(--sk-back-5);
-			border-bottom: 1px solid var(--sk-back-5);
+			border-top: 1px solid var(--sk-border-medium);
+			border-bottom: 1px solid var(--sk-border-medium);
 		}
 	}
 
 	.cm-button {
-		background: var(--sk-back-5);
+		background: var(--sk-bg-5);
 		border: 2px solid transparent;
 	}
 
 	.cm-textfield {
-		background: var(--sk-back-1);
-		color: var(--sk-text-1);
+		background: var(--sk-bg-1);
+		color: var(--sk-fg-1);
 		border: 2px solid transparent;
 	}
 
@@ -157,7 +157,7 @@
 		--warning: hsl(40 100% 70%);
 		--error: hsl(0 100% 90%);
 		border: none;
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		font: var(--sk-font-ui-small);
 		max-width: calc(100vw - 10em);
 		position: relative;
diff --git a/packages/editor/src/lib/theme.ts b/packages/editor/src/lib/theme.ts
index a868282f6b..a7e7f8cc85 100644
--- a/packages/editor/src/lib/theme.ts
+++ b/packages/editor/src/lib/theme.ts
@@ -3,14 +3,14 @@ import { tags as t } from '@lezer/highlight';
 
 export const theme = syntaxHighlighting(
 	HighlightStyle.define([
-		{ tag: t.keyword, color: 'var(--sk-code-keyword)' },
+		{ tag: t.keyword, color: 'var(--shiki-token-keyword)' },
 		{
 			tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-			color: 'var(--sk-code-base)'
+			color: 'var(--shiki-color-text)'
 		},
-		{ tag: [t.function(t.variableName), t.labelName], color: 'var(--sk-code-tags)' },
-		{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: 'var(--sk-code-base)' },
-		{ tag: [t.definition(t.name), t.separator], color: 'var(--sk-code-base)' },
+		{ tag: [t.function(t.variableName), t.labelName], color: 'var(--shiki-token-function)' },
+		{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: 'var(--shiki-color-text)' },
+		{ tag: [t.definition(t.name), t.separator], color: 'var(--shiki-color-text)' },
 		{
 			tag: [
 				t.typeName,
@@ -22,20 +22,20 @@ export const theme = syntaxHighlighting(
 				t.self,
 				t.namespace
 			],
-			color: 'var(--sk-code-tags)'
+			color: 'var(--shiki-token-function)'
 		},
 		{
 			tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],
-			color: 'var(--sk-code-base)'
+			color: 'var(--shiki-color-text)'
 		},
-		{ tag: [t.meta, t.comment], color: 'var(--sk-code-comment)' },
+		{ tag: [t.meta, t.comment], color: 'var(--shiki-token-comment)' },
 		{ tag: t.strong, fontWeight: 'bold' },
 		{ tag: t.emphasis, fontStyle: 'italic' },
 		{ tag: t.strikethrough, textDecoration: 'line-through' },
-		{ tag: t.link, color: 'var(--sk-code-base)', textDecoration: 'underline' },
-		{ tag: t.heading, fontWeight: 'bold', color: 'var(--sk-text-1)' },
+		{ tag: t.link, color: 'var(--shiki-color-text)', textDecoration: 'underline' },
+		{ tag: t.heading, fontWeight: 'bold', color: 'var(--sk-fg-1)' },
 		{ tag: [t.atom, t.bool], color: 'var(--sk-code-atom)' },
-		{ tag: [t.processingInstruction, t.string, t.inserted], color: 'var(--sk-code-string)' },
+		{ tag: [t.processingInstruction, t.string, t.inserted], color: 'var(--shiki-token-string)' },
 		{ tag: t.invalid, color: '#ff008c' }
 	])
 );
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 6789ad7e6c..9cf2f65296 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -199,7 +199,7 @@
 			height: 1px;
 			bottom: 0px;
 			left: 0;
-			background-color: var(--sk-back-4);
+			background-color: var(--sk-bg-4);
 		}
 	}
 
@@ -223,7 +223,7 @@
 		height: 100%;
 		aspect-ratio: 1;
 		margin: 0;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		border-radius: 0;
 		cursor: pointer;
 	}
@@ -248,8 +248,8 @@
 		}
 
 		&.active {
-			color: var(--sk-text-2, #333);
-			border-bottom: 1px solid var(--sk-theme-1);
+			color: var(--sk-fg-2, #333);
+			border-bottom: 1px solid var(--sk-fg-accent);
 		}
 	}
 
@@ -264,14 +264,14 @@
 
 	.input-sizer {
 		display: flex;
-		color: var(--sk-text-3, #ccc);
+		color: var(--sk-fg-3, #ccc);
 	}
 
 	input {
 		position: absolute;
 		width: 100%;
 		border: none;
-		color: var(--sk-theme-1);
+		color: var(--sk-fg-accent);
 		outline: none;
 		background-color: transparent;
 		top: 0;
@@ -287,7 +287,7 @@
 	}
 
 	.duplicate {
-		color: var(--sk-theme-1);
+		color: var(--sk-fg-accent);
 	}
 
 	.remove {
diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte
index 4d66d3e971..99f73c5a1c 100644
--- a/packages/repl/src/lib/Input/RunesInfo.svelte
+++ b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -110,7 +110,7 @@
 		width: 100vw;
 		max-width: 320px;
 		z-index: 9999;
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		padding: 1em;
 
 		p {
diff --git a/packages/repl/src/lib/Message.svelte b/packages/repl/src/lib/Message.svelte
index f05309b856..9ee85da6dc 100644
--- a/packages/repl/src/lib/Message.svelte
+++ b/packages/repl/src/lib/Message.svelte
@@ -84,6 +84,6 @@
 	}
 
 	.info {
-		background-color: var(--sk-text-4);
+		background-color: var(--sk-fg-4);
 	}
 </style>
diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index 559915d3ff..03f5ec69d0 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -163,18 +163,18 @@
 	}
 
 	.token {
-		color: var(--sk-code-base);
+		color: var(--shiki-color-text);
 	}
 
 	.token.string {
-		color: var(--sk-code-string);
+		color: var(--shiki-token-string);
 	}
 
 	.token.number {
-		color: var(--sk-code-number);
+		color: var(--shiki-token-constant);
 	}
 
 	.token.comment {
-		color: var(--sk-code-comment);
+		color: var(--shiki-token-comment);
 	}
 </style>
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
index 2ebf9e0afe..70540f2cf2 100644
--- a/packages/repl/src/lib/Output/AstView.svelte
+++ b/packages/repl/src/lib/Output/AstView.svelte
@@ -92,8 +92,8 @@
 		--base: hsl(45, 7%, 45%);
 		--string: hsl(41, 37%, 45%);
 		--number: hsl(102, 27%, 50%);
-		background: var(--sk-back-3);
-		color: var(--sk-code-base);
+		background: var(--sk-bg-3);
+		color: var(--shiki-color-text);
 		display: flex;
 		flex-direction: column;
 	}
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index b16bdcd3e5..449f829f28 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -43,7 +43,7 @@
 		padding: 0 10px;
 		font-family: var(--sk-font-family-mono);
 		font-size: 13px;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		line-height: 1.8;
 	}
 
@@ -51,7 +51,7 @@
 		display: block;
 		padding: 0 0 0 1.25em;
 		white-space: nowrap;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		user-select: none;
 	}
 
@@ -61,7 +61,7 @@
 	}
 
 	.string {
-		color: var(--sk-code-string);
+		color: var(--shiki-token-string);
 	}
 
 	label {
@@ -69,7 +69,7 @@
 	}
 
 	label[for] {
-		color: var(--sk-code-string);
+		color: var(--shiki-token-string);
 	}
 
 	label :global(input[type='checkbox']) {
@@ -113,16 +113,16 @@
 	}
 
 	input[type='radio'] + label:before {
-		background-color: var(--sk-text-4);
+		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-text-4);
+		border: 1px solid var(--sk-fg-4);
 	}
 
 	input[type='radio']:checked + label:before {
-		background-color: var(--sk-theme-1);
+		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-text-4);
+		border: 1px solid var(--sk-fg-4);
 		transition: box-shadow 0.2s ease-out;
 	}
 </style>
diff --git a/packages/repl/src/lib/Output/ErrorOverlay.svelte b/packages/repl/src/lib/Output/ErrorOverlay.svelte
index 7f7a4aa1fc..691a2169ab 100644
--- a/packages/repl/src/lib/Output/ErrorOverlay.svelte
+++ b/packages/repl/src/lib/Output/ErrorOverlay.svelte
@@ -30,19 +30,19 @@
 		display: flex;
 		flex-direction: column;
 		gap: 1em;
-		background: var(--sk-back-1);
+		background: var(--sk-bg-1);
 		padding: 1em;
-		border-top: 4px solid var(--sk-theme-1);
+		border-top: 4px solid var(--sk-fg-accent);
 		border-radius: 4px;
 		filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.1));
 	}
 
 	pre {
 		padding: 0.5em;
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 	}
 
 	small {
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 	}
 </style>
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 4b353c6f13..e55c2936d6 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -157,7 +157,7 @@
 			height: 1px;
 			bottom: 0px;
 			left: 0;
-			background-color: var(--sk-back-4);
+			background-color: var(--sk-bg-4);
 		}
 	}
 
@@ -170,13 +170,13 @@
 		border: none;
 		border-bottom: 1px solid transparent;
 		padding: 0 1rem;
-		color: var(--sk-text-2, #999);
+		color: var(--sk-fg-2, #999);
 		border-radius: 0;
 	}
 
 	button.active {
-		border-bottom: 1px solid var(--sk-theme-1, --prime);
-		color: var(--sk-text-1, #333);
+		border-bottom: 1px solid var(--sk-fg-accent, --prime);
+		color: var(--sk-fg-1, #333);
 	}
 
 	div[slot] {
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index 2fd61c030b..210a47de6f 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -71,7 +71,7 @@
 	.panel-heading {
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
-		color: var(--sk-text-1);
+		color: var(--sk-fg-1);
 		flex: 1;
 		text-align: left;
 	}
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 8443011907..6659ba496c 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -329,7 +329,7 @@
 <style>
 	.iframe-container {
 		position: absolute;
-		background-color: var(--sk-back-1, white);
+		background-color: var(--sk-bg-1, white);
 		border: none;
 		width: 100%;
 		height: 100%;
@@ -348,13 +348,13 @@
 	}
 
 	button {
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
 		display: block;
 
 		&:hover {
-			color: var(--sk-text-1);
+			color: var(--sk-fg-1);
 		}
 	}
 
diff --git a/packages/repl/src/lib/Output/console/Console.svelte b/packages/repl/src/lib/Output/console/Console.svelte
index bb286e07e8..1c80401e8e 100644
--- a/packages/repl/src/lib/Output/console/Console.svelte
+++ b/packages/repl/src/lib/Output/console/Console.svelte
@@ -35,7 +35,7 @@
 		--error-border: rgb(242, 214, 219);
 		--warning-bg: rgb(254, 251, 218);
 		--warning-border: rgb(242, 232, 163);
-		--json-tree-string-color: var(--sk-code-string);
+		--json-tree-string-color: var(--shiki-token-string);
 		--json-tree-font-family: var(--sk-font-family-mono);
 
 		:global(.dark) & {
diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
index 2a1444bccf..440e83d755 100644
--- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
@@ -164,8 +164,8 @@
 
 <style>
 	.line {
-		--bg: var(--sk-back-1);
-		--border: var(--sk-back-3);
+		--bg: var(--sk-bg-1);
+		--border: var(--sk-bg-3);
 		display: block;
 		position: relative;
 		width: 100%;
@@ -247,13 +247,13 @@
 		height: 1.4em;
 		padding: 0.5em;
 		border-radius: 0.4rem;
-		background-color: var(--sk-text-3, #777);
-		color: var(--sk-back-1);
+		background-color: var(--sk-fg-3, #777);
+		color: var(--sk-bg-1);
 		font-size: 1rem;
 	}
 
 	.meta {
-		color: var(--sk-text-2, #666);
+		color: var(--sk-fg-2, #666);
 		font-family: var(--sk-font-family-body) !important;
 		font-size: 12px;
 	}
diff --git a/packages/repl/src/lib/Output/console/ConsoleTable.svelte b/packages/repl/src/lib/Output/console/ConsoleTable.svelte
index 514462fd65..7c6c32ce50 100644
--- a/packages/repl/src/lib/Output/console/ConsoleTable.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleTable.svelte
@@ -96,7 +96,7 @@
 		margin: 8px;
 		overflow: auto;
 		max-height: 200px;
-		border: 1px solid var(--sk-back-4);
+		border: 1px solid var(--sk-border-medium);
 		border-radius: 2px;
 		overscroll-behavior: none;
 	}
@@ -108,7 +108,7 @@
 	}
 
 	th {
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 		padding: 0.5rem 1rem;
 		border: none;
 		position: sticky;
@@ -125,15 +125,15 @@
 	}
 
 	tr {
-		background: var(--sk-back-1);
+		background: var(--sk-bg-1);
 	}
 
 	tr:nth-child(2n) {
-		background: var(--sk-back-3);
+		background: var(--sk-bg-3);
 	}
 
 	th,
 	td {
-		border-right: 1px solid var(--sk-back-3);
+		border-right: 1px solid var(--sk-bg-3);
 	}
 </style>
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
index 2137d76454..2c20688ae9 100644
--- a/packages/repl/src/lib/Repl.svelte
+++ b/packages/repl/src/lib/Repl.svelte
@@ -166,7 +166,7 @@
 <div class="container" class:embedded class:toggleable={$toggleable} bind:clientWidth={width}>
 	<div class="viewport" class:output={show_output}>
 		<SplitPane
-			--color="var(--sk-text-4)"
+			--color="var(--sk-fg-4)"
 			id="main"
 			type={orientation === 'rows' ? 'vertical' : 'horizontal'}
 			pos="{mobile || fixed ? fixedPos : orientation === 'rows' ? 60 : 50}%"
@@ -205,7 +205,7 @@
 		flex: 1;
 		height: 100%;
 		min-height: 0;
-		background: var(--sk-back-1);
+		background: var(--sk-bg-1);
 		padding: 0;
 
 		&.embedded {
@@ -235,7 +235,7 @@
 			}
 
 			.divider::after {
-				background-color: var(--sk-back-5);
+				background-color: var(--sk-bg-5);
 			}
 
 			[data-pane='main'] > .divider::after {
diff --git a/packages/site-kit/src/lib/components/Banner.svelte b/packages/site-kit/src/lib/components/Banner.svelte
index 436dc05a11..6e210b8761 100644
--- a/packages/site-kit/src/lib/components/Banner.svelte
+++ b/packages/site-kit/src/lib/components/Banner.svelte
@@ -62,7 +62,7 @@
 		overflow-y: auto;
 		width: 100%;
 		height: var(--sk-banner-height);
-		background: var(--sk-theme-1-variant);
+		background: var(--sk-bg-accent);
 		color: white;
 		padding: 0 4rem;
 	}
diff --git a/packages/site-kit/src/lib/components/Checkbox.svelte b/packages/site-kit/src/lib/components/Checkbox.svelte
index 6e54349421..ab58584e88 100644
--- a/packages/site-kit/src/lib/components/Checkbox.svelte
+++ b/packages/site-kit/src/lib/components/Checkbox.svelte
@@ -32,12 +32,12 @@
 		border-radius: 1em;
 		top: 0;
 		left: 0;
-		background: var(--sk-back-6);
+		background: var(--sk-bg-5);
 		box-sizing: content-box;
 	}
 
 	input[type='checkbox']:checked::before {
-		background: var(--sk-theme-1);
+		background: var(--sk-fg-accent);
 	}
 
 	input[type='checkbox']::after {
diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte
index 841811ee08..246a143673 100644
--- a/packages/site-kit/src/lib/components/Dropdown.svelte
+++ b/packages/site-kit/src/lib/components/Dropdown.svelte
@@ -30,7 +30,7 @@
 		left: -1rem;
 		/* this is a bit of a kludge, but it ensures a contiguous hit area (50% + 50%) while also working for tall links like `Docs` (50% + 1.5rem) */
 		top: calc(50% + min(50%, 1.5rem));
-		background-color: var(--sk-back-2);
+		background-color: var(--sk-bg-2);
 		z-index: 1;
 		filter: var(--sk-shadow);
 		border-radius: var(--sk-border-radius);
diff --git a/packages/site-kit/src/lib/components/HoverMenu.svelte b/packages/site-kit/src/lib/components/HoverMenu.svelte
index 8c2e3d3e6d..3587e71f27 100644
--- a/packages/site-kit/src/lib/components/HoverMenu.svelte
+++ b/packages/site-kit/src/lib/components/HoverMenu.svelte
@@ -10,32 +10,25 @@
 
 <style>
 	.hover-menu {
+		padding: 0.5rem;
+
 		:global {
 			a,
 			button {
-				color: var(--sk-text-2);
-				padding: 1rem 1.3rem;
+				color: var(--sk-fg-2);
+				padding: 1rem;
 				display: block;
 				font: var(--sk-font-ui-medium);
 				text-decoration: none;
 				line-height: 1;
 				width: 100%;
 				text-align: left;
-
-				&:first-child {
-					padding-top: 1.3rem;
-					border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0;
-				}
-
-				&:last-child {
-					padding-bottom: 1.3rem;
-					border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
-				}
+				border-radius: var(--sk-border-radius-inner);
 			}
 
 			a:hover,
 			button:hover {
-				background-color: var(--sk-back-4);
+				background-color: var(--sk-bg-4);
 			}
 		}
 	}
diff --git a/packages/site-kit/src/lib/components/ModalOverlay.svelte b/packages/site-kit/src/lib/components/ModalOverlay.svelte
index 38820c6651..fa22d3c661 100644
--- a/packages/site-kit/src/lib/components/ModalOverlay.svelte
+++ b/packages/site-kit/src/lib/components/ModalOverlay.svelte
@@ -22,6 +22,6 @@
 		width: 100%;
 		height: 100%;
 		height: 100dvh;
-		background: var(--sk-back-1);
+		background: var(--sk-bg-1);
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/ScreenToggle.svelte b/packages/site-kit/src/lib/components/ScreenToggle.svelte
index ae0efb46c3..8b59e68c46 100644
--- a/packages/site-kit/src/lib/components/ScreenToggle.svelte
+++ b/packages/site-kit/src/lib/components/ScreenToggle.svelte
@@ -41,16 +41,16 @@
 		justify-content: center;
 		width: 100%;
 		height: var(--sk-pane-controls-height);
-		border-top: 1px solid var(--sk-back-5);
+		border-top: 1px solid var(--sk-border-medium);
 		font: var(--sk-font-ui-small);
 		z-index: 2;
 	}
 
 	span {
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 	}
 
 	.active {
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 3b90df1275..2870b7313d 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -107,17 +107,17 @@
 			padding: 0.2rem 0.4rem;
 			margin: 0 0.2rem;
 			top: -0.1rem;
-			background: var(--sk-back-4);
+			background: var(--sk-bg-4);
 		}
 
 		.code-block {
 			position: relative;
-			background: var(--sk-back-2);
-			border: 1px solid var(--sk-back-5);
+			background: var(--sk-bg-2);
+			border: 1px solid var(--sk-border-medium);
 			border-radius: var(--sk-border-radius);
 			overflow: hidden;
 			margin: calc(0.5 * var(--sk-line-height-body)) 0;
-			/* background: var(--sk-back-3); */
+			/* background: var(--sk-bg-3); */
 
 			@media (min-width: 767px) {
 				margin: var(--sk-line-height-body) 0;
@@ -139,7 +139,7 @@
 
 				&:has(.filename) {
 					position: relative;
-					background: var(--sk-back-3);
+					background: var(--sk-bg-3);
 					padding-left: 1rem;
 				}
 
@@ -154,7 +154,7 @@
 					top: 0.1rem;
 					flex: 1;
 					font: var(--sk-font-ui-small);
-					color: var(--sk-text-3);
+					color: var(--sk-fg-3);
 					text-overflow: ellipsis;
 					overflow: hidden;
 					white-space: nowrap;
@@ -186,7 +186,7 @@
 						align-items: center;
 						font-size: 1.2rem;
 						font-family: var(--sk-font-family-mono);
-						color: var(--sk-text-2);
+						color: var(--sk-fg-2);
 					}
 
 					&::before {
@@ -281,7 +281,7 @@
 				width: 100%;
 				padding: 0.7rem 1rem;
 				box-sizing: border-box;
-				color: var(--sk-code-base);
+				color: var(--shiki-color-text);
 				border-radius: var(--sk-border-radius);
 				overflow-x: auto;
 
@@ -295,7 +295,7 @@
 				}
 
 				a:hover {
-					border-bottom: 1px solid var(--sk-theme-1);
+					border-bottom: 1px solid var(--sk-fg-accent);
 					text-decoration: none;
 				}
 
@@ -382,7 +382,7 @@
 				position: absolute;
 				top: 0.65em;
 				left: -1.8rem;
-				background-color: var(--sk-text-4);
+				background-color: var(--sk-fg-4);
 				width: 0.3em;
 				height: 0.3em;
 				border-radius: 50%;
@@ -412,13 +412,12 @@
 			font: var(--sk-font-body-small);
 			float: right;
 			pointer-events: all;
-			color: var(--sk-theme-1);
+			color: var(--sk-fg-accent);
 			cursor: pointer;
 		}
 
 		blockquote {
-			--primary-hsl: var(--sk-theme-1-hsl);
-			color: var(--sk-text-1);
+			color: var(--sk-fg-1);
 			padding: 0 0 0 4.5rem;
 
 			&.note,
@@ -439,18 +438,11 @@
 			}
 
 			&.deprecated {
-				--primary-hsl: var(--sk-text-warning-hsl);
-				--color: var(--primary-hsl);
-
 				p:first-child::before {
 					content: 'Deprecated ';
 					display: block;
 					font-style: normal;
 				}
-
-				a {
-					--color: var(--primary-hsl);
-				}
 			}
 
 			&::before {
@@ -461,7 +453,7 @@
 				left: 0;
 				top: 0;
 				font-family: var(--sk-font-family-heading);
-				color: var(--sk-text-4);
+				color: var(--sk-fg-4);
 			}
 
 			@media (max-width: 767px) {
@@ -521,12 +513,12 @@
 				display: flex;
 				align-items: center;
 				height: 3rem;
-				color: var(--sk-text-4);
+				color: var(--sk-fg-4);
 				font: var(--sk-font-body-small);
 				user-select: none;
 
 				&:hover {
-					color: var(--sk-text-3);
+					color: var(--sk-fg-3);
 				}
 
 				.legacy &::after {
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 271750afc9..182d1358e1 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-text-3);
+		color: var(--sk-fg-3);
 		position: relative;
 	}
 
@@ -86,7 +86,7 @@
 		transition: color 0.2s;
 		border-bottom: none;
 		padding: 0;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 		user-select: none;
 	}
 
@@ -100,7 +100,7 @@
 	}
 
 	[aria-current='page'] {
-		color: var(--sk-theme-1);
+		color: var(--sk-fg-accent);
 		text-decoration: underline;
 	}
 
@@ -133,7 +133,7 @@
 			height: var(--size);
 			top: calc(1.4rem - var(--size) * 0.5);
 			right: calc(-0.5 * var(--size));
-			background-color: var(--sk-back-1);
+			background-color: var(--sk-bg-1);
 			z-index: 2;
 			position: absolute;
 			rotate: 45deg;
diff --git a/packages/site-kit/src/lib/docs/Tooltip.svelte b/packages/site-kit/src/lib/docs/Tooltip.svelte
index 5c82a7ba2d..6c4335fcd4 100644
--- a/packages/site-kit/src/lib/docs/Tooltip.svelte
+++ b/packages/site-kit/src/lib/docs/Tooltip.svelte
@@ -64,7 +64,7 @@
 
 <style>
 	.tooltip-container {
-		--bg: var(--sk-back-2);
+		--bg: var(--sk-bg-2);
 		--arrow-size: 0.6rem;
 		display: none;
 		position: absolute;
diff --git a/packages/site-kit/src/lib/home/TrySection.svelte b/packages/site-kit/src/lib/home/TrySection.svelte
index 6392b1f01d..4523cb1787 100644
--- a/packages/site-kit/src/lib/home/TrySection.svelte
+++ b/packages/site-kit/src/lib/home/TrySection.svelte
@@ -42,7 +42,7 @@
 	.try {
 		width: 100%;
 		margin: 0 auto;
-		color: var(--sk-text-1);
+		color: var(--sk-fg-1);
 	}
 
 	.copy {
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index cb3984d5ab..8f952595ec 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -8,7 +8,6 @@ import * as marked from 'marked';
 import { codeToHtml, createCssVariablesTheme } from 'shiki';
 import { transformerTwoslash } from '@shikijs/twoslash';
 import { SHIKI_LANGUAGE_MAP, slugify, smart_quotes, transform } from './utils';
-import { fileURLToPath } from 'node:url';
 
 interface SnippetOptions {
 	file: string | null;
@@ -24,9 +23,7 @@ const METADATA_REGEX =
 
 const theme = createCssVariablesTheme({
 	name: 'css-variables',
-	variablePrefix: '--shiki-',
-	variableDefaults: {},
-	fontStyle: true
+	variablePrefix: '--shiki-'
 });
 
 // Hash the contents of this file and its dependencies so that we get a new cache in case we have changed
diff --git a/packages/site-kit/src/lib/nav/MobileMenu.svelte b/packages/site-kit/src/lib/nav/MobileMenu.svelte
index 149ebeae27..353c96e0ea 100644
--- a/packages/site-kit/src/lib/nav/MobileMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileMenu.svelte
@@ -208,7 +208,7 @@
 		bottom: 0;
 		height: 99.5%;
 		border-radius: 1rem 1rem 0 0;
-		background: var(--background, var(--sk-back-2));
+		background: var(--background, var(--sk-bg-2));
 		will-change: height;
 		transition: 0.3s var(--quint-out);
 		transition-property: none;
@@ -265,7 +265,7 @@
 		& :global(a) {
 			position: relative;
 			padding: 0.3rem 0;
-			color: var(--sk-text-3);
+			color: var(--sk-fg-3);
 			font: var(--sk-font-ui-medium);
 			width: 100%;
 			height: 100%;
@@ -302,8 +302,8 @@
 		justify-content: start;
 		gap: 1rem;
 		font: var(--sk-font-ui-medium);
-		color: var(--sk-text-3);
-		background-color: var(--sk-back-2);
+		color: var(--sk-fg-3);
+		background-color: var(--sk-bg-2);
 		width: 50%;
 		height: 4.8rem;
 		padding: 0 var(--sk-page-padding-side);
@@ -332,7 +332,7 @@
 		hr {
 			margin: 0.5rem 0;
 			height: 1px;
-			background: var(--sk-back-6);
+			background: var(--sk-border-dark);
 			border: none;
 		}
 	}
diff --git a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
index 8251e2b001..24ccad0d22 100644
--- a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
@@ -94,7 +94,7 @@
 		padding-bottom: 0.8rem;
 		font: var(--sk-font-ui-medium);
 		text-transform: uppercase;
-		color: var(--sk-text-1);
+		color: var(--sk-fg-1);
 	}
 
 	h2 {
@@ -102,16 +102,16 @@
 		top: 0;
 		z-index: 1;
 		padding: 1rem 0;
-		background-color: var(--sk-back-2);
+		background-color: var(--sk-bg-2);
 	}
 
 	a {
 		display: flex;
 		align-items: center;
-		color: var(--sk-text-2);
+		color: var(--sk-fg-2);
 
 		&[aria-current='page'] {
-			color: var(--sk-theme-1) !important;
+			color: var(--sk-fg-accent) !important;
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 5806d35b6f..df7248d052 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-back-2);
+		background-color: var(--sk-bg-2);
 		font-family: var(--sk-font-family-body);
 		user-select: none;
 		isolation: isolate;
@@ -212,7 +212,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	.current-section {
 		display: flex;
 		align-items: center;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		margin-left: 0.4em;
 		font: var(--sk-font-ui-medium);
 	}
@@ -228,7 +228,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	}
 
 	button {
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 	}
 
 	.links {
@@ -237,7 +237,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		align-items: center;
 
 		a {
-			color: var(--sk-text-2);
+			color: var(--sk-fg-2);
 			font: var(--sk-font-ui-medium);
 
 			white-space: nowrap;
@@ -248,11 +248,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			outline-offset: -2px;
 
 			&:hover {
-				box-shadow: inset 0 -1px 0 0 var(--sk-back-5);
+				box-shadow: inset 0 -1px 0 0 var(--sk-bg-5);
 			}
 
 			&[aria-current='page'] {
-				color: var(--sk-theme-1);
+				color: var(--sk-fg-accent);
 				box-shadow: inset 0 -1px 0 0 currentColor;
 			}
 
@@ -315,7 +315,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			position: relative;
 			display: none;
 			width: 100%;
-			background: var(--sk-back-1);
+			background: var(--sk-bg-1);
 			padding: 1rem var(--sk-page-padding-side);
 		}
 
diff --git a/packages/site-kit/src/lib/nav/PreloadingIndicator.svelte b/packages/site-kit/src/lib/nav/PreloadingIndicator.svelte
index 06fa1d76ae..7364c29b4f 100644
--- a/packages/site-kit/src/lib/nav/PreloadingIndicator.svelte
+++ b/packages/site-kit/src/lib/nav/PreloadingIndicator.svelte
@@ -57,7 +57,7 @@
 		left: 0;
 		top: 0;
 		height: 100%;
-		background-color: var(--sk-theme-1);
+		background-color: var(--sk-fg-accent);
 		transition: width 0.4s;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/SkipLink.svelte b/packages/site-kit/src/lib/nav/SkipLink.svelte
index bd608efa5b..50cffe2390 100644
--- a/packages/site-kit/src/lib/nav/SkipLink.svelte
+++ b/packages/site-kit/src/lib/nav/SkipLink.svelte
@@ -13,9 +13,9 @@ Accessibility helper component to skip to the main content
 
 <style>
 	a {
-		background: var(--sk-back-1);
-		color: var(--sk-text-2);
-		border: 2px solid var(--sk-text-1);
+		background: var(--sk-bg-1);
+		color: var(--sk-fg-2);
+		border: 2px solid var(--sk-fg-1);
 		padding: 8px;
 		position: absolute;
 		inset-block-start: 0;
diff --git a/packages/site-kit/src/lib/search/Search.svelte b/packages/site-kit/src/lib/search/Search.svelte
index 9dac8cd464..e9ac04945f 100644
--- a/packages/site-kit/src/lib/search/Search.svelte
+++ b/packages/site-kit/src/lib/search/Search.svelte
@@ -72,8 +72,8 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 		border-radius: 3.5rem;
 		background:
 			no-repeat 0.6em 55% / 1.2em 1.2em url(../icons/search.svg),
-			var(--sk-back-4);
-		color: var(--sk-text-3);
+			var(--sk-bg-4);
+		color: var(--sk-fg-3);
 	}
 
 	input:focus + .shortcut {
@@ -82,11 +82,11 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 
 	input::placeholder {
 		text-transform: lowercase;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 	}
 
 	.shortcut {
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		position: absolute;
 		top: calc(50% - 0.9rem);
 		right: 0;
@@ -100,7 +100,7 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 
 	kbd {
 		display: none;
-		color: var(--sk-text-3);
+		color: var(--sk-fg-3);
 		font-size: inherit;
 		font-family: inherit;
 	}
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 706a2e2d73..919532364d 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -294,7 +294,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 	.search-box {
 		--padding: 1rem;
-		--background: var(--sk-back-2);
+		--background: var(--sk-bg-2);
 		/* background: var(--background); */
 		position: relative;
 		height: calc(100% - 2rem);
@@ -335,16 +335,12 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			height: 6rem;
 			border: none;
 			flex-shrink: 0;
-			color: var(--sk-text-1);
-			border-bottom: 1px solid var(--sk-back-6);
+			color: var(--sk-fg-1);
+			border-bottom: 1px solid var(--sk-border-dark);
 			background: inherit;
 
-			&::selection {
-				background-color: var(--sk-back-translucent);
-			}
-
 			&::placeholder {
-				color: var(--sk-text-2);
+				color: var(--sk-fg-2);
 				opacity: 0.3;
 			}
 
@@ -359,11 +355,11 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			top: 0;
 			height: 100%;
 			aspect-ratio: 1;
-			color: var(--sk-text-4);
+			color: var(--sk-fg-4);
 
 			&:hover,
 			&:focus {
-				color: var(--sk-text-3);
+				color: var(--sk-fg-3);
 			}
 
 			&:focus-visible {
@@ -379,7 +375,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 		&:hover,
 		&:focus {
-			color: var(--sk-text-3);
+			color: var(--sk-fg-3);
 		}
 
 		&:focus-visible {
@@ -393,7 +389,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			text-transform: uppercase;
 			background: none;
 			font: var(--sk-font-ui-medium);
-			color: var(--sk-text-4);
+			color: var(--sk-fg-4);
 			width: 100%;
 			height: 100%;
 		}
@@ -420,11 +416,11 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			gap: 1rem;
 
 			&:hover {
-				background: var(--sk-back-3);
+				background: var(--sk-bg-3);
 			}
 
 			a {
-				color: var(--sk-text-2);
+				color: var(--sk-fg-2);
 				display: block;
 				text-decoration: none;
 				margin: 0 -0.5rem;
@@ -439,16 +435,16 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			button[aria-label='Delete'] {
 				width: 3.2rem;
 				height: 3.2rem;
-				color: var(--sk-text-4);
-				background-color: var(--sk-back-2);
+				color: var(--sk-fg-4);
+				background-color: var(--sk-bg-2);
 
 				&:hover {
 					outline: none;
-					color: var(--sk-text-3);
+					color: var(--sk-fg-3);
 				}
 
 				&:focus-visible {
-					color: var(--sk-text-3);
+					color: var(--sk-fg-3);
 					outline-offset: -3px;
 				}
 			}
@@ -468,7 +464,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		background: var(--background);
 		padding: var(--padding);
 		font: var(--sk-font-ui-medium);
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 		text-transform: uppercase;
 		pointer-events: all;
 
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 6b83731fd9..66d8c45ce6 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -80,7 +80,7 @@
 			background: var(--background);
 			top: 0;
 			display: block;
-			color: var(--sk-text-4);
+			color: var(--sk-fg-4);
 			text-transform: uppercase;
 			padding: calc(0.5 * var(--padding)) var(--padding);
 			font: var(--sk-font-ui-medium);
@@ -149,7 +149,7 @@
 		}
 
 		&:hover {
-			--background: var(--sk-back-3);
+			--background: var(--sk-bg-3);
 			text-decoration: none;
 		}
 
@@ -169,7 +169,7 @@
 			width: 100%;
 			overflow: hidden;
 			font: var(--sk-font-ui-medium);
-			color: var(--sk-text-2);
+			color: var(--sk-fg-2);
 
 			span {
 				display: inline;
@@ -177,7 +177,7 @@
 				&:not(:last-child)::after {
 					content: ' • ';
 					position: relative;
-					color: var(--sk-text-4);
+					color: var(--sk-fg-4);
 					font: var(--sk-font-ui-small);
 					top: -0.1rem;
 				}
@@ -189,7 +189,7 @@
 			width: calc(100% + 1rem);
 			left: -0.5rem;
 			overflow: hidden;
-			color: var(--sk-text-1);
+			color: var(--sk-fg-1);
 
 			&::before,
 			&::after {
@@ -212,7 +212,7 @@
 			}
 
 			span {
-				color: var(--sk-text-3);
+				color: var(--sk-fg-3);
 				font: var(--sk-font-ui-small);
 				margin: 0.4rem 0 0 0;
 			}
@@ -227,7 +227,7 @@
 		:global(mark) {
 			--highlight-color: rgba(255, 255, 0, 0.4);
 			background: none;
-			color: var(--sk-text-1);
+			color: var(--sk-fg-1);
 			background: var(--highlight-color);
 			outline: 2px solid var(--highlight-color);
 		}
diff --git a/packages/site-kit/src/lib/search/SearchResults.svelte b/packages/site-kit/src/lib/search/SearchResults.svelte
index 50158c7c6b..980162c06b 100644
--- a/packages/site-kit/src/lib/search/SearchResults.svelte
+++ b/packages/site-kit/src/lib/search/SearchResults.svelte
@@ -32,9 +32,9 @@ Renders a list of search results
 	.info {
 		padding: var(--padding);
 		font: var(--sk-font-ui-medium);
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 		text-transform: uppercase;
-		background-color: var(--sk-back-2);
+		background-color: var(--sk-bg-2);
 		border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
 		pointer-events: all;
 		margin: 0;
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 506fd6fc37..77437101ba 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -20,8 +20,8 @@ body {
 body {
 	font-family: var(--sk-font-family-body);
 	line-height: 1.5;
-	color: var(--sk-text-2);
-	background-color: var(--sk-back-1);
+	color: var(--sk-fg-2);
+	background-color: var(--sk-bg-1);
 	width: 100%;
 	tab-size: 2;
 	-moz-tab-size: 2;
@@ -33,11 +33,10 @@ body {
 	padding: 0;
 	scrollbar-width: thin;
 	scrollbar-color: var(--sk-scrollbar) transparent;
-	-webkit-tap-highlight-color: hsla(var(--sk-theme-1-hsl), 0.1);
 }
 
 *:focus-visible {
-	outline: 2px solid hsla(var(--sk-theme-1-hsl), 0.6);
+	outline: 2px solid var(--sk-fg-accent);
 	border-radius: var(--sk-border-radius);
 }
 
@@ -84,7 +83,7 @@ h2,
 h3 {
 	position: relative;
 	text-wrap: balance;
-	color: var(--sk-text-1);
+	color: var(--sk-fg-1);
 }
 
 strong {
@@ -97,8 +96,8 @@ kbd {
 	position: relative;
 	border-radius: var(--sk-border-radius);
 	white-space: nowrap;
-	color: var(--sk-text-2);
-	background: var(--sk-back-4);
+	color: var(--sk-fg-2);
+	background: var(--sk-bg-4);
 	line-height: 1.7;
 }
 
@@ -130,7 +129,7 @@ header {
 }
 
 ::selection {
-	background: var(--sk-selection-color);
+	background: var(--sk-bg-selection);
 }
 
 /*	opinionated styles --------------------- */
@@ -162,12 +161,12 @@ button {
 }
 
 button[disabled] {
-	color: var(--sk-text-4);
+	color: var(--sk-fg-4);
 }
 
 /*  links ------------------------------------- */
 a {
-	color: var(--sk-theme-1);
+	color: var(--sk-fg-accent);
 }
 
 /*  tables --------------------------------- */
diff --git a/packages/site-kit/src/lib/styles/text.css b/packages/site-kit/src/lib/styles/text.css
index 508789514a..d78c55301a 100644
--- a/packages/site-kit/src/lib/styles/text.css
+++ b/packages/site-kit/src/lib/styles/text.css
@@ -14,7 +14,7 @@
 	padding-left: 1rem;
 	border-radius: 0;
 	box-shadow: none;
-	border-top: 1px solid var(--sk-back-4);
+	border-top: 1px solid var(--sk-bg-4);
 }
 
 .ts-block-property-details {
@@ -39,7 +39,7 @@
 	.tag {
 		font: var(--sk-font-ui-medium);
 		text-transform: uppercase;
-		color: var(--sk-text-4);
+		color: var(--sk-fg-4);
 	}
 }
 
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index f0e403cbdd..14e5eab87c 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -1,205 +1,9 @@
-/*
-
-!IMPORTANT: The tokens for light and dark mode are duplicated, if you change a token for dark mode,
-!you should change that for the other dark mode too
-
-*/
+@import './tokens/colours.css';
+@import './tokens/dimensions.css';
+@import './tokens/typography.css';
 
 :root {
-	color-scheme: light;
-
-	--sk-back-h: 206;
-	--sk-selection-color: hsla(204, 100%, 63%, 0.3);
-
-	/* dimensions */
-	--sk-nav-height: 6rem;
-	--sk-secondary-nav-height: 5rem;
-	--sk-page-padding-top: 6rem;
-	--sk-page-padding-bottom: 8rem;
-	--sk-page-padding-side: 1.6rem;
-	--sk-thick-border-width: 0.3rem;
-	--sk-border-radius: 0.4rem;
-	--sk-page-content-width: 76rem;
-	--sk-banner-height: 0px;
-	--sk-pane-controls-height: 4.2rem;
-
-	/* typography (prefer `font: --sk-font-{x}` over `font-family` and `font-size` rules */
-	--sk-font-family-ui: 'Fira Sans', -apple-system, sans-serif;
-	--sk-font-family-body: Georgia, serif;
-	--sk-font-family-heading: 'DM Serif Display', Georgia, serif;
-	--sk-font-family-mono: 'Fira Mono', monospace;
-
-	--sk-font-size-h1: 3.6rem;
-	--sk-font-size-h2: 3rem;
-	--sk-font-size-h3: 2.4rem;
-	--sk-font-size-body: 1.8rem;
-	--sk-font-size-body-small: 1.6rem;
-	--sk-font-size-ui-small: 1.3rem;
-	--sk-font-size-ui-medium: 1.6rem;
-	--sk-font-size-ui-large: 3rem;
-	--sk-font-size-mono: 1.4rem;
-
-	/* doing it this way (rather than just `1.5`) means it has a unit, and can be used elsewhere */
-	--sk-line-height-body: calc(1.5 * var(--sk-font-size-body));
-	--sk-line-height-body-small: calc(1.5 * var(--sk-font-size-body-small));
-
-	--sk-font-h1: 500 var(--sk-font-size-h1) / 1.2 var(--sk-font-family-heading);
-	--sk-font-h2: 500 var(--sk-font-size-h2) / 1.2 var(--sk-font-family-heading);
-	--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)
-		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);
-	--sk-font-ui-large: 400 var(--sk-font-size-ui-large) / 1.5 var(--sk-font-family-ui);
-	--sk-font-mono: 400 var(--sk-font-size-mono) / 1.7 var(--sk-font-family-mono);
-
-	/* Base colors */
-	--sk-theme-1-hsl: 12, 93%, 43%;
-
-	--sk-theme-1: hsl(var(--sk-theme-1-hsl));
-
-	--sk-back-1: hsl(0, 0%, 100%);
-	--sk-back-2: hsl(0, 0%, 100%);
-	--sk-back-3: hsl(0, 0%, 99%);
-	--sk-back-4: hsl(0, 0%, 95%);
-	--sk-back-5: hsl(0, 0%, 92%);
-	--sk-back-6: hsl(0, 0%, 86%);
-
-	--sk-text-1: hsl(0, 0%, 5%);
-	--sk-text-2: hsl(0, 0%, 12%);
-	--sk-text-3: hsl(0, 0%, 27%);
-	--sk-text-4: hsl(0, 0%, 45%);
-	--sk-scrollbar: rgba(0, 0, 0, 0.3);
-	--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
-
-	/* same in light mode, different in dark mode */
-	--sk-theme-1-variant: var(--sk-theme-1);
-
-	--sk-code-base: var(--sk-text-2);
-	--sk-code-comment: var(--sk-text-4);
-	--sk-code-keyword: hsl(204, 100%, 38%);
-	--sk-code-function: var(--sk-theme-1);
-	--sk-code-string: hsl(30, 100%, 30%);
-	--sk-code-number: hsl(120, 100%, 25%);
-	--sk-code-template-string: hsl(2, 80%, 47%);
-	--sk-code-tags: var(--sk-code-function);
-	--sk-code-important: var(--sk-code-string);
-	--sk-code-diff-base: hsla(0, 0%, 0%, 0.6);
-	--sk-code-diff-inserted: hsl(120, 100%, 25%);
-	--sk-code-diff-removed: hsl(2, 80%, 47%);
-
-	--shiki-color-text: var(--sk-code-base);
-	--shiki-token-constant: var(--sk-code-base);
-	--shiki-token-string: var(--sk-code-string);
-	--shiki-token-comment: var(--sk-code-comment);
-	--shiki-token-keyword: var(--sk-code-keyword);
-	--shiki-token-parameter: var(--sk-code-base);
-	--shiki-token-function: var(--sk-code-function);
-	--shiki-token-string-expression: var(--sk-code-string);
-	--shiki-token-punctuation: var(--sk-code-base);
-	--shiki-token-link: var(--sk-code-keyword);
-
-	--sk-text-warning-hsl: 32, 95%, 44%;
-	--sk-text-warning: hsl(var(--sk-text-warning-hsl));
-
-	/* used for coloured backgrounds e.g. blockquotes */
-	--sk-back-translucent: hsla(0, 0%, 0%, 0.1);
-	--sk-text-translucent: hsla(0, 0%, 0%, 0.7);
-
-	/* overrides */
-	--shiki-color-background: var(--sk-back-2);
-
-	/* raised buttons */
-	--sk-raised-color: var(--sk-back-4) var(--sk-back-5) var(--sk-back-5) var(--sk-back-4);
-	--sk-raised-width: 1px 2px 2px 1px;
-	--sk-raised-hover-color: var(--sk-back-5) var(--sk-back-6) var(--sk-back-6) var(--sk-back-5);
-	--sk-raised-active-color: var(--sk-back-6) var(--sk-back-5) var(--sk-back-5) var(--sk-back-6);
-	--sk-raised-active-width: 2px 1px 1px 2px;
-
 	/* this is necessary for elements with filters on safari, because safari is a uniquely awful piece of software.
 	   the 0.01 prevents Vite from optimising it to `translate(0, 0)`, which doesn't fix anything */
 	--safari-fix: translate3d(0, 0, 0.01);
-
-	/* set at 1.75x so if you zoom +/-10% from common settings it won't switch your font */
-	@media (min-resolution: 1.75x) {
-		--sk-font-family-body: 'EB Garamond', Georgia, serif;
-		--sk-font-size-body: 2.2rem;
-		--sk-font-size-body-small: 2rem;
-	}
-
-	&.font-boring {
-		--sk-font-family-body: 'Atkinson Hyperlegible', sans-serif;
-		--sk-font-size-body: 1.9rem;
-		--sk-font-size-body-small: 1.7rem;
-
-		p code {
-			font-size: 0.75em;
-		}
-	}
-
-	&.dark {
-		color-scheme: dark;
-		-webkit-font-smoothing: antialiased;
-
-		--sk-back-hue: 220;
-
-		--sk-back-1: hsl(var(--sk-back-hue), 15%, 8%);
-		--sk-back-2: hsl(var(--sk-back-hue), 15%, 15%);
-		--sk-back-3: hsl(var(--sk-back-hue), 15%, 12%);
-		--sk-back-4: hsl(var(--sk-back-hue), 15%, 22%);
-		--sk-back-5: hsl(var(--sk-back-hue), 15%, 25%);
-		--sk-back-6: hsl(var(--sk-back-hue), 15%, 32%);
-		--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
-		--sk-theme-1-hsl: 12, 94%, 62%;
-		--sk-text-1: hsl(var(--sk-back-hue), 10%, 90%);
-		--sk-text-2: hsl(var(--sk-back-hue), 10%, 80%);
-		--sk-text-3: hsl(var(--sk-back-hue), 10%, 65%);
-		--sk-text-4: hsl(var(--sk-back-hue), 10%, 45%);
-		--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
-		--sk-scrollbar: rgba(255, 255, 255, 0.3);
-		--sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5));
-
-		--sk-theme-1-variant: hsl(15, 100%, 35%);
-
-		--sk-text-warning-hsl: 32, 67%, 56%;
-
-		--sk-code-base: hsl(45, 7%, 75%);
-		--sk-code-comment: hsl(0, 0%, 55%);
-		--sk-code-keyword: hsl(204, 88%, 65%);
-		--sk-code-function: hsl(19, 67%, 75%);
-		--sk-code-string: hsl(41, 37%, 68%);
-		--sk-code-number: hsl(120, 100%, 25%);
-		--sk-code-template-string: hsl(2, 80%, 47%);
-		--sk-code-tags: var(--sk-code-function);
-		--sk-code-important: var(--sk-code-string);
-
-		--sk-code-diff-base: hsla(0, 0%, 100%, 0.5);
-		--sk-code-diff-inserted: hsl(120, 46%, 48%);
-		--sk-code-diff-removed: hsl(2, 64%, 70%);
-
-		/* overrides */
-		--shiki-color-background: var(--sk-back-3);
-
-		/* raised buttons */
-		--sk-raised-color: var(--sk-back-5) var(--sk-back-3) var(--sk-back-3) var(--sk-back-5);
-		--sk-raised-hover-color: var(--sk-back-6) var(--sk-back-3) var(--sk-back-3) var(--sk-back-6);
-		--sk-raised-active-color: var(--sk-back-3) var(--sk-back-6) var(--sk-back-6) var(--sk-back-3);
-	}
-}
-
-@media screen and (min-width: 480px) {
-	:root {
-		--sk-page-padding-side: 3.2rem;
-	}
-}
-
-@media screen and (min-width: 800px) {
-	:root {
-		--sk-font-size-h1: 5.4rem;
-		--sk-page-padding-top: 8rem;
-		--sk-page-padding-side: 4.8rem;
-		--sk-secondary-nav-height: 6rem;
-	}
 }
diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css
new file mode 100644
index 0000000000..266114e116
--- /dev/null
+++ b/packages/site-kit/src/lib/styles/tokens/colours.css
@@ -0,0 +1,88 @@
+/*
+
+!IMPORTANT: The tokens for light and dark mode are duplicated, if you change a token for dark mode,
+!you should change that for the other dark mode too
+
+*/
+
+:root {
+	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-accent: hsl(12, 93%, 43%);
+
+	--shiki-color-text: var(--sk-fg-2);
+	--shiki-token-constant: var(--shiki-color-text);
+	--shiki-token-string: hsl(30, 100%, 30%);
+	--shiki-token-comment: var(--sk-fg-4);
+	--shiki-token-keyword: hsl(204, 100%, 38%);
+	--shiki-token-parameter: var(--shiki-color-text);
+	--shiki-token-function: var(--sk-fg-accent);
+	--shiki-token-string-expression: var(--shiki-token-string);
+	--shiki-token-punctuation: var(--shiki-color-text);
+	--shiki-token-link: var(--shiki-token-keyword);
+
+	/* 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-5: hsl(0, 0%, 92%);
+	--sk-bg-accent: var(--sk-fg-accent);
+	--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
+
+	/* Border colors */
+	--sk-border-light: hsl(0, 0%, 95%);
+	--sk-border-medium: hsl(0, 0%, 92%);
+	--sk-border-dark: hsl(0, 0%, 86%);
+
+	/* Misc */
+	--sk-scrollbar: rgba(0, 0, 0, 0.3);
+	--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
+
+	/* overrides */
+	--shiki-color-background: var(--sk-bg-2);
+}
+
+:root.dark {
+	color-scheme: dark;
+
+	--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-accent: hsl(12, 94%, 62%);
+
+	--shiki-color-text: hsl(45, 7%, 75%);
+	--shiki-token-comment: hsl(0, 0%, 55%);
+	--shiki-token-keyword: hsl(204, 88%, 65%);
+	--shiki-token-function: hsl(19, 67%, 75%);
+	--shiki-token-string: hsl(41, 37%, 68%);
+
+	/* 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-5: hsl(var(--sk-bg-hue), 15%, 25%);
+	--sk-bg-accent: hsl(15, 100%, 35%);
+
+	/* Border colours */
+	--sk-border-light: hsl(var(--sk-bg-hue), 15%, 32%);
+	--sk-border-medium: var(--sk-bg-5);
+	--sk-border-dark: var(--sk-bg-3);
+
+	/* Misc */
+	--sk-scrollbar: rgba(255, 255, 255, 0.3);
+	--sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5));
+
+	/* overrides */
+	--shiki-color-background: var(--sk-bg-3);
+}
diff --git a/packages/site-kit/src/lib/styles/tokens/dimensions.css b/packages/site-kit/src/lib/styles/tokens/dimensions.css
new file mode 100644
index 0000000000..ad12d58440
--- /dev/null
+++ b/packages/site-kit/src/lib/styles/tokens/dimensions.css
@@ -0,0 +1,23 @@
+:root {
+	--sk-nav-height: 6rem;
+	--sk-secondary-nav-height: 5rem;
+	--sk-page-padding-top: 6rem;
+	--sk-page-padding-bottom: 8rem;
+	--sk-page-padding-side: 1.6rem;
+	--sk-thick-border-width: 0.3rem;
+	--sk-border-radius: 0.4rem;
+	--sk-border-radius-inner: 0.2rem;
+	--sk-page-content-width: 76rem;
+	--sk-banner-height: 0px;
+	--sk-pane-controls-height: 4.2rem;
+
+	@media screen and (min-width: 480px) {
+		--sk-page-padding-side: 3.2rem;
+	}
+
+	@media screen and (min-width: 800px) {
+		--sk-page-padding-top: 8rem;
+		--sk-page-padding-side: 4.8rem;
+		--sk-secondary-nav-height: 6rem;
+	}
+}
diff --git a/packages/site-kit/src/lib/styles/tokens/typography.css b/packages/site-kit/src/lib/styles/tokens/typography.css
new file mode 100644
index 0000000000..8aac82de84
--- /dev/null
+++ b/packages/site-kit/src/lib/styles/tokens/typography.css
@@ -0,0 +1,59 @@
+/* Note: prefer `font: --sk-font-{x}` over `font-family` and `font-size` rules */
+
+:root {
+	--sk-font-family-ui: 'Fira Sans', -apple-system, sans-serif;
+	--sk-font-family-body: Georgia, serif;
+	--sk-font-family-heading: 'DM Serif Display', Georgia, serif;
+	--sk-font-family-mono: 'Fira Mono', monospace;
+
+	--sk-font-size-h1: 3.6rem;
+	--sk-font-size-h2: 3rem;
+	--sk-font-size-h3: 2.4rem;
+	--sk-font-size-body: 1.8rem;
+	--sk-font-size-body-small: 1.6rem;
+	--sk-font-size-ui-small: 1.3rem;
+	--sk-font-size-ui-medium: 1.6rem;
+	--sk-font-size-ui-large: 3rem;
+	--sk-font-size-mono: 1.4rem;
+
+	/* doing it this way (rather than just `1.5`) means it has a unit, and can be used elsewhere */
+	--sk-line-height-body: calc(1.5 * var(--sk-font-size-body));
+	--sk-line-height-body-small: calc(1.5 * var(--sk-font-size-body-small));
+
+	--sk-font-h1: 500 var(--sk-font-size-h1) / 1.2 var(--sk-font-family-heading);
+	--sk-font-h2: 500 var(--sk-font-size-h2) / 1.2 var(--sk-font-family-heading);
+	--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)
+		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);
+	--sk-font-ui-large: 400 var(--sk-font-size-ui-large) / 1.5 var(--sk-font-family-ui);
+	--sk-font-mono: 400 var(--sk-font-size-mono) / 1.7 var(--sk-font-family-mono);
+
+	/* set at 1.75x so if you zoom +/-10% from common settings it won't switch your font */
+	@media (min-resolution: 1.75x) {
+		--sk-font-family-body: 'EB Garamond', Georgia, serif;
+		--sk-font-size-body: 2.2rem;
+		--sk-font-size-body-small: 2rem;
+	}
+
+	&.font-boring {
+		--sk-font-family-body: 'Atkinson Hyperlegible', sans-serif;
+		--sk-font-size-body: 1.9rem;
+		--sk-font-size-body-small: 1.7rem;
+
+		p code {
+			font-size: 0.75em;
+		}
+	}
+
+	&.dark {
+		-webkit-font-smoothing: antialiased;
+	}
+
+	@media screen and (min-width: 800px) {
+		--sk-font-size-h1: 5.4rem;
+	}
+}
diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css
index 440a4fb550..67998a7ab2 100644
--- a/packages/site-kit/src/lib/styles/utils/buttons.css
+++ b/packages/site-kit/src/lib/styles/utils/buttons.css
@@ -1,3 +1,25 @@
+:root {
+	/* raised buttons */
+	--sk-raised-color: var(--sk-border-light) var(--sk-border-medium) var(--sk-border-medium)
+		var(--sk-border-light);
+	--sk-raised-hover-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark)
+		var(--sk-border-medium);
+	--sk-raised-active-color: var(--sk-border-dark) var(--sk-border-medium) var(--sk-border-medium)
+		var(--sk-border-dark);
+	--sk-raised-width: 1px 2px 2px 1px;
+	--sk-raised-active-width: 2px 1px 1px 2px;
+
+	&.dark {
+		/* raised buttons */
+		--sk-raised-color: var(--sk-border-medium) var(--sk-border-dark) var(--sk-border-dark)
+			var(--sk-border-medium);
+		--sk-raised-hover-color: var(--sk-border-light) var(--sk-border-dark) var(--sk-border-dark)
+			var(--sk-border-light);
+		--sk-raised-active-color: var(--sk-border-dark) var(--sk-border-light) var(--sk-border-light)
+			var(--sk-border-dark);
+	}
+}
+
 .raised {
 	border-radius: var(--sk-border-radius);
 	border-style: solid;
@@ -10,7 +32,7 @@
 			hsla(12, 93%, 70%);
 		--sk-raised-active-color: hsla(12, 93%, 30%) hsla(12, 93%, 70%) hsla(12, 93%, 70%)
 			hsla(12, 93%, 30%);
-		background: var(--sk-theme-1-variant);
+		background: var(--sk-bg-accent);
 		color: white;
 
 		:root.dark & {
@@ -32,7 +54,7 @@
 	}
 
 	&:disabled {
-		border-color: var(--sk-back-5);
+		border-color: var(--sk-border-medium);
 		border-width: 1px;
 	}
 }
@@ -53,7 +75,7 @@ button:where(.tooltip, .tooltip-left)[aria-label]:where(:hover, :focus) {
 		width: var(--arrow-size);
 		height: var(--arrow-size);
 		position: absolute;
-		background: var(--sk-text-3);
+		background: var(--sk-fg-3);
 		top: calc(100% + var(--arrow-size) * 0.5);
 		left: calc(50% - var(--arrow-size) * 0.5);
 		rotate: 45deg;
@@ -65,8 +87,8 @@ button:where(.tooltip, .tooltip-left)[aria-label]:where(:hover, :focus) {
 		top: calc(100% + var(--arrow-size));
 		left: 50%;
 		translate: -50% 0;
-		background: var(--sk-text-3);
-		color: var(--sk-back-4);
+		background: var(--sk-fg-3);
+		color: var(--sk-bg-4);
 		padding: 0.5em 0.8em;
 		border-radius: var(--sk-border-radius);
 		font: var(--sk-font-ui-small);
diff --git a/packages/site-kit/src/lib/styles/utils/dividers.css b/packages/site-kit/src/lib/styles/utils/dividers.css
index c43f3e1840..bca7ab4eb0 100644
--- a/packages/site-kit/src/lib/styles/utils/dividers.css
+++ b/packages/site-kit/src/lib/styles/utils/dividers.css
@@ -1,6 +1,6 @@
 .divider {
 	z-index: 2;
 	&::after {
-		background-color: var(--sk-back-5) !important;
+		background-color: var(--sk-bg-5) !important;
 	}
 }