diff --git a/web/src/lib/components/settings/SettingsList.svelte b/web/src/lib/components/settings/SettingsList.svelte
index 0e0e5977..8471ac61 100644
--- a/web/src/lib/components/settings/SettingsList.svelte
+++ b/web/src/lib/components/settings/SettingsList.svelte
@@ -2,27 +2,19 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const settingsList = tv({
-		base: "flex w-full flex-col divide-y divide-border-default rounded-sm border border-border-default",
+		// Figma lays these cards out as [row, separator, row] with an 8px gap, so every
+		// row carries 8px of its own padding and divide-y draws the hairline between two
+		// of them — the line ends up centred in the space rather than flush against the
+		// row above. That leaves py-1 for the card itself, which is the rest of the 12px
+		// Figma puts between the card edge and the first row.
+		base: "flex w-full flex-col divide-y divide-border-default rounded-sm border border-border-default py-1 [&>*]:py-2",
 		variants: {
-			// Figma spaces rows with a gap and drops the hairline in the middle of it,
-			// so each row carries half the gap as its own padding and divide-y draws the
-			// line between the two halves — that way the divider is split evenly across
-			// the rows it separates rather than sitting flush against one of them. The
-			// card's own vertical padding is whatever is left of 12px once a row's half
-			// is counted, which is why it lives here rather than in `padding`. Named in
-			// Tailwind spacing units because the designs use all three of 8 / 12 / 16px.
-			gap: {
-				"2": "py-2 [&>*]:py-1",
-				"3": "py-1.5 [&>*]:py-1.5",
-				"4": "py-1 [&>*]:py-2"
-			},
 			padding: {
 				default: "px-4",
 				tight: "px-3"
 			}
 		},
 		defaultVariants: {
-			gap: "4",
 			padding: "default"
 		}
 	});
@@ -34,15 +26,14 @@
 	import type { Snippet } from "svelte";
 
 	interface Props {
-		gap?: SettingsListVariants["gap"];
 		padding?: SettingsListVariants["padding"];
 		class?: string;
 		children: Snippet;
 	}
 
-	let { gap = "4", padding = "default", class: className, children }: Props = $props();
+	let { padding = "default", class: className, children }: Props = $props();
 
-	const classes = $derived(settingsList({ gap, padding, class: className }));
+	const classes = $derived(settingsList({ padding, class: className }));
 </script>
 
 <div class={classes}>
