From 39c8b0854deb618d00e5fa5d0482e57ae9b56dc4 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Sat, 19 Sep 2026 03:05:31 +0200
Subject: [PATCH] web/ui: rescale primitives onto the spacing scale

Signed-off-by: eti <eti@eti.tf>
---
 .../components/repo/pulls/PullCompose.svelte  |  5 +-
 .../lib/components/ui/Avatar.stories.svelte   |  4 +-
 .../lib/components/ui/Button.stories.svelte   | 14 ++--
 web/src/lib/components/ui/Button.svelte       | 42 +++++++++---
 .../components/ui/ButtonCard.stories.svelte   |  2 +-
 web/src/lib/components/ui/ButtonCard.svelte   |  6 +-
 .../components/ui/ButtonGroup.stories.svelte  |  4 +-
 web/src/lib/components/ui/ButtonGroup.svelte  |  6 +-
 web/src/lib/components/ui/Card.stories.svelte | 15 ++--
 web/src/lib/components/ui/Card.svelte         | 15 +---
 .../lib/components/ui/Checkbox.stories.svelte |  2 +-
 web/src/lib/components/ui/Checkbox.svelte     | 66 ++++++++++--------
 web/src/lib/components/ui/Combobox.svelte     | 20 +++---
 .../components/ui/CopyButton.stories.svelte   |  6 +-
 web/src/lib/components/ui/CopyButton.svelte   |  6 +-
 .../lib/components/ui/Dropdown.stories.svelte |  4 +-
 web/src/lib/components/ui/Dropdown.svelte     |  4 +-
 web/src/lib/components/ui/DropdownItem.svelte |  2 +-
 .../components/ui/EmptyState.stories.svelte   |  5 +-
 web/src/lib/components/ui/EmptyState.svelte   | 10 ++-
 web/src/lib/components/ui/Error.svelte        | 24 +++----
 .../lib/components/ui/Field.stories.svelte    |  2 +-
 .../components/ui/GraphCell.stories.svelte    | 12 ++--
 .../components/ui/Hovercard.stories.svelte    |  4 +-
 web/src/lib/components/ui/Hovercard.svelte    |  2 +-
 .../lib/components/ui/Input.stories.svelte    | 22 +++---
 web/src/lib/components/ui/Input.svelte        |  4 +-
 web/src/lib/components/ui/Link.svelte         |  4 +-
 web/src/lib/components/ui/ListPanel.svelte    | 25 +++++++
 web/src/lib/components/ui/ListToolbar.svelte  | 46 +++++++++++++
 web/src/lib/components/ui/Logo.stories.svelte |  6 +-
 web/src/lib/components/ui/Logo.svelte         |  4 +-
 .../lib/components/ui/MarkdownEditor.svelte   |  6 +-
 web/src/lib/components/ui/Modal.svelte        | 12 ++--
 .../lib/components/ui/MoreMenu.stories.svelte |  2 +-
 web/src/lib/components/ui/MoreMenu.svelte     |  6 +-
 web/src/lib/components/ui/Pagination.svelte   |  6 +-
 web/src/lib/components/ui/Radio.svelte        | 51 +++++++-------
 .../ui/RangeSelector.stories.svelte           | 10 +--
 web/src/lib/components/ui/ResizeHandle.svelte |  2 +-
 .../lib/components/ui/RoutePagination.svelte  |  2 +-
 .../lib/components/ui/Section.stories.svelte  | 14 ++--
 web/src/lib/components/ui/Section.svelte      |  4 +-
 .../lib/components/ui/Select.stories.svelte   |  2 +-
 web/src/lib/components/ui/Select.svelte       |  6 +-
 .../components/ui/Separator.stories.svelte    | 15 ++--
 .../components/ui/ShimmerText.stories.svelte  |  2 +-
 web/src/lib/components/ui/SignupPrompt.svelte |  2 +-
 .../lib/components/ui/Spinner.stories.svelte  |  2 +-
 web/src/lib/components/ui/SplitButton.svelte  |  4 +-
 .../lib/components/ui/TabPanel.stories.svelte | 59 ----------------
 web/src/lib/components/ui/TabPanel.svelte     | 35 ----------
 web/src/lib/components/ui/Tabs.svelte         | 16 ++---
 web/src/lib/components/ui/Tag.svelte          | 18 ++---
 web/src/lib/components/ui/TagInput.svelte     | 32 +++++----
 .../lib/components/ui/Textarea.stories.svelte |  2 +-
 web/src/lib/components/ui/Textarea.svelte     | 10 +--
 .../lib/components/ui/Toggle.stories.svelte   |  4 +-
 web/src/lib/components/ui/Toggle.svelte       | 68 +++++++++++--------
 .../lib/components/ui/Tooltip.stories.svelte  | 16 ++---
 web/src/lib/components/ui/Tooltip.svelte      |  4 +-
 web/src/lib/components/ui/User.stories.svelte |  2 +-
 web/src/lib/components/ui/User.svelte         |  4 +-
 web/src/lib/components/ui/inputField.ts       |  7 +-
 64 files changed, 418 insertions(+), 400 deletions(-)
 create mode 100644 web/src/lib/components/ui/ListPanel.svelte
 create mode 100644 web/src/lib/components/ui/ListToolbar.svelte
 delete mode 100644 web/src/lib/components/ui/TabPanel.stories.svelte
 delete mode 100644 web/src/lib/components/ui/TabPanel.svelte

diff --git a/web/src/lib/components/repo/pulls/PullCompose.svelte b/web/src/lib/components/repo/pulls/PullCompose.svelte
index a023cd515..db2dbad38 100644
--- a/web/src/lib/components/repo/pulls/PullCompose.svelte
+++ b/web/src/lib/components/repo/pulls/PullCompose.svelte
@@ -49,7 +49,6 @@
 	import Select from "$lib/components/ui/Select.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
 	import StepMarker from "$lib/components/ui/StepMarker.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 	import Textarea from "$lib/components/ui/Textarea.svelte";
 	import DiffView from "$lib/components/repo/DiffView.svelte";
 	import PullCommitList from "$lib/components/repo/pulls/PullCommitList.svelte";
@@ -351,7 +350,7 @@
 {/snippet}
 
 <div class="flex flex-col gap-4">
-	<TabPanel class="py-6">
+	<Card class="py-6">
 		{#if view.prefillError}
 			<div
 				class="mb-4 flex items-center gap-2 rounded-sm border border-border-danger bg-background-danger-subtle px-3 py-2 typography-paragraph-small text-foreground-danger"
@@ -555,7 +554,7 @@
 				{/if}
 			</section>
 		</form>
-	</TabPanel>
+	</Card>
 
 	{#if view.showDetails && view.source !== "patch"}
 		<Card padding="small" class="space-y-2">
diff --git a/web/src/lib/components/ui/Avatar.stories.svelte b/web/src/lib/components/ui/Avatar.stories.svelte
index dc3410ae0..30f876b30 100644
--- a/web/src/lib/components/ui/Avatar.stories.svelte
+++ b/web/src/lib/components/ui/Avatar.stories.svelte
@@ -27,9 +27,9 @@
 <Story name="Broken image" args={{ src: "https://example.invalid/broken.png" }} />
 
 <Story name="Sizes" asChild>
-	<div class="flex items-end gap-3">
+	<div class="flex items-end gap-sm">
 		{#each scale as size (size)}
-			<div class="flex flex-col items-center gap-1">
+			<div class="flex flex-col items-center gap-2xs">
 				<Avatar handle="user.tld" {size} />
 				<span class="typography-paragraph-mini text-foreground-muted">{size}</span>
 			</div>
diff --git a/web/src/lib/components/ui/Button.stories.svelte b/web/src/lib/components/ui/Button.stories.svelte
index d7dd65734..901f6b221 100644
--- a/web/src/lib/components/ui/Button.stories.svelte
+++ b/web/src/lib/components/ui/Button.stories.svelte
@@ -187,16 +187,17 @@
 </Story>
 
 <Story name="Inset shadow" asChild>
-	<div class="flex items-center gap-3">
+	<div class="flex items-center gap-sm">
 		<Button insetShadow>Button</Button>
 		<Button variant="primary" insetShadow>Save</Button>
 	</div>
 </Story>
 
 <Story name="Sizes" asChild>
-	<div class="flex items-center gap-3">
+	<div class="flex items-center gap-sm">
+		<Button size="mini">Mini</Button>
 		<Button size="small">Small</Button>
-		<Button size="regular">Medium</Button>
+		<Button size="regular">Regular</Button>
 		<Button size="large">Large</Button>
 	</div>
 </Story>
@@ -207,16 +208,17 @@
 
 <!-- the icon rides the same gap and scales with the size variant. -->
 <Story name="Icon sizes" asChild>
-	<div class="flex items-center gap-3">
+	<div class="flex items-center gap-sm">
+		<Button size="mini" icon={Star}>Mini</Button>
 		<Button size="small" icon={Star}>Small</Button>
-		<Button size="regular" icon={Star}>Medium</Button>
+		<Button size="regular" icon={Star}>Regular</Button>
 		<Button size="large" icon={Star}>Large</Button>
 	</div>
 </Story>
 
 <!-- press these: the icon and label sink together while the button box stays put. -->
 <Story name="Icons with inset shadow" asChild>
-	<div class="flex items-center gap-3">
+	<div class="flex items-center gap-sm">
 		<Button insetShadow icon={Star}>Star</Button>
 		<Button variant="primary" insetShadow icon={GitFork}>Fork</Button>
 		<Button insetShadow icon={ChevronRight} iconSide="right">Next</Button>
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 2260561c0..1bbca5335 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -52,10 +52,15 @@
 				]
 			},
 			size: {
-				mini: "min-h-6 gap-1 px-1 py-0.5 typography-paragraph-mini",
-				small: "min-h-8 gap-1.5 px-2 py-1 typography-paragraph-small",
-				regular: "min-h-9 gap-2 px-3 py-1 typography-paragraph-regular",
-				large: "min-h-10 gap-2.5 px-4 py-1 typography-paragraph-large"
+				mini: "min-h-6 gap-2xs px-2xs py-3xs typography-paragraph-mini",
+				small: "min-h-7 gap-2xs px-2 py-3xs typography-paragraph-small",
+				regular: "min-h-8 gap-1.5 px-sm py-3xs typography-paragraph-regular",
+				large: "min-h-9 gap-xs px-sm py-3xs typography-paragraph-large"
+			},
+			iconSide: {
+				left: "",
+				right: "",
+				none: ""
 			},
 			insetShadow: {
 				true: "",
@@ -63,6 +68,14 @@
 			}
 		},
 		compoundVariants: [
+			{ size: "mini", iconSide: "left", class: "pl-1" },
+			{ size: "mini", iconSide: "right", class: "pr-1" },
+			{ size: "small", iconSide: "left", class: "pl-1.75" },
+			{ size: "small", iconSide: "right", class: "pr-1.75" },
+			{ size: "regular", iconSide: "left", class: "pl-2.25" },
+			{ size: "regular", iconSide: "right", class: "pr-2.25" },
+			{ size: "large", iconSide: "left", class: "pl-2.75" },
+			{ size: "large", iconSide: "right", class: "pr-2.75" },
 			{
 				variant: ["default", "danger", "success", "warning"],
 				insetShadow: true,
@@ -86,6 +99,7 @@
 		defaultVariants: {
 			variant: "default",
 			size: "regular",
+			iconSide: "none",
 			insetShadow: false
 		}
 	});
@@ -94,10 +108,10 @@
 		base: "shrink-0",
 		variants: {
 			size: {
-				mini: "size-3.5",
-				small: "size-4",
-				regular: "size-4",
-				large: "size-5"
+				mini: "size-3",
+				small: "size-3.5",
+				regular: "size-3.5",
+				large: "size-4"
 			}
 		},
 		defaultVariants: {
@@ -139,7 +153,7 @@
 		type?: "button" | "submit" | "reset";
 		disabled?: boolean;
 		icon?: Component<SvelteHTMLElements["svg"]>;
-		iconSide?: string;
+		iconSide?: "left" | "right";
 		class?: string;
 		loading?: boolean;
 		holdToConfirm?: boolean;
@@ -168,7 +182,15 @@
 		...rest
 	}: Props = $props();
 
-	const classes = $derived(button({ variant, size, insetShadow, class: className }));
+	const classes = $derived(
+		button({
+			variant,
+			size,
+			insetShadow,
+			iconSide: icon && children ? iconSide : "none",
+			class: className
+		})
+	);
 	const spinnerClasses = $derived(buttonIcon({ size, class: spinnerClass }));
 	const iconClasses = $derived(buttonIcon({ size }));
 	const Icon = $derived(icon);
diff --git a/web/src/lib/components/ui/ButtonCard.stories.svelte b/web/src/lib/components/ui/ButtonCard.stories.svelte
index 43d9cf03e..bc318c1f4 100644
--- a/web/src/lib/components/ui/ButtonCard.stories.svelte
+++ b/web/src/lib/components/ui/ButtonCard.stories.svelte
@@ -35,7 +35,7 @@
 <Story name="Inset shadow" args={{ insetShadow: true, icon: Settings }} />
 
 <Story name="Variants">
