From 4bb51e4a7a82207fcdffc5a2b1f2e277446a4ec0 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Sat, 19 Sep 2026 03:05:31 +0200
Subject: [PATCH] web/settings: rescale settings views

Signed-off-by: eti <eti@eti.tf>
---
 .../lib/components/settings/CodeChip.svelte   |  2 +-
 .../lib/components/settings/DocsButton.svelte |  6 +-
 .../lib/components/settings/DrillDown.svelte  |  6 +-
 .../components/settings/FormActions.svelte    |  6 +-
 .../lib/components/settings/FormRow.svelte    |  2 +-
 .../settings/KeyCard.stories.svelte           |  2 -
 .../lib/components/settings/KeyCard.svelte    |  4 +-
 .../components/settings/KeyCardContent.svelte |  8 +--
 .../settings/RepoGeneralForm.svelte           | 10 ++--
 .../components/settings/SettingsBlock.svelte  |  6 +-
 .../components/settings/SettingsEmpty.svelte  |  2 +-
 .../components/settings/SettingsHeader.svelte |  4 +-
 .../components/settings/SettingsList.svelte   |  6 +-
 .../components/settings/SettingsNav.svelte    |  2 +-
 .../settings/SettingsPanel.stories.svelte     |  8 +--
 .../components/settings/SettingsPanel.svelte  |  4 +-
 .../components/settings/SettingsRow.svelte    | 56 ++++++++++++-------
 .../settings/SettingsSaveBar.svelte           |  2 +-
 .../settings/SettingsSection.svelte           |  2 +-
 .../settings/SettingsToolbar.svelte           |  4 +-
 .../components/settings/ThemePicker.svelte    |  8 +--
 .../components/settings/tabs/EmailsTab.svelte |  6 +-
 .../components/settings/tabs/KeysTab.svelte   |  2 +-
 .../components/settings/tabs/KnotsTab.svelte  |  2 +-
 .../settings/tabs/NotificationsTab.svelte     |  8 +--
 .../settings/tabs/ProfileTab.svelte           | 10 ++--
 .../components/settings/tabs/SitesTab.svelte  |  6 +-
 .../settings/tabs/SpindlesTab.svelte          |  2 +-
 28 files changed, 98 insertions(+), 88 deletions(-)

diff --git a/web/src/lib/components/settings/CodeChip.svelte b/web/src/lib/components/settings/CodeChip.svelte
index c0d0535a6..2bcbf1b4d 100644
--- a/web/src/lib/components/settings/CodeChip.svelte
+++ b/web/src/lib/components/settings/CodeChip.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <span
-	class="inline-flex items-center rounded-sm bg-background-subtle px-2 py-0.5 typography-monospace-regular text-foreground-default {className ??
+	class="inline-flex items-center rounded-sm bg-background-subtle px-xs py-3xs typography-monospace-regular font-normal text-foreground-default {className ??
 		''}"
 >
 	{@render children()}
