diff --git a/web/src/lib/components/repo/CommitRow.svelte b/web/src/lib/components/repo/CommitRow.svelte
index a3fb59698..68a145fde 100644
--- a/web/src/lib/components/repo/CommitRow.svelte
+++ b/web/src/lib/components/repo/CommitRow.svelte
@@ -105,7 +105,7 @@
 		{#if tagsByCommit}
 			<Pending>
 				{#each (await tagsByCommit)[commit.hash] ?? [] as name (name)}
-					<Tag color="gray" class="shrink-0 font-mono">{name}</Tag>
+					<Tag color="gray" class="shrink-0 typography-monospace-regular">{name}</Tag>
 				{/each}
 			</Pending>
 		{/if}
diff --git a/web/src/lib/components/repo/EmptyRepo.svelte b/web/src/lib/components/repo/EmptyRepo.svelte
index 6a9024d06..7469e7510 100644
--- a/web/src/lib/components/repo/EmptyRepo.svelte
+++ b/web/src/lib/components/repo/EmptyRepo.svelte
@@ -50,7 +50,7 @@
 
 {#snippet bullet(n: number)}
 	<span
-		class="mr-2 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-background-inset align-middle typography-monospace-small font-mono"
+		class="mr-2 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-background-inset align-middle typography-monospace-small"
 	>
 		{n}
 	</span>
@@ -114,7 +114,9 @@
 				</p>
 				<p>
 					{@render bullet(3)}Configure your remote to
-					<code class="rounded-sm bg-background-inset px-1 font-mono">{remote}</code>
+					<code class="rounded-sm bg-background-inset px-1 typography-monospace-regular"
+						>{remote}</code
+					>
 				</p>
 				<p>{@render bullet(4)}Push!</p>
 			</div>
diff --git a/web/src/lib/components/repo/TagCard.svelte b/web/src/lib/components/repo/TagCard.svelte
index c5c27f488..85966f721 100644
--- a/web/src/lib/components/repo/TagCard.svelte
+++ b/web/src/lib/components/repo/TagCard.svelte
@@ -56,7 +56,7 @@
 			<div class="flex flex-col typography-paragraph-regular text-foreground-muted">
 				<a
 					href={commitHref}
-					class="flex items-center gap-2 font-mono no-underline hover:underline"
+					class="flex items-center gap-2 typography-monospace-regular no-underline hover:underline"
 				>
 					<GitCommitHorizontal class="size-4" aria-hidden="true" />
 					{shortHash}
diff --git a/web/src/lib/components/repo/pipelines/WorkflowSteps.svelte b/web/src/lib/components/repo/pipelines/WorkflowSteps.svelte
index f6e8fe2bd..b2a67a116 100644
--- a/web/src/lib/components/repo/pipelines/WorkflowSteps.svelte
+++ b/web/src/lib/components/repo/pipelines/WorkflowSteps.svelte
@@ -7,7 +7,7 @@
 			row: "flex h-9 items-center gap-2.5 rounded-sm px-2 text-left",
 			name: "min-w-0 flex-1 truncate",
 			duration:
-				"shrink-0 font-mono text-foreground-muted tabular-nums transition-opacity duration-150 motion-reduce:transition-none"
+				"shrink-0 typography-monospace-regular text-foreground-muted tabular-nums transition-opacity duration-150 motion-reduce:transition-none"
 		},
 		variants: {
 			interactive: {
diff --git a/web/src/lib/components/repo/pulls/PullCompose.svelte b/web/src/lib/components/repo/pulls/PullCompose.svelte
index fb4ddba10..424c3eeb8 100644
--- a/web/src/lib/components/repo/pulls/PullCompose.svelte
+++ b/web/src/lib/components/repo/pulls/PullCompose.svelte
@@ -363,7 +363,7 @@
 						<Textarea
 							rows={12}
 							bind:value={patch}
-							class="resize-y font-mono"
+							class="resize-y typography-monospace-regular"
 							placeholder={PATCH_PLACEHOLDER}
 						/>
 					</div>
diff --git a/web/src/lib/components/search/FileMatch.svelte b/web/src/lib/components/search/FileMatch.svelte
index 3bc51d836..b627c1120 100644
--- a/web/src/lib/components/search/FileMatch.svelte
+++ b/web/src/lib/components/search/FileMatch.svelte
@@ -44,7 +44,7 @@
 {#snippet spans(list: Span[])}{#each list as span, i (i)}{#if span.match}<span class="rounded-sm bg-background-highlight/70">{span.text}</span>{:else}{span.text}{/if}{:else}&ZeroWidthSpace;{/each}{/snippet}
 
 {#snippet body(chunk: Chunk)}
-	<div class="overflow-x-auto font-mono text-sm">
+	<div class="overflow-x-auto typography-monospace-small">
 		{#each chunkLines(chunk) as line (line.num)}
 			<div
 				class="flex w-max min-w-full gap-3 px-3 {line.highlight
diff --git a/web/src/lib/components/search/RepoCodeSearch.svelte b/web/src/lib/components/search/RepoCodeSearch.svelte
index 361f92dd7..1f2318e25 100644
--- a/web/src/lib/components/search/RepoCodeSearch.svelte
+++ b/web/src/lib/components/search/RepoCodeSearch.svelte
@@ -17,7 +17,7 @@
 
 	// NOTE: we do full service-auth round trip for every search. Thus we have super long debounce
 	const DEBOUNCE_MS = 800;
-	const HINT = "rounded-sm bg-background-subtle px-1 py-0.5 font-mono text-xs";
+	const HINT = "rounded-sm bg-background-subtle px-1 py-0.5 typography-monospace-small";
 
 	interface Props {
 		ownerHandle: string;
diff --git a/web/src/lib/components/search/SearchBar.svelte b/web/src/lib/components/search/SearchBar.svelte
index d35a0c434..92ec3b9bf 100644
--- a/web/src/lib/components/search/SearchBar.svelte
+++ b/web/src/lib/components/search/SearchBar.svelte
@@ -24,7 +24,7 @@
 			bind:value={query}
 			{placeholder}
 			iconLeft={Search}
-			class={mono ? "flex-1 font-mono" : "flex-1"}
+			class={mono ? "flex-1 typography-monospace-regular" : "flex-1"}
 		/>
 		<Button type="submit" icon={Search} aria-label="Search" />
 	</ButtonGroup>
diff --git a/web/src/lib/components/settings/CodeChip.svelte b/web/src/lib/components/settings/CodeChip.svelte
index c96b6b424..c0d0535a6 100644
--- a/web/src/lib/components/settings/CodeChip.svelte
+++ b/web/src/lib/components/settings/CodeChip.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <span
-	class="inline-flex items-center rounded-sm bg-background-subtle px-2 py-0.5 typography-monospace-regular font-mono text-foreground-default {className ??
+	class="inline-flex items-center rounded-sm bg-background-subtle px-2 py-0.5 typography-monospace-regular text-foreground-default {className ??
 		''}"
 >
 	{@render children()}
diff --git a/web/src/lib/components/ui/Error.svelte b/web/src/lib/components/ui/Error.svelte
index 721988aa9..dfe7aa067 100644
--- a/web/src/lib/components/ui/Error.svelte
+++ b/web/src/lib/components/ui/Error.svelte
@@ -9,7 +9,7 @@
 			label: "min-w-0",
 			toggle: "flex w-full items-center gap-2 border-t border-border-danger text-foreground-danger transition-colors hover:text-foreground-danger-strong dark:border-border-danger/60",
 			chevron: "shrink-0 transition-transform",
-			body: "border-t border-border-danger font-mono text-foreground-danger-strong dark:border-border-danger/60"
+			body: "border-t border-border-danger typography-monospace-regular text-foreground-danger-strong dark:border-border-danger/60"
 		},
 		variants: {
 			size: {
diff --git a/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
index c73c4f370..06c4df22c 100644
--- a/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
@@ -49,9 +49,7 @@
 		<div class="flex w-full flex-col gap-1">
 			{#each stableUrls as url (url)}
 				<div class="flex items-center gap-2">
-					<code
-						class="typography-monospace-regular font-mono break-all text-foreground-default"
-					>
+					<code class="typography-monospace-regular break-all text-foreground-default">
 						{url}
 					</code>
 					<CopyButton
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 986d4d2fc..d4326bc67 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -76,12 +76,12 @@
 				Use your <span class="text-foreground-default">AT Protocol</span> handle to log in.
 				If you're unsure, this is likely your Tangled
 				<code
-					class="rounded-sm bg-background-inset px-1 typography-monospace-small font-mono text-foreground-default"
+					class="rounded-sm bg-background-inset px-1 typography-monospace-small text-foreground-default"
 					>(.tngl.sh)</code
 				>
 				or Bluesky
 				<code
-					class="rounded-sm bg-background-inset px-1 typography-monospace-small font-mono text-foreground-default"
+					class="rounded-sm bg-background-inset px-1 typography-monospace-small text-foreground-default"
 					>(.bsky.social)</code
 				>
 				account.
diff --git a/web/src/routes/signup/verify/+page.svelte b/web/src/routes/signup/verify/+page.svelte
index 7a27e8d32..d2ed3faa8 100644
--- a/web/src/routes/signup/verify/+page.svelte
+++ b/web/src/routes/signup/verify/+page.svelte
@@ -114,7 +114,7 @@
 					error={!!submit.error}
 					class="w-full"
 					suffix=".tngl.sh"
-					suffixClass="flex items-center self-stretch -my-1 -mr-3 -ml-2.5 rounded-r-sm bg-background-inset px-2 font-mono typography-paragraph-small text-foreground-subtle"
+					suffixClass="flex items-center self-stretch -my-1 -mr-3 -ml-2.5 rounded-r-sm bg-background-inset px-2 typography-monospace-small text-foreground-subtle"
 				/>
 				<p class="mt-1 typography-paragraph-small text-foreground-subtle">
 					Lowercase letters, digits, and hyphens; 4-63 characters.