-	<div class="grid grid-cols-2 gap-3">
+	<div class="grid grid-cols-2 gap-sm">
 		<ButtonCard variant="default" icon={Settings} title="Default" description="Bordered card" />
 		<ButtonCard variant="ghost" icon={Settings} title="Ghost" description="Transparent card" />
 	</div>
diff --git a/web/src/lib/components/ui/ButtonCard.svelte b/web/src/lib/components/ui/ButtonCard.svelte
index a04a421ee..21c0ab0b6 100644
--- a/web/src/lib/components/ui/ButtonCard.svelte
+++ b/web/src/lib/components/ui/ButtonCard.svelte
@@ -3,7 +3,7 @@
 
 	export const buttonCard = tv({
 		base: [
-			"flex h-40 w-48 cursor-pointer gap-3 rounded-(--btn-radius) px-4 py-3 no-underline select-none [--btn-radius:var(--radius-sm)]",
+			"flex h-40 w-48 cursor-pointer gap-sm rounded-(--btn-radius) px-md py-sm no-underline select-none [--btn-radius:var(--radius-sm)]",
 			"transition-colors duration-150 ease-in-out",
 			"hover:no-underline",
 			"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
@@ -89,9 +89,9 @@
 {#snippet content()}
 	<div class="flex flex-col items-start gap-1.5">
 		{#if title}
-			<div class="flex flex-row items-center gap-2">
+			<div class="flex flex-row items-center gap-xs">
 				{#if Icon}
-					<Icon class="size-4 shrink-0" aria-hidden="true" />
+					<Icon class="size-3.5 shrink-0" aria-hidden="true" />
 				{/if}
 				<span class="typography-paragraph-small font-medium text-foreground-default"
 					>{title}</span
diff --git a/web/src/lib/components/ui/ButtonGroup.stories.svelte b/web/src/lib/components/ui/ButtonGroup.stories.svelte
index 2117a24bc..fe1b2d96a 100644
--- a/web/src/lib/components/ui/ButtonGroup.stories.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.stories.svelte
@@ -35,7 +35,7 @@
 </Story>
 
 <Story name="Comparison">
-	<div class="flex flex-col gap-4">
+	<div class="flex flex-col gap-md">
 		<ButtonGroup spaced>
 			<Button>Button</Button>
 			<Button>Button</Button>
@@ -55,7 +55,7 @@
 	`ghost`. Never plain `default` for unselected — that reads as the hovered state.
 -->
 <Story name="Tab Switcher">
-	<div class="flex flex-col items-start gap-4">
+	<div class="flex flex-col items-start gap-md">
 		<ButtonGroup>
 			<Button {...segmentProps(true)}>Open</Button>
 			<Button {...segmentProps(false)}>Closed</Button>
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
index 1a32e35cb..896dc6236 100644
--- a/web/src/lib/components/ui/ButtonGroup.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -6,11 +6,11 @@
 		base: "inline-flex items-center",
 		variants: {
 			spaced: {
-				true: "gap-2",
+				true: "gap-xs",
 				false: [
-					"items-stretch gap-0 overflow-hidden rounded-sm border border-border-default bg-background-subtle dark:bg-background-canvas",
+					"relative items-stretch gap-none overflow-hidden rounded-sm bg-background-subtle dark:bg-background-canvas",
+					"after:pointer-events-none after:absolute after:inset-0 after:z-20 after:rounded-sm after:border after:border-border-default after:content-['']",
 					"*:relative *:border-y-0",
-					"[&>*:first-child]:-ml-px [&>*:last-child]:-mr-px",
 					"[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:[--btn-radius-l:0px]",
 					"[&>*:not(:last-child)]:[--btn-radius-r:0px]",
 					// a Dropdown keeps its trigger one level down, and the radius vars only
diff --git a/web/src/lib/components/ui/Card.stories.svelte b/web/src/lib/components/ui/Card.stories.svelte
index f8eb57973..8dad6ca85 100644
--- a/web/src/lib/components/ui/Card.stories.svelte
+++ b/web/src/lib/components/ui/Card.stories.svelte
@@ -8,13 +8,11 @@
 		tags: ["autodocs"],
 		argTypes: {
 			border: { control: "boolean" },
-			shadow: { control: "boolean" },
 			background: { control: "boolean" },
 			padding: { control: { type: "select" }, options: ["regular", "small", "none"] }
 		},
 		args: {
 			border: true,
-			shadow: false,
 			background: true,
 			padding: "regular"
 		}
@@ -23,16 +21,13 @@
 
 <!-- Card content comes through its `children` snippet, provided here as Story slot content. -->
 <Story name="Default">Card content</Story>
-<Story name="Elevated" args={{ shadow: true }}>Bordered card with shadow</Story>
-<Story name="Plain" args={{ border: false, background: false, shadow: false, padding: "none" }}>
-	Borderless, shadowless, background-less
+<Story name="Plain" args={{ border: false, background: false, padding: "none" }}>
+	Borderless, background-less
 </Story>
 
 <Story name="Variants">
-	<div class="flex flex-col gap-4">
-		<Card border shadow={false} background>Bordered, no shadow (profile / settings)</Card>
-		<Card border shadow background>Bordered + shadow (elevated)</Card>
-		<Card border={false} shadow={false} background={false} padding="none">Plain (timeline)</Card
-		>
+	<div class="flex flex-col gap-md">
+		<Card border background>Bordered (profile / settings)</Card>
+		<Card border={false} background={false} padding="none">Plain (timeline)</Card>
 	</div>
 </Story>
diff --git a/web/src/lib/components/ui/Card.svelte b/web/src/lib/components/ui/Card.svelte
index a2e41abf3..b48993144 100644
--- a/web/src/lib/components/ui/Card.svelte
+++ b/web/src/lib/components/ui/Card.svelte
@@ -12,24 +12,19 @@
 				true: "border border-border-default",
 				false: ""
 			},
-			shadow: {
-				true: "shadow-xs",
-				false: ""
-			},
 			background: {
 				true: "bg-background-default",
 				false: ""
 			},
 			padding: {
-				regular: "p-4",
-				small: "p-2",
+				regular: "p-sm",
+				small: "p-xs",
 				none: ""
 			}
 		},
 		defaultVariants: {
 			rounded: true,
 			border: true,
-			shadow: false,
 			background: true,
 			padding: "regular"
 		}
@@ -45,7 +40,6 @@
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> {
 		rounded?: CardVariants["rounded"];
 		border?: CardVariants["border"];
-		shadow?: CardVariants["shadow"];
 		background?: CardVariants["background"];
 		padding?: CardVariants["padding"];
 		class?: string;
@@ -55,7 +49,6 @@
 	let {
 		rounded = true,
 		border = true,
-		shadow = false,
 		background = true,
 		padding = "regular",
 		class: className,
@@ -63,9 +56,7 @@
 		...rest
 	}: Props = $props();
 
-	const classes = $derived(
-		card({ rounded, border, shadow, background, padding, class: className })
-	);
+	const classes = $derived(card({ rounded, border, background, padding, class: className }));
 </script>
 
 <div class={classes} {...rest}>
diff --git a/web/src/lib/components/ui/Checkbox.stories.svelte b/web/src/lib/components/ui/Checkbox.stories.svelte
index f297e38aa..e734c1244 100644
--- a/web/src/lib/components/ui/Checkbox.stories.svelte
+++ b/web/src/lib/components/ui/Checkbox.stories.svelte
@@ -26,7 +26,7 @@
 <Story name="Disabled checked" args={{ disabled: true, checked: true }}>Item</Story>
 
 <Story name="States">
-	<div class="flex flex-col gap-3">
+	<div class="flex flex-col gap-sm">
 		<Checkbox>Unchecked</Checkbox>
 		<Checkbox checked>Checked</Checkbox>
 		<Checkbox indeterminate>Indeterminate</Checkbox>
diff --git a/web/src/lib/components/ui/Checkbox.svelte b/web/src/lib/components/ui/Checkbox.svelte
index 56c5c7342..0882195dc 100644
--- a/web/src/lib/components/ui/Checkbox.svelte
+++ b/web/src/lib/components/ui/Checkbox.svelte
@@ -1,9 +1,41 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import type { HTMLInputAttributes } from "svelte/elements";
+	import { tv } from "tailwind-variants";
 	import Check from "$icon/check";
 	import Minus from "$icon/minus";
 
+	const checkbox = tv({
+		slots: {
+			label: "inline-flex items-center gap-xs",
+			input: [
+				"peer size-4 shrink-0 appearance-none rounded border border-border-default bg-background-default",
+				"transition-colors duration-150 checked:transition-none indeterminate:transition-none",
+				"hover:cursor-pointer hover:bg-background-inset",
+				"checked:border-foreground-default checked:bg-foreground-default checked:hover:bg-foreground-default",
+				"indeterminate:border-foreground-default indeterminate:bg-foreground-default indeterminate:hover:bg-foreground-default",
+				"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default",
+				"disabled:hover:pointer-events-none disabled:hover:bg-background-default"
+			],
+			check: [
+				"pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-background-default",
+				"peer-checked:block peer-indeterminate:hidden",
+				"peer-disabled:text-foreground-disabled peer-disabled:hover:cursor-default"
+			],
+			minus: [
+				"pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-background-default",
+				"peer-indeterminate:block",
+				"peer-disabled:text-foreground-disabled peer-disabled:hover:cursor-default"
+			]
+		},
+		variants: {
+			disabled: {
+				true: { label: "text-foreground-disabled hover:pointer-events-none" },
+				false: { label: "cursor-pointer" }
+			}
+		}
+	});
+
 	interface Props extends Omit<HTMLInputAttributes, "type" | "class" | "checked" | "children"> {
 		checked?: boolean;
 		indeterminate?: boolean;
@@ -21,45 +53,21 @@
 		...rest
 	}: Props = $props();
 
-	const labelClasses = $derived(
-		`inline-flex items-center gap-2 ${disabled ? "text-foreground-disabled hover:pointer-events-none" : "cursor-pointer"} ${className ?? ""}`
-	);
-
-	const inputClasses = [
-		"peer size-4 shrink-0 appearance-none rounded border border-border-default bg-background-default",
-		"transition-colors duration-150 checked:transition-none indeterminate:transition-none",
-		"hover:cursor-pointer hover:bg-background-inset",
-		"checked:border-foreground-default checked:bg-foreground-default checked:hover:bg-foreground-default",
-		"indeterminate:border-foreground-default indeterminate:bg-foreground-default indeterminate:hover:bg-foreground-default",
-		"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default",
-		"disabled:hover:pointer-events-none disabled:hover:bg-background-default"
-	].join(" ");
-
-	const checkClasses = [
-		"pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-background-default",
-		"peer-checked:block peer-indeterminate:hidden",
-		"peer-disabled:text-foreground-disabled peer-disabled:hover:cursor-default"
-	].join(" ");
-
-	const minusClasses = [
-		"pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-background-default",
-		"peer-indeterminate:block",
-		"peer-disabled:text-foreground-disabled peer-disabled:hover:cursor-default"
-	].join(" ");
+	const classes = $derived(checkbox({ disabled }));
 </script>
 
-<label class={labelClasses}>
+<label class={classes.label({ class: className })}>
 	<span class="relative inline-flex size-4 shrink-0">
 		<input
 			type="checkbox"
 			bind:checked
 			bind:indeterminate
 			{disabled}
-			class={inputClasses}
+			class={classes.input()}
 			{...rest}
 		/>
-		<Check class={checkClasses} aria-hidden="true" />
-		<Minus class={minusClasses} aria-hidden="true" />
+		<Check class={classes.check()} aria-hidden="true" />
+		<Minus class={classes.minus()} aria-hidden="true" />
 	</span>
 	{#if children}
 		<span>{@render children()}</span>
diff --git a/web/src/lib/components/ui/Combobox.svelte b/web/src/lib/components/ui/Combobox.svelte
index fafebabd0..bede0fca1 100644
--- a/web/src/lib/components/ui/Combobox.svelte
+++ b/web/src/lib/components/ui/Combobox.svelte
@@ -4,17 +4,17 @@
 	export const combobox = tv({
 		slots: {
 			root: "relative inline-block w-full",
-			trigger: "flex min-h-9 cursor-pointer items-center gap-2 px-2.5 py-1",
+			trigger: "flex min-h-8 cursor-pointer items-center gap-xs px-2.5 py-2xs",
 			value: "min-w-0 flex-1 truncate text-left typography-paragraph-regular",
-			panel: "combobox-panel fixed inset-auto z-50 m-0 hidden h-fit max-h-[min(24rem,calc(100dvh-1rem))] w-80 max-w-[calc(100vw-1rem)] popover-transition flex-col overflow-hidden rounded-sm border border-border-default bg-background-default p-0 text-foreground-default shadow-regular open:flex dark:shadow-none",
-			search: "shrink-0 border-b border-border-default p-2",
-			list: "min-h-0 flex-auto touch-pan-y overflow-y-auto overscroll-contain p-1 [-webkit-overflow-scrolling:touch]",
-			groupHeading: "px-2 pt-2 pb-1 font-semibold text-foreground-muted first:pt-1",
-			option: "flex w-full cursor-pointer items-center gap-2 rounded-sm bg-transparent px-2 py-1.5 text-left aria-disabled:cursor-not-allowed aria-disabled:text-foreground-disabled data-active:bg-background-subtle dark:data-active:bg-background-subtle",
-			check: "size-4 shrink-0 text-foreground-default",
+			panel: "combobox-panel fixed inset-auto z-50 m-none hidden h-fit max-h-[min(24rem,calc(100dvh-1rem))] w-80 max-w-[calc(100vw-1rem)] popover-transition flex-col overflow-hidden rounded-sm border border-border-default bg-background-default p-none text-foreground-default shadow-regular open:flex dark:shadow-none",
+			search: "shrink-0 border-b border-border-default p-xs",
+			list: "min-h-0 flex-auto touch-pan-y overflow-y-auto overscroll-contain p-2xs [-webkit-overflow-scrolling:touch]",
+			groupHeading: "px-xs pt-xs pb-2xs font-semibold text-foreground-muted first:pt-2xs",
+			option: "flex w-full cursor-pointer items-center gap-xs rounded-sm bg-transparent px-xs py-1.5 text-left aria-disabled:cursor-not-allowed aria-disabled:text-foreground-disabled data-active:bg-background-subtle dark:data-active:bg-background-subtle",
+			check: "size-3.5 shrink-0 text-foreground-default",
 			optionLabel: "min-w-0 flex-1 truncate",
 			hint: "shrink-0 text-foreground-subtle",
-			empty: "px-2 py-6 text-center text-foreground-muted",
+			empty: "px-xs py-xl text-center text-foreground-muted",
 			footer: "shrink-0 border-t border-border-default"
 		},
 		variants: {
@@ -335,7 +335,7 @@
 			{...triggerProps}
 		>
 			{#if Icon}
-				<Icon class="size-4 shrink-0 text-foreground-default" aria-hidden="true" />
+				<Icon class="size-3.5 shrink-0 text-foreground-default" aria-hidden="true" />
 			{/if}
 			<span class={classes.value()}>{triggerLabel === "" ? placeholder : triggerLabel}</span>
 			<ChevronsUpDown class={field.chevron({ class: "size-3.5" })} aria-hidden="true" />
@@ -411,7 +411,7 @@
 					{#if isSelected(item)}
 						<Check class={classes.check()} aria-hidden="true" />
 					{:else}
-						<span class="size-4 shrink-0" aria-hidden="true"></span>
+						<span class="size-3.5 shrink-0" aria-hidden="true"></span>
 					{/if}
 					{#if option}
 						{@render option(item)}
diff --git a/web/src/lib/components/ui/CopyButton.stories.svelte b/web/src/lib/components/ui/CopyButton.stories.svelte
index 7d7dc5574..8e2fea974 100644
--- a/web/src/lib/components/ui/CopyButton.stories.svelte
+++ b/web/src/lib/components/ui/CopyButton.stories.svelte
@@ -65,7 +65,7 @@
 <Story name="Disabled" args={{ showLabel: true, variant: "default", disabled: true }} />
 
 <Story name="Sizes">
-	<div class="flex items-center gap-3">
+	<div class="flex items-center gap-sm">
 		<CopyButton value={SHA} size="mini" showLabel variant="default" />
 		<CopyButton value={SHA} size="small" showLabel variant="default" />
 		<CopyButton value={SHA} size="regular" showLabel variant="default" />
@@ -74,7 +74,7 @@
 </Story>
 
 <Story name="Variants">
-	<div class="flex items-center gap-3">
+	<div class="flex items-center gap-sm">
 		<CopyButton value={SHA} showLabel variant="default" />
 		<CopyButton value={SHA} showLabel variant="primary" />
 		<CopyButton value={SHA} showLabel variant="ghost" />
@@ -83,7 +83,7 @@
 </Story>
 
 <Story name="In a row">
-	<div class="flex w-96 items-center gap-2 rounded-sm border border-border-default p-1 pl-3">
+	<div class="flex w-96 items-center gap-xs rounded-sm border border-border-default p-2xs pl-sm">
 		<code class="min-w-0 flex-1 truncate typography-monospace-small text-foreground-muted">
 			{SHA}
 		</code>
diff --git a/web/src/lib/components/ui/CopyButton.svelte b/web/src/lib/components/ui/CopyButton.svelte
index 31c531ee3..cb8a33aaa 100644
--- a/web/src/lib/components/ui/CopyButton.svelte
+++ b/web/src/lib/components/ui/CopyButton.svelte
@@ -12,7 +12,7 @@
 		DRAW_EASING
 	} from "$lib/motion/spring";
 	import { prefersReducedMotion } from "svelte/motion";
-	import Button, { type ButtonVariants } from "$lib/components/ui/Button.svelte";
+	import Button, { buttonIcon, type ButtonVariants } from "$lib/components/ui/Button.svelte";
 
 	interface Props {
 		value: string;
@@ -66,9 +66,7 @@
 		timer = setTimeout(() => (status = "idle"), timeout);
 	};
 
-	const iconSize = $derived(
-		size === "large" ? "size-5" : size === "mini" ? "size-3.5" : "size-4"
-	);
+	const iconSize = $derived(buttonIcon({ size }));
 	const fade = $derived(prefersReducedMotion.current ? 0 : CROSSFADE_DURATION);
 	const draw = $derived(prefersReducedMotion.current ? 0 : DRAW_DURATION);
 	const labels = $derived<[CopyStatus, string][]>([
diff --git a/web/src/lib/components/ui/Dropdown.stories.svelte b/web/src/lib/components/ui/Dropdown.stories.svelte
index b51bc609e..2f77d8ebf 100644
--- a/web/src/lib/components/ui/Dropdown.stories.svelte
+++ b/web/src/lib/components/ui/Dropdown.stories.svelte
@@ -55,7 +55,7 @@
 <!-- `size` goes straight to the trigger Button, so it drives the trigger's height,
 	padding and label size the same way it does on a standalone Button. -->
 <Story name="Button trigger sizes" asChild>
-	<div class="flex items-center gap-3">
+	<div class="flex items-center gap-sm">
 		<Dropdown variant="button" size="small" trigger={actionsTrigger} label="Actions">
 			<DropdownItem icon={Pencil}>Edit</DropdownItem>
 			<DropdownItem icon={Settings}>Settings</DropdownItem>
@@ -93,7 +93,7 @@
 
 <!-- Dropdowns sharing a `group` close their siblings when one opens. -->
 <Story name="Grouped" asChild>
-	<div class="flex gap-3">
+	<div class="flex gap-sm">
 		<Dropdown group="story-group" trigger={firstTrigger} label="First">
 			<DropdownItem>One</DropdownItem>
 			<DropdownItem>Two</DropdownItem>
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index e2e6f865c..fae238d20 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -9,8 +9,8 @@
 		slots: {
 			root: "relative inline-flex",
 			plainTrigger:
-				"min-h-0 gap-1 border-0 bg-transparent p-0 text-inherit hover:bg-transparent",
-			menu: "dropdown-menu fixed inset-auto z-50 m-0 h-fit max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] popover-transition touch-pan-y divide-y divide-border-default overflow-auto overscroll-contain rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular [-webkit-overflow-scrolling:touch]"
+				"min-h-0 gap-2xs border-0 bg-transparent p-none text-inherit hover:bg-transparent",
+			menu: "dropdown-menu fixed inset-auto z-50 m-none h-fit max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] popover-transition touch-pan-y divide-y divide-border-default overflow-auto overscroll-contain rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular [-webkit-overflow-scrolling:touch]"
 		},
 		variants: {
 			align: {
diff --git a/web/src/lib/components/ui/DropdownItem.svelte b/web/src/lib/components/ui/DropdownItem.svelte
index 7cbaf42bf..57e2dd1c5 100644
--- a/web/src/lib/components/ui/DropdownItem.svelte
+++ b/web/src/lib/components/ui/DropdownItem.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const dropdownItem = tv({
-		base: "w-full justify-start rounded-none p-2 text-left focus-visible:-outline-offset-2",
+		base: "w-full justify-start rounded-none p-xs text-left focus-visible:-outline-offset-2",
 		variants: {
 			danger: {
 				false: "",
diff --git a/web/src/lib/components/ui/EmptyState.stories.svelte b/web/src/lib/components/ui/EmptyState.stories.svelte
index 56e11d7c4..38bf7418c 100644
--- a/web/src/lib/components/ui/EmptyState.stories.svelte
+++ b/web/src/lib/components/ui/EmptyState.stories.svelte
@@ -23,9 +23,6 @@
 	</EmptyState>
 </Story>
 
-<Story
-	name="Card"
-	args={{ message: "No issues yet.", icon: Inbox, shadow: true, background: true }}
-/>
+<Story name="Card" args={{ message: "No issues yet.", icon: Inbox, background: true }} />
 
 <Story name="Inline" args={{ size: "inline", message: "No comments yet." }} />
diff --git a/web/src/lib/components/ui/EmptyState.svelte b/web/src/lib/components/ui/EmptyState.svelte
index 38b46975e..04d2ddd91 100644
--- a/web/src/lib/components/ui/EmptyState.svelte
+++ b/web/src/lib/components/ui/EmptyState.svelte
@@ -7,7 +7,6 @@
 		message: string;
 		icon?: Component<SvelteHTMLElements["svg"]>;
 		border?: CardVariants["border"];
-		shadow?: CardVariants["shadow"];
 		background?: CardVariants["background"];
 		size?: "default" | "inline";
 		class?: string;
@@ -18,7 +17,6 @@
 		message,
 		icon,
 		border = true,
-		shadow = false,
 		background = false,
 		size = "default",
 		class: className,
@@ -31,7 +29,7 @@
 {#if size === "inline"}
 	<p
 		class={[
-			"flex items-center gap-2 typography-paragraph-regular text-foreground-muted",
+			"flex items-center gap-xs typography-paragraph-regular text-foreground-muted",
 			className
 		]}
 	>
@@ -40,14 +38,14 @@
 {:else}
 	<Card
 		{border}
-		{shadow}
 		{background}
 		padding="none"
-		class="flex flex-col items-center justify-center gap-6 p-12 typography-paragraph-large text-foreground-subtle"
+		rounded={false}
+		class="flex flex-col items-center justify-center gap-xl p-4xl typography-paragraph-large text-foreground-subtle"
 	>
 		{#if Icon}
 			<Icon class="size-16 text-foreground-disabled" aria-hidden="true" />
 		{/if}
-		<span class="flex items-center gap-2">{message}{@render children?.()}</span>
+		<span class="flex items-center gap-xs">{message}{@render children?.()}</span>
 	</Card>
 {/if}
diff --git a/web/src/lib/components/ui/Error.svelte b/web/src/lib/components/ui/Error.svelte
index dfe7aa067..66c2e75d8 100644
--- a/web/src/lib/components/ui/Error.svelte
+++ b/web/src/lib/components/ui/Error.svelte
@@ -4,28 +4,28 @@
 	export const error = tv({
 		slots: {
 			root: "overflow-hidden rounded-sm border border-border-danger bg-background-danger-subtle text-foreground-danger dark:border-border-danger/60 dark:bg-background-danger-subtle/20",
-			header: "flex items-center gap-2",
+			header: "flex items-center gap-xs",
 			icon: "shrink-0",
 			label: "min-w-0",
-			toggle: "flex w-full items-center gap-2 border-t border-border-danger text-foreground-danger transition-colors hover:text-foreground-danger-strong dark:border-border-danger/60",
+			toggle: "flex w-full items-center gap-xs border-t border-border-danger text-foreground-danger transition-colors hover:text-foreground-danger-strong dark:border-border-danger/60",
 			chevron: "shrink-0 transition-transform",
 			body: "border-t border-border-danger typography-monospace-regular text-foreground-danger-strong dark:border-border-danger/60"
 		},
 		variants: {
 			size: {
 				small: {
-					header: "px-3 py-2 typography-paragraph-small",
-					icon: "size-4",
-					toggle: "px-3 py-2 typography-paragraph-small",
-					chevron: "size-4",
-					body: "px-3 py-2 typography-paragraph-small"
+					header: "px-sm py-xs typography-paragraph-small",
+					icon: "size-3.5",
+					toggle: "px-sm py-xs typography-paragraph-small",
+					chevron: "size-3.5",
+					body: "px-sm py-xs typography-paragraph-small"
 				},
 				large: {
-					header: "px-4 py-3 typography-paragraph-large",
-					icon: "size-5",
-					toggle: "px-4 py-3 typography-paragraph-small",
-					chevron: "size-4",
-					body: "px-4 py-3 typography-paragraph-small"
+					header: "px-md py-sm typography-paragraph-large",
+					icon: "size-4",
+					toggle: "px-md py-sm typography-paragraph-small",
+					chevron: "size-3.5",
+					body: "px-md py-sm typography-paragraph-small"
 				}
 			}
 		},
diff --git a/web/src/lib/components/ui/Field.stories.svelte b/web/src/lib/components/ui/Field.stories.svelte
index 7c12cc5ff..46cfa5ff2 100644
--- a/web/src/lib/components/ui/Field.stories.svelte
+++ b/web/src/lib/components/ui/Field.stories.svelte
@@ -27,7 +27,7 @@
 		{id}
 		type="text"
 		placeholder="Placeholder"
-		class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
+		class="w-full rounded-sm border border-border-default bg-background-default px-sm py-xs typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
 	/>
 {/snippet}
 
diff --git a/web/src/lib/components/ui/GraphCell.stories.svelte b/web/src/lib/components/ui/GraphCell.stories.svelte
index cc13c06c1..0cbf1c620 100644
--- a/web/src/lib/components/ui/GraphCell.stories.svelte
+++ b/web/src/lib/components/ui/GraphCell.stories.svelte
@@ -43,7 +43,7 @@
 
 <Story name="GraphCell">
 	{#snippet template(args)}
-		<div class="flex bg-background-default p-4" style={palette}>
+		<div class="flex bg-background-default p-md" style={palette}>
 			<GraphCell {...args} />
 		</div>
 	{/snippet}
@@ -52,7 +52,7 @@
 <!-- every band: a run of four, then the two loners. band comes from the run, the rest from controls -->
 <Story name="Bands">
 	{#snippet template(args)}
-		<div class="flex gap-8 bg-background-default p-4" style={palette}>
+		<div class="flex gap-2xl bg-background-default p-md" style={palette}>
 			<div class="flex flex-col">
 				{#each run as band, i (i)}
 					<GraphCell {...args} {band} />
@@ -69,7 +69,7 @@
 <!-- how RangeSelectorRow uses it: a neutral rail with an accent run painted over it -->
 <Story name="Stacked">
 	{#snippet template()}
-		<div class="flex flex-col bg-background-default p-4" style={palette}>
+		<div class="flex flex-col bg-background-default p-md" style={palette}>
 			{#each run as band, i (i)}
 				<div class="relative flex">
 					<GraphCell {band} />
@@ -89,7 +89,7 @@
 <Story name="Inherited">
 	{#snippet template()}
 		<div
-			class="flex flex-col bg-background-default p-4"
+			class="flex flex-col bg-background-default p-md"
 			style="--graph-line: tomato; --graph-fill: papayawhip"
 		>
 			{#each run as band, i (i)}
@@ -102,7 +102,7 @@
 <!-- the run carries on below the last visible row, so its lower line trails off -->
 <Story name="Tail">
 	{#snippet template()}
-		<div class="flex flex-col bg-background-default p-4">
+		<div class="flex flex-col bg-background-default p-md">
 			<GraphCell band="first" />
 			<GraphCell band="middle" />
 			<GraphCell band="last" tail />
@@ -114,7 +114,7 @@
 <Story name="DotVsLine">
 	{#snippet template()}
 		<div
-			class="flex flex-col bg-background-default p-4"
+			class="flex flex-col bg-background-default p-md"
 			style="--graph-line: var(--color-border-strong); --graph-dot: tomato; --graph-fill: papayawhip"
 		>
 			{#each run as band, i (i)}
diff --git a/web/src/lib/components/ui/Hovercard.stories.svelte b/web/src/lib/components/ui/Hovercard.stories.svelte
index 99e5969f4..5601cc652 100644
--- a/web/src/lib/components/ui/Hovercard.stories.svelte
+++ b/web/src/lib/components/ui/Hovercard.stories.svelte
@@ -13,9 +13,9 @@
 </script>
 
 {#snippet card()}
-	<div class="w-64 p-3">
+	<div class="w-64 p-sm">
 		<p class="font-semibold">Rich content</p>
-		<p class="text-sm text-foreground-subtle">
+		<p class="typography-paragraph-regular text-foreground-subtle">
 			Any markup can live in the card — it stays open while you move the pointer into it.
 		</p>
 	</div>
diff --git a/web/src/lib/components/ui/Hovercard.svelte b/web/src/lib/components/ui/Hovercard.svelte
index 5047738d2..55858c916 100644
--- a/web/src/lib/components/ui/Hovercard.svelte
+++ b/web/src/lib/components/ui/Hovercard.svelte
@@ -15,7 +15,7 @@
 			// overflow-visible so the card's own content (e.g. a nested popover) isn't clipped
 			// pointer-events-auto because the card is a child of whatever the trigger sits in,
 			// and a card the pointer falls through closes the moment it is reached for
-			card: "hovercard-card pointer-events-auto fixed inset-auto z-50 m-0 h-fit popover-transition overflow-visible rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular"
+			card: "hovercard-card pointer-events-auto fixed inset-auto z-50 m-none h-fit popover-transition overflow-visible rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular"
 		},
 		variants: {
 			align: {
diff --git a/web/src/lib/components/ui/Input.stories.svelte b/web/src/lib/components/ui/Input.stories.svelte
index c6603183a..bc23d5ffe 100644
--- a/web/src/lib/components/ui/Input.stories.svelte
+++ b/web/src/lib/components/ui/Input.stories.svelte
@@ -71,7 +71,7 @@
 
 <!-- 32/36/40, the same heights Button's sm/md/lg draw, so the two align in a row. -->
 <Story name="Sizes" asChild>
-	<div class="flex items-center gap-3">
+	<div class="flex items-center gap-sm">
 		<Input size="small" placeholder="Small" />
 		<Input size="regular" placeholder="Medium" />
 		<Input size="large" placeholder="Large" />
@@ -80,7 +80,7 @@
 
 <!-- the icon rides the size variant's gap, as in Button. -->
 <Story name="Icon sizes" asChild>
-	<div class="flex items-center gap-3">
+	<div class="flex items-center gap-sm">
 		<Input size="small" iconLeft={Search} placeholder="Small" />
 		<Input size="regular" iconLeft={Search} placeholder="Medium" />
 		<Input size="large" iconLeft={Search} placeholder="Large" />
@@ -88,9 +88,9 @@
 </Story>
 
 <Story name="With Button" asChild>
-	<div class="flex flex-col items-start gap-3">
+	<div class="flex flex-col items-start gap-sm">
 		{#each ["small", "regular", "large"] as const as s (s)}
-			<div class="flex items-center gap-2">
+			<div class="flex items-center gap-xs">
 				<Input size={s} placeholder="Repository name" />
 				<Button size={s}>Create</Button>
 			</div>
@@ -101,7 +101,7 @@
 <!-- rich mode: Enter commits the draft, Backspace highlights the last chip and a second Backspace
      takes it. -->
 <Story name="Rich" asChild>
-	<div class="max-w-md">
+	<div class="max-w-compact">
 		<Input
 			rich
 			bind:tags={topics}
@@ -115,7 +115,7 @@
 <!-- a `field` on a tag renders as a dim prefix, which is all it takes for the same array to read
      as a filter bar. -->
 <Story name="Rich filters" asChild>
-	<div class="max-w-lg">
+	<div class="max-w-narrow">
 		<Input
 			rich
 			bind:tags={filters}
@@ -131,7 +131,7 @@
      that can hold spaces, and the same characters split a paste — so pasting "a, b" into the comma
      field lands two chips while the space field takes it as one. -->
 <Story name="Rich commit keys" asChild>
-	<div class="flex max-w-md flex-col gap-4">
+	<div class="flex max-w-compact flex-col gap-md">
 		<Input
 			rich
 			bind:tags={entered}
@@ -161,7 +161,7 @@
 <!-- the point of the `tag` snippet: chips are whatever you render, here a typeahead over
      User.svelte. Anything already picked drops out of the suggestions. -->
 <Story name="Rich user typeahead" asChild>
-	<div class="max-w-md">
+	<div class="max-w-compact">
 		<Input
 			rich
 			bind:tags={reviewers}
@@ -184,7 +184,7 @@
 <!-- max shows a counter and turns further drafts away; validate vets the rest. Both cross-fade
      their reason over the hint and put it back after a moment. -->
 <Story name="Rich limits" asChild>
-	<div class="max-w-md">
+	<div class="max-w-compact">
 		<Input
 			rich
 			bind:tags={capped}
@@ -198,7 +198,7 @@
 
 <!-- the box is the same recipe either way, so the size ladder and the states carry over. -->
 <Story name="Rich sizes" asChild>
-	<div class="flex max-w-md flex-col gap-3">
+	<div class="flex max-w-compact flex-col gap-sm">
 		{#each ["small", "regular", "large"] as const as s (s)}
 			<Input
 				rich
@@ -212,7 +212,7 @@
 </Story>
 
 <Story name="Rich states" asChild>
-	<div class="flex max-w-md flex-col gap-3">
+	<div class="flex max-w-compact flex-col gap-sm">
 		<Input rich error tags={[{ value: "bad-input" }]} placeholder="Add a tag" />
 		<Input
 			rich
diff --git a/web/src/lib/components/ui/Input.svelte b/web/src/lib/components/ui/Input.svelte
index 11bfa2d45..944fb5d20 100644
--- a/web/src/lib/components/ui/Input.svelte
+++ b/web/src/lib/components/ui/Input.svelte
@@ -76,7 +76,9 @@
 	}: Props = $props();
 
 	const classes = $derived(inputField({ size, error, disabled, class: className }));
-	const iconSize = $derived(size === "large" ? "size-5" : "size-4");
+	const iconSize = $derived(
+		size === "large" ? "size-4" : size === "mini" ? "size-3" : "size-3.5"
+	);
 	const mirror = $derived(value || (rest.placeholder ?? ""));
 </script>
 
diff --git a/web/src/lib/components/ui/Link.svelte b/web/src/lib/components/ui/Link.svelte
index f6521274d..53bd57adc 100644
--- a/web/src/lib/components/ui/Link.svelte
+++ b/web/src/lib/components/ui/Link.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const link = tv({
-		base: "inline-flex cursor-pointer items-center gap-1 no-underline transition-colors duration-150 ease-in-out select-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2",
+		base: "inline-flex cursor-pointer items-center gap-2xs no-underline transition-colors duration-150 ease-in-out select-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2",
 		variants: {
 			variant: {
 				default:
@@ -71,7 +71,7 @@
 	}: Props = $props();
 
 	const classes = $derived(link({ variant, size, disabled, class: className }));
-	const iconSize = $derived(size === "small" ? "size-3" : "size-4");
+	const iconSize = "size-3.5";
 </script>
 
 {#if href}
diff --git a/web/src/lib/components/ui/ListPanel.svelte b/web/src/lib/components/ui/ListPanel.svelte
new file mode 100644
index 000000000..4d26b5beb
--- /dev/null
+++ b/web/src/lib/components/ui/ListPanel.svelte
@@ -0,0 +1,25 @@
+<script module lang="ts">
+	export const listRows = "flex flex-col divide-y divide-border-default";
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import Card from "$lib/components/ui/Card.svelte";
+
+	interface Props {
+		toolbar?: Snippet;
+		children: Snippet;
+	}
+
+	let { toolbar, children }: Props = $props();
+</script>
+
+<Card padding="none">
+	{#if toolbar}
+		<div class="border-b border-border-default p-sm">
+			{@render toolbar()}
+		</div>
+	{/if}
+
+	{@render children()}
+</Card>
diff --git a/web/src/lib/components/ui/ListToolbar.svelte b/web/src/lib/components/ui/ListToolbar.svelte
new file mode 100644
index 000000000..5b91daa73
--- /dev/null
+++ b/web/src/lib/components/ui/ListToolbar.svelte
@@ -0,0 +1,46 @@
+<script module lang="ts">
+	import { tv } from "tailwind-variants";
+
+	export const listToolbar = tv({
+		slots: {
+			root: "grid grid-cols-[auto_1fr_auto] items-stretch gap-xs",
+			search: "col-span-3 flex sm:col-span-1 sm:col-start-2",
+			filters: "flex sm:row-start-1",
+			trailing: "col-start-3 row-start-2 flex items-center justify-self-end sm:row-start-1"
+		}
+	});
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		search?: Snippet;
+		filters?: Snippet;
+		trailing?: Snippet;
+	}
+
+	let { search, filters, trailing }: Props = $props();
+
+	const classes = listToolbar();
+</script>
+
+<div class={classes.root()}>
+	{#if search}
+		<div class={classes.search()}>
+			{@render search()}
+		</div>
+	{/if}
+
+	{#if filters}
+		<div class={classes.filters()}>
+			{@render filters()}
+		</div>
+	{/if}
+
+	{#if trailing}
+		<div class={classes.trailing()}>
+			{@render trailing()}
+		</div>
+	{/if}
+</div>
diff --git a/web/src/lib/components/ui/Logo.stories.svelte b/web/src/lib/components/ui/Logo.stories.svelte
index 01a9f0154..08358b2a0 100644
--- a/web/src/lib/components/ui/Logo.stories.svelte
+++ b/web/src/lib/components/ui/Logo.stories.svelte
@@ -21,7 +21,7 @@
 <Story name="Wordmark" args={{ wordmark: true }} />
 
 <Story name="Colors" asChild>
-	<div class="flex flex-col items-start gap-4">
+	<div class="flex flex-col items-start gap-md">
 		<Logo class="text-foreground-muted" />
 		<Logo class="text-foreground-success" />
 		<Logo class="text-foreground-danger" />
@@ -31,7 +31,7 @@
 </Story>
 
 <Story name="Wordmark Colors" asChild>
-	<div class="flex flex-col items-start gap-4">
+	<div class="flex flex-col items-start gap-md">
 		<Logo wordmark class="text-foreground-muted" />
 		<Logo wordmark class="text-foreground-success" />
 		<Logo wordmark class="text-foreground-info" />
@@ -39,7 +39,7 @@
 </Story>
 
 <Story name="On Emphasis" asChild>
-	<div class="flex flex-col items-start gap-4 rounded-sm bg-background-success-emphasis p-4">
+	<div class="flex flex-col items-start gap-md rounded-sm bg-background-success-emphasis p-md">
 		<Logo class="text-foreground-on-emphasis" />
 		<Logo wordmark class="text-foreground-on-emphasis" />
 	</div>
diff --git a/web/src/lib/components/ui/Logo.svelte b/web/src/lib/components/ui/Logo.svelte
index 1fbda2f3e..08468e8ed 100644
--- a/web/src/lib/components/ui/Logo.svelte
+++ b/web/src/lib/components/ui/Logo.svelte
@@ -70,10 +70,10 @@
 {/snippet}
 
 {#if alpha}
-	<span class="inline-flex items-center gap-2 select-none">
+	<span class="inline-flex items-center gap-xs select-none">
 		{@render mark()}
 		<span
-			class="rounded-sm bg-background-subtle px-1 typography-paragraph-mini font-normal text-foreground-default not-italic"
+			class="rounded-sm bg-background-subtle px-2xs typography-paragraph-mini font-normal text-foreground-default not-italic"
 		>
 			alpha
 		</span>
diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte
index bbec4c641..20bd5827c 100644
--- a/web/src/lib/components/ui/MarkdownEditor.svelte
+++ b/web/src/lib/components/ui/MarkdownEditor.svelte
@@ -38,7 +38,7 @@
 	}: Props = $props();
 
 	const surface = $derived(transparent ? "bg-transparent" : "bg-background-default");
-	const pane = `rounded border border-border-default px-2.5 py-2 ${textareaMinHeight}`;
+	const pane = `rounded border border-border-default px-2.5 py-xs ${textareaMinHeight}`;
 
 	let preview = $state<Promise<string> | null>(null);
 	let textareaEl = $state<HTMLTextAreaElement>();
@@ -72,8 +72,6 @@
 <div class="flex flex-col gap-1.5">
 	<ButtonGroup class="self-start">
 		<Button
-			type="button"
-			size="small"
 			icon={Pencil}
 			{...segmentProps(tab === "write")}
 			onclick={() => (tab = "write")}
@@ -81,8 +79,6 @@
 			Write
 		</Button>
 		<Button
-			type="button"
-			size="small"
 			icon={Eye}
 			{...segmentProps(tab === "preview")}
 			onclick={() => (tab = "preview")}
diff --git a/web/src/lib/components/ui/Modal.svelte b/web/src/lib/components/ui/Modal.svelte
index 0601ed0f5..d03ad0ae3 100644
--- a/web/src/lib/components/ui/Modal.svelte
+++ b/web/src/lib/components/ui/Modal.svelte
@@ -3,17 +3,17 @@
 
 	export const modal = tv({
 		slots: {
-			panel: "modal-panel m-auto w-[95%] flex-col gap-4 overscroll-none rounded-lg border border-border-default bg-background-default p-4 text-foreground-default shadow-lg",
-			title: "flex flex-row items-center gap-2 px-0.5 typography-paragraph-large font-medium",
-			titleIcon: "size-4.5 text-foreground-muted",
+			panel: "modal-panel m-auto w-[95%] flex-col gap-md overscroll-none rounded-lg border border-border-default bg-background-default p-md text-foreground-default shadow-lg",
+			title: "flex flex-row items-center gap-xs px-3xs typography-paragraph-large font-medium",
+			titleIcon: "size-4 text-foreground-muted",
 			description: "text-foreground-muted",
-			header: "flex flex-col gap-2",
-			footer: "flex gap-2"
+			header: "flex flex-col gap-xs",
+			footer: "flex gap-xs"
 		},
 		variants: {
 			size: {
 				regular: { panel: "md:w-96" },
-				wide: { panel: "md:w-lg" }
+				wide: { panel: "md:w-narrow" }
 			}
 		},
 		defaultVariants: {
diff --git a/web/src/lib/components/ui/MoreMenu.stories.svelte b/web/src/lib/components/ui/MoreMenu.stories.svelte
index 4ff7f4619..7e3941ed4 100644
--- a/web/src/lib/components/ui/MoreMenu.stories.svelte
+++ b/web/src/lib/components/ui/MoreMenu.stories.svelte
@@ -27,7 +27,7 @@
 
 <!-- `buttonVariant` matches the trigger to the buttons it sits next to. -->
 <Story name="Trigger variants" asChild>
-	<div class="flex justify-end gap-3">
+	<div class="flex justify-end gap-sm">
 		<MoreMenu label="More actions, ghost trigger" buttonVariant="ghost">
 			<DropdownItem icon={Pencil}>Edit</DropdownItem>
 		</MoreMenu>
diff --git a/web/src/lib/components/ui/MoreMenu.svelte b/web/src/lib/components/ui/MoreMenu.svelte
index c1b42b872..a78e86e7e 100644
--- a/web/src/lib/components/ui/MoreMenu.svelte
+++ b/web/src/lib/components/ui/MoreMenu.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import EllipsisVertical from "$icon/ellipsis-vertical";
 	import Dropdown, { type DropdownProps } from "$lib/components/ui/Dropdown.svelte";
+	import { buttonIcon } from "$lib/components/ui/Button.svelte";
 
 	type Props = Omit<DropdownProps, "trigger" | "variant" | "label"> & { label: string };
 
@@ -9,14 +10,15 @@
 		align = "right",
 		buttonVariant = "ghost",
 		menuClass = "min-w-48",
+		size,
 		children,
 		...rest
 	}: Props = $props();
 </script>
 
-<Dropdown variant="button" {label} {align} {buttonVariant} {menuClass} {...rest}>
+<Dropdown variant="button" {label} {align} {buttonVariant} {menuClass} {size} {...rest}>
 	{#snippet trigger()}
-		<EllipsisVertical class="size-3.5" />
+		<EllipsisVertical class={buttonIcon({ size })} />
 	{/snippet}
 	{@render children()}
 </Dropdown>
diff --git a/web/src/lib/components/ui/Pagination.svelte b/web/src/lib/components/ui/Pagination.svelte
index 5f0917b6f..3b29cc59f 100644
--- a/web/src/lib/components/ui/Pagination.svelte
+++ b/web/src/lib/components/ui/Pagination.svelte
@@ -3,13 +3,13 @@
 
 	export const pagination = tv({
 		slots: {
-			nav: "inline-flex items-center gap-1",
+			nav: "inline-flex items-center gap-2xs",
 			track: "relative typography-paragraph-regular tabular-nums [--gap:0.25rem]",
 			plate: "pointer-events-none absolute inset-y-0 left-0 w-(--slot) rounded-sm border border-border-default bg-background-default",
 			list: "relative flex gap-(--gap)",
 			slot: "w-(--slot)",
-			page: "w-full px-0",
-			ellipsis: "flex h-9 items-center justify-center text-foreground-subtle select-none",
+			page: "w-full px-none",
+			ellipsis: "flex h-8 items-center justify-center text-foreground-subtle select-none",
 			label: "hidden sm:inline"
 		},
 		variants: {
diff --git a/web/src/lib/components/ui/Radio.svelte b/web/src/lib/components/ui/Radio.svelte
index 2439aa689..3ac6350d4 100644
--- a/web/src/lib/components/ui/Radio.svelte
+++ b/web/src/lib/components/ui/Radio.svelte
@@ -1,6 +1,30 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import type { HTMLInputAttributes } from "svelte/elements";
+	import { tv } from "tailwind-variants";
+
+	const radio = tv({
+		slots: {
+			label: "inline-flex items-center gap-xs",
+			input: [
+				"peer size-sm shrink-0 cursor-pointer appearance-none rounded-full border border-foreground-placeholder",
+				"bg-background-default transition-colors duration-150 checked:border-foreground-default",
+				"hover:bg-background-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default",
+				"disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-border-disabled disabled:hover:bg-inherit"
+			],
+			dot: [
+				"absolute inset-0 m-auto hidden size-2xs rounded-full",
+				"bg-foreground-default peer-checked:block",
+				"peer-disabled:bg-foreground-disabled peer-disabled:text-foreground-disabled"
+			]
+		},
+		variants: {
+			disabled: {
+				true: { label: "cursor-not-allowed text-foreground-disabled" },
+				false: { label: "cursor-pointer" }
+			}
+		}
+	});
 
 	interface Props extends Omit<HTMLInputAttributes, "type" | "class" | "value" | "children"> {
 		value: string;
@@ -19,32 +43,13 @@
 		...rest
 	}: Props = $props();
 
-	const labelClasses = $derived(
-		`inline-flex items-center gap-2 ${disabled ? "cursor-not-allowed text-foreground-disabled" : "cursor-pointer"} ${className ?? ""}`
-	);
+	const classes = $derived(radio({ disabled }));
 </script>
 
-<label class={labelClasses}>
+<label class={classes.label({ class: className })}>
 	<span class="relative inline-flex">
-		<input
-			type="radio"
-			{value}
-			bind:group
-			{disabled}
-			class="peer size-4 shrink-0 cursor-pointer appearance-none rounded-full border border-foreground-placeholder
-			       bg-background-default transition-colors
-				   duration-150 checked:border-foreground-default
-				   hover:bg-background-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default
-				   disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-border-disabled disabled:hover:bg-inherit"
-			{...rest}
-		/>
-		<span
-			class="absolute inset-0 m-auto hidden
-			       size-2 rounded-full
-			       bg-foreground-default peer-checked:block
-				   peer-disabled:bg-foreground-disabled peer-disabled:text-foreground-disabled"
-			aria-hidden="true"
-		></span>
+		<input type="radio" {value} bind:group {disabled} class={classes.input()} {...rest} />
+		<span class={classes.dot()} aria-hidden="true"></span>
 	</span>
 	{#if children}
 		<span>{@render children()}</span>
diff --git a/web/src/lib/components/ui/RangeSelector.stories.svelte b/web/src/lib/components/ui/RangeSelector.stories.svelte
index 734c8de49..d9c90a352 100644
--- a/web/src/lib/components/ui/RangeSelector.stories.svelte
+++ b/web/src/lib/components/ui/RangeSelector.stories.svelte
@@ -44,7 +44,7 @@
 </script>
 
 {#snippet row(index: number, item: unknown, actions: RowActions)}
-	<div class="relative flex w-50 items-stretch justify-between px-3" class:h-20={item === 5}>
+	<div class="relative flex w-50 items-stretch justify-between px-sm" class:h-20={item === 5}>
 		<button
 			type="button"
 			class="absolute inset-x-0 top-0 h-10 cursor-pointer"
@@ -60,7 +60,7 @@
 
 <Story name="RangeSelector" args={{ items: [1, 2, 3, 4, 5] }}>
 	{#snippet template(args)}
-		<div class="flex gap-4 bg-background-default p-4">
+		<div class="flex gap-md bg-background-default p-md">
 			<RangeSelector {...args} {row} bind:range={plain} />
 			<output>{plain.start}..{plain.end}</output>
 		</div>
@@ -69,7 +69,7 @@
 
 <Story name="MinLength" args={{ minLength: 3 }}>
 	{#snippet template(args)}
-		<div class="flex gap-4 bg-background-default p-4">
+		<div class="flex gap-md bg-background-default p-md">
 			<RangeSelector {...args} {row} bind:range={long} />
 			<output>{long.start}..{long.end}</output>
 		</div>
@@ -78,7 +78,7 @@
 
 <Story name="MuteFullSelection" args={{ items: [1, 2, 3, 4, 5, 6], muteFullSelection: true }}>
 	{#snippet template(args)}
-		<div class="flex gap-4 bg-background-default p-4">
+		<div class="flex gap-md bg-background-default p-md">
 			<RangeSelector {...args} {row} bind:range={full} />
 			<output>{full.start}..{full.end}</output>
 		</div>
@@ -87,7 +87,7 @@
 
 <Story name="Select-top Mode" args={{ minLength: 3, mode: "select-top" }}>
 	{#snippet template(args)}
-		<div class="flex gap-4 bg-background-default p-4">
+		<div class="flex gap-md bg-background-default p-md">
 			<RangeSelector {...args} {row} bind:range={byMode} />
 			<output>{byMode.start}..{byMode.end}</output>
 		</div>
diff --git a/web/src/lib/components/ui/ResizeHandle.svelte b/web/src/lib/components/ui/ResizeHandle.svelte
index d692838be..8b473db60 100644
--- a/web/src/lib/components/ui/ResizeHandle.svelte
+++ b/web/src/lib/components/ui/ResizeHandle.svelte
@@ -55,7 +55,7 @@
 	aria-valuemax={max}
 	aria-label={ariaLabel}
 	data-resizing={resizing || undefined}
-	class="group hit-area-x-1 z-10 -mx-1 flex w-2 shrink-0 cursor-ew-resize touch-none justify-center transition-colors duration-150 {className}"
+	class="group hit-area-x-1 z-10 -mx-2xs flex w-2 shrink-0 cursor-ew-resize touch-none justify-center transition-colors duration-150 {className}"
 	onpointerdown={startResize}
 	ondblclick={() => {
 		if (resetTo !== undefined) width = resetTo;
diff --git a/web/src/lib/components/ui/RoutePagination.svelte b/web/src/lib/components/ui/RoutePagination.svelte
index 7c7367855..e789db3bd 100644
--- a/web/src/lib/components/ui/RoutePagination.svelte
+++ b/web/src/lib/components/ui/RoutePagination.svelte
@@ -16,7 +16,7 @@
 <Pending>
 	{@const count = await pageCount}
 	{#if count > 1}
-		<div class="mt-4 flex justify-center">
+		<div class="mt-md flex justify-center">
 			<Pagination
 				page={currentPage}
 				total={count}
diff --git a/web/src/lib/components/ui/Section.stories.svelte b/web/src/lib/components/ui/Section.stories.svelte
index 4e8c64ef2..328c9f7e2 100644
--- a/web/src/lib/components/ui/Section.stories.svelte
+++ b/web/src/lib/components/ui/Section.stories.svelte
@@ -10,9 +10,9 @@
 </script>
 
 {#snippet items()}
-	<div class="rounded-sm border border-border-default p-4">First item</div>
-	<div class="rounded-sm border border-border-default p-4">Second item</div>
-	<div class="rounded-sm border border-border-default p-4">Third item</div>
+	<div class="rounded-sm border border-border-default p-md">First item</div>
+	<div class="rounded-sm border border-border-default p-md">Second item</div>
+	<div class="rounded-sm border border-border-default p-md">Third item</div>
 {/snippet}
 
 <Story name="Default" asChild>
@@ -40,10 +40,10 @@
 		title="Pinned"
 		empty={false}
 		emptyMessage="Nothing pinned."
-		listClass="grid grid-cols-2 gap-4"
+		listClass="grid grid-cols-2 gap-md"
 	>
 		{#snippet header()}
-			<p class="px-2 pb-2 typography-paragraph-small text-foreground-subtle">
+			<p class="px-xs pb-xs typography-paragraph-small text-foreground-subtle">
 				Up to four pinned repositories.
 			</p>
 		{/snippet}
@@ -55,7 +55,9 @@
 	<Section title="Repositories" empty={false} emptyMessage="Nothing here.">
 		{@render items()}
 		{#snippet footer()}
-			<div class="mt-4 flex justify-center typography-paragraph-small text-foreground-subtle">
+			<div
+				class="mt-md flex justify-center typography-paragraph-small text-foreground-subtle"
+			>
 				footer
 			</div>
 		{/snippet}
diff --git a/web/src/lib/components/ui/Section.svelte b/web/src/lib/components/ui/Section.svelte
index 5956fbea4..dfc87cece 100644
--- a/web/src/lib/components/ui/Section.svelte
+++ b/web/src/lib/components/ui/Section.svelte
@@ -16,7 +16,7 @@
 		title,
 		empty,
 		emptyMessage,
-		listClass = "flex flex-col gap-4",
+		listClass = "flex flex-col gap-md",
 		header,
 		footer,
 		children
@@ -25,7 +25,7 @@
 
 <section>
 	{#if title}
-		<h2 class="px-2 pb-4 typography-paragraph-large font-medium">{title}</h2>
+		<h2 class="px-xs pb-md typography-paragraph-large font-medium">{title}</h2>
 	{/if}
 	{@render header?.()}
 	{#if empty}
diff --git a/web/src/lib/components/ui/Select.stories.svelte b/web/src/lib/components/ui/Select.stories.svelte
index ead57467a..3e97113b6 100644
--- a/web/src/lib/components/ui/Select.stories.svelte
+++ b/web/src/lib/components/ui/Select.stories.svelte
@@ -88,7 +88,7 @@
 		<div class="w-64">
 			<Select {...args}>
 				{#snippet footer()}
-					<a href={resolve("/")} class="block p-2">View all branches</a>
+					<a href={resolve("/")} class="block p-xs">View all branches</a>
 				{/snippet}
 			</Select>
 		</div>
diff --git a/web/src/lib/components/ui/Select.svelte b/web/src/lib/components/ui/Select.svelte
index e1d262ec7..696713e06 100644
--- a/web/src/lib/components/ui/Select.svelte
+++ b/web/src/lib/components/ui/Select.svelte
@@ -63,10 +63,10 @@
 
 	const field = $derived(selectField({ error, disabled }));
 
-	// `pl-7` has to be able to beat this `px-2`, so it is merged after rather than interpolated
+	// `pl-7` has to be able to beat this `px-xs`, so it is merged after rather than interpolated
 	// into the same string — prettier's class sorter would hoist an inline conditional to the
 	// front, where tailwind-merge resolves it the other way and the label lands under the icon
-	const nativeBox = "min-h-9 appearance-none px-2 py-1 pr-8";
+	const nativeBox = "min-h-8 appearance-none px-xs py-2xs pr-2xl";
 
 	const onchange = (event: Event) => {
 		onSelect?.((event.currentTarget as HTMLSelectElement).value);
@@ -105,7 +105,7 @@
 	<div class="relative {className ?? ''}">
 		{#if Icon}
 			<Icon
-				class="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-foreground-default"
+				class="pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-foreground-default"
 				aria-hidden="true"
 			/>
 		{/if}
diff --git a/web/src/lib/components/ui/Separator.stories.svelte b/web/src/lib/components/ui/Separator.stories.svelte
index 1cd1768ab..1049dc768 100644
--- a/web/src/lib/components/ui/Separator.stories.svelte
+++ b/web/src/lib/components/ui/Separator.stories.svelte
@@ -34,7 +34,7 @@
 
 <Story name="Vertical" args={{ orientation: "vertical" }}>
 	{#snippet template(args)}
-		<div class="flex h-8 items-stretch gap-3">
+		<div class="flex h-8 items-stretch gap-sm">
 			<span>Before</span>
 			<Separator {...args} />
 			<span>After</span>
@@ -44,7 +44,7 @@
 
 <Story name="Dot" args={{ variant: "dot" }}>
 	{#snippet template(args)}
-		<div class="flex items-center gap-2">
+		<div class="flex items-center gap-xs">
 			<span>Before</span>
 			<Separator {...args} />
 			<span>After</span>
@@ -53,16 +53,16 @@
 </Story>
 
 <Story name="Variants">
-	<div class="flex flex-col gap-4">
+	<div class="flex flex-col gap-md">
 		<div class="w-64">
 			<Separator variant="line" />
 		</div>
-		<div class="flex h-8 items-stretch gap-3">
+		<div class="flex h-8 items-stretch gap-sm">
 			<span>Before</span>
 			<Separator variant="line" orientation="vertical" />
 			<span>After</span>
 		</div>
-		<div class="flex items-center gap-2">
+		<div class="flex items-center gap-xs">
 			<span>Before</span>
 			<Separator variant="dot" />
 			<span>After</span>
@@ -71,8 +71,9 @@
 </Story>
 
 <Story name="In a metadata row">
-	<div class="flex items-center gap-2 text-foreground-muted">
-		<span class="typography-monospace-regular text-foreground-default">a1b2c3d</span>
+	<div class="flex items-center gap-xs text-foreground-muted">
+		<span class="typography-monospace-regular font-normal text-foreground-default">a1b2c3d</span
+		>
 		<Separator variant="dot" />
 		<span>eti</span>
 		<Separator variant="dot" />
diff --git a/web/src/lib/components/ui/ShimmerText.stories.svelte b/web/src/lib/components/ui/ShimmerText.stories.svelte
index 54b51f90b..218a631e2 100644
--- a/web/src/lib/components/ui/ShimmerText.stories.svelte
+++ b/web/src/lib/components/ui/ShimmerText.stories.svelte
@@ -38,7 +38,7 @@
 
 <Story name="Staggered">
 	{#snippet template()}
-		<div class="flex flex-col gap-1 typography-paragraph-large">
+		<div class="flex flex-col gap-2xs typography-paragraph-large">
 			<ShimmerText color="muted" delay={0}>Resolving knots</ShimmerText>
 			<ShimmerText color="muted" delay={0.3}>Fetching objects</ShimmerText>
 			<ShimmerText color="muted" delay={0.6}>Building index</ShimmerText>
diff --git a/web/src/lib/components/ui/SignupPrompt.svelte b/web/src/lib/components/ui/SignupPrompt.svelte
index 69236e9c7..2dde14ea6 100644
--- a/web/src/lib/components/ui/SignupPrompt.svelte
+++ b/web/src/lib/components/ui/SignupPrompt.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <div
-	class="flex flex-wrap items-center gap-2 rounded-sm border border-background-info-subtle-hover bg-background-info-subtle p-4"
+	class="flex flex-wrap items-center gap-xs rounded-sm border border-background-info-subtle-hover bg-background-info-subtle p-md"
 >
 	<Button variant="primary" insetShadow={true} href={resolve("/signup")}>Sign up</Button>
 	<span>
diff --git a/web/src/lib/components/ui/Spinner.stories.svelte b/web/src/lib/components/ui/Spinner.stories.svelte
index a7e28677c..32ac69d86 100644
--- a/web/src/lib/components/ui/Spinner.stories.svelte
+++ b/web/src/lib/components/ui/Spinner.stories.svelte
@@ -15,7 +15,7 @@
 <Story name="Default" />
 
 <Story name="Sizes" asChild>
-	<div class="flex items-center gap-3">
+	<div class="flex items-center gap-sm">
 		<Spinner class="size-3" />
 		<Spinner class="size-4" />
 		<Spinner class="size-6" />
diff --git a/web/src/lib/components/ui/SplitButton.svelte b/web/src/lib/components/ui/SplitButton.svelte
index 285f3448c..93a9b235f 100644
--- a/web/src/lib/components/ui/SplitButton.svelte
+++ b/web/src/lib/components/ui/SplitButton.svelte
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 	import ChevronDown from "$icon/chevron-down";
-	import Button, { type ButtonVariants } from "$lib/components/ui/Button.svelte";
+	import Button, { buttonIcon, type ButtonVariants } from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 	import Dropdown, { type DropdownVariants } from "$lib/components/ui/Dropdown.svelte";
 	import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
@@ -67,7 +67,7 @@
 		     can gate one option (a conflicting merge, say) without trapping the user -->
 		<Dropdown variant="button" buttonVariant={variant} {size} {align} label={menuLabel}>
 			{#snippet trigger()}
-				<ChevronDown class="size-4" />
+				<ChevronDown class={buttonIcon({ size })} />
 			{/snippet}
 			{#each options as option, index (option.label)}
 				<DropdownItem
diff --git a/web/src/lib/components/ui/TabPanel.stories.svelte b/web/src/lib/components/ui/TabPanel.stories.svelte
deleted file mode 100644
index 7fc51757e..000000000
--- a/web/src/lib/components/ui/TabPanel.stories.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
-	import Tabs from "$lib/components/ui/Tabs.svelte";
-	import SquareChartGantt from "$icon/square-chart-gantt";
-	import CircleDot from "$icon/circle-dot";
-	import GitPullRequest from "$icon/git-pull-request";
-
-	const tabs = [
-		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: "#" },
-		{ id: "issues", label: "Issues", icon: CircleDot, count: 7, href: "#" },
-		{ id: "pulls", label: "Pulls", icon: GitPullRequest, href: "#" }
-	];
-
-	const { Story } = defineMeta({
-		title: "UI/TabPanel",
-		component: TabPanel,
-		tags: ["autodocs"]
-	});
-</script>
-
-<Story name="Default" asChild>
-	<div class="mx-auto max-w-5xl">
-		<Tabs {tabs} active="overview" label="example sections" />
-		<TabPanel>
-			<p>The active tab's bottom edge merges into this panel — one continuous outline.</p>
-		</TabPanel>
-	</div>
-</Story>
-
-<Story name="Second tab active" asChild>
-	<div class="mx-auto max-w-5xl">
-		<Tabs {tabs} active="issues" label="example sections" />
-		<TabPanel>
-			<p>"Issues" is active now, and the seam moves with it.</p>
-		</TabPanel>
-	</div>
-</Story>
-
-<Story name="Custom padding" asChild>
-	<div class="mx-auto max-w-5xl">
-		<Tabs {tabs} active="overview" label="example sections" />
-		<TabPanel class="py-6">
-			<p>Roomier vertical padding (py-6) for form-heavy pages.</p>
-		</TabPanel>
-	</div>
-</Story>
-
-<Story name="Unpadded grid" asChild>
-	<div class="mx-auto max-w-5xl">
-		<Tabs {tabs} active="overview" label="example sections" />
-		<TabPanel as="div" padded={false} class="grid md:grid-cols-3 md:gap-4 md:p-6">
-			<div class="p-6 md:p-0">Sidebar</div>
-			<div class="border-t border-border-default p-6 md:col-span-2 md:border-t-0 md:p-0">
-				Main content laid out by the caller.
-			</div>
-		</TabPanel>
-	</div>
-</Story>
diff --git a/web/src/lib/components/ui/TabPanel.svelte b/web/src/lib/components/ui/TabPanel.svelte
deleted file mode 100644
index 9cb8f4150..000000000
--- a/web/src/lib/components/ui/TabPanel.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script module lang="ts">
-	import { tv } from "tailwind-variants";
-
-	export const tabPanel = tv({
-		base: "rounded-sm border border-border-default bg-background-default text-foreground-default",
-		variants: {
-			// the common surface padding; turn off to lay out children yourself
-			padded: {
-				true: "p-4",
-				false: ""
-			}
-		},
-		defaultVariants: {
-			padded: true
-		}
-	});
-</script>
-
-<script lang="ts">
-	import type { Snippet } from "svelte";
-
-	interface Props {
-		// tag to render as; a semantic <section> by default
-		as?: string;
-		padded?: boolean;
-		class?: string;
-		children: Snippet;
-	}
-
-	let { as = "section", padded = true, class: className, children }: Props = $props();
-</script>
-
-<svelte:element this={as} class={tabPanel({ padded, class: className })}>
-	{@render children()}
-</svelte:element>
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index 9d66e391c..80282cdb8 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -16,28 +16,28 @@
 			nav: "",
 			plate: "pointer-events-none absolute top-0 left-0",
 			item: "group/item relative flex items-center no-underline hover:no-underline",
-			icon: "size-4",
+			icon: "size-3.5",
 			label: "",
 			ghost: "invisible h-0 overflow-hidden font-medium select-none",
-			count: "rounded-sm px-1 typography-paragraph-small"
+			count: "rounded-sm px-2xs typography-paragraph-small"
 		},
 		variants: {
 			vertical: {
 				true: {
-					nav: "relative flex w-full flex-col gap-1 bg-background-navigation-frame p-2",
+					nav: "relative flex w-full flex-col gap-2xs bg-background-navigation-frame p-xs",
 					plate: "rounded-sm border border-border-navigation-item-active bg-background-navigation-item",
-					item: "min-h-8 w-full gap-1.5 overflow-hidden rounded-sm border border-transparent px-3 py-1.5 typography-paragraph-regular text-foreground-default transition-colors duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+					item: "min-h-8 w-full gap-1.5 overflow-hidden rounded-sm border border-transparent px-sm py-1.5 typography-paragraph-regular text-foreground-default transition-colors duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
 					icon: "size-3.5 shrink-0",
 					label: "min-w-0 truncate",
 					count: "ml-auto"
 				},
 				false: {
-					nav: "relative z-10 flex w-full overflow-x-auto overflow-y-hidden pl-4",
+					nav: "relative z-10 flex w-full overflow-x-auto overflow-y-hidden pl-md",
 					plate: "rounded-t border border-b-0 border-border-default bg-background-default",
-					item: "mr-1 rounded-t border border-b-0 border-transparent px-4 pt-1 pb-1.25 whitespace-nowrap text-foreground-default",
-					icon: "mr-2",
+					item: "mr-2xs rounded-t border border-b-0 border-transparent px-md pt-2xs pb-1.25 whitespace-nowrap text-foreground-default",
+					icon: "mr-xs",
 					label: "flex flex-col",
-					count: "ml-1"
+					count: "ml-2xs"
 				}
 			},
 			selected: {
diff --git a/web/src/lib/components/ui/Tag.svelte b/web/src/lib/components/ui/Tag.svelte
index bcb228ed0..7f16ad0d4 100644
--- a/web/src/lib/components/ui/Tag.svelte
+++ b/web/src/lib/components/ui/Tag.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const tag = tv({
-		base: "inline-flex items-center gap-1 rounded-sm leading-none font-medium select-none",
+		base: "inline-flex items-center gap-2xs rounded-sm leading-none select-none",
 		variants: {
 			color: {
 				default:
@@ -18,14 +18,15 @@
 				info: "border border-transparent bg-background-info-subtle text-foreground-info-strong"
 			},
 			size: {
-				small: "px-1 typography-paragraph-mini",
-				regular: "px-1.5 py-0.5 typography-paragraph-small",
-				large: "gap-2 px-2 py-1.5 typography-paragraph-regular font-normal"
+				mini: "px-2xs py-xs typography-paragraph-mini font-medium",
+				small: "px-2xs py-xs typography-paragraph-small font-medium",
+				regular: "px-xs py-sm typography-paragraph-regular",
+				large: "gap-xs px-xs py-sm typography-paragraph-large"
 			}
 		},
 		defaultVariants: {
 			color: "default",
-			size: "regular"
+			size: "small"
 		}
 	});
 
@@ -47,8 +48,8 @@
 	}
 
 	let {
-		color = "default",
-		size = "regular",
+		color = tag.defaultVariants.color,
+		size = tag.defaultVariants.size,
 		icon,
 		class: className,
 		iconClass,
@@ -58,11 +59,12 @@
 
 	const classes = $derived(tag({ color, size, class: className }));
 	const Icon = $derived(icon);
+	const iconSize = $derived(size === "small" ? "size-3" : "size-3.5");
 </script>
 
 <span class={classes} {...rest}>
 	{#if Icon}
-		<Icon class="mt-px size-3 {iconClass}" aria-hidden="true" />
+		<Icon class="mt-px {iconSize} {iconClass}" aria-hidden="true" />
 	{/if}
 	{#if children}
 		{@render children()}
diff --git a/web/src/lib/components/ui/TagInput.svelte b/web/src/lib/components/ui/TagInput.svelte
index b403aa2d4..809a0d169 100644
--- a/web/src/lib/components/ui/TagInput.svelte
+++ b/web/src/lib/components/ui/TagInput.svelte
@@ -11,15 +11,15 @@
 			icon: "text-foreground-subtle",
 			field: "shrink-0 opacity-70",
 			label: "truncate",
-			remove: "text-foreground-inherit -mr-0.5 flex min-h-0 shrink-0 rounded-xs p-0 transition-colors focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-border-focus",
+			remove: "text-foreground-inherit -mr-3xs flex min-h-0 shrink-0 rounded-xs p-none transition-colors focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-border-focus",
 			draft: "w-full min-w-0 bg-transparent outline-none placeholder:text-foreground-placeholder placeholder:transition-opacity placeholder:duration-200 disabled:cursor-not-allowed motion-reduce:placeholder:transition-none",
-			panel: "tag-panel fixed inset-auto z-50 m-0 hidden h-fit max-h-[min(18rem,calc(100dvh-1rem))] w-72 max-w-[calc(100vw-1rem)] popover-transition flex-col overflow-hidden rounded-sm border border-border-default bg-background-default p-0 text-foreground-default open:flex",
+			panel: "tag-panel fixed inset-auto z-50 m-none hidden h-fit max-h-[min(18rem,calc(100dvh-1rem))] w-72 max-w-[calc(100vw-1rem)] popover-transition flex-col overflow-hidden rounded-sm border border-border-default bg-background-default p-none text-foreground-default open:flex",
 			options:
-				"min-h-0 flex-auto touch-pan-y overflow-y-auto overscroll-contain p-1 [-webkit-overflow-scrolling:touch]",
-			option: "flex w-full cursor-pointer items-center gap-2 rounded-sm bg-transparent px-2 py-1.5 text-left data-active:bg-background-subtle",
+				"min-h-0 flex-auto touch-pan-y overflow-y-auto overscroll-contain p-2xs [-webkit-overflow-scrolling:touch]",
+			option: "flex w-full cursor-pointer items-center gap-xs rounded-sm bg-transparent px-xs py-1.5 text-left data-active:bg-background-subtle",
 			optionLabel: "min-w-0 flex-1 truncate",
-			empty: "px-2 py-6 text-center text-foreground-muted",
-			footer: "mt-1.5 flex items-start gap-2",
+			empty: "px-xs py-xl text-center text-foreground-muted",
+			footer: "mt-1.5 flex items-start gap-xs",
 			message: "grid min-w-0 flex-1",
 			hint: "col-start-1 row-start-1 text-foreground-muted transition-opacity duration-200",
 			rejection:
@@ -28,8 +28,14 @@
 		},
 		variants: {
 			size: {
+				mini: {
+					list: "gap-2xs",
+					draftItem: "basis-16",
+					footer: "typography-paragraph-mini",
+					panel: "typography-paragraph-mini"
+				},
 				small: {
-					list: "gap-1",
+					list: "gap-2xs",
 					// basis, not min-width: a wrapping flex line only pushes an item to the next
 					// row when its basis won't fit, and flex-1 then lets it fill that row
 					draftItem: "basis-16",
@@ -87,7 +93,7 @@
 	import { popoverOrigin, type PopoverOrigin } from "$lib/components/ui/popover.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
-	import Button from "$lib/components/ui/Button.svelte";
+	import Button, { buttonIcon } from "$lib/components/ui/Button.svelte";
 
 	interface Props extends Omit<HTMLInputAttributes, "class" | "value" | "size" | "list"> {
 		tags?: InputTag[];
@@ -196,8 +202,10 @@
 
 	const box = $derived(inputField({ size, error, disabled, rich: true, class: className }));
 	const slots = $derived(tagInput({ size, hasTags: tags.length > 0 }));
-	const iconSize = $derived(size === "large" ? "size-5" : "size-4");
-	const glyphSize = $derived(size === "large" ? "size-3.5" : "size-3");
+	const iconSize = $derived(
+		size === "large" ? "size-4" : size === "mini" ? "size-3" : "size-3.5"
+	);
+	const glyphSize = buttonIcon({ size: "mini" });
 
 	const commitsOnEnter = $derived(commitOn.includes("enter"));
 	const separators = $derived(commitOn.map((key) => TAG_COMMIT_CHARS[key]));
@@ -542,7 +550,7 @@
 		</ul>
 
 		{#if loading}
-			<Spinner class="{iconSize} mt-0.5 shrink-0 self-start" />
+			<Spinner class="{iconSize} mt-3xs shrink-0 self-start" />
 		{/if}
 	</div>
 
@@ -587,7 +595,7 @@
 							{#if option.icon}
 								{@const OptionIcon = option.icon}
 								<OptionIcon
-									class="size-4 shrink-0 text-foreground-subtle"
+									class="size-3.5 shrink-0 text-foreground-subtle"
 									aria-hidden="true"
 								/>
 							{/if}
diff --git a/web/src/lib/components/ui/Textarea.stories.svelte b/web/src/lib/components/ui/Textarea.stories.svelte
index 9275d3031..1764cfb03 100644
--- a/web/src/lib/components/ui/Textarea.stories.svelte
+++ b/web/src/lib/components/ui/Textarea.stories.svelte
@@ -39,7 +39,7 @@
 <Story name="With right icon" args={{ iconRight: Sun, placeholder: "Write something" }} />
 
 <Story name="States">
-	<div class="flex w-64 flex-col gap-3">
+	<div class="flex w-64 flex-col gap-sm">
 		<Textarea placeholder="Default" />
 		<Textarea placeholder="Filled" value="Some notes go here" />
 		<Textarea placeholder="Error" error value="Invalid value" />
diff --git a/web/src/lib/components/ui/Textarea.svelte b/web/src/lib/components/ui/Textarea.svelte
index 7b59bd31a..4aea9fa55 100644
--- a/web/src/lib/components/ui/Textarea.svelte
+++ b/web/src/lib/components/ui/Textarea.svelte
@@ -8,9 +8,9 @@
 
 	export const textareaField = tv({
 		slots: {
-			root: "relative flex items-start gap-1 rounded-sm border bg-background-default transition-colors",
+			root: "relative flex items-start gap-2xs rounded-sm border bg-background-default transition-colors",
 			textarea:
-				"flex-1 self-stretch bg-transparent py-2 outline-none placeholder:text-foreground-placeholder read-only:resize-none disabled:cursor-not-allowed disabled:resize-none"
+				"flex-1 self-stretch bg-transparent py-xs outline-none placeholder:text-foreground-placeholder read-only:resize-none disabled:cursor-not-allowed disabled:resize-none"
 		},
 		variants: {
 			// `regular` keeps textareaMinHeight above in sync — it's 2px shorter because the
@@ -106,7 +106,7 @@
 	{#if iconLeft}
 		{@const IconLeft = iconLeft}
 		<IconLeft
-			class="mt-2.5 mr-1 ml-2.5 size-4 shrink-0 text-foreground-subtle"
+			class="mt-2.5 mr-2xs ml-2.5 size-3.5 shrink-0 text-foreground-subtle"
 			aria-hidden="true"
 		/>
 	{/if}
@@ -120,11 +120,11 @@
 		class={textarea({ class: textareaPadding })}
 		{...rest}></textarea>
 	{#if loading}
-		<Spinner class="absolute top-2 right-2.5 size-4" />
+		<Spinner class="absolute top-2 right-2.5 size-3.5" />
 	{:else if iconRight}
 		{@const IconRight = iconRight}
 		<IconRight
-			class="mt-2.5 mr-2.5 ml-1 size-4 shrink-0 text-foreground-subtle"
+			class="mt-2.5 mr-2.5 ml-2xs size-3.5 shrink-0 text-foreground-subtle"
 			aria-hidden="true"
 		/>
 	{/if}
diff --git a/web/src/lib/components/ui/Toggle.stories.svelte b/web/src/lib/components/ui/Toggle.stories.svelte
index 7ea7a64f3..e9da46b64 100644
--- a/web/src/lib/components/ui/Toggle.stories.svelte
+++ b/web/src/lib/components/ui/Toggle.stories.svelte
@@ -27,7 +27,7 @@
 <Story name="Without label" />
 
 <Story name="States">
-	<div class="flex flex-col gap-3">
+	<div class="flex flex-col gap-sm">
 		<Toggle>Unchecked</Toggle>
 		<Toggle checked>Checked</Toggle>
 		<Toggle disabled>Disabled</Toggle>
@@ -36,7 +36,7 @@
 </Story>
 
 <Story name="Block layout">
-	<div class="flex w-64 flex-col gap-3">
+	<div class="flex w-64 flex-col gap-sm">
 		<Toggle layout="block">Label pushed to the far edge</Toggle>
 		<Toggle layout="block" checked>Another one, wrapping when the text runs long</Toggle>
 	</div>
diff --git a/web/src/lib/components/ui/Toggle.svelte b/web/src/lib/components/ui/Toggle.svelte
index e331e5265..03bec1063 100644
--- a/web/src/lib/components/ui/Toggle.svelte
+++ b/web/src/lib/components/ui/Toggle.svelte
@@ -1,6 +1,39 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import type { HTMLInputAttributes } from "svelte/elements";
+	import { tv } from "tailwind-variants";
+
+	const toggle = tv({
+		slots: {
+			label: "items-center gap-xs",
+			input: [
+				"peer absolute inset-0 size-full cursor-pointer appearance-none rounded-full bg-background-muted",
+				"transition-colors duration-150",
+				"checked:bg-foreground-default",
+				"enabled:hover:bg-background-strong checked:enabled:hover:bg-foreground-muted",
+				"focus-visible:ring-2 focus-visible:ring-border-strong focus-visible:outline-none",
+				"disabled:cursor-not-allowed disabled:bg-background-inset checked:disabled:bg-foreground-disabled"
+			],
+			thumb: [
+				"pointer-events-none absolute top-[2px] left-[2px] size-sm rounded-full bg-background-default",
+				"transition-transform duration-150 peer-checked:translate-x-[16px]"
+			],
+			text: ""
+		},
+		variants: {
+			layout: {
+				inline: { label: "inline-flex", text: "whitespace-nowrap" },
+				block: { label: "flex w-full", text: "min-w-0 flex-1" }
+			},
+			disabled: {
+				true: { label: "cursor-not-allowed text-foreground-disabled" },
+				false: { label: "cursor-pointer" }
+			}
+		},
+		defaultVariants: {
+			layout: "inline"
+		}
+	});
 
 	interface Props extends Omit<HTMLInputAttributes, "type" | "class" | "checked" | "children"> {
 		checked?: boolean;
@@ -19,45 +52,22 @@
 		...rest
 	}: Props = $props();
 
-	const labelClasses = $derived(
-		[
-			"items-center gap-2",
-			layout === "block" ? "flex w-full" : "inline-flex",
-			disabled ? "cursor-not-allowed text-foreground-disabled" : "cursor-pointer",
-			className ?? ""
-		].join(" ")
-	);
-
-	const inputClasses = [
-		"peer absolute inset-0 size-full appearance-none rounded-full bg-background-muted cursor-pointer",
-		"transition-colors duration-150",
-		"checked:bg-foreground-default",
-		"enabled:hover:bg-background-strong checked:enabled:hover:bg-foreground-muted",
-		"focus-visible:ring-2 focus-visible:ring-border-strong focus-visible:outline-none",
-		"disabled:cursor-not-allowed disabled:bg-background-inset checked:disabled:bg-foreground-disabled"
-	].join(" ");
-
-	const thumbClasses = [
-		"pointer-events-none absolute top-px left-px size-4 rounded-full bg-background-default",
-		"transition-transform duration-150 peer-checked:translate-x-[15px]"
-	].join(" ");
-
-	const textClasses = $derived(layout === "block" ? "min-w-0 flex-1" : "whitespace-nowrap");
+	const classes = $derived(toggle({ layout, disabled }));
 </script>
 
-<label class={labelClasses}>
-	<span class="relative inline-flex h-4.5 w-8.25 shrink-0">
+<label class={classes.label({ class: className })}>
+	<span class="relative inline-flex h-md w-2xl shrink-0">
 		<input
 			type="checkbox"
 			role="switch"
 			bind:checked
 			{disabled}
-			class={inputClasses}
+			class={classes.input()}
 			{...rest}
 		/>
-		<span class={thumbClasses} aria-hidden="true"></span>
+		<span class={classes.thumb()} aria-hidden="true"></span>
 	</span>
 	{#if children}
-		<span class={textClasses}>{@render children()}</span>
+		<span class={classes.text()}>{@render children()}</span>
 	{/if}
 </label>
diff --git a/web/src/lib/components/ui/Tooltip.stories.svelte b/web/src/lib/components/ui/Tooltip.stories.svelte
index 184f558dd..5d57e1bb5 100644
--- a/web/src/lib/components/ui/Tooltip.stories.svelte
+++ b/web/src/lib/components/ui/Tooltip.stories.svelte
@@ -23,7 +23,7 @@
 {/snippet}
 
 <Story name="Default" asChild>
-	<div class="flex justify-center p-16">
+	<div class="flex justify-center p-5xl">
 		<Tooltip content="Add to library">
 			<Button>Hover me</Button>
 		</Tooltip>
@@ -33,7 +33,7 @@
 <!-- `side` picks the preferred edge; the bubble still flips to the opposite one when the
 	preferred side would overflow the viewport. -->
 <Story name="Sides" asChild>
-	<div class="flex justify-center gap-2 p-16">
+	<div class="flex justify-center gap-xs p-5xl">
 		{#each ["left", "top", "bottom", "right"] as const as side (side)}
 			<Tooltip {side} content={side}>
 				<Button>{side}</Button>
@@ -43,15 +43,15 @@
 </Story>
 
 <Story name="Icon button" asChild>
-	<div class="flex justify-center p-16">
+	<div class="flex justify-center p-5xl">
 		<Tooltip content="New issue">
-			<Button icon={Plus} aria-label="New issue" class="px-2" />
+			<Button icon={Plus} aria-label="New issue" class="px-xs" />
 		</Tooltip>
 	</div>
 </Story>
 
 <Story name="Rich content" asChild>
-	<div class="flex justify-center p-16">
+	<div class="flex justify-center p-5xl">
 		<Tooltip content={richContent}>
 			<Button>Signed commits</Button>
 		</Tooltip>
@@ -61,7 +61,7 @@
 <!-- Note that once any tooltip has been shown,
 	moving to a neighbouring trigger opens instantly regardless of delay. -->
 <Story name="No delay" asChild>
-	<div class="flex justify-center gap-2 p-16">
+	<div class="flex justify-center gap-xs p-5xl">
 		<Tooltip content="Opens immediately" delay={0}>
 			<Button>No delay</Button>
 		</Tooltip>
@@ -74,7 +74,7 @@
 <!-- the arrow points at whichever edge the bubble actually landed on, so it stays correct
 	even when the preferred side had to flip. -->
 <Story name="No arrow" asChild>
-	<div class="flex justify-center p-16">
+	<div class="flex justify-center p-5xl">
 		<Tooltip content="No pointer" arrow={false}>
 			<Button>No arrow</Button>
 		</Tooltip>
@@ -83,7 +83,7 @@
 
 <!-- `disabled` skips the tooltip without changing the markup around the trigger -->
 <Story name="Disabled" asChild>
-	<div class="flex justify-center p-16">
+	<div class="flex justify-center p-5xl">
 		<Tooltip content="You will not see this" disabled>
 			<Button>No tooltip</Button>
 		</Tooltip>
diff --git a/web/src/lib/components/ui/Tooltip.svelte b/web/src/lib/components/ui/Tooltip.svelte
index 594cc1a91..ac2966e40 100644
--- a/web/src/lib/components/ui/Tooltip.svelte
+++ b/web/src/lib/components/ui/Tooltip.svelte
@@ -12,7 +12,7 @@
 			wrapper: "inline-flex",
 			// overflow-visible undoes the UA stylesheet's `overflow: auto` on [popover], which
 			// would otherwise clip the arrow off at the bubble's padding box
-			bubble: "tooltip-bubble fixed inset-auto z-50 m-0 h-fit w-max max-w-64 popover-transition overflow-visible rounded-sm bg-background-emphasis px-2 pt-1.5 pb-1 typography-paragraph-small text-foreground-inverted shadow-regular"
+			bubble: "tooltip-bubble fixed inset-auto z-50 m-none h-fit w-max max-w-64 popover-transition overflow-visible rounded-sm bg-background-emphasis px-xs pt-1.5 pb-2xs typography-paragraph-small text-foreground-inverted shadow-regular"
 		},
 		variants: {
 			side: {
@@ -41,6 +41,7 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import { onMount } from "svelte";
+	import { popoverExit } from "$lib/popoverExit";
 
 	interface Props {
 		content: string | Snippet;
@@ -247,6 +248,7 @@
 	style="position-anchor: {anchorName}; --tooltip-arrow: {arrowOffset}px"
 	class={classes.bubble({ class: bubbleClass })}
 	ontoggle={onToggle}
+	{@attach popoverExit()}
 	{@attach popoverOrigin(
 		() => wrapperEl,
 		() => origin
diff --git a/web/src/lib/components/ui/User.stories.svelte b/web/src/lib/components/ui/User.stories.svelte
index 32c5dcd62..62da905f7 100644
--- a/web/src/lib/components/ui/User.stories.svelte
+++ b/web/src/lib/components/ui/User.stories.svelte
@@ -34,7 +34,7 @@
 <Story name="Not a link" args={{ link: false }} />
 
 <Story name="Sizes">
-	<div class="flex flex-col items-start gap-3">
+	<div class="flex flex-col items-start gap-sm">
 		<User size="header" />
 		<User size="large" />
 		<User size="regular" />
diff --git a/web/src/lib/components/ui/User.svelte b/web/src/lib/components/ui/User.svelte
index 550c6e44f..17139281f 100644
--- a/web/src/lib/components/ui/User.svelte
+++ b/web/src/lib/components/ui/User.svelte
@@ -10,7 +10,7 @@
 		variants: {
 			size: {
 				header: {
-					root: "gap-2",
+					root: "gap-xs",
 					handle: "typography-heading-4"
 				},
 				large: {
@@ -26,7 +26,7 @@
 					handle: "typography-paragraph-small"
 				},
 				mini: {
-					root: "gap-1",
+					root: "gap-2xs",
 					handle: "typography-paragraph-mini"
 				}
 			},
diff --git a/web/src/lib/components/ui/inputField.ts b/web/src/lib/components/ui/inputField.ts
index 8baefdbec..8c11e164a 100644
--- a/web/src/lib/components/ui/inputField.ts
+++ b/web/src/lib/components/ui/inputField.ts
@@ -27,9 +27,10 @@ export const inputField = tv({
 	base: "flex items-center rounded-sm border bg-background-default transition-colors",
 	variants: {
 		size: {
-			small: "min-h-8 gap-1.5 px-1.5 py-1 typography-paragraph-small",
-			regular: "min-h-9 gap-2 px-2 py-1 typography-paragraph-regular",
-			large: "min-h-10 gap-2.5 px-3 py-1 typography-paragraph-large"
+			mini: "min-h-6 gap-2xs px-2xs py-3xs typography-paragraph-mini",
+			small: "min-h-7 gap-1.5 px-1.5 py-2xs typography-paragraph-small",
+			regular: "min-h-8 gap-xs px-xs py-2xs typography-paragraph-regular",
+			large: "min-h-9 gap-2.5 px-sm py-2xs typography-paragraph-large"
 		},
 		error: {
 			false: "border-border-default focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong",
-- 
2.51.2