From 9135116cc5b73ede008b9799fa9bb3e827e67a2c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 12 Oct 2024 10:32:57 -0400
Subject: [PATCH 1/6] start tidying up font css

---
 .../playground/[id]/AppControls.svelte        |  6 +++---
 .../(authed)/playground/[id]/UserMenu.svelte  |  2 +-
 apps/svelte.dev/src/routes/+error.svelte      |  5 -----
 .../src/routes/_home/Deployment.svelte        |  4 ++--
 .../src/routes/_home/Features.svelte          |  2 +-
 apps/svelte.dev/src/routes/_home/Hero.svelte  |  2 +-
 .../src/routes/_home/HeroSvelteKit.svelte     |  2 +-
 .../svelte.dev/src/routes/_home/Svelte.svelte |  4 ++--
 apps/svelte.dev/src/routes/blog/+page.svelte  | 12 ++++++------
 apps/svelte.dev/src/routes/blog/Byline.svelte |  2 +-
 .../src/routes/blog/[slug]/+page.svelte       |  4 ++--
 .../src/routes/docs/[...path]/+page.svelte    |  4 ++--
 .../routes/docs/[...path]/Breadcrumbs.svelte  |  2 +-
 .../routes/docs/[...path]/OnThisPage.svelte   |  5 ++---
 .../svelte.dev/src/routes/search/+page.svelte |  4 ++--
 .../routes/tutorial/[...slug]/Loading.svelte  |  4 ++--
 .../src/routes/tutorial/[...slug]/Menu.svelte |  2 +-
 .../routes/tutorial/[...slug]/Output.svelte   |  2 +-
 .../routes/tutorial/[...slug]/Sidebar.svelte  |  2 +-
 .../routes/tutorial/[...slug]/codemirror.css  |  2 +-
 .../tutorial/[...slug]/filetree/Item.svelte   |  2 +-
 packages/repl/src/lib/CodeMirror.svelte       | 10 +++++-----
 .../src/lib/Input/ComponentSelector.svelte    |  4 ++--
 .../repl/src/lib/InputOutputToggle.svelte     |  2 +-
 packages/repl/src/lib/Message.svelte          |  2 +-
 packages/repl/src/lib/Output/AstNode.svelte   |  4 ++--
 packages/repl/src/lib/Output/AstView.svelte   |  2 +-
 .../src/lib/Output/CompilerOptions.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 +-
 .../src/lib/Output/console/Console.svelte     |  2 +-
 .../src/lib/Output/console/ConsoleLine.svelte |  6 +++---
 .../lib/Output/console/ConsoleTable.svelte    |  6 +++---
 .../src/lib/components/Dropdown.svelte        |  2 +-
 .../site-kit/src/lib/components/Text.svelte   |  6 +++---
 .../site-kit/src/lib/docs/DocsContents.svelte |  4 ++--
 packages/site-kit/src/lib/docs/Tooltip.svelte |  2 +-
 packages/site-kit/src/lib/home/Footer.svelte  |  2 +-
 .../site-kit/src/lib/home/TryTerminal.svelte  |  4 ++--
 packages/site-kit/src/lib/nav/Nav.svelte      |  4 ++--
 .../src/lib/nav/NavContextMenu.svelte         |  4 ++--
 .../site-kit/src/lib/search/SearchBox.svelte  |  4 ++--
 packages/site-kit/src/lib/styles/base.css     | 19 ++++++++-----------
 packages/site-kit/src/lib/styles/tokens.css   | 16 ++++++++++------
 45 files changed, 91 insertions(+), 96 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 b713ac4f2d..c3245b1b22 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -345,7 +345,7 @@ export default app;`
 		left: 0;
 		width: 100%;
 		height: 100%;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 	}
 
 	button,
@@ -358,7 +358,7 @@ export default app;`
 
 	.icon {
 		position: relative;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		font-size: var(--sk-font-size-ui-small);
 		color: var(--sk-text-3);
 		line-height: 1;
@@ -424,7 +424,7 @@ export default app;`
 		border: 1px solid var(--sk-back-4);
 		border-radius: var(--sk-border-radius);
 		color: currentColor;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		width: 0;
 		flex: 1;
 		padding: 0.2rem 0.6rem;
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
index 0c0217b084..5e7cd1ef4e 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
@@ -36,7 +36,7 @@
 
 	.name {
 		display: none;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		font-size: var(--sk-font-size-ui-medium);
 	}
 
diff --git a/apps/svelte.dev/src/routes/+error.svelte b/apps/svelte.dev/src/routes/+error.svelte
index bb7939b096..5ac6f770a7 100644
--- a/apps/svelte.dev/src/routes/+error.svelte
+++ b/apps/svelte.dev/src/routes/+error.svelte
@@ -61,11 +61,6 @@
 		}
 	}
 
-	h1 {
-		font-size: var(--sk-font-size-h1);
-		margin: 0 0 0.5em 0;
-	}
-
 	p {
 		margin: 1em auto;
 	}
diff --git a/apps/svelte.dev/src/routes/_home/Deployment.svelte b/apps/svelte.dev/src/routes/_home/Deployment.svelte
index cae27a0f6c..a44b823156 100644
--- a/apps/svelte.dev/src/routes/_home/Deployment.svelte
+++ b/apps/svelte.dev/src/routes/_home/Deployment.svelte
@@ -145,7 +145,7 @@
 		left: 0;
 		width: 100%;
 		color: var(--sk-text-3);
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		font-size: var(--sk-font-size-ui-medium);
 	}
 
@@ -181,7 +181,7 @@
 	}
 
 	.platforms a span {
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		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 671db60cf7..3acdc93d70 100644
--- a/apps/svelte.dev/src/routes/_home/Features.svelte
+++ b/apps/svelte.dev/src/routes/_home/Features.svelte
@@ -64,7 +64,7 @@
 
 	.wall {
 		margin: 0;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		font-size: var(--sk-font-size-ui-small);
 		color: var(--sk-text-4);
 
diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
index 9b304baa7c..1d99bbaacd 100644
--- a/apps/svelte.dev/src/routes/_home/Hero.svelte
+++ b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -95,7 +95,7 @@
 	}
 
 	.cta {
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		font-size: var(--sk-font-size-ui-medium);
 		color: var(--sk-theme-1);
 		text-transform: uppercase;
diff --git a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
index e9ed88f883..bc1926b769 100644
--- a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
+++ b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
@@ -78,7 +78,7 @@
 	}
 
 	.hero .tagline {
-		font-size: var(--sk-font-size-h2);
+		font: var(--sk-font-h2);
 		color: var(--sk-text-2);
 		margin-bottom: 2rem;
 	}
diff --git a/apps/svelte.dev/src/routes/_home/Svelte.svelte b/apps/svelte.dev/src/routes/_home/Svelte.svelte
index 2741f59231..666e186c51 100644
--- a/apps/svelte.dev/src/routes/_home/Svelte.svelte
+++ b/apps/svelte.dev/src/routes/_home/Svelte.svelte
@@ -82,7 +82,7 @@
 
 		.description {
 			position: relative;
-			font-family: var(--sk-font-ui);
+			font-family: var(--sk-font-family-ui);
 			display: flex;
 			align-items: center;
 			bottom: 0.2em;
@@ -96,7 +96,7 @@
 				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);
+				font-family: var(--sk-font-family-ui);
 				color: var(--sk-back-2);
 			}
 		}
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 9c6db8ac5d..3a079dbcb6 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -75,7 +75,7 @@
 	h2 {
 		display: inline-block;
 		color: var(--sk-text-2);
-		font-size: var(--sk-font-size-h3);
+		font: var(--sk-font-h3);
 	}
 
 	article {
@@ -87,7 +87,7 @@
 			padding: 0 0 4rem 0;
 
 			h2 {
-				font-size: var(--sk-font-size-h1);
+				font: var(--sk-font-h1);
 				color: var(--sk-text-2);
 			}
 		}
@@ -126,7 +126,7 @@
 
 			&::before {
 				content: 'Featured posts';
-				font-family: var(--sk-font-ui);
+				font-family: var(--sk-font-family-ui);
 				font-size: var(--sk-font-size-ui-medium);
 				text-transform: uppercase;
 				color: var(--sk-text-4);
@@ -138,7 +138,7 @@
 				}
 
 				h2 {
-					font-size: var(--sk-font-size-h2);
+					font: var(--sk-font-h2);
 				}
 			}
 		}
@@ -154,7 +154,7 @@
 				content: 'Monthly updates';
 				position: absolute;
 				top: 0;
-				font-family: var(--sk-font-ui);
+				font-family: var(--sk-font-family-ui);
 				font-size: var(--sk-font-size-ui-medium);
 				text-transform: uppercase;
 				color: var(--sk-text-4);
@@ -162,7 +162,7 @@
 
 			a {
 				display: block;
-				font-family: var(--sk-font-body);
+				font-family: var(--sk-font-family-body);
 				font-weight: 400;
 				font-size: var(--sk-font-size-body);
 				color: var(--sk-text-2);
diff --git a/apps/svelte.dev/src/routes/blog/Byline.svelte b/apps/svelte.dev/src/routes/blog/Byline.svelte
index a2c06f8ea6..935e1e3db9 100644
--- a/apps/svelte.dev/src/routes/blog/Byline.svelte
+++ b/apps/svelte.dev/src/routes/blog/Byline.svelte
@@ -23,7 +23,7 @@
 	.byline {
 		margin: 0 0 4rem 0;
 		padding: 1rem 0 0 0;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		font-size: var(--sk-font-size-ui-small);
 		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 be4067a251..eeee2ae39b 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -70,7 +70,7 @@
 
 				p {
 					color: var(--sk-text-4);
-					font-family: var(--sk-font-body);
+					font-family: var(--sk-font-family-body);
 					font-size: var(--sk-font-size-body-small);
 
 					&:first-child {
@@ -120,7 +120,7 @@
 	}
 
 	h1 {
-		font-size: var(--sk-font-size-h1);
+		font: var(--sk-font-h1);
 	}
 
 	.standfirst {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 5e2999d93c..42e1638d6e 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -70,7 +70,7 @@
 		position: relative;
 		font-size: 1.4rem;
 		margin: 6rem 0 2rem 0;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 
 		a {
 			text-decoration: none;
@@ -107,7 +107,7 @@
 		display: block;
 		font-size: var(--sk-font-size-ui-medium);
 		text-transform: uppercase;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		color: var(--sk-text-3);
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
index 1bbd29b9ce..fd69050bb6 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
@@ -10,7 +10,7 @@
 
 <style>
 	.breadcrumbs {
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		font-size: var(--sk-font-size-ui-small);
 		color: var(--sk-text-4);
 		text-transform: uppercase;
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index ac9056ddc2..01cc3d7a3d 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -144,7 +144,7 @@
 				}
 
 				h3 {
-					font-family: var(--sk-font-ui);
+					font-family: var(--sk-font-family-ui);
 					font-size: var(--sk-font-size-ui-small);
 					color: var(--sk-text-4);
 					margin: 0;
@@ -192,8 +192,7 @@
 			}
 
 			& label {
-				font-family: var(--sk-font-heading);
-				font-size: var(--sk-font-size-h3);
+				font: var(--sk-font-h3);
 				display: block;
 
 				&::before {
diff --git a/apps/svelte.dev/src/routes/search/+page.svelte b/apps/svelte.dev/src/routes/search/+page.svelte
index 98be90b02a..bc32834f6d 100644
--- a/apps/svelte.dev/src/routes/search/+page.svelte
+++ b/apps/svelte.dev/src/routes/search/+page.svelte
@@ -29,7 +29,7 @@
 		max-width: 64rem;
 		margin: 0 auto;
 		padding: 8rem 1rem;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 	}
 
 	form {
@@ -44,7 +44,7 @@
 		width: 100%;
 		height: 100%;
 		font-family: inherit;
-		font-size: var(--sk-font-size-h2);
+		font-size: var(--sk-font-size-ui-large);
 		border: none;
 		border-radius: var(--sk-border-radius);
 		padding: 2rem 2rem 2rem 5rem;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
index 0a5bfbfcee..b052bda948 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
@@ -121,7 +121,7 @@
 		justify-content: center;
 		background: var(--sk-back-2);
 		user-select: none;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		font-size: var(--sk-font-size-ui-small);
 	}
 
@@ -148,7 +148,7 @@
 	}
 
 	h2 {
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		font-size: var(--sk-font-size-ui-large);
 		margin: 0 0 0.5em 0;
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
index 90272fee5b..9c4ba6ae2e 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
@@ -173,7 +173,7 @@
 	header {
 		position: relative;
 		/* z-index: 2; */
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 
 		display: grid;
 		grid-template-columns: 4rem minmax(0, 1fr) 4rem;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
index ad21cac5ac..adab579d75 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
@@ -184,7 +184,7 @@
 		bottom: 0;
 		width: 100%;
 		height: 80%;
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 		font-size: var(--sk-font-size-ui-small); /* TODO this should use a mono size */
 		padding: 1rem;
 		border-top: 1px solid var(--sk-text-4);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
index 8095d734f2..243a591003 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
@@ -194,7 +194,7 @@
 
 		.edit {
 			color: var(--sk-text-2);
-			font-family: var(--sk-font-ui);
+			font-family: var(--sk-font-family-ui);
 			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);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css b/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css
index b16bf39e8e..a0d2bc954e 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css
@@ -7,7 +7,7 @@
 }
 
 .cm-editor .cm-scroller {
-	font-family: var(--sk-font-mono);
+	font-family: var(--sk-font-family-mono);
 	font-size: 1.3rem;
 	line-height: 2rem;
 }
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 4955dd8bc2..a50dfaec96 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -120,7 +120,7 @@
 		background-size: 1.2rem 1.2rem;
 		background-position: 0 45%;
 		background-repeat: no-repeat;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 	}
 
 	:focus-visible {
diff --git a/packages/repl/src/lib/CodeMirror.svelte b/packages/repl/src/lib/CodeMirror.svelte
index 9ef0fd40bd..57b375c0b6 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-font-size-code) / 1.7 var(--sk-font-mono);
+			font: 400 var(--sk-font-size-mono) / 1.7 var(--sk-font-family-mono);
 		}
 
 		.mark-text {
@@ -296,7 +296,7 @@
 		.cm-tooltip {
 			border: none;
 			background: var(--sk-back-3);
-			font-family: var(--sk-font-body);
+			font-family: var(--sk-font-family-body);
 			max-width: calc(100vw - 10em);
 			position: relative;
 			filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
@@ -369,7 +369,7 @@
 		}
 
 		.cm-diagnostic :not(code) {
-			font-family: var(--sk-font-body);
+			font-family: var(--sk-font-family-body);
 		}
 
 		.cm-diagnosticText {
@@ -389,7 +389,7 @@
 
 		.cm-diagnosticText strong {
 			font-size: 0.9em;
-			font-family: var(--sk-font-mono);
+			font-family: var(--sk-font-family-mono);
 			opacity: 0.7;
 		}
 	}
@@ -403,7 +403,7 @@
 		border: none;
 		padding: 4px 4px 4px 60px;
 		resize: none;
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 		font-size: 13px;
 		line-height: 1.7;
 		user-select: none;
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 1cee3c7356..ddb2b19a96 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -314,7 +314,7 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
+		font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-family-ui);
 		border: none;
 		padding: 0 1rem;
 		height: 100%;
@@ -377,7 +377,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		font-size: var(--sk-font-size-ui-small);
 		padding: 0 1rem 1px 2em;
 		box-sizing: border-box;
diff --git a/packages/repl/src/lib/InputOutputToggle.svelte b/packages/repl/src/lib/InputOutputToggle.svelte
index 07efefc504..2db514cff7 100644
--- a/packages/repl/src/lib/InputOutputToggle.svelte
+++ b/packages/repl/src/lib/InputOutputToggle.svelte
@@ -26,7 +26,7 @@
 		width: 100%;
 		height: var(--pane-controls-h);
 		border-top: 1px solid var(--sk-back-5);
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		font-size: var(--sk-font-size-ui-small);
 		z-index: 2;
 	}
diff --git a/packages/repl/src/lib/Message.svelte b/packages/repl/src/lib/Message.svelte
index f8ef194024..48f635357b 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-font-size-ui-small) / 1.8rem var(--sk-font-body);
+		font: 400 var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-family-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 3a9d8be336..f6dfdf6b8f 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -111,8 +111,8 @@
 
 <style>
 	* {
-		font-family: var(--sk-font-mono);
-		font-size: var(--sk-font-size-code);
+		font-family: var(--sk-font-family-mono);
+		font-size: var(--sk-font-size-mono);
 	}
 
 	ul {
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
index 17e2dea081..936a50c859 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-font-size-code) / 1.7 var(--sk-font-mono);
+		font: 400 var(--sk-font-size-mono) / 1.7 var(--sk-font-family-mono);
 	}
 
 	pre {
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
index 3ae29c538a..e20ecf50a1 100644
--- a/packages/repl/src/lib/Output/CompilerOptions.svelte
+++ b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -29,7 +29,7 @@
 <style>
 	.options {
 		padding: 0 10px;
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 		font-size: 13px;
 		color: var(--sk-text-2, #999);
 		line-height: 1.8;
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index 609dc7b908..a01f7f7cc1 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -130,7 +130,7 @@
 		background: transparent;
 		text-align: left;
 		position: relative;
-		font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-ui);
+		font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-family-ui);
 		border: none;
 		border-bottom: 1px solid transparent;
 		padding: 0 1rem;
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index 3f115d3095..54989033a3 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-font-size-ui-small) / 1.8rem var(--sk-font-ui);
+		font: 400 var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-family-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 134f9cc57d..6579762ea3 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -323,7 +323,7 @@
 	button {
 		color: var(--sk-text-2, #999);
 		font-size: var(--sk-font-size-ui-small);
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		text-transform: uppercase;
 		display: block;
 	}
diff --git a/packages/repl/src/lib/Output/console/Console.svelte b/packages/repl/src/lib/Output/console/Console.svelte
index a64d792beb..bb286e07e8 100644
--- a/packages/repl/src/lib/Output/console/Console.svelte
+++ b/packages/repl/src/lib/Output/console/Console.svelte
@@ -36,7 +36,7 @@
 		--warning-bg: rgb(254, 251, 218);
 		--warning-border: rgb(242, 232, 163);
 		--json-tree-string-color: var(--sk-code-string);
-		--json-tree-font-family: var(--sk-font-mono);
+		--json-tree-font-family: var(--sk-font-family-mono);
 
 		:global(.dark) & {
 			--error-fg: rgb(235, 78, 109);
diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
index dd17a1d53a..2a1444bccf 100644
--- a/packages/repl/src/lib/Output/console/ConsoleLine.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
@@ -201,7 +201,7 @@
 		gap: 1rem;
 		width: 100%;
 		font-size: 1.2rem;
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 		align-items: center;
 	}
 
@@ -219,7 +219,7 @@
 		grid-template-columns: minmax(0, auto) minmax(auto, 1fr);
 		grid-gap: 0 2rem;
 		font-size: 1.2rem;
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 		margin: 0 1rem 0.4rem calc(1em + var(--indent));
 		overflow: hidden;
 
@@ -254,7 +254,7 @@
 
 	.meta {
 		color: var(--sk-text-2, #666);
-		font-family: var(--sk-font-body) !important;
+		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 0f9081f4db..514462fd65 100644
--- a/packages/repl/src/lib/Output/console/ConsoleTable.svelte
+++ b/packages/repl/src/lib/Output/console/ConsoleTable.svelte
@@ -92,7 +92,7 @@
 <style>
 	.table {
 		--json-tree-font-size: 1.2rem;
-		--json-tree-font-family: var(--sk-font-mono);
+		--json-tree-font-family: var(--sk-font-family-mono);
 		margin: 8px;
 		overflow: auto;
 		max-height: 200px;
@@ -104,7 +104,7 @@
 	table {
 		border-collapse: collapse;
 		line-height: 1;
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 	}
 
 	th {
@@ -118,7 +118,7 @@
 	}
 
 	td {
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 		font-size: 1.2rem;
 		padding: 0.5rem 1rem;
 		border-bottom: none;
diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte
index d0f7674bb0..fa7b9bc0b6 100644
--- a/packages/site-kit/src/lib/components/Dropdown.svelte
+++ b/packages/site-kit/src/lib/components/Dropdown.svelte
@@ -47,7 +47,7 @@
 				color: var(--sk-text-2);
 				padding: 1rem 1.3rem;
 				display: block;
-				font-family: var(--sk-font-ui);
+				font-family: var(--sk-font-family-ui);
 				font-size: var(--sk-font-size-ui-medium);
 				text-decoration: none;
 				line-height: 1;
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 3b88e41f35..12e6860989 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -148,7 +148,7 @@
 					position: relative;
 					top: 0.1rem;
 					flex: 1;
-					font-family: var(--sk-font-ui);
+					font-family: var(--sk-font-family-ui);
 					font-size: var(--sk-font-size-ui-small);
 					color: var(--sk-text-3);
 					text-overflow: ellipsis;
@@ -181,7 +181,7 @@
 						justify-content: center;
 						align-items: center;
 						font-size: 1.2rem;
-						font-family: var(--sk-font-mono);
+						font-family: var(--sk-font-family-mono);
 						color: var(--sk-text-2);
 					}
 
@@ -458,7 +458,7 @@
 				line-height: 1;
 				left: 0;
 				top: 0;
-				font-family: var(--sk-font-heading);
+				font-family: var(--sk-font-family-heading);
 				color: var(--sk-text-4);
 			}
 
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 66fcf238d0..473b3137c1 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -64,7 +64,7 @@
 
 	.sidebar {
 		padding: 3.2rem;
-		font-family: var(--sk-font-body);
+		font-family: var(--sk-font-family-body);
 		height: 100%;
 		bottom: auto;
 		width: 100%;
@@ -97,7 +97,7 @@
 	.page {
 		display: block;
 		font-size: var(--sk-font-size-body-small);
-		font-family: var(--sk-font-body);
+		font-family: var(--sk-font-family-body);
 	}
 
 	[aria-current='page'] {
diff --git a/packages/site-kit/src/lib/docs/Tooltip.svelte b/packages/site-kit/src/lib/docs/Tooltip.svelte
index f8dfea8932..47150d6676 100644
--- a/packages/site-kit/src/lib/docs/Tooltip.svelte
+++ b/packages/site-kit/src/lib/docs/Tooltip.svelte
@@ -58,7 +58,7 @@
 		text-align: left;
 		padding: 0.4rem 0.6rem;
 		border-radius: var(--sk-border-radius);
-		font-family: var(--sk-font-mono);
+		font-family: var(--sk-font-family-mono);
 		font-size: 1.2rem;
 		white-space: pre-wrap;
 		z-index: 100;
diff --git a/packages/site-kit/src/lib/home/Footer.svelte b/packages/site-kit/src/lib/home/Footer.svelte
index ece7c61b13..8c9f58e4e3 100644
--- a/packages/site-kit/src/lib/home/Footer.svelte
+++ b/packages/site-kit/src/lib/home/Footer.svelte
@@ -61,7 +61,7 @@
 	}
 
 	footer h2 {
-		font-size: var(--sk-font-size-h3);
+		font: var(--sk-font-h3);
 		padding-bottom: 1rem;
 	}
 
diff --git a/packages/site-kit/src/lib/home/TryTerminal.svelte b/packages/site-kit/src/lib/home/TryTerminal.svelte
index 31ab6652ef..2136626129 100644
--- a/packages/site-kit/src/lib/home/TryTerminal.svelte
+++ b/packages/site-kit/src/lib/home/TryTerminal.svelte
@@ -50,11 +50,11 @@
 		padding-top: 0.4rem;
 		align-items: center;
 		justify-content: center;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 	}
 
 	.terminal pre {
-		font-size: var(--sk-font-size-code);
+		font-size: var(--sk-font-size-mono);
 		padding: 1em;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index c158289a32..707bd38910 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -139,10 +139,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		margin: 0 auto;
 		padding: 0 var(--sk-page-padding-side);
 		background-color: var(--sk-back-2);
-		font-family: var(--sk-font-body);
+		font-family: var(--sk-font-family-body);
 		user-select: none;
 		isolation: isolate;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 
 		&::after {
 			content: '';
diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
index 31498acb49..5636e8db0c 100644
--- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte
+++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
@@ -72,7 +72,7 @@
 	nav {
 		padding: 0.29rem;
 		padding-top: 0;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		overflow-y: auto;
 
 		height: 100%;
@@ -104,7 +104,7 @@
 
 		padding-bottom: 0.8rem;
 
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		font-size: var(--sk-font-size-ui-medium);
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index da677e1a7b..b1a0003357 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -297,7 +297,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 
 		@media (min-width: 800px) {
 			--padding: 1.6rem;
@@ -421,7 +421,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		display: block;
 		background: var(--background);
 		padding: var(--padding);
-		font-family: var(--sk-font-ui);
+		font-family: var(--sk-font-family-ui);
 		font-size: var(--sk-font-size-ui-medium);
 		color: var(--sk-text-4);
 		text-transform: uppercase;
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 033264e53c..4f023c0234 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-family: var(--sk-font-body);
+	font-family: var(--sk-font-family-body);
 	line-height: 1.5;
 	color: var(--sk-text-2);
 	background-color: var(--sk-back-1);
@@ -60,24 +60,21 @@ a:hover {
 }
 
 h1 {
-	font-size: var(--sk-font-size-h1);
+	font: var(--sk-font-h1);
 }
 
 h2 {
-	font-size: var(--sk-font-size-h2);
+	font: var(--sk-font-h2);
 }
 
 h3 {
-	font-size: var(--sk-font-size-h3);
+	font: var(--sk-font-h3);
 }
 
 h1,
 h2,
 h3 {
 	position: relative;
-	font-family: var(--sk-font-heading);
-	font-weight: 500;
-	line-height: 1.2;
 	text-wrap: balance;
 	color: var(--sk-text-1);
 }
@@ -98,13 +95,13 @@ kbd {
 }
 
 code {
-	font-family: var(--sk-font-mono);
+	font-family: var(--sk-font-family-mono);
 	margin: 0 0.2rem;
 	padding: 0.4rem;
 }
 
 kbd {
-	font-family: var(--sk-font-ui);
+	font-family: var(--sk-font-family-ui);
 }
 
 pre {
@@ -117,7 +114,7 @@ pre code {
 	background-color: transparent;
 	padding: 0;
 	margin: 0;
-	font-size: var(--sk-font-size-code);
+	font-size: var(--sk-font-size-mono);
 }
 
 ::selection {
@@ -143,7 +140,7 @@ blockquote :last-child {
 /*  buttons -------------------------------- */
 input,
 button {
-	font-family: var(--sk-font-ui);
+	font-family: var(--sk-font-family-ui);
 	font-size: inherit;
 }
 
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 856d5b4168..e801bae5b3 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -22,11 +22,11 @@
 	--sk-page-content-width: 84rem;
 	--sk-banner-bottom-height: 0px;
 
-	/* typography */
-	--sk-font-ui: 'Fira Sans', -apple-system, sans-serif;
-	--sk-font-body: 'EB Garamond', Georgia, serif;
-	--sk-font-heading: 'DM Serif Display', Georgia, serif;
-	--sk-font-mono: 'Fira Mono', monospace;
+	/* 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: 'EB Garamond', 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;
@@ -36,7 +36,11 @@
 	--sk-font-size-ui-small: 1.3rem;
 	--sk-font-size-ui-medium: 1.6rem;
 	--sk-font-size-ui-large: 3rem;
-	--sk-font-size-code: 1.4rem;
+	--sk-font-size-mono: 1.4rem;
+
+	--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);
 
 	/* Base colors */
 	--sk-theme-1-hsl: 12, 93%, 43%;

From e6772e9995455aed7e39d6fb44d09e0f5c41db90 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 12 Oct 2024 10:46:43 -0400
Subject: [PATCH 2/6] more

---
 apps/svelte.dev/src/routes/blog/+page.svelte   |  7 ++-----
 .../src/routes/blog/[slug]/+page.svelte        | 18 ++++--------------
 .../src/routes/docs/[...path]/+page.svelte     |  2 +-
 .../routes/docs/[...path]/OnThisPage.svelte    |  7 +------
 .../site-kit/src/lib/components/Text.svelte    | 11 ++---------
 .../site-kit/src/lib/docs/DocsContents.svelte  |  3 +--
 packages/site-kit/src/lib/home/Footer.svelte   |  4 +---
 .../site-kit/src/lib/home/TrySection.svelte    |  2 +-
 packages/site-kit/src/lib/styles/base.css      | 12 ++++++++++--
 packages/site-kit/src/lib/styles/tokens.css    |  2 ++
 10 files changed, 25 insertions(+), 43 deletions(-)

diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 3a079dbcb6..ad0b075696 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -96,7 +96,6 @@
 			display: block;
 			text-decoration: none;
 			color: var(--sk-text-2);
-			font-size: var(--sk-font-size-body);
 
 			&:hover h2 {
 				text-decoration: underline;
@@ -104,7 +103,7 @@
 		}
 
 		p {
-			font-size: var(--sk-font-size-body-small);
+			font: var(--sk-font-body-small);
 			color: var(--sk-text-3);
 			margin: 0 0 0.5em 0;
 		}
@@ -162,9 +161,7 @@
 
 			a {
 				display: block;
-				font-family: var(--sk-font-family-body);
-				font-weight: 400;
-				font-size: var(--sk-font-size-body);
+				font: var(--sk-font-body);
 				color: var(--sk-text-2);
 			}
 		}
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index eeee2ae39b..cea8e7073d 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -51,8 +51,7 @@
 
 				figcaption {
 					color: var(--sk-text-4);
-					text-align: left;
-					font-size: var(--sk-font-size-body-small);
+					font: var(--sk-font-body-small);
 				}
 			}
 
@@ -66,20 +65,11 @@
 				width: 16rem;
 				z-index: 2;
 				color: var(--sk-text-4);
-				font-size: var(--sk-font-size-body-small);
+				font: var(--sk-font-body-small);
 
 				p {
 					color: var(--sk-text-4);
-					font-family: var(--sk-font-family-body);
-					font-size: var(--sk-font-size-body-small);
-
-					&:first-child {
-						margin-top: 0;
-					}
-
-					&:last-child {
-						margin-bottom: 0;
-					}
+					font: inherit;
 				}
 			}
 
@@ -124,7 +114,7 @@
 	}
 
 	.standfirst {
-		font-size: var(--sk-font-size-body-small);
+		font: var(--sk-font-body-small);
 		color: var(--sk-text-3);
 		margin: 0 0 1em 0;
 	}
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 42e1638d6e..434857d9a2 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -112,7 +112,7 @@
 	}
 
 	.controls a {
-		font-size: var(--sk-font-size-body-small);
+		font: var(--sk-font-body-small);
 	}
 
 	.controls span.faded {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 01cc3d7a3d..710ed148fd 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -64,9 +64,8 @@
 			padding-top: 0.8rem;
 
 			ul {
-				margin: 0;
 				list-style: none;
-				font-size: var(--sk-font-size-body-small);
+				font: var(--sk-font-body-small);
 			}
 
 			/* Only show the title link if it's in the sidebar */
@@ -215,10 +214,6 @@
 					display: list-item;
 				}
 
-				li {
-					font-size: var(--sk-font-size-body-small);
-				}
-
 				a.active {
 					color: var(--sk-text-1);
 					text-decoration: underline;
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 12e6860989..2310d83431 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -99,12 +99,6 @@
 			margin-top: 5rem;
 		}
 
-		p,
-		ol,
-		ul {
-			margin: 1em 0;
-		}
-
 		code,
 		kbd {
 			white-space: pre-wrap;
@@ -406,7 +400,7 @@
 		}
 
 		small {
-			font-size: var(--sk-font-size-body-small);
+			font: var(--sk-font-body-small);
 			float: right;
 			pointer-events: all;
 			color: var(--sk-theme-1);
@@ -529,8 +523,7 @@
 				align-items: center;
 				height: 3rem;
 				color: var(--sk-text-4);
-				font-style: normal;
-				font-size: var(--sk-font-size-body-small);
+				font: var(--sk-font-body-small);
 				user-select: none;
 
 				&:hover {
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 473b3137c1..48e9d1a3d8 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -96,8 +96,7 @@
 
 	.page {
 		display: block;
-		font-size: var(--sk-font-size-body-small);
-		font-family: var(--sk-font-family-body);
+		font: var(--sk-font-body-small);
 	}
 
 	[aria-current='page'] {
diff --git a/packages/site-kit/src/lib/home/Footer.svelte b/packages/site-kit/src/lib/home/Footer.svelte
index 8c9f58e4e3..1f9af19ce4 100644
--- a/packages/site-kit/src/lib/home/Footer.svelte
+++ b/packages/site-kit/src/lib/home/Footer.svelte
@@ -43,7 +43,7 @@
 <style>
 	footer {
 		max-width: 120rem;
-		font-size: var(--sk-font-size-body-small);
+		font: var(--sk-font-body-small);
 		padding: 0 var(--sk-page-padding-side);
 		margin: 0 auto;
 		display: grid;
@@ -67,9 +67,7 @@
 
 	.links a {
 		color: var(--sk-text-2);
-		font-size: var(--sk-font-size-body-small);
 		display: block;
-		line-height: 1.8;
 	}
 
 	.open-source {
diff --git a/packages/site-kit/src/lib/home/TrySection.svelte b/packages/site-kit/src/lib/home/TrySection.svelte
index 691dd69dff..126dcff00e 100644
--- a/packages/site-kit/src/lib/home/TrySection.svelte
+++ b/packages/site-kit/src/lib/home/TrySection.svelte
@@ -67,7 +67,7 @@
 
 	.copy {
 		text-align: left;
-		font-size: var(--sk-font-size-body);
+		font: var(--sk-font-body);
 	}
 
 	h2 {
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 4f023c0234..c31208e035 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -44,8 +44,16 @@ body {
 p,
 ul,
 ol {
-	font-size: var(--sk-font-size-body);
+	font: var(--sk-font-body);
 	margin: 1em 0;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
 }
 
 a {
@@ -163,7 +171,7 @@ a {
 /*  tables --------------------------------- */
 table {
 	width: 100%;
-	font-size: var(--sk-font-size-body-small);
+	font: var(--sk-font-body-small);
 }
 
 td,
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index e801bae5b3..69ab42bf1f 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -41,6 +41,8 @@
 	--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) / 1.5 var(--sk-font-family-body);
+	--sk-font-body-small: 400 var(--sk-font-size-body-small) / 1.5 var(--sk-font-family-body);
 
 	/* Base colors */
 	--sk-theme-1-hsl: 12, 93%, 43%;

From b9b70634856280cc741bb4b2d29284107037542b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 12 Oct 2024 11:20:52 -0400
Subject: [PATCH 3/6] more

---
 .../(authed)/playground/[id]/AppControls.svelte       |  2 --
 apps/svelte.dev/src/routes/_home/Features.svelte      |  3 +--
 apps/svelte.dev/src/routes/blog/Byline.svelte         |  3 +--
 .../src/routes/docs/[...path]/Breadcrumbs.svelte      |  4 +---
 .../src/routes/docs/[...path]/OnThisPage.svelte       |  3 +--
 .../src/routes/tutorial/[...slug]/+page.svelte        |  4 ++--
 .../src/routes/tutorial/[...slug]/Loading.svelte      |  5 ++---
 .../src/routes/tutorial/[...slug]/Menu.svelte         |  2 +-
 .../src/routes/tutorial/[...slug]/Output.svelte       |  3 +--
 .../src/routes/tutorial/[...slug]/ScreenToggle.svelte |  2 +-
 .../src/routes/tutorial/[...slug]/ToggleButton.svelte |  1 -
 .../tutorial/[...slug]/filetree/Filetree.svelte       |  2 +-
 .../routes/tutorial/[...slug]/filetree/Item.svelte    |  3 +--
 packages/repl/src/lib/Input/ComponentSelector.svelte  |  4 ++--
 packages/repl/src/lib/Input/Migrate.svelte            |  2 +-
 packages/repl/src/lib/Input/RunesInfo.svelte          |  2 +-
 packages/repl/src/lib/InputOutputToggle.svelte        |  3 +--
 packages/repl/src/lib/Message.svelte                  |  2 +-
 packages/repl/src/lib/Output/Output.svelte            |  2 +-
 packages/repl/src/lib/Output/PaneWithPanel.svelte     |  4 ++--
 packages/repl/src/lib/Output/Viewer.svelte            | 11 +++++------
 packages/site-kit/src/lib/components/Text.svelte      |  3 +--
 packages/site-kit/src/lib/search/SearchBox.svelte     |  4 ++--
 .../site-kit/src/lib/search/SearchResultList.svelte   |  7 ++++---
 packages/site-kit/src/lib/search/SearchResults.svelte |  2 +-
 packages/site-kit/src/lib/styles/tokens.css           |  4 ++++
 26 files changed, 39 insertions(+), 48 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 c3245b1b22..29c0045008 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -358,8 +358,6 @@ export default app;`
 
 	.icon {
 		position: relative;
-		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-small);
 		color: var(--sk-text-3);
 		line-height: 1;
 		background-size: 1.8rem;
diff --git a/apps/svelte.dev/src/routes/_home/Features.svelte b/apps/svelte.dev/src/routes/_home/Features.svelte
index 3acdc93d70..6b0b6ad8c2 100644
--- a/apps/svelte.dev/src/routes/_home/Features.svelte
+++ b/apps/svelte.dev/src/routes/_home/Features.svelte
@@ -64,8 +64,7 @@
 
 	.wall {
 		margin: 0;
-		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 		color: var(--sk-text-4);
 
 		strong {
diff --git a/apps/svelte.dev/src/routes/blog/Byline.svelte b/apps/svelte.dev/src/routes/blog/Byline.svelte
index 935e1e3db9..c82dda42e2 100644
--- a/apps/svelte.dev/src/routes/blog/Byline.svelte
+++ b/apps/svelte.dev/src/routes/blog/Byline.svelte
@@ -23,8 +23,7 @@
 	.byline {
 		margin: 0 0 4rem 0;
 		padding: 1rem 0 0 0;
-		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
index fd69050bb6..6c2ef53b9e 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte
@@ -10,11 +10,9 @@
 
 <style>
 	.breadcrumbs {
-		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 		color: var(--sk-text-4);
 		text-transform: uppercase;
-		line-height: 1.35;
 
 		span:not(:last-child)::after {
 			content: ' • ';
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 710ed148fd..7900fecb34 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -143,8 +143,7 @@
 				}
 
 				h3 {
-					font-family: var(--sk-font-family-ui);
-					font-size: var(--sk-font-size-ui-small);
+					font: var(--sk-font-ui-small);
 					color: var(--sk-text-4);
 					margin: 0;
 					display: block;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
index 5805f64800..c4895a7215 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte
@@ -390,7 +390,7 @@
 		background: var(--sk-back-2);
 		display: flex;
 		flex-direction: column;
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 	}
 
 	.navigator .solve {
@@ -402,7 +402,7 @@
 		border-right: 1px solid var(--sk-back-4);
 		color: white;
 		opacity: 1;
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 	}
 
 	.navigator .solve:disabled {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
index b052bda948..73e060064f 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
@@ -121,8 +121,7 @@
 		justify-content: center;
 		background: var(--sk-back-2);
 		user-select: none;
-		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 	}
 
 	.progress-container {
@@ -169,7 +168,7 @@
 	}
 
 	small {
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-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 9c4ba6ae2e..4f1725b67f 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
@@ -434,7 +434,7 @@
 
 		h1 :where(.part-title, .chapter-title) {
 			grid-row: 2 / span 1;
-			font-size: var(--sk-font-size-ui-small);
+			font: var(--sk-font-ui-small);
 			color: var(--sk-text-3);
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
index adab579d75..fc8bca8967 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
@@ -184,8 +184,7 @@
 		bottom: 0;
 		width: 100%;
 		height: 80%;
-		font-family: var(--sk-font-family-mono);
-		font-size: var(--sk-font-size-ui-small); /* TODO this should use a mono size */
+		font: var(--sk-font-mono);
 		padding: 1rem;
 		border-top: 1px solid var(--sk-text-4);
 		background: rgba(255, 255, 255, 0.5);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte
index b7285268bf..c1343fa7ee 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/ScreenToggle.svelte
@@ -43,7 +43,7 @@
 		z-index: 2;
 		margin: 0 auto;
 		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.07);
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 	}
 
 	@media (min-width: 832px) {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte
index 67ace5dc70..357ca88839 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/ToggleButton.svelte
@@ -31,7 +31,6 @@
 		height: var(--size);
 		width: calc(100% - 0.6em);
 		max-width: calc(2 * var(--size));
-		top: -2px;
 		border-radius: 0.5em;
 		-webkit-appearance: none;
 		appearance: none;
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..a02fe56e2b 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: var(--sk-font-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 a50dfaec96..89cbde6470 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -132,7 +132,7 @@
 		color: var(--sk-text-1) !important;
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
 		padding: 0 0.5rem;
-		font-size: var(--font-size);
+		font: inherit;
 	}
 
 	.basename {
@@ -140,7 +140,6 @@
 		position: relative;
 		margin: 0;
 		padding: 0 1rem 0 calc(1rem + var(--inset));
-		font-size: var(--font-size);
 		color: inherit;
 		flex: 1;
 		height: 100%;
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index ddb2b19a96..864d67e745 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -314,7 +314,7 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-family-ui);
+		font: var(--sk-font-ui-small);
 		border: none;
 		padding: 0 1rem;
 		height: 100%;
@@ -378,7 +378,7 @@
 		align-items: center;
 		justify-content: center;
 		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small); /* TODO can we just inherit */
 		padding: 0 1rem 1px 2em;
 		box-sizing: border-box;
 	}
diff --git a/packages/repl/src/lib/Input/Migrate.svelte b/packages/repl/src/lib/Input/Migrate.svelte
index 6d07626b7f..c28dfe5a18 100644
--- a/packages/repl/src/lib/Input/Migrate.svelte
+++ b/packages/repl/src/lib/Input/Migrate.svelte
@@ -14,7 +14,7 @@
 		position: relative;
 		display: flex;
 		text-transform: uppercase;
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-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 dd5114aeb4..893536b0f8 100644
--- a/packages/repl/src/lib/Input/RunesInfo.svelte
+++ b/packages/repl/src/lib/Input/RunesInfo.svelte
@@ -69,7 +69,7 @@
 		position: relative;
 		display: flex;
 		text-transform: uppercase;
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 		padding: 0.8rem;
 		gap: 0.5rem;
 		margin-right: 0.3rem;
diff --git a/packages/repl/src/lib/InputOutputToggle.svelte b/packages/repl/src/lib/InputOutputToggle.svelte
index 2db514cff7..816f5794b1 100644
--- a/packages/repl/src/lib/InputOutputToggle.svelte
+++ b/packages/repl/src/lib/InputOutputToggle.svelte
@@ -26,8 +26,7 @@
 		width: 100%;
 		height: var(--pane-controls-h);
 		border-top: 1px solid var(--sk-back-5);
-		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-small);
+		font: var(--sk-font-ui-small);
 		z-index: 2;
 	}
 
diff --git a/packages/repl/src/lib/Message.svelte b/packages/repl/src/lib/Message.svelte
index 48f635357b..f0f8feb9c6 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-font-size-ui-small) / 1.8rem var(--sk-font-family-body);
+		font: var(--sk-font-ui-small);
 		margin: 0;
 		border-top: 1px solid white;
 	}
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
index a01f7f7cc1..4f4fe58a9f 100644
--- a/packages/repl/src/lib/Output/Output.svelte
+++ b/packages/repl/src/lib/Output/Output.svelte
@@ -130,7 +130,7 @@
 		background: transparent;
 		text-align: left;
 		position: relative;
