diff --git a/web/src/routes/+error.svelte b/web/src/routes/+error.svelte
index ed8749f43..c83ebef97 100644
--- a/web/src/routes/+error.svelte
+++ b/web/src/routes/+error.svelte
@@ -42,10 +42,10 @@
 </svelte:head>
 
 <section class="flex min-h-[60vh] flex-col items-center justify-center text-center">
-	<div class="mx-auto max-w-lg rounded-lg bg-background-default p-8 shadow-xs">
-		<div class="mb-6">
+	<div class="mx-auto max-w-narrow rounded-lg bg-background-default p-2xl">
+		<div class="mb-xl">
 			<div
-				class={`mx-auto mb-4 flex size-16 items-center justify-center rounded-full ${copy.tone}`}
+				class={`mx-auto mb-md flex size-16 items-center justify-center rounded-full ${copy.tone}`}
 			>
 				<span class="font-mono typography-heading-4 font-bold" aria-hidden="true"
 					>{copy.mark}</span
@@ -53,14 +53,14 @@
 			</div>
 		</div>
 
-		<div class="space-y-4">
+		<div class="space-y-md">
 			<h1
 				class="typography-heading-3 font-bold text-foreground-default sm:typography-heading-2"
 			>
 				{copy.status} &mdash; {copy.title}
 			</h1>
 			<p class="text-foreground-muted">{copy.message}</p>
-			<div class="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
+			<div class="mt-xl flex flex-col items-center justify-center gap-sm sm:flex-row">
 				<Button href={resolve("/")} variant="default">Back to home</Button>
 			</div>
 		</div>
diff --git a/web/src/routes/[handle]/+layout.svelte b/web/src/routes/[handle]/+layout.svelte
index 64e437459..3b7e27ca5 100644
--- a/web/src/routes/[handle]/+layout.svelte
+++ b/web/src/routes/[handle]/+layout.svelte
@@ -127,7 +127,7 @@
 	/>
 {/if}
 
