From 680656c1afff97dfe5299a113eaa4c0abcb10b34 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 31 Jul 2026 14:28:53 +0200
Subject: [PATCH] web: use canonical tailwind class names

mechanical sweep of everything the new lint rule can fix on its own:
rounded -> rounded-sm, flex-grow -> grow, px-2 py-2 -> p-2, arbitrary px
values onto the spacing scale (size-[26px] -> size-6.5), and v4 variant
forms ([&>*]: -> *:).

left alone: max-w-screen-* keeps its breakpoint linkage, and the
text-*/leading-* pairs that collapse into typography-* utilities are a
design-system call, not a rename.

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/comment/CommentBox.svelte  |  4 ++--
 web/src/lib/components/home/MarketingHome.svelte  | 10 +++++-----
 .../components/profile/FollowCardContent.svelte   | 12 ++++++------
 .../components/profile/FollowerFollowing.svelte   |  6 ++----
 web/src/lib/components/profile/ProfileCard.svelte | 15 +++++----------
 .../components/profile/tabs/RepoListTab.svelte    |  2 +-
 .../lib/components/profile/tabs/VouchTab.svelte   |  2 +-
 web/src/lib/components/repo/CloneDropdown.svelte  |  4 ++--
 web/src/lib/components/repo/CommitList.svelte     |  4 ++--
 web/src/lib/components/repo/EmptyRepo.svelte      |  4 ++--
 .../lib/components/repo/LastCommitPanel.svelte    |  2 +-
 web/src/lib/components/repo/PanelHeader.svelte    |  2 +-
 web/src/lib/components/repo/Readme.svelte         |  4 +++-
 web/src/lib/components/repo/RefSelector.svelte    |  2 +-
 web/src/lib/components/repo/RepoIndexView.svelte  |  2 +-
 web/src/lib/components/repo/RepoToolbar.svelte    |  2 +-
 web/src/lib/components/repo/TreeHeader.svelte     |  4 ++--
 .../components/repo/issues/IssueStatePill.svelte  |  2 +-
 .../lib/components/settings/SettingsList.svelte   |  2 +-
 .../settings/SettingsNav.stories.svelte           |  8 ++++----
 .../lib/components/settings/SettingsPanel.svelte  |  2 +-
 .../lib/components/settings/ThemePicker.svelte    |  8 ++++----
 .../lib/components/settings/ThemePreview.svelte   |  2 +-
 web/src/lib/components/shell/Topbar.svelte        |  6 ++++--
 web/src/lib/components/strings/StringForm.svelte  |  8 ++++----
 web/src/lib/components/ui/ButtonGroup.svelte      |  4 ++--
 web/src/lib/components/ui/Card.svelte             |  2 +-
 web/src/lib/components/ui/Dropdown.svelte         |  2 +-
 web/src/lib/components/ui/DropdownItem.svelte     |  2 +-
 web/src/lib/components/ui/Error.svelte            |  2 +-
 web/src/lib/components/ui/Field.stories.svelte    |  8 ++++----
 web/src/lib/components/ui/Input.svelte            |  2 +-
 web/src/lib/components/ui/Logo.stories.svelte     |  2 +-
 web/src/lib/components/ui/Logo.svelte             |  2 +-
 web/src/lib/components/ui/Select.svelte           |  2 +-
 web/src/lib/components/ui/SignupPrompt.svelte     |  2 +-
 web/src/lib/components/ui/TabPanel.svelte         |  2 +-
 web/src/lib/components/ui/Tabs.svelte             |  4 ++--
 web/src/lib/components/ui/Tag.svelte              |  2 +-
 web/src/lib/components/ui/Textarea.svelte         |  4 ++--
 web/src/lib/components/ui/Toggle.svelte           |  2 +-
 web/src/lib/components/ui/User.svelte             | 10 +++++-----
 web/src/routes/login/+page.svelte                 |  8 ++++----
 web/src/routes/repo/new/+page.svelte              | 14 +++++++-------
 web/src/routes/settings/+layout.svelte            |  2 +-
 web/src/routes/strings/new/+page.svelte           |  2 +-
 46 files changed, 98 insertions(+), 101 deletions(-)

diff --git a/web/src/lib/components/comment/CommentBox.svelte b/web/src/lib/components/comment/CommentBox.svelte
index 49c4b7e9..174bde65 100644
--- a/web/src/lib/components/comment/CommentBox.svelte
+++ b/web/src/lib/components/comment/CommentBox.svelte
@@ -67,14 +67,14 @@
 			<Avatar did={authorDid} handle={authorHandle} size="size-8" tiny />
 		</div>
 		<div class="flex min-w-0 flex-1 flex-col gap-2">
-			<div class="flex flex-wrap items-center gap-x-1 gap-y-1 text-sm text-foreground-subtle">
+			<div class="flex flex-wrap items-center gap-1 text-sm text-foreground-subtle">
 				<span class="text-foreground-default">{authorHandle}</span>
 			</div>
 			{@render editor()}
 		</div>
 	</div>
 {:else}
-	<div class="rounded border border-border-default bg-background-default px-4 py-4 drop-shadow-xs">
+	<div class="rounded-sm border border-border-default bg-background-default p-4 drop-shadow-xs">
 		<div class="pb-2 text-sm text-foreground-subtle">
 			<User handle={authorHandle} did={authorDid} />
 		</div>