diff --git a/web/src/lib/components/settings/DocsButton.svelte b/web/src/lib/components/settings/DocsButton.svelte
index 350e4bb56..5fc57bdf4 100644
--- a/web/src/lib/components/settings/DocsButton.svelte
+++ b/web/src/lib/components/settings/DocsButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { button } from "$lib/components/ui/Button.svelte";
+	import { button, buttonIcon } from "$lib/components/ui/Button.svelte";
 	import Book from "$icon/book";
 
 	interface Props {
@@ -10,11 +10,11 @@
 	let { href, label = "Documentation" }: Props = $props();
 </script>
 
-<a {href} rel="external noopener noreferrer" class={button()}>
+<a {href} rel="external noopener noreferrer" class={button({ iconSide: "left" })}>
 	<span
 		class="inline-flex min-w-0 items-center justify-center gap-[inherit] transition-transform duration-150 ease-in-out"
 	>
-		<Book class="size-4 shrink-0" aria-hidden="true" />
+		<Book class={buttonIcon()} aria-hidden="true" />
 		{label}
 	</span>
 </a>
diff --git a/web/src/lib/components/settings/DrillDown.svelte b/web/src/lib/components/settings/DrillDown.svelte
index 58553621d..153614828 100644
--- a/web/src/lib/components/settings/DrillDown.svelte
+++ b/web/src/lib/components/settings/DrillDown.svelte
@@ -17,7 +17,7 @@
 	const lines = $derived(toLines(description));
 </script>
 
-<div class="flex items-center gap-2">
+<div class="flex items-center gap-xs">
 	<a
 		href={resolve(backHref as "/")}
 		class="inline-flex items-center gap-1.5 typography-paragraph-regular text-foreground-link-default no-underline hover:text-foreground-link-hover hover:no-underline"
@@ -27,8 +27,8 @@
 	</a>
 </div>
 
-<div class="flex w-full flex-col gap-4">
-	<div class="flex flex-col gap-1">
+<div class="flex w-full flex-col gap-md">
+	<div class="flex flex-col gap-2xs">
 		<h1 class="typography-paragraph-large text-foreground-default">{title}</h1>
 		{#each lines as line (line)}
 			<p class="typography-paragraph-regular text-foreground-muted">{line}</p>
diff --git a/web/src/lib/components/settings/FormActions.svelte b/web/src/lib/components/settings/FormActions.svelte
index 4168e3622..59a7c5bea 100644
--- a/web/src/lib/components/settings/FormActions.svelte
+++ b/web/src/lib/components/settings/FormActions.svelte
@@ -9,9 +9,9 @@
 	let { start, children }: Props = $props();
 </script>
 
-<div class="flex w-full items-start gap-2 {start ? 'justify-between' : 'justify-end'}">
+<div class="flex w-full items-start gap-xs {start ? 'justify-between' : 'justify-end'}">
 	{#if start}
-		<div class="flex items-center gap-2">{@render start()}</div>
+		<div class="flex items-center gap-xs">{@render start()}</div>
 	{/if}
-	<div class="flex items-center gap-2">{@render children()}</div>
+	<div class="flex items-center gap-xs">{@render children()}</div>
 </div>
diff --git a/web/src/lib/components/settings/FormRow.svelte b/web/src/lib/components/settings/FormRow.svelte
index 7b5b544df..7ca333b2a 100644
--- a/web/src/lib/components/settings/FormRow.svelte
+++ b/web/src/lib/components/settings/FormRow.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <div
-	class="flex min-h-8 w-full flex-col gap-2 sm:flex-row sm:justify-between {align === 'start'
+	class="flex min-h-8 w-full flex-col gap-xs sm:flex-row sm:justify-between {align === 'start'
 		? 'sm:items-start'
 		: 'sm:items-center'}"
 >
diff --git a/web/src/lib/components/settings/KeyCard.stories.svelte b/web/src/lib/components/settings/KeyCard.stories.svelte
index d188b7053..6322040d5 100644
--- a/web/src/lib/components/settings/KeyCard.stories.svelte
+++ b/web/src/lib/components/settings/KeyCard.stories.svelte
@@ -9,7 +9,6 @@
 		argTypes: {
 			deleting: { control: "boolean" },
 			border: { control: "boolean" },
-			shadow: { control: "boolean" },
 			background: { control: "boolean" }
 		},
 		args: {
@@ -18,7 +17,6 @@
 			createdAt: "2025-06-01T10:30:00Z",
 			deleting: false,
 			border: true,
-			shadow: false,
 			background: true,
 			onDelete: () => {}
 		}
diff --git a/web/src/lib/components/settings/KeyCard.svelte b/web/src/lib/components/settings/KeyCard.svelte
index 1a2e543c1..d23d6d5f1 100644
--- a/web/src/lib/components/settings/KeyCard.svelte
+++ b/web/src/lib/components/settings/KeyCard.svelte
@@ -9,7 +9,6 @@
 		deleting?: boolean;
 		onDelete: () => void;
 		border?: CardVariants["border"];
-		shadow?: CardVariants["shadow"];
 		background?: CardVariants["background"];
 	}
 
@@ -20,11 +19,10 @@
 		deleting = false,
 		onDelete,
 		border = true,
-		shadow = false,
 		background = true
 	}: Props = $props();
 </script>
 
