From 85557b172a7c6ce7b9765febda27e1f1aa09320f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 3 Oct 2024 11:58:25 -0400
Subject: [PATCH 1/6] simplify

---
 apps/svelte.dev/src/routes/+error.svelte      |  2 +-
 .../svelte.dev/src/routes/_home/Svelte.svelte |  2 +-
 apps/svelte.dev/src/routes/_home/common.css   |  9 --------
 .../svelte.dev/src/routes/search/+page.svelte |  3 +--
 .../src/routes/tutorial/[slug]/Loading.svelte |  3 ++-
 .../site-kit/src/lib/components/Text.svelte   | 18 +---------------
 packages/site-kit/src/lib/home/Blurb.svelte   |  9 --------
 .../site-kit/src/lib/home/TrySection.svelte   |  1 -
 packages/site-kit/src/lib/nav/Menu.svelte     |  9 --------
 .../src/lib/nav/NavContextMenu.svelte         | 19 ++++++++---------
 packages/site-kit/src/lib/styles/base.css     | 21 +++++++------------
 packages/site-kit/src/lib/styles/tokens.css   | 12 +++++------
 12 files changed, 28 insertions(+), 80 deletions(-)

diff --git a/apps/svelte.dev/src/routes/+error.svelte b/apps/svelte.dev/src/routes/+error.svelte
index f998884a3c..bb7939b096 100644
--- a/apps/svelte.dev/src/routes/+error.svelte
+++ b/apps/svelte.dev/src/routes/+error.svelte
@@ -62,7 +62,7 @@
 	}
 
 	h1 {
-		font-size: var(--sk-text-xxl);
+		font-size: var(--sk-font-size-h1);
 		margin: 0 0 0.5em 0;
 	}
 
diff --git a/apps/svelte.dev/src/routes/_home/Svelte.svelte b/apps/svelte.dev/src/routes/_home/Svelte.svelte
index 709631ea1c..e88b5451c4 100644
--- a/apps/svelte.dev/src/routes/_home/Svelte.svelte
+++ b/apps/svelte.dev/src/routes/_home/Svelte.svelte
@@ -78,7 +78,7 @@
 
 	.definition em {
 		font-style: normal;
-		font-size: var(--sk-text-xxl);
+		font-size: var(--sk-font-size-h1);
 		color: var(--sk-theme-1);
 	}
 
diff --git a/apps/svelte.dev/src/routes/_home/common.css b/apps/svelte.dev/src/routes/_home/common.css
index 80d47c279d..ae7cc517a2 100644
--- a/apps/svelte.dev/src/routes/_home/common.css
+++ b/apps/svelte.dev/src/routes/_home/common.css
@@ -7,11 +7,6 @@
 	--background-2: var(--sk-theme-2);
 }
 
