From 8d3c7303cf8759d9921d9b0d7eeaab8f6b67ced0 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Sat, 19 Sep 2026 03:05:31 +0200
Subject: [PATCH] web/profile: rescale profile and organization views

Signed-off-by: eti <eti@eti.tf>
---
 .../lib/components/profile/AvatarList.svelte  |  4 +--
 .../profile/FollowCard.stories.svelte         |  2 --
 .../lib/components/profile/FollowCard.svelte  |  4 +--
 .../profile/FollowCardContent.svelte          | 14 +++++-----
 .../profile/FollowerFollowing.svelte          |  4 +--
 .../components/profile/NetworkVouches.svelte  | 24 ++++++++++++-----
 .../lib/components/profile/PagedList.svelte   |  8 +++---
 .../profile/PinnedRepositories.svelte         |  8 +++---
 .../profile/ProfileActivityChart.svelte       | 10 +++----
 .../components/profile/ProfileEditForm.svelte | 16 ++++++------
 .../components/profile/ProfilePopover.svelte  | 18 ++++++-------
 .../profile/ProfileSocialLinks.svelte         | 16 +++++++-----
 .../profile/StringCard.stories.svelte         |  3 ---
 .../lib/components/profile/StringCard.svelte  |  4 +--
 .../profile/StringCardContent.svelte          | 10 ++++---
 .../profile/UserProfileChrome.svelte          | 24 ++++++++---------
 .../profile/VouchButton.stories.svelte        |  4 +--
 .../lib/components/profile/VouchButton.svelte | 16 ++++++------
 .../lib/components/profile/VouchCard.svelte   |  6 ++---
 .../organization/OrganizationChrome.svelte    | 26 +++++++++----------
 .../OrganizationMembersTab.svelte             |  6 ++---
 .../OrganizationOverviewTab.svelte            | 14 +++++-----
 .../profile/tabs/OverviewTab.svelte           |  2 +-
 .../components/profile/tabs/PeopleTab.svelte  |  2 +-
 .../profile/tabs/RepoListTab.svelte           | 11 ++++----
 .../components/profile/tabs/StarredTab.svelte |  2 +-
 .../components/profile/tabs/VouchTab.svelte   |  2 +-
 27 files changed, 133 insertions(+), 127 deletions(-)

diff --git a/web/src/lib/components/profile/AvatarList.svelte b/web/src/lib/components/profile/AvatarList.svelte
index 0b42fbc6c..cf3bf39d3 100644
--- a/web/src/lib/components/profile/AvatarList.svelte
+++ b/web/src/lib/components/profile/AvatarList.svelte
@@ -34,7 +34,7 @@
 	</a>
 {/snippet}
 
-<div class="inline-flex items-center -space-x-3 {className ?? ''}">
+<div class="inline-flex items-center -space-x-sm {className ?? ''}">
 	{#each shown as person, i (person.did)}
 		<!-- the z-index lives on the flex child so earlier avatars stack on top -->
 		<div class="relative inline-block {Z[i]}">
@@ -49,6 +49,6 @@
 	{/each}
 
 	{#if overflow > 0}
-		<span class="pl-4 text-sm">+{overflow}</span>
+		<span class="pl-md typography-paragraph-regular">+{overflow}</span>
 	{/if}
 </div>
diff --git a/web/src/lib/components/profile/FollowCard.stories.svelte b/web/src/lib/components/profile/FollowCard.stories.svelte
index 8bc825b02..67710c821 100644
--- a/web/src/lib/components/profile/FollowCard.stories.svelte
+++ b/web/src/lib/components/profile/FollowCard.stories.svelte
@@ -24,13 +24,11 @@
 		},
 		argTypes: {
 			border: { control: "boolean" },
-			shadow: { control: "boolean" },
 			background: { control: "boolean" }
 		},
 		args: {
 			person,
 			border: false,
-			shadow: false,
 			background: false
 		}
 	});
diff --git a/web/src/lib/components/profile/FollowCard.svelte b/web/src/lib/components/profile/FollowCard.svelte
index 4d6e7078d..afc24828f 100644
--- a/web/src/lib/components/profile/FollowCard.svelte
+++ b/web/src/lib/components/profile/FollowCard.svelte
@@ -6,7 +6,6 @@
 	let {
 		person,
 		border = false,
-		shadow = false,
 		background = false,
 		followButton = true,
 		onFollow
@@ -14,12 +13,11 @@
 		person: PersonData;
 		onFollow?: (change: FollowChange) => void;
 		border?: CardVariants["border"];
-		shadow?: CardVariants["shadow"];
 		background?: CardVariants["background"];
 		followButton?: boolean;
 	} = $props();
 </script>
 
-<Card {border} {shadow} {background} padding={border || background ? "regular" : "none"}>
+<Card {border} {background} padding={border || background ? "regular" : "none"}>
 	<FollowCardContent {person} {followButton} {onFollow} />
 </Card>
diff --git a/web/src/lib/components/profile/FollowCardContent.svelte b/web/src/lib/components/profile/FollowCardContent.svelte
index 06dfafbcf..7c72c3927 100644
--- a/web/src/lib/components/profile/FollowCardContent.svelte
+++ b/web/src/lib/components/profile/FollowCardContent.svelte
@@ -29,17 +29,17 @@
 	};
 </script>
 
-<div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-	<div class="flex min-w-0 flex-1 items-center gap-4">
+<div class="flex flex-col gap-md md:flex-row md:items-start md:justify-between">
+	<div class="flex min-w-0 flex-1 items-center gap-md">
 		<div class="flex size-24 shrink-0 items-center justify-center">
 			<Avatar did={person.did} handle={person.handle} size="full" />
 		</div>
 
 		<div class="flex min-w-0 flex-1 flex-col justify-around">