diff --git a/web/src/lib/components/home/MarketingHome.svelte b/web/src/lib/components/home/MarketingHome.svelte
index 5dd94733..c4b51926 100644
--- a/web/src/lib/components/home/MarketingHome.svelte
+++ b/web/src/lib/components/home/MarketingHome.svelte
@@ -14,7 +14,7 @@
 
 {#snippet marketingButton(label: string, showArrow: boolean, className: string)}
 	<button
-		class="inline-flex cursor-pointer items-center justify-center gap-2 rounded border border-border-success bg-background-success-emphasis px-4 py-2 typography-paragraph-large font-medium text-foreground-on-emphasis hover:bg-background-success-emphasis-hover {className}"
+		class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-sm border border-border-success bg-background-success-emphasis px-4 py-2 typography-paragraph-large font-medium text-foreground-on-emphasis hover:bg-background-success-emphasis-hover {className}"
 		type="submit"
 	>
 		{label}
@@ -39,7 +39,7 @@
 			name="id"
 			required
 			placeholder="Enter your email"
-			class="min-w-0 flex-1 rounded border border-border-strong bg-background-default px-3 py-2 typography-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:border-foreground-subtle focus:outline-none"
+			class="min-w-0 flex-1 rounded-sm border border-border-strong bg-background-default px-3 py-2 typography-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:border-foreground-subtle focus:outline-none"
 		/>
 		{@render marketingButton(label, showArrow, buttonClass)}
 	</form>
@@ -48,7 +48,7 @@
 <section class="overflow-hidden px-6 pt-28 pb-24 md:pt-36 md:pb-32">
 	<div class="mx-auto grid max-w-screen-xl grid-cols-1 items-center gap-14 md:grid-cols-2">
 		<h1
-			class="text-6xl leading-[0.98] font-bold tracking-[-0.05em] text-foreground-default md:text-7xl lg:text-8xl"
+			class="text-6xl leading-[0.98] font-bold tracking-tighter text-foreground-default md:text-7xl lg:text-8xl"
 		>
 			tightly-knit<br />social coding.
 		</h1>
@@ -66,7 +66,7 @@
 	</div>
 
 	<div class="relative mx-auto mt-28 hidden h-72 max-w-screen-xl md:block" aria-hidden="true">
-		<div class="absolute inset-x-0 bottom-10 flex items-end gap-[5px] opacity-35">
+		<div class="absolute inset-x-0 bottom-10 flex items-end gap-1.25 opacity-35">
 			{#each ticks as tick (tick)}
 				<span class="h-4 w-px bg-border-strong" class:h-7={tick % 24 === 0}></span>
 			{/each}
@@ -74,7 +74,7 @@
 		<div class="absolute inset-x-0 bottom-14 h-px bg-border-default"></div>
 		{#each activityCards as card, index (card.right)}
 			<div
-				class={`activity-card absolute ${card.x} ${card.y} ${card.width} overflow-hidden rounded border border-border-strong bg-background-default/95 text-sm text-foreground-muted shadow-2xl`}
+				class={`activity-card absolute ${card.x} ${card.y} ${card.width} overflow-hidden rounded-sm border border-border-strong bg-background-default/95 text-sm text-foreground-muted shadow-2xl`}
 			>
 				<div class="flex items-center gap-2 border-l border-border-strong px-4 py-3">
 					<span class="size-5 rounded-full bg-orange-300/90"></span>
diff --git a/web/src/lib/components/profile/FollowCardContent.svelte b/web/src/lib/components/profile/FollowCardContent.svelte
index 3d6fc6db..e3ea916d 100644
--- a/web/src/lib/components/profile/FollowCardContent.svelte
+++ b/web/src/lib/components/profile/FollowCardContent.svelte
@@ -18,23 +18,23 @@
 
 <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
 	<div class="flex min-w-0 flex-1 items-center gap-4">
-		<div class="flex h-24 w-24 shrink-0 items-center justify-center">
+		<div class="flex size-24 shrink-0 items-center justify-center">
 			<Avatar did={person.did} handle={person.handle} size="size-24" class="p-2" />
 		</div>
 
 		<div class="flex min-w-0 flex-1 flex-col justify-around">
 			<a
 				href={resolve(`/${person.handle}` as "/")}
-				class="max-w-full overflow-hidden font-bold text-ellipsis whitespace-nowrap text-foreground-default hover:underline"
+				class="max-w-full truncate font-bold text-foreground-default hover:underline"
 			>
 				{person.handle}
 			</a>
 			{#if person.description}
-				<p class="pb-2 text-sm break-words text-foreground-muted md:pb-2">{person.description}</p>
+				<p class="pb-2 text-sm wrap-break-word text-foreground-muted md:pb-2">
+					{person.description}
+				</p>
 			{/if}
-			<div
-				class="my-2 flex max-w-full items-center gap-2 overflow-hidden text-sm text-ellipsis whitespace-nowrap text-foreground-subtle"
-			>
+			<div class="my-2 flex max-w-full items-center gap-2 truncate text-sm text-foreground-subtle">
 				<Users class="size-4 shrink-0" />
 				<span
 					><a
diff --git a/web/src/lib/components/profile/FollowerFollowing.svelte b/web/src/lib/components/profile/FollowerFollowing.svelte
index 9c959f73..0f592dc1 100644
--- a/web/src/lib/components/profile/FollowerFollowing.svelte
+++ b/web/src/lib/components/profile/FollowerFollowing.svelte
@@ -11,10 +11,8 @@
 	let { handle, followers, following }: Props = $props();
 </script>
 
-<div
-	class="my-2 flex max-w-full items-center gap-2 overflow-hidden text-sm text-ellipsis whitespace-nowrap"
->
-	<span class="flex-shrink-0"><Users class="size-4" aria-hidden="true" /></span>
+<div class="my-2 flex max-w-full items-center gap-2 truncate text-sm">
+	<span class="shrink-0"><Users class="size-4" aria-hidden="true" /></span>
 	<span>
 		<a href={resolve(`/${handle}?tab=followers` as "/")} class="no-underline hover:underline"
 			>{followers} followers</a
diff --git a/web/src/lib/components/profile/ProfileCard.svelte b/web/src/lib/components/profile/ProfileCard.svelte
index 8ac6ed9f..28f74b7b 100644
--- a/web/src/lib/components/profile/ProfileCard.svelte
+++ b/web/src/lib/components/profile/ProfileCard.svelte
@@ -51,10 +51,7 @@
 
 	<div class="col-span-2">
 		<div class="flex flex-row flex-nowrap items-center gap-2">
-			<h1
-				title={identity.handle}
-				class="overflow-hidden typography-heading-4 font-bold text-ellipsis whitespace-nowrap"
-			>
+			<h1 title={identity.handle} class="truncate typography-heading-4 font-bold">
 				{identity.handle}
 			</h1>
 			{#if shown?.pronouns}
@@ -87,18 +84,16 @@
 				</div>
 
 				{#if shown?.location || links.length > 0 || blueskyUrl}
-					<div
-						class="mb-2 flex max-w-full flex-col gap-2 overflow-hidden text-ellipsis whitespace-nowrap"
-					>
+					<div class="mb-2 flex max-w-full flex-col gap-2 truncate">
 						{#if shown?.location}
 							<div class="flex items-center gap-2">
-								<span class="flex-shrink-0"><MapPin class="size-4" aria-hidden="true" /></span>
+								<span class="shrink-0"><MapPin class="size-4" aria-hidden="true" /></span>
 								<span>{shown.location}</span>
 							</div>
 						{/if}
 						{#if blueskyUrl}
 							<div class="flex items-center gap-2">
-								<span class="flex-shrink-0"><Link class="size-4" aria-hidden="true" /></span>
+								<span class="shrink-0"><Link class="size-4" aria-hidden="true" /></span>
 								<a
 									href={blueskyUrl}
 									target="_blank"
@@ -109,7 +104,7 @@
 						{/if}
 						{#each links as link, index (index)}
 							<div class="flex items-center gap-2">
-								<span class="flex-shrink-0"><Link class="size-4" aria-hidden="true" /></span>
+								<span class="shrink-0"><Link class="size-4" aria-hidden="true" /></span>
 								<a
 									href={link}
 									target="_blank"
diff --git a/web/src/lib/components/profile/tabs/RepoListTab.svelte b/web/src/lib/components/profile/tabs/RepoListTab.svelte
index b543615c..bb405b5a 100644
--- a/web/src/lib/components/profile/tabs/RepoListTab.svelte
+++ b/web/src/lib/components/profile/tabs/RepoListTab.svelte
@@ -29,7 +29,7 @@
 					/>
 					<a
 						href={resolve(`${page.url.pathname}?tab=repos` as "/")}
-						class="absolute top-1/2 right-3 hidden -translate-y-1/2 text-foreground-subtle peer-[&:not(:placeholder-shown)]:block hover:text-foreground-default"
+						class="absolute top-1/2 right-3 hidden -translate-y-1/2 text-foreground-subtle peer-not-placeholder-shown:block hover:text-foreground-default"
 					>
 						<X class="size-4" />
 					</a>
diff --git a/web/src/lib/components/profile/tabs/VouchTab.svelte b/web/src/lib/components/profile/tabs/VouchTab.svelte
index 9a996850..281951f5 100644
--- a/web/src/lib/components/profile/tabs/VouchTab.svelte
+++ b/web/src/lib/components/profile/tabs/VouchTab.svelte
@@ -18,7 +18,7 @@
 	emptyMessage="No vouches yet."
 	listClass="relative ml-5 flex flex-col gap-6 border border-transparent px-4"
 >
-	<div class="absolute top-8 bottom-8 z-0 w-0.5 bg-border-default"></div>
+	<div class="absolute inset-y-8 z-0 w-0.5 bg-border-default"></div>
 	{#each vouches as vouch (vouch.uri)}
 		<VouchCard {vouch} {profileLabel} />
 	{/each}
diff --git a/web/src/lib/components/repo/CloneDropdown.svelte b/web/src/lib/components/repo/CloneDropdown.svelte
index a2a24cfc..81182588 100644
--- a/web/src/lib/components/repo/CloneDropdown.svelte
+++ b/web/src/lib/components/repo/CloneDropdown.svelte
@@ -87,7 +87,7 @@
 				>{entry.label}</span
 			>
 			<div
-				class="flex items-stretch divide-x divide-border-default rounded border border-border-default"
+				class="flex items-stretch divide-x divide-border-default rounded-sm border border-border-default"
 			>
 				<span
 					class="flex-1 overflow-x-auto bg-background-inset px-3 py-2 font-mono text-sm whitespace-nowrap text-foreground-default select-all"
@@ -120,7 +120,7 @@
 			<a
 				href={archiveUrl(archive.format)}
 				rel="external noopener noreferrer"
-				class="flex flex-1 items-center justify-center gap-2 rounded border border-border-default px-2 py-1.5 text-sm text-foreground-default no-underline hover:bg-background-subtle hover:no-underline"
+				class="flex flex-1 items-center justify-center gap-2 rounded-sm border border-border-default px-2 py-1.5 text-sm text-foreground-default no-underline hover:bg-background-subtle hover:no-underline"
 			>
 				<Download class="size-4" aria-hidden="true" />
 				{archive.format === "zip" ? ".zip" : archive.format}
diff --git a/web/src/lib/components/repo/CommitList.svelte b/web/src/lib/components/repo/CommitList.svelte
index 6d898306..0013a824 100644
--- a/web/src/lib/components/repo/CommitList.svelte
+++ b/web/src/lib/components/repo/CommitList.svelte
@@ -31,7 +31,7 @@
 				{#if commit.body}
 					<button
 						type="button"
-						class="mt-1 shrink-0 cursor-pointer rounded bg-background-inset px-1 py-0.5 text-foreground-muted hover:bg-background-muted"
+						class="mt-1 shrink-0 cursor-pointer rounded-sm bg-background-inset px-1 py-0.5 text-foreground-muted hover:bg-background-muted"
 						aria-expanded={expanded[commit.hash] === true}
 						aria-label="Toggle commit body"
 						onclick={() => (expanded[commit.hash] = !expanded[commit.hash])}
@@ -51,7 +51,7 @@
 				<a
 					href={resolve(`${base}/commit/${commit.hash}` as "/")}
 					title={commit.changeId ? `jj change id: ${commit.changeId}` : undefined}
-					class="rounded bg-background-inset px-2 py-0.5 font-mono text-foreground-muted no-underline hover:underline"
+					class="rounded-sm bg-background-inset px-2 py-0.5 font-mono text-foreground-muted no-underline hover:underline"
 				>
 					{commit.shortHash}
 				</a>
diff --git a/web/src/lib/components/repo/EmptyRepo.svelte b/web/src/lib/components/repo/EmptyRepo.svelte
index 8e888e76..4568f82d 100644
--- a/web/src/lib/components/repo/EmptyRepo.svelte
+++ b/web/src/lib/components/repo/EmptyRepo.svelte
@@ -69,7 +69,7 @@
 {/snippet}
 
 {#snippet codeBlock(lines: string[])}
-	<pre class="overflow-x-auto rounded bg-background-inset p-3 font-mono text-sm">{lines.join(
+	<pre class="overflow-x-auto rounded-sm bg-background-inset p-3 font-mono text-sm">{lines.join(
 			"\n"
 		)}</pre>
 {/snippet}
@@ -123,7 +123,7 @@
 				</p>
 				<p>
 					{@render bullet(3)}Configure your remote to
-					<code class="rounded bg-background-inset px-1 font-mono">{remote}</code>
+					<code class="rounded-sm bg-background-inset px-1 font-mono">{remote}</code>
 				</p>
 				<p>{@render bullet(4)}Push!</p>
 			</div>
diff --git a/web/src/lib/components/repo/LastCommitPanel.svelte b/web/src/lib/components/repo/LastCommitPanel.svelte
index 99d7930d..e5f1d6a4 100644
--- a/web/src/lib/components/repo/LastCommitPanel.svelte
+++ b/web/src/lib/components/repo/LastCommitPanel.svelte
@@ -33,7 +33,7 @@
 	</div>
 	<a
 		{href}
-		class="w-fit rounded bg-background-inset px-2 py-1 font-mono typography-monospace-small text-foreground-muted no-underline hover:underline"
+		class="w-fit rounded-sm bg-background-inset px-2 py-1 font-mono typography-monospace-small text-foreground-muted no-underline hover:underline"
 	>
 		{commit.shortHash}
 	</a>
diff --git a/web/src/lib/components/repo/PanelHeader.svelte b/web/src/lib/components/repo/PanelHeader.svelte
index c14a300d..b4c1d71d 100644
--- a/web/src/lib/components/repo/PanelHeader.svelte
+++ b/web/src/lib/components/repo/PanelHeader.svelte
@@ -22,7 +22,7 @@
 	<Glyph class="size-4 shrink-0" aria-hidden="true" />
 	{title}
 	{#if count !== undefined}
-		<span class="rounded bg-background-inset px-1 text-sm font-normal">
+		<span class="rounded-sm bg-background-inset px-1 text-sm font-normal">
 			{approximate && count > 0 ? `${count}+` : count}
 		</span>
 	{/if}
diff --git a/web/src/lib/components/repo/Readme.svelte b/web/src/lib/components/repo/Readme.svelte
index bfc52aaa..6dc3dc07 100644
--- a/web/src/lib/components/repo/Readme.svelte
+++ b/web/src/lib/components/repo/Readme.svelte
@@ -10,7 +10,9 @@
 	let { filename, contents, html = null }: Props = $props();
 </script>
 
-<div class="mt-4 w-full overflow-hidden rounded border border-border-default bg-background-default">
+<div
+	class="mt-4 w-full overflow-hidden rounded-sm border border-border-default bg-background-default"
+>
 	<div class="border-b border-border-default px-4 py-2">
 		<span class="flex items-center gap-2">
 			<FileText class="size-4 text-foreground-subtle" aria-hidden="true" />
diff --git a/web/src/lib/components/repo/RefSelector.svelte b/web/src/lib/components/repo/RefSelector.svelte
index 9e290826..42a51330 100644
--- a/web/src/lib/components/repo/RefSelector.svelte
+++ b/web/src/lib/components/repo/RefSelector.svelte
@@ -47,7 +47,7 @@
 	</div>
 	<a
 		href={resolve(`${base}/compare?base=${encodeURIComponent(current)}` as "/")}
-		class="flex items-center rounded border border-border-default px-2 text-foreground-muted no-underline hover:bg-background-subtle hover:no-underline"
+		class="flex items-center rounded-sm border border-border-default px-2 text-foreground-muted no-underline hover:bg-background-subtle hover:no-underline"
 		title="Compare branches or tags"
 		aria-label="Compare branches or tags"
 	>
diff --git a/web/src/lib/components/repo/RepoIndexView.svelte b/web/src/lib/components/repo/RepoIndexView.svelte
index bbbcf18b..baa4e3fc 100644
--- a/web/src/lib/components/repo/RepoIndexView.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.svelte
@@ -29,7 +29,7 @@
 	const refsCapped = $derived(data.refs.capped);
 </script>
 
-<TabPanel class="relative mx-auto w-full mt-[1px]">
+<TabPanel class="relative mx-auto mt-px w-full">
 	{#if data.needsUpgrade}
 		<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
 			<div>
diff --git a/web/src/lib/components/repo/RepoToolbar.svelte b/web/src/lib/components/repo/RepoToolbar.svelte
index f399d6a3..a25e4715 100644
--- a/web/src/lib/components/repo/RepoToolbar.svelte
+++ b/web/src/lib/components/repo/RepoToolbar.svelte
@@ -35,7 +35,7 @@
 	/>
 
 	<form
-		class="order-last w-full md:order-none md:w-64"
+		class="order-last w-full md:order-0 md:w-64"
 		method="GET"
 		action={resolve(`${base}/search` as "/")}
 	>
diff --git a/web/src/lib/components/repo/TreeHeader.svelte b/web/src/lib/components/repo/TreeHeader.svelte
index 863629f5..3241f680 100644
--- a/web/src/lib/components/repo/TreeHeader.svelte
+++ b/web/src/lib/components/repo/TreeHeader.svelte
@@ -37,7 +37,7 @@
 <div class="mb-3 flex items-center justify-between gap-2 text-sm">
 	<div class="flex min-w-0 items-center gap-3">
 		<div
-			class="flex w-fit items-center gap-1 overflow-x-auto rounded border border-border-default bg-background-inset px-3 py-2 whitespace-nowrap"
+			class="flex w-fit items-center gap-1 overflow-x-auto rounded-sm border border-border-default bg-background-inset px-3 py-2 whitespace-nowrap"
 		>
 			{#each crumbs as crumb (crumb.href)}
 				{#if crumb.last}
@@ -66,7 +66,7 @@
 	</div>
 
 	<div
-		class="hidden w-fit items-center gap-1 rounded border border-border-default bg-background-inset p-2 whitespace-nowrap text-foreground-muted md:flex"
+		class="hidden w-fit items-center gap-1 rounded-sm border border-border-default bg-background-inset p-2 whitespace-nowrap text-foreground-muted md:flex"
 	>
 		at <a
 			href={resolve(`${base}/tree/${encodedRef}` as "/")}
diff --git a/web/src/lib/components/repo/issues/IssueStatePill.svelte b/web/src/lib/components/repo/issues/IssueStatePill.svelte
index a8e752b6..354330c0 100644
--- a/web/src/lib/components/repo/issues/IssueStatePill.svelte
+++ b/web/src/lib/components/repo/issues/IssueStatePill.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const issueStatePill = tv({
-		base: "inline-flex items-center gap-1.5 rounded px-2 py-1 text-sm text-foreground-on-emphasis select-none",
+		base: "inline-flex items-center gap-1.5 rounded-sm px-2 py-1 text-sm text-foreground-on-emphasis select-none",
 		variants: {
 			state: {
 				open: "bg-background-success-emphasis",
diff --git a/web/src/lib/components/settings/SettingsList.svelte b/web/src/lib/components/settings/SettingsList.svelte
index 8471ac61..af709fc3 100644
--- a/web/src/lib/components/settings/SettingsList.svelte
+++ b/web/src/lib/components/settings/SettingsList.svelte
@@ -7,7 +7,7 @@
 		// 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",
+		base: "flex w-full flex-col divide-y divide-border-default rounded-sm border border-border-default py-1 *:py-2",
 		variants: {
 			padding: {
 				default: "px-4",
diff --git a/web/src/lib/components/settings/SettingsNav.stories.svelte b/web/src/lib/components/settings/SettingsNav.stories.svelte
index 0df41a86..cbe4468e 100644
--- a/web/src/lib/components/settings/SettingsNav.stories.svelte
+++ b/web/src/lib/components/settings/SettingsNav.stories.svelte
@@ -31,7 +31,7 @@
      in a tall box rather than letting it hug its items -->
 <Story name="Default">
 	{#snippet template(args)}
-		<div class="flex h-[568px] w-44 items-stretch">
+		<div class="flex h-142 w-44 items-stretch">
 			<SettingsNav {...args} />
 		</div>
 	{/snippet}
@@ -39,7 +39,7 @@
 
 <Story name="Active elsewhere" args={{ active: "notifications" }}>
 	{#snippet template(args)}
-		<div class="flex h-[568px] w-44 items-stretch">
+		<div class="flex h-142 w-44 items-stretch">
 			<SettingsNav {...args} />
 		</div>
 	{/snippet}
@@ -49,7 +49,7 @@
      renders the select it collapses into instead -->
 <Story name="Collapsed">
 	{#snippet template(args)}
-		<div class="flex w-[378px] items-stretch">
+		<div class="flex w-94.5 items-stretch">
 			<SettingsNav {...args} active="keys" />
 		</div>
 	{/snippet}
@@ -57,7 +57,7 @@
 
 <Story name="No icons" args={{ items: items.map(({ id, label, href }) => ({ id, label, href })) }}>
 	{#snippet template(args)}
-		<div class="flex h-[568px] w-44 items-stretch">
+		<div class="flex h-142 w-44 items-stretch">
 			<SettingsNav {...args} />
 		</div>
 	{/snippet}
diff --git a/web/src/lib/components/settings/SettingsPanel.svelte b/web/src/lib/components/settings/SettingsPanel.svelte
index 92170ce9..217fe963 100644
--- a/web/src/lib/components/settings/SettingsPanel.svelte
+++ b/web/src/lib/components/settings/SettingsPanel.svelte
@@ -16,7 +16,7 @@
      desktop, and below md a full-bleed panel that only keeps its top and bottom
      hairlines, since the phone frame already supplies the side margins. -->
 <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-[600px] 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-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"
 >
 	<SettingsNav {items} {active} {label} />
 
diff --git a/web/src/lib/components/settings/ThemePicker.svelte b/web/src/lib/components/settings/ThemePicker.svelte
index 2f0d18c5..6ed1c525 100644
--- a/web/src/lib/components/settings/ThemePicker.svelte
+++ b/web/src/lib/components/settings/ThemePicker.svelte
@@ -15,11 +15,11 @@
 <!-- three 135px thumbnails need 437px, so on a phone they wrap two-up and Dark
      drops onto a second line -->
 <div class="flex w-full flex-wrap gap-4 sm:w-auto">
-	<label class="flex w-[135px] cursor-pointer flex-col gap-2">
+	<label class="flex w-33.75 cursor-pointer flex-col gap-2">
 		<!-- Auto is the one thumbnail that tracks the live theme, since that is
 		     exactly what the option does -->
 		<span
-			class="flex aspect-[135/84] w-full items-center justify-center rounded-sm border border-border-default bg-background-default"
+			class="flex aspect-135/84 w-full items-center justify-center rounded-sm border border-border-default bg-background-default"
 			aria-hidden="true"
 		>
 			<SunMoon class="size-6 text-foreground-muted" />
@@ -27,12 +27,12 @@
 		<Radio value="auto" bind:group={value} {name}>Auto</Radio>
 	</label>
 
-	<label class="flex w-[135px] cursor-pointer flex-col gap-2">
+	<label class="flex w-33.75 cursor-pointer flex-col gap-2">
 		<ThemePreview palette="light" />
 		<Radio value="light" bind:group={value} {name}>Light</Radio>
 	</label>
 
-	<label class="flex w-[135px] cursor-pointer flex-col gap-2">
+	<label class="flex w-33.75 cursor-pointer flex-col gap-2">
 		<ThemePreview palette="dark" />
 		<Radio value="dark" bind:group={value} {name}>Dark</Radio>
 	</label>
diff --git a/web/src/lib/components/settings/ThemePreview.svelte b/web/src/lib/components/settings/ThemePreview.svelte
index 7347a43b..6a1080fe 100644
--- a/web/src/lib/components/settings/ThemePreview.svelte
+++ b/web/src/lib/components/settings/ThemePreview.svelte
@@ -86,7 +86,7 @@
 </script>
 
 <div
-	class="relative aspect-[135/84] w-full overflow-hidden rounded-sm border"
+	class="relative aspect-135/84 w-full overflow-hidden rounded-sm border"
 	style="background-color: {colors.canvas}; border-color: {colors.border}"
 	aria-hidden="true"
 >
diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index c9568f46..e41195c4 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -120,7 +120,9 @@
 							>
 								<Spinner class="size-4" />
 							</span>
-							<span class="hidden h-4 w-24 rounded bg-background-inset md:block" aria-hidden="true"
+							<span
+								class="hidden h-4 w-24 rounded-sm bg-background-inset md:block"
+								aria-hidden="true"
 							></span>
 						</div>
 					{:else if user}
@@ -142,7 +144,7 @@
 					{:else}
 						<div class="flex items-center gap-2" aria-hidden="true">
 							<span class="size-8 rounded-full bg-background-inset md:size-5"></span>
-							<span class="hidden h-4 w-24 rounded bg-background-inset md:block"></span>
+							<span class="hidden h-4 w-24 rounded-sm bg-background-inset md:block"></span>
 						</div>
 					{/if}
 				</div>
diff --git a/web/src/lib/components/strings/StringForm.svelte b/web/src/lib/components/strings/StringForm.svelte
index 3e237869..618cc9c9 100644
--- a/web/src/lib/components/strings/StringForm.svelte
+++ b/web/src/lib/components/strings/StringForm.svelte
@@ -68,7 +68,7 @@
 	};
 </script>
 
-<div class="rounded border border-border-default bg-background-default">
+<div class="rounded-sm border border-border-default bg-background-default">
 	<form onsubmit={handleSubmit}>
 		<div class="flex flex-col gap-2 p-4">
 			<div class="flex flex-col gap-2 md:flex-row">
@@ -80,7 +80,7 @@
 					required
 					bind:value={filename}
 					disabled={isPublishing}
-					class="rounded border border-border-default bg-background-default px-2 py-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50 md:max-w-64"
+					class="rounded-sm border border-border-default bg-background-default p-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50 md:max-w-64"
 				/>
 				<input
 					type="text"
@@ -90,7 +90,7 @@
 					maxlength={280}
 					bind:value={description}
 					disabled={isPublishing}
-					class="flex-1 rounded border border-border-default bg-background-default px-2 py-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50"
+					class="flex-1 rounded-sm border border-border-default bg-background-default p-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50"
 				/>
 			</div>
 
@@ -103,7 +103,7 @@
 				spellcheck={false}
 				bind:value={content}
 				disabled={isPublishing}
-				class="w-full resize-y rounded border border-border-default bg-background-default px-2 py-2 font-mono text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50"
+				class="w-full resize-y rounded-sm border border-border-default bg-background-default p-2 font-mono text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50"
 			></textarea>
 		</div>
 
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
index ae42f6b8..f24933b6 100644
--- a/web/src/lib/components/ui/ButtonGroup.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -21,8 +21,8 @@
 			spaced: {
 				true: "gap-2",
 				false: [
-					"items-stretch gap-0 rounded border border-border-default bg-background-subtle dark:bg-background-canvas",
-					"*:relative [&>*]:border-y-0",
+					"items-stretch gap-0 rounded-sm border border-border-default bg-background-subtle dark:bg-background-canvas",
+					"*: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]",
diff --git a/web/src/lib/components/ui/Card.svelte b/web/src/lib/components/ui/Card.svelte
index e11d37f0..0a60d977 100644
--- a/web/src/lib/components/ui/Card.svelte
+++ b/web/src/lib/components/ui/Card.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const card = tv({
-		base: "rounded",
+		base: "rounded-sm",
 		variants: {
 			border: {
 				true: "border border-border-default",
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index 49339bdf..47d299d8 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -7,7 +7,7 @@
 			root: "relative inline-block",
 			plainTrigger:
 				"flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-inherit",
-			menu: "dropdown-menu fixed z-50 m-0 max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] divide-y divide-border-default overflow-auto rounded border border-border-default bg-background-default text-sm text-foreground-default shadow-menu"
+			menu: "dropdown-menu fixed z-50 m-0 max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] divide-y divide-border-default overflow-auto rounded-sm border border-border-default bg-background-default text-sm text-foreground-default shadow-menu"
 		},
 		variants: {
 			align: {
diff --git a/web/src/lib/components/ui/DropdownItem.svelte b/web/src/lib/components/ui/DropdownItem.svelte
index 94ace008..40559bb8 100644
--- a/web/src/lib/components/ui/DropdownItem.svelte
+++ b/web/src/lib/components/ui/DropdownItem.svelte
@@ -5,7 +5,7 @@
 		base: "flex w-full cursor-pointer items-center gap-2 bg-transparent p-2 text-left no-underline hover:no-underline",
 		variants: {
 			danger: {
-				false: "hover:bg-background-subtle dark:hover:bg-[rgb(55_65_81_/_0.5)]",
+				false: "hover:bg-background-subtle dark:hover:bg-[rgb(55_65_81/0.5)]",
 				true: "text-foreground-danger hover:bg-background-danger-subtle"
 			}
 		},
diff --git a/web/src/lib/components/ui/Error.svelte b/web/src/lib/components/ui/Error.svelte
index 7b3fdd77..441bd6a6 100644
--- a/web/src/lib/components/ui/Error.svelte
+++ b/web/src/lib/components/ui/Error.svelte
@@ -3,7 +3,7 @@
 
 	export const error = tv({
 		slots: {
-			root: "overflow-hidden rounded border border-border-danger bg-background-danger-subtle text-foreground-danger dark:border-border-danger/60 dark:bg-background-danger-subtle/20",
+			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",
 			icon: "shrink-0",
 			label: "min-w-0",
diff --git a/web/src/lib/components/ui/Field.stories.svelte b/web/src/lib/components/ui/Field.stories.svelte
index f0592292..89a06fa4 100644
--- a/web/src/lib/components/ui/Field.stories.svelte
+++ b/web/src/lib/components/ui/Field.stories.svelte
@@ -28,7 +28,7 @@
 				id="field-default"
 				type="text"
 				placeholder="Placeholder"
-				class="w-full rounded border border-border-default bg-background-default px-3 py-2 text-sm 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-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
 			/>
 		</Field>
 	{/snippet}
@@ -41,7 +41,7 @@
 				id="field-label-only"
 				type="text"
 				placeholder="Placeholder"
-				class="w-full rounded border border-border-default bg-background-default px-3 py-2 text-sm 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-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
 			/>
 		</Field>
 	{/snippet}
@@ -54,7 +54,7 @@
 				id="field-required"
 				type="text"
 				placeholder="Placeholder"
-				class="w-full rounded border border-border-default bg-background-default px-3 py-2 text-sm 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-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
 			/>
 		</Field>
 	{/snippet}
@@ -79,7 +79,7 @@
 				id="field-input"
 				type="text"
 				placeholder="Placeholder"
-				class="w-full rounded border border-border-default bg-background-default px-3 py-2 text-sm 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-3 py-2 text-sm outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
 			/>
 		</Field>
 	{/snippet}
diff --git a/web/src/lib/components/ui/Input.svelte b/web/src/lib/components/ui/Input.svelte
index f90bf862..3e59c82e 100644
--- a/web/src/lib/components/ui/Input.svelte
+++ b/web/src/lib/components/ui/Input.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const inputField = tv({
-		base: "flex min-h-9 items-center gap-2 rounded border bg-background-default px-2 py-1 transition-colors",
+		base: "flex min-h-9 items-center gap-2 rounded-sm border bg-background-default px-2 py-1 transition-colors",
 		variants: {
 			error: {
 				false:
diff --git a/web/src/lib/components/ui/Logo.stories.svelte b/web/src/lib/components/ui/Logo.stories.svelte
index 1fd1f978..c84b04e8 100644
--- a/web/src/lib/components/ui/Logo.stories.svelte
+++ b/web/src/lib/components/ui/Logo.stories.svelte
@@ -39,7 +39,7 @@
 </Story>
 
 <Story name="On Emphasis" asChild>
-	<div class="flex flex-col items-start gap-4 rounded bg-background-success-emphasis p-4">
+	<div class="flex flex-col items-start gap-4 rounded-sm bg-background-success-emphasis p-4">
 		<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 65ba3611..402560e0 100644
--- a/web/src/lib/components/ui/Logo.svelte
+++ b/web/src/lib/components/ui/Logo.svelte
@@ -73,7 +73,7 @@
 	<span class="inline-flex items-center gap-2 select-none">
 		{@render mark()}
 		<span
-			class="rounded bg-background-subtle px-1 text-[10px] leading-4 font-normal text-foreground-default not-italic"
+			class="rounded-sm bg-background-subtle px-1 text-[10px] leading-4 font-normal text-foreground-default not-italic"
 		>
 			alpha
 		</span>
diff --git a/web/src/lib/components/ui/Select.svelte b/web/src/lib/components/ui/Select.svelte
index f5bfa2f8..bc0b5158 100644
--- a/web/src/lib/components/ui/Select.svelte
+++ b/web/src/lib/components/ui/Select.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const select = tv({
-		base: "w-full appearance-none rounded border bg-background-default px-3 py-2 pr-9 text-sm transition-colors outline-none disabled:cursor-not-allowed",
+		base: "w-full appearance-none rounded-sm border bg-background-default px-3 py-2 pr-9 text-sm transition-colors outline-none disabled:cursor-not-allowed",
 		variants: {
 			error: {
 				false:
diff --git a/web/src/lib/components/ui/SignupPrompt.svelte b/web/src/lib/components/ui/SignupPrompt.svelte
index 3dce3877..92628686 100644
--- a/web/src/lib/components/ui/SignupPrompt.svelte
+++ b/web/src/lib/components/ui/SignupPrompt.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div
-	class="flex flex-wrap items-center gap-2 rounded border border-foreground-warning bg-background-warning-subtle px-4 py-4 text-sm text-foreground-warning-strong drop-shadow-xs"
+	class="flex flex-wrap items-center gap-2 rounded-sm border border-foreground-warning bg-background-warning-subtle p-4 text-sm text-foreground-warning-strong drop-shadow-xs"
 >
 	<Button variant="primary" href={resolve("/signup")}>Sign up</Button>
 	<span>or</span>
diff --git a/web/src/lib/components/ui/TabPanel.svelte b/web/src/lib/components/ui/TabPanel.svelte
index 54de4371..423a3790 100644
--- a/web/src/lib/components/ui/TabPanel.svelte
+++ b/web/src/lib/components/ui/TabPanel.svelte
@@ -6,7 +6,7 @@
 	// background hides the seam — producing the connected "folder tab" look. keep it
 	// flush against the tab bar (no margin between them) for the join to line up.
 	export const tabPanel = tv({
-		base: "-mt-px rounded border border-border-default bg-background-default text-foreground-default",
+		base: "-mt-px 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: {
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index 3efcd2c3..55f7f9a3 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -53,7 +53,7 @@
 			class={itemClass(isActive)}
 		>
 			{#if Glyph}
-				<Glyph class={vertical ? "size-4 shrink-0" : "mr-2 h-4 w-4"} aria-hidden="true" />
+				<Glyph class={vertical ? "size-4 shrink-0" : "mr-2 size-4 "} aria-hidden="true" />
 			{/if}
 			{#if vertical}
 				{tab.label}
@@ -66,7 +66,7 @@
 				</span>
 			{/if}
 			{#if tab.count}
-				<span class="rounded bg-background-inset px-1 text-sm {vertical ? 'ml-auto' : 'ml-1'}"
+				<span class="rounded-sm bg-background-inset px-1 text-sm {vertical ? 'ml-auto' : 'ml-1'}"
 					>{tab.count}</span
 				>
 			{/if}
diff --git a/web/src/lib/components/ui/Tag.svelte b/web/src/lib/components/ui/Tag.svelte
index 464c1057..45cfc58c 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 leading-none font-medium select-none",
+		base: "inline-flex items-center gap-1 rounded-sm leading-none font-medium select-none",
 		variants: {
 			color: {
 				default: "border border-border-default bg-background-default text-foreground-default",
diff --git a/web/src/lib/components/ui/Textarea.svelte b/web/src/lib/components/ui/Textarea.svelte
index 20200428..2f06b3db 100644
--- a/web/src/lib/components/ui/Textarea.svelte
+++ b/web/src/lib/components/ui/Textarea.svelte
@@ -8,13 +8,13 @@
 
 	export const textareaField = tv({
 		slots: {
-			root: "relative flex items-start gap-1 rounded border bg-background-default transition-colors",
+			root: "relative flex items-start gap-1 rounded-sm border bg-background-default transition-colors",
 			// the floor has to live on the textarea, not the root: the resize handle only ever
 			// shrinks the textarea, so a min-height on the root would let the handle drag past the
 			// box's own minimum and leave dead space under the field. keep this in sync with
 			// textareaMinHeight above — it's 2px shorter because the root's border sits outside it.
 			textarea:
-				"min-h-[calc(16rem-2px)] flex-1 self-stretch bg-transparent py-2 text-sm leading-6 outline-none placeholder:text-foreground-placeholder read-only:resize-none disabled:cursor-not-allowed disabled:resize-none"
+				"min-h-63.5 flex-1 self-stretch bg-transparent py-2 text-sm leading-6 outline-none placeholder:text-foreground-placeholder read-only:resize-none disabled:cursor-not-allowed disabled:resize-none"
 		},
 		variants: {
 			error: {
diff --git a/web/src/lib/components/ui/Toggle.svelte b/web/src/lib/components/ui/Toggle.svelte
index 14588967..0cc5687d 100644
--- a/web/src/lib/components/ui/Toggle.svelte
+++ b/web/src/lib/components/ui/Toggle.svelte
@@ -47,7 +47,7 @@
 </script>
 
 <label class={labelClasses}>
-	<span class="relative inline-flex h-[18px] w-[33px] shrink-0">
+	<span class="relative inline-flex h-4.5 w-8.25 shrink-0">
 		<input type="checkbox" role="switch" bind:checked {disabled} class={inputClasses} {...rest} />
 		<span class={thumbClasses} aria-hidden="true"></span>
 	</span>
diff --git a/web/src/lib/components/ui/User.svelte b/web/src/lib/components/ui/User.svelte
index e89b17b1..b75ae03d 100644
--- a/web/src/lib/components/ui/User.svelte
+++ b/web/src/lib/components/ui/User.svelte
@@ -12,23 +12,23 @@
 			size: {
 				header: {
 					root: "gap-2",
-					avatar: "size-[26px]"
+					avatar: "size-6.5"
 				},
 				large: {
 					root: "gap-1.5",
-					avatar: "size-[26px]"
+					avatar: "size-6.5"
 				},
 				regular: {
 					root: "gap-1",
-					avatar: "size-[21px]"
+					avatar: "size-5.25"
 				},
 				small: {
 					root: "gap-1",
-					avatar: "size-[17px]"
+					avatar: "size-4.25"
 				},
 				mini: {
 					root: "gap-1",
-					avatar: "size-[13px]"
+					avatar: "size-3.25"
 				}
 			}
 		},
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index aa892657..7b41aa93 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -62,18 +62,18 @@
 				inputmode="url"
 				required
 				placeholder="akshay.tngl.sh"
-				class="w-full rounded border border-border-default bg-background-default p-3 typography-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
+				class="w-full rounded-sm border border-border-default bg-background-default p-3 typography-paragraph-large text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
 			/>
 			<p class="mt-1 text-sm text-foreground-subtle">
 				Use your <span class="text-foreground-default">AT Protocol</span> handle to log in. If
 				you're unsure, this is likely your Tangled
 				<code
-					class="rounded bg-background-inset px-1 font-mono typography-monospace-small text-foreground-default"
+					class="rounded-sm bg-background-inset px-1 font-mono typography-monospace-small text-foreground-default"
 					>(.tngl.sh)</code
 				>
 				or Bluesky
 				<code
-					class="rounded bg-background-inset px-1 font-mono typography-monospace-small text-foreground-default"
+					class="rounded-sm bg-background-inset px-1 font-mono typography-monospace-small text-foreground-default"
 					>(.bsky.social)</code
 				>
 				account.
@@ -102,7 +102,7 @@
 
 	{#if auth.error}
 		<div
-			class="my-2 flex gap-2 rounded border border-border-danger bg-background-danger-subtle px-3 py-2 text-foreground-danger shadow-xs"
+			class="my-2 flex gap-2 rounded-sm border border-border-danger bg-background-danger-subtle px-3 py-2 text-foreground-danger shadow-xs"
 		>
 			<span class="py-1" aria-hidden="true"><CircleAlert class="size-4" /></span>
 			<div>
diff --git a/web/src/routes/repo/new/+page.svelte b/web/src/routes/repo/new/+page.svelte
index f81fd4dc..30338445 100644
--- a/web/src/routes/repo/new/+page.svelte
+++ b/web/src/routes/repo/new/+page.svelte
@@ -30,10 +30,10 @@
 		</p>
 	</div>
 
-	<div class="rounded border border-border-default bg-background-default p-6">
+	<div class="rounded-sm border border-border-default bg-background-default p-6">
 		<form>
 			<div class="relative flex gap-4 border-l border-border-default pl-6">
-				<div class="absolute -top-0 -left-3">
+				<div class="absolute top-0 -left-3">
 					<div
 						class="mt-1 flex size-6 items-center justify-center rounded-full bg-background-inset text-sm font-medium text-foreground-muted"
 					>
@@ -52,7 +52,7 @@
 							</label>
 							<div class="flex w-full flex-col gap-2 md:flex-row md:items-center md:gap-0">
 								<div
-									class="hidden shrink-0 items-center gap-1 px-2 py-2 text-sm text-foreground-muted md:flex md:rounded-l md:border md:border-r-0 md:border-border-default md:bg-background-inset"
+									class="hidden shrink-0 items-center gap-1 p-2 text-sm text-foreground-muted md:flex md:rounded-l md:border md:border-r-0 md:border-border-default md:bg-background-inset"
 								>
 									<Avatar did={user?.did} handle={user?.handle} size="size-5" tiny />
 									<span>{user?.handle ?? "…"}</span>
@@ -64,7 +64,7 @@
 									placeholder="repository-name"
 									bind:value={repoName}
 									required
-									class="flex-1 rounded border border-border-default bg-background-default px-2 py-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none md:rounded-l-none md:rounded-r"
+									class="flex-1 rounded-sm border border-border-default bg-background-default p-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none md:rounded-l-none md:rounded-r"
 								/>
 							</div>
 							<p class="mt-1 text-sm text-foreground-subtle">
@@ -84,7 +84,7 @@
 								placeholder="A brief description of your project..."
 								maxlength={140}
 								bind:value={description}
-								class="w-full rounded border border-border-default bg-background-default px-2 py-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
+								class="w-full rounded-sm border border-border-default bg-background-default p-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
 							/>
 							<p class="mt-1 text-sm text-foreground-subtle">
 								Optional. A short description to help others understand what your project does (max
@@ -96,7 +96,7 @@
 			</div>
 
 			<div class="relative flex gap-4 border-l border-border-default pl-6">
-				<div class="absolute -top-0 -left-3">
+				<div class="absolute top-0 -left-3">
 					<div
 						class="mt-1 flex size-6 items-center justify-center rounded-full bg-background-inset text-sm font-medium text-foreground-muted"
 					>
@@ -121,7 +121,7 @@
 								type="text"
 								bind:value={defaultBranch}
 								required
-								class="w-full rounded border border-border-default bg-background-default px-2 py-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
+								class="w-full rounded-sm border border-border-default bg-background-default p-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
 							/>
 							<p class="mt-1 text-sm text-foreground-subtle">
 								The primary branch where development happens. Common choices are "main" or "master".
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index 5d248733..02c10c16 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -34,7 +34,7 @@
 <!-- the panel runs edge to edge on a phone, so the page gutters and the generous
      desktop breathing room only kick in from md up -->
 <div class="flex w-full flex-col items-center md:px-4 md:pt-16 md:pb-32">
-	<div class="flex w-full max-w-[1200px] flex-col">
+	<div class="flex w-full max-w-300 flex-col">
 		<SettingsPanel {items} {active}>
 			{@render children()}
 		</SettingsPanel>
diff --git a/web/src/routes/strings/new/+page.svelte b/web/src/routes/strings/new/+page.svelte
index 46c3a033..cc1f0690 100644
--- a/web/src/routes/strings/new/+page.svelte
+++ b/web/src/routes/strings/new/+page.svelte
@@ -16,7 +16,7 @@
 </svelte:head>
 
 <div class="mx-auto w-full max-w-screen-lg px-4 py-12">
-	<div class="px-2 py-2">
+	<div class="p-2">
 		<h1 class="typography-heading-4 font-bold text-foreground-default">Create a new string</h1>
 		<p class="text-sm text-foreground-subtle">Store and share code snippets with ease.</p>
 	</div>
-- 
2.51.2