-<Card {border} {shadow} {background}>
+<Card {border} {background}>
 	<KeyCardContent {name} {fingerprint} {createdAt} {deleting} {onDelete} />
 </Card>
diff --git a/web/src/lib/components/settings/KeyCardContent.svelte b/web/src/lib/components/settings/KeyCardContent.svelte
index 5a0562c60..02702c64d 100644
--- a/web/src/lib/components/settings/KeyCardContent.svelte
+++ b/web/src/lib/components/settings/KeyCardContent.svelte
@@ -16,10 +16,10 @@
 	let { name, fingerprint, createdAt, deleting = false, onDelete }: Props = $props();
 </script>
 
-<div class="flex items-center justify-between gap-2">
-	<div class="flex min-w-0 flex-col gap-1">
-		<div class="flex items-center gap-2">
-			<KeyIcon class="size-4 shrink-0 text-foreground-muted" aria-hidden="true" />
+<div class="flex items-center justify-between gap-xs">
+	<div class="flex min-w-0 flex-col gap-2xs">
+		<div class="flex items-center gap-xs">
+			<KeyIcon class="size-3.5 shrink-0 text-foreground-muted" aria-hidden="true" />
 			<span class="font-bold text-foreground-default">{name}</span>
 		</div>
 		{#if fingerprint}
diff --git a/web/src/lib/components/settings/RepoGeneralForm.svelte b/web/src/lib/components/settings/RepoGeneralForm.svelte
index f951d91a1..fe1eeb9a0 100644
--- a/web/src/lib/components/settings/RepoGeneralForm.svelte
+++ b/web/src/lib/components/settings/RepoGeneralForm.svelte
@@ -138,8 +138,8 @@
 
 <ErrorAlert label={save.error} />
 
-<div class="flex w-full flex-col gap-10">
-	<div class="flex w-full flex-col gap-4">
+<div class="flex w-full flex-col gap-3xl">
+	<div class="flex w-full flex-col gap-md">
 		{#if owner}
 			<SettingsList>
 				<SettingsRow title="Description" stack>
@@ -188,7 +188,7 @@
 
 	{#if owner}
 		<SettingsSection title="Labels" framed={false} headingGap="4">
-			<div class="flex w-full flex-col gap-4">
+			<div class="flex w-full flex-col gap-md">
 				<SettingsBlock
 					title="Default labels"
 					titleSize="large"
@@ -214,8 +214,8 @@
 							{#each labels.defaults as item (item.uri)}
 								<SettingsRow>
 									{#snippet label()}
-										<span class="flex min-w-0 flex-col gap-1">
-											<span class="flex items-center gap-2">
+										<span class="flex min-w-0 flex-col gap-2xs">
+											<span class="flex items-center gap-xs">
 												<span
 													class="size-2 shrink-0 rounded-full"
 													style="background-color: {item.value.color ??
diff --git a/web/src/lib/components/settings/SettingsBlock.svelte b/web/src/lib/components/settings/SettingsBlock.svelte
index 7956d6beb..aede5f7eb 100644
--- a/web/src/lib/components/settings/SettingsBlock.svelte
+++ b/web/src/lib/components/settings/SettingsBlock.svelte
@@ -24,10 +24,10 @@
 	const lines = $derived(toLines(description));
 </script>
 
-<div class="flex w-full flex-col gap-4">
+<div class="flex w-full flex-col gap-md">
 	{#if title || lines.length > 0 || action}
 		<div
-			class="flex w-full flex-col gap-2 sm:flex-row sm:items-end sm:justify-between sm:gap-16"
+			class="flex w-full flex-col gap-xs sm:flex-row sm:items-end sm:justify-between sm:gap-5xl"
 		>
 			<div class="flex min-w-0 flex-col">
 				{#if title}
@@ -44,7 +44,7 @@
 				{/each}
 			</div>
 			{#if action}
-				<div class="flex shrink-0 items-center gap-2 self-end sm:self-auto">
+				<div class="flex shrink-0 items-center gap-xs self-end sm:self-auto">
 					{@render action()}
 				</div>
 			{/if}
diff --git a/web/src/lib/components/settings/SettingsEmpty.svelte b/web/src/lib/components/settings/SettingsEmpty.svelte
index 63ce493a6..53b65f2db 100644
--- a/web/src/lib/components/settings/SettingsEmpty.svelte
+++ b/web/src/lib/components/settings/SettingsEmpty.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <div
-	class="flex w-full items-center justify-center rounded-sm border border-border-default px-4 py-3 typography-paragraph-regular text-foreground-muted"
+	class="flex w-full items-center justify-center rounded-sm border border-border-default px-md py-sm typography-paragraph-regular text-foreground-muted"
 >
 	{message}
 </div>
diff --git a/web/src/lib/components/settings/SettingsHeader.svelte b/web/src/lib/components/settings/SettingsHeader.svelte
index 497b30578..a39bf740f 100644
--- a/web/src/lib/components/settings/SettingsHeader.svelte
+++ b/web/src/lib/components/settings/SettingsHeader.svelte
@@ -10,8 +10,8 @@
 	let { title, description, action }: Props = $props();
 </script>
 
-<div class="flex w-full flex-col justify-center gap-4">
-	<div class="flex items-start justify-between gap-4">
+<div class="flex w-full flex-col justify-center gap-md">
+	<div class="flex items-start justify-between gap-md">
 		<h1 class="typography-heading-2 text-foreground-default">{title}</h1>
 		{#if action}
 			{@render action()}
diff --git a/web/src/lib/components/settings/SettingsList.svelte b/web/src/lib/components/settings/SettingsList.svelte
index 34fe35e5a..ded6ddf2d 100644
--- a/web/src/lib/components/settings/SettingsList.svelte
+++ b/web/src/lib/components/settings/SettingsList.svelte
@@ -2,11 +2,11 @@
 	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 py-1 *:py-2",
+		base: "flex w-full flex-col divide-y divide-border-default rounded-sm border border-border-default *:py-sm *:first:pt-none *:last:pb-none",
 		variants: {
 			padding: {
-				regular: "px-4",
-				small: "px-3"
+				regular: "p-sm",
+				small: "p-xs"
 			}
 		},
 		defaultVariants: {
diff --git a/web/src/lib/components/settings/SettingsNav.svelte b/web/src/lib/components/settings/SettingsNav.svelte
index 457d2b902..1d7f13245 100644
--- a/web/src/lib/components/settings/SettingsNav.svelte
+++ b/web/src/lib/components/settings/SettingsNav.svelte
@@ -28,7 +28,7 @@
 	};
 </script>
 
-<div class="flex w-full flex-col gap-4 md:hidden">
+<div class="flex w-full flex-col gap-md md:hidden">
 	<Select {options} value={active} onSelect={jump} {label} icon={ActiveGlyph} />
 	<Separator />
 </div>
diff --git a/web/src/lib/components/settings/SettingsPanel.stories.svelte b/web/src/lib/components/settings/SettingsPanel.stories.svelte
index 4a715806c..44d6d2a5a 100644
--- a/web/src/lib/components/settings/SettingsPanel.stories.svelte
+++ b/web/src/lib/components/settings/SettingsPanel.stories.svelte
@@ -48,7 +48,7 @@
 			title="Keys"
 			description="SSH public keys added here will be broadcasted to knots that you are a member of."
 		/>
-		<div class="flex w-full flex-col gap-4">
+		<div class="flex w-full flex-col gap-md">
 			<SettingsToolbar>
 				{#snippet end()}
 					<Button icon={Plus}>Add key</Button>
@@ -95,7 +95,7 @@
 			<SettingsList>
 				<SettingsRow stack>
 					{#snippet label()}
-						<span class="flex min-w-0 items-center gap-2">
+						<span class="flex min-w-0 items-center gap-xs">
 							<span class="typography-paragraph-regular text-foreground-default"
 								>user.tld</span
 							>
@@ -107,7 +107,7 @@
 				</SettingsRow>
 				<SettingsRow stack>
 					{#snippet label()}
-						<span class="flex min-w-0 items-center gap-2">
+						<span class="flex min-w-0 items-center gap-xs">
 							<span class="typography-paragraph-regular text-foreground-default"
 								>user2.tld</span
 							>
@@ -124,7 +124,7 @@
 </Story>
 
 <Story name="Content skeleton fixture" asChild>
-	<div class="flex w-full flex-col gap-10">
+	<div class="flex w-full flex-col gap-3xl">
 		<SettingsHeader title="General" description="Configure repository behavior and defaults." />
 		<SettingsSection title="Repository">
 			<SettingsRow title="Default branch" stack>
diff --git a/web/src/lib/components/settings/SettingsPanel.svelte b/web/src/lib/components/settings/SettingsPanel.svelte
index 66985bf26..260a6682a 100644
--- a/web/src/lib/components/settings/SettingsPanel.svelte
+++ b/web/src/lib/components/settings/SettingsPanel.svelte
@@ -13,11 +13,11 @@
 </script>
 
 <div
-	class="flex w-full flex-col items-stretch gap-4 border-y border-border-default bg-background-default px-3 pt-3 pb-6 md:min-h-150 md:flex-row md:items-start md:overflow-hidden md:rounded-sm md:border md:p-0"
+	class="flex w-full flex-col items-stretch gap-md border-y border-border-default bg-background-default px-sm pt-sm pb-xl md:min-h-150 md:flex-row md:items-start md:overflow-hidden md:rounded-sm md:border md:p-none"
 >
 	<SettingsNav {items} {active} {label} />
 
-	<div class="flex min-w-0 flex-1 flex-col gap-6 md:gap-8 md:px-4 md:py-6">
+	<div class="flex min-w-0 flex-1 flex-col gap-xl md:gap-2xl md:px-md md:py-xl">
 		{@render children()}
 	</div>
 </div>
diff --git a/web/src/lib/components/settings/SettingsRow.svelte b/web/src/lib/components/settings/SettingsRow.svelte
index 26f1d15b4..0eb09c181 100644
--- a/web/src/lib/components/settings/SettingsRow.svelte
+++ b/web/src/lib/components/settings/SettingsRow.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Component, Snippet } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
+	import { tv } from "tailwind-variants";
 	import { toLines } from "$lib/components/settings/descriptionLines";
 
 	interface Props {
@@ -27,30 +28,47 @@
 		stack = false
 	}: Props = $props();
 
-	const alignClass = $derived(
-		align === "start"
-			? stack
-				? "sm:items-start"
-				: "items-start"
-			: stack
-				? "sm:items-center"
-				: "items-center"
-	);
+	const row = tv({
+		slots: {
+			base: "flex min-h-8 w-full justify-between",
+			actions: "flex items-center gap-xs"
+		},
+		variants: {
+			stack: {
+				true: {
+					base: "flex-col gap-xs sm:flex-row sm:gap-md",
+					actions: "w-full justify-end sm:w-auto sm:shrink-0"
+				},
+				false: {
+					base: "gap-md",
+					actions: "shrink-0"
+				}
+			},
+			align: {
+				start: {},
+				center: {}
+			}
+		},
+		compoundVariants: [
+			{ align: "start", stack: false, class: { base: "items-start" } },
+			{ align: "start", stack: true, class: { base: "sm:items-start" } },
+			{ align: "center", stack: false, class: { base: "items-center" } },
+			{ align: "center", stack: true, class: { base: "sm:items-center" } }
+		]
+	});
+
+	const classes = $derived(row({ stack, align }));
 
 	const Glyph = $derived(icon);
 	const lines = $derived(toLines(description));
 </script>
 
-<div
-	class="flex min-h-8 w-full justify-between {stack
-		? 'flex-col gap-2 sm:flex-row sm:gap-4'
-		: 'gap-4'} {alignClass}"
->
+<div class={classes.base()}>
 	{#if label}
 		{@render label()}
 	{:else}
-		<span class="flex min-w-0 flex-col gap-1">
-			<span class="flex items-center gap-2">
+		<span class="flex min-w-0 flex-col gap-2xs">
+			<span class="flex items-center gap-xs">
 				{#if Glyph}
 					<Glyph class="size-3.5 shrink-0 text-foreground-default" aria-hidden="true" />
 				{/if}
@@ -69,11 +87,7 @@
 		</span>
 	{/if}
 	{#if children}
-		<div
-			class="flex items-center gap-2 {stack
-				? 'w-full justify-end sm:w-auto sm:shrink-0'
-				: 'shrink-0'}"
-		>
+		<div class={classes.actions()}>
 			{@render children()}
 		</div>
 	{/if}
diff --git a/web/src/lib/components/settings/SettingsSaveBar.svelte b/web/src/lib/components/settings/SettingsSaveBar.svelte
index 7c0d84021..080ff1183 100644
--- a/web/src/lib/components/settings/SettingsSaveBar.svelte
+++ b/web/src/lib/components/settings/SettingsSaveBar.svelte
@@ -13,7 +13,7 @@
 	let { dirty, saving = false, onreset, onsave }: Props = $props();
 </script>
 
-<div class="flex shrink-0 items-center gap-4">
+<div class="flex shrink-0 items-center gap-md">
 	{#if dirty}
 		<Button icon={RotateCcw} onclick={onreset}>Reset</Button>
 		<span class="typography-paragraph-regular text-foreground-muted">Unsaved changes</span>
diff --git a/web/src/lib/components/settings/SettingsSection.svelte b/web/src/lib/components/settings/SettingsSection.svelte
index 46336139b..421a1bfda 100644
--- a/web/src/lib/components/settings/SettingsSection.svelte
+++ b/web/src/lib/components/settings/SettingsSection.svelte
@@ -11,7 +11,7 @@
 
 	let { title, headingGap = "3", framed = true, children }: Props = $props();
 
-	const gapClass = $derived(headingGap === "4" ? "gap-4" : "gap-3");
+	const gapClass = $derived(headingGap === "4" ? "gap-md" : "gap-sm");
 </script>
 
 <section class="flex w-full flex-col {gapClass}">
diff --git a/web/src/lib/components/settings/SettingsToolbar.svelte b/web/src/lib/components/settings/SettingsToolbar.svelte
index 6e35d8828..90f8e0f98 100644
--- a/web/src/lib/components/settings/SettingsToolbar.svelte
+++ b/web/src/lib/components/settings/SettingsToolbar.svelte
@@ -11,12 +11,12 @@
 	let { start, end, separator = true }: Props = $props();
 </script>
 
-<div class="flex min-h-8 w-full items-center gap-4 {start ? 'justify-between' : 'justify-end'}">
+<div class="flex min-h-8 w-full items-center gap-md {start ? 'justify-between' : 'justify-end'}">
 	{#if start}
 		{@render start()}
 	{/if}
 	{#if end}
-		<div class="flex items-center gap-2">{@render end()}</div>
+		<div class="flex items-center gap-xs">{@render end()}</div>
 	{/if}
 </div>
 {#if separator}
diff --git a/web/src/lib/components/settings/ThemePicker.svelte b/web/src/lib/components/settings/ThemePicker.svelte
index 05f7947ec..ff3a6883b 100644
--- a/web/src/lib/components/settings/ThemePicker.svelte
+++ b/web/src/lib/components/settings/ThemePicker.svelte
@@ -12,8 +12,8 @@
 	const name = $props.id();
 </script>
 
-<div class="flex w-full flex-wrap gap-4 sm:w-auto">
-	<label class="flex w-33.75 cursor-pointer flex-col gap-2">
+<div class="flex w-full flex-wrap gap-md sm:w-auto">
+	<label class="flex w-33.75 cursor-pointer flex-col gap-xs">
 		<span
 			class="flex aspect-135/84 w-full items-center justify-center rounded-sm border border-border-default bg-background-default"
 			aria-hidden="true"
@@ -23,12 +23,12 @@
 		<Radio value="auto" bind:group={value} {name}>Auto</Radio>
 	</label>
 
-	<label class="flex w-33.75 cursor-pointer flex-col gap-2">
+	<label class="flex w-33.75 cursor-pointer flex-col gap-xs">
 		<ThemePreview palette="light" />
 		<Radio value="light" bind:group={value} {name}>Light</Radio>
 	</label>
 
-	<label class="flex w-33.75 cursor-pointer flex-col gap-2">
+	<label class="flex w-33.75 cursor-pointer flex-col gap-xs">
 		<ThemePreview palette="dark" />
 		<Radio value="dark" bind:group={value} {name}>Dark</Radio>
 	</label>
diff --git a/web/src/lib/components/settings/tabs/EmailsTab.svelte b/web/src/lib/components/settings/tabs/EmailsTab.svelte
index b53e76fe6..829580874 100644
--- a/web/src/lib/components/settings/tabs/EmailsTab.svelte
+++ b/web/src/lib/components/settings/tabs/EmailsTab.svelte
@@ -85,7 +85,7 @@
 	description="Commits authored using emails listed here will be associated with your Tangled profile."
 />
 
-<div class="flex w-full flex-col gap-4">
+<div class="flex w-full flex-col gap-md">
 	<SettingsToolbar>
 		{#snippet end()}
 			<Button href="/settings/emails/new" icon={Plus}>Add email</Button>
@@ -97,12 +97,12 @@
 	{#if load.loading}
 		<SettingsList>
 			{#each [0, 1, 2] as _, i (i)}
-				<div class="flex w-full items-center justify-between gap-4">
+				<div class="flex w-full items-center justify-between gap-md">
 					<div class="flex min-w-0 flex-col gap-1.5">
 						<Bones capture={bonesLoadingprimitivesShortText} class="w-48" />
 						<Bones capture={bonesLoadingprimitivesShortText} class="w-24" />
 					</div>
-					<div class="flex shrink-0 items-center gap-2">
+					<div class="flex shrink-0 items-center gap-xs">
 						<Bones capture={bonesLoadingprimitivesShortText} class="w-20" />
 						<Bones capture={bonesLoadingprimitivesShortText} class="w-8" />
 					</div>
diff --git a/web/src/lib/components/settings/tabs/KeysTab.svelte b/web/src/lib/components/settings/tabs/KeysTab.svelte
index 8a50d4153..e72ea305e 100644
--- a/web/src/lib/components/settings/tabs/KeysTab.svelte
+++ b/web/src/lib/components/settings/tabs/KeysTab.svelte
@@ -82,7 +82,7 @@
 	description="SSH public keys added here will be broadcasted to knots that you are a member of, allowing you to push to repositories there and verify commit signatures."
 />
 
-<div class="flex w-full flex-col gap-4">
+<div class="flex w-full flex-col gap-md">
 	<SettingsToolbar>
 		{#snippet end()}
 			<Button href="/settings/keys/new" icon={Plus}>Add key</Button>
diff --git a/web/src/lib/components/settings/tabs/KnotsTab.svelte b/web/src/lib/components/settings/tabs/KnotsTab.svelte
index acf0123f2..fc1890386 100644
--- a/web/src/lib/components/settings/tabs/KnotsTab.svelte
+++ b/web/src/lib/components/settings/tabs/KnotsTab.svelte
@@ -41,7 +41,7 @@
 	description="Knots are lightweight headless servers that enable users to host Git repositories with ease. When creating a repository, you can choose a knot to store it on."
 />
 
-<div class="flex w-full flex-col gap-4">
+<div class="flex w-full flex-col gap-md">
 	<SettingsToolbar>
 		{#snippet start()}
 			<DocsButton href="https://docs.tangled.org/knots" />
diff --git a/web/src/lib/components/settings/tabs/NotificationsTab.svelte b/web/src/lib/components/settings/tabs/NotificationsTab.svelte
index bffe027b1..83f533670 100644
--- a/web/src/lib/components/settings/tabs/NotificationsTab.svelte
+++ b/web/src/lib/components/settings/tabs/NotificationsTab.svelte
@@ -165,10 +165,10 @@
 <SettingsList>
 	{#each prefs as pref (pref.key)}
 		{@const Glyph = pref.icon}
-		<div class="flex w-full items-center justify-between gap-4">
-			<div class="flex min-w-0 flex-col gap-1">
-				<span class="flex items-center gap-2">
-					<Glyph class="size-3.5 shrink-0 text-foreground-default" aria-hidden="true" />
+		<div class="flex w-full items-center justify-between gap-md">
+			<div class="flex min-w-0 flex-col gap-2xs">
+				<span class="flex items-center gap-xs">
+					<Glyph class="size-3.5 ml-3xs shrink-0 text-foreground-default" aria-hidden="true" />
 					<span class="typography-paragraph-regular text-foreground-default"
 						>{pref.label}</span
 					>
diff --git a/web/src/lib/components/settings/tabs/ProfileTab.svelte b/web/src/lib/components/settings/tabs/ProfileTab.svelte
index c74fd9f76..6b571c5e6 100644
--- a/web/src/lib/components/settings/tabs/ProfileTab.svelte
+++ b/web/src/lib/components/settings/tabs/ProfileTab.svelte
@@ -52,14 +52,14 @@
 	const STATS = ["Repositories", "Followers", "Stars", "Pull requests", "Issues"];
 </script>
 
-<div class="flex min-h-9 w-full items-center justify-between gap-4">
+<div class="flex min-h-9 w-full items-center justify-between gap-md">
 	<h1 class="typography-heading-2 text-foreground-default">Profile</h1>
 	<SettingsSaveBar {dirty} onreset={reset} />
 </div>
 
-<div class="flex w-full flex-col gap-10">
+<div class="flex w-full flex-col gap-3xl">
 	<SettingsSection>
-		<div class="flex w-full flex-col items-center gap-2 pb-4">
+		<div class="flex w-full flex-col items-center gap-xs pb-md">
 			<Avatar did={user?.did} handle={user?.handle} size="full" class="size-39.5" />
 			<Button icon={Pencil} href="/settings/profile/avatar">Edit</Button>
 		</div>
@@ -76,14 +76,14 @@
 			<Toggle bind:checked={form.bluesky} aria-label="Link to Bluesky account" />
 		</SettingsRow>
 		<SettingsRow title="Social links" align="start" stack>
-			<div class="flex w-full flex-col gap-2 sm:w-80">
+			<div class="flex w-full flex-col gap-xs sm:w-80">
 				{#each form.links.keys() as i (i)}
 					<Input bind:value={form.links[i]} placeholder="Social link" />
 				{/each}
 			</div>
 		</SettingsRow>
 		<SettingsRow title="Vanity stats" align="start" stack>
-			<div class="flex w-full flex-col gap-2 sm:w-80">
+			<div class="flex w-full flex-col gap-xs sm:w-80">
 				{#each form.stats.keys() as i (i)}
 					<Select
 						bind:value={form.stats[i]}
diff --git a/web/src/lib/components/settings/tabs/SitesTab.svelte b/web/src/lib/components/settings/tabs/SitesTab.svelte
index e3293eeb9..905bd682e 100644
--- a/web/src/lib/components/settings/tabs/SitesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SitesTab.svelte
@@ -93,7 +93,7 @@
 	description="Claim a subdomain to serve static sites built from your repositories."
 />
 
-<div class="flex w-full flex-col gap-4">
+<div class="flex w-full flex-col gap-md">
 	<SettingsToolbar>
 		{#snippet start()}
 			<DocsButton href="https://docs.tangled.org/sites" />
@@ -128,12 +128,12 @@
 			onconfirm={releaseDomainClaim}
 		/>
 	{:else if loaded.data !== undefined}
-		<form class="flex w-full flex-col gap-4" onsubmit={claim.run}>
+		<form class="flex w-full flex-col gap-md" onsubmit={claim.run}>
 			<FormRow
 				label="Subdomain"
 				description="Lowercase letters, digits, and hyphens; 4–63 characters."
 			>
-				<div class="flex items-center gap-2">
+				<div class="flex items-center gap-xs">
 					<Input
 						bind:value={subdomain}
 						placeholder="floo"
diff --git a/web/src/lib/components/settings/tabs/SpindlesTab.svelte b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
index 4ad1e3fd1..25a06a033 100644
--- a/web/src/lib/components/settings/tabs/SpindlesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
@@ -38,7 +38,7 @@
 
 <SettingsHeader title="Spindles" description="Spindles are small CI runners." />
 
-<div class="flex w-full flex-col gap-4">
+<div class="flex w-full flex-col gap-md">
 	<SettingsToolbar>
 		{#snippet start()}
 			<DocsButton href="https://docs.tangled.org/spindles" />
-- 
2.51.2