-			<div class="flex max-w-full items-center gap-2">
+			<div class="flex max-w-full items-center gap-xs">
 				<a
 					href={resolve(`/${person.handle}` as "/")}
-					class="min-w-0 truncate font-bold text-foreground-default hover:underline"
+					class="min-w-0 truncate font-semibold text-foreground-default hover:underline"
 				>
 					{person.handle}
 				</a>
@@ -50,12 +50,12 @@
 				{/if}
 			</div>
 			{#if person.description}
-				<p class="pb-2 wrap-break-word md:pb-2">
+				<p class="pb-xs wrap-break-word md:pb-xs">
 					{person.description}
 				</p>
 			{/if}
-			<div class="my-2 flex max-w-full items-center gap-2 truncate text-foreground-subtle">
-				<Users class="size-4 shrink-0" />
+			<div class="my-xs flex max-w-full items-center gap-xs truncate text-foreground-subtle">
+				<Users class="size-3.5 shrink-0" />
 				<span
 					><a
 						href={resolve(`/${person.handle}?tab=followers` as "/")}
diff --git a/web/src/lib/components/profile/FollowerFollowing.svelte b/web/src/lib/components/profile/FollowerFollowing.svelte
index 2e771c683..16f5841ca 100644
--- a/web/src/lib/components/profile/FollowerFollowing.svelte
+++ b/web/src/lib/components/profile/FollowerFollowing.svelte
@@ -15,9 +15,9 @@
 </script>
 
 <div
-	class="my-2 flex max-w-full items-center gap-2 truncate typography-paragraph-small {className}"
+	class="my-xs flex max-w-full items-center gap-xs truncate typography-paragraph-small {className}"
 >
-	<span class="shrink-0"><Users class="size-4" aria-hidden="true" /></span>
+	<span class="shrink-0"><Users class="size-3.5" aria-hidden="true" /></span>
 	<span>
 		<a href={resolve(`/${handle}?tab=followers` as "/")} class="no-underline hover:underline"
 			>{formatCount(followers)} followers</a
diff --git a/web/src/lib/components/profile/NetworkVouches.svelte b/web/src/lib/components/profile/NetworkVouches.svelte
index a67fb5799..9fb618740 100644
--- a/web/src/lib/components/profile/NetworkVouches.svelte
+++ b/web/src/lib/components/profile/NetworkVouches.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
+	import Shield from "$icon/shield";
 	import AvatarList from "$lib/components/profile/AvatarList.svelte";
 	import type { NetworkVouch } from "$lib/components/profile/types";
+	import Link from "$lib/components/ui/Link.svelte";
 
 	interface Props {
 		// handle of the profile these vouches are about
@@ -36,21 +38,29 @@
 	<div>
 		{#if vouchers.length > 0}
 			<div
-				class="flex items-center justify-between gap-3 bg-green-100 p-2 text-green-800 dark:bg-green-900 dark:text-green-200 {vouchBorder}"
+				class="flex items-center justify-between gap-sm bg-green-100 p-xs text-green-800 dark:bg-green-900 dark:text-green-200 {vouchBorder}"
 			>
-				<a {href} class="text-sm text-green-800 hover:no-underline dark:text-green-200">
-					Vouched for by {vouchers.length}
-					{plural(vouchers.length)}
-				</a>
+				<span
+					class="inline-flex gap-2xs typography-paragraph-small text-green-800 dark:text-green-200"
+				>
+					<Shield />
+					<Link class="text-green-800 dark:text-green-200" {href}>
+						Vouched for by {vouchers.length}
+						{plural(vouchers.length)}
+					</Link></span
+				>
 				<AvatarList people={vouchers} {popover} />
 			</div>
 		{/if}
 
 		{#if denouncers.length > 0}
 			<div
-				class="flex items-center justify-between gap-3 bg-red-100 p-2 text-red-800 dark:bg-red-900 dark:text-red-200 {denounceBorder}"
+				class="flex items-center justify-between gap-sm bg-red-100 p-xs text-red-800 dark:bg-red-900 dark:text-red-200 {denounceBorder}"
 			>
-				<a {href} class="text-sm text-red-800 hover:no-underline dark:text-red-200">
+				<a
+					{href}
+					class="typography-paragraph-regular text-red-800 hover:no-underline dark:text-red-200"
+				>
 					Denounced by {denouncers.length}
 					{plural(denouncers.length)}
 				</a>
diff --git a/web/src/lib/components/profile/PagedList.svelte b/web/src/lib/components/profile/PagedList.svelte
index 904fedf39..be69682fb 100644
--- a/web/src/lib/components/profile/PagedList.svelte
+++ b/web/src/lib/components/profile/PagedList.svelte
@@ -28,7 +28,7 @@
 		total,
 		title,
 		emptyMessage,
-		listClass = "flex flex-col gap-3",
+		listClass = "flex flex-col gap-sm",
 		key,
 		row,
 		header
@@ -51,19 +51,19 @@
 	{/if}
 	{#snippet footer()}
 		{#if pages > 1}
-			<div class="mt-4 flex justify-center">
+			<div class="mt-md flex justify-center">
 				<Pagination
 					page={pager.state.page}
 					total={pages}
 					labels
 					disabled={loading}
 					onchange={pager.select}
-					class="gap-5"
+					class="gap-lg"
 				/>
 			</div>
 		{/if}
 		{#if pager.state.kind === "failed"}
-			<Error label="couldn't load that page. try again." class="mt-2" />
+			<Error label="couldn't load that page. try again." class="mt-xs" />
 		{/if}
 	{/snippet}
 </Section>
diff --git a/web/src/lib/components/profile/PinnedRepositories.svelte b/web/src/lib/components/profile/PinnedRepositories.svelte
index 9e786ac7c..e08591825 100644
--- a/web/src/lib/components/profile/PinnedRepositories.svelte
+++ b/web/src/lib/components/profile/PinnedRepositories.svelte
@@ -16,15 +16,15 @@
 	let { repositories, handle, href, showOwner = false }: Props = $props();
 </script>
 
-<section class="space-y-2">
-	<h2 class="px-2 typography-paragraph-regular font-medium">Pinned repositories</h2>
+<section class="space-y-xs">
+	<h2 class="px-xs typography-paragraph-regular font-medium">Pinned repositories</h2>
 	{#if repositories.length > 0}
-		<div class="grid gap-2 md:grid-cols-2">
+		<div class="grid gap-xs md:grid-cols-2">
 			{#each repositories.slice(0, 4) as repo (repoKey(repo))}
 				<RepoCard {repo} starButton={false} {showOwner} />
 			{/each}
 		</div>
-		<div class="flex justify-end pt-2">
+		<div class="flex justify-end pt-xs">
 			<Button
 				variant="ghost"
 				href={resolve((href ?? `/${handle}?tab=repos`) as "/")}
diff --git a/web/src/lib/components/profile/ProfileActivityChart.svelte b/web/src/lib/components/profile/ProfileActivityChart.svelte
index c895b1668..0697f1dc7 100644
--- a/web/src/lib/components/profile/ProfileActivityChart.svelte
+++ b/web/src/lib/components/profile/ProfileActivityChart.svelte
@@ -94,8 +94,8 @@
 	};
 </script>
 
-<section class="space-y-2">
-	<h2 class="px-2 typography-paragraph-regular font-medium">Activity</h2>
+<section class="space-y-xs">
+	<h2 class="px-xs typography-paragraph-regular font-medium">Activity</h2>
 	{#if activity.months.length === 0}
 		<EmptyState message="This user does not have any activity yet." />
 	{:else}
@@ -136,7 +136,7 @@
 						style={`left:${column.left}px;width:${column.width}px`}
 					>
 						<span
-							class="absolute bottom-2 left-2 rounded-sm px-2 py-0.5 typography-paragraph-regular {monthIndex ===
+							class="absolute bottom-2 left-2 rounded-sm px-xs py-3xs typography-paragraph-regular {monthIndex ===
 							5
 								? 'border border-border-subtle bg-background-default text-foreground-default'
 								: 'text-foreground-muted'}"
@@ -153,7 +153,7 @@
 						{@const rising = previous === null || point.value >= previous.value}
 						{@const current = monthIndex === 5}
 						<div
-							class="group/stat absolute z-10 flex h-7 -translate-y-1/2 items-center gap-2 rounded-sm px-1 py-0.5 typography-paragraph-regular transition-colors duration-150 ease-out hover:z-20 {current
+							class="group/stat absolute z-10 flex h-7 -translate-y-1/2 items-center gap-xs rounded-sm px-2xs py-3xs typography-paragraph-regular transition-colors duration-150 ease-out hover:z-20 {current
 								? 'bg-background-subtle text-foreground-default'
 								: 'bg-background-default text-foreground-muted hover:text-foreground-default'}"
 							style={`left:${point.x}px;top:${point.y}px`}
@@ -190,7 +190,7 @@
 			</div>
 		</div>
 		{#if activity.truncated}
-			<p class="px-2 typography-paragraph-small text-foreground-subtle">
+			<p class="px-xs typography-paragraph-small text-foreground-subtle">
 				Some older activity is not shown.
 			</p>
 		{/if}
diff --git a/web/src/lib/components/profile/ProfileEditForm.svelte b/web/src/lib/components/profile/ProfileEditForm.svelte
index c711554db..a905bfdc6 100644
--- a/web/src/lib/components/profile/ProfileEditForm.svelte
+++ b/web/src/lib/components/profile/ProfileEditForm.svelte
@@ -58,7 +58,7 @@
 	});
 </script>
 
-<form class="my-2 flex max-w-full flex-col gap-4 typography-paragraph-small" onsubmit={save.run}>
+<form class="my-xs flex max-w-full flex-col gap-md typography-paragraph-small" onsubmit={save.run}>
 	<Field label="Bio" labelCase="normal">
 		{#snippet children({ id })}
 			<Textarea {id} rows={3} resizeable placeholder="Write a bio" bind:value={description} />
@@ -77,9 +77,9 @@
 		{/snippet}
 	</Field>
 
-	<div class="flex flex-col gap-1">
+	<div class="flex flex-col gap-2xs">
 		<span>Social links</span>
-		<Checkbox class="py-1" bind:checked={bluesky}>Link to Bluesky account</Checkbox>
+		<Checkbox class="py-2xs" bind:checked={bluesky}>Link to Bluesky account</Checkbox>
 		{#each links as link, index (index)}
 			<Input
 				iconLeft={Link}
@@ -93,25 +93,25 @@
 		<p class="typography-paragraph-small text-foreground-danger">{save.error}</p>
 	{/if}
 
-	<div class="flex items-center justify-between gap-2">
+	<div class="flex items-center justify-between gap-xs">
 		<Button
 			insetShadow={true}
 			variant="default"
-			class="w-full gap-2"
+			class="w-full gap-xs"
 			disabled={save.loading}
 			onclick={onCancel}
+			icon={X}
 		>
-			<X class="size-4" aria-hidden="true" />
 			Cancel
 		</Button>
 		<Button
 			insetShadow={true}
 			type="submit"
 			variant="default"
-			class="w-full gap-2"
+			class="w-full gap-xs"
 			loading={save.loading}
+			icon={Check}
 		>
-			<Check class="size-4" aria-hidden="true" />
 			Save
 		</Button>
 	</div>
diff --git a/web/src/lib/components/profile/ProfilePopover.svelte b/web/src/lib/components/profile/ProfilePopover.svelte
index 6eaa70ebd..2e80b3b2b 100644
--- a/web/src/lib/components/profile/ProfilePopover.svelte
+++ b/web/src/lib/components/profile/ProfilePopover.svelte
@@ -96,12 +96,12 @@
 	};
 </script>
 
-<Hovercard {disabled} {openDelay} class={className} cardClass="w-80 p-3" onOpen={load}>
+<Hovercard {disabled} {openDelay} class={className} cardClass="w-80 p-sm" onOpen={load}>
 	{#snippet content()}
 		{#if status === "loaded" && card}
 			{@const cardHandle = card.handle}
-			<div class="flex flex-col gap-2">
-				<div class="flex items-center gap-2">
+			<div class="flex flex-col gap-xs">
+				<div class="flex items-center gap-xs">
 					<a href={resolve(`/${cardHandle}` as "/")} class="block size-12 shrink-0">
 						<VouchAvatar did={card.did} handle={cardHandle} size="full" />
 					</a>
@@ -123,7 +123,7 @@
 
 				{#if card.description}
 					<p
-						class="mt-0.5 line-clamp-3 px-0.5 typography-paragraph-small wrap-break-word"
+						class="mt-3xs line-clamp-3 px-3xs typography-paragraph-small wrap-break-word"
 					>
 						{card.description}
 					</p>
@@ -133,11 +133,11 @@
 					handle={cardHandle}
 					followers={card.followers}
 					following={card.following}
-					class="my-1! px-1"
+					class="my-2xs! px-2xs"
 				/>
 
 				{#if !card.isSelf}
-					<div class="flex items-start gap-2">
+					<div class="flex items-start gap-xs">
 						<div class="flex-1">
 							<FollowButton
 								profileDid={card.did}
@@ -168,12 +168,12 @@
 				{/if}
 			</div>
 		{:else if status === "error"}
-			<p class="py-4 text-center typography-paragraph-small text-foreground-muted">
+			<p class="py-md text-center typography-paragraph-small text-foreground-muted">
 				Couldn't load profile.
 			</p>
 		{:else}
-			<div class="flex animate-pulse flex-col gap-3" aria-label="Loading profile">
-				<div class="flex items-center gap-2">
+			<div class="flex animate-pulse flex-col gap-sm" aria-label="Loading profile">
+				<div class="flex items-center gap-xs">
 					<div class="size-12 rounded-full bg-background-subtle"></div>
 					<div class="h-4 w-32 rounded-sm bg-background-subtle"></div>
 				</div>
diff --git a/web/src/lib/components/profile/ProfileSocialLinks.svelte b/web/src/lib/components/profile/ProfileSocialLinks.svelte
index 1a0898483..e8a178515 100644
--- a/web/src/lib/components/profile/ProfileSocialLinks.svelte
+++ b/web/src/lib/components/profile/ProfileSocialLinks.svelte
@@ -37,9 +37,11 @@
 	};
 </script>
 
-<div class={["flex max-w-full flex-wrap items-center gap-4 typography-paragraph-small", className]}>
-	<div class="flex items-center gap-2 px-2.5 py-1">
-		<UsersRound class="size-4 shrink-0" aria-hidden="true" />
+<div
+	class={["flex max-w-full flex-wrap items-center gap-2xs typography-paragraph-small", className]}
+>
+	<div class="flex items-center gap-xs px-xs py-2xs">
+		<UsersRound class="size-3.5 shrink-0" aria-hidden="true" />
 		<Link
 			href={resolve((followersHref ?? `/${identity.handle}?tab=followers`) as "/")}
 			variant="inherit"
@@ -62,11 +64,11 @@
 	{#if profile.bluesky}
 		<a
 			href={`https://bsky.app/profile/${identity.did}`}
-			class={link({ variant: "inherit", size: "small", class: "px-2.5 py-1" })}
+			class={link({ variant: "inherit", size: "small", class: "px-xs py-2xs" })}
 			target="_blank"
 			rel="external noopener noreferrer"
 		>
-			<Bluesky class="size-4" aria-hidden="true" />
+			<Bluesky class="size-3.5" aria-hidden="true" />
 			{identity.handle}
 		</a>
 	{/if}
@@ -74,11 +76,11 @@
 	{#each links as profileLink (profileLink)}
 		<a
 			href={profileLink}
-			class={link({ variant: "inherit", size: "small", class: "px-2.5 py-1" })}
+			class={link({ variant: "inherit", size: "small", class: "px-xs py-2xs" })}
 			target="_blank"
 			rel="external nofollow me noopener noreferrer"
 		>
-			<LinkIcon class="size-4 shrink-0" aria-hidden="true" />
+			<LinkIcon class="size-3.5 shrink-0" aria-hidden="true" />
 			<span class="max-w-48 truncate">{linkLabel(profileLink)}</span>
 		</a>
 	{/each}
diff --git a/web/src/lib/components/profile/StringCard.stories.svelte b/web/src/lib/components/profile/StringCard.stories.svelte
index 885e4f64c..db17efff9 100644
--- a/web/src/lib/components/profile/StringCard.stories.svelte
+++ b/web/src/lib/components/profile/StringCard.stories.svelte
@@ -18,18 +18,15 @@
 		tags: ["autodocs"],
 		argTypes: {
 			border: { control: "boolean" },
-			shadow: { control: "boolean" },
 			background: { control: "boolean" }
 		},
 		args: {
 			entry,
 			border: true,
-			shadow: false,
 			background: true
 		}
 	});
 </script>
 
 <Story name="Default" />
-<Story name="Elevated" args={{ shadow: true }} />
 <Story name="Plain" args={{ border: false, background: false }} />
diff --git a/web/src/lib/components/profile/StringCard.svelte b/web/src/lib/components/profile/StringCard.svelte
index 417fd3d58..9bd04c535 100644
--- a/web/src/lib/components/profile/StringCard.svelte
+++ b/web/src/lib/components/profile/StringCard.svelte
@@ -6,16 +6,14 @@
 	let {
 		entry,
 		border = true,
-		shadow = false,
 		background = true
 	}: {
 		entry: StringCardData;
 		border?: CardVariants["border"];
-		shadow?: CardVariants["shadow"];
 		background?: CardVariants["background"];
 	} = $props();
 </script>
 
-<Card {border} {shadow} {background}>
+<Card {border} {background}>
 	<StringCardContent {entry} />
 </Card>
diff --git a/web/src/lib/components/profile/StringCardContent.svelte b/web/src/lib/components/profile/StringCardContent.svelte
index dab6f6992..03c1b25b3 100644
--- a/web/src/lib/components/profile/StringCardContent.svelte
+++ b/web/src/lib/components/profile/StringCardContent.svelte
@@ -7,10 +7,10 @@
 	let { entry }: { entry: StringCardData } = $props();
 </script>
 
-<div class="flex min-h-24 flex-col justify-between gap-1">
-	<div class="flex flex-1 flex-col gap-2">
+<div class="flex min-h-24 flex-col justify-between gap-2xs">
+	<div class="flex flex-1 flex-col gap-xs">
 		<div
-			class="flex min-w-0 items-center justify-between pr-2 font-medium text-foreground-default"
+			class="flex min-w-0 items-center justify-between pr-xs font-medium text-foreground-default"
 		>
 			<a
 				href={stringHref(entry.ownerHandle, entry.rkey)}
@@ -27,7 +27,9 @@
 		{/if}
 	</div>
 
-	<div class="flex flex-wrap items-center gap-1 typography-monospace-small text-foreground-muted">
+	<div
+		class="flex flex-wrap items-center gap-2xs typography-monospace-small text-foreground-muted"
+	>
 		<span class="shrink-0">{entry.lines} line{entry.lines === 1 ? "" : "s"}</span>
 		<Separator variant="dot" />
 		<span>{compactRelativeTime(entry.createdAt)}</span>
diff --git a/web/src/lib/components/profile/UserProfileChrome.svelte b/web/src/lib/components/profile/UserProfileChrome.svelte
index 26264122f..2280ffc8e 100644
--- a/web/src/lib/components/profile/UserProfileChrome.svelte
+++ b/web/src/lib/components/profile/UserProfileChrome.svelte
@@ -13,7 +13,7 @@
 	import type { DirectVouch, NetworkVouch, ProfileCounts } from "$lib/components/profile/types";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 
 	interface Props {
 		identity: { did: string; handle: string };
@@ -45,7 +45,7 @@
 </script>
 
 <ProfileTabs handle={identity.handle} active={activeTab} {counts} />
-<TabPanel as="div" padded={false} class="overflow-hidden">
+<Card padding="none" class="overflow-hidden">
 	{#if activeTab === "overview"}
 		<section class="relative text-foreground-default">
 			<div
@@ -60,12 +60,12 @@
 
 			<h1
 				title={identity.handle}
-				class="max-w-full truncate px-4 pt-19.75 typography-heading-4 sm:absolute sm:top-10 sm:right-4 sm:left-43 sm:w-fit sm:px-0 sm:pt-0"
+				class="max-w-full truncate px-md pt-19.75 typography-heading-4 sm:absolute sm:top-10 sm:right-4 sm:left-43 sm:w-fit sm:px-none sm:pt-none"
 			>
 				{identity.handle}
 				{#if shown?.pronouns}
 					<span
-						class="ml-2 typography-paragraph-regular font-normal text-foreground-muted"
+						class="ml-xs typography-paragraph-regular font-normal text-foreground-muted"
 					>
 						{shown.pronouns}
 					</span>
@@ -73,7 +73,7 @@
 			</h1>
 
 			<div
-				class="flex min-h-16 flex-col gap-4 px-4 pt-2 sm:ml-39 sm:flex-row sm:items-center sm:justify-between sm:gap-6 sm:py-3"
+				class="flex min-h-16 flex-col gap-md px-md pt-xs sm:ml-39 sm:flex-row sm:items-center sm:justify-between sm:gap-xl sm:py-sm"
 			>
 				{#if editing}
 					<div class="w-full">
@@ -98,15 +98,15 @@
 							profile={shown}
 							followers={counts.followers}
 							following={counts.following}
-							class="max-sm:order-3 max-sm:-ml-1.5 max-sm:flex-col max-sm:items-start max-sm:gap-2"
+							class="max-sm:order-3 max-sm:-ml-1.5 max-sm:flex-col max-sm:items-start max-sm:gap-xs"
 						/>
 					{/if}
 				{/if}
 
 				<div
-					class="flex items-center justify-between gap-2 max-sm:order-2 sm:absolute sm:top-9.25 sm:right-4 sm:justify-end"
+					class="flex items-center justify-between gap-xs max-sm:order-2 sm:absolute sm:top-9.25 sm:right-4 sm:justify-end"
 				>
-					<div class="flex items-center gap-2">
+					<div class="flex items-center gap-xs">
 						{#if isSelf}
 							<Button variant="default" icon={Pencil} onclick={() => (editing = true)}
 								>Edit</Button
@@ -134,13 +134,13 @@
 			</div>
 
 			{#if networkVouches.length > 0}
-				<div class="p-4 sm:ml-39 sm:pt-0">
+				<div class="p-md sm:ml-39 sm:pt-none">
 					<NetworkVouches subjectHandle={identity.handle} vouches={networkVouches} />
 				</div>
 			{/if}
 		</section>
-		<div class="p-4">{@render content()}</div>
+		<div class="p-md">{@render content()}</div>
 	{:else}
-		<div class="p-6">{@render content()}</div>
+		<div class="p-md">{@render content()}</div>
 	{/if}
-</TabPanel>
+</Card>
diff --git a/web/src/lib/components/profile/VouchButton.stories.svelte b/web/src/lib/components/profile/VouchButton.stories.svelte
index ae5ae0fab..6dcb16845 100644
--- a/web/src/lib/components/profile/VouchButton.stories.svelte
+++ b/web/src/lib/components/profile/VouchButton.stories.svelte
@@ -106,9 +106,9 @@
 	 vouch states. tweak the `bordered`/`insetShadow` controls to compare. -->
 <Story name="Appearance variants" parameters={{ auth: true }}>
 	{#snippet template(args)}
-		<div class="grid grid-cols-2 gap-4">
+		<div class="grid grid-cols-2 gap-md">
 			{#each [{ label: "Bordered", bordered: true, insetShadow: true }, { label: "Borderless", bordered: false, insetShadow: true }] as look (look.label)}
-				<div class="space-y-3">
+				<div class="space-y-sm">
 					<p class="typography-paragraph-small text-foreground-subtle">{look.label}</p>
 					<VouchButton
 						{...args}
diff --git a/web/src/lib/components/profile/VouchButton.svelte b/web/src/lib/components/profile/VouchButton.svelte
index 24b484d5a..9604b9143 100644
--- a/web/src/lib/components/profile/VouchButton.svelte
+++ b/web/src/lib/components/profile/VouchButton.svelte
@@ -2,7 +2,7 @@
 	import { tv } from "tailwind-variants";
 
 	export const choiceButton = tv({
-		base: "flex flex-col items-center gap-1 rounded-sm border p-2 transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+		base: "flex flex-col items-center gap-2xs rounded-sm border p-xs transition-colors disabled:cursor-not-allowed disabled:opacity-60",
 		variants: {
 			active: {
 				true: "",
@@ -174,7 +174,7 @@
 {#if !isSelf}
 	<Button
 		variant={trigger.variant}
-		class="w-full gap-2 {trigger.colorClass}"
+		class="w-full gap-xs {trigger.colorClass}"
 		icon={trigger.icon}
 		{insetShadow}
 		href={signedIn ? undefined : loginHref}
@@ -195,21 +195,21 @@
 					href="https://blog.tangled.org/vouching"
 					target="_blank"
 					rel="external noopener noreferrer"
-					class="inline-flex items-center gap-1 hover:underline"
+					class="inline-flex items-center gap-2xs hover:underline"
 				>
-					Read more <ArrowRight class="size-3" aria-hidden="true" />
+					Read more <ArrowRight class="size-3.5" aria-hidden="true" />
 				</a>
 			{/if}
 		</p>
 
 		{#if networkVouches.length > 0}
-			<div class="space-y-1">
+			<div class="space-y-2xs">
 				<p class="typography-paragraph-small font-semibold">From your network</p>
 				<NetworkVouches subjectHandle={label} vouches={networkVouches} popover={false} />
 			</div>
 		{/if}
 
-		<div class="grid grid-cols-3 gap-2">
+		<div class="grid grid-cols-3 gap-xs">
 			{#each choices as option (option.value)}
 				{@const Icon = option.icon}
 				{@const active = choice === option.value}
@@ -243,7 +243,7 @@
 		{#snippet footer()}
 			<Button
 				variant="default"
-				class="flex-1 gap-2"
+				class="flex-1 gap-xs"
 				icon={X}
 				disabled={save.loading}
 				onclick={() => (open = false)}
@@ -252,7 +252,7 @@
 			</Button>
 			<Button
 				variant="primary"
-				class="flex-1 gap-2"
+				class="flex-1 gap-xs"
 				icon={Check}
 				loading={save.loading}
 				onclick={() => save.run()}
diff --git a/web/src/lib/components/profile/VouchCard.svelte b/web/src/lib/components/profile/VouchCard.svelte
index 4802b55c6..a5a6be881 100644
--- a/web/src/lib/components/profile/VouchCard.svelte
+++ b/web/src/lib/components/profile/VouchCard.svelte
@@ -16,7 +16,7 @@
 	);
 </script>
 
-<div class="relative z-10 -ml-4 flex items-start gap-3">
+<div class="relative z-10 -ml-md flex items-start gap-sm">
 	<div
 		class={`flex size-8 shrink-0 items-center justify-center rounded-full border border-border-default ${tone.bg}`}
 	>
@@ -27,8 +27,8 @@
 		{/if}
 	</div>
 
-	<div class="mt-1 flex flex-col gap-1">
-		<div class="flex flex-wrap items-center gap-1 text-foreground-default">
+	<div class="mt-2xs flex flex-col gap-2xs">
+		<div class="flex flex-wrap items-center gap-2xs text-foreground-default">
 			{#if outgoing}
 				<span class="font-medium">{profileLabel}</span>
 			{:else}
diff --git a/web/src/lib/components/profile/organization/OrganizationChrome.svelte b/web/src/lib/components/profile/organization/OrganizationChrome.svelte
index cfaf5e419..3e19ea3a4 100644
--- a/web/src/lib/components/profile/organization/OrganizationChrome.svelte
+++ b/web/src/lib/components/profile/organization/OrganizationChrome.svelte
@@ -13,7 +13,7 @@
 	import type { ProfileCounts } from "$lib/components/profile/types";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Separator from "$lib/components/ui/Separator.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 	import User from "$lib/components/ui/User.svelte";
 	import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte";
 
@@ -41,7 +41,7 @@
 </script>
 
 <ProfileTabs handle={identity.handle} active={activeTab} {counts} organization />
-<TabPanel as="div" padded={false} class="overflow-hidden">
+<Card padding="none" class="overflow-hidden">
 	{#if activeTab === "overview"}
 		<section class="relative text-foreground-default">
 			<div
@@ -74,10 +74,10 @@
 			</div>
 
 			<div
-				class="flex flex-col items-center gap-4 px-4 pt-14 pb-8 text-center max-sm:items-start max-sm:gap-8 max-sm:pt-20.75 max-sm:pb-6 max-sm:text-left"
+				class="flex flex-col items-center gap-md px-md pt-14 pb-2xl text-center max-sm:items-start max-sm:gap-2xl max-sm:pt-20.75 max-sm:pb-xl max-sm:text-left"
 			>
-				<div class="flex flex-col items-center gap-4 max-sm:items-start">
-					<h1 class="flex items-center gap-2 typography-heading-4">
+				<div class="flex flex-col items-center gap-md max-sm:items-start">
+					<h1 class="flex items-center gap-xs typography-heading-4">
 						<Warehouse class="size-5 text-foreground-subtle" aria-hidden="true" />
 						{identity.handle}
 					</h1>
@@ -88,7 +88,7 @@
 				</div>
 
 				<div
-					class="flex w-full items-center justify-between gap-2 sm:absolute sm:top-25 sm:right-4 sm:w-auto"
+					class="flex w-full items-center justify-between gap-xs sm:absolute sm:top-25 sm:right-4 sm:w-auto"
 				>
 					<div class="min-w-23">
 						<FollowButton profileDid={identity.did} initialRkey={viewerFollowRkey} />
@@ -97,17 +97,17 @@
 				</div>
 
 				<div
-					class="flex max-w-full flex-wrap items-center justify-center gap-3 typography-paragraph-small max-sm:-ml-1.5 max-sm:w-full max-sm:flex-col max-sm:items-start"
+					class="flex max-w-full flex-wrap items-center justify-center gap-sm typography-paragraph-small max-sm:-ml-1.5 max-sm:w-full max-sm:flex-col max-sm:items-start"
 				>
-					<span class="flex items-center gap-1 px-2.5 py-1">
-						<UserRoundCog class="size-4" aria-hidden="true" />
+					<span class="flex items-center gap-2xs px-2.5 py-2xs">
+						<UserRoundCog class="size-3.5" aria-hidden="true" />
 						<span>Managed by</span>
 						<ProfilePopover did={organizationManager.did}>
 							<User
 								did={organizationManager.did}
 								handle={organizationManager.handle}
 								size="small"
-								class="gap-1"
+								class="gap-2xs"
 								link={true}
 							/>
 						</ProfilePopover>
@@ -117,7 +117,7 @@
 						{profile}
 						followers={counts.followers}
 						{followersHref}
-						class="max-sm:flex-col max-sm:items-start max-sm:gap-3"
+						class="max-sm:flex-col max-sm:items-start max-sm:gap-sm"
 					/>
 				</div>
 			</div>
@@ -126,6 +126,6 @@
 		</section>
 		{@render content()}
 	{:else}
-		<div class="p-6">{@render content()}</div>
+		<div class="p-md">{@render content()}</div>
 	{/if}
-</TabPanel>
+</Card>
diff --git a/web/src/lib/components/profile/organization/OrganizationMembersTab.svelte b/web/src/lib/components/profile/organization/OrganizationMembersTab.svelte
index aad36fd4b..df5648456 100644
--- a/web/src/lib/components/profile/organization/OrganizationMembersTab.svelte
+++ b/web/src/lib/components/profile/organization/OrganizationMembersTab.svelte
@@ -3,9 +3,9 @@
 	import { organizationMembers } from "$lib/components/profile/organization/mock";
 </script>
 
-<section class="space-y-4">
-	<h2 class="px-2 typography-heading-4 font-medium">Members</h2>
-	<div class="grid gap-4 md:grid-cols-2">
+<section class="space-y-md">
+	<h2 class="px-xs typography-heading-4 font-medium">Members</h2>
+	<div class="grid gap-md md:grid-cols-2">
 		{#each organizationMembers as person (person.did)}
 			<FollowCard {person} border background followButton={false} />
 		{/each}
diff --git a/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte b/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte
index f1e50df01..48484826e 100644
--- a/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte
+++ b/web/src/lib/components/profile/organization/OrganizationOverviewTab.svelte
@@ -37,10 +37,10 @@
 	);
 </script>
 
-<div class="grid gap-x-4 gap-y-6 p-4 md:grid-cols-2">
-	<section class="space-y-2">
-		<h2 class="px-2 typography-paragraph-regular font-medium">Languages</h2>
-		<div class="flex flex-wrap gap-2">
+<div class="grid gap-x-md gap-y-xl p-md md:grid-cols-2">
+	<section class="space-y-xs">
+		<h2 class="px-xs typography-paragraph-regular font-medium">Languages</h2>
+		<div class="flex flex-wrap gap-xs">
 			{#each organizationLanguages as language (language)}
 				<Tag size="large">
 					<ColorBall
@@ -53,9 +53,9 @@
 		</div>
 	</section>
 
-	<section class="space-y-2">
-		<h2 class="px-2 typography-paragraph-regular font-medium">Topics</h2>
-		<div class="flex flex-wrap gap-2">
+	<section class="space-y-xs">
+		<h2 class="px-xs typography-paragraph-regular font-medium">Topics</h2>
+		<div class="flex flex-wrap gap-xs">
 			{#each organizationTopics as topic (topic)}
 				<Tag size="large">{topic}</Tag>
 			{/each}
diff --git a/web/src/lib/components/profile/tabs/OverviewTab.svelte b/web/src/lib/components/profile/tabs/OverviewTab.svelte
index 5ea576f6c..49f5404e2 100644
--- a/web/src/lib/components/profile/tabs/OverviewTab.svelte
+++ b/web/src/lib/components/profile/tabs/OverviewTab.svelte
@@ -11,7 +11,7 @@
 	let { pinned, activity, handle }: Props = $props();
 </script>
 
-<div class="space-y-6">
+<div class="space-y-xl">
 	<ProfileActivityChart {activity} />
 	<PinnedRepositories
 		repositories={pinned}
diff --git a/web/src/lib/components/profile/tabs/PeopleTab.svelte b/web/src/lib/components/profile/tabs/PeopleTab.svelte
index 634c31045..e3ce86457 100644
--- a/web/src/lib/components/profile/tabs/PeopleTab.svelte
+++ b/web/src/lib/components/profile/tabs/PeopleTab.svelte
@@ -45,7 +45,7 @@
 	{title}
 	{emptyMessage}
 	rowCapture={profileFollowcardBordered}
-	listClass="flex flex-col gap-8"
+	listClass="flex flex-col gap-sm"
 	key={(person) => person.did}
 >
 	{#snippet row(person)}
diff --git a/web/src/lib/components/profile/tabs/RepoListTab.svelte b/web/src/lib/components/profile/tabs/RepoListTab.svelte
index d87fc51dd..c9da48d13 100644
--- a/web/src/lib/components/profile/tabs/RepoListTab.svelte
+++ b/web/src/lib/components/profile/tabs/RepoListTab.svelte
@@ -17,6 +17,7 @@
 	import { repoKey, type RepoCardData } from "$lib/components/profile/types";
 	import Search from "$icon/search";
 	import X from "$icon/x";
+	import { buttonIcon } from "$lib/components/ui/Button.svelte";
 
 	interface Props {
 		initial: RepoCardData[];
@@ -67,14 +68,14 @@
 		: "No repositories found."}
 >
 	{#snippet header()}
-		<form class="relative mb-4 flex" method="GET">
+		<form class="relative mb-sm flex" method="GET">
 			<input type="hidden" name="tab" value="repos" />
 			<div class="relative flex flex-1">
 				<Input
 					name="q"
 					bind:value={queryValue}
 					placeholder="Search repositories..."
-					class="flex-1 rounded-l rounded-r-none pr-10 pl-3"
+					class="flex-1 rounded-l rounded-r-none pr-3xl pl-sm"
 				/>
 				<a
 					href={resolve(`${page.url.pathname}?tab=repos` as "/")}
@@ -83,14 +84,14 @@
 						hasQuery ? "block" : "hidden"
 					]}
 				>
-					<X class="size-4" />
+					<X class={buttonIcon({ size: "regular" })} />
 				</a>
 			</div>
 			<button
 				type="submit"
-				class="rounded-r border border-l-0 border-border-default bg-background-default p-2 text-foreground-subtle hover:bg-background-subtle hover:text-foreground-default"
+				class="rounded-r border border-l-0 border-border-default bg-background-default p-xs text-foreground-subtle hover:bg-background-subtle hover:text-foreground-default"
 			>
-				<Search class="size-4" />
+				<Search class={buttonIcon({ size: "regular" })} />
 			</button>
 		</form>
 	{/snippet}
diff --git a/web/src/lib/components/profile/tabs/StarredTab.svelte b/web/src/lib/components/profile/tabs/StarredTab.svelte
index 0a5e5e506..0cb888a38 100644
--- a/web/src/lib/components/profile/tabs/StarredTab.svelte
+++ b/web/src/lib/components/profile/tabs/StarredTab.svelte
@@ -49,7 +49,7 @@
 		{#if star.kind === "repo"}
 			<RepoCard repo={star.repo} />
 		{:else}
-			<Card shadow={false} class="flex items-center gap-2">
+			<Card class="flex items-center gap-xs">
 				<a
 					href={stringHref(star.ownerHandle, star.rkey)}
 					class="truncate font-bold text-foreground-default no-underline hover:underline"
diff --git a/web/src/lib/components/profile/tabs/VouchTab.svelte b/web/src/lib/components/profile/tabs/VouchTab.svelte
index 44a96979b..65e3c5a5c 100644
--- a/web/src/lib/components/profile/tabs/VouchTab.svelte
+++ b/web/src/lib/components/profile/tabs/VouchTab.svelte
@@ -54,7 +54,7 @@
 		title="Vouches"
 		empty={vouches.length === 0}
 		emptyMessage="No vouches in your network yet."
-		listClass="relative ml-5 flex flex-col gap-6 border border-transparent px-4"
+		listClass="relative ml-xs mb-xs flex flex-col gap-xl border border-transparent px-md"
 	>
 		<div class="absolute inset-y-8 z-0 w-0.5 bg-border-default"></div>
 		{#each vouches as vouch (vouch.uri)}
-- 
2.54.0