-		font: var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-family-ui);
+		font: var(--sk-font-ui-small); /* TODO should probably be a global button style */
 		border: none;
 		border-bottom: 1px solid transparent;
 		padding: 0 1rem;
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
index 54989033a3..5941eb149d 100644
--- a/packages/repl/src/lib/Output/PaneWithPanel.svelte
+++ b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -69,9 +69,9 @@
 	}
 
 	.panel-heading {
-		font: 400 var(--sk-font-size-ui-small) / 1.8rem var(--sk-font-family-ui);
+		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
-		color: var(--sk-text-1, #333);
+		color: var(--sk-text-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 6579762ea3..db47045d3b 100644
--- a/packages/repl/src/lib/Output/Viewer.svelte
+++ b/packages/repl/src/lib/Output/Viewer.svelte
@@ -321,15 +321,14 @@
 	}
 
 	button {
-		color: var(--sk-text-2, #999);
-		font-size: var(--sk-font-size-ui-small);
-		font-family: var(--sk-font-family-ui);
+		color: var(--sk-text-2);
+		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
 		display: block;
-	}
 
-	button:hover {
-		color: var(--sk-text-1, #333);
+		&:hover {
+			color: var(--sk-text-1);
+		}
 	}
 
 	.overlay {
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 2310d83431..b29497c034 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -142,8 +142,7 @@
 					position: relative;
 					top: 0.1rem;
 					flex: 1;
-					font-family: var(--sk-font-family-ui);
-					font-size: var(--sk-font-size-ui-small);
+					font: var(--sk-font-ui-small);
 					color: var(--sk-text-3);
 					text-overflow: ellipsis;
 					overflow: hidden;
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index b1a0003357..4347c535c5 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -351,7 +351,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);
+			font: var(--sk-font-ui-small);
 		}
 	}
 
@@ -412,7 +412,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			padding-bottom: 1rem;
 
 			a {
-				font-size: var(--sk-font-size-ui-medium);
+				font: var(--sk-font-ui-medium);
 			}
 		}
 	}
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 43cc4b6d07..2018655e47 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: calc(0.5 * var(--padding)) var(--padding);
-			font-size: var(--sk-font-size-ui-medium);
+			font: var(--sk-font-ui-medium);
 			z-index: 2;
 			user-select: none;
 
