From 72e601d752cc763957cb15d055524699666d5ccb Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Sat, 19 Sep 2026 03:05:31 +0200
Subject: [PATCH] web: rescale search, shell, auth, strings and welcome views

Signed-off-by: eti <eti@eti.tf>
---
 .../components/auth/AccountSelector.svelte    |  4 +-
 .../search/CodeResultCard.stories.svelte      |  2 +-
 .../components/search/CodeResultCard.svelte   | 16 ++---
 .../components/search/CodeSearchView.svelte   | 24 ++++----
 .../lib/components/search/FileMatch.svelte    | 21 ++++---
 .../lib/components/search/SearchBar.svelte    |  2 +-
 .../components/search/SearchSidebar.svelte    | 21 ++++---
 .../search/tabs/RepoSearchTab.svelte          |  8 +--
 web/src/lib/components/shell/Footer.svelte    | 60 ++++++++++---------
 web/src/lib/components/shell/Topbar.svelte    | 32 ++++++----
 .../lib/components/strings/StringForm.svelte  | 12 ++--
 .../components/strings/StringHeader.svelte    | 10 ++--
 .../strings/StringView.stories.svelte         |  2 +-
 .../lib/components/strings/StringView.svelte  |  4 +-
 .../lib/components/welcome/FinishStep.svelte  | 23 +++----
 .../lib/components/welcome/KeysStep.svelte    |  6 +-
 .../lib/components/welcome/ProfileStep.svelte | 12 ++--
 .../lib/components/welcome/SocialStep.svelte  | 10 ++--
 .../lib/components/welcome/StepHeader.svelte  |  2 +-
 web/src/lib/components/welcome/Steps.svelte   |  6 +-
 .../lib/components/welcome/WelcomeCard.svelte |  8 +--
 21 files changed, 156 insertions(+), 129 deletions(-)

diff --git a/web/src/lib/components/auth/AccountSelector.svelte b/web/src/lib/components/auth/AccountSelector.svelte
index 3bea457f1..f04bb4bd5 100644
--- a/web/src/lib/components/auth/AccountSelector.svelte
+++ b/web/src/lib/components/auth/AccountSelector.svelte
@@ -3,8 +3,8 @@
 
 	export const accountSelector = tv({
 		slots: {
-			chevron: "size-3 shrink-0",
-			header: "px-2 py-1.5 font-medium"
+			chevron: "size-3.5 shrink-0",
+			header: "px-xs py-1.5 font-medium"
 		}
 	});
 </script>