diff --git a/web/src/lib/components/settings/SettingsPanel.stories.svelte b/web/src/lib/components/settings/SettingsPanel.stories.svelte
index 9d353f9c..61069723 100644
--- a/web/src/lib/components/settings/SettingsPanel.stories.svelte
+++ b/web/src/lib/components/settings/SettingsPanel.stories.svelte
@@ -94,7 +94,7 @@
 			{#snippet action()}
 				<Button icon={UserRoundPlus}>Add collaborator</Button>
 			{/snippet}
-			<SettingsList gap="3">
+			<SettingsList>
 				<SettingsRow stack>
 					{#snippet label()}
 						<span class="flex min-w-0 items-center gap-2">
diff --git a/web/src/lib/components/settings/SettingsSection.svelte b/web/src/lib/components/settings/SettingsSection.svelte
index e51c4750..cbd26447 100644
--- a/web/src/lib/components/settings/SettingsSection.svelte
+++ b/web/src/lib/components/settings/SettingsSection.svelte
@@ -1,21 +1,18 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import SettingsList from "./SettingsList.svelte";
-	import type { SettingsListVariants } from "./SettingsList.svelte";
 
 	interface Props {
 		/** omit for the leading card, which Figma leaves unlabelled */
 		title?: string;
 		/** gap between the heading and its card — 12px on the user pages, 16 on repo */
 		headingGap?: "3" | "4";
-		/** row spacing inside the framed card */
-		rowGap?: SettingsListVariants["gap"];
 		/** set false when the children provide their own container(s) */
 		framed?: boolean;
 		children: Snippet;
 	}
 
-	let { title, headingGap = "3", rowGap = "2", framed = true, children }: Props = $props();
+	let { title, headingGap = "3", framed = true, children }: Props = $props();
 
 	const gapClass = $derived(headingGap === "4" ? "gap-4" : "gap-3");
 </script>
@@ -25,7 +22,7 @@
 		<h2 class="typography-heading-4 text-foreground-default">{title}</h2>
 	{/if}
 	{#if framed}
-		<SettingsList gap={rowGap}>
+		<SettingsList>
 			{@render children()}
 		</SettingsList>
 	{:else}
diff --git a/web/src/routes/[handle]/[repo]/settings/+page.svelte b/web/src/routes/[handle]/[repo]/settings/+page.svelte
index 7f4c3d51..227f279d 100644
--- a/web/src/routes/[handle]/[repo]/settings/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/+page.svelte
@@ -76,7 +76,7 @@
 <div class="flex w-full flex-col gap-10">
 	<!-- the leading pair of cards carries no heading in the design -->
 	<div class="flex w-full flex-col gap-4">
-		<SettingsList gap="3">
+		<SettingsList>
 			<SettingsRow title="Description" stack>
 				<Input
 					bind:value={form.description}
@@ -96,7 +96,7 @@
 			</SettingsRow>
 		</SettingsList>
 
-		<SettingsList gap="3">
+		<SettingsList>
 			<SettingsRow
 				title="Default branch"
 				description={[
@@ -127,7 +127,7 @@
 					<Button icon={X} onclick={unsubscribeAll}>Unsubscribe all</Button>
 				{/snippet}
 
-				<SettingsList gap="3">
+				<SettingsList>
 					{#each labels as item (item.name)}
 						<SettingsRow>
 							{#snippet label()}
@@ -164,7 +164,7 @@
 
 	<hr class="w-full border-0 border-t border-border-default" />
 
-	<SettingsSection title="Danger zone" headingGap="4" rowGap="3">
+	<SettingsSection title="Danger zone" headingGap="4">
 		<SettingsRow title="Rename">
 			<Button icon={Pencil} href={path(`${base}/rename`)}>Rename repository</Button>
 		</SettingsRow>
diff --git a/web/src/routes/[handle]/[repo]/settings/access/+page.svelte b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
index 46db283e..ecf8612e 100644
--- a/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
@@ -46,7 +46,7 @@
 		<Button icon={UserRoundPlus} href={path(`${base}/access/new`)}>Add collaborator</Button>
 	{/snippet}
 
-	<SettingsList gap="3">
+	<SettingsList>
 		{#each collaborators as person (person.handle)}
 			<SettingsRow stack>
 				{#snippet label()}
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
index 1c788d8b..53f0bc77 100644
--- a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
@@ -61,7 +61,7 @@
 	{#if hooks.length === 0}
 		<SettingsEmpty message="No webhooks yet" />
 	{:else}
-		<SettingsList gap="3">
+		<SettingsList>
 			{#each hooks as hook (hook.id)}
 				<!-- the toggle rides the top-right corner while the actions sit under it,
 				     so this row is a two-column block rather than a SettingsRow. On a
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
index 1eaa8db5..ec9edd77 100644
--- a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
@@ -49,7 +49,7 @@
 		<DocsButton href="https://docs.tangled.org/spindles" />
 	{/snippet}
 
-	<SettingsList gap="3">
+	<SettingsList>
 		<SettingsRow title="Spindle" stack>
 			<Select bind:value={spindle} aria-label="Spindle" class="w-full sm:w-80">
 				{#each spindles as option (option)}
@@ -72,7 +72,7 @@
 		<Button icon={Plus} href={path(`${base}/pipelines/secrets/new`)}>Add secret</Button>
 	{/snippet}
 
-	<SettingsList gap="3">
+	<SettingsList>
 		{#each secrets as secret (secret.name)}
 			<SettingsRow stack>
 				{#snippet label()}
diff --git a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
index d84f2a34..4e2b2541 100644
--- a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
@@ -68,7 +68,7 @@
 	{/if}
 </div>
 
-<SettingsList gap="3">
+<SettingsList>
 	<SettingsRow title="Branch" description="The branch to build and deploy the site from." stack>
 		<Select bind:value={form.branch} aria-label="Branch" class="w-full sm:w-80">
 			{#each branches as branch (branch.value)}
@@ -121,7 +121,7 @@
 
 <hr class="w-full border-0 border-t border-border-default" />
 
-<SettingsSection title="Recent deploys" headingGap="4" rowGap="3" framed={deploys.length > 0}>
+<SettingsSection title="Recent deploys" headingGap="4" framed={deploys.length > 0}>
 	{#if deploys.length === 0}
 		<SettingsEmpty message="No deploys yet." />
 	{:else}