From 488ba7c829fe92283136309db8debc2f7fd1686f Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Sat, 19 Sep 2026 03:05:31 +0200
Subject: [PATCH] web/repo: rescale repo, tree and commit views

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/BlobHeader.svelte | 26 +++---
 web/src/lib/components/repo/BlobView.svelte   | 14 ++--
 web/src/lib/components/repo/BranchList.svelte | 10 ++-
 .../lib/components/repo/BranchTable.svelte    | 26 +++---
 .../lib/components/repo/CloneDropdown.svelte  | 22 ++---
 .../components/repo/CommitBodyToggle.svelte   |  4 +-
 .../lib/components/repo/CommitHeader.svelte   | 10 +--
 web/src/lib/components/repo/CommitList.svelte |  8 +-
 .../lib/components/repo/CommitLogView.svelte  | 20 ++---
 web/src/lib/components/repo/CommitRow.svelte  | 71 ++++++++++------
 web/src/lib/components/repo/CommitRows.svelte |  2 +-
 .../lib/components/repo/CommitSignOff.svelte  |  8 +-
 web/src/lib/components/repo/CommitView.svelte |  8 +-
 .../lib/components/repo/DiffCodeView.svelte   |  2 +-
 .../lib/components/repo/DiffFileHeader.svelte |  4 +-
 .../lib/components/repo/DiffFileTree.svelte   | 10 +--
 .../lib/components/repo/DiffStatPill.svelte   |  8 +-
 web/src/lib/components/repo/DiffView.svelte   | 80 +++++++++++++------
 web/src/lib/components/repo/EmptyRepo.svelte  | 18 ++---
 .../lib/components/repo/FileCardHeader.svelte |  4 +-
 .../components/repo/FileHistoryView.svelte    | 24 +++---
 .../lib/components/repo/FilePathChip.svelte   |  2 +-
 web/src/lib/components/repo/FileTree.svelte   |  8 +-
 .../components/repo/LabelPanel.stories.svelte | 12 +--
 web/src/lib/components/repo/LabelPanel.svelte | 14 ++--
 .../lib/components/repo/LanguageBar.svelte    | 10 ++-
 .../components/repo/LastCommitPanel.svelte    |  6 +-
 .../lib/components/repo/PanelHeader.svelte    | 10 +--
 web/src/lib/components/repo/Readme.svelte     | 12 +--
 web/src/lib/components/repo/RefChip.svelte    |  2 +-
 .../lib/components/repo/RefSelector.svelte    |  8 +-
 .../components/repo/RepoCard.stories.svelte   | 27 +++++--
 web/src/lib/components/repo/RepoCard.svelte   | 12 +--
 .../components/repo/RepoCardContent.svelte    | 28 ++++---
 .../components/repo/RepoCreationForm.svelte   | 32 ++++----
 .../lib/components/repo/RepoForkForm.svelte   | 10 +--
 web/src/lib/components/repo/RepoHeader.svelte | 28 +++----
 .../lib/components/repo/RepoIndexView.svelte  | 22 ++---
 .../components/repo/RepoReadmeSkeleton.svelte |  2 +-
 .../lib/components/repo/RepoToolbar.svelte    |  6 +-
 .../repo/StarredBy.bones.stories.svelte       |  2 +-
 web/src/lib/components/repo/StarredBy.svelte  |  2 +-
 .../components/repo/StarredByContent.svelte   |  4 +-
 web/src/lib/components/repo/TagCard.svelte    | 20 ++---
 .../components/repo/TagList.stories.svelte    |  2 +-
 web/src/lib/components/repo/TagList.svelte    |  4 +-
 web/src/lib/components/repo/TopicList.svelte  |  6 +-
 web/src/lib/components/repo/TreeHeader.svelte |  6 +-
 .../repo/TreeView.bones.stories.svelte        |  6 +-
 49 files changed, 385 insertions(+), 297 deletions(-)

diff --git a/web/src/lib/components/repo/BlobHeader.svelte b/web/src/lib/components/repo/BlobHeader.svelte
index c7fc1f633..864d1d80b 100644
--- a/web/src/lib/components/repo/BlobHeader.svelte
+++ b/web/src/lib/components/repo/BlobHeader.svelte
@@ -70,10 +70,10 @@
 </script>
 
 <div
-	class="mb-2 flex flex-col gap-3 typography-paragraph-regular md:mb-4 md:grid md:grid-cols-[minmax(0,1fr)_auto] md:items-center md:gap-4"
+	class="mb-xs flex flex-col gap-sm typography-paragraph-regular md:mb-md md:grid md:grid-cols-[minmax(0,1fr)_auto] md:items-center md:gap-md"
 >