@@ -121,6 +121,7 @@
 		padding: 1.2rem var(--padding) 1.2rem calc(4rem + var(--padding));
 		overflow: hidden;
 		background: var(--background);
+		font: var(--sk-font-ui-medium);
 
 		&::before {
 			content: '';
@@ -177,7 +178,7 @@
 					content: ' • ';
 					position: relative;
 					color: var(--sk-text-4);
-					font-size: var(--sk-font-size-ui-small);
+					font: var(--sk-font-ui-small);
 					top: -0.1rem;
 				}
 			}
@@ -212,7 +213,7 @@
 
 			span {
 				color: var(--sk-text-3);
-				font-size: var(--sk-font-size-ui-small);
+				font: var(--sk-font-ui-small);
 				margin: 0.4rem 0 0 0;
 			}
 
diff --git a/packages/site-kit/src/lib/search/SearchResults.svelte b/packages/site-kit/src/lib/search/SearchResults.svelte
index 171643332f..50158c7c6b 100644
--- a/packages/site-kit/src/lib/search/SearchResults.svelte
+++ b/packages/site-kit/src/lib/search/SearchResults.svelte
@@ -31,7 +31,7 @@ Renders a list of search results
 <style>
 	.info {
 		padding: var(--padding);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		color: var(--sk-text-4);
 		text-transform: uppercase;
 		background-color: var(--sk-back-2);
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 69ab42bf1f..6a74b62ce2 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -43,6 +43,10 @@
 	--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) / 1.5 var(--sk-font-family-body);
 	--sk-font-body-small: 400 var(--sk-font-size-body-small) / 1.5 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%;

