diff --git a/apps/svelte.dev/src/lib/components/Modal.svelte b/apps/svelte.dev/src/lib/components/Modal.svelte
index 454db1b961..5685f1a16c 100644
--- a/apps/svelte.dev/src/lib/components/Modal.svelte
+++ b/apps/svelte.dev/src/lib/components/Modal.svelte
@@ -67,7 +67,6 @@
 		width: calc(100vw - 2rem);
 		max-width: 56rem;
 		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/SecondaryNav.svelte b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
index 90508a1c94..3d40548042 100644
--- a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
+++ b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
@@ -17,7 +17,6 @@
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
 		background-color: var(--sk-bg-2);
-		color: var(--sk-fg-2);
 		white-space: nowrap;
 		flex: 0;
 		gap: 1rem;
diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
index 3fc0a4d122..e48dd1fb5c 100644
--- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -156,7 +156,6 @@
 		padding: 0 0 0 3.2rem;
 		position: relative;
 		margin: 1rem 0;
-		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 
 		.avatar {
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 7be5043183..e66bb20a18 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-fg-2);
+		color: var(--sk-fg-1);
 		font: var(--sk-font-h3);
 	}
 
@@ -87,14 +87,14 @@
 
 			h2 {
 				font: var(--sk-font-h1);
-				color: var(--sk-fg-2);
+				color: var(--sk-fg-1);
 			}
 		}
 
 		a {
 			display: block;
 			text-decoration: none;
-			color: var(--sk-fg-2);
+			color: inherit;
 
 			&:hover h2 {
 				text-decoration: underline;
@@ -163,7 +163,7 @@
 			a {
 				display: block;
 				font: var(--sk-font-body);
-				color: var(--sk-fg-2);
+				color: inherit;
 			}
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index 6af1962320..06929a50e5 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -111,7 +111,7 @@
 
 	.options a {
 		display: block;
-		color: var(--sk-fg-2);
+		color: inherit;
 		margin: 1em -1.6rem;
 		padding: 1.6rem;
 		background-color: var(--sk-bg-1);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
index 36d97566a0..3b6a1eb799 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
@@ -77,7 +77,6 @@
 		border: 1px solid var(--sk-border);
 		/* TODO this should apply to all buttons/inputs? */
 		border-radius: var(--sk-border-radius);
-		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 		height: 3.2rem;
 	}
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 90f18514d5..46994e20e3 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
@@ -23,7 +23,7 @@
 
 {#if $menu_items}
 	<nav style="position: fixed; z-index: 5; top:{$menu_items.y}px; left:{$menu_items.x}px">
-		<div class="navbar" id="navbar">
+		<div class="context-menu">
 			<ul>
 				{#each $menu_items.items as item}
 					<li>
@@ -38,50 +38,39 @@
 <svelte:window on:click={() => menu_items.set(null)} />
 
 <style>
-	.navbar {
+	.context-menu {
 		display: inline-flex;
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		background-color: var(--back);
+		background-color: var(--sk-bg-2);
 		border-radius: var(--sk-border-radius);
 		overflow: hidden;
 		flex-direction: column;
-		filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.1));
+		filter: var(--sk-shadow);
 	}
 
 	ul {
 		margin: 0;
-		padding: 0;
-		background-color: var(--sk-bg-3);
-		border: 1px solid var(--sk-fg-accent);
+		padding: 0.5rem;
+		background-color: var(--sk-bg-2);
 	}
 
 	li {
 		display: block;
 		list-style-type: none;
-		width: 1fr;
-	}
-	li:hover {
-		background-color: var(--sk-bg-accent);
+
+		&:hover {
+			background-color: var(--sk-bg-4);
+		}
 	}
 
 	button {
-		color: var(--sk-fg-2);
+		display: block;
 		width: 100%;
+		height: 100%;
 		text-align: left;
 		border: 0px;
-		padding: 0.4rem 1rem 0.2rem 1rem;
+		padding: 1rem;
 		font: var(--sk-font-ui-small);
-	}
-
-	li:first-child button {
-		padding-top: 0.5rem;
-	}
-
-	li:last-child button {
-		padding-bottom: 0.4rem;
-	}
-
-	button:hover {
-		background-color: var(--back-api);
+		line-height: 1;
+		border-radius: var(--sk-border-radius);
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
index b468b09dff..9ec7d1d07f 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -121,11 +121,6 @@
 		background: var(--bg) var(--icon) no-repeat;
 		background-position: calc(var(--inset) - 0.5rem) 50%;
 		background-size: 1.2rem;
-		color: var(--sk-fg-2);
-	}
-
-	li:hover {
-		--bg: var(--sk-bg-3);
 	}
 
 	button,
@@ -141,7 +136,6 @@
 
 	input {
 		background: var(--sk-bg-1);
-		color: var(--sk-fg-2) !important;
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
 		border: 2px solid transparent;
 		padding: 0 0.5rem;
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index 219e2027ce..66c8a75428 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -126,7 +126,6 @@
 	.cm-panels {
 		font: var(--sk-font-ui-small);
 		background: var(--sk-bg-2);
-		color: var(--sk-fg-2);
 
 		&.cm-panels-top,
 		&.cm-panels-bottom {
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 7bf8a90aaa..4094f032cd 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -248,7 +248,6 @@
 		}
 
 		&.active {
-			color: var(--sk-fg-2, #333);
 			border-bottom: 1px solid var(--sk-fg-accent);
 		}
 	}
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index e537a480f3..064dda5819 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -40,11 +40,8 @@
 
 <style>
 	.options {
-		padding: 0 10px;
-		font-family: var(--sk-font-family-mono);
-		font-size: 13px;
-		color: var(--sk-fg-2);
-		line-height: 1.8;
+		padding: 0 1rem;
+		font: var(--sk-font-mono);
 	}
 
 	.option {
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index e9768528be..1340f0340f 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -170,7 +170,6 @@
 		border: none;
 		border-bottom: 1px solid transparent;
 		padding: 0 1rem;
-		color: var(--sk-fg-2);
 		border-radius: 0;
 
 		&[aria-current='true'] {
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index 4a52e836e0..f4831419d9 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -71,7 +71,6 @@
 	.panel-heading {
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
-		color: var(--sk-fg-2);
 		flex: 1;
 		text-align: left;
 	}
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 69036ebfe9..9b7ad4c321 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -349,7 +349,6 @@
 
 	/* TODO this stuff should live in global styles */
 	button {
-		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
 		display: block;
diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
index 440e83d755..a9d2c4730f 100644
--- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
@@ -166,6 +166,7 @@
 	.line {
 		--bg: var(--sk-bg-1);
 		--border: var(--sk-bg-3);
+		font: var(--sk-font-mono);
 		display: block;
 		position: relative;
 		width: 100%;
@@ -201,7 +202,6 @@
 		gap: 1rem;
 		width: 100%;
 		font-size: 1.2rem;
-		font-family: var(--sk-font-family-mono);
 		align-items: center;
 	}
 
@@ -219,7 +219,6 @@
 		grid-template-columns: minmax(0, auto) minmax(auto, 1fr);
 		grid-gap: 0 2rem;
 		font-size: 1.2rem;
-		font-family: var(--sk-font-family-mono);
 		margin: 0 1rem 0.4rem calc(1em + var(--indent));
 		overflow: hidden;
 
@@ -247,15 +246,14 @@
 		height: 1.4em;
 		padding: 0.5em;
 		border-radius: 0.4rem;
-		background-color: var(--sk-fg-3, #777);
+		background-color: var(--sk-fg-3);
 		color: var(--sk-bg-1);
 		font-size: 1rem;
 	}
 
 	.meta {
-		color: var(--sk-fg-2, #666);
-		font-family: var(--sk-font-family-body) !important;
-		font-size: 12px;
+		color: var(--sk-fg-4);
+		font: var(--sk-font-ui-small);
 	}
 
 	.meta-error {
diff --git a/packages/site-kit/src/lib/components/HoverMenu.svelte b/packages/site-kit/src/lib/components/HoverMenu.svelte
index 3587e71f27..9bc8302272 100644
--- a/packages/site-kit/src/lib/components/HoverMenu.svelte
+++ b/packages/site-kit/src/lib/components/HoverMenu.svelte
@@ -15,7 +15,7 @@
 		:global {
 			a,
 			button {
-				color: var(--sk-fg-2);
+				color: inherit;
 				padding: 1rem;
 				display: block;
 				font: var(--sk-font-ui-medium);
diff --git a/packages/site-kit/src/lib/components/ScreenToggle.svelte b/packages/site-kit/src/lib/components/ScreenToggle.svelte
index 15fac1f5c0..e0e4e6c214 100644
--- a/packages/site-kit/src/lib/components/ScreenToggle.svelte
+++ b/packages/site-kit/src/lib/components/ScreenToggle.svelte
@@ -16,7 +16,7 @@
 
 <!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="input-output-toggle">
-	<span class:active={!checked} style="text-align: right">{left}</span>
+	<span aria-current={!checked} style="text-align: right">{left}</span>
 	<span style="display:grid; place-items: center">
 		<Checkbox
 			{checked}
@@ -26,7 +26,7 @@
 			}}
 		/>
 	</span>
-	<span class:active={checked}>{right}</span>
+	<span aria-current={checked}>{right}</span>
 </label>
 
 <style>
@@ -46,11 +46,7 @@
 		z-index: 2;
 	}
 
-	span {
+	span[aria-current='false'] {
 		color: var(--sk-fg-4);
 	}
-
-	.active {
-		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 cbd6ffda91..89f5f43cc8 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -186,7 +186,7 @@
 						align-items: center;
 						font-size: 1.2rem;
 						font-family: var(--sk-font-family-mono);
-						color: var(--sk-fg-2);
+						color: inherit;
 					}
 
 					&::before {
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 182d1358e1..775935e4b1 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -86,7 +86,7 @@
 		transition: color 0.2s;
 		border-bottom: none;
 		padding: 0;
-		color: var(--sk-fg-2);
+		color: inherit;
 		user-select: none;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
index 49b98b06c2..bbe50a5a6a 100644
--- a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
+++ b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
@@ -107,7 +107,6 @@
 	a {
 		display: flex;
 		align-items: center;
-		color: var(--sk-fg-2);
 
 		&[aria-current='page'] {
 			color: var(--sk-fg-accent) !important;
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index a0689d170e..2b00324ee9 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -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-fg-2);
+			color: inherit;
 			font: var(--sk-font-ui-medium);
 
 			white-space: nowrap;
diff --git a/packages/site-kit/src/lib/nav/SkipLink.svelte b/packages/site-kit/src/lib/nav/SkipLink.svelte
index 548786cb38..c3ae77c9c7 100644
--- a/packages/site-kit/src/lib/nav/SkipLink.svelte
+++ b/packages/site-kit/src/lib/nav/SkipLink.svelte
@@ -16,7 +16,7 @@ Accessibility helper component to skip to the main content
 		display: flex;
 		align-items: center;
 		background: var(--sk-bg-1);
-		color: var(--sk-fg-2);
+		color: inherit;
 		height: calc(var(--sk-nav-height) - 2rem);
 		padding: 0 1rem;
 		position: absolute;
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 7464177aa3..75b5fdda5c 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -340,8 +340,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			background: inherit;
 
 			&::placeholder {
-				color: var(--sk-fg-2);
-				opacity: 0.3;
+				color: var(--sk-fg-4);
+				opacity: 0.5;
 			}
 
 			&:focus-visible {
@@ -420,7 +420,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			}
 
 			a {
-				color: var(--sk-fg-2);
+				color: inherit;
 				display: block;
 				text-decoration: none;
 				margin: 0 -0.5rem;
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 6bc79f6182..f5ac8abaf6 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -122,6 +122,7 @@
 		overflow: hidden;
 		background: var(--background);
 		font: var(--sk-font-ui-medium);
+		color: inherit;
 
 		&::before {
 			content: '';
@@ -169,7 +170,6 @@
 			width: 100%;
 			overflow: hidden;
 			font: var(--sk-font-ui-medium);
-			color: var(--sk-fg-2);
 
 			span {
 				display: inline;
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 77437101ba..7205d93ff3 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -96,7 +96,6 @@ kbd {
 	position: relative;
 	border-radius: var(--sk-border-radius);
 	white-space: nowrap;
-	color: var(--sk-fg-2);
 	background: var(--sk-bg-4);
 	line-height: 1.7;
 }