diff --git a/apps/svelte.dev/src/routes/_home/Video.svelte b/apps/svelte.dev/src/routes/_home/Video.svelte
index 4fd6afc9c3..af8255676f 100644
--- a/apps/svelte.dev/src/routes/_home/Video.svelte
+++ b/apps/svelte.dev/src/routes/_home/Video.svelte
@@ -246,6 +246,5 @@
 	.video-player input:focus-visible ~ img {
 		outline: 2px solid var(--sk-theme-1);
 		outline-offset: 2px;
-		border-radius: var(--sk-border-radius);
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
index 85bd52b284..6574d62e2d 100644
--- a/apps/svelte.dev/src/routes/blog/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -21,7 +21,7 @@
 	{#each data.posts as post}
 		{#if !post.metadata.draft}
 			<article class="post" data-pubdate={post.date}>
-				<a class="no-underline" href="/{post.slug}" title="Read the article »">
+				<a href="/{post.slug}" title="Read the article »">
 					<h2>{post.metadata.title}</h2>
 					<p>{post.metadata.description}</p>
 				</a>
@@ -42,51 +42,53 @@
 
 	h2 {
 		display: inline-block;
-		margin: 3.2rem 0 0.4rem 0;
+		/* margin: 3.2rem 0 0.4rem 0; */
 		color: var(--sk-text-2);
 		max-width: 18em;
 		font-size: var(--sk-text-m);
 		font-weight: 400;
 	}
 
-	.post:first-child {
-		margin: 0 0 2rem 0;
-		padding: 0 0 4rem 0;
-		border-bottom: var(--sk-thick-border-width) solid #6767785b; /* based on --second */
-	}
+	.post {
+		margin: 2em 0;
 
-	.post:first-child h2 {
-		font-size: 4rem;
-		font-weight: 400;
-		color: var(--sk-text-2);
-	}
+		&:where(:first-child, :nth-child(2))::before {
+			content: 'Latest post • ' attr(data-pubdate);
+			color: var(--sk-text-4);
+			font-family: var(--sk-font-ui);
+			font-size: var(--sk-text-xs);
+			font-weight: 400;
+			text-transform: uppercase;
+		}
 
-	.post:where(:first-child, :nth-child(2))::before {
-		content: 'Latest post • ' attr(data-pubdate);
-		color: var(--sk-theme-3);
-		font-family: var(--sk-font-heading);
-		font-size: var(--sk-text-xs);
-		font-weight: 400;
-		letter-spacing: 0.05em;
-		text-transform: uppercase;
-	}
+		&:nth-child(2)::before {
+			content: 'Older posts';
+		}
 
-	.post:nth-child(2)::before {
-		content: 'Older posts';
-	}
+		&:first-child {
+			margin: 0 0 2rem 0;
+			padding: 0 0 4rem 0;
 
-	.post p {
-		font-size: var(--sk-text-s);
-		max-width: 30em;
-		color: var(--sk-text-3);
-	}
+			h2 {
+				font-size: 4rem;
+				font-weight: 400;
+				color: var(--sk-text-2);
+			}
+		}
 
-	.post > a {
-		display: block;
-	}
+		a {
+			display: block;
+			text-decoration: none;
+
+			&:hover h2 {
+				text-decoration: underline;
+			}
+		}
 
-	.posts a:hover,
-	.posts a:hover > h2 {
-		color: var(--sk-theme-3);
+		p {
+			font-size: var(--sk-text-s);
+			color: var(--sk-text-3);
+			margin: 0;
+		}
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
index 10245af3ca..49aba60407 100644
--- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
+++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -62,9 +62,9 @@
 	}
 
 	.byline {
-		margin: 0 0 1rem 0;
-		padding: 1.6rem 0 0 0;
-		border-top: var(--sk-thick-border-width) solid #6767785b;
+		margin: 0 0 4rem 0;
+		padding: 1rem 0 0 0;
+		font-family: var(--sk-font-ui);
 		font-size: var(--sk-text-xs);
 		text-transform: uppercase;
 	}
@@ -78,7 +78,7 @@
 	}
 
 	.post :global(figcaption) {
-		color: var(--sk-theme-2);
+		color: var(--sk-text-4);
 		text-align: left;
 	}
 
@@ -90,7 +90,7 @@
 		float: right;
 		margin: 0 0 1em 1em;
 		width: 16rem;
-		color: var(--sk-theme-2);
+		color: var(--sk-text-4);
 		z-index: 2;
 	}
 
@@ -103,7 +103,7 @@
 		height: 420px;
 		margin: 2em 0;
 		border-radius: var(--sk-border-radius);
-		border: 0.8rem solid var(--sk-theme-2);
+		border: 0.8rem solid var(--sk-theme-4);
 	}
 
 	@media (min-width: 910px) {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte
index 29e40cc953..13cbce2211 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Chrome.svelte
@@ -77,8 +77,7 @@
 	a:focus-visible,
 	button:focus-visible,
 	input:focus-visible {
-		outline: none;
-		border: 2px solid var(--sk-theme-3);
+		outline-offset: -2px;
 	}
 
 	.icon,
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
index a32c91aa46..400a96e50f 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte
@@ -378,8 +378,8 @@
 
 	li button {
 		position: relative;
-
 		display: flex;
+		width: 100%;
 		gap: 0.5rem;
 	}
 
@@ -403,8 +403,7 @@
 
 	a:focus-visible,
 	.exercises button:focus-visible {
-		outline: none;
-		border: 2px solid var(--sk-theme-3);
+		outline-offset: -2px;
 	}
 
 	@media screen and (max-width: 800px) {
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/ToggleButton.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/ToggleButton.svelte
index c815444eba..67ace5dc70 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/ToggleButton.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/ToggleButton.svelte
@@ -39,10 +39,6 @@
 		border: transparent;
 	}
 
-	button:focus-visible {
-		outline: 2px solid var(--sk-theme-3);
-	}
-
 	button::before {
 		content: '';
 		position: absolute;
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css b/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css
index 66a1d7d0cb..b16bf39e8e 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/codemirror.css
@@ -57,13 +57,6 @@
 	color: var(--sk-text-2);
 }
 
-.cm-editor.cm-focused .cm-selectionBackground,
-.cm-editor .cm-selectionBackground,
-.cm-editor .cm-content ::selection {
-	background: var(--sk-theme-3);
-	opacity: 0.3;
-}
-
 .cm-editor .cm-tooltip {
 	background: var(--sk-back-2);
 	color: var(--sk-text-1);
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 0384884dcd..b843e48b42 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/filetree/Item.svelte
@@ -124,9 +124,7 @@
 	}
 
 	:focus-visible {
-		outline: none;
-		border: 2px solid var(--sk-theme-3) !important;
-		border-radius: 2px;
+		outline-offset: -2px;
 	}
 
 	input {
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index 5f074a0025..1b001dd3b4 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -25,7 +25,6 @@
 		"@fontsource/dm-serif-display": "^5.1.0",
 		"@fontsource/eb-garamond": "^5.1.0",
 		"@fontsource/fira-mono": "^5.1.0",
-		"@fontsource/playfair-display": "^5.1.0",
 		"@fontsource/yantramanav": "^5.1.0",
 		"esm-env": "^1.0.0",
 		"json5": "^2.2.3",
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index fab5159887..05a343f407 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -144,7 +144,6 @@
 					align-items: center;
 					height: calc(var(--height) - 0.6rem);
 					outline-offset: 0;
-					border-radius: var(--sk-border-radius);
 					padding: 0 0.4rem;
 
 					&::before,
@@ -343,12 +342,12 @@
 			li::before {
 				content: '';
 				position: absolute;
-				margin-top: 0.8rem;
-				margin-left: -1.8rem;
+				top: 1.4rem;
+				left: -1.8rem;
 				background-color: var(--sk-back-5);
 				width: 0.6rem;
 				height: 0.6rem;
-				border-radius: 2px;
+				border-radius: 50%;
 				opacity: 0.7;
 			}
 
@@ -364,7 +363,6 @@
 		li {
 			position: relative;
 			max-width: calc(var(--sk-line-max-width) - var(--list-padding));
-			line-height: 1.5;
 			margin: 0 0 0.5em 0;
 		}
 
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
index 3df01c3b73..10a75e2331 100644
--- a/packages/site-kit/src/lib/docs/DocsContents.svelte
+++ b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -68,13 +68,11 @@
 		height: 100%;
 		bottom: auto;
 		width: 100%;
-		/* columns: 2; */
 		margin: 0;
 	}
 
 	li {
 		display: block;
-		/* line-height: 1.2; */
 		margin: 0;
 		margin-bottom: 4rem;
 	}
@@ -108,7 +106,6 @@
 	}
 
 	[aria-current='page'] {
-		/* font-weight: 700; */
 		color: var(--sk-theme-1);
 		text-decoration: underline;
 	}
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index e5b1fdebcc..16bbf48e65 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -269,7 +269,7 @@ async function parse({
 				return this.parser!.parseInline(token.tokens);
 			}
 
-			return smart_quotes(token.text);
+			return smart_quotes(token.text, true);
 		},
 		heading({ tokens, depth, raw }) {
 			const text = this.parser!.parseInline(tokens);
diff --git a/packages/site-kit/src/lib/markdown/utils.ts b/packages/site-kit/src/lib/markdown/utils.ts
index 3899be0524..9091b8c737 100644
--- a/packages/site-kit/src/lib/markdown/utils.ts
+++ b/packages/site-kit/src/lib/markdown/utils.ts
@@ -77,18 +77,28 @@ export const normalizeSlugify = (str: string) => {
 	return slugify(removeHTMLEntities(removeMarkdown(str))).replace(/(<([^>]+)>)/gi, '');
 };
 
-export function smart_quotes(str: string) {
+export function smart_quotes(str: string, html: boolean = false) {
 	// replace dumb quotes with smart quotes. This isn't a perfect algorithm — it
 	// wouldn't correctly handle `That '70s show` or `My country 'tis of thee`
 	// but a) it's very unlikely they'll occur in our docs, and
 	// b) they can be dealt with manually
-	return str.replace(/(.|^)(&#39;|&quot;)(.|$)/g, (m, before, quote, after) => {
-		const left = !before.trim();
-		const double = quote === '&quot;';
-		const entity = `&${left ? 'l' : 'r'}${double ? 'd' : 's'}quo;`;
-
-		return (before ?? '') + entity + (after ?? '');
-	});
+	return str.replace(
+		html ? /(.|^)(&#39;|&quot;)(.|$)/g : /(.|^)('|")(.|$)/g,
+		(m, before, quote, after) => {
+			const left = !before.trim();
+			let replacement = '';
+
+			if (html) {
+				const double = quote === '&quot;';
+				replacement = `&${left ? 'l' : 'r'}${double ? 'd' : 's'}quo;`;
+			} else {
+				const double = quote === '"';
+				replacement = double ? (left ? '“' : '”') : left ? '‘' : '’';
+			}
+
+			return (before ?? '') + replacement + (after ?? '');
+		}
+	);
 }
 
 const tokenizer: TokenizerObject = {
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 035c4e0d37..0c57109d6c 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -189,6 +189,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		display: flex;
 		align-items: center;
 		text-decoration: none;
+		outline-offset: -2px;
 
 		&:hover {
 			box-shadow: inset 0 -1px 0 0 var(--sk-back-5);
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 6bef7032b7..7fa74ef705 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -322,7 +322,6 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		}
 
 		&:focus-visible {
-			border-radius: var(--sk-border-radius);
 			outline-offset: -3px;
 		}
 	}
@@ -335,7 +334,6 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		width: 5rem;
 		height: 6rem;
 		background: none;
-		border-radius: var(--sk-border-radius);
 		color: var(--sk-text-2);
 		opacity: 0.3;
 
@@ -388,7 +386,6 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		}
 
 		&:focus {
-			border-radius: var(--sk-border-radius);
 			outline-offset: -3px;
 		}
 	}
@@ -413,7 +410,6 @@ It appears when the user clicks on the `Search` component or presses the corresp
 
 		&:focus-visible {
 			opacity: 1;
-			border-radius: var(--sk-border-radius);
 			outline-offset: -3px;
 		}
 	}
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 3f1bf6086b..728f35e258 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -48,7 +48,9 @@
 							href={block.href}
 							onclick={() => onselect?.(block.href)}
 						>
-							<strong>{block.breadcrumbs.slice(2).join(' • ')}</strong>
+							<strong>
+								{#each block.breadcrumbs.slice(2) as t}<span>{t}</span>{/each}
+							</strong>
 
 							{#if block?.content}
 								<div class="excerpt">
@@ -75,6 +77,7 @@
 
 		summary {
 			position: sticky;
+			background: var(--background);
 			top: 0;
 			display: block;
 			color: var(--sk-text-4);
@@ -85,7 +88,6 @@
 			user-select: none;
 
 			&:focus-visible {
-				border-radius: var(--sk-border-radius);
 				outline-offset: -3px;
 			}
 
@@ -151,7 +153,6 @@
 		}
 
 		&:focus {
-			border-radius: var(--sk-border-radius);
 			outline-offset: -3px;
 		}
 
@@ -160,19 +161,27 @@
 			display: block;
 			white-space: nowrap;
 			line-height: 1;
-			/* overflow: hidden; */
-			/* overflow-x: hidden; */
 			text-overflow: ellipsis;
 			font-weight: 400;
 		}
 
 		strong {
-			/* font-family: var(--sk-font-heading); */
-			/* font-weight: 500; */
 			width: 100%;
 			overflow: hidden;
 			font-size: var(--sk-text-s);
 			color: var(--sk-text-2);
+
+			span {
+				display: inline;
+
+				&:not(:last-child)::after {
+					content: ' • ';
+					position: relative;
+					color: var(--sk-text-4);
+					font-size: var(--sk-text-xs);
+					top: -0.1rem;
+				}
+			}
 		}
 
 		.excerpt {
@@ -204,6 +213,9 @@
 
 			span {
 				color: var(--sk-text-3);
+				font-size: var(--sk-text-xs);
+				color: #170a0a;
+				margin: 0.4rem 0 0 0;
 			}
 
 			:global(.spacer) {
@@ -213,12 +225,6 @@
 			}
 		}
 
-		span {
-			font-size: var(--sk-text-xs);
-			color: #737373;
-			margin: 0.4rem 0 0 0;
-		}
-
 		:global(mark) {
 			--highlight-color: rgba(255, 255, 0, 0.4);
 			background: none;
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 96607d4497..9800e8674f 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -42,8 +42,7 @@ body {
 
 *:focus-visible {
 	outline: 2px solid hsla(var(--sk-theme-1-hsl), 0.6);
-	/* box-shadow: var(--sk-focus-outline); */
-	transition: 0.1s ease;
+	border-radius: var(--sk-border-radius);
 }
 
 p,
@@ -174,8 +173,6 @@ button > svg {
 
 /*  links ------------------------------------- */
 a {
-	position: relative;
-	padding: 0 0 1px 0;
 	color: var(--sk-theme-1);
 }
 
diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css
index 7a0ebb64b7..29a3f2ead8 100644
--- a/packages/site-kit/src/lib/styles/index.css
+++ b/packages/site-kit/src/lib/styles/index.css
@@ -1,17 +1,9 @@
 @import '@fontsource/eb-garamond';
 @import '@fontsource/eb-garamond/500.css';
 @import '@fontsource/eb-garamond/400-italic.css';
-@import '@fontsource/playfair-display/600.css';
 @import '@fontsource/dm-serif-display';
-@import '@fontsource/fira-mono';
-
-/* TODO figure out which weights we actually need */
-@import '@fontsource/yantramanav/100.css';
-@import '@fontsource/yantramanav/300.css';
 @import '@fontsource/yantramanav/400.css';
-@import '@fontsource/yantramanav/500.css';
-@import '@fontsource/yantramanav/700.css';
-@import '@fontsource/yantramanav/900.css';
+@import '@fontsource/fira-mono';
 
 @import './tokens.css';
 @import './base.css';
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 366041f8dc..f119e14e88 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -40,11 +40,9 @@
 	/* Base colors */
 	--sk-theme-1-hsl: 12, 93%, 43%;
 	--sk-theme-2-hsl: 240, 8%, 44%;
-	--sk-theme-3-hsl: 204, 100%, 63%;
 
 	--sk-theme-1: hsl(var(--sk-theme-1-hsl));
 	--sk-theme-2: hsl(var(--sk-theme-2-hsl));
-	--sk-theme-3: hsl(var(--sk-theme-3-hsl));
 
 	--sk-back-1: hsl(0, 0%, 100%);
 	--sk-back-2: hsla(0, 0%, 100%, 1);
@@ -98,7 +96,6 @@
 		--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
 		--sk-theme-1-hsl: 12, 94%, 62%;
 		--sk-theme-2-hsl: 240, 8%, 44%;
-		--sk-theme-3-hsl: 204, 100%, 63%;
 		--sk-text-1: hsl(0, 0%, 90%);
 		--sk-text-2: hsl(0, 0%, 80%);
 		--sk-text-3: hsl(0, 0%, 65%);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 76e1d25113..b1508ee351 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -355,9 +355,6 @@ importers:
       '@fontsource/fira-mono':
         specifier: ^5.1.0
         version: 5.1.0
-      '@fontsource/playfair-display':
-        specifier: ^5.1.0
-        version: 5.1.0
       '@fontsource/yantramanav':
         specifier: ^5.1.0
         version: 5.1.0
@@ -811,9 +808,6 @@ packages:
   '@fontsource/fira-mono@5.1.0':
     resolution: {integrity: sha512-6+nftSKApXyN0I9FC5GJuG5TUCh+in5OehtrXRIsHJvq38Pm//oA1kZZYNdXv99JYzLzJ3lzsTAavmS+xGLGDw==}
 
-  '@fontsource/playfair-display@5.1.0':
-    resolution: {integrity: sha512-O4Ph7IwM2sH4IpSgYKP1ZdOuaYd22+eXdT1jU8/kDM6gIABV2RoqJM34Z+WD364+mO1noXPcF1ZtA4aRfcFZLA==}
-
   '@fontsource/yantramanav@5.1.0':
     resolution: {integrity: sha512-wSmYmoGhFbYF4XUXouudROqTn6GREe0HTV/HqcnRLYbQJNa3kmqbcebIm9PxPDQ0l3y2speJAlbOoDGM2DN9dg==}
 
@@ -3318,8 +3312,6 @@ snapshots:
 
   '@fontsource/fira-mono@5.1.0': {}
 
-  '@fontsource/playfair-display@5.1.0': {}
-
   '@fontsource/yantramanav@5.1.0': {}
 
   '@img/sharp-darwin-arm64@0.33.4':