From 5e7eb65b6557f9b4c7b940a1343799722ac7d0d4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 12 Oct 2024 11:34:09 -0400
Subject: [PATCH 4/6] more

---
 .../(authed)/playground/[id]/AppControls.svelte |  3 +--
 .../(authed)/playground/[id]/UserMenu.svelte    |  3 +--
 .../src/routes/_home/Deployment.svelte          |  6 ++----
 apps/svelte.dev/src/routes/_home/Hero.svelte    |  3 +--
 apps/svelte.dev/src/routes/_home/Svelte.svelte  |  2 +-
 apps/svelte.dev/src/routes/_home/Video.svelte   |  2 +-
 apps/svelte.dev/src/routes/blog/+page.svelte    | 17 +++++++++--------
 .../src/routes/docs/[...path]/+page.svelte      |  3 +--
 .../routes/tutorial/[...slug]/Loading.svelte    |  5 ++---
 .../src/routes/tutorial/[...slug]/Menu.svelte   |  9 +++------
 .../routes/tutorial/[...slug]/Sidebar.svelte    |  3 +--
 .../site-kit/src/lib/components/Dropdown.svelte |  3 +--
 packages/site-kit/src/lib/nav/Menu.svelte       |  4 ++--
 packages/site-kit/src/lib/nav/Nav.svelte        |  9 ++++-----
 .../site-kit/src/lib/nav/NavContextMenu.svelte  |  5 +----
 .../site-kit/src/lib/search/SearchBox.svelte    |  3 +--
 .../src/lib/search/SearchResultList.svelte      |  2 +-
 17 files changed, 33 insertions(+), 49 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 29c0045008..b3623bbbcf 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -422,12 +422,11 @@ export default app;`
 		border: 1px solid var(--sk-back-4);
 		border-radius: var(--sk-border-radius);
 		color: currentColor;
-		font-family: var(--sk-font-family-ui);
 		width: 0;
 		flex: 1;
 		padding: 0.2rem 0.6rem;
 		height: 3.2rem;
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	.badge {
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
index 5e7cd1ef4e..cff72a7291 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte
@@ -36,8 +36,7 @@
 
 	.name {
 		display: none;
-		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	.name {
diff --git a/apps/svelte.dev/src/routes/_home/Deployment.svelte b/apps/svelte.dev/src/routes/_home/Deployment.svelte
index a44b823156..b14fa08174 100644
--- a/apps/svelte.dev/src/routes/_home/Deployment.svelte
+++ b/apps/svelte.dev/src/routes/_home/Deployment.svelte
@@ -145,8 +145,7 @@
 		left: 0;
 		width: 100%;
 		color: var(--sk-text-3);
-		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	.globe span::before {
@@ -181,8 +180,7 @@
 	}
 
 	.platforms a span {
-		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		color: var(--sk-text-3);
 		text-align: center;
 	}
diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
index 1d99bbaacd..d9ef3ba2fd 100644
--- a/apps/svelte.dev/src/routes/_home/Hero.svelte
+++ b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -95,8 +95,7 @@
 	}
 
 	.cta {
-		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		color: var(--sk-theme-1);
 		text-transform: uppercase;
 	}
diff --git a/apps/svelte.dev/src/routes/_home/Svelte.svelte b/apps/svelte.dev/src/routes/_home/Svelte.svelte
index 666e186c51..20b93f684a 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-medium);
+				font: var(--sk-font-ui-small);
 				background: var(--sk-text-2);
 				border-radius: var(--sk-border-radius);
 				font-family: var(--sk-font-family-ui);
diff --git a/apps/svelte.dev/src/routes/_home/Video.svelte b/apps/svelte.dev/src/routes/_home/Video.svelte
index 13fa62007a..4c4dab1715 100644
--- a/apps/svelte.dev/src/routes/_home/Video.svelte
+++ b/apps/svelte.dev/src/routes/_home/Video.svelte
@@ -218,7 +218,7 @@
 	.captions {
 		line-height: 1;
 		color: white;
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		filter: var(--control-filter);
 	}
 
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index ad0b075696..e508feaed3 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -120,15 +120,20 @@
 			gap: 3em;
 		}
 
+		.featured,
+		.feed {
+			&::before {
+				font: var(--sk-font-ui-medium);
+				text-transform: uppercase;
+				color: var(--sk-text-4);
+			}
+		}
+
 		.featured {
 			display: block;
 
 			&::before {
 				content: 'Featured posts';
-				font-family: var(--sk-font-family-ui);
-				font-size: var(--sk-font-size-ui-medium);
-				text-transform: uppercase;
-				color: var(--sk-text-4);
 			}
 
 			article {
@@ -153,10 +158,6 @@
 				content: 'Monthly updates';
 				position: absolute;
 				top: 0;
-				font-family: var(--sk-font-family-ui);
-				font-size: var(--sk-font-size-ui-medium);
-				text-transform: uppercase;
-				color: var(--sk-text-4);
 			}
 
 			a {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index 434857d9a2..d04b095bbc 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -105,9 +105,8 @@
 
 	.controls span {
 		display: block;
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		text-transform: uppercase;
-		font-family: var(--sk-font-family-ui);
 		color: var(--sk-text-3);
 	}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
index 73e060064f..4db4a92639 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte
@@ -147,14 +147,13 @@
 	}
 
 	h2 {
-		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-large);
+		font: var(--sk-font-ui-large);
 		margin: 0 0 0.5em 0;
 	}
 
 	p {
 		margin: 0 0 1em 0;
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	button {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
index 4f1725b67f..6dbe2f98dc 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
@@ -246,7 +246,7 @@
 		text-overflow: ellipsis;
 		text-align: center;
 		color: var(--sk-text-2);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 
 		.desktop {
 			display: flex;
@@ -329,8 +329,6 @@
 	}
 
 	li :global(svg) {
-		position: absolute;
-		/* left: -2rem; */
 		top: 0.1rem;
 		width: 2rem;
 		height: 2rem;
@@ -352,10 +350,9 @@
 		color: var(--sk-text-2);
 		padding: 0 0 0 0.5rem;
 		display: block;
-		font-variant-numeric: tabular-nums;
 		box-sizing: border-box;
-		font-size: var(--sk-font-size-ui-medium);
-		line-height: 1.5;
+		font: var(--sk-font-ui-medium);
+		font-variant-numeric: tabular-nums;
 	}
 
 	li button {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
index 243a591003..3e4a2a98bb 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
@@ -194,8 +194,7 @@
 
 		.edit {
 			color: var(--sk-text-2);
-			font-family: var(--sk-font-family-ui);
-			font-size: var(--sk-font-size-ui-medium);
+			font: var(--sk-font-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/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte
index fa7b9bc0b6..31c08cbc70 100644
--- a/packages/site-kit/src/lib/components/Dropdown.svelte
+++ b/packages/site-kit/src/lib/components/Dropdown.svelte
@@ -47,8 +47,7 @@
 				color: var(--sk-text-2);
 				padding: 1rem 1.3rem;
 				display: block;
-				font-family: var(--sk-font-family-ui);
-				font-size: var(--sk-font-size-ui-medium);
+				font: var(--sk-font-ui-medium);
 				text-decoration: none;
 				line-height: 1;
 				width: 100%;
diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte
index 06ad0708ab..f17e84843d 100644
--- a/packages/site-kit/src/lib/nav/Menu.svelte
+++ b/packages/site-kit/src/lib/nav/Menu.svelte
@@ -361,7 +361,7 @@
 		justify-content: start;
 		gap: 1rem;
 
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		color: var(--sk-text-3);
 
 		background-color: var(--sk-back-3);
@@ -390,7 +390,7 @@
 		margin: 0.3rem 0;
 		height: 4rem;
 		color: var(--sk-text-2);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	.universal .contents,
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 707bd38910..685a4c6242 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -156,7 +156,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	}
 
 	a {
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	.current-section {
@@ -164,7 +164,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		align-items: center;
 		color: var(--sk-text-3);
 		margin-left: 0.4em;
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 	}
 
 	@media (max-width: 799px) {
@@ -181,8 +181,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		:global {
 			a {
 				color: var(--sk-text-2);
-				line-height: 1;
-				font-size: var(--sk-font-size-ui-medium);
+				font: var(--sk-font-ui-medium);
 
 				white-space: nowrap;
 				height: 100%;
@@ -271,7 +270,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 		.appearance .caption {
 			display: block;
-			font-size: var(--sk-font-size-ui-medium);
+			font: var(--sk-font-ui-medium); /* TODO this should be inherited */
 		}
 
 		nav :global(.large) {
diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
index 5636e8db0c..8d5d009dc6 100644
--- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte
+++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
@@ -101,11 +101,8 @@
 	h2,
 	h3 {
 		display: block;
-
 		padding-bottom: 0.8rem;
-
-		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 		color: var(--sk-text-3);
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 4347c535c5..648cb235cc 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -421,8 +421,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		display: block;
 		background: var(--background);
 		padding: var(--padding);
-		font-family: var(--sk-font-family-ui);
-		font-size: var(--sk-font-size-ui-medium);
+		font: var(--sk-font-ui-medium);
 		color: var(--sk-text-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 2018655e47..65c5eb34bb 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-font-size-ui-medium);
+			font: var(--sk-font-ui-medium);
 			color: var(--sk-text-2);
 
 			span {

From a6609590144d3972ff46ca91a94d917fd945f6e6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 12 Oct 2024 11:36:36 -0400
Subject: [PATCH 5/6] more

---
 apps/svelte.dev/src/routes/search/+page.svelte    | 3 +--
 packages/repl/src/lib/CodeMirror.svelte           | 2 +-
 packages/repl/src/lib/Output/AstNode.svelte       | 3 +--
 packages/repl/src/lib/Output/AstView.svelte       | 2 +-
 packages/site-kit/src/lib/home/TryTerminal.svelte | 2 +-
 packages/site-kit/src/lib/search/SearchBox.svelte | 2 +-
 6 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/svelte.dev/src/routes/search/+page.svelte b/apps/svelte.dev/src/routes/search/+page.svelte
index bc32834f6d..78f1bd04bb 100644
--- a/apps/svelte.dev/src/routes/search/+page.svelte
+++ b/apps/svelte.dev/src/routes/search/+page.svelte
@@ -43,8 +43,7 @@
 		display: block;
 		width: 100%;
 		height: 100%;
-		font-family: inherit;
-		font-size: var(--sk-font-size-ui-large);
+		font: var(--sk-font-ui-large);
 		border: none;
 		border-radius: var(--sk-border-radius);
 		padding: 2rem 2rem 2rem 5rem;
diff --git a/packages/repl/src/lib/CodeMirror.svelte b/packages/repl/src/lib/CodeMirror.svelte
index 57b375c0b6..9154566436 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-font-size-mono) / 1.7 var(--sk-font-family-mono);
+			font: var(--sk-font-mono);
 		}
 
 		.mark-text {
diff --git a/packages/repl/src/lib/Output/AstNode.svelte b/packages/repl/src/lib/Output/AstNode.svelte
index f6dfdf6b8f..754610af3c 100644
--- a/packages/repl/src/lib/Output/AstNode.svelte
+++ b/packages/repl/src/lib/Output/AstNode.svelte
@@ -111,8 +111,7 @@
 
 <style>
 	* {
-		font-family: var(--sk-font-family-mono);
-		font-size: var(--sk-font-size-mono);
+		font: var(--sk-font-mono);
 	}
 
 	ul {
diff --git a/packages/repl/src/lib/Output/AstView.svelte b/packages/repl/src/lib/Output/AstView.svelte
index 936a50c859..d9c1dbeafa 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-font-size-mono) / 1.7 var(--sk-font-family-mono);
+		font: var(--sk-font-mono);
 	}
 
 	pre {
diff --git a/packages/site-kit/src/lib/home/TryTerminal.svelte b/packages/site-kit/src/lib/home/TryTerminal.svelte
index 2136626129..9cd4dc37c0 100644
--- a/packages/site-kit/src/lib/home/TryTerminal.svelte
+++ b/packages/site-kit/src/lib/home/TryTerminal.svelte
@@ -54,7 +54,7 @@
 	}
 
 	.terminal pre {
-		font-size: var(--sk-font-size-mono);
+		font: var(--sk-font-mono);
 		padding: 1em;
 	}
 
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 648cb235cc..12d322d46b 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -309,7 +309,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	}
 
 	input {
-		font-size: var(--sk-font-size-ui-large);
+		font: var(--sk-font-ui-large);
 		width: 100%;
 		padding: calc(var(--padding) - 0.5rem) 5rem calc(var(--padding) - 0.5rem) var(--padding);
 		height: 6rem;

From fb8b82c2ff016ec6b94e30137adbccbc38274553 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 12 Oct 2024 12:12:51 -0400
Subject: [PATCH 6/6] more

---
 .../src/lib/components/ScreenToggle.svelte    |  1 -
 .../src/routes/(authed)/apps/+page.svelte     | 33 +++++++++----------
 .../playground/[id]/AppControls.svelte        |  1 -
 .../svelte.dev/src/routes/_home/Svelte.svelte |  5 ++-
 apps/svelte.dev/src/routes/_home/Video.svelte |  5 ++-
 .../src/routes/docs/[...path]/+page.svelte    |  3 +-
 .../svelte.dev/src/routes/search/+page.svelte |  1 -
 .../routes/tutorial/[...slug]/Chrome.svelte   |  3 +-
 .../routes/tutorial/[...slug]/Editor.svelte   |  5 ++-
 .../src/routes/tutorial/[...slug]/Menu.svelte |  5 +--
 .../tutorial/[...slug]/OutputRollup.svelte    |  3 +-
 .../routes/tutorial/[...slug]/Sidebar.svelte  |  8 ++++-
 .../routes/tutorial/[...slug]/codemirror.css  |  7 ++--
 .../[...slug]/filetree/ContextMenu.svelte     |  4 +--
 .../tutorial/[...slug]/filetree/Item.svelte   |  1 -
 15 files changed, 37 insertions(+), 48 deletions(-)

diff --git a/apps/svelte.dev/src/lib/components/ScreenToggle.svelte b/apps/svelte.dev/src/lib/components/ScreenToggle.svelte
index 2972822850..a3db762b64 100644
--- a/apps/svelte.dev/src/lib/components/ScreenToggle.svelte
+++ b/apps/svelte.dev/src/lib/components/ScreenToggle.svelte
@@ -30,7 +30,6 @@
 		height: 1em;
 		padding: 0.3em 0.4em;
 		border-radius: var(--sk-border-radius);
-		line-height: 1em;
 		box-sizing: content-box;
 		color: var(--sk-text-3);
 		border: 1px solid var(--sk-back-3);
diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
index 7a9782ebb6..3953a2ad9c 100644
--- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -152,8 +152,7 @@
 	}
 
 	h1 {
-		font-size: 4rem;
-		font-weight: 400;
+		font: var(--sk-font-h1);
 	}
 
 	.user {
@@ -162,16 +161,17 @@
 		position: relative;
 		margin: 1rem 0;
 		color: var(--sk-text-2);
-	}
-
-	.avatar {
-		position: absolute;
-		left: 0;
-		top: 0.1rem;
-		width: 2.4rem;
-		height: 2.4rem;
-		border: 1px solid rgba(0, 0, 0, 0.3);
-		border-radius: 0.2rem;
+		font: var(--sk-font-ui-medium);
+
+		.avatar {
+			position: absolute;
+			left: 0;
+			top: 0.1rem;
+			width: 2.4rem;
+			height: 2.4rem;
+			border: 1px solid rgba(0, 0, 0, 0.3);
+			border-radius: var(--sk-border-radius);
+		}
 	}
 
 	.controls {
@@ -182,7 +182,7 @@
 		width: 100%;
 		height: 4rem;
 		margin: 0 0 2rem 0;
-		font-size: 1.6rem;
+		font: var(--sk-font-ui-medium);
 		z-index: 2;
 		justify-content: space-between;
 		outline: 1rem solid var(--sk-back-1);
@@ -204,8 +204,6 @@
 
 	.controls input,
 	.controls button {
-		font-family: inherit;
-		font-size: inherit;
 	}
 
 	.controls input[type='search'] {
@@ -218,6 +216,7 @@
 		border: 1px solid var(--sk-back-5);
 		border-radius: var(--sk-border-radius);
 		z-index: 2;
+		font: var(--sk-font-ui-large);
 	}
 
 	.controls button {
@@ -247,7 +246,7 @@
 
 	h2 {
 		color: var(--sk-text-2);
-		font-weight: 400;
+		font: var(--sk-font-ui-medium);
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
@@ -263,7 +262,7 @@
 	}
 
 	li span {
-		font-size: 12px;
+		font: var(--sk-font-ui-small);
 		color: var(--sk-text-3);
 	}
 
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 b3623bbbcf..8d04ade60b 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -345,7 +345,6 @@ export default app;`
 		left: 0;
 		width: 100%;
 		height: 100%;
