From 62c1cce90b9141e1155f619d4e2db2e69704d6a0 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 14 Jul 2026 02:38:02 +0200
Subject: [PATCH] web/components/ui: add ui primitives and stories

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/ui/Avatar.svelte       |  24 ++-
 .../lib/components/ui/Button.stories.svelte   |  47 ++++++
 web/src/lib/components/ui/Button.svelte       |  68 ++++----
 .../components/ui/ButtonCard.stories.svelte   |  39 +++++
 web/src/lib/components/ui/ButtonCard.svelte   | 101 ++++++++++++
 .../components/ui/ButtonGroup.stories.svelte  |  49 ++++++
 web/src/lib/components/ui/ButtonGroup.svelte  |  37 +++++
 .../lib/components/ui/Checkbox.stories.svelte |  37 +++++
 web/src/lib/components/ui/Checkbox.svelte     |  51 ++++++
 web/src/lib/components/ui/Dropdown.svelte     | 148 ++++++++++++++----
 web/src/lib/components/ui/DropdownItem.svelte |  50 ++++--
 .../lib/components/ui/Field.stories.svelte    |  76 +++++++++
 web/src/lib/components/ui/Field.svelte        |  41 +++++
 .../lib/components/ui/Input.stories.svelte    |  45 ++++++
 web/src/lib/components/ui/Input.svelte        |  74 +++++++++
 web/src/lib/components/ui/Link.stories.svelte |  57 +++++++
 web/src/lib/components/ui/Link.svelte         | 109 +++++++++++++
 web/src/lib/components/ui/Logo.stories.svelte |  26 +++
 web/src/lib/components/ui/Logo.svelte         |  14 ++
 .../lib/components/ui/LogotypeSmall.svelte    |   8 +-
 .../components/ui/Pagination.stories.svelte   |  25 +++
 web/src/lib/components/ui/Pagination.svelte   | 135 ++++++++++++++++
 .../lib/components/ui/Radio.stories.svelte    |  34 ++++
 web/src/lib/components/ui/Radio.svelte        |  45 ++++++
 .../lib/components/ui/Scaffold.stories.svelte |  38 +++++
 web/src/lib/components/ui/Scaffold.svelte     |  39 +++++
 .../lib/components/ui/Select.stories.svelte   |  65 ++++++++
 web/src/lib/components/ui/Select.svelte       |  61 ++++++++
 web/src/lib/components/ui/Tag.stories.svelte  |  24 +++
 web/src/lib/components/ui/Tag.svelte          |  46 ++++++
 .../lib/components/ui/Textarea.stories.svelte |  44 ++++++
 web/src/lib/components/ui/Textarea.svelte     |  69 ++++++++
 .../components/ui/Thumbnail.stories.svelte    |  30 ++++
 web/src/lib/components/ui/Thumbnail.svelte    |  29 ++++
 .../components/ui/Typography.stories.svelte   |  52 ++++++
 web/src/lib/components/ui/Typography.svelte   |  62 ++++++++
 web/src/lib/components/ui/User.stories.svelte |  39 +++++
 web/src/lib/components/ui/User.svelte         |  64 ++++++++
 38 files changed, 1919 insertions(+), 83 deletions(-)
 create mode 100644 web/src/lib/components/ui/Button.stories.svelte
 create mode 100644 web/src/lib/components/ui/ButtonCard.stories.svelte
 create mode 100644 web/src/lib/components/ui/ButtonCard.svelte
 create mode 100644 web/src/lib/components/ui/ButtonGroup.stories.svelte
 create mode 100644 web/src/lib/components/ui/ButtonGroup.svelte
 create mode 100644 web/src/lib/components/ui/Checkbox.stories.svelte
 create mode 100644 web/src/lib/components/ui/Checkbox.svelte
 create mode 100644 web/src/lib/components/ui/Field.stories.svelte
 create mode 100644 web/src/lib/components/ui/Field.svelte
 create mode 100644 web/src/lib/components/ui/Input.stories.svelte
 create mode 100644 web/src/lib/components/ui/Input.svelte
 create mode 100644 web/src/lib/components/ui/Link.stories.svelte
 create mode 100644 web/src/lib/components/ui/Link.svelte
 create mode 100644 web/src/lib/components/ui/Logo.stories.svelte
 create mode 100644 web/src/lib/components/ui/Logo.svelte
 create mode 100644 web/src/lib/components/ui/Pagination.stories.svelte
 create mode 100644 web/src/lib/components/ui/Pagination.svelte
 create mode 100644 web/src/lib/components/ui/Radio.stories.svelte
 create mode 100644 web/src/lib/components/ui/Radio.svelte
 create mode 100644 web/src/lib/components/ui/Scaffold.stories.svelte
 create mode 100644 web/src/lib/components/ui/Scaffold.svelte
 create mode 100644 web/src/lib/components/ui/Select.stories.svelte
 create mode 100644 web/src/lib/components/ui/Select.svelte
 create mode 100644 web/src/lib/components/ui/Tag.stories.svelte
 create mode 100644 web/src/lib/components/ui/Tag.svelte
 create mode 100644 web/src/lib/components/ui/Textarea.stories.svelte
 create mode 100644 web/src/lib/components/ui/Textarea.svelte
 create mode 100644 web/src/lib/components/ui/Thumbnail.stories.svelte
 create mode 100644 web/src/lib/components/ui/Thumbnail.svelte
 create mode 100644 web/src/lib/components/ui/Typography.stories.svelte
 create mode 100644 web/src/lib/components/ui/Typography.svelte
 create mode 100644 web/src/lib/components/ui/User.stories.svelte
 create mode 100644 web/src/lib/components/ui/User.svelte

diff --git a/web/src/lib/components/ui/Avatar.svelte b/web/src/lib/components/ui/Avatar.svelte
index 2bb3188a..76d1aa8a 100644
--- a/web/src/lib/components/ui/Avatar.svelte
+++ b/web/src/lib/components/ui/Avatar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import UserRound from '$icon/user-round';
+	import UserRound from "$icon/user-round";
 
 	interface Props {
 		src?: string;
@@ -8,19 +8,29 @@
 		class?: string;
 	}
 
-	let { src, handle, size = 'size-10', class: className = '' }: Props = $props();
+	let { src, handle, size = "size-10", class: className = "" }: Props = $props();
+
+	let failed = $state(false);
+
+	$effect(() => {
+		src;
+		failed = false;
+	});
 </script>
 
-{#if src}
+{#if src && !failed}
 	<img
 		{src}
-		alt={handle ? `${handle}'s avatar` : 'avatar'}
-		class={`${size} shrink-0 rounded-full border border-border object-cover ${className}`}
+		alt={handle ? `${handle}'s avatar` : "avatar"}
+		class={`${size} shrink-0 rounded-full border border-border-default object-cover ${className}`}
+		onerror={() => (failed = true)}
 	/>
 {:else}
 	<span
-		class={`${size} flex shrink-0 items-center justify-center rounded-full border border-border bg-surface-muted text-fg-subtle ${className}`}
-		aria-hidden="true"
+		class={`${size} flex shrink-0 items-center justify-center rounded-full border border-border-default bg-background-inset text-foreground-subtle ${className}`}
+		role={handle ? "img" : undefined}
+		aria-label={handle ? `${handle}'s avatar` : undefined}
+		aria-hidden={handle ? undefined : "true"}
 	>
 		<UserRound class="size-1/2" />
 	</span>
diff --git a/web/src/lib/components/ui/Button.stories.svelte b/web/src/lib/components/ui/Button.stories.svelte
new file mode 100644
index 00000000..f902e6a6
--- /dev/null
+++ b/web/src/lib/components/ui/Button.stories.svelte
@@ -0,0 +1,47 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Button from "./Button.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Button",
+		component: Button,
+		tags: ["autodocs"],
+		argTypes: {
+			variant: {
+				control: { type: "select" },
+				options: ["default", "primary", "ghost", "flat", "danger", "success", "warning"]
+			},
+			size: {
+				control: { type: "inline-radio" },
+				options: ["sm", "md", "lg"]
+			},
+			disabled: { control: "boolean" },
+			loading: { control: "boolean" }
+		},
+		args: {
+			variant: "default",
+			size: "md",
+			disabled: false,
+			loading: false
+		}
+	});
+</script>
+
+<!-- Button content comes through its `children` snippet, provided here as Story slot content. -->
+<Story name="Default">Button</Story>
+<Story name="Primary" args={{ variant: "primary" }}>Save</Story>
+<Story name="Ghost" args={{ variant: "ghost" }}>Cancel</Story>
+<Story name="Danger" args={{ variant: "danger" }}>Delete</Story>
+<Story name="Success" args={{ variant: "success" }}>Confirm</Story>
+<Story name="Warning" args={{ variant: "warning" }}>Careful</Story>
+<Story name="Loading" args={{ variant: "primary", loading: true }}>Saving</Story>
+<Story name="Disabled" args={{ disabled: true }}>Button</Story>
+<Story name="Link" args={{ href: "/" }}>Go home</Story>
+
+<Story name="Sizes">
+	<div class="flex items-center gap-3">
+		<Button size="sm">Small</Button>
+		<Button size="md">Medium</Button>
+		<Button size="lg">Large</Button>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 7c0c9cce..7b68819d 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -1,43 +1,48 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const button = tv({
-		base: 'inline-flex cursor-pointer select-none items-center justify-center overflow-hidden rounded no-underline transition-[background-color,border-color,color] duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
+		base: "inline-flex cursor-pointer select-none items-center justify-center overflow-hidden rounded no-underline transition-[background-color,border-color,color] duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
 		variants: {
 			variant: {
 				default:
-					'border border-border bg-surface text-fg hover:bg-surface-hover focus-visible:outline-ring',
+					"border border-border-default bg-background-default text-foreground-default hover:bg-background-subtle focus-visible:outline-border-focus",
 				primary:
-					'border border-primary-border bg-primary text-primary-fg hover:bg-primary-hover focus-visible:outline-primary',
-				ghost: 'bg-transparent text-fg-muted hover:bg-surface-muted focus-visible:outline-ring',
-				flat: 'bg-gray-50 text-fg hover:bg-gray-100 focus-visible:outline-ring dark:bg-gray-900 dark:hover:bg-gray-700',
+					"border border-border-success bg-background-success-emphasis text-foreground-on-emphasis hover:bg-background-success-emphasis-hover focus-visible:outline-background-success-emphasis",
+				ghost:
+					"bg-transparent text-foreground-muted hover:bg-background-inset focus-visible:outline-border-focus",
+				flat: "bg-gray-50 text-foreground-default hover:bg-gray-100 focus-visible:outline-border-focus dark:bg-gray-900 dark:hover:bg-gray-700",
+				// danger / success / warning are outline buttons in Figma: default surface +
+				// border, colored text only (bound to the fg-* tokens), no accent fill.
 				danger:
-					'border border-danger-border bg-danger text-danger-fg hover:bg-danger-hover focus-visible:outline-danger',
+					"border border-border-default bg-background-default text-foreground-danger hover:bg-background-subtle focus-visible:outline-foreground-danger",
 				success:
-					'border border-success-border bg-success text-success-fg hover:bg-success-hover focus-visible:outline-success'
+					"border border-border-default bg-background-default text-foreground-success hover:bg-background-subtle focus-visible:outline-foreground-success",
+				warning:
+					"border border-border-default bg-background-default text-foreground-warning hover:bg-background-subtle focus-visible:outline-foreground-warning"
 			},
 			size: {
-				sm: 'min-h-8 gap-1.5 px-2 py-1.5 text-sm',
-				md: 'min-h-9 gap-2 px-4 py-2 text-sm',
-				lg: 'min-h-10 gap-2.5 px-6 py-2 text-base'
+				sm: "min-h-8 gap-1.5 px-2 py-1.5 text-sm",
+				md: "min-h-9 gap-2 px-3 py-1.5 text-sm",
+				lg: "min-h-10 gap-2.5 px-6 py-2 text-base"
 			}
 		},
 		compoundVariants: [
 			// raised variants draw inset depth via a ::before layer.
 			{
-				variant: 'default',
+				variant: "default",
 				class:
-					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-raised-depth)] before:transition-all before:duration-150 hover:before:shadow-[inset_0_-2px_0_0_var(--color-raised-depth-hover)] active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-raised-depth)] disabled:active:translate-y-0"
+					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150 hover:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong-hover)] active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)] disabled:active:translate-y-0"
 			},
 			{
-				variant: ['primary', 'danger', 'success'],
+				variant: "primary",
 				class:
-					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-raised-accent-depth)] before:transition-all before:duration-150 active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-raised-accent-depth-active)] disabled:active:translate-y-0"
+					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:content-[''] before:shadow-[inset_0_-2px_0_0_rgb(3_7_18/0.25)] before:transition-all before:duration-150 active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_rgb(3_7_18/0.5)] disabled:active:translate-y-0"
 			}
 		],
 		defaultVariants: {
-			variant: 'default',
-			size: 'md'
+			variant: "default",
+			size: "md"
 		}
 	});
 