diff --git a/web/src/lib/components/search/CodeResultCard.stories.svelte b/web/src/lib/components/search/CodeResultCard.stories.svelte
index 5acec9bf0..e9771800f 100644
--- a/web/src/lib/components/search/CodeResultCard.stories.svelte
+++ b/web/src/lib/components/search/CodeResultCard.stories.svelte
@@ -52,7 +52,7 @@
 
 <Story name="Search Results Feed">
 	{#snippet template()}
-		<div class="flex flex-col gap-4">
+		<div class="flex flex-col gap-md">
 			{#each searchResults.slice(17, 26) as result (`${result.repo.did}/${result.commit}/${result.path}`)}
 				<CodeResultCard {result} />
 			{/each}
diff --git a/web/src/lib/components/search/CodeResultCard.svelte b/web/src/lib/components/search/CodeResultCard.svelte
index c1f555776..d325d783f 100644
--- a/web/src/lib/components/search/CodeResultCard.svelte
+++ b/web/src/lib/components/search/CodeResultCard.svelte
@@ -17,26 +17,28 @@
 	const branches = $derived([...new Set(result.branches ?? [])]);
 </script>
 
-<Card padding="none" class="flex flex-col gap-2 p-3 text-foreground-default">
-	<div class="flex items-center gap-1 px-1">
+<Card padding="none" class="flex flex-col gap-xs p-sm text-foreground-default">
+	<div class="flex items-center gap-2xs px-2xs">
 		<div class="flex min-w-0 items-center gap-1.5 font-medium">
-			<BookMarked class="size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
+			<BookMarked class="size-3.5 shrink-0 text-foreground-subtle" aria-hidden="true" />
 			<!-- prettier-ignore -->
 			<a href={repoHref} class="min-w-0 truncate text-foreground-default no-underline hover:underline"
 			>{result.repo.owner.handle}/{result.repo.slug}</a
 		>
 		</div>
-		<div class="flex gap-1">
+		<div class="flex gap-2xs">
 			{#each branches as branch (branch)}
 				<span
-					class="shrink-0 rounded-sm bg-background-canvas px-2 py-1 text-xs text-foreground-muted"
+					class="shrink-0 rounded-sm bg-background-canvas px-xs py-2xs typography-paragraph-small text-foreground-muted"
 					>{branch}</span
 				>
 			{/each}
 		</div>
 		{#if result.repo.starCount !== undefined}
-			<div class="order-last ml-auto flex shrink-0 items-center gap-1 text-foreground-muted">
-				<Star class="size-4" aria-hidden="true" />
+			<div
+				class="order-last ml-auto flex shrink-0 items-center gap-2xs text-foreground-muted"
+			>
+				<Star class="size-3.5" aria-hidden="true" />
 				<span>{formatCount(result.repo.starCount)}</span>
 			</div>
 		{/if}
diff --git a/web/src/lib/components/search/CodeSearchView.svelte b/web/src/lib/components/search/CodeSearchView.svelte
index 6aab502b8..a8b7dcc8c 100644
--- a/web/src/lib/components/search/CodeSearchView.svelte
+++ b/web/src/lib/components/search/CodeSearchView.svelte
@@ -7,7 +7,7 @@
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import ErrorBox from "$lib/components/ui/Error.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 	import SearchBar from "$lib/components/search/SearchBar.svelte";
 	import SearchSidebar from "$lib/components/search/SearchSidebar.svelte";
 	import CodeResultCard from "$lib/components/search/CodeResultCard.svelte";
@@ -16,7 +16,7 @@
 	import { matchCount } from "$lib/components/search/chunks";
 	import { createCodeSearch } from "$lib/components/search/codeSearch.svelte";
 
-	const HINT = "rounded-sm bg-background-subtle px-1 py-0.5 typography-monospace-small";
+	const HINT = "rounded-sm bg-background-subtle px-2xs py-3xs typography-monospace-small";
 
 	export interface RepoScope {
 		ownerHandle: string;
@@ -89,13 +89,13 @@
 			<EmptyState message="Enter a query to search code." />
 		{/if}
 	{:else if search.loading}
-		<div class="flex justify-center p-12 text-foreground-subtle">
+		<div class="flex justify-center p-4xl text-foreground-subtle">
 			<Spinner class="size-6" />
 		</div>
 	{:else if search.error}
 		<ErrorBox label={search.error} />
 	{:else}
-		<div class="grid grid-cols-1 gap-4">
+		<div class="grid grid-cols-1 gap-md">
 			{#each search.results as result (`${result.repo.did}/${result.commit}/${result.path}`)}
 				{#if repo}
 					<FileMatch {result} />
@@ -126,7 +126,9 @@
 
 {#snippet matchSummary()}
 	{#if matches > 0}
-		<div class="border-t border-border-default py-2 text-xs text-foreground-muted">
+		<div
+			class="border-t border-border-default py-xs typography-paragraph-small text-foreground-muted"
+		>
 			Found {matches}
 			{matches === 1 ? "match" : "matches"} in {search.results.length}
 			{search.results.length === 1 ? "file" : "files"}
@@ -135,15 +137,15 @@
 {/snippet}
 
 {#if repo}
-	<TabPanel class="flex flex-col gap-4">
+	<Card class="flex flex-col gap-md">
 		<SearchBar type="code" bind:query={draft} placeholder="Find files or code..." mono />
 		{@render resultsList()}
-	</TabPanel>
+	</Card>
 {:else}
-	<div class="mx-auto flex w-full max-w-5xl flex-col gap-4 px-4 py-8">
-		<h1 class="mb-4 px-2 text-2xl font-semibold">Code Search</h1>
-		<div class="grid grid-cols-1 gap-4 px-2 md:grid-cols-4">
-			<div class="col-span-1 space-y-4 md:col-span-3">
+	<div class="mx-auto flex w-full max-w-page flex-col gap-md px-md py-2xl">
+		<h1 class="mb-md px-xs typography-heading-3 font-semibold">Code Search</h1>
+		<div class="grid grid-cols-1 gap-md px-xs md:grid-cols-4">
+			<div class="col-span-1 space-y-md md:col-span-3">
 				<SearchBar type="code" bind:query={draft} placeholder="Search code..." mono />
 				{@render resultsList()}
 			</div>
diff --git a/web/src/lib/components/search/FileMatch.svelte b/web/src/lib/components/search/FileMatch.svelte
index 57d660cbc..29ce425be 100644
--- a/web/src/lib/components/search/FileMatch.svelte
+++ b/web/src/lib/components/search/FileMatch.svelte
@@ -89,7 +89,9 @@
 
 		{#snippet actions()}
 			{#if result.language}
-				<span class="flex items-center gap-1.5 text-xs text-foreground-subtle">
+				<span
+					class="flex items-center gap-1.5 typography-paragraph-small text-foreground-subtle"
+				>
 					<ColorBall color={languageColor(result.language)} />
 					{result.language}
 				</span>
@@ -110,7 +112,7 @@
 		<div
 			class="overflow-x-auto rounded-b-sm border-x border-b border-border-default bg-background-default"
 		>
-			<table class="w-full border-collapse font-mono text-sm/relaxed">
+			<table class="w-full border-collapse typography-monospace-regular">
 				<tbody>
 					{#each visible as chunk, i (`${chunk.lineStart}-${i}`)}
 						{#if i > 0}
@@ -128,10 +130,10 @@
 
 					{#if hidden.length > 0}
 						<tr class="border-t border-border-default bg-background-default">
-							<td colspan={2} class="p-0">
+							<td colspan={2} class="p-none">
 								<button
 									type="button"
-									class="flex w-full cursor-pointer items-center justify-center gap-1.5 px-3 py-1.5 text-xs text-foreground-subtle transition-colors hover:bg-background-subtle hover:text-foreground-default"
+									class="flex w-full cursor-pointer items-center justify-center gap-1.5 px-sm py-1.5 typography-paragraph-small text-foreground-subtle transition-colors hover:bg-background-subtle hover:text-foreground-default"
 									onclick={() => (showAll = !showAll)}
 								>
 									{#if showAll}
@@ -157,7 +159,10 @@
 
 {#snippet gapRow()}
 	<tr class="border-y border-border-default bg-background-inset select-none">
-		<td colspan={2} class="py-0.5 text-center font-mono text-xs text-foreground-placeholder">
+		<td
+			colspan={2}
+			class="py-3xs text-center typography-monospace-small text-foreground-placeholder"
+		>
 			···
 		</td>
 	</tr>
@@ -168,7 +173,7 @@
 	{#each lines as line (line.num)}
 		<tr class="hover:bg-background-subtle">
 			<td
-				class="w-px border-r border-border-default bg-background-default px-3 py-0.5 text-right font-mono text-sm whitespace-nowrap text-foreground-placeholder tabular-nums select-none"
+				class="w-px border-r border-border-default bg-background-default px-sm py-3xs text-right typography-monospace-regular whitespace-nowrap text-foreground-placeholder tabular-nums select-none"
 			>
 				<a
 					href={lineHref(line.num)}
@@ -177,7 +182,9 @@
 					{line.num}
 				</a>
 			</td>
-			<td class="px-3 py-0.5 font-mono text-sm whitespace-pre text-foreground-default">
+			<td
+				class="px-sm py-3xs typography-monospace-regular whitespace-pre text-foreground-default"
+			>
 				{#each line.spans as span, i (i)}
 					{#if span.match}
 						<mark
diff --git a/web/src/lib/components/search/SearchBar.svelte b/web/src/lib/components/search/SearchBar.svelte
index cc1fdebc4..9c7891bdb 100644
--- a/web/src/lib/components/search/SearchBar.svelte
+++ b/web/src/lib/components/search/SearchBar.svelte
@@ -14,7 +14,7 @@
 	let { type, query = $bindable(), placeholder, mono = false }: Props = $props();
 </script>
 
-<form method="GET" class="flex items-center gap-2">
+<form method="GET" class="flex items-center gap-xs">
 	{#if type}
 		<input type="hidden" name="type" value={type} />
 	{/if}
diff --git a/web/src/lib/components/search/SearchSidebar.svelte b/web/src/lib/components/search/SearchSidebar.svelte
index 3aa553b17..88d2c6f64 100644
--- a/web/src/lib/components/search/SearchSidebar.svelte
+++ b/web/src/lib/components/search/SearchSidebar.svelte
@@ -35,29 +35,36 @@
 </script>
 
 <div class="col-span-1 hidden md:sticky md:top-2 md:block md:self-start">
-	<div class="flex flex-col gap-6 px-2 md:px-0">
+	<div class="flex flex-col gap-xl px-xs md:px-none">
 		<div>
-			<h3 class="mb-3 text-sm font-semibold text-foreground-muted">Filter by</h3>
+			<h3 class="mb-sm typography-paragraph-small font-semibold text-foreground-muted">
+				Filter by
+			</h3>
 			<SearchTabs {query} {active} />
 		</div>
 
 		<div>
-			<h3 class="mb-3 text-sm font-semibold text-foreground-muted">Languages</h3>
-			<div class="flex flex-wrap gap-2">
+			<h3 class="mb-sm typography-paragraph-small font-semibold text-foreground-muted">
+				Languages
+			</h3>
+			<div class="flex flex-wrap gap-xs">
 				{#each LANGUAGES as lang (lang)}
 					<button
 						type="button"
 						onclick={() => addLang(lang)}
-						class="flex w-fit shrink-0 items-center gap-2 rounded-sm border border-border-default bg-background-default px-2 py-1 text-sm text-foreground-default transition-colors hover:bg-background-subtle"
+						class="flex w-fit shrink-0 items-center gap-xs rounded-sm border border-border-default bg-background-default px-xs py-2xs typography-paragraph-regular text-foreground-default transition-colors hover:bg-background-subtle"
 					>
 						<ColorBall color={langColor(lang)} class="size-2.5" />
 						<span>{lang}</span>
 					</button>
 				{/each}
 			</div>
-			<p class="mt-3 text-xs text-foreground-subtle">
+			<p class="mt-sm typography-paragraph-small text-foreground-subtle">
 				Click a language to add it to your query, then search. You can also type
-				<code class="rounded-sm bg-background-inset px-1 py-0.5 text-xs">lang:name</code>
+				<code
+					class="rounded-sm bg-background-inset px-2xs py-3xs typography-monospace-small"
+					>lang:name</code
+				>
 				into the search bar yourself.
 			</p>
 		</div>
diff --git a/web/src/lib/components/search/tabs/RepoSearchTab.svelte b/web/src/lib/components/search/tabs/RepoSearchTab.svelte
index 1020a1c10..20d39e8c5 100644
--- a/web/src/lib/components/search/tabs/RepoSearchTab.svelte
+++ b/web/src/lib/components/search/tabs/RepoSearchTab.svelte
@@ -13,10 +13,10 @@
 	<title>Search &middot; Tangled</title>
 </svelte:head>
 
-<div class="mx-auto flex w-full max-w-5xl flex-col gap-4 px-4 py-8">
-	<h1 class="mb-4 px-2 text-2xl font-semibold">Search</h1>
-	<div class="grid grid-cols-1 gap-4 px-2 md:grid-cols-4">
-		<div class="col-span-1 space-y-4 md:col-span-3">
+<div class="mx-auto flex w-full max-w-page flex-col gap-md px-md py-2xl">
+	<h1 class="mb-md px-xs typography-heading-3 font-semibold">Search</h1>
+	<div class="grid grid-cols-1 gap-md px-xs md:grid-cols-4">
+		<div class="col-span-1 space-y-md md:col-span-3">
 			<SearchBar type="repo" bind:query={draft} placeholder="Search repositories..." />
 
 			<EmptyState message="Repository search is coming soon.">
diff --git a/web/src/lib/components/shell/Footer.svelte b/web/src/lib/components/shell/Footer.svelte
index ba36cefb4..5f0546278 100644
--- a/web/src/lib/components/shell/Footer.svelte
+++ b/web/src/lib/components/shell/Footer.svelte
@@ -46,11 +46,11 @@
 
 	const appPath = (path: string) => resolve(path as "/");
 	const headerStyle =
-		"text-foreground-default font-bold typography-paragraph-small tracking-wide mb-1";
+		"text-foreground-default font-bold typography-paragraph-small tracking-wide mb-2xs";
 	const mobileHeaderStyle =
-		"text-foreground-default font-bold typography-paragraph-small tracking-wide mb-1";
+		"text-foreground-default font-bold typography-paragraph-small tracking-wide mb-2xs";
 	const linkStyle =
-		"inline-flex items-center gap-1 text-foreground-subtle hover:text-foreground-default hover:underline";
+		"inline-flex items-center gap-2xs text-foreground-subtle hover:text-foreground-default hover:underline";
 	const minimalLinkStyle = "text-foreground-muted hover:text-foreground-default hover:underline";
 	const externalLinkAttributes = { target: "_blank" } as const;
 
@@ -169,7 +169,7 @@
 {#snippet footerIcon(icon: FooterIcon)}
 	{#if icon === "terms"}
 		<svg
-			class="size-4 shrink-0"
+			class="size-3.5 shrink-0"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -185,7 +185,7 @@
 		</svg>
 	{:else if icon === "privacy"}
 		<svg
-			class="size-4 shrink-0"
+			class="size-3.5 shrink-0"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -199,7 +199,7 @@
 		</svg>
 	{:else if icon === "blog"}
 		<svg
-			class="size-4 shrink-0"
+			class="size-3.5 shrink-0"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -212,7 +212,7 @@
 		</svg>
 	{:else if icon === "docs"}
 		<svg
-			class="size-4 shrink-0"
+			class="size-3.5 shrink-0"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -226,7 +226,7 @@
 		</svg>
 	{:else if icon === "source"}
 		<svg
-			class="size-4 shrink-0"
+			class="size-3.5 shrink-0"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -239,7 +239,7 @@
 		</svg>
 	{:else if icon === "brand"}
 		<svg
-			class="size-4 shrink-0"
+			class="size-3.5 shrink-0"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -261,7 +261,7 @@
 		</svg>
 	{:else if icon === "discord"}
 		<svg
-			class="size-4 shrink-0"
+			class="size-3.5 shrink-0"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -273,7 +273,7 @@
 		</svg>
 	{:else if icon === "irc"}
 		<svg
-			class="size-4 shrink-0"
+			class="size-3.5 shrink-0"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -287,16 +287,16 @@
 			<line x1="16" y1="3" x2="14" y2="21" />
 		</svg>
 	{:else if icon === "bluesky"}
-		<Bluesky class="size-4 shrink-0" />
+		<Bluesky class="size-3.5 shrink-0" />
 	{:else if icon === "twitter"}
-		<svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="currentColor">
+		<svg class="size-3.5 shrink-0" viewBox="0 0 24 24" fill="currentColor">
 			<path
 				d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
 			/>
 		</svg>
 	{:else if icon === "email"}
 		<svg
-			class="size-4 shrink-0"
+			class="size-3.5 shrink-0"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -309,7 +309,7 @@
 		</svg>
 	{:else if icon === "security"}
 		<svg
-			class="size-4 shrink-0"
+			class="size-3.5 shrink-0"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke="currentColor"
@@ -327,13 +327,13 @@
 
 {#if variant === "minimal"}
 	<footer
-		class="mt-8 w-full border-t border-border-default bg-background-default px-6 py-4 pb-[calc(env(safe-area-inset-bottom)+1rem)]"
+		class="mt-2xl w-full border-t border-border-default bg-background-default px-xl py-md pb-[calc(env(safe-area-inset-bottom)+1rem)]"
 	>
 		<div
-			class="mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-x-4 gap-y-2 typography-paragraph-small text-foreground-muted"
+			class="mx-auto flex max-w-page flex-wrap items-center justify-center gap-x-md gap-y-xs typography-paragraph-small text-foreground-muted"
 		>
 			<div
-				class="order-last flex w-full items-center justify-center gap-x-2 sm:order-first sm:w-auto"
+				class="order-last flex w-full items-center justify-center gap-x-xs sm:order-first sm:w-auto"
 			>
 				<a href={resolve("/")} class="flex items-center no-underline hover:no-underline">
 					<img src="/logos/dolly.svg" alt="tangled" class="size-5 opacity-70" />
@@ -358,24 +358,24 @@
 	</footer>
 {:else}
 	<footer class="z-10 pb-[env(safe-area-inset-bottom)] select-none">
-		<div class="w-full p-6">
+		<div class="w-full p-xl">
 			<div class="mx-auto">
-				<div class="flex flex-col gap-8 text-foreground-subtle">
+				<div class="flex flex-col gap-2xl text-foreground-subtle">
 					<div
-						class="hidden lg:grid lg:grid-cols-[1fr_minmax(0,1024px)_1fr] lg:items-start lg:gap-8"
+						class="hidden lg:grid lg:grid-cols-[1fr_minmax(0,1024px)_1fr] lg:items-start lg:gap-2xl"
 					>
 						<div>
 							<a
 								href={resolve("/")}
-								class="flex gap-2 no-underline hover:no-underline"
+								class="flex gap-xs no-underline hover:no-underline"
 							>
 								<Logo wordmark alpha class="h-6.5" />
 							</a>
 						</div>
 
-						<div class="grid grid-cols-4 gap-2">
+						<div class="grid grid-cols-4 gap-xs">
 							{#each footerSections as section (section.title)}
-								<div class="flex flex-col gap-1">
+								<div class="flex flex-col gap-2xs">
 									<div class={headerStyle}>{section.title}</div>
 									{#each section.links as link (link.href)}
 										{#if link.internal}
@@ -406,19 +406,21 @@
 						</div>
 					</div>
 
-					<div class="flex flex-col gap-8 lg:hidden">
-						<div class="mb-4 md:mb-0">
+					<div class="flex flex-col gap-2xl lg:hidden">
+						<div class="mb-md md:mb-none">
 							<a
 								href={resolve("/")}
-								class="flex gap-2 no-underline hover:no-underline"
+								class="flex gap-xs no-underline hover:no-underline"
 							>
 								<Logo wordmark alpha class="h-6.5" />
 							</a>
 						</div>
 
-						<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-4 md:gap-2">
+						<div
+							class="grid grid-cols-1 gap-xl sm:grid-cols-2 md:grid-cols-4 md:gap-xs"
+						>
 							{#each footerSections as section (section.title)}
-								<div class="flex flex-col gap-1">
+								<div class="flex flex-col gap-2xs">
 									<div class={mobileHeaderStyle}>{section.title}</div>
 									{#each section.links as link (link.href)}
 										{#if link.internal}
diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index bf730d330..b8ef7c9bf 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -3,20 +3,21 @@
 
 	export const topbar = tv({
 		slots: {
-			nav: "h-11.5 w-full px-5",
-			row: "flex h-full items-center justify-between gap-4",
-			brand: "flex shrink-0 items-center gap-2",
-			logo: "flex shrink-0 items-center gap-2 no-underline hover:no-underline",
+			nav: "h-10 w-full px-lg",
+			row: "flex h-full items-center justify-between gap-md",
+			brand: "flex shrink-0 items-center gap-xs",
+			logo: "flex shrink-0 items-center gap-xs no-underline hover:no-underline",
 			wordmark: "hidden sm:inline-flex",
 			mark: "inline-flex sm:hidden",
 			actions: "flex items-center",
 			action: "flex items-center",
-			divider: "mx-2 hidden h-6 w-px self-center rounded-md bg-background-inset md:block",
+			divider: "hidden h-6 w-px self-center rounded-md bg-background-inset md:block",
 			link: "flex items-center text-foreground-default transition-colors hover:text-foreground-muted",
-			identity: "flex items-center gap-1",
+			identity: "flex items-center gap-2xs",
 			ball: "flex size-8 items-center justify-center rounded-full border border-border-default bg-background-inset text-foreground-placeholder md:size-5",
 			bar: "hidden h-4 w-24 rounded-sm bg-background-inset md:block",
-			switchHeader: "border-b-0 px-2 py-1.5 typography-paragraph-small text-foreground-muted",
+			switchHeader:
+				"border-b-0 px-xs py-1.5 typography-paragraph-small text-foreground-muted",
 			addBall:
 				"flex size-5.25 shrink-0 items-center justify-center rounded-full bg-background-muted text-foreground-default"
 		},
@@ -25,7 +26,7 @@
 				marketing: { actions: "gap-3.5" },
 				app: {
 					nav: "border-b border-border-default bg-background-default",
-					actions: "gap-2"
+					actions: "gap-xs"
 				}
 			}
 		}
@@ -88,7 +89,7 @@
 		<div class={style.brand()}>
 			<a href={resolve("/")} class={style.logo()}>
 				<span class={style.wordmark()}>
-					<Logo wordmark alpha class="h-6.5" />
+					<Logo wordmark alpha class="h-6" />
 				</span>
 				<span class={style.mark()}>
 					<img src="/logos/dolly.svg" alt="tangled" class="size-8" />
@@ -102,9 +103,14 @@
 
 				<span class="typography-paragraph-small text-foreground-muted">or</span>
 
-				<Button variant="primary" href={resolve("/signup")} insetShadow={true}>
-					<span>Join now</span>
-					<ArrowRight class="size-3" aria-hidden="true" />
+				<Button
+					variant="primary"
+					href={resolve("/signup")}
+					insetShadow={true}
+					icon={ArrowRight}
+					iconSide="right"
+				>
+					Join now
 				</Button>
 			{:else}
 				{#if user || loading}
@@ -215,7 +221,7 @@
 							>
 						</Dropdown>
 					{:else}
-						<div class={style.identity({ class: "gap-2" })}>
+						<div class={style.identity({ class: "gap-xs" })}>
 							<Button variant="ghost" size="small" href={appPath(loginHref)}
 								>Login</Button
 							>
diff --git a/web/src/lib/components/strings/StringForm.svelte b/web/src/lib/components/strings/StringForm.svelte
index 5f9193274..8ca78f15c 100644
--- a/web/src/lib/components/strings/StringForm.svelte
+++ b/web/src/lib/components/strings/StringForm.svelte
@@ -94,9 +94,9 @@
 </script>
 
 <Card>
-	<form onsubmit={publish.run} class="flex flex-col gap-4">
-		<div class="flex flex-col gap-3">
-			<div class="flex flex-col gap-2 md:flex-row">
+	<form onsubmit={publish.run} class="flex flex-col gap-md">
+		<div class="flex flex-col gap-sm">
+			<div class="flex flex-col gap-xs md:flex-row">
 				<Field label="Filename" required={true}>
 					<Input
 						id="filename"
@@ -126,17 +126,17 @@
 		</div>
 
 		<div class="flex items-center justify-between">
-			<div class="px-2 text-foreground-muted">
+			<div class="px-xs text-foreground-muted">
 				<span class="typography-monospace-small"
 					>{stats.lines} line{stats.lines !== 1 ? "s" : ""}</span
 				>
-				<Separator variant="dot" class="px-1" />
+				<Separator variant="dot" class="px-2xs" />
 				<span class="typography-monospace-small"
 					>{stats.bytes} byte{stats.bytes !== 1 ? "s" : ""}</span
 				>
 			</div>
 
-			<div class="flex items-center gap-2">
+			<div class="flex items-center gap-xs">
 				{#if mode === "edit"}
 					<Button
 						type="button"
diff --git a/web/src/lib/components/strings/StringHeader.svelte b/web/src/lib/components/strings/StringHeader.svelte
index 717d6519b..d39f9af15 100644
--- a/web/src/lib/components/strings/StringHeader.svelte
+++ b/web/src/lib/components/strings/StringHeader.svelte
@@ -41,10 +41,10 @@
 	const profileHref = $derived(resolve(`/${ownerHandle}` as "/"));
 </script>
 
-<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-	<div class="flex flex-col gap-2">
-		<div class="flex flex-wrap items-center gap-2 typography-paragraph-regular">
-			<a href={profileHref} class="flex items-center gap-2 no-underline hover:underline">
+<div class="flex flex-col gap-md sm:flex-row sm:items-start sm:justify-between">
+	<div class="flex flex-col gap-xs">
+		<div class="flex flex-wrap items-center gap-xs typography-paragraph-regular">
+			<a href={profileHref} class="flex items-center gap-xs no-underline hover:underline">
 				<Avatar did={ownerDid} handle={ownerHandle} size="regular" />
 				<span class="font-medium text-foreground-default">{ownerHandle}</span>
 			</a>
@@ -68,7 +68,7 @@
 		{/if}
 	</div>
 
-	<div class="flex shrink-0 items-center gap-2">
+	<div class="flex shrink-0 items-center gap-xs">
 		{#if isOwner}
 			<Button
 				variant="default"
diff --git a/web/src/lib/components/strings/StringView.stories.svelte b/web/src/lib/components/strings/StringView.stories.svelte
index 5c88285d0..8313cc6a5 100644
--- a/web/src/lib/components/strings/StringView.stories.svelte
+++ b/web/src/lib/components/strings/StringView.stories.svelte
@@ -67,7 +67,7 @@
 
 <Story name="CodeFile">
 	{#snippet template(args)}
-		<div class="mx-auto w-full max-w-5xl py-6">
+		<div class="mx-auto w-full max-w-page py-xl">
 			<StringView {...args} />
 		</div>
 	{/snippet}
diff --git a/web/src/lib/components/strings/StringView.svelte b/web/src/lib/components/strings/StringView.svelte
index 56f1cee6c..a85682459 100644
--- a/web/src/lib/components/strings/StringView.svelte
+++ b/web/src/lib/components/strings/StringView.svelte
@@ -40,8 +40,8 @@
 	const timeLabel = $derived(`Created ${compactRelativeTime(string.createdAt)}`);
 </script>
 
-<div class="flex flex-col gap-6">
-	<div class="px-4">
+<div class="flex flex-col gap-xl">
+	<div class="px-md">
 		<StringHeader
 			{ownerHandle}
 			{ownerDid}
diff --git a/web/src/lib/components/welcome/FinishStep.svelte b/web/src/lib/components/welcome/FinishStep.svelte
index ca2916c55..caccedb6b 100644
--- a/web/src/lib/components/welcome/FinishStep.svelte
+++ b/web/src/lib/components/welcome/FinishStep.svelte
@@ -3,10 +3,11 @@
 
 	export const tile = tv({
 		slots: {
-			root: "flex flex-col gap-2 rounded-sm border border-border-default p-4",
-			heading: "flex items-center gap-2 typography-paragraph-regular text-foreground-default",
+			root: "flex flex-col gap-xs rounded-sm border border-border-default p-md",
+			heading:
+				"flex items-center gap-xs typography-paragraph-regular text-foreground-default",
 			body: "flex-1 typography-paragraph-small text-foreground-muted",
-			action: "ml-auto flex w-fit items-center gap-1 typography-paragraph-small text-foreground-default no-underline hover:underline"
+			action: "ml-auto flex w-fit items-center gap-2xs typography-paragraph-small text-foreground-default no-underline hover:underline"
 		},
 		variants: {
 			span: {
@@ -16,7 +17,7 @@
 			},
 			link: {
 				true: {
-					root: "flex-1 gap-1 no-underline transition-colors hover:bg-background-subtle hover:no-underline"
+					root: "flex-1 gap-2xs no-underline transition-colors hover:bg-background-subtle hover:no-underline"
 				},
 				false: { root: "" }
 			}
@@ -115,16 +116,16 @@
 	];
 </script>
 
-<div class="flex flex-col gap-6">
+<div class="flex flex-col gap-xl">
 	<StepHeader title="You're all set!" subtitle="Here are a few things to explore next:" />
 
-	<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+	<div class="grid grid-cols-1 gap-sm sm:grid-cols-2">
 		<div class={tile({ span: "full" }).root()} in:fly={tileTransition(0)}>
 			{@render heading(BookMarked, "Create a repository")}
 			<p class={slot.body()}>Kick things off by creating your first repository.</p>
 			<a href={newRepoHref} class={slot.action()}>
 				Create
-				<ArrowRight class="size-4 shrink-0" aria-hidden="true" />
+				<ArrowRight class="size-3.5 shrink-0" aria-hidden="true" />
 			</a>
 		</div>
 
@@ -137,7 +138,7 @@
 			</p>
 			<a href={coreHref} class={slot.action()}>
 				Contribute
-				<ArrowRight class="size-4 shrink-0" aria-hidden="true" />
+				<ArrowRight class="size-3.5 shrink-0" aria-hidden="true" />
 			</a>
 		</div>
 
@@ -152,13 +153,13 @@
 					class={slot.action()}
 				>
 					Read the docs
-					<ArrowRight class="size-4 shrink-0" aria-hidden="true" />
+					<ArrowRight class="size-3.5 shrink-0" aria-hidden="true" />
 				</a>
 			</div>
 		{/each}
 	</div>
 
-	<ul class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+	<ul class="grid grid-cols-1 gap-sm sm:grid-cols-3">
 		{#each community as link, i (link.title)}
 			<li class="flex" in:fly={tileTransition(4 + i)}>
 				<a
@@ -178,7 +179,7 @@
 {#snippet heading(icon: Component<SvelteHTMLElements["svg"]>, title: string)}
 	{@const Icon = icon}
 	<span class={slot.heading()}>
-		<Icon class="size-4 shrink-0" aria-hidden="true" />
+		<Icon class="size-3.5 shrink-0" aria-hidden="true" />
 		{title}
 	</span>
 {/snippet}
diff --git a/web/src/lib/components/welcome/KeysStep.svelte b/web/src/lib/components/welcome/KeysStep.svelte
index d3ea35ede..f5f64d314 100644
--- a/web/src/lib/components/welcome/KeysStep.svelte
+++ b/web/src/lib/components/welcome/KeysStep.svelte
@@ -82,7 +82,7 @@
 	};
 </script>
 
-<div class="flex flex-col gap-6">
+<div class="flex flex-col gap-xl">
 	<StepHeader
 		title="Add SSH keys"
 		subtitle="Add a public SSH key to push to your repositories over SSH."
@@ -91,7 +91,7 @@
 	<ErrorAlert label={error} />
 
 	{#if keys.length > 0}
-		<ul class="flex flex-col gap-3">
+		<ul class="flex flex-col gap-sm">
 			{#each keys as pubkey (pubkey.rkey)}
 				<li
 					in:fly={{
@@ -117,7 +117,7 @@
 		</ul>
 	{/if}
 
-	<form class="flex flex-col gap-4" onsubmit={add}>
+	<form class="flex flex-col gap-md" onsubmit={add}>
 		<Field label="Key name" labelCase="normal">
 			{#snippet children({ id })}
 				<Input {id} placeholder="my-laptop" required bind:value={name} />
diff --git a/web/src/lib/components/welcome/ProfileStep.svelte b/web/src/lib/components/welcome/ProfileStep.svelte
index 9bf27c1dc..10527f729 100644
--- a/web/src/lib/components/welcome/ProfileStep.svelte
+++ b/web/src/lib/components/welcome/ProfileStep.svelte
@@ -3,9 +3,9 @@
 
 	export const avatarPicker = tv({
 		slots: {
-			label: "flex size-40 cursor-pointer flex-col items-center justify-center gap-1 overflow-hidden rounded-full border border-border-default text-foreground-subtle transition-colors focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-border-focus hover:bg-background-subtle",
+			label: "flex size-40 cursor-pointer flex-col items-center justify-center gap-2xs overflow-hidden rounded-full border border-border-default text-foreground-subtle transition-colors focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-border-focus hover:bg-background-subtle",
 			image: "size-full rounded-full object-cover",
-			placeholder: "flex flex-col items-center justify-center gap-1"
+			placeholder: "flex flex-col items-center justify-center gap-2xs"
 		}
 	});
 
@@ -53,10 +53,10 @@
 	};
 </script>
 
-<div class="flex flex-col gap-6">
+<div class="flex flex-col gap-xl">
 	<StepHeader title="Welcome!" subtitle="Let's set up your profile. All fields are optional." />
 
-	<div class="flex flex-col gap-6 md:flex-row">
+	<div class="flex flex-col gap-xl md:flex-row">
 		<div class="flex shrink-0 justify-center md:block">
 			<label class={slot.label()}>
 				{#if draft.avatarPreview}
@@ -84,13 +84,13 @@
 			<p
 				id={pictureErrorId}
 				role="status"
-				class="mt-2 typography-paragraph-small text-foreground-danger"
+				class="mt-xs typography-paragraph-small text-foreground-danger"
 			>
 				{pictureError ?? ""}
 			</p>
 		</div>
 
-		<div class="flex min-w-0 flex-1 flex-col gap-4">
+		<div class="flex min-w-0 flex-1 flex-col gap-md">
 			<Field label="Bio" labelCase="normal">
 				{#snippet children({ id })}
 					<Input
diff --git a/web/src/lib/components/welcome/SocialStep.svelte b/web/src/lib/components/welcome/SocialStep.svelte
index 690e63d58..d14cf0f68 100644
--- a/web/src/lib/components/welcome/SocialStep.svelte
+++ b/web/src/lib/components/welcome/SocialStep.svelte
@@ -25,12 +25,12 @@
 	};
 </script>
 
-<div class="flex flex-col gap-6">
+<div class="flex flex-col gap-xl">
 	<StepHeader title="Discover" subtitle="Find users to follow and repositories to star." />
 
 	{#if people.length > 0 || repos.length > 0}
 		{#if people.length > 0}
-			<div class="flex flex-col gap-3">
+			<div class="flex flex-col gap-sm">
 				{#each people as person (person.did)}
 					<FollowCard
 						{person}
@@ -42,7 +42,7 @@
 		{/if}
 
 		{#if repos.length > 0}
-			<div class="flex flex-col gap-3">
+			<div class="flex flex-col gap-sm">
 				{#each repos as repo (repoKey(repo))}
 					<RepoCard {repo} border onStar={(change) => interacted(change.starred)} />
 				{/each}
@@ -52,10 +52,10 @@
 		<EmptyState icon={Compass} message="No suggestions yet.">
 			<a
 				href={timelineHref}
-				class="ml-2 flex w-fit items-center gap-1 typography-paragraph-small text-foreground-default no-underline hover:underline"
+				class="ml-xs flex w-fit items-center gap-2xs typography-paragraph-small text-foreground-default no-underline hover:underline"
 			>
 				Browse the timeline
-				<ArrowRight class="size-4 shrink-0" aria-hidden="true" />
+				<ArrowRight class="size-3.5 shrink-0" aria-hidden="true" />
 			</a>
 		</EmptyState>
 	{/if}
diff --git a/web/src/lib/components/welcome/StepHeader.svelte b/web/src/lib/components/welcome/StepHeader.svelte
index e7a65243c..7103004e7 100644
--- a/web/src/lib/components/welcome/StepHeader.svelte
+++ b/web/src/lib/components/welcome/StepHeader.svelte
@@ -3,7 +3,7 @@
 
 	export const stepHeader = tv({
 		slots: {
-			root: "flex flex-col gap-2",
+			root: "flex flex-col gap-xs",
 			title: "typography-heading-3 font-semibold text-foreground-default",
 			subtitle: "typography-paragraph-regular text-foreground-muted"
 		}
diff --git a/web/src/lib/components/welcome/Steps.svelte b/web/src/lib/components/welcome/Steps.svelte
index fa8e13cf5..cf9a0ce8d 100644
--- a/web/src/lib/components/welcome/Steps.svelte
+++ b/web/src/lib/components/welcome/Steps.svelte
@@ -3,10 +3,10 @@
 
 	export const steps = tv({
 		slots: {
-			root: "flex w-full items-center gap-2",
-			item: "flex flex-1 items-center gap-2 last:flex-none",
+			root: "flex w-full items-center gap-xs",
+			item: "flex flex-1 items-center gap-xs last:flex-none",
 			control:
-				"flex items-center gap-2 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+				"flex items-center gap-xs rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
 			marker: "flex size-6 shrink-0 items-center justify-center rounded-full typography-paragraph-small tabular-nums transition-[scale,background-color,border-color] duration-(--rail-duration) ease-(--rail-ease)",
 			label: "sr-only typography-paragraph-small whitespace-nowrap sm:not-sr-only",
 			connector: "relative h-0.5 flex-1 overflow-hidden rounded-full bg-background-subtle",
diff --git a/web/src/lib/components/welcome/WelcomeCard.svelte b/web/src/lib/components/welcome/WelcomeCard.svelte
index 02aab7ee6..bc8041766 100644
--- a/web/src/lib/components/welcome/WelcomeCard.svelte
+++ b/web/src/lib/components/welcome/WelcomeCard.svelte
@@ -3,14 +3,14 @@
 
 	export const welcomeCard = tv({
 		slots: {
-			root: "overflow-hidden rounded-sm border border-border-default bg-background-default shadow-xs",
-			header: "border-b border-border-default px-6 py-5",
+			root: "overflow-hidden rounded-sm border border-border-default bg-background-default",
+			header: "border-b border-border-default px-xl py-lg",
 			body: "grid overflow-hidden",
 			// self-start keeps the pane at its content height: once the body carries a
 			// measured height the grid row would otherwise stretch the pane to match it,
 			// and measuring that back is a loop that never moves
-			pane: "col-start-1 row-start-1 min-w-0 self-start p-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
-			footer: "flex items-center justify-between gap-4 border-t border-border-default px-6 py-4"
+			pane: "col-start-1 row-start-1 min-w-0 self-start p-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+			footer: "flex items-center justify-between gap-md border-t border-border-default px-xl py-md"
 		}
 	});
 
-- 
2.51.2