diff --git a/web/src/lib/components/ui/Typography.stories.svelte b/web/src/lib/components/ui/Typography.stories.svelte
deleted file mode 100644
index a844cabe..00000000
--- a/web/src/lib/components/ui/Typography.stories.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import Typography from "./Typography.svelte";
-
-	const { Story } = defineMeta({
-		title: "UI/Typography",
-		component: Typography,
-		tags: ["autodocs"],
-		argTypes: {
-			variant: {
-				control: { type: "select" },
-				options: [
-					"h0",
-					"h1",
-					"h2",
-					"h3",
-					"h4",
-					"large",
-					"regular",
-					"small",
-					"mini",
-					"mono-large",
-					"mono",
-					"mono-small"
-				]
-			},
-			weight: {
-				control: { type: "select" },
-				options: ["regular", "semibold", "bold"]
-			},
-			as: { control: "text" }
-		},
-		args: {
-			variant: "regular",
-			weight: "regular"
-		}
-	});
-
-	const paragraphSizes = ["large", "regular", "small", "mini"] as const;
-	const weights = ["regular", "semibold", "bold"] as const;
-</script>
-
-<!-- Typography content comes through its `children` snippet, provided here as Story slot content. -->
-<Story name="H0" args={{ variant: "h0" }}>Design that ships</Story>
-<Story name="H1" args={{ variant: "h1" }}>Design that ships</Story>
-<Story name="H2" args={{ variant: "h2" }}>Design that ships</Story>
-<Story name="H3" args={{ variant: "h3" }}>Design that ships</Story>
-<Story name="H4" args={{ variant: "h4" }}>Design that ships</Story>
-<Story name="Paragraph" args={{ variant: "regular" }}>
-	Tangled is a social-enabled, decentralized code collaboration platform built on the AT Protocol.
-</Story>
-<Story name="ParagraphBold" args={{ variant: "regular", weight: "bold" }}>
-	Tangled is a social-enabled, decentralized code collaboration platform.
-</Story>
-<Story name="Small" args={{ variant: "small" }}>Last updated 2 hours ago.</Story>
-<Story name="Mini" args={{ variant: "mini" }}>Mini text for supporting detail.</Story>
-<Story name="Mono" args={{ variant: "mono" }}>const tangled = true;</Story>
-<Story name="CustomTag" args={{ variant: "h2", as: "div" }}>
-	Renders as a div while keeping h2 styling
-</Story>
-
-<!-- Mirrors the Figma "Font Styles" specimen (node 1:186). -->
-<Story name="Scale">
-	<div class="flex flex-col gap-12">
-		<div class="flex flex-col gap-3">
-			<Typography variant="h0">Heading 0</Typography>
-			<Typography variant="h1">Heading 1</Typography>
-			<Typography variant="h2">Heading 2</Typography>
-			<Typography variant="h3">Heading 3</Typography>
-			<Typography variant="h4">Heading 4</Typography>
-		</div>
-		<div class="flex flex-col gap-3">
-			{#each paragraphSizes as size (size)}
-				{#each weights as weight (weight)}
-					<Typography variant={size} {weight}>
-						Paragraph {size} / {weight}
-					</Typography>
-				{/each}
-			{/each}
-		</div>
-		<div class="flex flex-col gap-3">
-			<Typography variant="mono-large">Monospace Large</Typography>
-			<Typography variant="mono">Monospace Regular</Typography>
-			<Typography variant="mono-small">Monospace Small</Typography>
-		</div>
-	</div>
-</Story>
diff --git a/web/src/lib/components/ui/Typography.svelte b/web/src/lib/components/ui/Typography.svelte
deleted file mode 100644
index 97553997..00000000
--- a/web/src/lib/components/ui/Typography.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
-	import type { SvelteHTMLElements } from "svelte/elements";
-
-	export const typography = tv({
-		base: "font-sans text-foreground-default",
-		variants: {
-			variant: {
-				h0: "typography-heading-0",
-				h1: "typography-heading-1",
-				h2: "typography-heading-2",
-				h3: "typography-heading-3",
-				h4: "typography-heading-4",
-				large: "typography-paragraph-large",
-				regular: "typography-paragraph-regular",
-				small: "typography-paragraph-small",
-				mini: "typography-paragraph-mini",
-				"mono-large": "font-mono typography-monospace-large font-normal",
-				mono: "font-mono typography-monospace-regular font-normal",
-				"mono-small": "font-mono typography-monospace-small font-normal"
-			},
-			weight: {
-				regular: "",
-				semibold: "",
-				bold: ""
-			}
-		},
-		compoundVariants: (["large", "regular", "small", "mini"] as const).flatMap((variant) => [
-			{ variant, weight: "regular" as const, class: "font-normal" },
-			{ variant, weight: "semibold" as const, class: "font-medium" },
-			{ variant, weight: "bold" as const, class: "font-semibold" }
-		]),
-		defaultVariants: {
-			variant: "regular",
-			weight: "regular"
-		}
-	});
-
-	export type TypographyVariants = VariantProps<typeof typography>;
-
-	const defaultTag = {
-		h0: "h1",
-		h1: "h1",
-		h2: "h2",
-		h3: "h3",
-		h4: "h4",
-		large: "p",
-		regular: "p",
-		small: "span",
-		mini: "span",
-		"mono-large": "code",
-		mono: "code",
-		"mono-small": "code"
-	} as const satisfies Record<NonNullable<TypographyVariants["variant"]>, keyof SvelteHTMLElements>;
-</script>
-
-<script lang="ts">
-	import type { Snippet } from "svelte";
-
-	interface Props {
-		variant?: TypographyVariants["variant"];
-		weight?: TypographyVariants["weight"];
-		as?: keyof SvelteHTMLElements;
-		class?: string;
-		children: Snippet;
-	}
-
-	let { variant = "regular", weight = "regular", as, class: className, children }: Props = $props();
-
-	const tag = $derived(as ?? defaultTag[variant ?? "regular"]);
-	const classes = $derived(typography({ variant, weight, class: className }));
-</script>
-
-<svelte:element this={tag} class={classes}>
-	{@render children()}
-</svelte:element>
diff --git a/web/src/lib/components/ui/User.svelte b/web/src/lib/components/ui/User.svelte
index b75ae03d..0c064230 100644
--- a/web/src/lib/components/ui/User.svelte
+++ b/web/src/lib/components/ui/User.svelte
@@ -1,6 +1,5 @@
 <script module lang="ts">
 	import { tv, type VariantProps } from "tailwind-variants";
-	import type { TypographyVariants } from "./Typography.svelte";
 
 	export const user = tv({
 		slots: {
@@ -12,23 +11,28 @@
 			size: {
 				header: {
 					root: "gap-2",
-					avatar: "size-6.5"
+					avatar: "size-6.5",
+					handle: "typography-heading-4"
 				},
 				large: {
 					root: "gap-1.5",
-					avatar: "size-6.5"
+					avatar: "size-6.5",
+					handle: "typography-paragraph-large"
 				},
 				regular: {
 					root: "gap-1",
-					avatar: "size-5.25"
+					avatar: "size-5.25",
+					handle: "typography-paragraph-regular"
 				},
 				small: {
 					root: "gap-1",
-					avatar: "size-4.25"
+					avatar: "size-4.25",
+					handle: "typography-paragraph-small"
 				},
 				mini: {
 					root: "gap-1",
-					avatar: "size-3.25"
+					avatar: "size-3.25",
+					handle: "typography-paragraph-mini"
 				}
 			}
 		},
@@ -38,19 +42,10 @@
 	});
 
 	export type UserVariants = VariantProps<typeof user>;
-
-	const handleVariant = {
-		header: "h4",
-		large: "large",
-		regular: "regular",
-		small: "small",
-		mini: "mini"
-	} as const satisfies Record<NonNullable<UserVariants["size"]>, TypographyVariants["variant"]>;
 </script>
 
 <script lang="ts">
 	import Avatar from "./Avatar.svelte";
-	import { typography } from "./Typography.svelte";
 
 	interface Props {
 		handle?: string;
@@ -59,6 +54,8 @@
 		showImage?: boolean;
 		showText?: boolean;
 		class?: string;
+		avatarClass?: string;
+		handleClass?: string;
 	}
 
 	let {
@@ -67,24 +64,20 @@
 		size = "regular",
 		showImage = true,
 		showText = true,
-		class: className
+		class: className,
+		avatarClass,
+		handleClass
 	}: Props = $props();
 
 	const slots = $derived(user({ size }));
-	const handleClass = $derived(
-		typography({
-			variant: handleVariant[size ?? "regular"],
-			class: slots.handle()
-		})
-	);
 </script>
 
 <span class={slots.root({ class: className })}>
 	{#if showImage}
 		<!-- every variant here is size-8 or under, so the small image always fits -->
-		<Avatar {did} {handle} size={slots.avatar()} tiny />
+		<Avatar {did} {handle} size={slots.avatar({ class: avatarClass })} tiny />
 	{/if}
 	{#if showText && handle}
-		<span class={handleClass}>{handle}</span>
+		<span class={slots.handle({ class: handleClass })}>{handle}</span>
 	{/if}
 </span>