-	<div class="flex min-w-0 items-center justify-between gap-3 md:justify-start">
-		<div class="flex min-w-0 items-center gap-2">
+	<div class="flex min-w-0 items-center justify-between gap-sm md:justify-start">
+		<div class="flex min-w-0 items-center gap-xs">
 			{#if repo}
 				<RepoCrumbs
 					ownerHandle={repo.ownerHandle}
@@ -88,7 +88,7 @@
 			{/if}
 			{#if timeLabel}
 				<span
-					class="flex shrink-0 items-center gap-2 typography-paragraph-small text-foreground-muted"
+					class="flex shrink-0 items-center gap-xs typography-paragraph-small text-foreground-muted"
 				>
 					<Separator variant="dot" />
 					<span class="whitespace-nowrap">{timeLabel}</span>
@@ -100,7 +100,7 @@
 		</div>
 
 		<div
-			class="flex shrink-0 items-center gap-2 typography-paragraph-small text-foreground-muted"
+			class="flex shrink-0 items-center gap-xs typography-paragraph-small text-foreground-muted"
 		>
 			{#if sizeLabel}
 				<span>{sizeLabel}</span>
@@ -114,12 +114,14 @@
 		</div>
 	</div>
 
-	<div class="flex flex-col gap-4 whitespace-nowrap md:flex-row md:items-center md:gap-2">
+	<div class="flex flex-col gap-md whitespace-nowrap md:flex-row md:items-center md:gap-xs">
 		{#if repo || (language && languageColor)}
-			<div class="flex items-center gap-4 max-md:justify-between md:flex-row-reverse md:px-2">
+			<div
+				class="flex items-center gap-md max-md:justify-between md:flex-row-reverse md:px-xs"
+			>
 				{#if language && languageColor}
 					<div
-						class="flex w-fit items-center gap-2 px-1 typography-paragraph-small md:px-0"
+						class="flex w-fit items-center gap-xs px-2xs typography-paragraph-small md:px-none"
 					>
 						<ColorBall color={languageColor} />
 						{language}
@@ -137,21 +139,21 @@
 		{/if}
 
 		{#if kind !== "submodule"}
-			<div class="flex items-center gap-2 max-md:justify-between">
+			<div class="flex items-center gap-xs max-md:justify-between">
 				{#if showWrapToggle || showBlameToggle || hasRenderedView(kind)}
-					<div class="flex items-center gap-2">
+					<div class="flex items-center gap-xs">
 						{#if showBlameToggle}
 							<Checkbox
 								bind:checked={blame}
 								aria-busy={blameLoading}
 								title={blameError ?? undefined}
-								class="px-2 text-foreground-muted"
+								class="px-xs text-foreground-muted"
 							>
 								{blameLoading ? "Blame…" : "Blame"}
 							</Checkbox>
 						{/if}
 						{#if showWrapToggle}
-							<Checkbox bind:checked={wrap} class="px-2 text-foreground-muted">
+							<Checkbox bind:checked={wrap} class="px-xs text-foreground-muted">
 								Wrap
 							</Checkbox>
 						{/if}
diff --git a/web/src/lib/components/repo/BlobView.svelte b/web/src/lib/components/repo/BlobView.svelte
index 11fac4bbe..d2b68553b 100644
--- a/web/src/lib/components/repo/BlobView.svelte
+++ b/web/src/lib/components/repo/BlobView.svelte
@@ -10,7 +10,7 @@
 	import { baseName, fileHistoryHref } from "$lib/components/repo/urls";
 	import { createBlame, type BlameSource } from "$lib/components/repo/blame/request.svelte";
 	import Separator from "$lib/components/ui/Separator.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 
 	interface Props {
 		ownerHandle: string;
@@ -121,7 +121,7 @@
 	const showWrap = $derived(textViewActive && (overflows || wrap));
 </script>
 
-<TabPanel padded={false} class="relative mx-auto w-full p-4">
+<Card padding="none" class="relative mx-auto w-full p-md">
 	<BlobHeader
 		path={blob.path}
 		repo={repoName ? { ownerHandle, repoName, ref: blob.ref } : null}
@@ -143,13 +143,13 @@
 	/>
 
 	{#if blameRequest.error}
-		<p role="alert" class="px-4 py-2 text-foreground-danger">{blameRequest.error}</p>
+		<p role="alert" class="px-md py-xs text-foreground-danger">{blameRequest.error}</p>
 	{/if}
 
 	{#if blob.lastCommit && repoName}
 		<LastCommitPanel {ownerHandle} {repoName} commit={blob.lastCommit} />
 	{:else}
-		<Separator class="my-4" />
+		<Separator class="my-md" />
 	{/if}
 
 	{#if blob.kind === "submodule" && blob.submodule}
@@ -162,7 +162,7 @@
 			>.
 		</p>
 	{:else if blob.fileTooLarge}
-		<p class="py-8 text-center text-foreground-muted">
+		<p class="py-2xl text-center text-foreground-muted">
 			This file is too large to render.
 			<a href={rawHref} class="text-foreground-default no-underline hover:underline"
 				>View raw.</a
@@ -202,8 +202,8 @@
 			/>
 		</div>
 	{:else}
-		<p class="py-8 text-center text-foreground-muted">
+		<p class="py-2xl text-center text-foreground-muted">
 			Previews are not supported for this file type.
 		</p>
 	{/if}
-</TabPanel>
+</Card>
diff --git a/web/src/lib/components/repo/BranchList.svelte b/web/src/lib/components/repo/BranchList.svelte
index 006edf28f..75126be2a 100644
--- a/web/src/lib/components/repo/BranchList.svelte
+++ b/web/src/lib/components/repo/BranchList.svelte
@@ -19,10 +19,10 @@
 	const base = $derived(`/${ownerHandle}/${repoName}`);
 </script>
 
-<div class="flex flex-col gap-1">
+<div class="flex flex-col gap-2xs">
 	{#each branches as branch (branch.name)}
 		<div class="flex min-h-8 items-center justify-between overflow-hidden">
-			<div class="flex min-w-0 flex-1 items-center gap-2">
+			<div class="flex min-w-0 flex-1 items-center gap-xs">
 				<a
 					href={resolve(`${base}/tree/${encodeURIComponent(branch.name)}` as "/")}
 					class="truncate text-foreground-default no-underline hover:underline"
@@ -37,7 +37,9 @@
 					/>
 				{/if}
 				{#if branch.isDefault}
-					<Tag color="gray" class="shrink-0 typography-monospace-regular">Default</Tag>
+					<Tag color="gray" class="shrink-0 typography-monospace-regular font-normal"
+						>Default</Tag
+					>
 				{/if}
 			</div>
 			{#if branch.name !== currentRef}
@@ -48,7 +50,7 @@
 					href={resolve(
 						`${base}/compare/${encodeURIComponent(currentRef)}...${encodeURIComponent(branch.name)}` as "/"
 					)}
-					class="ml-2 shrink-0"
+					class="ml-xs shrink-0"
 					title="Compare branches or tags"
 				>
 					Compare
diff --git a/web/src/lib/components/repo/BranchTable.svelte b/web/src/lib/components/repo/BranchTable.svelte
index 395f757b5..a9fa39289 100644
--- a/web/src/lib/components/repo/BranchTable.svelte
+++ b/web/src/lib/components/repo/BranchTable.svelte
@@ -19,38 +19,38 @@
 	const subject = (message?: string) => message?.split("\n\n")[0] ?? "";
 </script>
 
-<section id="branches-table" class="overflow-x-auto rounded-sm bg-background-default px-6 py-4">
-	<h2 class="mb-4 typography-paragraph-regular font-bold">Branches</h2>
+<section id="branches-table" class="overflow-x-auto rounded-sm bg-background-default px-xl py-md">
+	<h2 class="mb-md typography-paragraph-regular font-bold">Branches</h2>
 
 	{#if branches.length === 0}
-		<p class="py-6 text-center text-foreground-subtle">This repository has no branches.</p>
+		<p class="py-xl text-center text-foreground-subtle">This repository has no branches.</p>
 	{:else}
 		<div class="hidden divide-y divide-border-default md:flex md:flex-col">
-			<div class="grid grid-cols-14 gap-4">
+			<div class="grid grid-cols-14 gap-md">
 				<div
-					class="col-span-4 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
+					class="col-span-4 py-xs text-left typography-paragraph-regular font-bold text-foreground-muted"
 				>
 					Name
 				</div>
 				<div
-					class="col-span-2 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
+					class="col-span-2 py-xs text-left typography-paragraph-regular font-bold text-foreground-muted"
 				>
 					Commit
 				</div>
 				<div
-					class="col-span-6 py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
+					class="col-span-6 py-xs text-left typography-paragraph-regular font-bold text-foreground-muted"
 				>
 					Message
 				</div>
 				<div
-					class="col-span-2 justify-self-end py-2 text-left typography-paragraph-regular font-bold text-foreground-muted"
+					class="col-span-2 justify-self-end py-xs text-left typography-paragraph-regular font-bold text-foreground-muted"
 				>
 					Date
 				</div>
 			</div>
 			{#each branches as branch (branch.name)}
-				<div class="grid grid-cols-14 gap-4 py-3">
-					<div class="col-span-4 flex items-center gap-2 align-top">
+				<div class="grid grid-cols-14 gap-md py-sm">
+					<div class="col-span-4 flex items-center gap-xs align-top">
 						<a
 							href={treeHref(branch.name)}
 							class="truncate text-foreground-default no-underline hover:underline"
@@ -81,11 +81,11 @@
 		<div class="md:hidden">
 			{#each branches as branch, index (branch.name)}
 				<div
-					class="p-2 {index < branches.length - 1
+					class="p-xs {index < branches.length - 1
 						? 'border-b border-border-default'
 						: ''}"
 				>
-					<div class="flex items-center gap-2">
+					<div class="flex items-center gap-xs">
 						<a
 							href={treeHref(branch.name)}
 							class="truncate font-medium text-foreground-default no-underline hover:underline"
@@ -97,7 +97,7 @@
 						{/if}
 					</div>
 					<div
-						class="mt-1 flex items-center gap-1 typography-paragraph-small text-foreground-muted"
+						class="mt-2xs flex items-center gap-2xs typography-paragraph-small text-foreground-muted"
 					>
 						<a
 							href={logHref(branch.name)}
diff --git a/web/src/lib/components/repo/CloneDropdown.svelte b/web/src/lib/components/repo/CloneDropdown.svelte
index a9a48f312..04708bdb9 100644
--- a/web/src/lib/components/repo/CloneDropdown.svelte
+++ b/web/src/lib/components/repo/CloneDropdown.svelte
@@ -4,6 +4,7 @@
 	import Checkbox from "$lib/components/ui/Checkbox.svelte";
 	import CopyButton from "$lib/components/ui/CopyButton.svelte";
 	import Dropdown from "$lib/components/ui/Dropdown.svelte";
+	import { buttonIcon } from "$lib/components/ui/Button.svelte";
 	import type { RepoInfo } from "$lib/components/repo/types";
 
 	interface Props {
@@ -50,12 +51,13 @@
 <Dropdown
 	variant="button"
 	buttonVariant="primary"
+	insetShadow
 	align="right"
 	label="Clone this repository"
-	menuClass="w-96 divide-y-0 p-4"
+	menuClass="w-96 divide-y-0 p-md"
 >
 	{#snippet trigger()}
-		<Download class="size-4" aria-hidden="true" />
+		<Download class={buttonIcon()} aria-hidden="true" />
 		<span class="hidden md:inline">Code</span>
 	{/snippet}
 
@@ -75,40 +77,40 @@
 
 	{#each urls as entry (entry.label)}
 		{@const value = permalink && entry.perma ? entry.perma : entry.handle}
-		<div class="mt-4">
-			<span class="mb-1 block typography-paragraph-small font-medium text-foreground-muted"
+		<div class="mt-md">
+			<span class="mb-2xs block typography-paragraph-small font-medium text-foreground-muted"
 				>{entry.label}</span
 			>
 			<div
 				class="flex items-stretch divide-x divide-border-default rounded-sm border border-border-default"
 			>
 				<span
-					class="flex-1 overflow-x-auto bg-background-inset px-3 py-2 typography-monospace-small whitespace-nowrap text-foreground-default select-all"
+					class="flex-1 overflow-x-auto bg-background-inset px-sm py-xs typography-monospace-small whitespace-nowrap text-foreground-default select-all"
 					>{value}</span
 				>
 				<CopyButton
 					{value}
 					label={`Copy ${entry.label} clone url`}
 					title="Copy to clipboard"
-					class="rounded-none px-3 py-2 text-foreground-subtle hover:text-foreground-default"
+					class="rounded-none px-sm py-xs text-foreground-subtle hover:text-foreground-default"
 				/>
 			</div>
 		</div>
 	{/each}
 
-	<p class="mt-2 typography-paragraph-small text-foreground-subtle">
+	<p class="mt-xs typography-paragraph-small text-foreground-subtle">
 		For self-hosted knots, clone URLs may differ based on your setup.
 	</p>
 
 	<!-- archives come from bobbin, so these are external links -->
-	<div class="mt-4 flex gap-2">
+	<div class="mt-md flex gap-xs">
 		{#each [{ format: "tar.gz" }, { format: "zip" }] as const as archive (archive.format)}
 			<a
 				href={archiveUrl(archive.format)}
 				rel="external noopener noreferrer"
-				class="flex flex-1 items-center justify-center gap-2 rounded-sm border border-border-default px-2 py-1.5 typography-paragraph-small text-foreground-default no-underline hover:bg-background-subtle hover:no-underline"
+				class="flex flex-1 items-center justify-center gap-xs rounded-sm border border-border-default px-xs py-1.5 typography-paragraph-small text-foreground-default no-underline hover:bg-background-subtle hover:no-underline"
 			>
-				<Download class="size-4" aria-hidden="true" />
+				<Download class="size-3.5" aria-hidden="true" />
 				{archive.format === "zip" ? ".zip" : archive.format}
 			</a>
 		{/each}
diff --git a/web/src/lib/components/repo/CommitBodyToggle.svelte b/web/src/lib/components/repo/CommitBodyToggle.svelte
index 96a774130..bdda886c2 100644
--- a/web/src/lib/components/repo/CommitBodyToggle.svelte
+++ b/web/src/lib/components/repo/CommitBodyToggle.svelte
@@ -12,10 +12,10 @@
 
 <button
 	type="button"
-	class="{className} shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 text-foreground-default hover:bg-background-muted"
+	class="{className} shrink-0 cursor-pointer rounded-sm bg-background-inset px-2xs text-foreground-default hover:bg-background-muted"
 	aria-expanded={expanded}
 	aria-label="Toggle commit body"
 	{onclick}
 >
-	<Ellipsis class="size-3" aria-hidden="true" />
+	<Ellipsis class="size-3.5" aria-hidden="true" />
 </button>
diff --git a/web/src/lib/components/repo/CommitHeader.svelte b/web/src/lib/components/repo/CommitHeader.svelte
index f15304ec4..68c87758c 100644
--- a/web/src/lib/components/repo/CommitHeader.svelte
+++ b/web/src/lib/components/repo/CommitHeader.svelte
@@ -3,11 +3,11 @@
 
 	export const commitHeader = tv({
 		slots: {
-			root: "flex flex-col gap-4 text-foreground-default",
-			header: "flex flex-col gap-2",
+			root: "flex flex-col gap-md text-foreground-default",
+			header: "flex flex-col gap-xs",
 			headerSubject: "typography-paragraph-large",
 			headerBody: "typography-monospace-regular whitespace-pre-wrap",
-			commitDetails: "flex flex-col gap-2 typography-paragraph-regular",
+			commitDetails: "flex flex-col gap-xs typography-paragraph-regular",
 			commitDetailsRow: "inline-flex flex-wrap items-center",
 			commitDetailsTitle: "w-32 text-foreground-muted select-none"
 		}
@@ -66,7 +66,7 @@
 			<p class={styles.headerSubject()}>
 				{commit.subject}
 				<span
-					class="ml-1 min-w-0 rounded-sm bg-background-inset px-1 typography-monospace-regular text-foreground-default"
+					class="ml-2xs min-w-0 rounded-sm bg-background-inset px-2xs typography-monospace-regular font-normal text-foreground-default"
 				>
 					<!-- todo: print actual branch/bookmark name -->
 					master
@@ -133,7 +133,7 @@
 		{#if commit.committerWhen}
 			<span class={styles.commitDetailsRow()}>
 				<span class={styles.commitDetailsTitle()}>Date</span>
-				<span class="flex flex-row gap-1">
+				<span class="flex flex-row gap-2xs">
 					<TimeAgo value={commit.committerWhen} variant="full" />
 					{#if absoluteTime}
 						<span class="hidden text-foreground-muted sm:inline">({absoluteTime})</span>
diff --git a/web/src/lib/components/repo/CommitList.svelte b/web/src/lib/components/repo/CommitList.svelte
index becf50671..583fdc371 100644
--- a/web/src/lib/components/repo/CommitList.svelte
+++ b/web/src/lib/components/repo/CommitList.svelte
@@ -30,7 +30,7 @@
 	);
 </script>
 
-<div class="flex flex-col gap-4">
+<div class="flex flex-col gap-md">
 	{#each commits as commit (commit.hash)}
 		<div>
 			<span class="space-x-1.5">
@@ -58,19 +58,19 @@
 
 			{#if hasBodyBeyondSignOffs(commit.body) && expanded[commit.hash]}
 				<p
-					class="mt-1 pb-2 typography-paragraph-small whitespace-pre-wrap text-foreground-muted"
+					class="mt-2xs pb-xs typography-paragraph-small whitespace-pre-wrap text-foreground-muted"
 				>
 					{commit.body}
 				</p>
 			{/if}
 
 			<div
-				class="mt-1.25 flex flex-wrap items-center gap-2 typography-paragraph-small text-foreground-muted"
+				class="mt-1.25 flex flex-wrap items-center gap-xs typography-paragraph-small text-foreground-muted"
 			>
 				<a
 					href={resolve(`${base}/commit/${commit.hash}` as "/")}
 					title={commit.changeId ? `jj change id: ${commit.changeId}` : undefined}
-					class="rounded-sm bg-background-inset px-2 py-0.5 typography-monospace-small text-foreground-default no-underline hover:underline"
+					class="rounded-sm bg-background-inset px-xs py-3xs typography-monospace-small text-foreground-default no-underline hover:underline"
 				>
 					{commit.shortHash}
 				</a>
diff --git a/web/src/lib/components/repo/CommitLogView.svelte b/web/src/lib/components/repo/CommitLogView.svelte
index 7a2286630..f0249d5cf 100644
--- a/web/src/lib/components/repo/CommitLogView.svelte
+++ b/web/src/lib/components/repo/CommitLogView.svelte
@@ -5,7 +5,7 @@
 	import CommitRows from "$lib/components/repo/CommitRows.svelte";
 	import CommitRow from "$lib/components/repo/CommitRow.svelte";
 	import type { CommitSummary } from "$lib/components/repo/types";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 	import GitCommitVertical from "$icon/git-commit-vertical";
 
 	interface Props {
@@ -33,15 +33,17 @@
 	}: Props = $props();
 </script>
 
-<TabPanel padded={false}>
+<Card padding="none">
 	{#if commits.length === 0}
-		<EmptyState size="inline" message="No commits at {ref}." class="justify-center py-6" />
+		<EmptyState size="inline" message="No commits at {ref}." class="justify-center py-xl" />
 	{:else}
-		<h2 class="flex flex-wrap items-center gap-2 p-4 typography-paragraph-regular font-medium">
-			<GitCommitVertical class="size-4 shrink-0" aria-hidden="true" />
+		<h2
+			class="flex flex-wrap items-center gap-xs p-md typography-paragraph-regular font-medium"
+		>
+			<GitCommitVertical class="size-3.5 shrink-0" aria-hidden="true" />
 			Commits on
 			<span
-				class="flex min-w-0 rounded-sm bg-background-inset px-1 typography-monospace-regular text-foreground-default"
+				class="flex min-w-0 rounded-sm bg-background-inset px-2xs typography-monospace-regular font-normal text-foreground-default"
 				>{ref}</span
 			>
 		</h2>
@@ -52,10 +54,10 @@
 			{/each}
 		</CommitRows>
 	{/if}
-</TabPanel>
+</Card>
 
 {#if pageCount > 1}
-	<div class="mt-4 flex justify-center">
-		<Pagination {page} total={pageCount} labels onchange={onPageChange} class="gap-5" />
+	<div class="mt-md flex justify-center">
+		<Pagination {page} total={pageCount} labels onchange={onPageChange} class="gap-lg" />
 	</div>
 {/if}
diff --git a/web/src/lib/components/repo/CommitRow.svelte b/web/src/lib/components/repo/CommitRow.svelte
index 5ad1ace19..d5c7bcfae 100644
--- a/web/src/lib/components/repo/CommitRow.svelte
+++ b/web/src/lib/components/repo/CommitRow.svelte
@@ -16,6 +16,36 @@
 	import type { CommitStatuses } from "$lib/api/commitStatuses";
 	import PipelineWorkflows from "$lib/components/repo/pipelines/PipelineWorkflows.svelte";
 	import type { CommitSummary } from "$lib/components/repo/types";
+	import { tv } from "tailwind-variants";
+
+	const subjectLayout = tv({
+		slots: {
+			wrapper: "min-w-0",
+			link: "text-foreground-default no-underline hover:underline",
+			signOff: "",
+			bodyToggle: ""
+		},
+		variants: {
+			wrap: {
+				true: {
+					wrapper: "space-x-xs",
+					link: "wrap-break-word",
+					signOff: "align-middle",
+					bodyToggle: "inline-flex align-middle"
+				},
+				false: {
+					wrapper: "flex items-center gap-xs",
+					link: "truncate",
+					signOff: "",
+					bodyToggle: ""
+				}
+			}
+		}
+	});
+
+	const row = tv({
+		base: "px-md md:col-span-full md:grid md:grid-cols-subgrid md:grid-rows-[minmax(3rem,auto)] md:items-center"
+	});
 
 	interface Props {
 		ownerHandle: string;
@@ -46,7 +76,7 @@
 </script>
 
 {#snippet author()}
-	<span class="flex min-w-0 items-center gap-1">
+	<span class="flex min-w-0 items-center gap-2xs">
 		{#if commit.authorHandle}
 			<User did={commit.authorDid} handle={commit.authorHandle} class="min-w-0" link />
 		{:else if commit.authorName && commit.authorEmail && !commit.authorDid}
@@ -66,15 +96,15 @@
 	<a
 		href={commitHref}
 		title={commit.changeId ? `jj change id: ${commit.changeId}` : undefined}
-		class="rounded-sm bg-background-inset px-1 typography-monospace-small text-foreground-default no-underline hover:underline"
+		class="rounded-sm bg-background-inset px-2xs typography-monospace-small text-foreground-default no-underline hover:underline"
 	>
 		{commit.shortHash}
 	</a>
 {/snippet}
 
 {#snippet actions()}
-	<span class="flex items-center gap-2">
-		<div class="flex flex-row gap-0">
+	<span class="flex items-center gap-xs">
+		<div class="flex flex-row gap-none">
 			<CopyButton
 				value={commit.hash}
 				label="Copy SHA"
@@ -95,30 +125,27 @@
 {/snippet}
 
 {#snippet subject(wrap = false)}
-	<span class={wrap ? "min-w-0 space-x-2" : "flex min-w-0 items-center gap-2"}>
-		<a
-			href={commitHref}
-			class="{wrap
-				? 'wrap-break-word'
-				: 'truncate'} text-foreground-default no-underline hover:underline"
-			title={commit.subject}
-		>
+	{@const s = subjectLayout({ wrap })}
+	<span class={s.wrapper()}>
+		<a href={commitHref} class={s.link()} title={commit.subject}>
 			{commit.subject}
 		</a>
 		{#if signOffs.length > 0}
-			<CommitSignOff {signOffs} class={wrap ? "align-middle" : ""} />
+			<CommitSignOff {signOffs} class={s.signOff()} />
 		{/if}
 		{#if hasBody}
 			<CommitBodyToggle
 				{expanded}
 				onclick={() => (expanded = !expanded)}
-				class={wrap ? "inline-flex align-middle" : ""}
+				class={s.bodyToggle()}
 			/>
 		{/if}
 		{#if tagsByCommit}
 			<Pending>
 				{#each (await tagsByCommit)[commit.hash] ?? [] as name (name)}
-					<Tag color="gray" class="shrink-0 typography-monospace-regular">{name}</Tag>
+					<Tag color="gray" class="shrink-0 typography-monospace-regular font-normal"
+						>{name}</Tag
+					>
 				{/each}
 			</Pending>
 		{/if}
@@ -153,7 +180,7 @@
 {#snippet body(extra = "")}
 	{#if hasBody && expanded}
 		<p
-			class="pb-2 typography-paragraph-small whitespace-pre-wrap text-foreground-muted {extra}"
+			class="pb-xs typography-paragraph-small whitespace-pre-wrap text-foreground-muted {extra}"
 		>
 			{commit.body}
 		</p>
@@ -168,29 +195,27 @@
 	only the columns come from CommitRows; the rows are the row's own, so the cells
 	keep a comfortable height and an expanded body drops underneath them.
 -->
-<div
-	class="{className} px-4 md:col-span-full md:grid md:grid-cols-subgrid md:grid-rows-[minmax(3rem,auto)] md:items-center"
->
+<div class={row({ class: className })}>
 	<div class="hidden md:contents">
 		{@render author()}
-		<span class="flex flex-row items-center gap-2">
+		<span class="flex flex-row items-center gap-xs">
 			{@render actions()}
 			{@render sha()}
 		</span>
 		{@render subject()}
-		<span class="flex flex-row items-center gap-2 justify-self-end">
+		<span class="flex flex-row items-center gap-xs justify-self-end">
 			{@render pipeline()}
 			{@render when()}
 		</span>
 	</div>
 
-	<div class="flex flex-col gap-1 py-4 text-foreground-muted md:hidden">
+	<div class="flex flex-col gap-2xs py-md text-foreground-muted md:hidden">
 		<div class="flex min-w-0 items-start">
 			{@render subject(true)}
 			<span class="ml-auto shrink-0">{@render mobileMenu()}</span>
 		</div>
 		{@render body()}
-		<div class="flex min-w-0 items-center gap-1">
+		<div class="flex min-w-0 items-center gap-2xs">
 			{@render author()}
 			<span class="shrink-0">committed</span>
 			{@render when()}
diff --git a/web/src/lib/components/repo/CommitRows.svelte b/web/src/lib/components/repo/CommitRows.svelte
index 87528a73b..8187bc7d9 100644
--- a/web/src/lib/components/repo/CommitRows.svelte
+++ b/web/src/lib/components/repo/CommitRows.svelte
@@ -20,6 +20,6 @@
 	list instead of the one cell in its own row. a page where nothing ran ci
 	collapses that column down to the timestamp alone.
 -->
-<div class="{className} md:grid md:gap-x-6 {columns}">
+<div class="{className} md:grid md:gap-x-xl {columns}">
 	{@render children()}
 </div>
diff --git a/web/src/lib/components/repo/CommitSignOff.svelte b/web/src/lib/components/repo/CommitSignOff.svelte
index cbc9512b3..533f50e6b 100644
--- a/web/src/lib/components/repo/CommitSignOff.svelte
+++ b/web/src/lib/components/repo/CommitSignOff.svelte
@@ -22,13 +22,13 @@
 	);
 
 	const sizeClass = $derived(
-		{ small: "size-3.5 -mt-px", regular: "size-4", large: "size-4.5" }[size]
+		{ small: "size-3.5 -mt-px", regular: "size-3.5", large: "size-4" }[size]
 	);
 </script>
 
 <Hovercard
 	class={className}
-	cardClass="px-2.5 py-2 select-text"
+	cardClass="px-2.5 py-xs select-text"
 	openDelay={50}
 	closeDelay={300}
 	onOpen={() => (opened = true)}
@@ -48,9 +48,9 @@
 </Hovercard>
 
 {#snippet signers(dids?: Map<string, string>)}
-	<div class="flex flex-col gap-2">
+	<div class="flex flex-col gap-xs">
 		{#each signOffs as signOff (signOff.line)}
-			<div class="flex items-center gap-2">
+			<div class="flex items-center gap-xs">
 				<Avatar did={signOff.did ?? dids?.get(signOff.email)} handle={signOff.name} />
 				<span class="typography-monospace-regular whitespace-nowrap">
 					{signOff.line}
diff --git a/web/src/lib/components/repo/CommitView.svelte b/web/src/lib/components/repo/CommitView.svelte
index 9579c6937..d4e3e2f08 100644
--- a/web/src/lib/components/repo/CommitView.svelte
+++ b/web/src/lib/components/repo/CommitView.svelte
@@ -18,7 +18,7 @@
 	import type { CodeViewFile } from "$lib/components/repo/DiffCodeView.svelte";
 	import { blobHref } from "$lib/components/repo/urls";
 	import type { DiffStyle } from "$lib/components/repo/pierre";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 	import type { CommitStatuses } from "$lib/api/commitStatuses";
 
 	interface Props {
@@ -114,10 +114,10 @@
 	const patch = $derived(browser && patchUrl ? getPatchStream(patchUrl) : undefined);
 </script>
 
-<div class="flex flex-col gap-4 pb-4">
-	<TabPanel class="rounded-tl-none">
+<div class="flex flex-col gap-md pb-md">
+	<Card class="rounded-tl-none">
 		<CommitHeader {ownerHandle} {repoName} {commit} {parent} {changeId} {pipelineStatuses} />
-	</TabPanel>
+	</Card>
 	<DiffView
 		deps={mirror.deps}
 		diff={mirrorDiff}
diff --git a/web/src/lib/components/repo/DiffCodeView.svelte b/web/src/lib/components/repo/DiffCodeView.svelte
index 68ef7275a..d7b6600b1 100644
--- a/web/src/lib/components/repo/DiffCodeView.svelte
+++ b/web/src/lib/components/repo/DiffCodeView.svelte
@@ -363,7 +363,7 @@
 </script>
 
 {#if initError}
-	<div class="flex min-h-32 items-center justify-center p-4">
+	<div class="flex min-h-32 items-center justify-center p-md">
 		<span class="typography-paragraph-small text-foreground-danger">{initError}</span>
 	</div>
 {:else}
diff --git a/web/src/lib/components/repo/DiffFileHeader.svelte b/web/src/lib/components/repo/DiffFileHeader.svelte
index ad0cff4da..8b756f632 100644
--- a/web/src/lib/components/repo/DiffFileHeader.svelte
+++ b/web/src/lib/components/repo/DiffFileHeader.svelte
@@ -43,10 +43,10 @@
 <FileCardHeader {open} collapsible={!empty && onToggle != null} spacer={empty} {onToggle}>
 	{#snippet title()}
 		<DiffStatPill stat={file.stat} size="small" class="shrink-0" />
-		<div class="flex min-w-0 items-center gap-2">
+		<div class="flex min-w-0 items-center gap-xs">
 			{#if renamed}
 				{@render path(file.oldName ?? "")}
-				<ArrowRight class="size-4 shrink-0" />
+				<ArrowRight class="size-3.5 shrink-0" />
 				{@render path(file.name)}
 			{:else}
 				{@render path(file.name)}
diff --git a/web/src/lib/components/repo/DiffFileTree.svelte b/web/src/lib/components/repo/DiffFileTree.svelte
index e7cb8a218..c69871555 100644
--- a/web/src/lib/components/repo/DiffFileTree.svelte
+++ b/web/src/lib/components/repo/DiffFileTree.svelte
@@ -3,11 +3,11 @@
 
 	const treeRow = tv({
 		slots: {
-			root: "pt-1 pr-4 pb-8 pl-1.5",
-			row: "group my-0.5 inline-flex w-full items-center gap-2 rounded-sm px-1.5 py-0.75 text-foreground-default transition-colors hover:bg-background-subtle",
-			icon: "size-4 shrink-0 text-foreground-placeholder transition-colors group-hover:text-foreground-default",
+			root: "pt-2xs pr-md pb-2xl pl-1.5",
+			row: "group my-3xs inline-flex w-full items-center gap-xs rounded-sm px-1.5 py-0.75 text-foreground-default transition-colors hover:bg-background-subtle",
+			icon: "size-3.5 shrink-0 text-foreground-placeholder transition-colors group-hover:text-foreground-default",
 			name: "truncate select-none",
-			children: "ml-3.5 border-l border-border-subtle pl-1.5"
+			children: "ml-[12.5px] border-l border-border-subtle pl-3xs"
 		},
 		variants: {
 			kind: {
@@ -15,7 +15,7 @@
 					row: "cursor-pointer list-none",
 					name: "text-foreground-muted group-hover:text-inherit"
 				},
-				file: { row: "flex items-center gap-2" }
+				file: { row: "flex items-center gap-xs" }
 			}
 		}
 	});
diff --git a/web/src/lib/components/repo/DiffStatPill.svelte b/web/src/lib/components/repo/DiffStatPill.svelte
index 60b808d45..d5e98cd4a 100644
--- a/web/src/lib/components/repo/DiffStatPill.svelte
+++ b/web/src/lib/components/repo/DiffStatPill.svelte
@@ -10,12 +10,12 @@
 		variants: {
 			variant: {
 				flat: {
-					insertions: "p-0.5",
-					deletions: "p-0.5"
+					insertions: "p-3xs",
+					deletions: "p-3xs"
 				},
 				background: {
-					insertions: "bg-background-success-subtle px-1 py-0.5",
-					deletions: "bg-background-danger-subtle px-1 py-0.5"
+					insertions: "bg-background-success-subtle px-2xs py-3xs",
+					deletions: "bg-background-danger-subtle px-2xs py-3xs"
 				}
 			},
 			size: {
diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte
index 4f32ade9c..02e8c36f4 100644
--- a/web/src/lib/components/repo/DiffView.svelte
+++ b/web/src/lib/components/repo/DiffView.svelte
@@ -9,7 +9,7 @@
 	import SquareSplitVertical from "$icon/square-split-vertical";
 	import FoldVertical from "$icon/fold-vertical";
 	import UnfoldVertical from "$icon/unfold-vertical";
-	import Button from "$lib/components/ui/Button.svelte";
+	import Button, { buttonIcon } from "$lib/components/ui/Button.svelte";
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
 	import Card from "$lib/components/ui/Card.svelte";
@@ -29,6 +29,42 @@
 	import ResizeHandle from "$lib/components/ui/ResizeHandle.svelte";
 	import { browser } from "$app/environment";
 	import { tick, untrack } from "svelte";
+	import { tv } from "tailwind-variants";
+
+	const diffLayout = tv({
+		slots: {
+			aside: "min-h-0 w-full shrink-0 flex-col sm:w-(--tree-width)",
+			resizeHandle: "",
+			column: "min-h-0 min-w-0 flex-1 flex-col",
+			toolbar: "flex items-center gap-sm",
+			expandButton: ""
+		},
+		variants: {
+			tree: {
+				both: {
+					aside: "hidden sm:flex",
+					resizeHandle: "hidden sm:flex",
+					column: "flex",
+					toolbar: "sm:pl-2xs",
+					expandButton: "sm:hidden"
+				},
+				tree: {
+					aside: "flex",
+					resizeHandle: "flex",
+					column: "hidden sm:flex",
+					toolbar: "sm:pl-2xs",
+					expandButton: "sm:hidden"
+				},
+				diff: {
+					aside: "",
+					resizeHandle: "",
+					column: "flex",
+					toolbar: "",
+					expandButton: ""
+				}
+			}
+		}
+	});
 
 	interface Props {
 		deps: RepoDiffDeps;
@@ -70,6 +106,8 @@
 
 	const SM = 640;
 	let treeToggled = $state<boolean | null>(untrack(() => (treeCollapsed ? false : null)));
+	const treeState = $derived(treeToggled === null ? "both" : treeToggled ? "tree" : "diff");
+	const layout = $derived(diffLayout({ tree: treeState }));
 	const TREE_WIDTH = 250;
 	const TREE_MIN_WIDTH = 200;
 	const TREE_MAX_WIDTH = 560;
@@ -144,18 +182,13 @@
 	<div bind:this={shell} class:select-none={resizing}>
 		<Card
 			padding="none"
-			class="sticky flex gap-2 px-2"
+			class="sticky flex gap-xs px-xs"
 			style="top: {stickyTop}px; max-height: {maxHeight}"
 		>
 			<!-- file tree -->
 			{#if treeToggled !== false}
-				<aside
-					class="{treeToggled === null
-						? 'hidden sm:flex'
-						: 'flex'} min-h-0 w-full shrink-0 flex-col sm:w-(--tree-width)"
-					style:--tree-width="{treeWidth}px"
-				>
-					<div class="flex min-h-12 items-center bg-background-default py-2">
+				<aside class={layout.aside()} style:--tree-width="{treeWidth}px">
+					<div class="flex min-h-12 items-center bg-background-default py-xs">
 						<Button
 							icon={PanelLeftClose}
 							title="Collapse file tree"
@@ -173,7 +206,7 @@
 					</div>
 				</aside>
 				<ResizeHandle
-					class={treeToggled === null ? "hidden sm:flex" : "flex"}
+					class={layout.resizeHandle()}
 					bind:width={treeWidth}
 					bind:resizing
 					min={TREE_MIN_WIDTH}
@@ -184,18 +217,14 @@
 			{/if}
 			<!-- diffs: a sized flex column, so the scroller takes exactly the room the
 		     toolbar leaves -->
-			<div
-				class="{treeToggled === true
-					? 'hidden sm:flex'
-					: 'flex'} min-h-0 min-w-0 flex-1 flex-col"
-			>
+			<div class={layout.column()}>
 				<!-- nowrap: a wrapped toolbar grows past the space the file
 			     headers dock under. the button labels drop out below the width
 			     where the full toolbar still fits on that one line -->
 				<div
-					class="@container/toolbar relative z-10 flex min-h-12 flex-nowrap items-center justify-between gap-2 bg-background-default py-2"
+					class="@container/toolbar relative z-10 flex min-h-12 flex-nowrap items-center justify-between gap-xs bg-background-default py-xs"
 				>
-					<div class="{treeToggled === false ? '' : 'sm:pl-1'} flex items-center gap-3">
+					<div class={layout.toolbar()}>
 						{#if treeToggled !== true}
 							<Button
 								title="Expand file tree"
@@ -203,7 +232,7 @@
 								onclick={() => (treeToggled = true)}
 								variant="ghost"
 								size="small"
-								class={treeToggled === false ? undefined : "sm:hidden"}
+								class={layout.expandButton()}
 							/>
 						{/if}
 						{#if diff}
@@ -215,7 +244,7 @@
 							</span>
 						{/if}
 					</div>
-					<div class="flex items-center gap-2">
+					<div class="flex items-center gap-xs">
 						<Button
 							icon={allOpen ? FoldVertical : UnfoldVertical}
 							title={allOpen ? "Collapse lines" : "Expand lines"}
@@ -237,7 +266,10 @@
 								title="Download commit"
 							>
 								{#snippet trigger()}
-									<FileDown class="size-4" aria-hidden="true" />
+									<FileDown
+										class={buttonIcon({ size: "small" })}
+										aria-hidden="true"
+									/>
 									<span class="hidden @min-[42rem]/toolbar:inline"
 										>Download commit</span
 									>
@@ -254,7 +286,7 @@
 								>
 							</Dropdown>
 						{/if}
-						<Checkbox bind:checked={wrap} class="px-2 text-foreground-muted">
+						<Checkbox bind:checked={wrap} class="px-xs text-foreground-muted">
 							Wrap
 						</Checkbox>
 						<ButtonGroup>
@@ -281,7 +313,7 @@
 				</div>
 				{#if error}
 					<div
-						class="mb-2 flex min-h-32 items-center justify-center rounded-sm border border-border-danger bg-background-danger-subtle p-4 typography-paragraph-regular text-foreground-danger"
+						class="mb-xs flex min-h-32 items-center justify-center rounded-sm border border-border-danger bg-background-danger-subtle p-md typography-paragraph-regular text-foreground-danger"
 					>
 						<span>{error}</span>
 					</div>
@@ -305,10 +337,10 @@
 						/>
 					{/key}
 				{:else if diff}
-					<EmptyState class="mb-2 min-h-32" message="No change between two revisions." />
+					<EmptyState class="mb-xs min-h-32" message="No change between two revisions." />
 				{:else}
 					<div
-						class="mb-2 flex min-h-32 items-center justify-center text-foreground-subtle"
+						class="mb-xs flex min-h-32 items-center justify-center text-foreground-subtle"
 					>
 						<LoaderCircle class="inline-flex size-4 animate-spin" aria-hidden="true" />
 					</div>
diff --git a/web/src/lib/components/repo/EmptyRepo.svelte b/web/src/lib/components/repo/EmptyRepo.svelte
index 1b6740a5c..8dbeb4bf4 100644
--- a/web/src/lib/components/repo/EmptyRepo.svelte
+++ b/web/src/lib/components/repo/EmptyRepo.svelte
@@ -62,24 +62,24 @@
 </script>
 
 {#snippet bullet(n: number)}
-	<StepMarker class="mr-2 inline-flex align-middle">{n}</StepMarker>
+	<StepMarker class="mr-xs inline-flex align-middle">{n}</StepMarker>
 {/snippet}
 
 {#snippet codeBlock(lines: string[])}
 	<pre
-		class="overflow-x-auto rounded-sm bg-background-inset p-3 typography-monospace-small">{lines.join(
+		class="overflow-x-auto rounded-sm bg-background-inset p-sm typography-monospace-small">{lines.join(
 			"\n"
 		)}</pre>
 {/snippet}
 
 {#if isOwner}
 	{#if loadingKey}
-		<div class="py-6" aria-hidden="true"></div>
+		<div class="py-xl" aria-hidden="true"></div>
 	{:else if ownerHasKey}
 		<div class="flex w-full place-content-center">
-			<div class="flex w-fit flex-col gap-5 py-6 typography-paragraph-small">
+			<div class="flex w-fit flex-col gap-lg py-xl typography-paragraph-small">
 				<p>This is an empty repository.</p>
-				<div class="flex flex-col gap-2">
+				<div class="flex flex-col gap-xs">
 					<p class="text-foreground-subtle">
 						…create a new repository on the command line
 					</p>
@@ -93,7 +93,7 @@
 						`git push -u origin ${resolvedBranch}`
 					])}
 				</div>
-				<div class="flex flex-col gap-2">
+				<div class="flex flex-col gap-xs">
 					<p class="text-foreground-subtle">
 						…or push an existing repository from the command line
 					</p>
@@ -107,7 +107,7 @@
 		</div>
 	{:else}
 		<div class="flex w-full place-content-center">
-			<div class="flex w-fit flex-col gap-4 py-6 typography-paragraph-small">
+			<div class="flex w-fit flex-col gap-md py-xl typography-paragraph-small">
 				<p>This is an empty repository. To get started:</p>
 				<p>
 					{@render bullet(1)}First, generate a new
@@ -123,7 +123,7 @@
 				</p>
 				<p>
 					{@render bullet(3)}Configure your remote to
-					<code class="rounded-sm bg-background-inset px-1 typography-monospace-regular"
+					<code class="rounded-sm bg-background-inset px-2xs typography-monospace-regular"
 						>{remote}</code
 					>
 				</p>
@@ -132,5 +132,5 @@
 		</div>
 	{/if}
 {:else}
-	<p class="py-6 text-center text-foreground-subtle">This is an empty repository.</p>
+	<p class="py-xl text-center text-foreground-subtle">This is an empty repository.</p>
 {/if}
diff --git a/web/src/lib/components/repo/FileCardHeader.svelte b/web/src/lib/components/repo/FileCardHeader.svelte
index 77d47e571..997fdda88 100644
--- a/web/src/lib/components/repo/FileCardHeader.svelte
+++ b/web/src/lib/components/repo/FileCardHeader.svelte
@@ -25,7 +25,7 @@
 
 	const isInteractive = $derived(collapsible && onToggle != null);
 	const titleClass =
-		"flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2.5 py-2 text-left text-foreground-default select-none";
+		"flex min-w-0 flex-1 items-center gap-xs overflow-hidden px-2.5 py-xs text-left text-foreground-default select-none";
 </script>
 
 <div
@@ -60,7 +60,7 @@
 	{/if}
 
 	{#if actions}
-		<div class="flex shrink-0 items-center gap-2 pr-1.5">
+		<div class="flex shrink-0 items-center gap-xs pr-1.5">
 			{@render actions()}
 		</div>
 	{/if}
diff --git a/web/src/lib/components/repo/FileHistoryView.svelte b/web/src/lib/components/repo/FileHistoryView.svelte
index c97bb9b51..76f5991b3 100644
--- a/web/src/lib/components/repo/FileHistoryView.svelte
+++ b/web/src/lib/components/repo/FileHistoryView.svelte
@@ -2,7 +2,7 @@
 	import History from "$icon/history";
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import Pagination from "$lib/components/ui/Pagination.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 	import CommitRows from "$lib/components/repo/CommitRows.svelte";
 	import CommitRow from "$lib/components/repo/CommitRow.svelte";
 	import type { CommitSummary } from "$lib/components/repo/types";
@@ -45,17 +45,17 @@
 	const parentPath = $derived(path.slice(0, path.length - fileName.length));
 </script>
 
-<TabPanel padded={false} class="pb-6">
+<Card padding="none" class="pb-xl">
 	<h2
-		class="flex flex-wrap items-center gap-2 p-4 pb-8 typography-paragraph-regular font-medium md:pb-4"
+		class="flex flex-wrap items-center gap-xs p-md pb-2xl typography-paragraph-regular font-medium md:pb-md"
 	>
-		<History class="size-4 shrink-0" aria-hidden="true" />
+		<History class="size-3.5 shrink-0" aria-hidden="true" />
 		Version history of
 		<a
 			href={blobHref(ownerHandle, repoName, ref, path)}
 			title={path}
 			aria-label={path}
-			class="flex min-w-0 rounded-sm bg-background-inset px-1 typography-monospace-regular text-foreground-default no-underline hover:underline"
+			class="flex min-w-0 rounded-sm bg-background-inset px-2xs typography-monospace-regular font-normal text-foreground-default no-underline hover:underline"
 			>{#if parentPath}<span class="truncate">{parentPath}</span>{/if}<span class="shrink-0"
 				>{fileName}</span
 			></a
@@ -66,17 +66,17 @@
 		<EmptyState
 			size="inline"
 			message="No commits touch this file at {ref}."
-			class="justify-center px-4 pb-8"
+			class="justify-center px-md pb-2xl"
 		/>
 	{:else}
-		<div class="flex flex-col gap-8 md:gap-6">
+		<div class="flex flex-col gap-2xl md:gap-xl">
 			{#each groups as group (group.commits[0].hash)}
 				<div class="flex flex-col">
-					<h3 class="px-4 pb-1 typography-paragraph-regular text-foreground-muted">
+					<h3 class="px-md pb-2xs typography-paragraph-regular text-foreground-muted">
 						{group.label}
 					</h3>
 					<CommitRows
-						class="mt-2 divide-y divide-border-default border-y border-border-default"
+						class="mt-xs divide-y divide-border-default border-y border-border-default"
 					>
 						{#each group.commits as commit (commit.hash)}
 							<CommitRow {ownerHandle} {repoName} {commit} />
@@ -86,10 +86,10 @@
 			{/each}
 		</div>
 	{/if}
-</TabPanel>
+</Card>
 
 {#if pageCount > 1}
-	<div class="mt-4 flex justify-center">
-		<Pagination {page} total={pageCount} labels onchange={onPageChange} class="gap-5" />
+	<div class="mt-md flex justify-center">
+		<Pagination {page} total={pageCount} labels onchange={onPageChange} class="gap-lg" />
 	</div>
 {/if}
diff --git a/web/src/lib/components/repo/FilePathChip.svelte b/web/src/lib/components/repo/FilePathChip.svelte
index 321e26d17..d3c90c354 100644
--- a/web/src/lib/components/repo/FilePathChip.svelte
+++ b/web/src/lib/components/repo/FilePathChip.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <div
-	class="flex w-fit min-w-0 items-center gap-1 overflow-x-auto rounded-sm border border-background-canvas bg-background-canvas px-3 py-1 whitespace-nowrap"
+	class="flex w-fit min-w-0 items-center gap-2xs overflow-x-auto rounded-sm border border-background-canvas bg-background-canvas px-sm py-2xs whitespace-nowrap"
 >
 	{@render children()}
 </div>
diff --git a/web/src/lib/components/repo/FileTree.svelte b/web/src/lib/components/repo/FileTree.svelte
index e37b1bb96..78f97a7f6 100644
--- a/web/src/lib/components/repo/FileTree.svelte
+++ b/web/src/lib/components/repo/FileTree.svelte
@@ -3,8 +3,8 @@
 
 	export const fileRow = tv({
 		slots: {
-			root: "grid items-center gap-4 py-1",
-			link: "flex min-w-0 items-center gap-2 text-foreground-default no-underline hover:underline",
+			root: "grid items-center gap-md py-2xs",
+			link: "flex min-w-0 items-center gap-xs text-foreground-default no-underline hover:underline",
 			message: "hidden min-w-0 md:col-span-6 md:block",
 			time: "text-right text-foreground-subtle"
 		},
@@ -64,7 +64,9 @@
 	// lucide puts fill="none" on the path itself, which beats anything inherited
 	// from the svg, so the class has to reach the path
 	const iconClassFor = (entry: TreeEntrySummary) =>
-		entry.kind === "directory" ? "size-4 shrink-0 [&_path]:fill-current" : "size-4 shrink-0";
+		entry.kind === "directory"
+			? "size-3.5 shrink-0 [&_path]:fill-current"
+			: "size-3.5 shrink-0";
 
 	const iconFor = (entry: TreeEntrySummary) => {
 		switch (entry.kind) {
diff --git a/web/src/lib/components/repo/LabelPanel.stories.svelte b/web/src/lib/components/repo/LabelPanel.stories.svelte
index 55ab828ef..d5afd4828 100644
--- a/web/src/lib/components/repo/LabelPanel.stories.svelte
+++ b/web/src/lib/components/repo/LabelPanel.stories.svelte
@@ -47,7 +47,7 @@
 
 <Story name="Full">
 	{#snippet template(args)}
-		<div class="w-150 bg-background-default p-4">
+		<div class="w-150 bg-background-default p-md">
 			<LabelPanel {...args} labels={linked} />
 		</div>
 	{/snippet}
@@ -55,7 +55,7 @@
 
 <Story name="Empty">
 	{#snippet template(args)}
-		<div class="w-150 bg-background-default p-4">
+		<div class="w-150 bg-background-default p-md">
 			<LabelPanel {...args} />
 		</div>
 	{/snippet}
@@ -63,7 +63,7 @@
 
 <Story name="Without label links">
 	{#snippet template(args)}
-		<div class="w-150 bg-background-default p-4">
+		<div class="w-150 bg-background-default p-md">
 			<LabelPanel {...args} {labels} />
 		</div>
 	{/snippet}
@@ -71,7 +71,7 @@
 
 <Story name="Overflowing">
 	{#snippet template(args)}
-		<div class="w-150 bg-background-default p-4">
+		<div class="w-150 bg-background-default p-md">
 			<LabelPanel {...args} labels={many} />
 		</div>
 	{/snippet}
@@ -79,7 +79,7 @@
 
 <Story name="Editable">
 	{#snippet template(args)}
-		<div class="w-150 bg-background-default p-4">
+		<div class="w-150 bg-background-default p-md">
 			<LabelPanel
 				{...args}
 				canEdit
@@ -93,7 +93,7 @@
 
 <Story name="Vertical">
 	{#snippet template(args)}
-		<div class="w-64 bg-background-default p-4">
+		<div class="w-64 bg-background-default p-md">
 			<LabelPanel {...args} direction="vertical" labels={linked} />
 		</div>
 	{/snippet}
diff --git a/web/src/lib/components/repo/LabelPanel.svelte b/web/src/lib/components/repo/LabelPanel.svelte
index e3e39108b..363c8978f 100644
--- a/web/src/lib/components/repo/LabelPanel.svelte
+++ b/web/src/lib/components/repo/LabelPanel.svelte
@@ -57,7 +57,7 @@
 </script>
 
 {#snippet sectionHeading(id: string, title: string)}
-	<h3 {id} class="pr-2 typography-paragraph-small font-medium text-foreground-muted">
+	<h3 {id} class="pr-xs typography-paragraph-small font-medium text-foreground-muted">
 		{title}
 	</h3>
 {/snippet}
@@ -68,18 +68,18 @@
 {/snippet}
 
 {#if direction === "vertical"}
-	<aside class="flex flex-col gap-6 typography-paragraph-small text-foreground-subtle">
+	<aside class="flex flex-col gap-xl typography-paragraph-small text-foreground-subtle">
 		<div>TODO: label panel</div>
 	</aside>
 {:else}
-	<div class="flex w-full flex-col items-start gap-4">
-		<section class="flex w-full flex-col items-start gap-2">
+	<div class="flex w-full flex-col items-start gap-md">
+		<section class="flex w-full flex-col items-start gap-xs">
 			<div class="flex w-full items-center justify-between">
 				{@render sectionHeading(labelsHeadingId, "Labels")}
 			</div>
 			<ul
 				aria-labelledby={labelsHeadingId}
-				class="group flex w-full flex-wrap items-center gap-2"
+				class="group flex w-full flex-wrap items-center gap-xs"
 			>
 				{#each shownLabels as label (label.name)}
 					<li class="flex">
@@ -87,13 +87,13 @@
 							<Link
 								href={label.href}
 								variant="inherit"
-								class="flex items-center gap-2 rounded-sm border border-border-default bg-background-default px-2.5 py-0.75 hover:bg-background-subtle hover:no-underline"
+								class="flex items-center gap-xs rounded-sm border border-border-default bg-background-default px-xs py-[3px] hover:bg-background-subtle hover:no-underline"
 							>
 								{@render labelBall(label)}
 							</Link>
 						{:else}
 							<span
-								class="flex items-center gap-2 rounded-sm border border-border-default bg-background-default px-2.5 py-0.75"
+								class="flex items-center gap-xs rounded-sm border border-border-default bg-background-default px-xs py-[3px]"
 							>
 								{@render labelBall(label)}
 							</span>
diff --git a/web/src/lib/components/repo/LanguageBar.svelte b/web/src/lib/components/repo/LanguageBar.svelte
index 89df11073..1c90e05e4 100644
--- a/web/src/lib/components/repo/LanguageBar.svelte
+++ b/web/src/lib/components/repo/LanguageBar.svelte
@@ -15,9 +15,11 @@
 	const label = (language: LanguageSlice) => `${language.name} ${percent(language)}%`;
 </script>
 
-<details class="group -mx-4 -mt-4 mb-2">
+<details
+	class="group -mx-md -mt-md before:pointer-events-none before:absolute before:z-10 before:ml-2xs before:h-24 before:w-full before:translate-y-md before:bg-ease-in-out-to-b before:from-transparent before:to-transparent before:transition-colors before:duration-150 before:delay-50 before:ease-out before:select-none not-open:has-[summary:hover]:before:from-background-default mb-2xs"
+>
 	<summary
-		class="flex h-4 origin-top scale-y-50 cursor-pointer gap-px overflow-hidden rounded-t transition-transform group-open:scale-y-100 hover:scale-y-100"
+		class="flex h-4 origin-top scale-y-50 cursor-pointer gap-px rounded-t transition-transform delay-100 group-open:scale-y-100 hover:scale-y-100"
 	>
 		{#each languages as language (language.name)}
 			{#if language.share > 0.5}
@@ -29,10 +31,10 @@
 		{/each}
 	</summary>
 	<div
-		class="mb-4 flex flex-wrap items-center justify-center gap-4 border-b border-border-default px-4 py-2"
+		class="mb-md flex flex-wrap items-center justify-center gap-md border-b border-border-default px-md py-xs"
 	>
 		{#each languages as language (language.name)}
-			<div class="flex items-center gap-2 typography-paragraph-small">
+			<div class="flex items-center gap-xs typography-paragraph-small">
 				<ColorBall color={colorFor(language.name)} class="size-2.5" />
 				<span>
 					{language.name}
diff --git a/web/src/lib/components/repo/LastCommitPanel.svelte b/web/src/lib/components/repo/LastCommitPanel.svelte
index 49c3dafc2..edf2bb366 100644
--- a/web/src/lib/components/repo/LastCommitPanel.svelte
+++ b/web/src/lib/components/repo/LastCommitPanel.svelte
@@ -17,9 +17,9 @@
 </script>
 
 <div
-	class="mb-3 hidden flex-wrap items-center justify-between gap-2 typography-paragraph-small md:flex"
+	class="mb-sm hidden flex-wrap items-center justify-between gap-xs typography-paragraph-small md:flex"
 >
-	<div class="flex min-w-0 flex-wrap items-center gap-2">
+	<div class="flex min-w-0 flex-wrap items-center gap-xs">
 		{#if commit.authorName}
 			<!-- no email→did mapping yet, always the placeholder -->
 			<Avatar size="regular" />
@@ -38,4 +38,4 @@
 		{commit.shortHash}
 	</a>
 </div>
-<Separator class="my-4" />
+<Separator class="my-md" />
diff --git a/web/src/lib/components/repo/PanelHeader.svelte b/web/src/lib/components/repo/PanelHeader.svelte
index 7ba8edb20..72307142e 100644
--- a/web/src/lib/components/repo/PanelHeader.svelte
+++ b/web/src/lib/components/repo/PanelHeader.svelte
@@ -28,20 +28,20 @@
 	<a
 		href={resolve(href as "/")}
 		aria-label={title}
-		class="inline-flex items-center gap-1 typography-paragraph-small font-bold text-foreground-default no-underline hover:underline"
+		class="inline-flex items-center gap-2xs typography-paragraph-small font-bold text-foreground-default no-underline hover:underline"
 	>
-		<Glyph class="size-4 shrink-0" aria-hidden="true" />
+		<Glyph class="size-3.5 shrink-0" aria-hidden="true" />
 		{formattedCount}
 	</a>
 {:else}
 	<a
 		href={resolve(href as "/")}
-		class="flex items-center gap-2 pb-2 font-medium text-foreground-default no-underline hover:text-foreground-muted hover:no-underline"
+		class="flex items-center gap-xs pb-xs font-medium text-foreground-default no-underline hover:text-foreground-muted hover:no-underline"
 	>
-		<Glyph class="size-4 shrink-0" aria-hidden="true" />
+		<Glyph class="size-3.5 shrink-0" aria-hidden="true" />
 		{title}
 		{#if count !== undefined}
-			<span class="mt-px rounded-sm bg-background-inset px-1 typography-paragraph-small">
+			<span class="mt-px rounded-sm bg-background-inset px-2xs typography-paragraph-small">
 				{formattedCount}
 			</span>
 		{/if}
diff --git a/web/src/lib/components/repo/Readme.svelte b/web/src/lib/components/repo/Readme.svelte
index 41942e9fe..94f758e10 100644
--- a/web/src/lib/components/repo/Readme.svelte
+++ b/web/src/lib/components/repo/Readme.svelte
@@ -12,20 +12,20 @@
 	let { filename, contents, html = null }: Props = $props();
 </script>
 
-<Card padding="none" class="mt-4 w-full overflow-hidden">
-	<div class="border-b border-border-default px-4 py-2">
-		<span class="flex items-center gap-2">
-			<FileText class="size-4 text-foreground-subtle" aria-hidden="true" />
+<Card padding="none" class="mt-md w-full overflow-hidden">
+	<div class="border-b border-border-default px-md py-xs">
+		<span class="flex items-center gap-xs">
+			<FileText class="size-3.5 text-foreground-subtle" aria-hidden="true" />
 			<span class="typography-monospace-small text-foreground-muted">{filename}</span>
 		</span>
 	</div>
 	{#if html}
-		<div class="markup overflow-x-auto px-6 py-4" use:enhanceCodeblocks={html}>
+		<div class="markup overflow-x-auto px-xl py-md" use:enhanceCodeblocks={html}>
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
 			{@html html}
 		</div>
 	{:else}
-		<div class="overflow-x-auto px-6 py-4">
+		<div class="overflow-x-auto px-xl py-md">
 			<pre
 				class="typography-monospace-small whitespace-pre text-foreground-default">{contents}</pre>
 		</div>
diff --git a/web/src/lib/components/repo/RefChip.svelte b/web/src/lib/components/repo/RefChip.svelte
index 87fd32c97..1bfb477e3 100644
--- a/web/src/lib/components/repo/RefChip.svelte
+++ b/web/src/lib/components/repo/RefChip.svelte
@@ -2,7 +2,7 @@
 	import { tv } from "tailwind-variants";
 
 	export const refChip = tv({
-		base: "flex w-fit items-center justify-center gap-1 whitespace-nowrap"
+		base: "flex w-fit items-center justify-center gap-2xs whitespace-nowrap"
 	});
 </script>
 
diff --git a/web/src/lib/components/repo/RefSelector.svelte b/web/src/lib/components/repo/RefSelector.svelte
index 1a8120358..a2f4eb70e 100644
--- a/web/src/lib/components/repo/RefSelector.svelte
+++ b/web/src/lib/components/repo/RefSelector.svelte
@@ -48,7 +48,7 @@
 	};
 </script>
 
-<div class="flex w-full min-w-0 items-stretch gap-2 md:w-auto md:flex-1">
+<div class="flex w-full min-w-0 items-stretch gap-xs md:w-auto md:flex-1">
 	<div class="min-w-0 flex-1 sm:max-w-64">
 		<!-- the ref lives in the url so navigation updates it, no two way binding -->
 		<Select
@@ -62,7 +62,7 @@
 			class="md:min-w-48"
 		>
 			{#snippet footer()}
-				<div class="flex items-center gap-4 px-2 py-1.5">
+				<div class="flex items-center gap-md px-xs py-1.5">
 					<a href={resolve(`${base}/branches` as "/")}> View all branches </a>
 					<a href={resolve(`${base}/tags` as "/")}>View all tags</a>
 				</div>
@@ -71,10 +71,10 @@
 	</div>
 	<a
 		href={resolve(`${base}/compare?base=${encodeURIComponent(current)}` as "/")}
-		class="flex items-center rounded-sm border border-border-default px-2 text-foreground-muted no-underline hover:bg-background-subtle hover:no-underline"
+		class="flex items-center rounded-sm border border-border-default px-xs text-foreground-muted no-underline hover:bg-background-subtle hover:no-underline"
 		title="Compare branches or tags"
 		aria-label="Compare branches or tags"
 	>
-		<GitCompare class="size-4" aria-hidden="true" />
+		<GitCompare class="size-3.5" aria-hidden="true" />
 	</a>
 </div>
diff --git a/web/src/lib/components/repo/RepoCard.stories.svelte b/web/src/lib/components/repo/RepoCard.stories.svelte
index 6e1c1786f..8fb2e92b1 100644
--- a/web/src/lib/components/repo/RepoCard.stories.svelte
+++ b/web/src/lib/components/repo/RepoCard.stories.svelte
@@ -1,5 +1,6 @@
 <script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+	import { expect, userEvent, waitFor } from "storybook/test";
 	import RepoCard from "$lib/components/repo/RepoCard.svelte";
 	import type { RepoCardData } from "$lib/components/profile/types";
 
@@ -17,6 +18,19 @@
 		viewerStarRkey: null
 	};
 
+	// the write never settles, so the count shown is the optimistic one
+	const hang = () => new Promise<Response>(() => {});
+
+	const optimisticStar = async ({
+		canvas
+	}: Pick<StoryContext<Record<string, unknown>>, "canvas">) => {
+		const button = await canvas.findByRole("button", { name: "Star" });
+		await waitFor(() => expect(button).toBeEnabled());
+		await expect(canvas.getByText("42")).toBeVisible();
+		await userEvent.click(button);
+		await waitFor(() => expect(canvas.getByText("43")).toBeVisible());
+	};
+
 	const { Story } = defineMeta({
 		title: "Repo/RepoCard",
 		component: RepoCard,
@@ -25,7 +39,6 @@
 			starButton: { control: "boolean" },
 			showOwner: { control: "boolean" },
 			border: { control: "boolean" },
-			shadow: { control: "boolean" },
 			background: { control: "boolean" }
 		},
 		args: {
@@ -33,7 +46,6 @@
 			starButton: false,
 			showOwner: true,
 			border: true,
-			shadow: false,
 			background: true
 		}
 	});
@@ -41,8 +53,7 @@
 
 <Story name="Default" />
 <Story name="No owner" args={{ showOwner: false }} />
-<Story name="Elevated" args={{ shadow: true }} />
-<Story name="Plain (timeline)" args={{ border: false, shadow: false, background: false }} />
+<Story name="Plain (timeline)" args={{ border: false, background: false }} />
 
 <Story name="With star button" parameters={{ auth: true }}>
 	{#snippet template(args)}
@@ -50,6 +61,12 @@
 	{/snippet}
 </Story>
 
+<Story name="Optimistic star count" play={optimisticStar} parameters={{ auth: { respond: hang } }}>
+	{#snippet template(args)}
+		<RepoCard {...args} starButton />
+	{/snippet}
+</Story>
+
 <!-- popular repo: every stat abbreviates -->
 <Story
 	name="Large counts"
diff --git a/web/src/lib/components/repo/RepoCard.svelte b/web/src/lib/components/repo/RepoCard.svelte
index 0ab3a1a80..e4cdb2c33 100644
--- a/web/src/lib/components/repo/RepoCard.svelte
+++ b/web/src/lib/components/repo/RepoCard.svelte
@@ -10,7 +10,6 @@
 		starButton = true,
 		showOwner = true,
 		border = true,
-		shadow = false,
 		background = true,
 		padding = "regular",
 		onStar,
@@ -21,7 +20,6 @@
 		starButton?: boolean;
 		showOwner?: boolean;
 		border?: CardVariants["border"];
-		shadow?: CardVariants["shadow"];
 		background?: CardVariants["background"];
 		padding?: CardVariants["padding"];
 		action?: Snippet;
@@ -34,15 +32,9 @@
 	<RepoCardContent {repo} {starButton} {showOwner} {onStar} />
 {/snippet}
 
-<Card
-	{border}
-	{shadow}
-	{background}
-	{padding}
-	class={navigatingTo(href) ? "row-breathe" : undefined}
->
+<Card {border} {background} {padding} class={navigatingTo(href) ? "row-breathe" : undefined}>
 	{#if action}
-		<div class="flex items-center gap-3">
+		<div class="flex items-center gap-sm">
 			<div class="min-w-0 flex-1">
 				{@render body()}
 			</div>
diff --git a/web/src/lib/components/repo/RepoCardContent.svelte b/web/src/lib/components/repo/RepoCardContent.svelte
index 12dab2356..5008427da 100644
--- a/web/src/lib/components/repo/RepoCardContent.svelte
+++ b/web/src/lib/components/repo/RepoCardContent.svelte
@@ -10,6 +10,7 @@
 	import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "$lib/components/repo/languageColors";
 	import type { RepoCardData, StarChange } from "$lib/components/profile/types";
 	import { formatCount } from "$lib/format";
+	import { createOptimisticCount } from "$lib/optimistic.svelte";
 	let {
 		repo,
 		starButton = true,
@@ -22,9 +23,14 @@
 		onStar?: (change: StarChange) => void;
 	} = $props();
 
+	const starCount = createOptimisticCount({
+		key: () => repo.repoDid,
+		loaded: () => repo.stars
+	});
+
 	const stats = $derived(
 		[
-			{ value: repo.stars, Icon: Star },
+			{ value: repo.stars === undefined ? undefined : starCount.value, Icon: Star },
 			{ value: repo.forks, Icon: GitFork },
 			{ value: repo.issues, Icon: CircleDot },
 			{ value: repo.pulls, Icon: GitPullRequest }
@@ -32,10 +38,13 @@
 	);
 </script>
 
-<div class="flex min-h-24 flex-col gap-1">
+<div class="flex min-h-24 flex-col gap-2xs">
 	<div class="flex items-start justify-between font-medium text-foreground-default">
-		<div class="mt-1 mr-2 flex min-w-0 flex-1 items-center">
-			<BookMarked class="mr-1.5 size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
+		<div class="mt-2xs mr-xs flex min-w-0 flex-1 items-center">
+			<BookMarked
+				class="mr-1.5 size-3.5 shrink-0 text-foreground-subtle"
+				aria-hidden="true"
+			/>
 			<a
 				href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")}
 				class="min-w-0 truncate text-foreground-default no-underline hover:underline"
@@ -44,7 +53,7 @@
 			</a>
 		</div>
 		{#if starButton}
-			<div class="ml-4 shrink-0">
+			<div class="ml-md shrink-0">
 				<StarButton
 					subject={{
 						kind: "repo",
@@ -54,7 +63,8 @@
 					}}
 					initialCount={repo.stars}
 					initialRkey={repo.viewerStarRkey}
-					insetShadow={false}
+					hideCount={true}
+					onAdjust={(delta) => starCount.adjust(delta)}
 					onCommit={onStar}
 				/>
 			</div>
@@ -69,10 +79,10 @@
 
 	{#if repo.language !== undefined || stats.length > 0}
 		<div
-			class="mt-auto flex flex-wrap items-center gap-4 pt-2 typography-monospace-small text-foreground-muted"
+			class="mt-auto flex flex-wrap items-center gap-md pt-xs typography-monospace-small text-foreground-muted"
 		>
 			{#if repo.language}
-				<span class="flex items-center gap-2">
+				<span class="flex items-center gap-xs">
 					<ColorBall
 						color={LANGUAGE_COLORS[repo.language] ?? LANGUAGE_COLOR_FALLBACK}
 						class="size-2.5"
@@ -81,7 +91,7 @@
 				</span>
 			{/if}
 			{#each stats as stat (stat.Icon)}
-				<span class="flex items-center gap-1">
+				<span class="flex items-center gap-2xs">
 					<stat.Icon class="size-3.5 shrink-0" aria-hidden="true" />
 					<span>{formatCount(stat.value)}</span>
 				</span>
diff --git a/web/src/lib/components/repo/RepoCreationForm.svelte b/web/src/lib/components/repo/RepoCreationForm.svelte
index ab0dd7af0..458fca497 100644
--- a/web/src/lib/components/repo/RepoCreationForm.svelte
+++ b/web/src/lib/components/repo/RepoCreationForm.svelte
@@ -40,7 +40,7 @@
 	import AccountSelector from "$lib/components/auth/AccountSelector.svelte";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
-	import Button from "$lib/components/ui/Button.svelte";
+	import Button, { buttonIcon } from "$lib/components/ui/Button.svelte";
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import FormStep from "$lib/components/ui/FormStep.svelte";
@@ -189,15 +189,15 @@
 	}}
 >
 	<FormStep step={1} title="Details" description="Basic repository information.">
-		<div class="space-y-4">
+		<div class="space-y-md">
 			<div>
 				<label
 					for="repo_name"
-					class="mb-1 block typography-paragraph-small font-bold text-foreground-default"
+					class="mb-2xs block typography-paragraph-small font-bold text-foreground-default"
 				>
 					Repository name
 				</label>
-				<div class="flex w-full flex-col gap-2 md:flex-row md:items-center md:gap-0">
+				<div class="flex w-full flex-col gap-xs md:flex-row md:items-center md:gap-none">
 					{#if owners.length > 1}
 						<AccountSelector
 							accounts={owners}
@@ -205,11 +205,11 @@
 							label="Repository owner"
 							disabled={!user || action.loading}
 							group="repo-creation"
-							class="min-w-0 md:mr-2 md:max-w-[55%]"
+							class="min-w-0 md:mr-xs md:max-w-[55%]"
 						/>
 					{:else}
 						<div
-							class="hidden shrink-0 items-center gap-1 p-2 typography-paragraph-small text-foreground-muted md:flex md:rounded-l md:border md:border-r-0 md:border-border-default md:bg-background-inset"
+							class="hidden shrink-0 items-center gap-2xs p-xs typography-paragraph-small text-foreground-muted md:flex md:rounded-l md:border md:border-r-0 md:border-border-default md:bg-background-inset"
 						>
 							<Avatar did={user?.did} handle={user?.handle} size="regular" />
 							<span>{user?.handle ?? "…"}</span>
@@ -227,11 +227,11 @@
 							: "flex-1 md:rounded-l-none md:rounded-r"}
 					/>
 				</div>
-				{#if ownersLoading}<p class="mt-1 typography-paragraph-small text-foreground-muted">
+				{#if ownersLoading}<p class="mt-2xs typography-paragraph-small text-foreground-muted">
 						Loading organizations…
 					</p>{/if}
-				<ErrorAlert label={ownersError ?? undefined} class="mt-2" />
-				<p class="mt-1 typography-paragraph-small text-foreground-muted">
+				<ErrorAlert label={ownersError ?? undefined} class="mt-xs" />
+				<p class="mt-2xs typography-paragraph-small text-foreground-muted">
 					Choose a unique, descriptive name. Use letters, numbers, periods, underscores,
 					and hyphens.
 				</p>
@@ -240,7 +240,7 @@
 			<div>
 				<label
 					for="repo_description"
-					class="mb-1 block typography-paragraph-small font-bold text-foreground-default"
+					class="mb-2xs block typography-paragraph-small font-bold text-foreground-default"
 				>
 					Description
 				</label>
@@ -277,10 +277,10 @@
 			{/if}
 
 			<div>
-				<div class="mb-1 typography-paragraph-small font-bold text-foreground-default">
+				<div class="mb-2xs typography-paragraph-small font-bold text-foreground-default">
 					Select a knot
 				</div>
-				<div class="space-y-2">
+				<div class="space-y-xs">
 					{#await preferences}
 						<Bones capture={bonesRadioLoadingRow} class="w-36.25" />
 					{:then saved}
@@ -298,7 +298,7 @@
 						{/each}
 					{/await}
 				</div>
-				<p class="mt-2 typography-paragraph-small text-foreground-muted">
+				<p class="mt-xs typography-paragraph-small text-foreground-muted">
 					A knot hosts repository data and handles Git operations. You can also
 					<a href={resolve("/settings/knots")} class="underline">register your own knot</a
 					>.
@@ -333,8 +333,8 @@
 		</p>
 	</FormStepDisclosure>
 
-	<ErrorAlert label={action.error} class="mt-6" />
-	<div class="mt-8 flex justify-end">
+	<ErrorAlert label={action.error} class="mt-xl" />
+	<div class="mt-2xl flex justify-end">
 		<Button
 			variant="primary"
 			type="submit"
@@ -343,7 +343,7 @@
 			disabled={!user || !selectedKnot || action.loading}
 		>
 			{#if action.loading}
-				<Spinner class="size-4" />
+				<Spinner class={buttonIcon()} />
 				{pendingLabel}
 			{:else}
 				{submitLabel}
diff --git a/web/src/lib/components/repo/RepoForkForm.svelte b/web/src/lib/components/repo/RepoForkForm.svelte
index 6547824da..a6a4c1d51 100644
--- a/web/src/lib/components/repo/RepoForkForm.svelte
+++ b/web/src/lib/components/repo/RepoForkForm.svelte
@@ -31,9 +31,9 @@
 	};
 </script>
 
-<div class="mx-auto w-full max-w-2xl px-4 py-12">
-	<div class="px-6 py-2">
-		<h1 class="flex flex-wrap items-center gap-2 typography-heading-4 text-foreground-default">
+<div class="mx-auto w-full max-w-medium px-md py-4xl">
+	<div class="px-xl py-xs">
+		<h1 class="flex flex-wrap items-center gap-xs typography-heading-4 text-foreground-default">
 			<GitFork class="size-5 shrink-0" aria-hidden="true" />
 			Fork
 			<span class="font-normal">{repo.ownerHandle}/{repo.name}</span>
@@ -41,7 +41,7 @@
 	</div>
 
 	<Card padding="none" class="overflow-hidden">
-		<div class="border-b border-border-default px-6 py-4 typography-paragraph-small">
+		<div class="border-b border-border-default px-xl py-md typography-paragraph-small">
 			<p class="font-medium text-foreground-default">A fork is a copy of a repository.</p>
 			<p class="text-foreground-subtle">
 				Forking gives you your own copy to work on independently.
@@ -49,7 +49,7 @@
 		</div>
 
 		<RepoCreationForm
-			class="p-6"
+			class="p-xl"
 			initial={{ name: repo.name, description: repo.description ?? "" }}
 			submitLabel="Fork repository"
 			pendingLabel="Forking repository…"
diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index 0150ebff8..a843d2ae7 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -44,7 +44,6 @@
 			<Button
 				href={resolve(`${base}/fork` as "/")}
 				variant="default"
-				size="small"
 				insetShadow={true}
 				icon={GitFork}
 				class="flex-1"
@@ -54,7 +53,6 @@
 			<Button
 				href={resolve(`${base}/forks` as "/")}
 				variant="ghost"
-				size="small"
 				title="Forked by"
 			>
 				{#if typeof counts === "object" && counts !== null && "then" in counts}
@@ -76,13 +74,13 @@
 	</div>
 {/snippet}
 
-<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 typography-paragraph-large font-normal">
+<section class="mb-xs px-md py-xs">
+	<div class="mb-xs flex flex-col items-start justify-between gap-md sm:flex-row">
+		<div class="flex min-w-0 flex-col gap-xs">
+			<div class="flex flex-wrap items-center gap-xs typography-paragraph-large font-normal">
 				<a
 					href={resolve(`/${repo.ownerHandle}` as "/")}
-					class="flex items-center gap-2 text-foreground-default no-underline hover:underline"
+					class="flex items-center gap-xs text-foreground-default no-underline hover:underline"
 				>
 					<Avatar did={repo.ownerDid} handle={repo.ownerHandle} size="large" />
 					{repo.ownerHandle}
@@ -97,12 +95,12 @@
 			</div>
 		</div>
 
-		{@render repoActions("hidden shrink-0 items-start gap-2 sm:flex")}
+		{@render repoActions("hidden shrink-0 items-start gap-xs sm:flex")}
 	</div>
 
-	<div class="flex flex-col gap-1">
+	<div class="flex flex-col gap-2xs">
 		<div
-			class="flex flex-wrap items-center gap-x-4 gap-y-1 typography-paragraph-small text-foreground-muted"
+			class="flex flex-wrap items-center gap-x-md gap-y-2xs typography-paragraph-small text-foreground-muted"
 		>
 			{#if repo.description}
 				<span>{repo.description}</span>
@@ -111,8 +109,8 @@
 			<Pending>
 				{@const resolvedSource = await (source ?? repo.source)}
 				{#if resolvedSource}
-					<span class="flex items-center gap-1">
-						<GitFork class="size-3 shrink-0" aria-hidden="true" />
+					<span class="flex items-center gap-2xs">
+						<GitFork class="size-3.5 shrink-0" aria-hidden="true" />
 						<span>forked from</span>
 						<a
 							href={resolve(
@@ -129,8 +127,8 @@
 			</Pending>
 
 			{#if repo.website}
-				<span class="flex items-center gap-1">
-					<Globe class="size-4 shrink-0" aria-hidden="true" />
+				<span class="flex items-center gap-2xs">
+					<Globe class="size-3.5 shrink-0" aria-hidden="true" />
 					<a href={repo.website} rel="external ugc nofollow noopener noreferrer"
 						>{trimScheme(repo.website)}</a
 					>
@@ -141,5 +139,5 @@
 		<TopicList {topics} />
 	</div>
 
-	{@render repoActions("mt-2 flex flex-wrap items-start justify-end gap-2 sm:hidden")}
+	{@render repoActions("mt-xs flex flex-wrap items-start justify-end gap-xs sm:hidden")}
 </section>
diff --git a/web/src/lib/components/repo/RepoIndexView.svelte b/web/src/lib/components/repo/RepoIndexView.svelte
index 48bef98ff..c3a89f104 100644
--- a/web/src/lib/components/repo/RepoIndexView.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.svelte
@@ -15,7 +15,7 @@
 	import TagList from "$lib/components/repo/TagList.svelte";
 	import RepoToolbar from "$lib/components/repo/RepoToolbar.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";
 	import type { Settled } from "$lib/api/load";
 	import type { loadRepoIndex } from "$lib/api/repoIndex";
 	import type { CommitStatuses } from "$lib/api/commitStatuses";
@@ -39,15 +39,15 @@
 	{/snippet}
 
 	{@const content = await data.content}
-	<TabPanel class="relative mx-auto w-full">
+	<Card class="relative mx-auto w-full">
 		{#if content.availability === "needs-upgrade"}
 			<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
 				<div>
-					<span class="flex items-center justify-center gap-2">
+					<span class="flex items-center justify-center gap-xs">
 						<TriangleAlert class="size-5 shrink-0" aria-hidden="true" />
 						The knot hosting this repository needs an upgrade.
 					</span>
-					<p class="mt-2">
+					<p class="mt-xs">
 						This repository is currently unavailable.
 						<a
 							href="https://docs.tangled.org/migrating-knots-and-spindles.html"
@@ -59,7 +59,7 @@
 			</div>
 		{:else if content.availability === "unreachable"}
 			<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
-				<span class="flex items-center gap-2">
+				<span class="flex items-center gap-xs">
 					<TriangleAlert class="size-5 shrink-0" aria-hidden="true" />
 					The knot hosting this repository is unreachable.
 				</span>
@@ -84,8 +84,8 @@
 				totalTags={content.totalTags}
 				{bobbinUrl}
 			/>
-			<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
-				<div class="min-w-0 pr-2 md:border-r md:border-border-default">
+			<div class="grid grid-cols-1 gap-xs md:grid-cols-2">
+				<div class="min-w-0 pr-xs md:border-r md:border-border-default">
 					<FileTree
 						ownerHandle={repo.ownerHandle}
 						repoName={repo.name}
@@ -96,7 +96,7 @@
 
 				<div class="hidden md:block">
 					{#if content.commits.length > 0}
-						<div class="border-border-default pr-2 pb-4 md:px-2">
+						<div class="border-border-default pr-xs pb-md md:px-xs">
 							<PanelHeader
 								title="Commits"
 								icon={Logs}
@@ -114,7 +114,7 @@
 					{/if}
 
 					{#if content.branches.length > 0}
-						<div class="border-t border-border-default py-4 pr-2 md:px-2">
+						<div class="border-t border-border-default py-md pr-xs md:px-xs">
 							<PanelHeader
 								title="Branches"
 								icon={GitBranch}
@@ -132,7 +132,7 @@
 					{/if}
 
 					{#if content.tags.length > 0}
-						<div class="border-t border-border-default py-4 pr-2 md:px-2">
+						<div class="border-t border-border-default py-md pr-xs md:px-xs">
 							<PanelHeader
 								title="Tags"
 								icon={Tags}
@@ -150,7 +150,7 @@
 				</div>
 			</div>
 		{/if}
-	</TabPanel>
+	</Card>
 </Pending>
 
 <Pending>
diff --git a/web/src/lib/components/repo/RepoReadmeSkeleton.svelte b/web/src/lib/components/repo/RepoReadmeSkeleton.svelte
index 243423967..7ede0f2e8 100644
--- a/web/src/lib/components/repo/RepoReadmeSkeleton.svelte
+++ b/web/src/lib/components/repo/RepoReadmeSkeleton.svelte
@@ -3,4 +3,4 @@
 	import Bones from "$lib/components/ui/Bones.svelte";
 </script>
 
-<Bones class="mt-4" capture={repoReadmeRenderedSanitizedHtml} />
+<Bones class="mt-md" capture={repoReadmeRenderedSanitizedHtml} />
diff --git a/web/src/lib/components/repo/RepoToolbar.svelte b/web/src/lib/components/repo/RepoToolbar.svelte
index 0708a4e1b..6de6851c5 100644
--- a/web/src/lib/components/repo/RepoToolbar.svelte
+++ b/web/src/lib/components/repo/RepoToolbar.svelte
@@ -27,7 +27,7 @@
 	const encodedRef = $derived(encodeURIComponent(ref));
 </script>
 
-<div class="flex flex-wrap items-center justify-between gap-3 pb-5">
+<div class="flex flex-wrap items-center justify-between gap-sm pb-lg">
 	<RefSelector
 		ownerHandle={repo.ownerHandle}
 		repoName={repo.name}
@@ -54,8 +54,8 @@
 		/>
 	</form>
 
-	<div class="flex w-full items-center justify-between gap-3 md:w-auto">
-		<div class="flex items-center gap-3 md:hidden">
+	<div class="flex w-full items-center justify-between gap-sm md:w-auto">
+		<div class="flex items-center gap-sm md:hidden">
 			<PanelHeader
 				compact
 				title="Commits"
diff --git a/web/src/lib/components/repo/StarredBy.bones.stories.svelte b/web/src/lib/components/repo/StarredBy.bones.stories.svelte
index fdaea2adc..c283e06f7 100644
--- a/web/src/lib/components/repo/StarredBy.bones.stories.svelte
+++ b/web/src/lib/components/repo/StarredBy.bones.stories.svelte
@@ -21,7 +21,7 @@
 </script>
 
 <Story name="Skeleton fixture" asChild>
-	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+	<div class="grid grid-cols-1 gap-md sm:grid-cols-2 lg:grid-cols-3">
 		{#each starrers as starrer (starrer.did)}
 			<StarredBy {...starrer} />
 		{/each}
diff --git a/web/src/lib/components/repo/StarredBy.svelte b/web/src/lib/components/repo/StarredBy.svelte
index 25c5cdafb..028888aeb 100644
--- a/web/src/lib/components/repo/StarredBy.svelte
+++ b/web/src/lib/components/repo/StarredBy.svelte
@@ -11,6 +11,6 @@
 	let { did, handle, createdAt }: Props = $props();
 </script>
 
-<Card border shadow={false} padding="small">
+<Card border padding="small">
 	<StarredByContent {did} {handle} {createdAt} />
 </Card>
diff --git a/web/src/lib/components/repo/StarredByContent.svelte b/web/src/lib/components/repo/StarredByContent.svelte
index 5c9996201..e32b1d1c1 100644
--- a/web/src/lib/components/repo/StarredByContent.svelte
+++ b/web/src/lib/components/repo/StarredByContent.svelte
@@ -12,7 +12,7 @@
 	let { did, handle, createdAt }: Props = $props();
 </script>
 
-<div class="flex items-center gap-3">
+<div class="flex items-center gap-sm">
 	<div class="flex size-10 shrink-0 items-center justify-center">
 		<Avatar {did} {handle} size="full" />
 	</div>
@@ -23,7 +23,7 @@
 		>
 			{handle}
 		</a>
-		<p class="text-sm text-foreground-muted">
+		<p class="typography-paragraph-regular text-foreground-muted">
 			Starred <TimeAgo value={createdAt} variant="full" />
 		</p>
 	</div>
diff --git a/web/src/lib/components/repo/TagCard.svelte b/web/src/lib/components/repo/TagCard.svelte
index c62553207..abc2f2de8 100644
--- a/web/src/lib/components/repo/TagCard.svelte
+++ b/web/src/lib/components/repo/TagCard.svelte
@@ -26,15 +26,17 @@
 	<div
 		class="w-full border-b border-border-default md:col-span-2 md:h-full md:border-r md:border-b-0"
 	>
-		<div class="flex flex-col p-2 text-xl md:hidden">
+		<div class="flex flex-col p-xs typography-heading-4 md:hidden">
 			<a
 				href={tagHref}
-				class="flex items-center gap-2 font-bold text-foreground-default no-underline hover:underline"
+				class="flex items-center gap-xs font-bold text-foreground-default no-underline hover:underline"
 			>
 				<TagIcon class="size-4" aria-hidden="true" />
 				{tag.name}
 			</a>
-			<div class="flex items-center gap-1 typography-paragraph-regular text-foreground-muted">
+			<div
+				class="flex items-center gap-2xs typography-paragraph-regular text-foreground-muted"
+			>
 				<a
 					href={commitHref}
 					class="typography-monospace-regular no-underline hover:underline">{shortHash}</a
@@ -50,10 +52,10 @@
 			</div>
 		</div>
 
-		<div class="hidden px-2 pb-6 text-left md:block">
+		<div class="hidden px-xs pb-xl text-left md:block">
 			<a
 				href={tagHref}
-				class="flex items-center gap-2 font-bold text-foreground-default no-underline hover:underline"
+				class="flex items-center gap-xs font-bold text-foreground-default no-underline hover:underline"
 			>
 				<TagIcon class="size-4" aria-hidden="true" />
 				{tag.name}
@@ -61,9 +63,9 @@
 			<div class="flex flex-col typography-paragraph-regular text-foreground-muted">
 				<a
 					href={commitHref}
-					class="flex items-center gap-2 typography-monospace-regular no-underline hover:underline"
+					class="flex items-center gap-xs typography-monospace-regular no-underline hover:underline"
 				>
-					<GitCommitHorizontal class="size-4" aria-hidden="true" />
+					<GitCommitHorizontal class="size-3.5" aria-hidden="true" />
 					{shortHash}
 				</a>
 				{#if tag.taggerName}
@@ -76,11 +78,11 @@
 		</div>
 	</div>
 
-	<div class="px-2 py-3 md:col-span-10 md:py-0 md:pb-6">
+	<div class="px-xs py-sm md:col-span-10 md:py-none md:pb-xl">
 		{#if messageParts.length > 0}
 			<p class="typography-paragraph-large font-bold">{messageParts[0]}</p>
 			{#if messageParts.length > 1}
-				<p class="cursor-text py-2 whitespace-pre-wrap">{messageParts[1]}</p>
+				<p class="cursor-text py-xs whitespace-pre-wrap">{messageParts[1]}</p>
 			{/if}
 		{:else}
 			<EmptyState size="inline" message="No message" class="italic" />
diff --git a/web/src/lib/components/repo/TagList.stories.svelte b/web/src/lib/components/repo/TagList.stories.svelte
index 7e89f9469..6808e4a80 100644
--- a/web/src/lib/components/repo/TagList.stories.svelte
+++ b/web/src/lib/components/repo/TagList.stories.svelte
@@ -56,7 +56,7 @@
 <Story name="Tag without timestamp" args={{ tags: [tags[1]] }} />
 <Story name="No tags" args={{ tags: [] }} />
 <Story name="Skeleton fixture" asChild>
-	<div class="flex flex-col gap-12 py-2 md:gap-0">
+	<div class="flex flex-col gap-4xl py-xs md:gap-none">
 		{#each captureTags as tag (tag.name)}
 			<TagCard ownerHandle="dawn" repoName="tangled" {tag} />
 		{/each}
diff --git a/web/src/lib/components/repo/TagList.svelte b/web/src/lib/components/repo/TagList.svelte
index 9d4e67d40..72be31a0c 100644
--- a/web/src/lib/components/repo/TagList.svelte
+++ b/web/src/lib/components/repo/TagList.svelte
@@ -15,7 +15,7 @@
 	const base = $derived(`/${ownerHandle}/${repoName}`);
 </script>
 
-<div class="flex flex-col gap-3 py-1">
+<div class="flex flex-col gap-sm py-2xs">
 	{#each tags as tag, index (tag.name)}
 		<div>
 			<div class="flex items-center">
@@ -27,7 +27,7 @@
 				</a>
 			</div>
 			{#if tag.when || index === 0}
-				<div class="flex items-center gap-2">
+				<div class="flex items-center gap-xs">
 					{#if tag.when}
 						<TimeAgo
 							value={tag.when}
diff --git a/web/src/lib/components/repo/TopicList.svelte b/web/src/lib/components/repo/TopicList.svelte
index d4e0a221b..5b5d7e7c6 100644
--- a/web/src/lib/components/repo/TopicList.svelte
+++ b/web/src/lib/components/repo/TopicList.svelte
@@ -46,7 +46,7 @@
 {#if topics.length}
 	<div class="relative min-w-0" bind:clientWidth={containerWidth}>
 		<div
-			class="pointer-events-none invisible absolute inset-x-0 top-0 flex items-center gap-1"
+			class="pointer-events-none invisible absolute inset-x-0 top-0 flex items-center gap-2xs"
 			aria-hidden="true"
 		>
 			{#each topics as topic, i (topic)}
@@ -59,7 +59,7 @@
 			>
 		</div>
 
-		<div class="flex flex-wrap items-center gap-1">
+		<div class="flex flex-wrap items-center gap-2xs">
 			{#each topics.slice(0, visibleCount) as topic (topic)}
 				<Tag color="gray">{topic}</Tag>
 			{/each}
@@ -68,7 +68,7 @@
 					<summary class="cursor-pointer text-foreground-default underline"
 						>+{hiddenCount} more</summary
 					>
-					<div class="flex basis-full flex-wrap items-center gap-1">
+					<div class="flex basis-full flex-wrap items-center gap-2xs">
 						{#each topics.slice(visibleCount) as topic (topic)}
 							<Tag color="gray">{topic}</Tag>
 						{/each}
diff --git a/web/src/lib/components/repo/TreeHeader.svelte b/web/src/lib/components/repo/TreeHeader.svelte
index bcf192de5..c3dee4d0f 100644
--- a/web/src/lib/components/repo/TreeHeader.svelte
+++ b/web/src/lib/components/repo/TreeHeader.svelte
@@ -21,11 +21,11 @@
 	const plural = (count: number, noun: string) => `${count} ${noun}${count === 1 ? "" : "s"}`;
 </script>
 
-<div class="mb-2 flex items-center justify-between gap-2 typography-paragraph-regular md:mb-4">
-	<div class="flex min-w-0 items-center gap-3">
+<div class="mb-xs flex items-center justify-between gap-xs typography-paragraph-regular md:mb-md">
+	<div class="flex min-w-0 items-center gap-sm">
 		<RepoCrumbs {ownerHandle} {repoName} {ref} {path} />
 
-		<div class="flex items-center gap-2 typography-paragraph-small text-foreground-muted">
+		<div class="flex items-center gap-xs typography-paragraph-small text-foreground-muted">
 			{#if folders > 0}
 				<span>{plural(folders, "folder")}</span>
 			{/if}
diff --git a/web/src/lib/components/repo/TreeView.bones.stories.svelte b/web/src/lib/components/repo/TreeView.bones.stories.svelte
index a19061239..81e038fd0 100644
--- a/web/src/lib/components/repo/TreeView.bones.stories.svelte
+++ b/web/src/lib/components/repo/TreeView.bones.stories.svelte
@@ -3,7 +3,7 @@
 	import FileTree from "$lib/components/repo/FileTree.svelte";
 	import LastCommitPanel from "$lib/components/repo/LastCommitPanel.svelte";
 	import TreeHeader from "$lib/components/repo/TreeHeader.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 
 	const entries = Array.from({ length: 24 }, (_, index) => ({
 		name:
@@ -33,7 +33,7 @@
 </script>
 
 <Story name="Skeleton fixture" asChild>
-	<TabPanel padded={false} class="relative mx-auto w-full p-4">
+	<Card padding="none" class="relative mx-auto w-full p-md">
 		<TreeHeader ownerHandle="dawn" repoName="tangled" ref="main" path="src/lib" {entries} />
 		<LastCommitPanel ownerHandle="dawn" repoName="tangled" {commit} />
 		<FileTree
@@ -44,5 +44,5 @@
 			path="src/lib"
 			withMessage
 		/>
-	</TabPanel>
+	</Card>
 </Story>
-- 
2.51.2