@@ -45,16 +50,16 @@
 </script>
 
 <script lang="ts">
-	import { resolve } from '$app/paths';
-	import type { Snippet } from 'svelte';
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-	import Spinner from './Spinner.svelte';
+	import { resolve } from "$app/paths";
+	import type { Snippet } from "svelte";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import Spinner from "./Spinner.svelte";
 
-	interface Props extends Omit<HTMLAnchorAttributes & HTMLButtonAttributes, 'class' | 'children'> {
-		variant?: ButtonVariants['variant'];
-		size?: ButtonVariants['size'];
+	interface Props extends Omit<HTMLAnchorAttributes & HTMLButtonAttributes, "class" | "children"> {
+		variant?: ButtonVariants["variant"];
+		size?: ButtonVariants["size"];
 		href?: string;
-		type?: 'button' | 'submit' | 'reset';
+		type?: "button" | "submit" | "reset";
 		disabled?: boolean;
 		class?: string;
 		loading?: boolean;
@@ -63,10 +68,10 @@
 	}
 
 	let {
-		variant = 'default',
-		size = 'md',
+		variant = "default",
+		size = "md",
 		href,
-		type = 'button',
+		type = "button",
 		disabled = false,
 		class: className,
 		loading = false,
@@ -76,14 +81,15 @@
 	}: Props = $props();
 
 	const classes = $derived(button({ variant, size, class: className }));
-	const spinnerSize = $derived(spinnerClass ?? (size === 'lg' ? 'size-5' : 'size-4'));
+	const spinnerSize = $derived(spinnerClass ?? (size === "lg" ? "size-5" : "size-4"));
 </script>
 
 {#if href}
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- internal hrefs go through resolve(), external ones must pass through untouched -->
 	<a
-		href={resolve(href as '/')}
+		href={href?.startsWith("/") ? resolve(href as "/") : href}
 		class={classes}
-		aria-disabled={disabled || loading ? 'true' : undefined}
+		aria-disabled={disabled || loading ? "true" : undefined}
 		tabindex={disabled ? -1 : undefined}
 		{...rest}
 	>
diff --git a/web/src/lib/components/ui/ButtonCard.stories.svelte b/web/src/lib/components/ui/ButtonCard.stories.svelte
new file mode 100644
index 00000000..35ab0849
--- /dev/null
+++ b/web/src/lib/components/ui/ButtonCard.stories.svelte
@@ -0,0 +1,39 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Settings from "$icon/settings";
+	import ButtonCard from "./ButtonCard.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/ButtonCard",
+		component: ButtonCard,
+		tags: ["autodocs"],
+		argTypes: {
+			variant: {
+				control: { type: "select" },
+				options: ["default", "ghost"]
+			},
+			disabled: { control: "boolean" },
+			title: { control: "text" },
+			description: { control: "text" }
+		},
+		args: {
+			variant: "default",
+			disabled: false,
+			title: "Button",
+			description: "Description"
+		}
+	});
+</script>
+
+<Story name="Default" />
+<Story name="Ghost" args={{ variant: "ghost" }} />
+<Story name="WithIcon" args={{ icon: Settings }} />
+<Story name="Disabled" args={{ disabled: true }} />
+<Story name="Href" args={{ href: "/", icon: Settings }} />
+
+<Story name="Variants">
+	<div class="grid grid-cols-2 gap-3">
+		<ButtonCard variant="default" icon={Settings} title="Default" description="Bordered card" />
+		<ButtonCard variant="ghost" icon={Settings} title="Ghost" description="Transparent card" />
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/ButtonCard.svelte b/web/src/lib/components/ui/ButtonCard.svelte
new file mode 100644
index 00000000..df5f120d
--- /dev/null
+++ b/web/src/lib/components/ui/ButtonCard.svelte
@@ -0,0 +1,101 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const buttonCard = tv({
+		base: "flex cursor-pointer select-none items-start gap-3 rounded p-3 text-left no-underline transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+		variants: {
+			variant: {
+				default: "border border-border-default bg-background-default hover:bg-background-subtle",
+				ghost: "bg-transparent hover:bg-background-inset"
+			}
+		},
+		defaultVariants: {
+			variant: "default"
+		}
+	});
+
+	export type ButtonCardVariants = VariantProps<typeof buttonCard>;
+</script>
+
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import type { Component, Snippet } from "svelte";
+	import type {
+		HTMLAnchorAttributes,
+		HTMLButtonAttributes,
+		SvelteHTMLElements
+	} from "svelte/elements";
+
+	interface Props extends Omit<HTMLAnchorAttributes & HTMLButtonAttributes, "class" | "children"> {
+		variant?: ButtonCardVariants["variant"];
+		href?: string;
+		type?: "button" | "submit" | "reset";
+		disabled?: boolean;
+		title?: string;
+		description?: string;
+		icon?: Component<SvelteHTMLElements["svg"]>;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		variant = "default",
+		href,
+		type = "button",
+		disabled = false,
+		title,
+		description,
+		icon,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const classes = $derived(buttonCard({ variant, class: className }));
+	const Icon = $derived(icon);
+</script>
+
+{#if href}
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- internal hrefs go through resolve(), external ones must pass through untouched -->
+	<a
+		href={href?.startsWith("/") ? resolve(href as "/") : href}
+		class={classes}
+		aria-disabled={disabled ? "true" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...rest}
+	>
+		{#if Icon}
+			<Icon class="size-5 shrink-0" aria-hidden="true" />
+		{/if}
+		{#if children}
+			{@render children()}
+		{:else}
+			<div class="flex flex-col gap-0.5">
+				{#if title}
+					<span class="text-sm font-medium text-foreground-default">{title}</span>
+				{/if}
+				{#if description}
+					<span class="text-xs text-foreground-muted">{description}</span>
+				{/if}
+			</div>
+		{/if}
+	</a>
+{:else}
+	<button {type} {disabled} class={classes} {...rest}>
+		{#if Icon}
+			<Icon class="size-5 shrink-0" aria-hidden="true" />
+		{/if}
+		{#if children}
+			{@render children()}
+		{:else}
+			<div class="flex flex-col gap-0.5">
+				{#if title}
+					<span class="text-sm font-medium text-foreground-default">{title}</span>
+				{/if}
+				{#if description}
+					<span class="text-xs text-foreground-muted">{description}</span>
+				{/if}
+			</div>
+		{/if}
+	</button>
+{/if}
diff --git a/web/src/lib/components/ui/ButtonGroup.stories.svelte b/web/src/lib/components/ui/ButtonGroup.stories.svelte
new file mode 100644
index 00000000..e297808f
--- /dev/null
+++ b/web/src/lib/components/ui/ButtonGroup.stories.svelte
@@ -0,0 +1,49 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Button from "./Button.svelte";
+	import ButtonGroup from "./ButtonGroup.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/ButtonGroup",
+		component: ButtonGroup,
+		tags: ["autodocs"],
+		argTypes: {
+			spaced: { control: "boolean" }
+		},
+		args: {
+			spaced: false
+		}
+	});
+</script>
+
+<!-- ButtonGroup content comes through its `children` snippet, provided here as Story slot content. -->
+<Story name="Joined">
+	<ButtonGroup>
+		<Button>Button</Button>
+		<Button>Button</Button>
+		<Button>Button</Button>
+	</ButtonGroup>
+</Story>
+
+<Story name="Spaced" args={{ spaced: true }}>
+	<ButtonGroup spaced>
+		<Button>Button</Button>
+		<Button>Button</Button>
+		<Button>Button</Button>
+	</ButtonGroup>
+</Story>
+
+<Story name="Comparison">
+	<div class="flex flex-col gap-4">
+		<ButtonGroup spaced>
+			<Button>Button</Button>
+			<Button>Button</Button>
+			<Button>Button</Button>
+		</ButtonGroup>
+		<ButtonGroup>
+			<Button>Button</Button>
+			<Button>Button</Button>
+			<Button>Button</Button>
+		</ButtonGroup>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
new file mode 100644
index 00000000..4838bb14
--- /dev/null
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -0,0 +1,37 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const buttonGroup = tv({
+		base: "inline-flex items-center",
+		variants: {
+			spaced: {
+				true: "gap-2",
+				false:
+					"gap-0 [&>*]:relative [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:hover]:z-10 [&>*:focus-visible]:z-10"
+			}
+		},
+		defaultVariants: {
+			spaced: false
+		}
+	});
+
+	export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		spaced?: ButtonGroupVariants["spaced"];
+		class?: string;
+		children: Snippet;
+	}
+
+	let { spaced = false, class: className, children }: Props = $props();
+
+	const classes = $derived(buttonGroup({ spaced, class: className }));
+</script>
+
+<div class={classes}>
+	{@render children()}
+</div>
diff --git a/web/src/lib/components/ui/Checkbox.stories.svelte b/web/src/lib/components/ui/Checkbox.stories.svelte
new file mode 100644
index 00000000..7649ff3d
--- /dev/null
+++ b/web/src/lib/components/ui/Checkbox.stories.svelte
@@ -0,0 +1,37 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Checkbox from "./Checkbox.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Checkbox",
+		component: Checkbox,
+		tags: ["autodocs"],
+		argTypes: {
+			checked: { control: "boolean" },
+			indeterminate: { control: "boolean" },
+			disabled: { control: "boolean" }
+		},
+		args: {
+			checked: false,
+			indeterminate: false,
+			disabled: false
+		}
+	});
+</script>
+
+<!-- Checkbox content comes through its `children` snippet, provided here as Story slot content. -->
+<Story name="Default">Item</Story>
+<Story name="Checked" args={{ checked: true }}>Item</Story>
+<Story name="Indeterminate" args={{ indeterminate: true }}>Item</Story>
+<Story name="Disabled" args={{ disabled: true }}>Item</Story>
+<Story name="Disabled checked" args={{ disabled: true, checked: true }}>Item</Story>
+
+<Story name="States">
+	<div class="flex flex-col gap-3">
+		<Checkbox>Unchecked</Checkbox>
+		<Checkbox checked>Checked</Checkbox>
+		<Checkbox indeterminate>Indeterminate</Checkbox>
+		<Checkbox disabled>Disabled</Checkbox>
+		<Checkbox disabled checked>Disabled checked</Checkbox>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Checkbox.svelte b/web/src/lib/components/ui/Checkbox.svelte
new file mode 100644
index 00000000..0cf875d7
--- /dev/null
+++ b/web/src/lib/components/ui/Checkbox.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import Check from "$icon/check";
+	import Minus from "$icon/minus";
+
+	interface Props extends Omit<HTMLInputAttributes, "type" | "class" | "checked" | "children"> {
+		checked?: boolean;
+		indeterminate?: boolean;
+		disabled?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		disabled = false,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const labelClasses = $derived(
+		`inline-flex items-center gap-2 cursor-pointer ${disabled ? "cursor-not-allowed text-foreground-disabled" : ""} ${className ?? ""}`
+	);
+</script>
+
+<label class={labelClasses}>
+	<span class="relative inline-flex size-4 shrink-0">
+		<input
+			type="checkbox"
+			bind:checked
+			bind:indeterminate
+			{disabled}
+			class="peer size-4 shrink-0 appearance-none rounded border border-border-strong bg-background-default transition-colors duration-150 hover:bg-background-subtle checked:border-foreground-default checked:bg-foreground-default indeterminate:border-foreground-default indeterminate:bg-foreground-default focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
+			{...rest}
+		/>
+		<Check
+			class="pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-background-default peer-checked:block peer-indeterminate:hidden peer-disabled:opacity-50"
+			aria-hidden="true"
+		/>
+		<Minus
+			class="pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-background-default peer-indeterminate:block peer-disabled:opacity-50"
+			aria-hidden="true"
+		/>
+	</span>
+	{#if children}
+		<span>{@render children()}</span>
+	{/if}
+</label>
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index fa2eadbc..4164cc29 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -1,21 +1,21 @@
 <script module lang="ts">
-	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { SvelteMap, SvelteSet } from "svelte/reactivity";
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const dropdown = tv({
 		slots: {
-			root: 'relative inline-block',
+			root: "relative inline-block",
 			plainTrigger:
-				'flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-inherit',
-			menu: 'absolute right-0 z-50 mt-2 w-56 overflow-hidden rounded border border-border bg-surface text-sm shadow-menu'
+				"flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-inherit",
+			menu: "absolute right-0 z-50 mt-2 w-56 overflow-hidden rounded border border-border-default bg-background-default text-sm shadow-menu"
 		},
 		variants: {
 			open: {
 				true: {
-					menu: 'block'
+					menu: "block"
 				},
 				false: {
-					menu: 'hidden'
+					menu: "hidden"
 				}
 			}
 		},
@@ -29,6 +29,12 @@
 	// opening one dropdown in a group closes its siblings.
 	const groups = new SvelteMap<string, SvelteSet<() => void>>();
 
+	let idCounter = 0;
+	function nextId() {
+		idCounter += 1;
+		return `dropdown-menu-${idCounter}`;
+	}
+
 	function registerDropdown(group: string | undefined, close: () => void) {
 		if (!group) return () => {};
 		let set = groups.get(group);
@@ -39,6 +45,7 @@
 		set.add(close);
 		return () => {
 			set.delete(close);
+			if (set && set.size === 0) groups.delete(group);
 		};
 	}
 
@@ -51,24 +58,37 @@
 </script>
 
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { onMount, setContext } from 'svelte';
-	import Button from './Button.svelte';
+	import type { Snippet } from "svelte";
+	import { onMount, setContext, tick } from "svelte";
+	import Button from "./Button.svelte";
 
 	interface Props {
 		id?: string;
 		group?: string;
-		variant?: 'plain' | 'button';
+		variant?: "plain" | "button";
 		label?: string;
 		trigger: Snippet;
 		children: Snippet;
 	}
 
-	let { id, group, variant = 'plain', label, trigger, children }: Props = $props();
+	let { id, group, variant = "plain", label, trigger, children }: Props = $props();
 
 	let open = $state(false);
 	const classes = $derived(dropdown({ open }));
 	let root = $state<HTMLElement>();
+	let triggerWrapper = $state<HTMLElement>();
+	let triggerButtonEl = $state<HTMLElement>();
+	const fallbackId = nextId();
+	const menuId = $derived(id ?? fallbackId);
+
+	const focusTrigger = () => {
+		if (variant === "button") {
+			triggerWrapper?.querySelector<HTMLElement>("button, a")?.focus();
+		} else {
+			triggerButtonEl?.focus();
+		}
+	};
+	let items: HTMLElement[] = $state([]);
 
 	const close = () => {
 		open = false;
@@ -79,7 +99,64 @@
 		if (open) closeGroupExcept(group, close);
 	};
 
-	setContext('dropdown-close', close);
+	const focusItem = (index: number) => {
+		if (items.length === 0) return;
+		const wrapped = ((index % items.length) + items.length) % items.length;
+		items[wrapped]?.focus();
+	};
+
+	const openAndFocusFirst = () => {
+		open = true;
+		closeGroupExcept(group, close);
+	};
+
+	const onTriggerKeydown = (event: KeyboardEvent) => {
+		if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+			event.preventDefault();
+			openAndFocusFirst();
+		}
+	};
+
+	const onMenuKeydown = (event: KeyboardEvent) => {
+		const currentIndex = items.indexOf(event.target as HTMLElement);
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				focusItem(currentIndex + 1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				focusItem(currentIndex - 1);
+				break;
+			case "Home":
+				event.preventDefault();
+				focusItem(0);
+				break;
+			case "End":
+				event.preventDefault();
+				focusItem(items.length - 1);
+				break;
+			case "Escape":
+				event.preventDefault();
+				close();
+				focusTrigger();
+				break;
+		}
+	};
+
+	$effect(() => {
+		if (open) {
+			tick().then(() => items[0]?.focus());
+		}
+	});
+
+	setContext("dropdown-close", close);
+	setContext("dropdown-register", (el: HTMLElement) => {
+		items.push(el);
+		return () => {
+			items = items.filter((item) => item !== el);
+		};
+	});
 
 	onMount(() => {
 		const unregister = registerDropdown(group, close);
@@ -88,46 +165,57 @@
 			if (open && event.target instanceof Node && root && !root.contains(event.target)) close();
 		};
 		const onKeydown = (event: KeyboardEvent) => {
-			if (event.key === 'Escape') close();
+			if (!open) return;
+			if (event.key === "Escape") {
+				close();
+				focusTrigger();
+			}
 		};
 
-		document.addEventListener('click', onDocumentClick);
-		document.addEventListener('keydown', onKeydown);
+		document.addEventListener("click", onDocumentClick);
+		document.addEventListener("keydown", onKeydown);
 
 		return () => {
 			unregister();
-			document.removeEventListener('click', onDocumentClick);
-			document.removeEventListener('keydown', onKeydown);
+			document.removeEventListener("click", onDocumentClick);
+			document.removeEventListener("keydown", onKeydown);
 		};
 	});
 </script>
 
 <div bind:this={root} class={classes.root()}>
-	{#if variant === 'button'}
-		<Button
-			size="sm"
-			class="gap-2 !py-0 text-sm"
-			onclick={toggle}
-			aria-haspopup="menu"
-			aria-expanded={open}
-			aria-label={label}
-		>
-			{@render trigger()}
-		</Button>
+	{#if variant === "button"}
+		<span bind:this={triggerWrapper} class="contents">
+			<Button
+				size="sm"
+				class="px-3"
+				onclick={toggle}
+				onkeydown={onTriggerKeydown}
+				aria-haspopup="menu"
+				aria-expanded={open}
+				aria-controls={menuId}
+				aria-label={label}
+			>
+				{@render trigger()}
+			</Button>
+		</span>
 	{:else}
 		<button
+			bind:this={triggerButtonEl}
 			type="button"
 			class={classes.plainTrigger()}
 			onclick={toggle}
+			onkeydown={onTriggerKeydown}
 			aria-haspopup="menu"
 			aria-expanded={open}
+			aria-controls={menuId}
 			aria-label={label}
 		>
 			{@render trigger()}
 		</button>
 	{/if}
 
-	<div {id} class={classes.menu()} role="menu">
+	<div id={menuId} class={classes.menu()} role="menu" tabindex={-1} onkeydown={onMenuKeydown}>
 		{@render children()}
 	</div>
 </div>
diff --git a/web/src/lib/components/ui/DropdownItem.svelte b/web/src/lib/components/ui/DropdownItem.svelte
index 1dadef39..af2a3407 100644
--- a/web/src/lib/components/ui/DropdownItem.svelte
+++ b/web/src/lib/components/ui/DropdownItem.svelte
@@ -1,12 +1,12 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from 'tailwind-variants';
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const dropdownItem = tv({
-		base: 'flex w-full cursor-pointer items-center gap-2 border-0 bg-transparent px-[0.7rem] py-[0.55rem] text-left text-inherit no-underline transition-colors duration-150 hover:no-underline',
+		base: "flex w-full cursor-pointer items-center gap-2 border-0 bg-transparent px-[0.7rem] py-[0.55rem] text-left text-inherit no-underline transition-colors duration-150 hover:no-underline",
 		variants: {
 			danger: {
-				false: 'hover:bg-surface-hover dark:hover:bg-[rgb(55_65_81_/_0.5)]',
-				true: 'text-danger hover:bg-danger-soft'
+				false: "hover:bg-background-subtle dark:hover:bg-[rgb(55_65_81_/_0.5)]",
+				true: "text-foreground-danger hover:bg-background-danger-subtle"
 			}
 		},
 		defaultVariants: {
@@ -18,14 +18,14 @@
 </script>
 
 <script lang="ts">
-	import { resolve } from '$app/paths';
-	import type { Component, Snippet } from 'svelte';
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { getContext } from 'svelte';
+	import { resolve } from "$app/paths";
+	import type { Component, Snippet } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+	import { getContext } from "svelte";
 	interface Props {
 		href?: string;
-		icon?: Component<SvelteHTMLElements['svg']>;
-		danger?: DropdownItemVariants['danger'];
+		icon?: Component<SvelteHTMLElements["svg"]>;
+		danger?: DropdownItemVariants["danger"];
 		onclick?: (event: MouseEvent) => void;
 		children: Snippet;
 	}
@@ -33,7 +33,17 @@
 	let { href, icon, danger = false, onclick, children }: Props = $props();
 	const classes = $derived(dropdownItem({ danger }));
 
-	const closeDropdown = getContext<(() => void) | undefined>('dropdown-close');
+	const closeDropdown = getContext<(() => void) | undefined>("dropdown-close");
+	const registerItem = getContext<((el: HTMLElement) => () => void) | undefined>(
+		"dropdown-register"
+	);
+
+	let el = $state<HTMLElement>();
+
+	$effect(() => {
+		if (!el || !registerItem) return;
+		return registerItem(el);
+	});
 
 	const handleClick = (event: MouseEvent) => {
 		closeDropdown?.();
@@ -42,7 +52,14 @@
 </script>
 
 {#if href}
-	<a href={resolve(href as '/')} class={classes} onclick={handleClick}>
+	<a
+		bind:this={el}
+		href={resolve(href as "/")}
+		class={classes}
+		role="menuitem"
+		tabindex={-1}
+		onclick={handleClick}
+	>
 		{#if icon}
 			{@const Glyph = icon}
 			<Glyph class="size-4" aria-hidden="true" />
@@ -50,7 +67,14 @@
 		{@render children()}
 	</a>
 {:else}
-	<button type="button" class={classes} onclick={handleClick}>
+	<button
+		bind:this={el}
+		type="button"
+		class={classes}
+		role="menuitem"
+		tabindex={-1}
+		onclick={handleClick}
+	>
 		{#if icon}
 			{@const Glyph = icon}
 			<Glyph class="size-4" aria-hidden="true" />
diff --git a/web/src/lib/components/ui/Field.stories.svelte b/web/src/lib/components/ui/Field.stories.svelte
new file mode 100644
index 00000000..35baa6e6
--- /dev/null
+++ b/web/src/lib/components/ui/Field.stories.svelte
@@ -0,0 +1,76 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Field from "./Field.svelte";
+	import Select from "./Select.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Field",
+		component: Field,
+		tags: ["autodocs"],
+		argTypes: {
+			label: { control: "text" },
+			subtitle: { control: "text" },
+			required: { control: "boolean" }
+		},
+		args: {
+			label: "Label",
+			subtitle: "Subtitle",
+			required: false
+		}
+	});
+</script>
+
+<!-- Field wraps any form control via its `children` snippet. -->
+<Story name="Default">
+	<Field label="Label" subtitle="Subtitle" for="field-default">
+		<input
+			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"
+		/>
+	</Field>
+</Story>
+
+<Story name="LabelOnly">
+	<Field label="Label" for="field-label-only">
+		<input
+			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"
+		/>
+	</Field>
+</Story>
+
+<Story name="Required">
+	<Field label="Label" subtitle="Subtitle" required for="field-required">
+		<input
+			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"
+		/>
+	</Field>
+</Story>
+
+<Story name="WithSelect">
+	<Field label="Label" subtitle="Subtitle" for="field-select">
+		<Select id="field-select">
+			<option value="" disabled selected>Select</option>
+			<option value="one">One</option>
+			<option value="two">Two</option>
+		</Select>
+	</Field>
+</Story>
+
+<Story name="WithInput">
+	<Field label="Label" subtitle="Subtitle" for="field-input">
+		<input
+			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"
+		/>
+	</Field>
+</Story>
diff --git a/web/src/lib/components/ui/Field.svelte b/web/src/lib/components/ui/Field.svelte
new file mode 100644
index 00000000..ce7d6337
--- /dev/null
+++ b/web/src/lib/components/ui/Field.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> {
+		label?: string;
+		subtitle?: string;
+		for?: string;
+		required?: boolean;
+		class?: string;
+		children: Snippet<[{ id: string }]>;
+	}
+
+	let {
+		label,
+		subtitle,
+		for: forId,
+		required = false,
+		class: className = "",
+		children,
+		...rest
+	}: Props = $props();
+
+	const generatedId = $props.id();
+	const id = $derived(forId ?? generatedId);
+</script>
+
+<div class={`flex flex-col gap-1.5 ${className}`} {...rest}>
+	{#if label}
+		<label for={id} class="text-xs font-medium tracking-wide text-foreground-muted uppercase">
+			{label}
+			{#if required}
+				<span class="text-foreground-subtle">*</span>
+			{/if}
+		</label>
+	{/if}
+	{@render children({ id })}
+	{#if subtitle}
+		<p class="text-xs text-foreground-subtle">{subtitle}</p>
+	{/if}
+</div>
diff --git a/web/src/lib/components/ui/Input.stories.svelte b/web/src/lib/components/ui/Input.stories.svelte
new file mode 100644
index 00000000..a6016a43
--- /dev/null
+++ b/web/src/lib/components/ui/Input.stories.svelte
@@ -0,0 +1,45 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Search from "$icon/search";
+	import Mail from "$icon/mail";
+	import Input from "./Input.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Input",
+		component: Input,
+		tags: ["autodocs"],
+		argTypes: {
+			error: { control: "boolean" },
+			disabled: { control: "boolean" },
+			loading: { control: "boolean" },
+			placeholder: { control: "text" }
+		},
+		args: {
+			error: false,
+			disabled: false,
+			loading: false,
+			placeholder: "Placeholder"
+		}
+	});
+</script>
+
+<Story name="Default" />
+<Story name="Focus" args={{ autofocus: true }} />
+<Story name="Filled" args={{ value: "Filled value" }} />
+<Story name="Error" args={{ error: true, value: "Invalid value" }} />
+<Story name="Disabled" args={{ disabled: true, value: "Can't edit this" }} />
+<Story name="Loading" args={{ loading: true, value: "Checking..." }} />
+
+<Story name="With left icon" args={{ iconLeft: Search, placeholder: "Search" }} />
+<Story name="With right icon" args={{ iconRight: Mail, placeholder: "you@example.com" }} />
+
+<Story name="States">
+	<div class="flex w-64 flex-col gap-3">
+		<Input placeholder="Default" />
+		<Input placeholder="Filled" value="Filled value" />
+		<Input placeholder="Error" error value="Invalid value" />
+		<Input placeholder="Disabled" disabled value="Can't edit this" />
+		<Input placeholder="Loading" loading value="Checking..." />
+		<Input placeholder="Search" iconLeft={Search} />
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Input.svelte b/web/src/lib/components/ui/Input.svelte
new file mode 100644
index 00000000..8b007375
--- /dev/null
+++ b/web/src/lib/components/ui/Input.svelte
@@ -0,0 +1,74 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const inputField = tv({
+		base: "flex items-center gap-2 rounded border bg-background-default px-3 py-2 text-sm transition-colors",
+		variants: {
+			error: {
+				false:
+					"border-border-default focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong",
+				true: "border-border-danger bg-background-danger-subtle text-foreground-danger focus-within:border-border-focus-danger focus-within:ring-1 focus-within:ring-border-focus-danger"
+			},
+			disabled: {
+				false: "",
+				true: "cursor-not-allowed bg-background-inset text-foreground-disabled"
+			}
+		},
+		defaultVariants: {
+			error: false,
+			disabled: false
+		}
+	});
+
+	export type InputFieldVariants = VariantProps<typeof inputField>;
+</script>
+
+<script lang="ts">
+	import type { Component } from "svelte";
+	import type { HTMLInputAttributes, SvelteHTMLElements } from "svelte/elements";
+	import Spinner from "./Spinner.svelte";
+
+	interface Props extends Omit<HTMLInputAttributes, "class" | "value"> {
+		value?: string;
+		error?: boolean;
+		disabled?: boolean;
+		loading?: boolean;
+		iconLeft?: Component<SvelteHTMLElements["svg"]>;
+		iconRight?: Component<SvelteHTMLElements["svg"]>;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(""),
+		error = false,
+		disabled = false,
+		loading = false,
+		iconLeft,
+		iconRight,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const classes = $derived(inputField({ error, disabled, class: className }));
+</script>
+
+<div class={classes}>
+	{#if iconLeft}
+		{@const IconLeft = iconLeft}
+		<IconLeft class="size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
+	{/if}
+	<input
+		bind:value
+		{disabled}
+		aria-invalid={error}
+		aria-busy={loading}
+		class="flex-1 bg-transparent text-sm outline-none placeholder:text-foreground-placeholder disabled:cursor-not-allowed"
+		{...rest}
+	/>
+	{#if loading}
+		<Spinner class="size-4 shrink-0" />
+	{:else if iconRight}
+		{@const IconRight = iconRight}
+		<IconRight class="size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
+	{/if}
+</div>
diff --git a/web/src/lib/components/ui/Link.stories.svelte b/web/src/lib/components/ui/Link.stories.svelte
new file mode 100644
index 00000000..c11ce13f
--- /dev/null
+++ b/web/src/lib/components/ui/Link.stories.svelte
@@ -0,0 +1,57 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import ArrowRight from "$icon/arrow-right";
+	import ExternalLink from "$icon/external-link";
+	import Link from "./Link.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Link",
+		component: Link,
+		tags: ["autodocs"],
+		argTypes: {
+			variant: {
+				control: { type: "select" },
+				options: ["default", "success", "warning", "danger"]
+			},
+			size: {
+				control: { type: "inline-radio" },
+				options: ["regular", "small"]
+			},
+			disabled: { control: "boolean" }
+		},
+		args: {
+			variant: "default",
+			size: "regular",
+			disabled: false
+		}
+	});
+</script>
+
+<!-- Link content comes through its `children` snippet, provided here as Story slot content. -->
+<Story name="Default">Link</Story>
+<Story name="Success" args={{ variant: "success" }}>Confirmed</Story>
+<Story name="Warning" args={{ variant: "warning" }}>Careful</Story>
+<Story name="Danger" args={{ variant: "danger" }}>Delete</Story>
+<Story name="Small" args={{ size: "small" }}>Small link</Story>
+<Story name="Disabled" args={{ disabled: true }}>Link</Story>
+
+<Story name="IconLeft" args={{ iconLeft: ExternalLink }}>Open in new tab</Story>
+<Story name="IconRight" args={{ iconRight: ArrowRight }}>Continue</Story>
+
+<Story name="Href" args={{ href: "/" }}>Go home</Story>
+
+<Story name="Variants">
+	<div class="flex items-center gap-4">
+		<Link variant="default">Default</Link>
+		<Link variant="success">Success</Link>
+		<Link variant="warning">Warning</Link>
+		<Link variant="danger">Danger</Link>
+	</div>
+</Story>
+
+<Story name="Sizes">
+	<div class="flex items-center gap-4">
+		<Link size="regular">Regular</Link>
+		<Link size="small">Small</Link>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Link.svelte b/web/src/lib/components/ui/Link.svelte
new file mode 100644
index 00000000..15c0fe06
--- /dev/null
+++ b/web/src/lib/components/ui/Link.svelte
@@ -0,0 +1,109 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const link = tv({
+		base: "inline-flex cursor-pointer select-none items-center gap-1 no-underline transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:underline focus-visible:outline-2 focus-visible:outline-offset-2",
+		variants: {
+			variant: {
+				default:
+					"text-foreground-link-default hover:text-foreground-link-hover focus-visible:outline-border-focus",
+				success:
+					"text-foreground-link-success hover:text-foreground-link-success-hover focus-visible:outline-foreground-link-success",
+				warning:
+					"text-foreground-link-warning hover:text-foreground-link-warning-hover focus-visible:outline-foreground-link-warning",
+				danger:
+					"text-foreground-link-danger hover:text-foreground-link-danger-hover focus-visible:outline-foreground-link-danger"
+			},
+			size: {
+				regular: "text-sm",
+				small: "text-xs"
+			},
+			disabled: {
+				true: "pointer-events-none opacity-50",
+				false: ""
+			}
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "regular",
+			disabled: false
+		}
+	});
+
+	export type LinkVariants = VariantProps<typeof link>;
+</script>
+
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import type { Component, Snippet } from "svelte";
+	import type {
+		HTMLAnchorAttributes,
+		HTMLButtonAttributes,
+		SvelteHTMLElements
+	} from "svelte/elements";
+
+	interface Props extends Omit<HTMLAnchorAttributes & HTMLButtonAttributes, "class" | "children"> {
+		variant?: LinkVariants["variant"];
+		size?: LinkVariants["size"];
+		href?: string;
+		type?: "button" | "submit" | "reset";
+		disabled?: boolean;
+		iconLeft?: Component<SvelteHTMLElements["svg"]>;
+		iconRight?: Component<SvelteHTMLElements["svg"]>;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		variant = "default",
+		size = "regular",
+		href,
+		type = "button",
+		disabled = false,
+		iconLeft,
+		iconRight,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const classes = $derived(link({ variant, size, disabled, class: className }));
+	const iconSize = $derived(size === "small" ? "size-3" : "size-4");
+</script>
+
+{#if href}
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- internal hrefs go through resolve(), external ones must pass through untouched -->
+	<a
+		href={href?.startsWith("/") ? resolve(href as "/") : href}
+		class={classes}
+		aria-disabled={disabled ? "true" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...rest}
+	>
+		{#if iconLeft}
+			{@const IconLeft = iconLeft}
+			<IconLeft class={iconSize} aria-hidden="true" />
+		{/if}
+		{#if children}
+			{@render children()}
+		{/if}
+		{#if iconRight}
+			{@const IconRight = iconRight}
+			<IconRight class={iconSize} aria-hidden="true" />
+		{/if}
+	</a>
+{:else}
+	<button {type} {disabled} class={classes} {...rest}>
+		{#if iconLeft}
+			{@const IconLeft = iconLeft}
+			<IconLeft class={iconSize} aria-hidden="true" />
+		{/if}
+		{#if children}
+			{@render children()}
+		{/if}
+		{#if iconRight}
+			{@const IconRight = iconRight}
+			<IconRight class={iconSize} aria-hidden="true" />
+		{/if}
+	</button>
+{/if}
diff --git a/web/src/lib/components/ui/Logo.stories.svelte b/web/src/lib/components/ui/Logo.stories.svelte
new file mode 100644
index 00000000..e4c1f3d5
--- /dev/null
+++ b/web/src/lib/components/ui/Logo.stories.svelte
@@ -0,0 +1,26 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Logo from "./Logo.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Logo",
+		component: Logo,
+		tags: ["autodocs"],
+		argTypes: {
+			wordmark: { control: "boolean" }
+		},
+		args: {
+			wordmark: false
+		}
+	});
+</script>
+
+<Story name="Icon" />
+<Story name="Wordmark" args={{ wordmark: true }} />
+
+<Story name="Both">
+	<div class="flex flex-col items-start gap-4">
+		<Logo />
+		<Logo wordmark />
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Logo.svelte b/web/src/lib/components/ui/Logo.svelte
new file mode 100644
index 00000000..e502c4d6
--- /dev/null
+++ b/web/src/lib/components/ui/Logo.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	interface Props {
+		wordmark?: boolean;
+		class?: string;
+	}
+
+	let { wordmark = false, class: className = "" }: Props = $props();
+</script>
+
+{#if wordmark}
+	<img src="/logos/logotype.svg" alt="tangled" class={`h-8 dark:invert ${className}`} />
+{:else}
+	<img src="/logos/dolly.svg" alt="tangled" class={`size-8 ${className}`} />
+{/if}
diff --git a/web/src/lib/components/ui/LogotypeSmall.svelte b/web/src/lib/components/ui/LogotypeSmall.svelte
index da0a3540..74ff73fb 100644
--- a/web/src/lib/components/ui/LogotypeSmall.svelte
+++ b/web/src/lib/components/ui/LogotypeSmall.svelte
@@ -1,4 +1,8 @@
 <span class="inline-flex items-center gap-2 select-none">
-	<img src="/logos/logotype.svg" alt="tangled" class="h-8 dark:invert" />
-	<span class="rounded bg-surface-muted px-1 text-xs font-normal not-italic"> alpha </span>
+	<img src="/logos/logotype.svg" alt="tangled" class="h-[26px] dark:invert" />
+	<span
+		class="rounded bg-background-subtle px-1 text-[10px] leading-4 font-normal not-italic text-foreground-default"
+	>
+		alpha
+	</span>
 </span>
diff --git a/web/src/lib/components/ui/Pagination.stories.svelte b/web/src/lib/components/ui/Pagination.stories.svelte
new file mode 100644
index 00000000..42ee833d
--- /dev/null
+++ b/web/src/lib/components/ui/Pagination.stories.svelte
@@ -0,0 +1,25 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Pagination from "./Pagination.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Pagination",
+		component: Pagination,
+		tags: ["autodocs"],
+		argTypes: {
+			page: { control: { type: "number" } },
+			total: { control: { type: "number" } }
+		},
+		args: {
+			page: 1,
+			total: 10
+		}
+	});
+</script>
+
+<Story name="FirstPage" args={{ page: 1, total: 10 }} />
+<Story name="MiddlePage" args={{ page: 5, total: 10 }} />
+<Story name="LastPage" args={{ page: 10, total: 10 }} />
+<Story name="FewPages" args={{ page: 2, total: 3 }} />
+<Story name="SinglePage" args={{ page: 1, total: 1 }} />
+<Story name="ManyPages" args={{ page: 12, total: 40 }} />
diff --git a/web/src/lib/components/ui/Pagination.svelte b/web/src/lib/components/ui/Pagination.svelte
new file mode 100644
index 00000000..b9ef77ff
--- /dev/null
+++ b/web/src/lib/components/ui/Pagination.svelte
@@ -0,0 +1,135 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const pagination = tv({
+		base: "flex items-center gap-1"
+	});
+
+	export const paginationNav = tv({
+		base: "flex size-8 items-center justify-center rounded text-foreground-muted transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:bg-background-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus disabled:pointer-events-none disabled:opacity-50"
+	});
+
+	export const paginationItem = tv({
+		base: "flex size-8 items-center justify-center rounded border text-sm transition-colors duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+		variants: {
+			active: {
+				true: "border-border-strong bg-background-inset font-medium text-foreground-default",
+				false: "border-border-default text-foreground-muted hover:bg-background-subtle"
+			}
+		},
+		defaultVariants: {
+			active: false
+		}
+	});
+
+	export type PaginationItemVariants = VariantProps<typeof paginationItem>;
+
+	type Item = number | "start-ellipsis" | "end-ellipsis";
+
+	function range(start: number, end: number): number[] {
+		return Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);
+	}
+
+	// Windowing per MUI's usePagination: always show the boundary pages
+	// (first/last) plus a sibling window around the current page, collapsing
+	// any gap into a single ellipsis.
+	function getPageItems(current: number, count: number): Item[] {
+		const siblingCount = 1;
+		const boundaryCount = 1;
+
+		const startPages = range(1, Math.min(boundaryCount, count));
+		const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+
+		const siblingsStart = Math.max(
+			Math.min(current - siblingCount, count - boundaryCount - siblingCount * 2 - 1),
+			boundaryCount + 2
+		);
+		const siblingsEnd = Math.min(
+			Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2),
+			endPages.length > 0 ? endPages[0] - 2 : count - 1
+		);
+
+		return [
+			...startPages,
+			...(siblingsStart > boundaryCount + 2
+				? (["start-ellipsis"] as const)
+				: boundaryCount + 1 < count - boundaryCount
+					? [boundaryCount + 1]
+					: []),
+			...range(siblingsStart, siblingsEnd),
+			...(siblingsEnd < count - boundaryCount - 1
+				? (["end-ellipsis"] as const)
+				: count - boundaryCount > boundaryCount
+					? [count - boundaryCount]
+					: []),
+			...endPages
+		];
+	}
+</script>
+
+<script lang="ts">
+	import ChevronLeft from "$icon/chevron-left";
+	import ChevronRight from "$icon/chevron-right";
+
+	interface Props {
+		page: number;
+		total: number;
+		onchange?: (page: number) => void;
+		class?: string;
+	}
+
+	let { page = $bindable(1), total, onchange, class: className }: Props = $props();
+
+	const count = $derived(Math.max(total, 1));
+	const items = $derived(getPageItems(Math.min(Math.max(page, 1), count), count));
+
+	function goTo(target: number) {
+		const next = Math.min(Math.max(target, 1), count);
+		if (next === page) return;
+		page = next;
+		onchange?.(next);
+	}
+</script>
+
+<nav aria-label="Pagination" class={pagination({ class: className })}>
+	<button
+		type="button"
+		class={paginationNav()}
+		disabled={page <= 1}
+		aria-label="Previous page"
+		onclick={() => goTo(page - 1)}
+	>
+		<ChevronLeft class="size-4" aria-hidden="true" />
+	</button>
+
+	{#each items as item, i (typeof item === "number" ? item : `${item}-${i}`)}
+		{#if typeof item === "number"}
+			<button
+				type="button"
+				class={paginationItem({ active: item === page })}
+				aria-current={item === page ? "page" : undefined}
+				aria-label={`Page ${item}`}
+				onclick={() => goTo(item)}
+			>
+				{item}
+			</button>
+		{:else}
+			<span
+				class="flex size-8 items-center justify-center text-foreground-subtle"
+				aria-hidden="true"
+			>
+				&hellip;
+			</span>
+		{/if}
+	{/each}
+
+	<button
+		type="button"
+		class={paginationNav()}
+		disabled={page >= count}
+		aria-label="Next page"
+		onclick={() => goTo(page + 1)}
+	>
+		<ChevronRight class="size-4" aria-hidden="true" />
+	</button>
+</nav>
diff --git a/web/src/lib/components/ui/Radio.stories.svelte b/web/src/lib/components/ui/Radio.stories.svelte
new file mode 100644
index 00000000..dd1a1e93
--- /dev/null
+++ b/web/src/lib/components/ui/Radio.stories.svelte
@@ -0,0 +1,34 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Radio from "./Radio.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Radio",
+		component: Radio,
+		tags: ["autodocs"],
+		argTypes: {
+			value: { control: "text" },
+			group: { control: "text" },
+			disabled: { control: "boolean" }
+		},
+		args: {
+			value: "a",
+			group: "b",
+			disabled: false
+		}
+	});
+</script>
+
+<!-- Radio content comes through its `children` snippet, provided here as Story slot content. -->
+<Story name="Default">Option</Story>
+<Story name="Checked" args={{ group: "a" }}>Option</Story>
+<Story name="Disabled" args={{ disabled: true }}>Option</Story>
+<Story name="Disabled checked" args={{ group: "a", disabled: true }}>Option</Story>
+
+<Story name="Group">
+	<div class="flex items-center gap-4">
+		<Radio value="a" group="a">Option</Radio>
+		<Radio value="b" group="a">Option</Radio>
+		<Radio value="c" group="a" disabled>Option</Radio>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Radio.svelte b/web/src/lib/components/ui/Radio.svelte
new file mode 100644
index 00000000..4bc3726d
--- /dev/null
+++ b/web/src/lib/components/ui/Radio.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLInputAttributes } from "svelte/elements";
+
+	interface Props extends Omit<HTMLInputAttributes, "type" | "class" | "value" | "children"> {
+		value: string;
+		group?: string;
+		disabled?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		value,
+		group = $bindable(undefined),
+		disabled = false,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const labelClasses = $derived(
+		`inline-flex items-center gap-2 cursor-pointer ${disabled ? "cursor-not-allowed text-foreground-disabled" : ""} ${className ?? ""}`
+	);
+</script>
+
+<label class={labelClasses}>
+	<span class="relative inline-flex size-4 shrink-0">
+		<input
+			type="radio"
+			{value}
+			bind:group
+			{disabled}
+			class="peer size-4 shrink-0 appearance-none rounded-full border border-border-strong bg-background-default transition-colors duration-150 hover:bg-background-subtle checked:border-foreground-default focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
+			{...rest}
+		/>
+		<span
+			class="pointer-events-none absolute inset-0 m-auto hidden size-2 rounded-full bg-foreground-default peer-checked:block peer-disabled:opacity-50"
+			aria-hidden="true"
+		></span>
+	</span>
+	{#if children}
+		<span>{@render children()}</span>
+	{/if}
+</label>
diff --git a/web/src/lib/components/ui/Scaffold.stories.svelte b/web/src/lib/components/ui/Scaffold.stories.svelte
new file mode 100644
index 00000000..6a324c4c
--- /dev/null
+++ b/web/src/lib/components/ui/Scaffold.stories.svelte
@@ -0,0 +1,38 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Scaffold from "./Scaffold.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Scaffold",
+		component: Scaffold,
+		tags: ["autodocs"],
+		argTypes: {
+			width: {
+				control: { type: "inline-radio" },
+				options: ["lg", "xl", "full"]
+			}
+		},
+		args: {
+			width: "lg"
+		}
+	});
+</script>
+
+<!-- Scaffold content comes through its `children` snippet, provided here as Story slot content. -->
+<Story name="Default">
+	<Scaffold>
+		<div class="rounded border border-border-default bg-background-default p-4">Content</div>
+	</Scaffold>
+</Story>
+
+<Story name="Wide" args={{ width: "xl" }}>
+	<Scaffold width="xl">
+		<div class="rounded border border-border-default bg-background-default p-4">Content</div>
+	</Scaffold>
+</Story>
+
+<Story name="Full" args={{ width: "full" }}>
+	<Scaffold width="full">
+		<div class="rounded border border-border-default bg-background-default p-4">Content</div>
+	</Scaffold>
+</Story>
diff --git a/web/src/lib/components/ui/Scaffold.svelte b/web/src/lib/components/ui/Scaffold.svelte
new file mode 100644
index 00000000..a661e204
--- /dev/null
+++ b/web/src/lib/components/ui/Scaffold.svelte
@@ -0,0 +1,39 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	// Echoes the +layout.svelte container idiom: a centered, padded section
+	// clamped to a max width (matches Figma node 35:791's single Content slot).
+	export const scaffold = tv({
+		base: "mx-auto w-full px-4 py-6",
+		variants: {
+			width: {
+				lg: "max-w-screen-lg",
+				xl: "max-w-screen-xl",
+				full: "max-w-full"
+			}
+		},
+		defaultVariants: {
+			width: "lg"
+		}
+	});
+
+	export type ScaffoldVariants = VariantProps<typeof scaffold>;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		width?: ScaffoldVariants["width"];
+		class?: string;
+		children: Snippet;
+	}
+
+	let { width = "lg", class: className, children }: Props = $props();
+
+	const classes = $derived(scaffold({ width, class: className }));
+</script>
+
+<div class={classes}>
+	{@render children()}
+</div>
diff --git a/web/src/lib/components/ui/Select.stories.svelte b/web/src/lib/components/ui/Select.stories.svelte
new file mode 100644
index 00000000..4c388f2f
--- /dev/null
+++ b/web/src/lib/components/ui/Select.stories.svelte
@@ -0,0 +1,65 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Select from "./Select.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Select",
+		component: Select,
+		tags: ["autodocs"],
+		argTypes: {
+			error: { control: "boolean" },
+			disabled: { control: "boolean" }
+		},
+		args: {
+			error: false,
+			disabled: false
+		}
+	});
+</script>
+
+<!-- Select's content comes through its `children` snippet, provided here as Story slot content. -->
+<Story name="Default">
+	<option value="" disabled selected>Select</option>
+	<option value="one">One</option>
+	<option value="two">Two</option>
+	<option value="three">Three</option>
+</Story>
+
+<Story name="Filled" args={{ value: "two" }}>
+	<option value="one">One</option>
+	<option value="two">Two</option>
+	<option value="three">Three</option>
+</Story>
+
+<Story name="Error" args={{ error: true, value: "two" }}>
+	<option value="one">One</option>
+	<option value="two">Two</option>
+	<option value="three">Three</option>
+</Story>
+
+<Story name="Disabled" args={{ disabled: true, value: "one" }}>
+	<option value="one">One</option>
+	<option value="two">Two</option>
+	<option value="three">Three</option>
+</Story>
+
+<Story name="States">
+	<div class="flex flex-col gap-3">
+		<Select>
+			<option value="" disabled selected>Select</option>
+			<option value="one">One</option>
+		</Select>
+		<Select value="one">
+			<option value="one">One</option>
+			<option value="two">Two</option>
+		</Select>
+		<Select error value="one">
+			<option value="one">One</option>
+			<option value="two">Two</option>
+		</Select>
+		<Select disabled value="one">
+			<option value="one">One</option>
+			<option value="two">Two</option>
+		</Select>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Select.svelte b/web/src/lib/components/ui/Select.svelte
new file mode 100644
index 00000000..5d3463e1
--- /dev/null
+++ b/web/src/lib/components/ui/Select.svelte
@@ -0,0 +1,61 @@
+<script module lang="ts">
+	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 outline-none transition-colors disabled:cursor-not-allowed",
+		variants: {
+			error: {
+				false:
+					"border-border-default focus:border-border-strong focus:ring-1 focus:ring-border-strong",
+				true: "border-border-danger bg-background-danger-subtle text-foreground-danger focus:border-border-focus-danger focus:ring-1 focus:ring-border-focus-danger"
+			},
+			disabled: {
+				false: "",
+				true: "bg-background-inset text-foreground-disabled"
+			}
+		},
+		defaultVariants: {
+			error: false,
+			disabled: false
+		}
+	});
+
+	export type SelectVariants = VariantProps<typeof select>;
+</script>
+
+<script lang="ts">
+	import ChevronDown from "$icon/chevron-down";
+	import type { HTMLSelectAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	interface Props extends Omit<HTMLSelectAttributes, "class" | "value"> {
+		value?: string;
+		error?: boolean;
+		disabled?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		value = $bindable(""),
+		error = false,
+		disabled = false,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	const classes = $derived(select({ error, disabled, class: className }));
+</script>
+
+<div class="relative">
+	<select bind:value {disabled} aria-invalid={error} class={classes} {...rest}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</select>
+	<ChevronDown
+		class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-foreground-subtle"
+		aria-hidden="true"
+	/>
+</div>
diff --git a/web/src/lib/components/ui/Tag.stories.svelte b/web/src/lib/components/ui/Tag.stories.svelte
new file mode 100644
index 00000000..71bc2144
--- /dev/null
+++ b/web/src/lib/components/ui/Tag.stories.svelte
@@ -0,0 +1,24 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Hash from "$icon/hash";
+	import Tag from "./Tag.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Tag",
+		component: Tag,
+		tags: ["autodocs"],
+		argTypes: {
+			color: {
+				control: { type: "inline-radio" },
+				options: ["default", "gray"]
+			}
+		},
+		args: {
+			color: "default"
+		}
+	});
+</script>
+
+<Story name="Default">Tag</Story>
+<Story name="Gray" args={{ color: "gray" }}>Tag</Story>
+<Story name="WithIcon" args={{ icon: Hash }}>topic</Story>
diff --git a/web/src/lib/components/ui/Tag.svelte b/web/src/lib/components/ui/Tag.svelte
new file mode 100644
index 00000000..1e65541d
--- /dev/null
+++ b/web/src/lib/components/ui/Tag.svelte
@@ -0,0 +1,46 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const tag = tv({
+		base: "inline-flex select-none items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium leading-none",
+		variants: {
+			color: {
+				default: "border border-border-default bg-background-default text-foreground-default",
+				gray: "bg-background-inset text-foreground-muted"
+			}
+		},
+		defaultVariants: {
+			color: "default"
+		}
+	});
+
+	export type TagVariants = VariantProps<typeof tag>;
+</script>
+
+<script lang="ts">
+	import type { Component, Snippet } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> {
+		color?: TagVariants["color"];
+		/** Optional leading icon component (e.g. `import Hash from "$icon/hash"`). */
+		icon?: Component<SvelteHTMLElements["svg"]>;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { color = "default", icon, class: className, children, ...rest }: Props = $props();
+
+	const classes = $derived(tag({ color, class: className }));
+	const Icon = $derived(icon);
+</script>
+
+<span class={classes} {...rest}>
+	{#if Icon}
+		<Icon class="size-3" aria-hidden="true" />
+	{/if}
+	{#if children}
+		{@render children()}
+	{/if}
+</span>
diff --git a/web/src/lib/components/ui/Textarea.stories.svelte b/web/src/lib/components/ui/Textarea.stories.svelte
new file mode 100644
index 00000000..23441593
--- /dev/null
+++ b/web/src/lib/components/ui/Textarea.stories.svelte
@@ -0,0 +1,44 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Textarea from "./Textarea.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Textarea",
+		component: Textarea,
+		tags: ["autodocs"],
+		argTypes: {
+			error: { control: "boolean" },
+			disabled: { control: "boolean" },
+			loading: { control: "boolean" },
+			readonly: { control: "boolean" },
+			placeholder: { control: "text" },
+			rows: { control: "number" }
+		},
+		args: {
+			error: false,
+			disabled: false,
+			loading: false,
+			readonly: false,
+			placeholder: "Placeholder"
+		}
+	});
+</script>
+
+<Story name="Default" />
+<Story name="Focus" args={{ autofocus: true }} />
+<Story name="Filled" args={{ value: "Some notes go here" }} />
+<Story name="Error" args={{ error: true, value: "Invalid value" }} />
+<Story name="Disabled" args={{ disabled: true, value: "Can't edit this" }} />
+<Story name="Read-only" args={{ readonly: true, value: "Read-only content" }} />
+<Story name="Loading" args={{ loading: true, value: "Checking..." }} />
+
+<Story name="States">
+	<div class="flex w-64 flex-col gap-3">
+		<Textarea placeholder="Default" />
+		<Textarea placeholder="Filled" value="Some notes go here" />
+		<Textarea placeholder="Error" error value="Invalid value" />
+		<Textarea placeholder="Disabled" disabled value="Can't edit this" />
+		<Textarea placeholder="Read-only" readonly value="Read-only content" />
+		<Textarea placeholder="Loading" loading value="Checking..." />
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Textarea.svelte b/web/src/lib/components/ui/Textarea.svelte
new file mode 100644
index 00000000..b91f3c5a
--- /dev/null
+++ b/web/src/lib/components/ui/Textarea.svelte
@@ -0,0 +1,69 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const textareaField = tv({
+		base: "min-h-20 w-full resize-y rounded border bg-background-default px-3 py-2 text-sm transition-colors placeholder:text-foreground-placeholder focus:outline-none",
+		variants: {
+			error: {
+				false:
+					"border-border-default focus:border-border-strong focus:ring-1 focus:ring-border-strong",
+				true: "border-border-danger bg-background-danger-subtle text-foreground-danger focus:border-border-focus-danger focus:ring-1 focus:ring-border-focus-danger"
+			},
+			disabled: {
+				false: "",
+				true: "cursor-not-allowed resize-none bg-background-inset text-foreground-disabled"
+			},
+			readonly: {
+				false: "",
+				true: "cursor-default resize-none bg-background-subtle"
+			}
+		},
+		defaultVariants: {
+			error: false,
+			disabled: false,
+			readonly: false
+		}
+	});
+
+	export type TextareaFieldVariants = VariantProps<typeof textareaField>;
+</script>
+
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import Spinner from "./Spinner.svelte";
+
+	interface Props extends Omit<HTMLTextareaAttributes, "class" | "value"> {
+		value?: string;
+		error?: boolean;
+		disabled?: boolean;
+		loading?: boolean;
+		readonly?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(""),
+		error = false,
+		disabled = false,
+		loading = false,
+		readonly = false,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const classes = $derived(textareaField({ error, disabled, readonly, class: className }));
+</script>
+
+<div class="relative">
+	<textarea
+		bind:value
+		{disabled}
+		{readonly}
+		aria-invalid={error}
+		aria-busy={loading}
+		class={classes}
+		{...rest}></textarea>
+	{#if loading}
+		<Spinner class="absolute right-2 top-2 size-4" />
+	{/if}
+</div>
diff --git a/web/src/lib/components/ui/Thumbnail.stories.svelte b/web/src/lib/components/ui/Thumbnail.stories.svelte
new file mode 100644
index 00000000..e81c7a13
--- /dev/null
+++ b/web/src/lib/components/ui/Thumbnail.stories.svelte
@@ -0,0 +1,30 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Thumbnail from "./Thumbnail.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Thumbnail",
+		component: Thumbnail,
+		tags: ["autodocs"],
+		argTypes: {
+			title: { control: "text" }
+		},
+		args: {
+			title: "Design System"
+		}
+	});
+</script>
+
+<Story name="Default">
+	<div class="w-96">
+		<Thumbnail />
+	</div>
+</Story>
+
+<Story name="Custom content">
+	<div class="w-96">
+		<Thumbnail>
+			<span class="text-2xl font-bold text-foreground-default sm:text-3xl">Thumbnail</span>
+		</Thumbnail>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Thumbnail.svelte b/web/src/lib/components/ui/Thumbnail.svelte
new file mode 100644
index 00000000..8ab0cae3
--- /dev/null
+++ b/web/src/lib/components/ui/Thumbnail.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import Logo from "./Logo.svelte";
+
+	interface Props {
+		title?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { title, class: className, children }: Props = $props();
+</script>
+
+<div
+	class={`relative flex aspect-video flex-col gap-6 overflow-hidden rounded-lg border border-border-default bg-background-subtle p-8 ${className ?? ""}`}
+>
+	<div
+		class="pointer-events-none absolute inset-0 bg-[radial-gradient(var(--color-border-strong)_1px,transparent_1px)] bg-[length:12px_12px] [mask-image:linear-gradient(to_bottom,transparent,black)] opacity-60"
+		aria-hidden="true"
+	></div>
+	<div class="relative z-10 flex flex-col gap-6">
+		<Logo wordmark />
+		{#if children}
+			{@render children()}
+		{:else if title}
+			<span class="text-2xl font-bold text-foreground-default sm:text-3xl">{title}</span>
+		{/if}
+	</div>
+</div>
diff --git a/web/src/lib/components/ui/Typography.stories.svelte b/web/src/lib/components/ui/Typography.stories.svelte
new file mode 100644
index 00000000..c17c25b9
--- /dev/null
+++ b/web/src/lib/components/ui/Typography.stories.svelte
@@ -0,0 +1,52 @@
+<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: ["h1", "h2", "h3", "h4", "body", "body-strong", "small", "caption", "mono"]
+			},
+			as: { control: "text" }
+		},
+		args: {
+			variant: "body"
+		}
+	});
+</script>
+
+<!-- Typography content comes through its `children` snippet, provided here as Story slot content. -->
+<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="Body" args={{ variant: "body" }}>
+	Tangled is a social-enabled, decentralized code collaboration platform built on the AT Protocol.
+</Story>
+<Story name="BodyStrong" args={{ variant: "body-strong" }}>
+	Tangled is a social-enabled, decentralized code collaboration platform.
+</Story>
+<Story name="Small" args={{ variant: "small" }}>Last updated 2 hours ago.</Story>
+<Story name="Caption" args={{ variant: "caption" }}>Caption 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>
+
+<Story name="Scale">
+	<div class="flex flex-col gap-3">
+		<Typography variant="h1">Heading 1</Typography>
+		<Typography variant="h2">Heading 2</Typography>
+		<Typography variant="h3">Heading 3</Typography>
+		<Typography variant="h4">Heading 4</Typography>
+		<Typography variant="body">Body paragraph text.</Typography>
+		<Typography variant="body-strong">Body strong paragraph text.</Typography>
+		<Typography variant="small">Small supporting text.</Typography>
+		<Typography variant="caption">Caption text.</Typography>
+		<Typography variant="mono">const scale = "type";</Typography>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Typography.svelte b/web/src/lib/components/ui/Typography.svelte
new file mode 100644
index 00000000..1c3ae50d
--- /dev/null
+++ b/web/src/lib/components/ui/Typography.svelte
@@ -0,0 +1,62 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+	import type { SvelteHTMLElements } from "svelte/elements";
+
+	// Scale sourced from Figma "Font Styles" (node 1:134): Heading 1-4 map to
+	// h1-h4, the "Paragraph Regular" size maps to body/body-strong (weight
+	// axis only), "Paragraph Small"/"Paragraph Mini" map to small/caption, and
+	// the monospace specimen maps to mono.
+	export const typography = tv({
+		base: "font-sans text-foreground-default",
+		variants: {
+			variant: {
+				h1: "text-2xl font-bold leading-tight",
+				h2: "text-xl font-bold leading-tight",
+				h3: "text-lg font-semibold leading-snug",
+				h4: "text-base font-semibold leading-snug",
+				body: "text-base font-normal leading-normal",
+				"body-strong": "text-base font-semibold leading-normal",
+				small: "text-sm font-normal leading-normal text-foreground-muted",
+				caption: "text-xs font-normal leading-normal text-foreground-subtle",
+				mono: "font-mono text-sm font-normal leading-normal"
+			}
+		},
+		defaultVariants: {
+			variant: "body"
+		}
+	});
+
+	export type TypographyVariants = VariantProps<typeof typography>;
+
+	const defaultTag = {
+		h1: "h1",
+		h2: "h2",
+		h3: "h3",
+		h4: "h4",
+		body: "p",
+		"body-strong": "p",
+		small: "span",
+		caption: "span",
+		mono: "code"
+	} as const satisfies Record<NonNullable<TypographyVariants["variant"]>, keyof SvelteHTMLElements>;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		variant?: TypographyVariants["variant"];
+		as?: keyof SvelteHTMLElements;
+		class?: string;
+		children: Snippet;
+	}
+
+	let { variant = "body", as, class: className, children }: Props = $props();
+
+	const tag = $derived(as ?? defaultTag[variant ?? "body"]);
+	const classes = $derived(typography({ variant, class: className }));
+</script>
+
+<svelte:element this={tag} class={classes}>
+	{@render children()}
+</svelte:element>
diff --git a/web/src/lib/components/ui/User.stories.svelte b/web/src/lib/components/ui/User.stories.svelte
new file mode 100644
index 00000000..3c5b54a4
--- /dev/null
+++ b/web/src/lib/components/ui/User.stories.svelte
@@ -0,0 +1,39 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import User from "./User.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/User",
+		component: User,
+		tags: ["autodocs"],
+		argTypes: {
+			handle: { control: "text" },
+			src: { control: "text" },
+			size: {
+				control: { type: "inline-radio" },
+				options: ["sm", "md", "lg"]
+			},
+			showImage: { control: "boolean" },
+			showText: { control: "boolean" }
+		},
+		args: {
+			handle: "user.tld",
+			size: "md",
+			showImage: true,
+			showText: true
+		}
+	});
+</script>
+
+<Story name="Default" />
+<Story name="With avatar" args={{ src: "https://avatars.githubusercontent.com/u/1" }} />
+<Story name="Image only" args={{ showText: false }} />
+<Story name="Text only" args={{ showImage: false }} />
+
+<Story name="Sizes">
+	<div class="flex flex-col items-start gap-3">
+		<User size="lg" />
+		<User size="md" />
+		<User size="sm" />
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/User.svelte b/web/src/lib/components/ui/User.svelte
new file mode 100644
index 00000000..cf239e4d
--- /dev/null
+++ b/web/src/lib/components/ui/User.svelte
@@ -0,0 +1,64 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const user = tv({
+		slots: {
+			avatar: "",
+			handle: "truncate text-foreground-default"
+		},
+		variants: {
+			size: {
+				sm: {
+					avatar: "size-5",
+					handle: "text-xs"
+				},
+				md: {
+					avatar: "size-6",
+					handle: "text-sm"
+				},
+				lg: {
+					avatar: "size-8",
+					handle: "text-base"
+				}
+			}
+		},
+		defaultVariants: {
+			size: "md"
+		}
+	});
+
+	export type UserVariants = VariantProps<typeof user>;
+</script>
+
+<script lang="ts">
+	import Avatar from "./Avatar.svelte";
+
+	interface Props {
+		handle?: string;
+		src?: string;
+		size?: UserVariants["size"];
+		showImage?: boolean;
+		showText?: boolean;
+		class?: string;
+	}
+
+	let {
+		handle,
+		src,
+		size = "md",
+		showImage = true,
+		showText = true,
+		class: className
+	}: Props = $props();
+
+	const slots = $derived(user({ size }));
+</script>
+
+<span class={`inline-flex items-center gap-2 ${className ?? ""}`}>
+	{#if showImage}
+		<Avatar {src} {handle} size={slots.avatar()} />
+	{/if}
+	{#if showText && handle}
+		<span class={slots.handle()}>{handle}</span>
+	{/if}
+</span>
-- 
2.51.2