-.home h2 {
-	font-size: var(--sk-text-xl);
-	line-height: 1.2;
-}
-
 .home .grid {
 	display: grid;
 	gap: 1em;
@@ -23,10 +18,6 @@
 }
 
 @media (min-width: 900px) {
-	.home h2 {
-		font-size: var(--sk-text-xxl);
-	}
-
 	.home .grid {
 		grid-template-columns: repeat(var(--columns), 1fr);
 		gap: 7rem;
diff --git a/apps/svelte.dev/src/routes/search/+page.svelte b/apps/svelte.dev/src/routes/search/+page.svelte
index 4498f9b1db..98be90b02a 100644
--- a/apps/svelte.dev/src/routes/search/+page.svelte
+++ b/apps/svelte.dev/src/routes/search/+page.svelte
@@ -44,9 +44,8 @@
 		width: 100%;
 		height: 100%;
 		font-family: inherit;
-		font-size: var(--sk-text-xl);
+		font-size: var(--sk-font-size-h2);
 		border: none;
-		/* border: 1px solid var(--sk-back-5); */
 		border-radius: var(--sk-border-radius);
 		padding: 2rem 2rem 2rem 5rem;
 		background: no-repeat 1rem 50% / 3rem 3rem url(/icons/search.svg);
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
index aa33b1ba60..7f92aa599d 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
@@ -160,7 +160,8 @@
 	}
 
 	h2 {
-		font-size: var(--sk-text-xl);
+		font-family: var(--sk-font-ui);
+		font-size: var(--sk-font-size-ui-large);
 	}
 
 	p {
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 7107d235da..22fc236596 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -68,22 +68,6 @@
 			font-size: var(--sk-text-m);
 		}
 
-		/* TODO is this still used? don't think so */
-		section {
-			max-width: var(--sk-line-max-width);
-			padding: 0 0 0 1rem;
-
-			h2,
-			h3,
-			h4 {
-				margin-left: -1rem;
-			}
-
-			a code {
-				color: inherit;
-			}
-		}
-
 		code {
 			white-space: pre-wrap;
 			padding: 0.2rem 0.4rem;
@@ -324,7 +308,7 @@
 				opacity: 0;
 				transition: opacity 0.2s;
 
-				:where(h2, h3, h4, h5, h6):hover & {
+				:where(h2, h3):hover & {
 					opacity: 1;
 				}
 			}
diff --git a/packages/site-kit/src/lib/home/Blurb.svelte b/packages/site-kit/src/lib/home/Blurb.svelte
index 540defa308..21096d3c21 100644
--- a/packages/site-kit/src/lib/home/Blurb.svelte
+++ b/packages/site-kit/src/lib/home/Blurb.svelte
@@ -36,11 +36,6 @@
 		grid-gap: 1rem;
 	}
 
-	.grid :global(h2) {
-		font-size: var(--sk-text-xl);
-		line-height: 1.2;
-	}
-
 	.grid {
 		display: grid;
 		gap: 1em;
@@ -52,10 +47,6 @@
 	}
 
 	@media (min-width: 900px) {
-		.grid :global(h2) {
-			font-size: var(--sk-text-xl);
-		}
-
 		.grid {
 			--columns: 3;
 
diff --git a/packages/site-kit/src/lib/home/TrySection.svelte b/packages/site-kit/src/lib/home/TrySection.svelte
index 2589265659..3f50f8040b 100644
--- a/packages/site-kit/src/lib/home/TrySection.svelte
+++ b/packages/site-kit/src/lib/home/TrySection.svelte
@@ -74,7 +74,6 @@
 		display: inline-block;
 		width: 25rem;
 		margin: 0 0 1rem;
-		font-size: var(--sk-text-xl);
 	}
 
 	@media (min-width: 900px) {
diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte
index 466590f1fc..f0a7f51686 100644
--- a/packages/site-kit/src/lib/nav/Menu.svelte
+++ b/packages/site-kit/src/lib/nav/Menu.svelte
@@ -430,10 +430,6 @@
 		padding-left: 1rem;
 	}
 
-	.viewport :global(a[aria-current='true']) {
-		background-color: hsla(var(--sk-theme-1-hsl), 0.05);
-	}
-
 	.viewport :global(a:hover),
 	.related-menu-arrow:hover {
 		border-radius: var(--sk-border-radius);
@@ -442,9 +438,4 @@
 
 		background-color: var(--sk-back-4);
 	}
-
-	.viewport :global(a[aria-current='true']:hover) {
-		background-color: hsla(var(--sk-theme-1-hsl), 0.05);
-		color: var(--sk-theme-1);
-	}
 </style>
diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
index 5ad348201d..1b8e6fa92c 100644
--- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte
+++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
@@ -34,16 +34,16 @@
 	{#if contents}
 		{#each contents as { sections, title }, index}
 			<section>
-				<h3>{title}</h3>
+				<h2>{title}</h2>
 
 				{#if sections.length !== 0}
 					<ul>
 						{#each sections as { title, sections: subsections }}
 							<li>
 								{#if title}
-									<h4>
+									<h3>
 										{title}
-									</h4>
+									</h3>
 								{/if}
 
 								<ul>
@@ -77,7 +77,7 @@
 	nav {
 		padding: 0.29rem;
 		padding-top: 0;
-		font-family: var(--sk-font-body);
+		font-family: var(--sk-font-ui);
 		overflow-y: auto;
 
 		height: 100%;
@@ -86,7 +86,6 @@
 	section > ul {
 		padding: 1rem;
 		padding-bottom: 0rem;
-
 		margin-bottom: 0;
 	}
 
@@ -104,8 +103,8 @@
 		transform: translateX(2.5%);
 	}
 
-	h3,
-	h4 {
+	h2,
+	h3 {
 		display: block;
 
 		padding-bottom: 0.8rem;
@@ -117,7 +116,7 @@
 		color: var(--sk-text-3);
 	}
 
-	h3 {
+	h2 {
 		position: sticky;
 		top: -1px;
 		z-index: 1;
@@ -160,7 +159,7 @@
 	}
 
 	[aria-current='true'] {
-		background-color: hsla(var(--sk-theme-1-hsl), 0.1) !important;
+		/* background-color: hsla(var(--sk-theme-1-hsl), 0.1) !important; */
 		color: var(--sk-theme-1) !important;
 		font-weight: 400;
 	}
@@ -174,7 +173,7 @@
 		font-size: 1.1rem;
 		font-weight: 600;
 		letter-spacing: 1px;
-		font-family: var(--sk-font-body);
+		font-family: var(--sk-font-ui);
 		line-height: 1;
 		color: var(--sk-theme-1);
 		background: hsla(var(--sk-theme-1-hsl), 0.1);
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 9800e8674f..570661a70c 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -62,26 +62,19 @@ a:hover {
 	text-decoration: underline;
 }
 
-h6 {
-	font-size: var(--sk-text-xs);
-}
-h5 {
-	font-size: var(--sk-text-s);
+h1 {
+	font-size: var(--sk-font-size-h1);
 }
-h4 {
-	font-size: var(--sk-text-s);
+
+h2 {
+	font-size: var(--sk-font-size-h2);
 }
+
 h3 {
 	font-size: var(--sk-text-m);
 }
-h2 {
-	font-size: var(--sk-text-l);
-}
-h1 {
-	font-size: var(--sk-text-xxl);
-}
 
-:where(h1, h2, h3, h4, h5, h6) {
+:where(h1, h2, h3) {
 	position: relative;
 	font-family: var(--sk-font-heading);
 	font-weight: 500;
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index f119e14e88..ef64ebd959 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -27,15 +27,16 @@
 	--sk-font-body: 'EB Garamond', 'Big Caslon', Palatino, 'Book Antiqua', Cambria, serif;
 	--sk-font-heading: 'DM Serif Display';
 	--sk-font-mono: 'Fira Mono', monospace;
-	--sk-text-xxl: 3.6rem;
-	--sk-text-xl: 3rem;
+
+	--sk-font-size-h1: 3.6rem;
+	--sk-font-size-h2: 3rem;
 	--sk-text-l: 2.4rem;
 	--sk-text-m: 2.1rem;
 	--sk-text-s: 1.8rem;
 	--sk-text-xs: 1.4rem;
-	--sk-line-max-width: 84rem;
+	--sk-font-size-ui-large: 3rem; /* TODO add regular/small */
 
-	--sk-focus-outline: 0 0 0 2px hsla(var(--sk-theme-1-hsl), 0.6);
+	--sk-line-max-width: 84rem;
 
 	/* Base colors */
 	--sk-theme-1-hsl: 12, 93%, 43%;
@@ -136,8 +137,7 @@
 
 @media screen and (min-width: 768px) {
 	:root {
-		--sk-text-xxl: 5.4rem;
-		--sk-text-xl: 3.6rem;
+		--sk-font-size-h1: 5.4rem;
 		--sk-page-padding-top: 8rem;
 		--sk-page-padding-side: 4.8rem;
 	}

From 5741a553896f0dfc2fcb6e890a76821bd6174c84 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 3 Oct 2024 12:20:21 -0400
Subject: [PATCH 2/6] more

---
 apps/svelte.dev/src/routes/blog/+page.svelte                | 6 ++----
 apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte | 2 +-
 packages/site-kit/src/lib/docs/DocsContents.svelte          | 2 +-
 packages/site-kit/src/lib/home/Footer.svelte                | 2 +-
 packages/site-kit/src/lib/styles/base.css                   | 2 +-
 packages/site-kit/src/lib/styles/tokens.css                 | 1 +
 6 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 6574d62e2d..8f096e2071 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -38,15 +38,13 @@
 		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
 		max-width: var(--sk-page-main-width);
 		margin: 0 auto;
+		text-wrap: balance;
 	}
 
 	h2 {
 		display: inline-block;
-		/* margin: 3.2rem 0 0.4rem 0; */
 		color: var(--sk-text-2);
-		max-width: 18em;
-		font-size: var(--sk-text-m);
-		font-weight: 400;
+		font-size: var(--sk-font-size-h3);
 	}
 
 	.post {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 9a2914d038..e434f8e86c 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -158,7 +158,7 @@
 			}
 
 			& label {
-				font-size: var(--sk-text-m);
+				font-size: var(--sk-font-size-h3);
 
 				font-weight: 500;
 				display: block;
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 10a75e2331..d7b4a0a57b 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -93,7 +93,7 @@
 	.section {
 		display: block;
 		padding-bottom: 0.8rem;
-		font-size: var(--sk-text-m);
+		font-size: var(--sk-font-size-h3);
 		font-family: var(--sk-font-heading);
 		font-weight: 500;
 		color: var(--sk-text-1);
diff --git a/packages/site-kit/src/lib/home/Footer.svelte b/packages/site-kit/src/lib/home/Footer.svelte
index 7c81b4c375..f1bd923d65 100644
--- a/packages/site-kit/src/lib/home/Footer.svelte
+++ b/packages/site-kit/src/lib/home/Footer.svelte
@@ -60,7 +60,7 @@
 	}
 
 	footer h2 {
-		font-size: var(--sk-text-m);
+		font-size: var(--sk-font-size-h3);
 		padding-bottom: 1rem;
 	}
 
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 570661a70c..8b993bab6e 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -71,7 +71,7 @@ h2 {
 }
 
 h3 {
-	font-size: var(--sk-text-m);
+	font-size: var(--sk-text-h3);
 }
 
 :where(h1, h2, h3) {
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index ef64ebd959..0cd74e8300 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -30,6 +30,7 @@
 
 	--sk-font-size-h1: 3.6rem;
 	--sk-font-size-h2: 3rem;
+	--sk-font-size-h3: 2.4rem;
 	--sk-text-l: 2.4rem;
 	--sk-text-m: 2.1rem;
 	--sk-text-s: 1.8rem;

From b6568aae9574e562b1ccb2eb36728b33cca406d0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 3 Oct 2024 12:41:01 -0400
Subject: [PATCH 3/6] more

---
 apps/svelte.dev/src/routes/_home/Hero.svelte  |  3 +-
 .../src/routes/_home/HeroSvelteKit.svelte     |  9 +--
 .../src/routes/_home/Supporters/index.svelte  |  3 +-
 .../svelte.dev/src/routes/_home/Svelte.svelte | 58 ++++++++++---------
 .../site-kit/src/lib/search/SearchBox.svelte  |  2 +-
 packages/site-kit/src/lib/styles/base.css     |  2 +-
 packages/site-kit/src/lib/styles/tokens.css   |  1 -
 7 files changed, 37 insertions(+), 41 deletions(-)

diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
index 5309508950..2b6d33b311 100644
--- a/apps/svelte.dev/src/routes/_home/Hero.svelte
+++ b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -72,7 +72,7 @@
 	}
 
 	strong {
-		font-size: var(--sk-text-l);
+		font-size: var(--sk-font-size-h2);
 		text-align: center;
 		font-family: var(--sk-font-heading);
 		text-transform: lowercase;
@@ -142,7 +142,6 @@
 
 		strong {
 			text-align: left;
-			font-size: calc(0.04 * var(--width));
 		}
 
 		.hero {
diff --git a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
index 9ba251fb72..e9ed88f883 100644
--- a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
+++ b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
@@ -5,7 +5,7 @@
 <section class="hero">
 	<div class="hero-contents">
 		<div class="hero-text">
-			<div class="tagline">Go full-stack with</div>
+			<h3 class="tagline">Go full-stack with</h3>
 			<div class="logotype" role="img" aria-label="SvelteKit">
 				<Logotype />
 			</div>
@@ -78,14 +78,9 @@
 	}
 
 	.hero .tagline {
-		font-size: var(--sk-text-l);
-		font-weight: 200;
-		line-height: 1.2;
+		font-size: var(--sk-font-size-h2);
 		color: var(--sk-text-2);
-		font-family: var(--sk-font-body);
 		margin-bottom: 2rem;
-		/* max-width: 12em; */
-		/* margin: 0 auto; */
 	}
 
 	.logotype :global(svg) {
diff --git a/apps/svelte.dev/src/routes/_home/Supporters/index.svelte b/apps/svelte.dev/src/routes/_home/Supporters/index.svelte
index 754bc4a0f2..e30648903c 100644
--- a/apps/svelte.dev/src/routes/_home/Supporters/index.svelte
+++ b/apps/svelte.dev/src/routes/_home/Supporters/index.svelte
@@ -58,12 +58,11 @@
 <style>
 	h3 {
 		color: var(--sk-text-2);
-		font-size: var(--sk-text-l);
 	}
 
 	.intro {
-		max-width: 28em; /* text balancing */
 		margin: 1em 0 3.2rem 0;
+		text-wrap: balance;
 	}
 
 	.supporters-grid {
diff --git a/apps/svelte.dev/src/routes/_home/Svelte.svelte b/apps/svelte.dev/src/routes/_home/Svelte.svelte
index e88b5451c4..9a48de40fd 100644
--- a/apps/svelte.dev/src/routes/_home/Svelte.svelte
+++ b/apps/svelte.dev/src/routes/_home/Svelte.svelte
@@ -5,8 +5,10 @@
 
 <Section --background="var(--background-1)">
 	<p class="definition">
-		<em>/ˈsvɛlt/</em> <span class="adjective">adjective</span>
-		<span class="description">attractively thin, graceful and stylish</span>
+		<em>/ˈsvɛlt/</em>
+		<span class="description">
+			<span class="adjective">adjective</span> attractively thin, graceful and stylish
+		</span>
 	</p>
 
 	<div class="grid" style="--columns: 3">
@@ -73,37 +75,39 @@
 	}
 
 	.definition {
-		font-size: var(--sk-text-l);
-	}
+		display: flex;
+		align-items: baseline;
 
-	.definition em {
-		font-style: normal;
-		font-size: var(--sk-font-size-h1);
-		color: var(--sk-theme-1);
-	}
+		em {
+			font-style: normal;
+			font-size: var(--sk-font-size-h1);
+			color: var(--sk-theme-1);
+		}
 
-	.definition .adjective {
-		position: relative;
-		top: -0.15em;
-		padding: 0.25em 0.5em 0.1em;
-		line-height: 1;
-		margin: 0 1em;
-		text-transform: uppercase;
-		font-size: var(--sk-text-s);
-		background: var(--sk-text-2);
-		border-radius: var(--sk-border-radius);
-		color: var(--sk-back-2);
-	}
+		.description {
+			position: relative;
+			font-family: var(--sk-font-ui);
+			display: flex;
+			align-items: center;
+			bottom: 0.2em;
 
-	.definition .description {
-		display: block;
+			.adjective {
+				position: relative;
+				/* top: -0.15em; */
+				padding: 0.25em 0.5em 0.1em;
+				line-height: 1;
+				margin: 0 1em;
+				text-transform: uppercase;
+				font-size: var(--sk-text-s);
+				background: var(--sk-text-2);
+				border-radius: var(--sk-border-radius);
+				font-family: var(--sk-font-ui);
+				color: var(--sk-back-2);
+			}
+		}
 	}
 
 	@media (min-width: 900px) {
-		.definition .description {
-			display: inline;
-		}
-
 		.video-container {
 			order: 2;
 			grid-column: 2 / 4;
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 7fa74ef705..1ddf2aef55 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -302,7 +302,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	}
 
 	input {
-		font-size: var(--sk-text-l);
+		font-size: var(--sk-font-size-ui-large);
 		width: 100%;
 		padding: var(--padding) 5rem var(--padding) var(--padding);
 		height: 6rem;
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 8b993bab6e..25c58d5c6e 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -71,7 +71,7 @@ h2 {
 }
 
 h3 {
-	font-size: var(--sk-text-h3);
+	font-size: var(--sk-font-size-h3);
 }
 
 :where(h1, h2, h3) {
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 0cd74e8300..506b681545 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -31,7 +31,6 @@
 	--sk-font-size-h1: 3.6rem;
 	--sk-font-size-h2: 3rem;
 	--sk-font-size-h3: 2.4rem;
-	--sk-text-l: 2.4rem;
 	--sk-text-m: 2.1rem;
 	--sk-text-s: 1.8rem;
 	--sk-text-xs: 1.4rem;

From e3fb1dfd43668e8ed47b84382277f8e935ac0ce9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 3 Oct 2024 13:17:33 -0400
Subject: [PATCH 4/6] banish --sk-text-m

---
 .../routes/(authed)/playground/[id]/AppControls.svelte |  1 -
 apps/svelte.dev/src/routes/+page.svelte                | 10 ----------
 packages/site-kit/src/lib/components/Text.svelte       |  6 ------
 packages/site-kit/src/lib/home/TrySection.svelte       |  1 -
 packages/site-kit/src/lib/home/TryTerminal.svelte      |  9 ++-------
 packages/site-kit/src/lib/styles/base.css              |  1 +
 packages/site-kit/src/lib/styles/tokens.css            |  2 +-
 7 files changed, 4 insertions(+), 26 deletions(-)

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 30d2647f90..2c91d7ba63 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -311,7 +311,6 @@ export default app;`
 		border: none;
 		color: currentColor;
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-text-m);
 		opacity: 0.7;
 		outline: none;
 		flex: 1;
diff --git a/apps/svelte.dev/src/routes/+page.svelte b/apps/svelte.dev/src/routes/+page.svelte
index bf2fd573f6..919cec4d37 100644
--- a/apps/svelte.dev/src/routes/+page.svelte
+++ b/apps/svelte.dev/src/routes/+page.svelte
@@ -120,13 +120,3 @@
 		{/snippet}
 	</Footer>
 </div>
-
-<style>
-	h2 {
-		line-height: 1.05;
-	}
-
-	p {
-		font-size: var(--sk-text-m);
-	}
-</style>
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 22fc236596..e4a642f995 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -65,7 +65,6 @@
 		ol,
 		ul {
 			margin: 1em 0;
-			font-size: var(--sk-text-m);
 		}
 
 		code {
@@ -394,12 +393,7 @@
 				p:first-child::before {
 					content: 'Deprecated ';
 					display: block;
-					/* text-transform: uppercase; */
 					font-style: normal;
-					/* font-family: var(--sk-font-ui); */
-					font-size: var(--sk-text-m);
-					font-weight: 500;
-					/* color: var(--sk-text-4); */
 				}
 
 				a {
diff --git a/packages/site-kit/src/lib/home/TrySection.svelte b/packages/site-kit/src/lib/home/TrySection.svelte
index 3f50f8040b..6d9e3ef151 100644
--- a/packages/site-kit/src/lib/home/TrySection.svelte
+++ b/packages/site-kit/src/lib/home/TrySection.svelte
@@ -62,7 +62,6 @@
 	.try {
 		width: 100%;
 		margin: 0 auto;
-		font-size: var(--sk-text-m);
 		color: var(--sk-text-1);
 	}
 
diff --git a/packages/site-kit/src/lib/home/TryTerminal.svelte b/packages/site-kit/src/lib/home/TryTerminal.svelte
index aa8c13126e..1ea875123a 100644
--- a/packages/site-kit/src/lib/home/TryTerminal.svelte
+++ b/packages/site-kit/src/lib/home/TryTerminal.svelte
@@ -50,6 +50,7 @@
 		padding-top: 0.4rem;
 		align-items: center;
 		justify-content: center;
+		font-family: var(--sk-font-ui);
 	}
 
 	.terminal pre {
@@ -73,13 +74,7 @@
 
 	@media (min-width: 440px) {
 		.terminal pre {
-			font-size: var(--sk-text-s);
-		}
-	}
-
-	@media (min-width: 1080px) {
-		.terminal pre {
-			font-size: var(--sk-text-m);
+			font-size: var(--sk-font-size-ui);
 		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 25c58d5c6e..22743cb7a4 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -48,6 +48,7 @@ body {
 p,
 ul,
 ol {
+	font-size: var(--sk-font-size-body);
 	margin: 1em 0;
 }
 
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 506b681545..7996b63abd 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -31,7 +31,7 @@
 	--sk-font-size-h1: 3.6rem;
 	--sk-font-size-h2: 3rem;
 	--sk-font-size-h3: 2.4rem;
-	--sk-text-m: 2.1rem;
+	--sk-font-size-body: 2.1rem;
 	--sk-text-s: 1.8rem;
 	--sk-text-xs: 1.4rem;
 	--sk-font-size-ui-large: 3rem; /* TODO add regular/small */

From 2fe83768c4f0cd5bc7743ee82dbe3d0f7ee4259b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 3 Oct 2024 14:44:45 -0400
Subject: [PATCH 5/6] more

---
 .../src/routes/(authed)/apps/+page.svelte     |  1 -
 .../src/routes/_home/Deployment.svelte        |  6 ++--
 .../src/routes/_home/Features.svelte          | 22 +++++-------
 apps/svelte.dev/src/routes/_home/Hero.svelte  |  2 +-
 .../src/routes/_home/Showcase.svelte          |  3 --
 .../svelte.dev/src/routes/_home/Svelte.svelte |  7 +---
 apps/svelte.dev/src/routes/blog/+page.svelte  |  4 +--
 .../src/routes/blog/[slug]/+page.svelte       |  4 +--
 apps/svelte.dev/src/routes/docs/+page.svelte  | 34 ++-----------------
 .../src/routes/docs/[...path]/+page.svelte    |  2 +-
 .../routes/docs/[...path]/Breadcrumbs.svelte  |  2 +-
 .../routes/docs/[...path]/OnThisPage.svelte   |  7 ++--
 .../src/routes/tutorial/[slug]/Menu.svelte    | 13 +++----
 .../src/routes/tutorial/[slug]/Sidebar.svelte |  2 +-
 .../tutorial/[slug]/filetree/Filetree.svelte  |  2 +-
 .../tutorial/[slug]/filetree/Item.svelte      |  1 -
 packages/repl/src/routes/+page.svelte         |  1 +
 .../site-kit/src/lib/components/Shell.svelte  |  4 ---
 .../site-kit/src/lib/components/Text.svelte   |  3 +-
 .../site-kit/src/lib/docs/DocsContents.svelte |  2 +-
 packages/site-kit/src/lib/home/Footer.svelte  |  2 +-
 packages/site-kit/src/lib/nav/Menu.svelte     |  2 +-
 packages/site-kit/src/lib/nav/Nav.svelte      |  4 +--
 .../src/lib/nav/NavContextMenu.svelte         | 32 +++--------------
 .../src/lib/search/SearchResultList.svelte    |  3 +-
 packages/site-kit/src/lib/styles/base.css     |  6 ++--
 packages/site-kit/src/lib/styles/tokens.css   |  5 ++-
 27 files changed, 50 insertions(+), 126 deletions(-)

diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
index dfc604253e..5fd0c43d94 100644
--- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -247,7 +247,6 @@
 
 	h2 {
 		color: var(--sk-text-2);
-		font-size: var(--sk-text-s);
 		font-weight: 400;
 		overflow: hidden;
 		text-overflow: ellipsis;
diff --git a/apps/svelte.dev/src/routes/_home/Deployment.svelte b/apps/svelte.dev/src/routes/_home/Deployment.svelte
index 440eb6c890..c0d4ef7616 100644
--- a/apps/svelte.dev/src/routes/_home/Deployment.svelte
+++ b/apps/svelte.dev/src/routes/_home/Deployment.svelte
@@ -145,7 +145,8 @@
 		left: 0;
 		width: 100%;
 		color: var(--sk-text-3);
-		font-size: var(--sk-text-xs);
+		font-family: var(--sk-font-ui);
+		font-size: var(--sk-font-size-ui-small);
 	}
 
 	.globe span::before {
@@ -180,7 +181,8 @@
 	}
 
 	.platforms a span {
-		font-size: var(--sk-text-xs);
+		font-family: var(--sk-font-ui);
+		font-size: var(--sk-font-size-ui-small);
 		color: var(--sk-text-3);
 		text-align: center;
 	}
diff --git a/apps/svelte.dev/src/routes/_home/Features.svelte b/apps/svelte.dev/src/routes/_home/Features.svelte
index 0854a8bb0b..b064545a1f 100644
--- a/apps/svelte.dev/src/routes/_home/Features.svelte
+++ b/apps/svelte.dev/src/routes/_home/Features.svelte
@@ -34,10 +34,7 @@
 				<strong>Deploy anywhere</strong> with adapters.
 			</p>
 
-			<p>
-				SvelteKit is the framework that
-				<strong>grows with you</strong>, whatever you end up building.
-			</p>
+			<p>SvelteKit is the framework that grows with you, whatever you end up building.</p>
 		</div>
 	</div>
 </Section>
@@ -67,18 +64,19 @@
 
 	.wall {
 		margin: 0;
-		font-size: var(--sk-text-xs);
+		font-family: var(--sk-font-ui);
+		font-size: var(--sk-font-size-ui-tiny);
+		color: var(--sk-text-4);
+
+		strong {
+			color: var(--sk-text-1);
+		}
 	}
 
 	p + p {
 		margin-top: 1em;
 	}
 
-	p,
-	strong {
-		color: var(--sk-text-3);
-	}
-
 	@media (min-width: 600px) {
 		h2 {
 			margin-top: 0.5em;
@@ -109,10 +107,6 @@
 			margin-top: 0.1em;
 		}
 
-		p {
-			font-size: var(--sk-text-s);
-		}
-
 		.features {
 			padding-top: clamp(0px, calc(23.333vw - 210px), 70px);
 		}
diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
index 2b6d33b311..9421db3bc8 100644
--- a/apps/svelte.dev/src/routes/_home/Hero.svelte
+++ b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -93,7 +93,7 @@
 		gap: 0.1rem;
 		background: var(--sk-theme-1);
 		padding: 0.35em 0.8em;
-		font-size: var(--sk-text-s);
+		font-family: var(--sk-font-ui);
 		letter-spacing: 0.05em;
 		font-weight: 600;
 		white-space: nowrap;
diff --git a/apps/svelte.dev/src/routes/_home/Showcase.svelte b/apps/svelte.dev/src/routes/_home/Showcase.svelte
index d880ff5a83..7329bcb9d0 100644
--- a/apps/svelte.dev/src/routes/_home/Showcase.svelte
+++ b/apps/svelte.dev/src/routes/_home/Showcase.svelte
@@ -39,8 +39,6 @@
 	h2 {
 		color: white;
 		margin-bottom: 1em;
-		text-transform: uppercase;
-		font-size: var(--sk-text-s);
 		text-align: center;
 	}
 
@@ -81,7 +79,6 @@
 		backdrop-filter: blur(3px);
 		opacity: 0;
 		transition: opacity 0.2s;
-		font-size: var(--sk-text-s);
 		filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.5));
 	}
 
diff --git a/apps/svelte.dev/src/routes/_home/Svelte.svelte b/apps/svelte.dev/src/routes/_home/Svelte.svelte
index 9a48de40fd..686a729a35 100644
--- a/apps/svelte.dev/src/routes/_home/Svelte.svelte
+++ b/apps/svelte.dev/src/routes/_home/Svelte.svelte
@@ -70,10 +70,6 @@
 </Section>
 
 <style>
-	p {
-		font-size: var(--sk-text-s);
-	}
-
 	.definition {
 		display: flex;
 		align-items: baseline;
@@ -93,12 +89,11 @@
 
 			.adjective {
 				position: relative;
-				/* top: -0.15em; */
 				padding: 0.25em 0.5em 0.1em;
 				line-height: 1;
 				margin: 0 1em;
 				text-transform: uppercase;
-				font-size: var(--sk-text-s);
+				font-size: var(--sk-font-size-ui-small);
 				background: var(--sk-text-2);
 				border-radius: var(--sk-border-radius);
 				font-family: var(--sk-font-ui);
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 8f096e2071..b615266a56 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -54,7 +54,7 @@
 			content: 'Latest post • ' attr(data-pubdate);
 			color: var(--sk-text-4);
 			font-family: var(--sk-font-ui);
-			font-size: var(--sk-text-xs);
+			font-size: var(--sk-font-size-ui-tiny);
 			font-weight: 400;
 			text-transform: uppercase;
 		}
@@ -84,7 +84,7 @@
 		}
 
 		p {
-			font-size: var(--sk-text-s);
+			font-size: var(--sk-font-size-body-small);
 			color: var(--sk-text-3);
 			margin: 0;
 		}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index 49aba60407..9c79416a47 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -56,7 +56,7 @@
 	}
 
 	.standfirst {
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-body-small);
 		color: var(--sk-text-3);
 		margin: 0 0 1em 0;
 	}
@@ -65,7 +65,7 @@
 		margin: 0 0 4rem 0;
 		padding: 1rem 0 0 0;
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-text-xs);
+		font-size: var(--sk-font-size-ui-tiny);
 		text-transform: uppercase;
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index 6fe19595c2..c267e6ac02 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -60,7 +60,7 @@
 	<div>
 		<h2>Svelte</h2>
 		<p>Svelte is a compiler-based framework for creating fast and efficient UIs.</p>
-		<a class="cta basic" href="/docs/svelte">read the docs</a>
+		<a href="/docs/svelte">read the docs</a>
 	</div>
 	<div>
 		<h2>SvelteKit</h2>
@@ -68,7 +68,7 @@
 			SvelteKit is a framework for rapidly developing robust, performant web applications using
 			Svelte
 		</p>
-		<a class="cta basic" href="/docs/kit">read the docs</a>
+		<a href="/docs/kit">read the docs</a>
 	</div>
 </div>
 
@@ -86,34 +86,4 @@
 			max-width: 50rem;
 		}
 	}
-
-	/* Copied from Hero.svelte - if we keep this design, deduplicate */
-	.cta {
-		display: flex;
-		align-items: center;
-		gap: 0.1rem;
-		background: var(--sk-theme-1);
-		padding: 0.35em 0.8em;
-		font-size: var(--sk-text-s);
-		letter-spacing: 0.05em;
-		font-weight: 600;
-		white-space: nowrap;
-		border-radius: var(--sk-border-radius);
-		box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);
-		color: #fff;
-		transition: 0.5s var(--quint-out);
-		transition-property: box-shadow, color;
-	}
-
-	.cta:hover {
-		text-decoration: none;
-		box-shadow:
-			0px 0.8px 3.8px rgba(0, 0, 0, 0.115),
-			0px 6px 30px rgba(0, 0, 0, 0.23);
-	}
-
-	.cta.basic {
-		background-color: var(--sk-back-5);
-		color: var(--sk-text-1);
-	}
 </style>
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index fc7e16f4f1..f36464b577 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -108,7 +108,7 @@
 
 	.controls span {
 		display: block;
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-ui);
 		text-transform: uppercase;
 		font-weight: 400;
 		font-family: var(--sk-font-ui);
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
index e653287548..babf7edeb7 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-family: var(--sk-font-ui);
-		font-size: var(--sk-text-xs);
+		font-size: var(--sk-font-size-ui-tiny);
 		color: var(--sk-text-4);
 		text-transform: uppercase;
 		line-height: 1.35;
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index e434f8e86c..b9c6042951 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -78,7 +78,8 @@
 		}
 
 		label {
-			font-family: var(--sk-font-heading);
+			font-family: var(--sk-font-ui);
+			font-size: var(--sk-font-size-ui-tiny);
 			display: block;
 		}
 
@@ -98,7 +99,6 @@
 				background-size: 2rem 2rem;
 				padding: 0.2rem 0 0 3rem;
 				height: 3rem;
-				font-size: var(--sk-text-xs);
 				text-transform: uppercase;
 				color: var(--sk-text-4);
 
@@ -158,9 +158,8 @@
 			}
 
 			& label {
+				font-family: var(--sk-font-heading);
 				font-size: var(--sk-font-size-h3);
-
-				font-weight: 500;
 				display: block;
 
 				&::before {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
index 400a96e50f..e7ec367965 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
@@ -173,6 +173,7 @@
 	header {
 		position: relative;
 		/* z-index: 2; */
+		font-family: var(--sk-font-ui);
 
 		display: grid;
 		grid-template-columns: 4rem minmax(0, 1fr) 4rem;
@@ -191,11 +192,12 @@
 
 	header strong,
 	h1 {
-		font-size: var(--sk-text-s);
+		font-family: inherit;
+		font-size: var(--sk-font-size-ui-small);
 	}
 
 	.menu {
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-ui-small);
 		border: none;
 	}
 
@@ -251,7 +253,6 @@
 		text-align: center;
 		color: var(--sk-text-2);
 		font-weight: 400;
-		font-size: var(--sk-text-s);
 	}
 
 	h1 .desktop {
@@ -264,10 +265,6 @@
 		display: none;
 	}
 
-	/* .expand-icon {
-		padding: 0.5rem;
-	} */
-
 	.expand-icon :global(svg) {
 		transition: transform 0.4s var(--quint-out);
 		transform-origin: center;
@@ -457,7 +454,7 @@
 		}
 
 		h1 strong {
-			font-size: var(--sk-text-s) !important;
+			font-size: var(--sk-font-size-ui-small) !important;
 			line-height: 1;
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
index 512145718e..2e1ed43e28 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
@@ -198,7 +198,7 @@
 	footer .edit {
 		color: var(--sk-text-2);
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-ui-small);
 		padding: 0 0 0 1.4em;
 		background: url($lib/icons/file-edit.svg) no-repeat 0 calc(50% - 0.1em);
 		background-size: 1em 1em;
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 5fa502a579..ac603dfceb 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -179,7 +179,7 @@
 
 <style>
 	.filetree {
-		--font-size: var(--sk-text-s);
+		--font-size: var(--sk-font-size-ui-small);
 		flex: 1;
 		overflow-y: auto;
 		overflow-x: hidden;
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 dc107ef813..4955dd8bc2 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte
@@ -121,7 +121,6 @@
 		background-position: 0 45%;
 		background-repeat: no-repeat;
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-text-s);
 	}
 
 	:focus-visible {
diff --git a/packages/repl/src/routes/+page.svelte b/packages/repl/src/routes/+page.svelte
index a2df2bde06..7c2ae266a2 100644
--- a/packages/repl/src/routes/+page.svelte
+++ b/packages/repl/src/routes/+page.svelte
@@ -32,5 +32,6 @@
 
 	main {
 		height: 100vh;
+		overflow-x: hidden;
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Shell.svelte b/packages/site-kit/src/lib/components/Shell.svelte
index db4c1c148c..6f553c472b 100644
--- a/packages/site-kit/src/lib/components/Shell.svelte
+++ b/packages/site-kit/src/lib/components/Shell.svelte
@@ -83,8 +83,4 @@ The main shell of the application. It provides a slot for the top navigation, th
 			padding-bottom: 0;
 		}
 	}
-
-	:global(body) {
-		font-size: var(--sk-text-s) !important;
-	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index e4a642f995..ad3e95f16f 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -234,7 +234,6 @@
 				box-sizing: border-box;
 				color: var(--sk-code-base);
 				border-radius: var(--sk-border-radius);
-				font-size: var(--sk-text-s);
 				overflow-x: auto;
 
 				code {
@@ -354,7 +353,7 @@
 		}
 
 		small {
-			font-size: var(--sk-text-s);
+			font-size: var(--sk-font-size-body-small);
 			float: right;
 			pointer-events: all;
 			color: var(--sk-theme-1);
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index d7b4a0a57b..caf177bb17 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -101,7 +101,7 @@
 
 	.page {
 		display: block;
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-body-small);
 		font-family: var(--sk-font-body);
 	}
 
diff --git a/packages/site-kit/src/lib/home/Footer.svelte b/packages/site-kit/src/lib/home/Footer.svelte
index f1bd923d65..fe96d5df45 100644
--- a/packages/site-kit/src/lib/home/Footer.svelte
+++ b/packages/site-kit/src/lib/home/Footer.svelte
@@ -66,7 +66,7 @@
 
 	.links a {
 		color: var(--sk-text-2);
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-body-small);
 		display: block;
 		line-height: 1.8;
 	}
diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte
index f0a7f51686..c310ea3425 100644
--- a/packages/site-kit/src/lib/nav/Menu.svelte
+++ b/packages/site-kit/src/lib/nav/Menu.svelte
@@ -367,7 +367,7 @@
 		justify-content: start;
 		gap: 1rem;
 
-		font-size: 0.9em;
+		font-size: var(--sk-font-size-ui-small);
 		color: var(--sk-text-3);
 
 		background-color: var(--sk-back-3);
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 0c57109d6c..0787391c1c 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -253,7 +253,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 	.appearance .caption {
 		display: none;
-		font-size: var(--sk-text-xs);
 		line-height: 1;
 		margin-right: 0rem;
 	}
@@ -276,13 +275,12 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			position: relative;
 			display: flex;
 			padding: 1.5rem 0;
+			margin: 0 1rem;
 			justify-content: space-between;
 		}
 
 		.appearance .caption {
 			display: block;
-
-			font-size: var(--sk-text-s);
 		}
 
 		nav :global(.large) {
diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
index 1b8e6fa92c..28a94703f5 100644
--- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte
+++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
@@ -47,15 +47,10 @@
 								{/if}
 
 								<ul>
-									{#each subsections as { path, title, badge }}
+									{#each subsections as { path, title }}
 										<li>
 											<a href={path} aria-current={path === $page.url.pathname}>
 												{title}
-
-												{#if badge}
-													<span style="flex: 1 1 auto"></span>
-													<span class="badge">{badge}</span>
-												{/if}
 											</a>
 										</li>
 									{/each}
@@ -109,7 +104,8 @@
 
 		padding-bottom: 0.8rem;
 
-		font-size: var(--sk-text-xs);
+		font-family: var(--sk-font-ui);
+		font-size: var(--sk-font-size-ui-small);
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 		font-weight: 600;
@@ -120,11 +116,7 @@
 		position: sticky;
 		top: -1px;
 		z-index: 1;
-
-		font-size: var(--sk-text-s);
-
 		background-color: var(--sk-back-3);
-
 		width: 98%;
 		padding: 1rem 1rem 1rem 4px;
 		margin-left: 4px;
@@ -146,9 +138,8 @@
 		display: flex;
 		align-items: center;
 		border-radius: var(--sk-border-radius);
-		line-height: 1;
 		color: var(--sk-text-2);
-		padding: 0.9rem 0.75rem !important;
+		padding: 0 0.75rem !important;
 		transition: 0.1s ease;
 		transition-property: background-color, color;
 	}
@@ -163,19 +154,4 @@
 		color: var(--sk-theme-1) !important;
 		font-weight: 400;
 	}
-
-	.badge {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		padding: 0.5rem 0.75rem;
-		border-radius: 30px;
-		font-size: 1.1rem;
-		font-weight: 600;
-		letter-spacing: 1px;
-		font-family: var(--sk-font-ui);
-		line-height: 1;
-		color: var(--sk-theme-1);
-		background: hsla(var(--sk-theme-1-hsl), 0.1);
-	}
 </style>
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 728f35e258..cb758f8dd6 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -168,7 +168,7 @@
 		strong {
 			width: 100%;
 			overflow: hidden;
-			font-size: var(--sk-text-s);
+			font-size: var(--sk-font-size-ui);
 			color: var(--sk-text-2);
 
 			span {
@@ -214,7 +214,6 @@
 			span {
 				color: var(--sk-text-3);
 				font-size: var(--sk-text-xs);
-				color: #170a0a;
 				margin: 0.4rem 0 0 0;
 			}
 
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 22743cb7a4..8f382fdcf0 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -18,7 +18,7 @@ body {
 }
 
 body {
-	font-size: var(--sk-text-s);
+	font-size: var(--sk-font-size-body-small);
 	font-family: var(--sk-font-body);
 	line-height: 1.5;
 	color: var(--sk-text-2);
@@ -131,7 +131,7 @@ blockquote {
 }
 
 blockquote :where(p, ul) {
-	font-size: var(--sk-text-s);
+	font-size: var(--sk-font-size-body-small);
 }
 
 blockquote :last-child {
@@ -173,7 +173,7 @@ a {
 /*  tables --------------------------------- */
 table {
 	width: 100%;
-	font-size: var(--sk-text-s);
+	font-size: var(--sk-font-size-body-small);
 }
 
 td,
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 7996b63abd..cc2836e210 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -32,8 +32,11 @@
 	--sk-font-size-h2: 3rem;
 	--sk-font-size-h3: 2.4rem;
 	--sk-font-size-body: 2.1rem;
-	--sk-text-s: 1.8rem;
+	--sk-font-size-body-small: 1.8rem;
 	--sk-text-xs: 1.4rem;
+	--sk-font-size-ui: 2.1rem;
+	--sk-font-size-ui-tiny: 1.4rem;
+	--sk-font-size-ui-small: 1.8rem;
 	--sk-font-size-ui-large: 3rem; /* TODO add regular/small */
 
 	--sk-line-max-width: 84rem;

From 30ca23235f886169287bc6eddb3d970df32aeecc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 3 Oct 2024 15:19:10 -0400
Subject: [PATCH 6/6] more

---
 .../src/routes/_home/Deployment.svelte           |  4 ++--
 apps/svelte.dev/src/routes/_home/Features.svelte |  2 +-
 apps/svelte.dev/src/routes/_home/Svelte.svelte   |  2 +-
 apps/svelte.dev/src/routes/blog/+page.svelte     |  2 +-
 .../src/routes/blog/[slug]/+page.svelte          |  2 +-
 .../src/routes/docs/[...path]/+page.svelte       |  2 +-
 .../src/routes/docs/[...path]/Breadcrumbs.svelte |  2 +-
 .../src/routes/docs/[...path]/OnThisPage.svelte  |  2 +-
 .../src/routes/tutorial/[slug]/Loading.svelte    |  2 +-
 .../src/routes/tutorial/[slug]/Menu.svelte       |  8 ++++----
 .../src/routes/tutorial/[slug]/Output.svelte     |  4 ++--
 .../src/routes/tutorial/[slug]/Sidebar.svelte    |  2 +-
 .../tutorial/[slug]/filetree/Filetree.svelte     |  2 +-
 packages/repl/src/lib/CodeMirror.svelte          |  2 +-
 .../repl/src/lib/Input/ComponentSelector.svelte  |  2 +-
 packages/repl/src/lib/Input/Migrate.svelte       |  2 +-
 packages/repl/src/lib/Input/RunesInfo.svelte     |  2 +-
 packages/repl/src/lib/Message.svelte             |  2 +-
 packages/repl/src/lib/Output/AstNode.svelte      | 16 +++++++++-------
 packages/repl/src/lib/Output/AstView.svelte      |  2 +-
 packages/repl/src/lib/Output/Output.svelte       |  2 +-
 .../repl/src/lib/Output/PaneWithPanel.svelte     |  2 +-
 packages/repl/src/lib/Output/Viewer.svelte       |  2 +-
 packages/repl/src/routes/+page.svelte            |  1 -
 .../site-kit/src/lib/components/Shell.svelte     |  1 +
 packages/site-kit/src/lib/components/Text.svelte |  4 ++--
 .../site-kit/src/lib/home/TryTerminal.svelte     |  7 -------
 packages/site-kit/src/lib/nav/Menu.svelte        |  2 +-
 .../site-kit/src/lib/nav/NavContextMenu.svelte   |  2 +-
 .../site-kit/src/lib/search/SearchBox.svelte     |  4 +++-
 .../src/lib/search/SearchResultList.svelte       |  8 ++++----
 packages/site-kit/src/lib/styles/base.css        |  4 ++--
 packages/site-kit/src/lib/styles/tokens.css      |  7 +++----
 33 files changed, 53 insertions(+), 57 deletions(-)

diff --git a/apps/svelte.dev/src/routes/_home/Deployment.svelte b/apps/svelte.dev/src/routes/_home/Deployment.svelte
index c0d4ef7616..cae27a0f6c 100644
--- a/apps/svelte.dev/src/routes/_home/Deployment.svelte
+++ b/apps/svelte.dev/src/routes/_home/Deployment.svelte
@@ -146,7 +146,7 @@
 		width: 100%;
 		color: var(--sk-text-3);
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 	}
 
 	.globe span::before {
@@ -182,7 +182,7 @@
 
 	.platforms a span {
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 		color: var(--sk-text-3);
 		text-align: center;
 	}
diff --git a/apps/svelte.dev/src/routes/_home/Features.svelte b/apps/svelte.dev/src/routes/_home/Features.svelte
index b064545a1f..16966a40cf 100644
--- a/apps/svelte.dev/src/routes/_home/Features.svelte
+++ b/apps/svelte.dev/src/routes/_home/Features.svelte
@@ -65,7 +65,7 @@
 	.wall {
 		margin: 0;
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-tiny);
+		font-size: var(--sk-font-size-ui-small);
 		color: var(--sk-text-4);
 
 		strong {
diff --git a/apps/svelte.dev/src/routes/_home/Svelte.svelte b/apps/svelte.dev/src/routes/_home/Svelte.svelte
index 686a729a35..2741f59231 100644
--- a/apps/svelte.dev/src/routes/_home/Svelte.svelte
+++ b/apps/svelte.dev/src/routes/_home/Svelte.svelte
@@ -93,7 +93,7 @@
 				line-height: 1;
 				margin: 0 1em;
 				text-transform: uppercase;
-				font-size: var(--sk-font-size-ui-small);
+				font-size: var(--sk-font-size-ui-medium);
 				background: var(--sk-text-2);
 				border-radius: var(--sk-border-radius);
 				font-family: var(--sk-font-ui);
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index b615266a56..97cbcafaaa 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -54,7 +54,7 @@
 			content: 'Latest post • ' attr(data-pubdate);
 			color: var(--sk-text-4);
 			font-family: var(--sk-font-ui);
-			font-size: var(--sk-font-size-ui-tiny);
+			font-size: var(--sk-font-size-ui-small);
 			font-weight: 400;
 			text-transform: uppercase;
 		}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index 9c79416a47..216614e4e8 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -65,7 +65,7 @@
 		margin: 0 0 4rem 0;
 		padding: 1rem 0 0 0;
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-tiny);
+		font-size: var(--sk-font-size-ui-small);
 		text-transform: uppercase;
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index f36464b577..6f22526df5 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -108,7 +108,7 @@
 
 	.controls span {
 		display: block;
-		font-size: var(--sk-font-size-ui);
+		font-size: var(--sk-font-size-ui-medium);
 		text-transform: uppercase;
 		font-weight: 400;
 		font-family: var(--sk-font-ui);
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
index babf7edeb7..1bbd29b9ce 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-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-tiny);
+		font-size: var(--sk-font-size-ui-small);
 		color: var(--sk-text-4);
 		text-transform: uppercase;
 		line-height: 1.35;
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index b9c6042951..13e5be3309 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -79,7 +79,7 @@
 
 		label {
 			font-family: var(--sk-font-ui);
-			font-size: var(--sk-font-size-ui-tiny);
+			font-size: var(--sk-font-size-ui-small);
 			display: block;
 		}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
index 7f92aa599d..7d74155ae5 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Loading.svelte
@@ -179,7 +179,7 @@
 	}
 
 	small {
-		font-size: var(--sk-text-xs);
+		font-size: var(--sk-font-size-ui-small);
 		color: var(--sk-text-3);
 		text-transform: uppercase;
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
index e7ec367965..03671f8285 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
@@ -193,11 +193,11 @@
 	header strong,
 	h1 {
 		font-family: inherit;
-		font-size: var(--sk-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 	}
 
 	.menu {
-		font-size: var(--sk-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 		border: none;
 	}
 
@@ -449,12 +449,12 @@
 
 		h1 :where(.part-title, .chapter-title) {
 			grid-row: 2 / span 1;
-			font-size: var(--sk-text-xs);
+			font-size: var(--sk-font-size-ui-small);
 			color: var(--sk-text-3);
 		}
 
 		h1 strong {
-			font-size: var(--sk-font-size-ui-small) !important;
+			font-size: var(--sk-font-size-ui-medium) !important;
 			line-height: 1;
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Output.svelte
index 6afcde55ac..9e3a92e8b6 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Output.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Output.svelte
@@ -175,8 +175,8 @@
 		bottom: 0;
 		width: 100%;
 		height: 80%;
-		font-family: var(--font-mono);
-		font-size: var(--sk-text-xs);
+		font-family: var(--sk-font-mono);
+		font-size: var(--sk-font-size-ui-small); /* TODO this should use a mono size */
 		padding: 1rem;
 		background: rgba(255, 255, 255, 0.5);
 		transform: translate(0, 100%);
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
index 2e1ed43e28..a6f4c1b4cd 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
@@ -198,7 +198,7 @@
 	footer .edit {
 		color: var(--sk-text-2);
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 		padding: 0 0 0 1.4em;
 		background: url($lib/icons/file-edit.svg) no-repeat 0 calc(50% - 0.1em);
 		background-size: 1em 1em;
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 ac603dfceb..1d1d3c88c6 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -179,7 +179,7 @@
 
 <style>
 	.filetree {
-		--font-size: var(--sk-font-size-ui-small);
+		--font-size: var(--sk-font-size-ui-medium);
 		flex: 1;
 		overflow-y: auto;
 		overflow-x: hidden;
diff --git a/packages/repl/src/lib/CodeMirror.svelte b/packages/repl/src/lib/CodeMirror.svelte
index 51731d78a0..de5fb19c5a 100644
--- a/packages/repl/src/lib/CodeMirror.svelte
+++ b/packages/repl/src/lib/CodeMirror.svelte
@@ -272,7 +272,7 @@
 
 	.codemirror-container :global {
 		* {
-			font: 400 var(--sk-text-xs) / 1.7 var(--sk-font-mono);
+			font: 400 var(--sk-font-size-code) / 1.7 var(--sk-font-mono);
 		}
 
 		.mark-text {
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 56b5be568a..b255a13ba6 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -304,7 +304,7 @@
 	.add-new {
 		position: relative;
 		display: inline-block;
-		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-ui);
+		font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
 		background: var(--sk-back-1);
 		border: none;
 		border-bottom: 3px solid transparent;
diff --git a/packages/repl/src/lib/Input/Migrate.svelte b/packages/repl/src/lib/Input/Migrate.svelte
index 883f8aa112..05f5d1cc82 100644
--- a/packages/repl/src/lib/Input/Migrate.svelte
+++ b/packages/repl/src/lib/Input/Migrate.svelte
@@ -15,7 +15,7 @@
 		display: flex;
 		text-transform: uppercase;
 		font-weight: 300;
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-ui-small);
 		padding: 0.8rem;
 		gap: 0.5rem;
 		margin-right: 0.3rem;
diff --git a/packages/repl/src/lib/Input/RunesInfo.svelte b/packages/repl/src/lib/Input/RunesInfo.svelte
index bb27ae72e7..c99ac71a07 100644
--- a/packages/repl/src/lib/Input/RunesInfo.svelte
+++ b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -70,7 +70,7 @@
 		display: flex;
 		text-transform: uppercase;
 		font-weight: 300;
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-ui-small);
 		padding: 0.8rem;
 		gap: 0.5rem;
 		margin-right: 0.3rem;
diff --git a/packages/repl/src/lib/Message.svelte b/packages/repl/src/lib/Message.svelte
index d3e2eed274..912ec5d9f0 100644
--- a/packages/repl/src/lib/Message.svelte
+++ b/packages/repl/src/lib/Message.svelte
@@ -46,7 +46,7 @@
 		position: relative;
 		color: white;
 		padding: 12px 16px 12px 44px;
-		font: 400 var(--sk-text-s) / 1.8rem var(--sk-font-body);
+		font: 400 var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-body);
 		margin: 0;
 		border-top: 1px solid white;
 	}
diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index 025ec17cda..3a9d8be336 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -110,6 +110,11 @@
 </li>
 
 <style>
+	* {
+		font-family: var(--sk-font-mono);
+		font-size: var(--sk-font-size-code);
+	}
+
 	ul {
 		padding: 0 0 0 2ch;
 		margin: 0;
@@ -120,13 +125,10 @@
 		background-color: var(--sk-highlight-color);
 	}
 
-	.preview {
-		opacity: 0.8;
-		font-style: italic;
-	}
-
-	button:hover {
-		text-decoration: underline;
+	button {
+		&:hover {
+			text-decoration: underline;
+		}
 	}
 
 	.ast-toggle {
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
index d599913024..17e2dea081 100644
--- a/packages/repl/src/lib/Output/AstView.svelte
+++ b/packages/repl/src/lib/Output/AstView.svelte
@@ -83,7 +83,7 @@
 	code {
 		height: 100%;
 		block-size: 100%;
-		font: 400 var(--sk-text-xs) / 1.7 var(--sk-font-mono);
+		font: 400 var(--sk-font-size-code) / 1.7 var(--sk-font-mono);
 	}
 
 	pre {
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index e80e72f8a1..0f3a30409f 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -118,7 +118,7 @@
 		background: var(--sk-back-1, white);
 		text-align: left;
 		position: relative;
-		font: 300 var(--sk-text-s) / 1.8rem var(--sk-font-ui);
+		font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
 		border: none;
 		border-bottom: 3px solid transparent;
 		padding: 12px 12px 8px 12px;
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index f921016318..0eb872c372 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -69,7 +69,7 @@
 	}
 
 	.panel-heading {
-		font: 400 var(--sk-text-s) / 1.8rem var(--sk-font-ui);
+		font: 400 var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
 		text-transform: uppercase;
 		color: var(--sk-text-1, #333);
 		flex: 1;
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
index 32ef5f0498..c8edd39348 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -300,7 +300,7 @@
 
 	button {
 		color: var(--sk-text-2, #999);
-		font-size: var(--sk-text-s);
+		font-size: var(--sk-font-size-ui-small);
 		font-family: var(--sk-font-ui);
 		text-transform: uppercase;
 		display: block;
diff --git a/packages/repl/src/routes/+page.svelte b/packages/repl/src/routes/+page.svelte
index 7c2ae266a2..a2df2bde06 100644
--- a/packages/repl/src/routes/+page.svelte
+++ b/packages/repl/src/routes/+page.svelte
@@ -32,6 +32,5 @@
 
 	main {
 		height: 100vh;
-		overflow-x: hidden;
 	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Shell.svelte b/packages/site-kit/src/lib/components/Shell.svelte
index 6f553c472b..9fb2779343 100644
--- a/packages/site-kit/src/lib/components/Shell.svelte
+++ b/packages/site-kit/src/lib/components/Shell.svelte
@@ -75,6 +75,7 @@ The main shell of the application. It provides a slot for the top navigation, th
 		padding-top: var(--sk-nav-height);
 		padding-bottom: var(--sk-banner-bottom-height);
 		height: 100%;
+		overflow-x: hidden;
 	}
 
 	@media (max-width: 800px) {
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index ad3e95f16f..ed8fb1991a 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -437,9 +437,9 @@
 				align-items: center;
 				height: 3rem;
 				color: var(--sk-text-4);
-				font-family: var(--sk-font-heading);
+				font-family: var(--sk-font-ui);
 				font-style: normal;
-				font-size: var(--sk-text-xs);
+				font-size: var(--sk-font-size-ui-small);
 				user-select: none;
 
 				&:hover {
diff --git a/packages/site-kit/src/lib/home/TryTerminal.svelte b/packages/site-kit/src/lib/home/TryTerminal.svelte
index 1ea875123a..882c845a54 100644
--- a/packages/site-kit/src/lib/home/TryTerminal.svelte
+++ b/packages/site-kit/src/lib/home/TryTerminal.svelte
@@ -55,7 +55,6 @@
 
 	.terminal pre {
 		padding: 1em;
-		font-size: var(--sk-text-xs);
 	}
 
 	.line::before {
@@ -71,10 +70,4 @@
 	.orange-highlight {
 		color: hsl(15, 100%, 65%);
 	}
-
-	@media (min-width: 440px) {
-		.terminal pre {
-			font-size: var(--sk-font-size-ui);
-		}
-	}
 </style>
diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte
index c310ea3425..2682121958 100644
--- a/packages/site-kit/src/lib/nav/Menu.svelte
+++ b/packages/site-kit/src/lib/nav/Menu.svelte
@@ -367,7 +367,7 @@
 		justify-content: start;
 		gap: 1rem;
 
-		font-size: var(--sk-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 		color: var(--sk-text-3);
 
 		background-color: var(--sk-back-3);
diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
index 28a94703f5..cd0ca6b15e 100644
--- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte
+++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
@@ -105,7 +105,7 @@
 		padding-bottom: 0.8rem;
 
 		font-family: var(--sk-font-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font-size: var(--sk-font-size-ui-medium);
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 		font-weight: 600;
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 1ddf2aef55..54dfeb23de 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -344,6 +344,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 		kbd {
 			text-transform: uppercase;
+			font-size: var(--sk-font-size-ui-small);
 		}
 	}
 
@@ -364,7 +365,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	.info {
 		padding: var(--padding);
 		font-family: var(--sk-font-ui);
-		font-size: 1.2rem;
+		font-size: var(--sk-font-size-ui-medium);
+		color: var(--sk-text-4);
 		font-weight: normal;
 		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 cb758f8dd6..1fcc98445c 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -83,7 +83,7 @@
 			color: var(--sk-text-4);
 			text-transform: uppercase;
 			padding: 0.5rem var(--padding);
-			font-size: var(--sk-text-xs);
+			font-size: var(--sk-font-size-ui-medium);
 			z-index: 2;
 			user-select: none;
 
@@ -168,7 +168,7 @@
 		strong {
 			width: 100%;
 			overflow: hidden;
-			font-size: var(--sk-font-size-ui);
+			font-size: var(--sk-font-size-ui-medium);
 			color: var(--sk-text-2);
 
 			span {
@@ -178,7 +178,7 @@
 					content: ' • ';
 					position: relative;
 					color: var(--sk-text-4);
-					font-size: var(--sk-text-xs);
+					font-size: var(--sk-font-size-ui-small);
 					top: -0.1rem;
 				}
 			}
@@ -213,7 +213,7 @@
 
 			span {
 				color: var(--sk-text-3);
-				font-size: var(--sk-text-xs);
+				font-size: var(--sk-font-size-ui-small);
 				margin: 0.4rem 0 0 0;
 			}
 
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 8f382fdcf0..de7fbe9740 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -89,12 +89,11 @@ strong {
 
 code,
 kbd {
-	font-size: var(--sk-text-xs);
 	font-family: var(--sk-font-mono);
-	line-height: 1.7;
 }
 
 code {
+	font-size: var(--sk-font-size-code);
 	position: relative;
 	border-radius: 0.3em;
 	white-space: nowrap;
@@ -104,6 +103,7 @@ code {
 	margin: 0 0.2rem;
 	top: -0.1rem;
 	background: var(--sk-back-4);
+	line-height: 1.7;
 }
 
 pre {
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index cc2836e210..4e500d77ae 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -33,11 +33,10 @@
 	--sk-font-size-h3: 2.4rem;
 	--sk-font-size-body: 2.1rem;
 	--sk-font-size-body-small: 1.8rem;
-	--sk-text-xs: 1.4rem;
-	--sk-font-size-ui: 2.1rem;
-	--sk-font-size-ui-tiny: 1.4rem;
-	--sk-font-size-ui-small: 1.8rem;
+	--sk-font-size-ui-small: 1.4rem;
+	--sk-font-size-ui-medium: 1.8rem;
 	--sk-font-size-ui-large: 3rem; /* TODO add regular/small */
+	--sk-font-size-code: 1.4rem;
 
 	--sk-line-max-width: 84rem;