-<section class="mx-auto w-full max-w-5xl py-6">
+<section class="mx-auto w-full max-w-page py-xl">
 	<!-- remount on navigation, svelte only paints a pending snippet when the boundary is new -->
 	{#key page.params.handle}
 		<Pending>
@@ -135,7 +135,7 @@
 				<Bones capture={profileProfilechromeSkeletonFixture} />
 			{/snippet}
 			{#snippet failed(cause: unknown)}
-				<div class="px-4 py-8">
+				<div class="px-md py-2xl">
 					<Error size="large" label={failureLabel(cause)} />
 				</div>
 			{/snippet}
diff --git a/web/src/routes/[handle]/+page.svelte b/web/src/routes/[handle]/+page.svelte
index 82e766aca..ce4395c8e 100644
--- a/web/src/routes/[handle]/+page.svelte
+++ b/web/src/routes/[handle]/+page.svelte
@@ -23,7 +23,7 @@
 
 {#snippet peopleSkeleton(title: string)}
 	<Section {title} empty={false} emptyMessage="">
-		<Bones capture={profileFollowcardBordered} repeat={30} class="flex flex-col gap-4" />
+		<Bones capture={profileFollowcardBordered} repeat={30} class="flex flex-col gap-md" />
 	</Section>
 {/snippet}
 
@@ -61,7 +61,7 @@
 {:else if data.tab === "starred"}
 	<Pending>
 		{#snippet skeleton()}
-			<Bones capture={repoRepocardWithStarButton} repeat={30} class="flex flex-col gap-4" />
+			<Bones capture={repoRepocardWithStarButton} repeat={30} class="flex flex-col gap-md" />
 		{/snippet}
 		{@const identity = await data.identity}
 		{@const counts = await data.counts}
@@ -70,7 +70,7 @@
 {:else if data.tab === "strings"}
 	<Pending>
 		{#snippet skeleton()}
-			<Bones capture={profileStringcardDefault} repeat={30} class="flex flex-col gap-4" />
+			<Bones capture={profileStringcardDefault} repeat={30} class="flex flex-col gap-md" />
 		{/snippet}
 		{@const identity = await data.identity}
 		{@const counts = await data.counts}
diff --git a/web/src/routes/[handle]/[repo]/+layout@.svelte b/web/src/routes/[handle]/[repo]/+layout@.svelte
index cd5e80ede..6cb1f4cc8 100644
--- a/web/src/routes/[handle]/[repo]/+layout@.svelte
+++ b/web/src/routes/[handle]/[repo]/+layout@.svelte
@@ -205,8 +205,8 @@
 	class={standalone
 		? "contents"
 		: fullWidth
-			? "w-full pt-2 sm:pl-2"
-			: "mx-auto w-full max-w-5xl py-6"}
+			? "w-full pt-xs sm:pl-xs"
+			: "mx-auto w-full max-w-page py-xl"}
 >
 	<!-- remount on navigation, svelte only paints a pending snippet when the boundary is new -->
 	{#key `${page.params.handle}/${page.params.repo}`}
@@ -239,7 +239,7 @@
 			{@render children()}
 			{#snippet failed(cause: unknown, reset: () => void)}
 				{noteFailure(reset)}
-				<div class="px-4 py-8">
+				<div class="px-md py-2xl">
 					<Error size="large" label={failureLabel(cause)} />
 				</div>
 			{/snippet}
diff --git a/web/src/routes/[handle]/[repo]/branches/+page.svelte b/web/src/routes/[handle]/[repo]/branches/+page.svelte
index c536a38ca..1ddf582c7 100644
--- a/web/src/routes/[handle]/[repo]/branches/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/branches/+page.svelte
@@ -20,4 +20,4 @@
 	/>
 </Pending>
 
-<RoutePagination page={data.page} pageCount={data.pageCount} labels class="gap-5" />
+<RoutePagination page={data.page} pageCount={data.pageCount} labels class="gap-lg" />
diff --git a/web/src/routes/[handle]/[repo]/issues/+page.svelte b/web/src/routes/[handle]/[repo]/issues/+page.svelte
index f8fae77f2..6a3b167bf 100644
--- a/web/src/routes/[handle]/[repo]/issues/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/issues/+page.svelte
@@ -4,7 +4,7 @@
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import RoutePagination from "$lib/components/ui/RoutePagination.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import ListPanel, { listRows } from "$lib/components/ui/ListPanel.svelte";
 	import repoTicketsTicketlistIssues from "$lib/bones/repo-tickets-ticketlist--issues.bones.json";
 	import repoTicketsTickettoolbarIssuesOpen from "$lib/bones/repo-tickets-tickettoolbar--issues-open.bones.json";
 
@@ -13,40 +13,36 @@
 
 <Pending>
 	{#snippet skeleton()}
-		<div class="border-b border-border-default p-4">
-			<Bones capture={repoTicketsTickettoolbarIssuesOpen} />
-		</div>
-		<div class="flex flex-col gap-2 p-4">
-			<Bones capture={repoTicketsTicketlistIssues} repeat={17} class="flex flex-col gap-2" />
-		</div>
+		<ListPanel>
+			{#snippet toolbar()}
+				<Bones capture={repoTicketsTickettoolbarIssuesOpen} />
+			{/snippet}
+			<Bones capture={repoTicketsTicketlistIssues} repeat={17} class={listRows} />
+		</ListPanel>
 	{/snippet}
 	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
 	{@const repo = await data.repo}
-	<TabPanel padded={false} class="p-4">
-		<TicketToolbar
-			repoName={repo.name}
-			ownerHandle={repo.ownerHandle}
-			state={data.state}
-			openCount={data.openCount}
-			closedCount={data.closedCount}
-		/>
-	</TabPanel>
-	<div class="mt-2">
+	<ListPanel>
+		{#snippet toolbar()}
+			<TicketToolbar
+				repoName={repo.name}
+				ownerHandle={repo.ownerHandle}
+				state={data.state}
+				openCount={data.openCount}
+				closedCount={data.closedCount}
+			/>
+		{/snippet}
+
 		<Pending>
 			{#snippet skeleton()}
-				<Bones
-					capture={repoTicketsTicketlistIssues}
-					repeat={17}
-					class="flex flex-col gap-2"
-				/>
+				<Bones capture={repoTicketsTicketlistIssues} repeat={17} class={listRows} />
 			{/snippet}
 			<TicketList
 				ownerHandle={repo.ownerHandle}
 				repoName={repo.name}
 				tickets={await data.issues}
 			/>
+			<RoutePagination page={data.page} pageCount={data.pageCount} />
 		</Pending>
-	</div>
-
-	<RoutePagination page={data.page} pageCount={data.pageCount} />
+	</ListPanel>
 </Pending>
diff --git a/web/src/routes/[handle]/[repo]/issues/new/+page.svelte b/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
index 0d637f0f5..2b56cea8a 100644
--- a/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
@@ -6,7 +6,7 @@
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import repoIssuesIssueformCreate from "$lib/bones/repo-issues-issueform--create.bones.json";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 
 	let { data } = $props();
 
@@ -31,8 +31,8 @@
 	};
 </script>
 
-<TabPanel class="py-6">
-	<h1 class="mb-4 typography-heading-4 text-foreground-default">Create a new issue</h1>
+<Card class="flex flex-col gap-sm">
+	<h1 class="typography-paragraph-large font-medium">Create a new issue</h1>
 	<Pending>
 		{#snippet skeleton()}
 			<Bones capture={repoIssuesIssueformCreate} />
@@ -52,4 +52,4 @@
 			oncancel={handleCancel}
 		/>
 	</Pending>
-</TabPanel>
+</Card>
diff --git a/web/src/routes/[handle]/[repo]/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/pipelines/+page.svelte
index fe533d856..4e8eaed01 100644
--- a/web/src/routes/[handle]/[repo]/pipelines/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/pipelines/+page.svelte
@@ -6,7 +6,7 @@
 	import RoutePagination from "$lib/components/ui/RoutePagination.svelte";
 	import repoPipelinesPipelinelistDefault from "$lib/bones/repo-pipelines-pipelinelist--default.bones.json";
 	import repoPipelinesPipelinetoolbarAll from "$lib/bones/repo-pipelines-pipelinetoolbar--all.bones.json";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import ListPanel, { listRows } from "$lib/components/ui/ListPanel.svelte";
 	import Error from "$lib/components/ui/Error.svelte";
 
 	let { data } = $props();
@@ -14,38 +14,32 @@
 
 <Pending>
 	{#snippet skeleton()}
-		<TabPanel padded={false}>
-			<Bones capture={repoPipelinesPipelinetoolbarAll} class="p-4" />
-			<Bones
-				capture={repoPipelinesPipelinelistDefault}
-				repeat={5}
-				class="flex flex-col divide-y divide-border-default"
-			/>
-		</TabPanel>
+		<ListPanel>
+			{#snippet toolbar()}
+				<Bones capture={repoPipelinesPipelinetoolbarAll} />
+			{/snippet}
+			<Bones capture={repoPipelinesPipelinelistDefault} repeat={5} class={listRows} />
+		</ListPanel>
 	{/snippet}
 	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
 	{@const repo = await data.repo}
-	<TabPanel padded={false}>
-		<div class="border-b border-border-default p-4">
+	<ListPanel>
+		{#snippet toolbar()}
 			<PipelineToolbar
 				ownerHandle={repo.ownerHandle}
 				repoName={repo.name}
 				filter={data.filter}
 				total={data.total}
 			/>
-		</div>
+		{/snippet}
 
 		<Pending>
 			{#snippet skeleton()}
-				<Bones
-					capture={repoPipelinesPipelinelistDefault}
-					repeat={5}
-					class="flex flex-col divide-y divide-border-default"
-				/>
+				<Bones capture={repoPipelinesPipelinelistDefault} repeat={5} class={listRows} />
 			{/snippet}
 			{@const spindleError = await data.spindleError}
 			{#if spindleError}
-				<div class="p-4">
+				<div class="p-md">
 					<Error label={spindleError} />
 				</div>
 			{:else}
@@ -63,5 +57,5 @@
 				<RoutePagination page={data.page} pageCount={data.pageCount} />
 			{/if}
 		</Pending>
-	</TabPanel>
+	</ListPanel>
 </Pending>
diff --git a/web/src/routes/[handle]/[repo]/pulls/+page.svelte b/web/src/routes/[handle]/[repo]/pulls/+page.svelte
index b0bf1445a..e1985ceaf 100644
--- a/web/src/routes/[handle]/[repo]/pulls/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/pulls/+page.svelte
@@ -4,7 +4,7 @@
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import RoutePagination from "$lib/components/ui/RoutePagination.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import ListPanel, { listRows } from "$lib/components/ui/ListPanel.svelte";
 	import repoTicketsTicketlistPulls from "$lib/bones/repo-tickets-ticketlist--pulls.bones.json";
 	import repoTicketsTickettoolbarPullsOpen from "$lib/bones/repo-tickets-tickettoolbar--pulls-open.bones.json";
 
@@ -13,30 +13,31 @@
 
 <Pending>
 	{#snippet skeleton()}
-		<div class="border-b border-border-default p-4">
-			<Bones capture={repoTicketsTickettoolbarPullsOpen} />
-		</div>
-		<div class="flex flex-col gap-2 p-4">
-			<Bones capture={repoTicketsTicketlistPulls} />
-		</div>
+		<ListPanel>
+			{#snippet toolbar()}
+				<Bones capture={repoTicketsTickettoolbarPullsOpen} />
+			{/snippet}
+			<Bones capture={repoTicketsTicketlistPulls} class={listRows} />
+		</ListPanel>
 	{/snippet}
 	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
 	{@const repo = await data.repo}
-	<TabPanel padded={false} class="p-4">
-		<TicketToolbar
-			isPull={true}
-			repoName={repo.name}
-			ownerHandle={repo.ownerHandle}
-			state={data.state}
-			openCount={data.openCount}
-			closedCount={data.closedCount}
-			mergedCount={data.mergedCount}
-		/>
-	</TabPanel>
-	<div class="mt-2">
+	<ListPanel>
+		{#snippet toolbar()}
+			<TicketToolbar
+				isPull={true}
+				repoName={repo.name}
+				ownerHandle={repo.ownerHandle}
+				state={data.state}
+				openCount={data.openCount}
+				closedCount={data.closedCount}
+				mergedCount={data.mergedCount}
+			/>
+		{/snippet}
+
 		<Pending>
 			{#snippet skeleton()}
-				<Bones capture={repoTicketsTicketlistPulls} />
+				<Bones capture={repoTicketsTicketlistPulls} class={listRows} />
 			{/snippet}
 			<TicketList
 				isPull={true}
@@ -44,8 +45,7 @@
 				repoName={repo.name}
 				tickets={await data.pulls}
 			/>
+			<RoutePagination page={data.page} pageCount={data.pageCount} />
 		</Pending>
-	</div>
-
-	<RoutePagination page={data.page} pageCount={data.pageCount} />
+	</ListPanel>
 </Pending>
diff --git a/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte b/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte
index 4ced9f2bd..0b3c53130 100644
--- a/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte
+++ b/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte
@@ -46,7 +46,6 @@
 	import RepoTabs from "$lib/components/repo/RepoTabs.svelte";
 	import Ticket from "$lib/components/repo/tickets/Ticket.svelte";
 	import Card from "$lib/components/ui/Card.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 	import type { ResolvedPathname } from "$app/types";
 	import type { Did } from "@atcute/lexicons/syntax";
 	import type { PullState } from "$lib/api/records";
@@ -647,17 +646,17 @@
 	image={pullCard(data.repo, pull, data.comments?.length, data.publicConfig?.ogreUrl)}
 />
 
-<div class="flex items-stretch gap-0">
-	<div class="min-w-0 flex-1 space-y-2 py-4">
+<div class="flex items-stretch gap-none">
+	<div class="min-w-0 flex-1 space-y-xs py-md">
 		<!-- TODO: extract as a component -->
-		<div class="sticky top-0 z-30 mb-0 h-0">
+		<div class="sticky top-0 z-30 mb-none h-0">
 			<div
 				bind:offsetHeight={stickyHeaderHeight}
-				class="absolute inset-x-0 top-0 flex h-11 items-center justify-between border-x border-b border-border-default bg-background-default px-2 {showHeader
+				class="absolute inset-x-0 top-0 flex h-11 items-center justify-between border-x border-b border-border-default bg-background-default px-xs {showHeader
 					? 'opacity-100'
 					: 'pointer-events-none opacity-0'}"
 			>
-				<div class="flex min-w-0 flex-1 items-center gap-2">
+				<div class="flex min-w-0 flex-1 items-center gap-xs">
 					<h1 class="min-w-0 truncate typography-paragraph-large">
 						<span class="font-medium">{pull.title}</span>
 						<span class="text-foreground-muted">#{pull.rkey}</span>
@@ -684,7 +683,7 @@
 		</div>
 		<RepoTabs repo={data.repo} counts={data.counts} access={data.viewerAccess} active="pulls" />
 		<!-- PR Body -->
-		<TabPanel class="space-y-5">
+		<Card class="space-y-lg">
 			<Ticket
 				ticket={pull}
 				markup={data.markup}
@@ -709,7 +708,11 @@
 						{/if}
 					</Button>
 					{#if subError}
-						<span role="status" class="text-sm text-foreground-danger">{subError}</span>
+						<span
+							role="status"
+							class="typography-paragraph-regular text-foreground-danger"
+							>{subError}</span
+						>
 					{/if}
 					{#if !discussionOpen}
 						<Button
@@ -726,10 +729,10 @@
 				canEdit
 				onLabelsChange={(names) => (mockLabelNames = names)}
 			/>
-		</TabPanel>
+		</Card>
 		{#if pull.versions.length}
 			<!-- PR Commits -->
-			<Card padding="small" class="space-y-2">
+			<Card padding="small" class="space-y-xs">
 				<PullCommitListHeader
 					versions={pull.versions}
 					{commits}
@@ -738,7 +741,7 @@
 					oncommitVersions={confirmVersions}
 				>
 					{#snippet actions()}
-						{#if isAuthor && pullState === "open" && sourceBranch}
+						{#if isAuthor && pullState === "open" && sourceBranch && canResubmit}
 							<Button
 								icon={IterationCcw}
 								title={canResubmit
@@ -773,7 +776,7 @@
 				/>
 			</Card>
 		{:else}
-			<Card padding="small" class="space-y-2">
+			<Card padding="small" class="space-y-xs">
 				<p class="text-foreground-subtle">
 					This pull request has no versions submitted yet.
 				</p>
@@ -812,7 +815,7 @@
 		{/if}
 	</div>
 	{#if discussionOpen}
-		<div class="flex shrink-0 px-1 pt-11.5">
+		<div class="flex shrink-0 px-2xs pt-[45px]">
 			<div class="sticky top-0 flex h-screen">
 				<ResizeHandle
 					bind:width={discussionWidth}
@@ -826,15 +829,15 @@
 			</div>
 		</div>
 		<!-- discussion sidebar -->
-		<div class="relative shrink-0 pt-11.5" style:width="{discussionWidth}px">
+		<div class="relative shrink-0 pt-[45px]" style:width="{discussionWidth}px">
 			<aside
 				class="flex h-full min-h-screen flex-col items-stretch rounded-tl-sm border-t border-l border-border-default bg-background-default text-foreground-default"
 			>
 				<div class="sticky top-0 flex h-screen flex-col">
 					<header class="h-11 border-b border-border-default">
-						<div class="flex h-full items-center justify-between px-2">
-							<h2 class="flex items-center gap-2 px-3 typography-paragraph-regular">
-								<MessagesSquare class="size-4 shrink-0" aria-hidden="true" />
+						<div class="flex h-full items-center justify-between px-xs">
+							<h2 class="flex items-center gap-xs px-sm typography-paragraph-regular">
+								<MessagesSquare class="size-3.5 shrink-0" aria-hidden="true" />
 								Comments
 							</h2>
 							<Button
@@ -863,7 +866,7 @@
 			<div
 				bind:clientHeight={formHeight}
 				style:width="{discussionWidth}px"
-				class="fixed right-0 bottom-0 space-y-2 border-l border-border-default bg-background-default px-2 pb-2"
+				class="fixed right-0 bottom-0 space-y-xs border-l border-border-default bg-background-default px-xs pb-xs"
 			>
 				{#if conflicts.length}
 					<details
@@ -872,11 +875,11 @@
 						style:--rail-easing={CROSSFADE_EASING}
 					>
 						<summary
-							class="order-1 flex cursor-pointer flex-row items-center justify-between bg-background-warning-subtle p-2 font-medium text-foreground-warning transition-colors duration-150 select-none hover:bg-background-warning-subtle-hover"
+							class="order-1 flex cursor-pointer flex-row items-center justify-between bg-background-warning-subtle p-xs font-medium text-foreground-warning transition-colors duration-150 select-none hover:bg-background-warning-subtle-hover"
 						>
-							<span class="flex flex-row items-center gap-2 px-0.5">
+							<span class="flex flex-row items-center gap-xs px-3xs">
 								<ChevronUp
-									class="size-4 transition-transform duration-150 group-open:rotate-180"
+									class="size-3.5 transition-transform duration-150 group-open:rotate-180"
 								/>
 								Conflicts
 							</span>
@@ -893,7 +896,7 @@
 									? `max-height: ${conflictsPreviewHeight}px`
 									: ""}
 							>
-								<div class="flex flex-col gap-2 py-2">
+								<div class="flex flex-col gap-xs py-xs">
 									{#each shownConflicts as conflict (conflict.filename)}
 										{@const anchor = conflictAnchor(conflict.filename)}
 										{#if anchor}
@@ -906,7 +909,7 @@
 														conflict.filename,
 														anchor
 													)}
-												class="block w-max min-w-full cursor-pointer px-2 typography-monospace-small whitespace-nowrap hover:underline"
+												class="block w-max min-w-full cursor-pointer px-xs typography-monospace-small whitespace-nowrap hover:underline"
 												title={conflict.filename}
 											>
 												{conflict.filename}
@@ -914,7 +917,7 @@
 											<!-- eslint-enable svelte/no-navigation-without-resolve -->
 										{:else}
 											<span
-												class="block w-max min-w-full px-2 typography-monospace-small whitespace-nowrap"
+												class="block w-max min-w-full px-xs typography-monospace-small whitespace-nowrap"
 												title={conflict.filename}
 											>
 												{conflict.filename}
@@ -922,7 +925,7 @@
 										{/if}
 									{/each}
 									{#if hiddenConflictCount > 0}
-										<div class="w-full flex-1 px-2">
+										<div class="w-full flex-1 px-xs">
 											<Button
 												variant="ghost"
 												size="small"
diff --git a/web/src/routes/[handle]/[repo]/settings/access/+page.svelte b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
index c1e84edf3..002a0efa5 100644
--- a/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
@@ -68,7 +68,7 @@
 			{#each collaborators as person (person.did)}
 				<SettingsRow stack>
 					{#snippet label()}
-						<span class="flex min-w-0 items-center gap-2">
+						<span class="flex min-w-0 items-center gap-xs">
 							<Avatar did={person.did} handle={person.handle} size="regular" />
 							<span class="typography-paragraph-regular text-foreground-default">
 								{person.handle}
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
index 78d5a5c90..2b59d9fba 100644
--- a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
@@ -93,9 +93,9 @@
 			<SettingsList>
 				{#each hooks.data ?? [] as hook (hook.id)}
 					<div
-						class="flex w-full flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+						class="flex w-full flex-col gap-md sm:flex-row sm:items-start sm:justify-between"
 					>
-						<div class="flex min-w-0 flex-col gap-1">
+						<div class="flex min-w-0 flex-col gap-2xs">
 							<CodeChip class="w-fit break-all">{hook.url}</CodeChip>
 							<span
 								class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
@@ -107,7 +107,7 @@
 								Created <TimeAgo value={hook.createdAt} variant="full" />
 							</span>
 						</div>
-						<div class="flex flex-col items-end gap-4 sm:shrink-0">
+						<div class="flex flex-col items-end gap-md sm:shrink-0">
 							<Toggle
 								checked={hook.active}
 								disabled={toggle.loading && toggle.args?.[0] === hook.id}
@@ -118,7 +118,7 @@
 								}}
 							/>
 							<div
-								class="flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-end"
+								class="flex w-full items-center justify-between gap-xs sm:w-auto sm:justify-end"
 							>
 								<Button
 									icon={Inbox}
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
index 5475a6bd5..6c894d4ac 100644
--- a/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
@@ -110,7 +110,7 @@
 			description="Additional event types (issues) will be available in future updates."
 			align="start"
 		>
-			<div class="flex flex-col gap-1">
+			<div class="flex flex-col gap-2xs">
 				{#each WEBHOOK_EVENTS as event (event.id)}
 					<Checkbox bind:checked={draft.events[event.id]}>{event.label}</Checkbox>
 				{/each}
diff --git a/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
index ae49570f6..66bc5449a 100644
--- a/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
@@ -83,7 +83,7 @@
 				"You may define additional constraints on label values."
 			]}
 		>
-			<div class="flex items-center gap-6">
+			<div class="flex items-center gap-xl">
 				<Radio value="basic" bind:group={type} name="label-type">Basic</Radio>
 				<Radio value="key-value" bind:group={type} name="label-type">Key-value</Radio>
 			</div>
@@ -94,14 +94,14 @@
 		</FormRow>
 
 		<FormRow label="Scope" align="start">
-			<div class="flex flex-col gap-1">
+			<div class="flex flex-col gap-2xs">
 				<Checkbox bind:checked={issues}>Issues</Checkbox>
 				<Checkbox bind:checked={pulls}>Pull requests</Checkbox>
 			</div>
 		</FormRow>
 
 		<FormRow label="Color">
-			<div class="flex items-center gap-2">
+			<div class="flex items-center gap-xs">
 				{#each COLORS as swatch (swatch)}
 					<button
 						type="button"
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
index 69e0acebb..7f235e6a6 100644
--- a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
@@ -91,7 +91,7 @@
 		separator
 	>
 		{#snippet action()}
-			<div class="flex items-center gap-4">
+			<div class="flex items-center gap-md">
 				{#if owner}
 					<SettingsSaveBar
 						{dirty}
@@ -120,7 +120,7 @@
 						class="w-full sm:w-80"
 					/>
 				{:else}
-					<span class="typography-monospace-regular text-foreground-default">
+					<span class="typography-monospace-regular font-normal text-foreground-default">
 						{repo.spindle ?? "No spindle"}
 					</span>
 				{/if}
@@ -168,7 +168,7 @@
 				{#each secrets.data ?? [] as secret (secret.key)}
 					<SettingsRow stack>
 						{#snippet label()}
-							<span class="flex min-w-0 flex-col gap-1">
+							<span class="flex min-w-0 flex-col gap-2xs">
 								<span
 									class="typography-monospace-regular break-all text-foreground-default"
 								>
diff --git a/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
index d13bb6618..694b28238 100644
--- a/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
@@ -52,9 +52,9 @@
 >
 	<ErrorAlert label={rename.error} />
 
-	<div class="flex w-full flex-col gap-1">
+	<div class="flex w-full flex-col gap-2xs">
 		{#each stableUrls as url (url)}
-			<div class="flex items-center gap-2">
+			<div class="flex items-center gap-xs">
 				<code class="typography-monospace-regular break-all text-foreground-default">
 					{url}
 				</code>
diff --git a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
index 7c43efa3a..aeb1dc454 100644
--- a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
@@ -60,7 +60,7 @@
 	{/snippet}
 </SettingsHeader>
 
-<div class="flex w-full flex-col gap-4">
+<div class="flex w-full flex-col gap-md">
 	<p class="typography-paragraph-regular text-foreground-muted">
 		Serve a static site directly from this repository. Choose a branch and the directory
 		containing your <code class="typography-monospace-regular">index.html</code>.<br />
@@ -68,7 +68,7 @@
 	</p>
 
 	{#if deployed}
-		<div class="flex gap-2">
+		<div class="flex gap-xs">
 			<Tag color="success" icon={Check}>Live at {domain}</Tag>
 			<Button icon={ExternalLink}>Open</Button>
 		</div>
@@ -108,12 +108,12 @@
 		align="start"
 		stack
 	>
-		<div class="flex w-full flex-col gap-2 sm:w-80">
-			<div class="flex flex-col gap-1">
+		<div class="flex w-full flex-col gap-xs sm:w-80">
+			<div class="flex flex-col gap-2xs">
 				<Radio value="index" bind:group={form.type} name="site-type">Index site</Radio>
 				<CodeChip class="w-fit">{domain}</CodeChip>
 			</div>
-			<div class="flex flex-col gap-1">
+			<div class="flex flex-col gap-2xs">
 				<Radio value="subpath" bind:group={form.type} name="site-type">Sub-path site</Radio>
 				<CodeChip class="w-fit">{subPath}</CodeChip>
 			</div>
@@ -139,8 +139,10 @@
 		{#each deploys as deploy (deploy.branch)}
 			<SettingsRow>
 				{#snippet label()}
-					<span class="flex min-w-0 items-center gap-2">
-						<span class="typography-monospace-regular text-foreground-default">
+					<span class="flex min-w-0 items-center gap-xs">
+						<span
+							class="typography-monospace-regular font-normal text-foreground-default"
+						>
 							{deploy.branch}
 						</span>
 						<Tag color="success" size="small" icon={Check}>{deploy.status}</Tag>
diff --git a/web/src/routes/[handle]/[repo]/stars/+page.svelte b/web/src/routes/[handle]/[repo]/stars/+page.svelte
index 4c9aeb30e..da089db02 100644
--- a/web/src/routes/[handle]/[repo]/stars/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/stars/+page.svelte
@@ -4,16 +4,16 @@
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
 	import RoutePagination from "$lib/components/ui/RoutePagination.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 	import bonesStarredBySkeletonFixture from "$lib/bones/bones-starredby--skeleton-fixture.bones.json";
 
 	let { data } = $props();
 </script>
 
-<TabPanel class="flex flex-col gap-4">
+<Card class="flex flex-col gap-md">
 	<Pending>
 		{#snippet skeleton()}
-			<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+			<div class="grid grid-cols-1 gap-md md:grid-cols-2 lg:grid-cols-3">
 				<Bones capture={bonesStarredBySkeletonFixture} repeat={6} />
 			</div>
 		{/snippet}
@@ -21,7 +21,7 @@
 		{#if starrers.length === 0}
 			<EmptyState message="No stars yet." />
 		{:else}
-			<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+			<div class="grid grid-cols-1 gap-md md:grid-cols-2 lg:grid-cols-3">
 				{#each starrers as starrer (starrer.did)}
 					<StarredBy {...starrer} />
 				{/each}
@@ -30,4 +30,4 @@
 	</Pending>
 
 	<RoutePagination page={data.page} pageCount={data.pageCount} />
-</TabPanel>
+</Card>
diff --git a/web/src/routes/[handle]/[repo]/tags/+page.svelte b/web/src/routes/[handle]/[repo]/tags/+page.svelte
index c5aac5ad9..27ff9e0aa 100644
--- a/web/src/routes/[handle]/[repo]/tags/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/tags/+page.svelte
@@ -4,7 +4,7 @@
 	import tagList from "$lib/bones/repo-taglist--skeleton-fixture.bones.json";
 	import RoutePagination from "$lib/components/ui/RoutePagination.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 
 	let { data } = $props();
 </script>
@@ -15,11 +15,11 @@
 	{/snippet}
 	{@const repo = await data.repo}
 	{@const tags = await data.tags}
-	<TabPanel class="flex flex-col gap-4">
+	<Card class="flex flex-col gap-md">
 		{#each tags as tag (tag.name)}
 			<TagCard ownerHandle={repo.ownerHandle} repoName={repo.name} {tag} />
 		{/each}
-	</TabPanel>
+	</Card>
 </Pending>
 
-<RoutePagination page={data.page} pageCount={data.pageCount} labels class="gap-5" />
+<RoutePagination page={data.page} pageCount={data.pageCount} labels class="gap-lg" />
diff --git a/web/src/routes/[handle]/[repo]/tags/[tag]/+page.svelte b/web/src/routes/[handle]/[repo]/tags/[tag]/+page.svelte
index 829a7ddf9..c2e3dc0e2 100644
--- a/web/src/routes/[handle]/[repo]/tags/[tag]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/tags/[tag]/+page.svelte
@@ -7,13 +7,13 @@
 	let { data } = $props();
 </script>
 
-<section class="rounded-sm bg-background-default px-6 py-4">
+<section class="rounded-sm bg-background-default px-xl py-md">
 	<Pending>
 		{#snippet skeleton()}
 			<Bones capture={tagCard} />
 		{/snippet}
 		{@const repo = await data.repo}
-		<div class="flex flex-col py-2">
+		<div class="flex flex-col py-xs">
 			<TagCard ownerHandle={repo.ownerHandle} repoName={repo.name} tag={await data.tag} />
 		</div>
 	</Pending>
diff --git a/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte b/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
index 067feab15..fd3bd7edf 100644
--- a/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
@@ -9,7 +9,7 @@
 	import bonesTreeviewSkeletonFixture from "$lib/bones/bones-treeview--skeleton-fixture.bones.json";
 	import TreeHeader from "$lib/components/repo/TreeHeader.svelte";
 	import Pending from "$lib/components/ui/Pending.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 
 	let { data } = $props();
 
@@ -38,7 +38,7 @@
 
 	{@const repo = await data.repo}
 	{@const tree = await data.tree}
-	<TabPanel padded={false} class="relative mx-auto w-full p-4">
+	<Card padding="none" class="relative mx-auto w-full p-md">
 		<TreeHeader
 			ownerHandle={repo.ownerHandle}
 			repoName={repo.name}
@@ -63,7 +63,7 @@
 			path={data.path}
 			withMessage
 		/>
-	</TabPanel>
+	</Card>
 
 	{#if tree.readme}
 		<Pending>
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 07b440f8f..960489af3 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -41,9 +41,9 @@
 
 <Meta noindex title="Login" />
 
-<section class="w-full max-w-md">
-	<div class="mb-4 flex flex-col items-center">
-		<a href={appPath("/")} class="flex items-center gap-2 no-underline hover:no-underline">
+<section class="w-full max-w-compact">
+	<div class="mb-md flex flex-col items-center">
+		<a href={appPath("/")} class="flex items-center gap-xs no-underline hover:no-underline">
 			<img src="/logos/logotype.svg" alt="tangled" class="h-24 w-48 dark:invert" />
 		</a>
 		<p class="text-center typography-heading-4 font-normal text-foreground-default italic">
@@ -51,9 +51,9 @@
 		</p>
 	</div>
 
-	<form class="mt-4" onsubmit={login.run}>
+	<form class="mt-md" onsubmit={login.run}>
 		<div class="flex flex-col">
-			<label for="identifier" class="py-2 typography-paragraph-small text-foreground-default"
+			<label for="identifier" class="py-xs typography-paragraph-small text-foreground-default"
 				>Handle</label
 			>
 			<ActorInput
@@ -71,16 +71,16 @@
 				size="large"
 				class="w-full"
 			/>
-			<p class="mt-1 typography-paragraph-small text-foreground-subtle">
+			<p class="mt-2xs typography-paragraph-small 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-sm bg-background-inset px-1 typography-monospace-small text-foreground-default"
+					class="rounded-sm bg-background-inset px-2xs typography-monospace-small text-foreground-default"
 					>(.tngl.sh)</code
 				>
 				or Bluesky
 				<code
-					class="rounded-sm bg-background-inset px-1 typography-monospace-small text-foreground-default"
+					class="rounded-sm bg-background-inset px-2xs typography-monospace-small text-foreground-default"
 					>(.bsky.social)</code
 				>
 				account.
@@ -92,7 +92,7 @@
 			loading={login.loading}
 			spinnerClass="size-4"
 			aria-label={login.loading ? "Logging in" : undefined}
-			class="my-2 mt-6 w-full typography-paragraph-large disabled:opacity-100"
+			class="my-xs mt-xl w-full typography-paragraph-large disabled:opacity-100"
 		>
 			Login
 		</Button>
@@ -108,9 +108,9 @@
 
 	{#if banner}
 		<div
-			class="my-2 flex gap-2 rounded-sm border border-border-danger bg-background-danger-subtle px-3 py-2 text-foreground-danger shadow-xs"
+			class="my-xs flex gap-xs rounded-sm border border-border-danger bg-background-danger-subtle px-sm py-xs text-foreground-danger"
 		>
-			<span class="py-1" aria-hidden="true"><CircleAlert class="size-4" /></span>
+			<span class="py-2xs" aria-hidden="true"><CircleAlert class="size-3.5" /></span>
 			<div>
 				<h5 class="font-medium">Login error</h5>
 				<p class="typography-paragraph-small">{banner}</p>
diff --git a/web/src/routes/notifications/+page.svelte b/web/src/routes/notifications/+page.svelte
index 2d2140ed5..16d405379 100644
--- a/web/src/routes/notifications/+page.svelte
+++ b/web/src/routes/notifications/+page.svelte
@@ -47,8 +47,8 @@
 
 <Meta noindex title="Notifications" />
 
-<section class="mx-auto flex w-full max-w-5xl flex-col gap-4 px-2 py-8 md:px-4">
-	<h1 class="flex items-center gap-2 typography-heading-3">Notifications</h1>
+<section class="mx-auto flex w-full max-w-page flex-col gap-md px-xs py-2xl md:px-md">
+	<h1 class="flex items-center gap-xs typography-heading-3">Notifications</h1>
 
 	<NotificationToolbar
 		readFilter={data.readFilter}
@@ -67,7 +67,7 @@
 		/>
 	</div>
 
-	<div class="hidden md:grid md:gap-6 {showSocial ? 'md:grid-cols-2' : 'md:grid-cols-1'}">
+	<div class="hidden md:grid md:gap-xl {showSocial ? 'md:grid-cols-2' : 'md:grid-cols-1'}">
 		<NotificationList
 			{loading}
 			notifications={work}
diff --git a/web/src/routes/oauth/callback/+page.svelte b/web/src/routes/oauth/callback/+page.svelte
index 4fd848404..cf45fda03 100644
--- a/web/src/routes/oauth/callback/+page.svelte
+++ b/web/src/routes/oauth/callback/+page.svelte
@@ -38,7 +38,9 @@
 <Meta noindex title="Signing in" />
 
 {#if auth.state.kind === "failed"}
-	<section class="mx-auto flex max-w-md flex-col items-center gap-4 px-7 py-16 text-center">
+	<section
+		class="mx-auto flex max-w-compact flex-col items-center gap-md px-7 py-5xl text-center"
+	>
 		<p class="typography-paragraph-large text-foreground-danger">{auth.state.message}</p>
 		<a href={appPath("/login")} class="inline-flex underline">Try again</a>
 	</section>
diff --git a/web/src/routes/repo/new/+page.svelte b/web/src/routes/repo/new/+page.svelte
index f1665d3cc..a7f2547ec 100644
--- a/web/src/routes/repo/new/+page.svelte
+++ b/web/src/routes/repo/new/+page.svelte
@@ -19,12 +19,12 @@
 
 <Meta noindex title="New repository" />
 
-<div class="mx-auto w-full max-w-2xl px-4 py-12">
-	<div class="px-6 py-2">
+<div class="mx-auto w-full max-w-medium px-md py-4xl">
+	<div class="px-xl py-xs">
 		<h1 class="typography-heading-4 font-bold text-foreground-default">
 			Create a new repository
 		</h1>
-		<p class="mb-1 typography-paragraph-small text-foreground-subtle">
+		<p class="mb-2xs typography-paragraph-small text-foreground-subtle">
 			Repositories contain a project's files and version history. All repositories are
 			publicly accessible.
 		</p>
@@ -32,7 +32,7 @@
 
 	<Card padding="none">
 		<RepoCreationForm
-			class="p-6"
+			class="p-xl"
 			initial={{ name: "", description: "", defaultBranch: "main" }}
 			delegationDid={data.publicConfig.delegationDid}
 			submitLabel="Create repository"
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index c6edc1c83..6ea07ea0c 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -41,7 +41,7 @@
 
 <Meta noindex title="Settings" />
 
-<div class="flex w-full flex-col items-center md:px-4 md:pt-16 md:pb-32">
+<div class="flex w-full flex-col items-center md:px-md md:pt-5xl md:pb-32">
 	<div class="flex w-full max-w-300 flex-col">
 		<SettingsPanel {items} {active}>
 			{@render children()}
diff --git a/web/src/routes/settings/emails/new/+page.svelte b/web/src/routes/settings/emails/new/+page.svelte
index 7a708036b..8f7a9abf5 100644
--- a/web/src/routes/settings/emails/new/+page.svelte
+++ b/web/src/routes/settings/emails/new/+page.svelte
@@ -40,7 +40,7 @@
 >
 	{#if sentTo}
 		<SettingsList padding="small">
-			<div class="flex flex-col gap-2">
+			<div class="flex flex-col gap-xs">
 				<p class="typography-paragraph-regular text-foreground-default">
 					A verification email was sent to <span class="font-medium">{sentTo}</span>.
 				</p>
diff --git a/web/src/routes/settings/profile/handle/+page.svelte b/web/src/routes/settings/profile/handle/+page.svelte
index 63f79a934..d3caebb0a 100644
--- a/web/src/routes/settings/profile/handle/+page.svelte
+++ b/web/src/routes/settings/profile/handle/+page.svelte
@@ -38,8 +38,8 @@
 					bind:value={handle}
 					placeholder="handle"
 					suffix={SUFFIX}
-					suffixClass="self-stretch border-l border-border-default bg-background-muted px-2 py-1 text-foreground-muted"
-					class="gap-0 overflow-hidden py-0 pr-0"
+					suffixClass="self-stretch border-l border-border-default bg-background-muted px-xs py-2xs text-foreground-muted"
+					class="gap-none overflow-hidden py-none pr-none"
 				/>
 			{/if}
 		</FormRow>
diff --git a/web/src/routes/signup/+page.svelte b/web/src/routes/signup/+page.svelte
index a86f4fb03..0ef94641a 100644
--- a/web/src/routes/signup/+page.svelte
+++ b/web/src/routes/signup/+page.svelte
@@ -48,9 +48,9 @@
 
 <Meta noindex title="Sign up" />
 
-<section class="w-full max-w-md">
-	<div class="mb-4 flex flex-col items-center">
-		<a href={appPath("/")} class="flex items-center gap-2 no-underline hover:no-underline">
+<section class="w-full max-w-compact">
+	<div class="mb-md flex flex-col items-center">
+		<a href={appPath("/")} class="flex items-center gap-xs no-underline hover:no-underline">
 			<img src="/logos/logotype.svg" alt="tangled" class="h-24 w-48 dark:invert" />
 		</a>
 		<p class="text-center typography-heading-4 font-normal text-foreground-default italic">
@@ -59,7 +59,7 @@
 	</div>
 
 	{#if sent}
-		<div class="mt-4 flex flex-col gap-2" role="status">
+		<div class="mt-md flex flex-col gap-xs" role="status">
 			<h1 class="typography-heading-2 text-foreground-default">Check your email</h1>
 			<p class="typography-paragraph-regular text-foreground-default">
 				A verification email was sent to <span class="font-medium">{sentEmail}</span>.
@@ -73,10 +73,10 @@
 					Email sent again.
 				</p>
 			{:else}
-				<ErrorAlert label={resend.error} class="mt-2" />
+				<ErrorAlert label={resend.error} class="mt-xs" />
 				<button
 					type="button"
-					class="mt-1 self-start text-foreground-default underline disabled:cursor-not-allowed disabled:text-foreground-subtle"
+					class="mt-2xs self-start text-foreground-default underline disabled:cursor-not-allowed disabled:text-foreground-subtle"
 					disabled={resend.loading}
 					onclick={resend.run}
 				>
@@ -84,16 +84,16 @@
 				</button>
 			{/if}
 
-			<Button href={appPath("/")} class="my-2 mt-4 w-full typography-paragraph-large">
+			<Button href={appPath("/")} class="my-xs mt-md w-full typography-paragraph-large">
 				Back to home
 			</Button>
 		</div>
 	{:else}
-		<form class="mt-4" onsubmit={submit.run}>
+		<form class="mt-md" onsubmit={submit.run}>
 			<div class="flex flex-col">
 				<label
 					for="signup-email"
-					class="py-2 typography-paragraph-small text-foreground-default"
+					class="py-xs typography-paragraph-small text-foreground-default"
 				>
 					Email
 				</label>
@@ -109,13 +109,13 @@
 					error={!!submit.error}
 					class="w-full"
 				/>
-				<p class="mt-1 typography-paragraph-small text-foreground-subtle">
+				<p class="mt-2xs typography-paragraph-small text-foreground-subtle">
 					We'll email you a link to pick your username and password.
 				</p>
 			</div>
 
 			{#if turnstileSiteKey}
-				<div class="mt-4">
+				<div class="mt-md">
 					<Turnstile
 						siteKey={turnstileSiteKey}
 						onToken={(token) => (turnstileToken = token)}
@@ -123,13 +123,13 @@
 					/>
 				</div>
 			{:else}
-				<p class="mt-4 typography-paragraph-small text-foreground-danger" role="alert">
+				<p class="mt-md typography-paragraph-small text-foreground-danger" role="alert">
 					Signup is temporarily unavailable — the verification service is not configured.
 				</p>
 			{/if}
 
 			{#if submit.error}
-				<ErrorAlert label={submit.error} class="mt-4" />
+				<ErrorAlert label={submit.error} class="mt-md" />
 			{/if}
 
 			<Button
@@ -138,7 +138,7 @@
 				disabled={!valid || !turnstileToken}
 				spinnerClass="size-4"
 				aria-label={submit.loading ? "Signing up" : undefined}
-				class="my-2 mt-6 w-full typography-paragraph-large disabled:opacity-100"
+				class="my-xs mt-xl w-full typography-paragraph-large disabled:opacity-100"
 			>
 				Sign up
 			</Button>
diff --git a/web/src/routes/signup/verify/+page.svelte b/web/src/routes/signup/verify/+page.svelte
index 9054c174b..0716c6e92 100644
--- a/web/src/routes/signup/verify/+page.svelte
+++ b/web/src/routes/signup/verify/+page.svelte
@@ -58,9 +58,9 @@
 
 <Meta noindex title="Complete signup" />
 
-<section class="w-full max-w-md">
-	<div class="mb-4 flex flex-col items-center">
-		<a href={appPath("/")} class="flex items-center gap-2 no-underline hover:no-underline">
+<section class="w-full max-w-compact">
+	<div class="mb-md flex flex-col items-center">
+		<a href={appPath("/")} class="flex items-center gap-xs no-underline hover:no-underline">
 			<img src="/logos/logotype.svg" alt="tangled" class="h-24 w-48 dark:invert" />
 		</a>
 		<p class="text-center typography-heading-4 font-normal text-foreground-default italic">
@@ -69,7 +69,7 @@
 	</div>
 
 	{#if done}
-		<div class="mt-4 flex flex-col gap-2" role="status">
+		<div class="mt-md flex flex-col gap-xs" role="status">
 			<h1 class="typography-heading-2 text-foreground-default">Account created</h1>
 			<p class="typography-paragraph-regular text-foreground-muted">
 				Your handle is <span class="font-medium text-foreground-default">{done.handle}</span
@@ -78,26 +78,26 @@
 			<p class="typography-paragraph-regular text-foreground-muted">
 				Sign in to get started — you'll just need to enter your password once more.
 			</p>
-			<Button href={appPath("/login")} class="my-2 mt-6 w-full typography-paragraph-large">
+			<Button href={appPath("/login")} class="my-xs mt-xl w-full typography-paragraph-large">
 				Sign in
 			</Button>
 		</div>
 	{:else if missingToken}
-		<div class="mt-4 flex flex-col gap-2">
+		<div class="mt-md flex flex-col gap-xs">
 			<h1 class="typography-heading-2 text-foreground-default">Invalid link</h1>
 			<p class="typography-paragraph-regular text-foreground-muted">
 				This signup link is missing its verification token.
 			</p>
-			<Button href={appPath("/signup")} class="my-2 mt-6 w-full typography-paragraph-large">
+			<Button href={appPath("/signup")} class="my-xs mt-xl w-full typography-paragraph-large">
 				Get a new link
 			</Button>
 		</div>
 	{:else}
-		<form class="mt-4" onsubmit={submit.run}>
+		<form class="mt-md" onsubmit={submit.run}>
 			<div class="flex flex-col">
 				<label
 					for="signup-username"
-					class="py-2 typography-paragraph-small text-foreground-default"
+					class="py-xs typography-paragraph-small text-foreground-default"
 				>
 					Username
 				</label>
@@ -121,15 +121,15 @@
 					suffixInline
 					suffixClass="-ml-2.5 text-foreground-muted"
 				/>
-				<p class="mt-1 typography-paragraph-small text-foreground-subtle">
+				<p class="mt-2xs typography-paragraph-small text-foreground-subtle">
 					Lowercase letters, digits, and hyphens; 4-63 characters.
 				</p>
 			</div>
 
-			<div class="mt-4 flex flex-col">
+			<div class="mt-md flex flex-col">
 				<label
 					for="signup-password"
-					class="py-2 typography-paragraph-small text-foreground-default"
+					class="py-xs typography-paragraph-small text-foreground-default"
 				>
 					Password
 				</label>
@@ -150,10 +150,10 @@
 			<input type="hidden" name="token" value={page.url.searchParams.get("token") ?? ""} />
 
 			{#if submit.error}
-				<ErrorAlert label={submit.error} class="mt-4" />
+				<ErrorAlert label={submit.error} class="mt-md" />
 				<a
 					href={appPath("/signup")}
-					class="mt-2 self-start text-foreground-default underline">Get a new link</a
+					class="mt-xs self-start text-foreground-default underline">Get a new link</a
 				>
 			{/if}
 
@@ -163,7 +163,7 @@
 				disabled={!valid}
 				spinnerClass="size-4"
 				aria-label={submit.loading ? "Creating account" : undefined}
-				class="my-2 mt-6 w-full typography-paragraph-large disabled:opacity-100"
+				class="my-xs mt-xl w-full typography-paragraph-large disabled:opacity-100"
 			>
 				Create account
 			</Button>
diff --git a/web/src/routes/strings/[handle]/[rkey]/+page.svelte b/web/src/routes/strings/[handle]/[rkey]/+page.svelte
index 9984e5b4d..b503ab158 100644
--- a/web/src/routes/strings/[handle]/[rkey]/+page.svelte
+++ b/web/src/routes/strings/[handle]/[rkey]/+page.svelte
@@ -11,7 +11,7 @@
 {#key `${page.params.handle}/${page.params.rkey}`}
 	<Pending>
 		{#snippet skeleton()}
-			<div class="mx-auto w-full max-w-5xl py-6">
+			<div class="mx-auto w-full max-w-page py-xl">
 				<Bones capture={stringViewCode} />
 			</div>
 		{/snippet}
diff --git a/web/src/routes/strings/[handle]/[rkey]/StringPageContent.svelte b/web/src/routes/strings/[handle]/[rkey]/StringPageContent.svelte
index 9ae1da922..5eb7edad5 100644
--- a/web/src/routes/strings/[handle]/[rkey]/StringPageContent.svelte
+++ b/web/src/routes/strings/[handle]/[rkey]/StringPageContent.svelte
@@ -73,9 +73,11 @@
 />
 
 {#if isEditing}
-	<div class="mx-auto w-full max-w-5xl py-6">
-		<div class="mb-4 flex flex-col gap-2 px-4">
-			<h1 class="inline-flex items-center gap-2 typography-heading-4 text-foreground-default">
+	<div class="mx-auto w-full max-w-page py-xl">
+		<div class="mb-md flex flex-col gap-xs px-md">
+			<h1
+				class="inline-flex items-center gap-xs typography-heading-4 text-foreground-default"
+			>
 				<LineSquiggle />
 				Edit string
 			</h1>
@@ -95,7 +97,7 @@
 		/>
 	</div>
 {:else}
-	<div class="mx-auto flex w-full max-w-5xl flex-col gap-6 py-6">
+	<div class="mx-auto flex w-full max-w-page flex-col gap-xl py-xl">
 		{#if removeAction.error}
 			<ErrorAlert label={removeAction.error} />
 		{/if}
@@ -120,7 +122,7 @@
 			subjectUri={loaded.uri}
 			subjectCid={loaded.cid}
 			{markup}
-			class="mt-2"
+			class="mt-xs"
 		/>
 	</div>
 {/if}
diff --git a/web/src/routes/strings/new/+page.svelte b/web/src/routes/strings/new/+page.svelte
index a0a3fed2f..8b78b447c 100644
--- a/web/src/routes/strings/new/+page.svelte
+++ b/web/src/routes/strings/new/+page.svelte
@@ -16,16 +16,16 @@
 
 <Meta noindex title="New string" />
 
-<div class="mx-auto w-full max-w-5xl px-4 py-12">
-	<div class="flex flex-col gap-2 p-2">
-		<h1 class="inline-flex items-center gap-2 typography-heading-4 text-foreground-default">
+<div class="mx-auto w-full max-w-page px-md py-4xl">
+	<div class="flex flex-col gap-xs p-xs">
+		<h1 class="inline-flex items-center gap-xs typography-heading-4 text-foreground-default">
 			<LineSquiggle />
 			Create a new string
 		</h1>
 		<p class="text-foreground-muted">Store and share code snippets with ease.</p>
 	</div>
 
-	<div class="mt-4">
+	<div class="mt-md">
 		<StringForm mode="create" bobbinUrl={data.publicConfig.bobbinUrl} onsaved={handleSaved} />
 	</div>
 </div>
diff --git a/web/src/routes/verify/email/+page.svelte b/web/src/routes/verify/email/+page.svelte
index 9a5b001d7..2c64ec1dd 100644
--- a/web/src/routes/verify/email/+page.svelte
+++ b/web/src/routes/verify/email/+page.svelte
@@ -37,11 +37,10 @@
 	});
 </script>
 
-<div class="flex min-h-[70svh] w-full items-center justify-center px-4 py-8">
+<div class="flex min-h-[70svh] w-full items-center justify-center px-md py-2xl">
 	<Card
-		shadow
 		padding="none"
-		class="flex w-full max-w-md flex-col items-center gap-4 p-8 text-center"
+		class="flex w-full max-w-compact flex-col items-center gap-md p-2xl text-center"
 	>
 		{#if state.kind === "verifying"}
 			<span class="typography-paragraph-regular text-foreground-muted"
diff --git a/web/src/routes/welcome/+page.svelte b/web/src/routes/welcome/+page.svelte
index 4a71c05b2..2679f325f 100644
--- a/web/src/routes/welcome/+page.svelte
+++ b/web/src/routes/welcome/+page.svelte
@@ -204,9 +204,9 @@
 
 <Meta noindex title="Welcome" />
 
-<div class="flex min-h-screen w-full items-start justify-center px-4 pt-16 pb-8">
-	<main class="w-full max-w-3xl">
-		<h1 class="mb-8 flex place-content-center">
+<div class="flex min-h-screen w-full items-start justify-center px-md pt-5xl pb-2xl">
+	<main class="w-full max-w-wide">
+		<h1 class="mb-2xl flex place-content-center">
 			<Logo wordmark class="h-10" />
 		</h1>
 
@@ -237,7 +237,7 @@
 		</WelcomeCard>
 
 		{#if step < LAST_STEP}
-			<div class="mt-4 flex justify-center">
+			<div class="mt-md flex justify-center">
 				<Button
 					variant="ghost"
 					icon={X}