-		font-family: var(--sk-font-family-ui);
 	}
 
 	button,
diff --git a/apps/svelte.dev/src/routes/_home/Svelte.svelte b/apps/svelte.dev/src/routes/_home/Svelte.svelte
index 20b93f684a..ddd4112793 100644
--- a/apps/svelte.dev/src/routes/_home/Svelte.svelte
+++ b/apps/svelte.dev/src/routes/_home/Svelte.svelte
@@ -82,7 +82,7 @@
 
 		.description {
 			position: relative;
-			font-family: var(--sk-font-family-ui);
+			font: var(--sk-font-ui-medium);
 			display: flex;
 			align-items: center;
 			bottom: 0.2em;
@@ -93,10 +93,9 @@
 				line-height: 1;
 				margin: 0 1em;
 				text-transform: uppercase;
-				font: var(--sk-font-ui-small);
 				background: var(--sk-text-2);
 				border-radius: var(--sk-border-radius);
-				font-family: var(--sk-font-family-ui);
+				font: var(--sk-font-ui-small);
 				color: var(--sk-back-2);
 			}
 		}
diff --git a/apps/svelte.dev/src/routes/_home/Video.svelte b/apps/svelte.dev/src/routes/_home/Video.svelte
index 4c4dab1715..51674d6fc6 100644
--- a/apps/svelte.dev/src/routes/_home/Video.svelte
+++ b/apps/svelte.dev/src/routes/_home/Video.svelte
@@ -176,13 +176,12 @@
 	}
 
 	video::cue {
-		font-size: 1.25rem;
-		line-height: 1.3;
+		font: var(--sk-font-ui-small);
 	}
 
 	@media (min-width: 600px) {
 		video::cue {
-			font-size: 1.75rem;
+			font: var(--sk-font-ui-medium);
 		}
 	}
 
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
index d04b095bbc..0e1d44bc82 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
@@ -68,9 +68,8 @@
 <style>
 	.edit {
 		position: relative;
-		font-size: 1.4rem;
 		margin: 6rem 0 2rem 0;
-		font-family: var(--sk-font-family-ui);
+		font: var(--sk-font-ui-small);
 
 		a {
 			text-decoration: none;
diff --git a/apps/svelte.dev/src/routes/search/+page.svelte b/apps/svelte.dev/src/routes/search/+page.svelte
index 78f1bd04bb..86581b4461 100644
--- a/apps/svelte.dev/src/routes/search/+page.svelte
+++ b/apps/svelte.dev/src/routes/search/+page.svelte
@@ -29,7 +29,6 @@
 		max-width: 64rem;
 		margin: 0 auto;
 		padding: 8rem 1rem;
-		font-family: var(--sk-font-family-ui);
 	}
 
 	form {
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
index f453f2b41e..19ce85223a 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
@@ -71,8 +71,7 @@
 		border: none;
 		background-color: var(--sk-back-3);
 		color: var(--sk-text-1);
-		font-family: inherit;
-		font-size: 1.6rem;
+		font: var(--sk-font-ui-medium);
 	}
 
 	a:focus-visible,
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
index 8d4d168454..b403b66693 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte
@@ -249,12 +249,11 @@
 		grid-template-columns: 4rem 1fr;
 		grid-gap: 1rem;
 		padding: 1rem 0;
-		font-size: 1.3rem;
-		line-height: 2rem;
+		font: var(--sk-font-mono);
 	}
 
 	.fake * {
-		font-family: var(--font-mono) !important;
+		/* font-family: var(--font-mono) !important; */
 		color: #ccc;
 	}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
