diff --git a/web/src/lib/components/home/MarketingHome.svelte b/web/src/lib/components/home/MarketingHome.svelte
index 3e4fb15b..baadeb11 100644
--- a/web/src/lib/components/home/MarketingHome.svelte
+++ b/web/src/lib/components/home/MarketingHome.svelte
@@ -14,7 +14,7 @@
 
 {#snippet marketingButton(label: string, showArrow: boolean, className: string)}
 	<button
-		class="inline-flex cursor-pointer items-center justify-center gap-2 rounded border border-border-success bg-background-success-emphasis px-4 py-2 text-base font-medium text-foreground-on-emphasis hover:bg-background-success-emphasis-hover {className}"
+		class="inline-flex cursor-pointer items-center justify-center gap-2 rounded border border-border-success bg-background-success-emphasis px-4 py-2 text-paragraph-large font-medium text-foreground-on-emphasis hover:bg-background-success-emphasis-hover {className}"
 		type="submit"
 	>
 		{label}
@@ -39,7 +39,7 @@
 			name="id"
 			required
 			placeholder="Enter your email"
-			class="min-w-0 flex-1 rounded border border-border-strong bg-background-default px-3 py-2 text-base text-foreground-default placeholder:text-foreground-placeholder focus:border-foreground-subtle focus:outline-none"
+			class="min-w-0 flex-1 rounded border border-border-strong bg-background-default px-3 py-2 text-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:border-foreground-subtle focus:outline-none"
 		/>
 		{@render marketingButton(label, showArrow, buttonClass)}
 	</form>
@@ -53,7 +53,7 @@
 			tightly-knit<br />social coding.
 		</h1>
 
-		<div class="max-w-2xl space-y-6 text-xl leading-8 text-foreground-default">
+		<div class="max-w-2xl space-y-6 text-heading-4 leading-8 font-normal text-foreground-default">
 			<p>The next-generation social coding platform.</p>
 			<p>
 				We envision a place where developers have ownership of their code, communities can freely
@@ -90,7 +90,7 @@
 		<h2 class="text-5xl font-bold tracking-[-0.04em] text-foreground-default md:text-6xl">
 			Stay in the loop
 		</h2>
-		<p class="mt-6 max-w-2xl text-xl leading-8 text-foreground-muted">
+		<p class="mt-6 max-w-2xl text-heading-4 leading-8 font-normal text-foreground-muted">
 			We've got a newsletter. Punch in your email to stay updated on what we're shipping at Tangled.
 		</p>
 		{@render signupForm(
diff --git a/web/src/lib/components/profile/ActivityStub.svelte b/web/src/lib/components/profile/ActivityStub.svelte
index 994e1d9e..d5439530 100644
--- a/web/src/lib/components/profile/ActivityStub.svelte
+++ b/web/src/lib/components/profile/ActivityStub.svelte
@@ -1,3 +1,5 @@
-<div class="flex min-h-32 items-center justify-center text-base text-foreground-subtle italic">
+<div
+	class="flex min-h-32 items-center justify-center text-paragraph-large text-foreground-subtle italic"
+>
 	Activity is not available yet.
 </div>
diff --git a/web/src/lib/components/profile/FollowButton.svelte b/web/src/lib/components/profile/FollowButton.svelte
index c9e44f39..7c511b10 100644
--- a/web/src/lib/components/profile/FollowButton.svelte
+++ b/web/src/lib/components/profile/FollowButton.svelte
@@ -93,7 +93,9 @@
 				<span>{following ? "Unfollow" : "Follow"}</span>
 			</Button>
 			{#if relation.failed}
-				<p class="mt-1 text-xs text-foreground-danger">Something went wrong. Try again.</p>
+				<p class="mt-1 text-paragraph-small text-foreground-danger">
+					Something went wrong. Try again.
+				</p>
 			{/if}
 		</div>
 	{/if}
diff --git a/web/src/lib/components/profile/ProfileCard.svelte b/web/src/lib/components/profile/ProfileCard.svelte
index a3e92d00..326af57c 100644
--- a/web/src/lib/components/profile/ProfileCard.svelte
+++ b/web/src/lib/components/profile/ProfileCard.svelte
@@ -53,7 +53,7 @@
 		<div class="flex flex-row flex-nowrap items-center gap-2">
 			<h1
 				title={identity.handle}
-				class="overflow-hidden text-lg font-bold text-ellipsis whitespace-nowrap"
+				class="overflow-hidden text-heading-4 font-bold text-ellipsis whitespace-nowrap"
 			>
 				{identity.handle}
 			</h1>
@@ -79,7 +79,7 @@
 		{:else}
 			<div class="space-y-2 text-sm">
 				{#if shown?.description}
-					<p class="pb-4 text-base md:pb-2">{shown.description}</p>
+					<p class="pb-4 text-paragraph-large md:pb-2">{shown.description}</p>
 				{/if}
 
 				<div class="hidden md:block">
diff --git a/web/src/lib/components/profile/ProfileEditForm.svelte b/web/src/lib/components/profile/ProfileEditForm.svelte
index 86c9d211..ac30f7ae 100644
--- a/web/src/lib/components/profile/ProfileEditForm.svelte
+++ b/web/src/lib/components/profile/ProfileEditForm.svelte
@@ -114,7 +114,7 @@
 	</div>
 
 	{#if error}
-		<p class="text-xs text-foreground-danger">{error}</p>
+		<p class="text-paragraph-small text-foreground-danger">{error}</p>
 	{/if}
 
 	<div class="flex items-center justify-between gap-2">
diff --git a/web/src/lib/components/profile/StringCardContent.svelte b/web/src/lib/components/profile/StringCardContent.svelte
index 83ab1245..30a50214 100644
--- a/web/src/lib/components/profile/StringCardContent.svelte
+++ b/web/src/lib/components/profile/StringCardContent.svelte
@@ -23,7 +23,7 @@
 	{/if}
 
 	<div
-		class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-xs text-foreground-subtle"
+		class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-monospace-small text-foreground-subtle"
 	>
 		<span class="shrink-0"
 			>{entry.lines} line{entry.lines === 1 ? "" : "s"} &middot; {compactRelativeTime(
diff --git a/web/src/lib/components/profile/tabs/OverviewTab.svelte b/web/src/lib/components/profile/tabs/OverviewTab.svelte
index 690797dc..7198b39c 100644
--- a/web/src/lib/components/profile/tabs/OverviewTab.svelte
+++ b/web/src/lib/components/profile/tabs/OverviewTab.svelte
@@ -25,7 +25,7 @@
 	</div>
 
 	<section class="order-2 md:col-span-4">
-		<h2 class="px-2 pb-4 text-base font-medium">Activity</h2>
+		<h2 class="px-2 pb-4 text-paragraph-large font-medium">Activity</h2>
 		<ActivityStub />
 	</section>
 </div>
diff --git a/web/src/lib/components/repo/BranchList.svelte b/web/src/lib/components/repo/BranchList.svelte
index 67997673..cf7378c7 100644
--- a/web/src/lib/components/repo/BranchList.svelte
+++ b/web/src/lib/components/repo/BranchList.svelte
@@ -20,7 +20,7 @@
 
 <div class="flex flex-col gap-1">
 	{#each branches as branch (branch.name)}
-		<div class="flex items-center justify-between overflow-hidden text-base">
+		<div class="flex items-center justify-between overflow-hidden text-paragraph-large">
 			<div class="flex min-w-0 flex-1 items-center gap-2">
 				<a
 					href={resolve(`${base}/tree/${encodeURIComponent(branch.name)}` as "/")}
diff --git a/web/src/lib/components/repo/CloneDropdown.svelte b/web/src/lib/components/repo/CloneDropdown.svelte
index a56b0fb4..72a75ff0 100644
--- a/web/src/lib/components/repo/CloneDropdown.svelte
+++ b/web/src/lib/components/repo/CloneDropdown.svelte
@@ -74,7 +74,7 @@
 	<div class="flex items-center justify-between">
 		<h3 class="text-sm font-medium text-foreground-default">Clone this repository</h3>
 		{#if repo.repoDid}
-			<Checkbox bind:checked={permalink} class="text-xs text-foreground-muted">
+			<Checkbox bind:checked={permalink} class="text-paragraph-small text-foreground-muted">
 				Use permalink
 			</Checkbox>
 		{/if}
@@ -83,7 +83,9 @@
 	{#each urls as entry (entry.label)}
 		{@const value = permalink && entry.perma ? entry.perma : entry.handle}
 		<div class="mt-4">
-			<span class="mb-1 block text-xs font-medium text-foreground-muted">{entry.label}</span>
+			<span class="mb-1 block text-paragraph-small font-medium text-foreground-muted"
+				>{entry.label}</span
+			>
 			<div
 				class="flex items-stretch divide-x divide-border-default rounded border border-border-default"
 			>
@@ -108,7 +110,7 @@
 		</div>
 	{/each}
 
-	<p class="mt-2 text-xs text-foreground-subtle">
+	<p class="mt-2 text-paragraph-small text-foreground-subtle">
 		For self-hosted knots, clone URLs may differ based on your setup.
 	</p>
 
diff --git a/web/src/lib/components/repo/CommitList.svelte b/web/src/lib/components/repo/CommitList.svelte
index 88a9a110..e249809f 100644
--- a/web/src/lib/components/repo/CommitList.svelte
+++ b/web/src/lib/components/repo/CommitList.svelte
@@ -24,7 +24,7 @@
 			<div class="flex items-start gap-1">
 				<a
 					href={resolve(`${base}/commit/${commit.hash}` as "/")}
-					class="text-base text-foreground-default no-underline hover:underline"
+					class="text-paragraph-large text-foreground-default no-underline hover:underline"
 				>
 					{commit.subject}
 				</a>
diff --git a/web/src/lib/components/repo/EmptyRepo.svelte b/web/src/lib/components/repo/EmptyRepo.svelte
index 2a9e309b..f0b7af6e 100644
--- a/web/src/lib/components/repo/EmptyRepo.svelte
+++ b/web/src/lib/components/repo/EmptyRepo.svelte
@@ -62,7 +62,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 font-mono text-xs"
+		class="mr-2 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-background-inset align-middle font-mono text-monospace-small"
 	>
 		{n}
 	</span>
diff --git a/web/src/lib/components/repo/LanguageBar.svelte b/web/src/lib/components/repo/LanguageBar.svelte
index 9d6d508d..1c4e22dc 100644
--- a/web/src/lib/components/repo/LanguageBar.svelte
+++ b/web/src/lib/components/repo/LanguageBar.svelte
@@ -29,7 +29,7 @@
 		class="flex flex-wrap items-center justify-center gap-4 border-b border-border-default px-4 py-2"
 	>
 		{#each languages as language (language.name)}
-			<div class="flex items-center gap-2 text-xs">
+			<div class="flex items-center gap-2 text-paragraph-small">
 				<span
 					class="inline-block size-2.5 shrink-0 rounded-full"
 					style={`background-color: ${colorFor(language.name)}`}
diff --git a/web/src/lib/components/repo/LastCommitPanel.svelte b/web/src/lib/components/repo/LastCommitPanel.svelte
index f6eafc15..c5c95ef6 100644
--- a/web/src/lib/components/repo/LastCommitPanel.svelte
+++ b/web/src/lib/components/repo/LastCommitPanel.svelte
@@ -33,7 +33,7 @@
 	</div>
 	<a
 		{href}
-		class="w-fit rounded bg-background-inset px-2 py-1 font-mono text-xs text-foreground-muted no-underline hover:underline"
+		class="w-fit rounded bg-background-inset px-2 py-1 font-mono text-monospace-small text-foreground-muted no-underline hover:underline"
 	>
 		{commit.shortHash}
 	</a>
diff --git a/web/src/lib/components/repo/RepoCardContent.svelte b/web/src/lib/components/repo/RepoCardContent.svelte
index 743bcb26..f1e07b52 100644
--- a/web/src/lib/components/repo/RepoCardContent.svelte
+++ b/web/src/lib/components/repo/RepoCardContent.svelte
@@ -53,7 +53,7 @@
 
 	{#if repo.language !== undefined || stats.length > 0}
 		<div
-			class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-xs text-foreground-subtle"
+			class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-monospace-small text-foreground-subtle"
 		>
 			{#if repo.language}
 				<span class="flex items-center gap-2">
diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index f5486ff9..2354c520 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -28,7 +28,7 @@
 <section class="mb-2 px-4 py-2">
 	<div class="mb-2 flex flex-col items-start justify-between gap-4 sm:flex-row">
 		<div class="flex min-w-0 flex-col gap-2">
-			<div class="flex flex-wrap items-center gap-2 text-lg">
+			<div class="flex flex-wrap items-center gap-2 text-heading-4 font-normal">
 				<a
 					href={resolve(`/${repo.ownerHandle}` as "/")}
 					class="flex items-center gap-2 text-foreground-default no-underline hover:underline"
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
index 54728a26..6714d1fd 100644
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -87,7 +87,9 @@
 			</Button>
 		</ButtonGroup>
 		{#if failed}
-			<p class="mt-1 text-xs text-foreground-danger">Something went wrong. Try again.</p>
+			<p class="mt-1 text-paragraph-small text-foreground-danger">
+				Something went wrong. Try again.
+			</p>
 		{/if}
 	</div>
 {/if}
diff --git a/web/src/lib/components/repo/TagList.svelte b/web/src/lib/components/repo/TagList.svelte
index fe9fd078..0abc37a3 100644
--- a/web/src/lib/components/repo/TagList.svelte
+++ b/web/src/lib/components/repo/TagList.svelte
@@ -18,7 +18,7 @@
 <div class="flex flex-col gap-1">
 	{#each tags as tag, index (tag.name)}
 		<div>
-			<div class="flex items-center gap-2 text-base">
+			<div class="flex items-center gap-2 text-paragraph-large">
 				<a
 					href={resolve(`${base}/tags/${encodeURIComponent(tag.name)}` as "/")}
 					class="truncate text-foreground-default no-underline hover:underline"
diff --git a/web/src/lib/components/repo/issues/IssueHeader.svelte b/web/src/lib/components/repo/issues/IssueHeader.svelte
index 5a176365..a6484169 100644
--- a/web/src/lib/components/repo/issues/IssueHeader.svelte
+++ b/web/src/lib/components/repo/issues/IssueHeader.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <header class="pb-2">
-	<h1 class="text-2xl">
+	<h1 class="text-heading-3 font-normal">
 		{title}
 		<span class="text-foreground-subtle">#{rkey}</span>
 	</h1>
diff --git a/web/src/lib/components/settings/tabs/EmailsTab.svelte b/web/src/lib/components/settings/tabs/EmailsTab.svelte
index 424f2bc8..024186ba 100644
--- a/web/src/lib/components/settings/tabs/EmailsTab.svelte
+++ b/web/src/lib/components/settings/tabs/EmailsTab.svelte
@@ -1,5 +1,5 @@
 <div>
-	<h2 class="text-lg font-medium text-foreground-default">Email addresses</h2>
+	<h2 class="text-paragraph-large font-medium text-foreground-default">Email addresses</h2>
 	<p class="text-sm text-foreground-subtle">
 		Commits authored using emails listed here will be associated with your Tangled profile.
 	</p>
diff --git a/web/src/lib/components/settings/tabs/KeysTab.svelte b/web/src/lib/components/settings/tabs/KeysTab.svelte
index 82640349..e0407484 100644
--- a/web/src/lib/components/settings/tabs/KeysTab.svelte
+++ b/web/src/lib/components/settings/tabs/KeysTab.svelte
@@ -124,7 +124,7 @@
 <div class="flex flex-col gap-4">
 	<div>
 		<div class="flex items-center justify-between gap-4">
-			<h2 class="text-lg font-medium text-foreground-default">SSH keys</h2>
+			<h2 class="text-paragraph-large font-medium text-foreground-default">SSH keys</h2>
 			<Button variant="primary" icon={Plus} popovertarget="add-key-popover">Add</Button>
 		</div>
 		<p class="pt-4 text-sm text-foreground-subtle">
diff --git a/web/src/lib/components/settings/tabs/KnotsTab.svelte b/web/src/lib/components/settings/tabs/KnotsTab.svelte
index c361204d..f3488707 100644
--- a/web/src/lib/components/settings/tabs/KnotsTab.svelte
+++ b/web/src/lib/components/settings/tabs/KnotsTab.svelte
@@ -1,5 +1,5 @@
 <div>
-	<h2 class="text-lg font-medium text-foreground-default">Knots</h2>
+	<h2 class="text-paragraph-large font-medium text-foreground-default">Knots</h2>
 	<p class="text-sm text-foreground-subtle">
 		Knots are lightweight headless servers that enable users to host Git repositories with ease.
 		When creating a repository, you can choose a knot to store it on.
diff --git a/web/src/lib/components/settings/tabs/NotificationsTab.svelte b/web/src/lib/components/settings/tabs/NotificationsTab.svelte
index 4af25d8a..96d5a9a3 100644
--- a/web/src/lib/components/settings/tabs/NotificationsTab.svelte
+++ b/web/src/lib/components/settings/tabs/NotificationsTab.svelte
@@ -1,5 +1,5 @@
 <div>
-	<h2 class="text-lg font-medium text-foreground-default">Notification preferences</h2>
+	<h2 class="text-paragraph-large font-medium text-foreground-default">Notification preferences</h2>
 	<p class="text-sm text-foreground-subtle">
 		Choose which notifications you want to receive when activity happens on your repositories and
 		profile.
diff --git a/web/src/lib/components/settings/tabs/ProfileTab.svelte b/web/src/lib/components/settings/tabs/ProfileTab.svelte
index f6071ee7..508b880a 100644
--- a/web/src/lib/components/settings/tabs/ProfileTab.svelte
+++ b/web/src/lib/components/settings/tabs/ProfileTab.svelte
@@ -27,7 +27,7 @@
 </script>
 
 <div>
-	<h2 class="text-lg font-medium text-foreground-default">Profile</h2>
+	<h2 class="text-paragraph-large font-medium text-foreground-default">Profile</h2>
 	<p class="pb-2 text-sm text-foreground-subtle">
 		Your account information from your AT Protocol identity.
 	</p>
diff --git a/web/src/lib/components/settings/tabs/SitesTab.svelte b/web/src/lib/components/settings/tabs/SitesTab.svelte
index 7b442d01..1c0d1d70 100644
--- a/web/src/lib/components/settings/tabs/SitesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SitesTab.svelte
@@ -1,4 +1,4 @@
 <div>
-	<h2 class="text-lg font-medium text-foreground-default">Git sites</h2>
+	<h2 class="text-paragraph-large font-medium text-foreground-default">Git sites</h2>
 	<!-- TODO: claim and manage a static site subdomain -->
 </div>
diff --git a/web/src/lib/components/settings/tabs/SpindlesTab.svelte b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
index e3d9d6ce..182bcfc6 100644
--- a/web/src/lib/components/settings/tabs/SpindlesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
@@ -1,5 +1,5 @@
 <div>
-	<h2 class="text-lg font-medium text-foreground-default">Spindles</h2>
+	<h2 class="text-paragraph-large font-medium text-foreground-default">Spindles</h2>
 	<p class="text-sm text-foreground-subtle">
 		Spindles are servers that run continuous integration pipelines for your repositories.
 	</p>
diff --git a/web/src/lib/components/shell/Footer.svelte b/web/src/lib/components/shell/Footer.svelte
index fd53968f..234dced6 100644
--- a/web/src/lib/components/shell/Footer.svelte
+++ b/web/src/lib/components/shell/Footer.svelte
@@ -45,7 +45,8 @@
 
 	const appPath = (path: string) => resolve(path as "/");
 	const headerStyle = "text-foreground-default font-bold text-sm tracking-wide mb-1";
-	const mobileHeaderStyle = "text-foreground-default font-bold text-xs tracking-wide mb-1";
+	const mobileHeaderStyle =
+		"text-foreground-default font-bold text-paragraph-small tracking-wide mb-1";
 	const linkStyle =
 		"inline-flex items-center gap-1 text-foreground-subtle hover:text-foreground-default hover:underline";
 	const minimalLinkStyle = "text-foreground-subtle hover:text-foreground-default hover:underline";
@@ -404,7 +405,9 @@
 						</div>
 
 						<div class="text-right">
-							<div class="text-xs">&copy; 2026 Tangled Labs Oy. All rights reserved.</div>
+							<div class="text-paragraph-small">
+								&copy; 2026 Tangled Labs Oy. All rights reserved.
+							</div>
 						</div>
 					</div>
 
@@ -436,7 +439,9 @@
 						</div>
 
 						<div class="text-center">
-							<div class="text-xs">&copy; 2026 Tangled Labs Oy. All rights reserved.</div>
+							<div class="text-paragraph-small">
+								&copy; 2026 Tangled Labs Oy. All rights reserved.
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 6c562739..b918b3fb 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -47,7 +47,7 @@
 			size: {
 				sm: "min-h-8 gap-1.5 px-2 py-1.5 text-sm",
 				md: "min-h-9 gap-2 px-3 py-1.5 text-sm",
-				lg: "min-h-10 gap-2.5 px-4 py-2 text-base"
+				lg: "min-h-10 gap-2.5 px-4 py-2 text-paragraph-large"
 			},
 			insetShadow: {
 				true: "",
diff --git a/web/src/lib/components/ui/ButtonCard.svelte b/web/src/lib/components/ui/ButtonCard.svelte
index d8f7720f..ae2142c1 100644
--- a/web/src/lib/components/ui/ButtonCard.svelte
+++ b/web/src/lib/components/ui/ButtonCard.svelte
@@ -95,7 +95,7 @@
 			</div>
 		{/if}
 		{#if description}
-			<span class="text-xs text-foreground-muted">{description}</span>
+			<span class="text-paragraph-small text-foreground-muted">{description}</span>
 		{/if}
 	</div>
 {/snippet}
diff --git a/web/src/lib/components/ui/EmptyState.svelte b/web/src/lib/components/ui/EmptyState.svelte
index 97dd238e..90ed2cbf 100644
--- a/web/src/lib/components/ui/EmptyState.svelte
+++ b/web/src/lib/components/ui/EmptyState.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div
-	class="flex items-center justify-center rounded-sm border border-border-default p-12 text-base text-foreground-subtle italic"
+	class="flex items-center justify-center rounded-sm border border-border-default p-12 text-paragraph-large text-foreground-subtle italic"
 >
 	<span class="flex items-center gap-2">{message}{@render children?.()}</span>
 </div>
diff --git a/web/src/lib/components/ui/Error.svelte b/web/src/lib/components/ui/Error.svelte
index 561df9d6..4f97f026 100644
--- a/web/src/lib/components/ui/Error.svelte
+++ b/web/src/lib/components/ui/Error.svelte
@@ -19,10 +19,10 @@
 					icon: "size-4",
 					toggle: "px-3 py-2 text-sm",
 					chevron: "size-4",
-					body: "px-3 py-2 text-xs"
+					body: "px-3 py-2 text-paragraph-small"
 				},
 				large: {
-					header: "px-4 py-3 text-base",
+					header: "px-4 py-3 text-paragraph-large",
 					icon: "size-5",
 					toggle: "px-4 py-3 text-sm",
 					chevron: "size-4",
diff --git a/web/src/lib/components/ui/Field.svelte b/web/src/lib/components/ui/Field.svelte
index e2ab58d9..e76383b4 100644
--- a/web/src/lib/components/ui/Field.svelte
+++ b/web/src/lib/components/ui/Field.svelte
@@ -27,7 +27,10 @@
 
 <div class={`flex flex-col gap-1.5 ${className}`} {...rest}>
 	{#if label}
-		<label for={id} class="text-xs font-medium tracking-wide text-foreground-default uppercase">
+		<label
+			for={id}
+			class="text-paragraph-small font-medium tracking-wide text-foreground-default uppercase"
+		>
 			{label}
 			{#if required}
 				<span class="text-foreground-danger">*</span>
@@ -36,6 +39,6 @@
 	{/if}
 	{@render children({ id })}
 	{#if subtitle}
-		<p class="text-xs text-foreground-muted">{subtitle}</p>
+		<p class="text-paragraph-small text-foreground-muted">{subtitle}</p>
 	{/if}
 </div>
diff --git a/web/src/lib/components/ui/Link.svelte b/web/src/lib/components/ui/Link.svelte
index 7aba2344..fb903c0b 100644
--- a/web/src/lib/components/ui/Link.svelte
+++ b/web/src/lib/components/ui/Link.svelte
@@ -16,7 +16,7 @@
 			},
 			size: {
 				regular: "",
-				small: "text-xs"
+				small: "text-paragraph-small"
 			},
 			disabled: {
 				true: "pointer-events-none opacity-50",
diff --git a/web/src/lib/components/ui/Section.svelte b/web/src/lib/components/ui/Section.svelte
index 712ed5e5..0bd5ea36 100644
--- a/web/src/lib/components/ui/Section.svelte
+++ b/web/src/lib/components/ui/Section.svelte
@@ -23,7 +23,7 @@
 
 <section>
 	{#if title}
-		<h2 class="px-2 pb-4 text-base font-medium">{title}</h2>
+		<h2 class="px-2 pb-4 text-paragraph-large font-medium">{title}</h2>
 	{/if}
 	{@render header?.()}
 	{#if empty}
diff --git a/web/src/lib/components/ui/Tag.svelte b/web/src/lib/components/ui/Tag.svelte
index 2e3baf0a..33b436d6 100644
--- a/web/src/lib/components/ui/Tag.svelte
+++ b/web/src/lib/components/ui/Tag.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "$lib/tv";
 
 	export const tag = tv({
-		base: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs leading-none font-medium select-none",
+		base: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-paragraph-small leading-none font-medium select-none",
 		variants: {
 			color: {
 				default: "border border-border-default bg-background-default text-foreground-default",
diff --git a/web/src/routes/+error.svelte b/web/src/routes/+error.svelte
index 59b8194e..eba3775d 100644
--- a/web/src/routes/+error.svelte
+++ b/web/src/routes/+error.svelte
@@ -47,12 +47,12 @@
 			<div
 				class={`mx-auto mb-4 flex size-16 items-center justify-center rounded-full ${copy.tone}`}
 			>
-				<span class="font-mono text-xl font-bold" aria-hidden="true">{copy.mark}</span>
+				<span class="font-mono text-heading-4 font-bold" aria-hidden="true">{copy.mark}</span>
 			</div>
 		</div>
 
 		<div class="space-y-4">
-			<h1 class="text-2xl font-bold text-foreground-default sm:text-3xl">
+			<h1 class="text-heading-3 font-bold text-foreground-default sm:text-heading-2">
 				{copy.status} &mdash; {copy.title}
 			</h1>
 			<p class="text-foreground-muted">{copy.message}</p>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index f3bfc283..9c93fb17 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -15,7 +15,7 @@
 
 {#if auth.currentUser}
 	<section class="mx-auto flex w-full max-w-screen-lg flex-col gap-2 px-6 py-8">
-		<h1 class="text-2xl font-semibold">Home</h1>
+		<h1 class="text-heading-3 font-semibold">Home</h1>
 	</section>
 {:else}
 	<MarketingHome />
diff --git a/web/src/routes/[handle]/[repo]/issues/new/+page.svelte b/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
index cce8b916..9ca7ac58 100644
--- a/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
@@ -31,7 +31,7 @@
 </svelte:head>
 
 <TabPanel class="py-6">
-	<h1 class="mb-4 text-xl font-bold text-foreground-default">Create a new issue</h1>
+	<h1 class="mb-4 text-heading-4 font-bold text-foreground-default">Create a new issue</h1>
 	<IssueForm
 		{markup}
 		repoDid={data.repo.repoDid ?? ""}
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 236716d1..5481ae17 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -43,7 +43,9 @@
 		<a href={appPath("/")} class="flex items-center gap-2 no-underline hover:no-underline">
 			<img src="/logos/logotype.svg" alt="tangled" class="h-24 w-48 dark:invert" />
 		</a>
-		<p class="text-center text-xl text-foreground-default italic">tightly-knit social coding.</p>
+		<p class="text-center text-heading-4 font-normal text-foreground-default italic">
+			tightly-knit social coding.
+		</p>
 	</div>
 
 	<form class="mt-4" onsubmit={submit}>
@@ -60,16 +62,18 @@
 				inputmode="url"
 				required
 				placeholder="akshay.tngl.sh"
-				class="w-full rounded border border-border-default bg-background-default p-3 text-lg text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none md:text-base"
+				class="w-full rounded border border-border-default bg-background-default p-3 text-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
 			/>
 			<p class="mt-1 text-sm text-foreground-subtle">
 				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 bg-background-inset px-1 font-mono text-xs text-foreground-default"
+				<code
+					class="rounded bg-background-inset px-1 font-mono text-monospace-small text-foreground-default"
 					>(.tngl.sh)</code
 				>
 				or Bluesky
-				<code class="rounded bg-background-inset px-1 font-mono text-xs text-foreground-default"
+				<code
+					class="rounded bg-background-inset px-1 font-mono text-monospace-small text-foreground-default"
 					>(.bsky.social)</code
 				>
 				account.
@@ -83,7 +87,7 @@
 			loading={isSubmitting}
 			spinnerClass="size-4"
 			aria-label={isSubmitting ? "Logging in" : undefined}
-			class="my-2 mt-6 w-full text-base disabled:opacity-100"
+			class="my-2 mt-6 w-full text-paragraph-large disabled:opacity-100"
 		>
 			Login
 		</Button>
diff --git a/web/src/routes/oauth/callback/+page.svelte b/web/src/routes/oauth/callback/+page.svelte
index b91ee3c8..0acb7e13 100644
--- a/web/src/routes/oauth/callback/+page.svelte
+++ b/web/src/routes/oauth/callback/+page.svelte
@@ -25,7 +25,7 @@
 
 {#if auth.error}
 	<section class="mx-auto flex max-w-md flex-col items-center gap-4 px-7 py-16 text-center">
-		<p class="text-base text-foreground-danger">{auth.error}</p>
+		<p class="text-paragraph-large text-foreground-danger">{auth.error}</p>
 		<a href={appPath("/login")} class="inline-flex underline">Try again</a>
 	</section>
 {:else}
diff --git a/web/src/routes/repo/new/+page.svelte b/web/src/routes/repo/new/+page.svelte
index 120fec7b..a8ab9487 100644
--- a/web/src/routes/repo/new/+page.svelte
+++ b/web/src/routes/repo/new/+page.svelte
@@ -23,7 +23,7 @@
 
 <div class="mx-auto w-full max-w-2xl px-4 py-12">
 	<div class="px-6 py-2">
-		<h1 class="text-xl font-bold text-foreground-default">Create a new repository</h1>
+		<h1 class="text-heading-4 font-bold text-foreground-default">Create a new repository</h1>
 		<p class="mb-1 text-sm text-foreground-subtle">
 			Repositories contain a project's files and version history. All repositories are publicly
 			accessible.
@@ -42,7 +42,7 @@
 				</div>
 
 				<div class="flex-1 pb-12">
-					<h2 class="text-lg font-medium text-foreground-default">General</h2>
+					<h2 class="text-paragraph-large font-medium text-foreground-default">General</h2>
 					<div class="mb-4 text-sm text-foreground-subtle">Basic repository information.</div>
 
 					<div class="space-y-2">
@@ -105,7 +105,7 @@
 				</div>
 
 				<div class="flex-1">
-					<h2 class="text-lg font-medium text-foreground-default">Configuration</h2>
+					<h2 class="text-paragraph-large font-medium text-foreground-default">Configuration</h2>
 					<div class="mb-4 text-sm text-foreground-subtle">Repository settings and hosting.</div>
 
 					<div class="space-y-2">
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index 331d4b08..1cec0629 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -35,7 +35,7 @@
 
 <div class="mx-auto w-full max-w-screen-lg px-4 py-12">
 	<div class="px-2 py-2">
-		<h1 class="text-xl font-bold text-foreground-default">Settings</h1>
+		<h1 class="text-heading-4 font-bold text-foreground-default">Settings</h1>
 	</div>
 
 	<div class="mt-4 rounded border border-border-default bg-background-default p-6">
diff --git a/web/src/routes/strings/new/+page.svelte b/web/src/routes/strings/new/+page.svelte
index 85355a28..4f983c5d 100644
--- a/web/src/routes/strings/new/+page.svelte
+++ b/web/src/routes/strings/new/+page.svelte
@@ -17,7 +17,7 @@
 
 <div class="mx-auto w-full max-w-screen-lg px-4 py-12">
 	<div class="px-2 py-2">
-		<h1 class="text-xl font-bold text-foreground-default">Create a new string</h1>
+		<h1 class="text-heading-4 font-bold text-foreground-default">Create a new string</h1>
 		<p class="text-sm text-foreground-subtle">Store and share code snippets with ease.</p>
 	</div>