diff --git a/web/src/lib/components/repo/RefSelector.svelte b/web/src/lib/components/repo/RefSelector.svelte
index b2c0eef7..c2404ea5 100644
--- a/web/src/lib/components/repo/RefSelector.svelte
+++ b/web/src/lib/components/repo/RefSelector.svelte
@@ -51,8 +51,8 @@
 		>
 			{#snippet footer()}
 				<div class="flex items-center gap-4 px-2 py-1.5">
-					<a href={resolve(`${base}/branches` as "/")} class="text-sm"> View all branches </a>
-					<a href={resolve(`${base}/tags` as "/")} class="text-sm">View all tags</a>
+					<a href={resolve(`${base}/branches` as "/")} class="typography-paragraph-small"> View all branches </a>
+					<a href={resolve(`${base}/tags` as "/")} class="typography-paragraph-small">View all tags</a>
 				</div>
 			{/snippet}
 		</Select>
diff --git a/web/src/lib/components/repo/RepoToolbar.svelte b/web/src/lib/components/repo/RepoToolbar.svelte
index 000c26e2..8f9d1c5a 100644
--- a/web/src/lib/components/repo/RepoToolbar.svelte
+++ b/web/src/lib/components/repo/RepoToolbar.svelte
@@ -53,21 +53,21 @@
 	<div class="flex items-center gap-3">
 		<a
 			href={resolve(`${base}/commits/${encodedRef}` as "/")}
-			class="inline-flex items-center gap-1 text-sm font-bold text-foreground-default no-underline hover:underline md:hidden"
+			class="inline-flex items-center gap-1 typography-paragraph-small font-bold text-foreground-default no-underline hover:underline md:hidden"
 		>
 			<GitCommitHorizontal class="size-4" aria-hidden="true" />
 			{totalCommits}
 		</a>
 		<a
 			href={resolve(`${base}/branches` as "/")}
-			class="inline-flex items-center gap-1 text-sm font-bold text-foreground-default no-underline hover:underline md:hidden"
+			class="inline-flex items-center gap-1 typography-paragraph-small font-bold text-foreground-default no-underline hover:underline md:hidden"
 		>
 			<GitBranch class="size-4" aria-hidden="true" />
 			{totalBranches}
 		</a>
 		<a
 			href={resolve(`${base}/tags` as "/")}
-			class="inline-flex items-center gap-1 text-sm font-bold text-foreground-default no-underline hover:underline md:hidden"
+			class="inline-flex items-center gap-1 typography-paragraph-small font-bold text-foreground-default no-underline hover:underline md:hidden"
 		>
 			<Tags class="size-4" aria-hidden="true" />
 			{totalTags}
diff --git a/web/src/lib/components/ui/Combobox.svelte b/web/src/lib/components/ui/Combobox.svelte
index cd8f1f41..be43850c 100644
--- a/web/src/lib/components/ui/Combobox.svelte
+++ b/web/src/lib/components/ui/Combobox.svelte
@@ -9,8 +9,8 @@
 			trigger: "flex min-h-9 cursor-pointer items-center gap-2 px-2 py-1",
 			value: "min-w-0 flex-1 truncate text-left",
 			panel:
-				"combobox-panel fixed z-50 m-0 flex max-h-[min(24rem,calc(100dvh-1rem))] w-72 max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-sm border border-border-default bg-background-default p-0 text-sm text-foreground-default shadow-regular",
-			search: "shrink-0 border-b border-border-default p-2",
+				"combobox-panel fixed z-50 m-0 flex max-h-[min(24rem,calc(100dvh-1rem))] w-72 max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-sm border border-border-default bg-background-default p-0 typography-paragraph-small text-foreground-default shadow-regular",
+			search: "shrink-0 border-b border-border-default p-2 mt-4",
 			list: "min-h-0 flex-1 overflow-y-auto p-1",
 			groupHeading:
 				"px-2 pt-2 pb-1 typography-paragraph-small font-bold text-foreground-muted first:pt-1",
diff --git a/web/src/lib/components/ui/Field.stories.svelte b/web/src/lib/components/ui/Field.stories.svelte
index c5f70c7e..af54d1fb 100644
--- a/web/src/lib/components/ui/Field.stories.svelte
+++ b/web/src/lib/components/ui/Field.stories.svelte
@@ -28,7 +28,7 @@
 				id="field-default"
 				type="text"
 				placeholder="Placeholder"
-				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
+				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
 			/>
 		</Field>
 	{/snippet}
@@ -41,7 +41,7 @@
 				id="field-label-only"
 				type="text"
 				placeholder="Placeholder"
-				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
+				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
 			/>
 		</Field>
 	{/snippet}
@@ -54,7 +54,7 @@
 				id="field-required"
 				type="text"
 				placeholder="Placeholder"
-				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
+				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
 			/>
 		</Field>
 	{/snippet}
@@ -82,7 +82,7 @@
 				id="field-input"
 				type="text"
 				placeholder="Placeholder"
-				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
+				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
 			/>
 		</Field>
 	{/snippet}
diff --git a/web/src/lib/components/ui/Input.svelte b/web/src/lib/components/ui/Input.svelte
index 92527eea..3c6a8bea 100644
--- a/web/src/lib/components/ui/Input.svelte
+++ b/web/src/lib/components/ui/Input.svelte
@@ -69,11 +69,11 @@
 		{disabled}
 		aria-invalid={error}
 		aria-busy={loading}
-		class="flex-1 bg-transparent text-sm outline-none placeholder:text-foreground-placeholder disabled:cursor-not-allowed"
+		class="flex-1 bg-transparent typography-paragraph-small outline-none placeholder:text-foreground-placeholder disabled:cursor-not-allowed"
 		{...rest}
 	/>
 	{#if suffix}
-		<span class="shrink-0 text-sm text-foreground-muted select-none">{suffix}</span>
+		<span class="shrink-0 typography-paragraph-small text-foreground-muted select-none">{suffix}</span>
 	{/if}
 	{#if loading}
 		<Spinner class="size-4 shrink-0" />
diff --git a/web/src/lib/components/ui/Select.stories.svelte b/web/src/lib/components/ui/Select.stories.svelte
index 412b281f..5bece8b8 100644
--- a/web/src/lib/components/ui/Select.stories.svelte
+++ b/web/src/lib/components/ui/Select.stories.svelte
@@ -88,7 +88,7 @@
 		<div class="w-64">
 			<Select {...args}>
 				{#snippet footer()}
-					<a href={resolve("/")} class="block p-2 text-sm">View all branches</a>
+					<a href={resolve("/")} class="block p-2 typography-paragraph-small">View all branches</a>
 				{/snippet}
 			</Select>
 		</div>
diff --git a/web/src/lib/components/ui/selectField.ts b/web/src/lib/components/ui/selectField.ts
index b4c64b3e..34780ad2 100644
--- a/web/src/lib/components/ui/selectField.ts
+++ b/web/src/lib/components/ui/selectField.ts
@@ -20,7 +20,7 @@ export type SelectAlign = "left" | "right";
  *  and only the border, fill and state colours live here. */
 export const selectField = tv({
 	slots: {
-		box: "w-full rounded-sm border bg-background-default text-sm transition-colors outline-none disabled:cursor-not-allowed",
+		box: "w-full rounded-sm border bg-background-default typography-paragraph-small transition-colors outline-none disabled:cursor-not-allowed",
 		chevron: "shrink-0 text-foreground-subtle"
 	},
 	variants: {