index 6dbe2f98dc..3aef2bc36a 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte
@@ -172,8 +172,6 @@
 
 	header {
 		position: relative;
-		/* z-index: 2; */
-		font-family: var(--sk-font-family-ui);
 
 		display: grid;
 		grid-template-columns: 4rem minmax(0, 1fr) 4rem;
@@ -270,9 +268,8 @@
 
 	.separator {
 		position: relative;
-		font-size: 0.8em;
+		font: var(--sk-font-ui-small);
 		opacity: 0.3;
-		top: -0.1rem;
 		display: inline-block;
 	}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
index 89b57998f1..889310dd27 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -73,8 +73,7 @@
 		bottom: 0;
 		width: 100%;
 		height: 80%;
-		font-family: var(--font-mono);
-		font-size: var(--sk-text-xs);
+		font: var(--sk-font-mono);
 		padding: 1rem;
 		background: var(--sk-back-1);
 		border-top: 1px solid var(--sk-text-4);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
index 3e4a2a98bb..5cd2c1f4b5 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte
@@ -203,12 +203,17 @@
 
 	.modal-contents {
 		h2 {
-			font-size: 2.4rem;
+			font: var(--sk-font-ui-large);
 			margin: 0 0 0.5em 0;
 		}
 
+		p {
+			font: var(--sk-font-ui-medium);
+		}
+
 		label {
 			user-select: none;
+			font: var(--sk-font-ui-medium);
 		}
 
 		button {
@@ -220,6 +225,7 @@
 			margin: 1em 0 0 0;
 			border-radius: var(--sk-border-radius);
 			line-height: 1;
+			font: var(--sk-font-ui-small);
 		}
 	}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css b/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css
index a0d2bc954e..03b5728eae 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/codemirror.css
@@ -7,9 +7,7 @@
 }
 
 .cm-editor .cm-scroller {
-	font-family: var(--sk-font-family-mono);
-	font-size: 1.3rem;
-	line-height: 2rem;
+	font: var(--sk-font-mono);
 }
 
 .cm-editor .cm-gutters {
@@ -91,8 +89,7 @@
 }
 
 .cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul {
-	font-family: var(--font-mono);
-	font-size: 1.3rem;
+	font: var(--sk-font-mono);
 }
 
 .cm-editor .cm-panels {
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 561a5dd1bb..4d99ec4d54 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
@@ -42,7 +42,7 @@
 		display: inline-flex;
 		border: 1px solid rgba(0, 0, 0, 0.1);
 		background-color: var(--back);
-		border-radius: var(--border-r);
+		border-radius: var(--sk-border-radius);
 		overflow: hidden;
 		flex-direction: column;
 		filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.1));
@@ -70,7 +70,7 @@
 		text-align: left;
 		border: 0px;
 		padding: 0.4rem 1rem 0.2rem 1rem;
-		font-size: 1.4rem;
+		font: var(--sk-font-ui-small);
 	}
 
 	li:first-child button {
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 89cbde6470..de9a7cd717 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -120,7 +120,6 @@
 		background-size: 1.2rem 1.2rem;
 		background-position: 0 45%;
 		background-repeat: no-repeat;
-		font-family: var(--sk-font-family-ui);
 	}
 
 	:focus-visible {