From e4b3195c4285e58883692decaa6feef5e56c015c Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 15 Jul 2026 12:15:37 +0200
Subject: [PATCH] web/ui/components: first batch of visual improvements

Signed-off-by: eti <eti@eti.tf>
---
 web/src/app.css                               | 41 +++++++++
 .../components/profile/FollowButton.svelte    |  3 +-
 web/src/lib/components/shell/Topbar.svelte    |  2 +-
 .../lib/components/ui/Button.stories.svelte   |  4 +-
 web/src/lib/components/ui/Button.svelte       | 78 ++++++++++------
 web/src/lib/components/ui/ButtonCard.svelte   | 70 +++++++-------
 web/src/lib/components/ui/ButtonGroup.svelte  |  6 +-
 web/src/lib/components/ui/Checkbox.svelte     | 15 ++-
 .../lib/components/ui/Field.stories.svelte    | 92 ++++++++++---------
 web/src/lib/components/ui/Field.svelte        |  6 +-
 web/src/lib/components/ui/Input.svelte        |  2 +-
 web/src/lib/components/ui/Logo.stories.svelte | 27 +++++-
 web/src/lib/components/ui/Logo.svelte         | 29 +++++-
 web/src/routes/+error.svelte                  |  3 +-
 14 files changed, 257 insertions(+), 121 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index f19f899d..0bec7dc2 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -80,6 +80,47 @@
 	--color-shadow-inner-subtle: #e5e7eb;
 
 	--shadow-menu: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+	/* --- alpha --- */
+	--color-alpha-light-5: color-mix(in srgb, var(--color-background-default) 5%, transparent);
+	--color-alpha-light-10: color-mix(in srgb, var(--color-background-default) 10%, transparent);
+	--color-alpha-light-15: color-mix(in srgb, var(--color-background-default) 15%, transparent);
+	--color-alpha-light-20: color-mix(in srgb, var(--color-background-default) 20%, transparent);
+	--color-alpha-light-25: color-mix(in srgb, var(--color-background-default) 25%, transparent);
+	--color-alpha-light-30: color-mix(in srgb, var(--color-background-default) 30%, transparent);
+	--color-alpha-light-35: color-mix(in srgb, var(--color-background-default) 35%, transparent);
+	--color-alpha-light-40: color-mix(in srgb, var(--color-background-default) 40%, transparent);
+	--color-alpha-light-45: color-mix(in srgb, var(--color-background-default) 45%, transparent);
+	--color-alpha-light-50: color-mix(in srgb, var(--color-background-default) 50%, transparent);
+	--color-alpha-light-55: color-mix(in srgb, var(--color-background-default) 55%, transparent);
+	--color-alpha-light-60: color-mix(in srgb, var(--color-background-default) 60%, transparent);
+	--color-alpha-light-65: color-mix(in srgb, var(--color-background-default) 65%, transparent);
+	--color-alpha-light-70: color-mix(in srgb, var(--color-background-default) 70%, transparent);
+	--color-alpha-light-75: color-mix(in srgb, var(--color-background-default) 75%, transparent);
+	--color-alpha-light-80: color-mix(in srgb, var(--color-background-default) 80%, transparent);
+	--color-alpha-light-85: color-mix(in srgb, var(--color-background-default) 85%, transparent);
+	--color-alpha-light-90: color-mix(in srgb, var(--color-background-default) 90%, transparent);
+	--color-alpha-light-95: color-mix(in srgb, var(--color-background-default) 95%, transparent);
+
+	--color-alpha-dark-5: color-mix(in srgb, var(--color-foreground-default) 5%, transparent);
+	--color-alpha-dark-10: color-mix(in srgb, var(--color-foreground-default) 10%, transparent);
+	--color-alpha-dark-15: color-mix(in srgb, var(--color-foreground-default) 15%, transparent);
+	--color-alpha-dark-20: color-mix(in srgb, var(--color-foreground-default) 20%, transparent);
+	--color-alpha-dark-25: color-mix(in srgb, var(--color-foreground-default) 25%, transparent);
+	--color-alpha-dark-30: color-mix(in srgb, var(--color-foreground-default) 30%, transparent);
+	--color-alpha-dark-35: color-mix(in srgb, var(--color-foreground-default) 35%, transparent);
+	--color-alpha-dark-40: color-mix(in srgb, var(--color-foreground-default) 40%, transparent);
+	--color-alpha-dark-45: color-mix(in srgb, var(--color-foreground-default) 45%, transparent);
+	--color-alpha-dark-50: color-mix(in srgb, var(--color-foreground-default) 50%, transparent);
+	--color-alpha-dark-55: color-mix(in srgb, var(--color-foreground-default) 55%, transparent);
+	--color-alpha-dark-60: color-mix(in srgb, var(--color-foreground-default) 60%, transparent);
+	--color-alpha-dark-65: color-mix(in srgb, var(--color-foreground-default) 65%, transparent);
+	--color-alpha-dark-70: color-mix(in srgb, var(--color-foreground-default) 70%, transparent);
+	--color-alpha-dark-75: color-mix(in srgb, var(--color-foreground-default) 75%, transparent);
+	--color-alpha-dark-80: color-mix(in srgb, var(--color-foreground-default) 80%, transparent);
+	--color-alpha-dark-85: color-mix(in srgb, var(--color-foreground-default) 85%, transparent);
+	--color-alpha-dark-90: color-mix(in srgb, var(--color-foreground-default) 90%, transparent);
+	--color-alpha-dark-95: color-mix(in srgb, var(--color-foreground-default) 95%, transparent);
 }
 
 @layer base {
diff --git a/web/src/lib/components/profile/FollowButton.svelte b/web/src/lib/components/profile/FollowButton.svelte
index 4389c095..4249503c 100644
--- a/web/src/lib/components/profile/FollowButton.svelte
+++ b/web/src/lib/components/profile/FollowButton.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from "$app/paths";
 	import Button from "$lib/components/ui/Button.svelte";
 	import UserRoundPlus from "$icon/user-round-plus";
 	import UserRoundMinus from "$icon/user-round-minus";
@@ -72,7 +73,7 @@
 
 {#if !isSelf}
 	{#if !signedIn}
-		<Button href="/login" variant="default" {size} class="w-full gap-2">
+		<Button href={resolve("/login")} variant="default" {size} class="w-full gap-2">
 			<UserRoundPlus class="size-4" aria-hidden="true" /><span>Follow</span>
 		</Button>
 	{:else}
diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index f52e09ba..28599f60 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -66,7 +66,7 @@
 					Login
 				</a>
 				<span class="text-sm text-foreground-muted">or</span>
-				<Button variant="primary" size="sm" href="/signup" class="px-3">
+				<Button variant="primary" size="sm" href={resolve("/signup")} class="px-3">
 					<span>Join now</span>
 					<ArrowRight class="size-3.5" aria-hidden="true" />
 				</Button>
diff --git a/web/src/lib/components/ui/Button.stories.svelte b/web/src/lib/components/ui/Button.stories.svelte
index f902e6a6..a3bcf5cb 100644
--- a/web/src/lib/components/ui/Button.stories.svelte
+++ b/web/src/lib/components/ui/Button.stories.svelte
@@ -9,7 +9,7 @@
 		argTypes: {
 			variant: {
 				control: { type: "select" },
-				options: ["default", "primary", "ghost", "flat", "danger", "success", "warning"]
+				options: ["default", "primary", "ghost", "danger", "success", "warning"]
 			},
 			size: {
 				control: { type: "inline-radio" },
@@ -38,7 +38,7 @@
 <Story name="Disabled" args={{ disabled: true }}>Button</Story>
 <Story name="Link" args={{ href: "/" }}>Go home</Story>
 
-<Story name="Sizes">
+<Story name="Sizes" asChild>
 	<div class="flex items-center gap-3">
 		<Button size="sm">Small</Button>
 		<Button size="md">Medium</Button>
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 7b68819d..e8d2cfd7 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -2,29 +2,37 @@
 	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 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+		base: "inline-flex cursor-pointer select-none items-center justify-center overflow-hidden rounded-l-(--btn-radius-l) rounded-r-(--btn-radius-r) [--btn-radius:var(--radius-sm)] [--btn-radius-l:var(--btn-radius)] [--btn-radius-r:var(--btn-radius)] no-underline transition-colors duration-150 ease-in-out \
+		       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-default bg-background-default text-foreground-default hover:bg-background-subtle focus-visible:outline-border-focus",
+					"border border-border-default bg-background-default text-foreground-default \
+					 hover:bg-background-subtle focus-visible:outline-border-focus",
 				primary:
-					"border border-border-success bg-background-success-emphasis text-foreground-on-emphasis hover:bg-background-success-emphasis-hover focus-visible:outline-background-success-emphasis",
+					"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",
+					"bg-transparent text-foreground-muted \
+					 hover:bg-background-inset focus-visible:outline-border-focus",
 				// 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-border-default bg-background-default text-foreground-danger hover:bg-background-subtle focus-visible:outline-foreground-danger",
+					"border border-border-default bg-background-default text-foreground-danger \
+					 hover:bg-background-subtle focus-visible:outline-foreground-danger",
 				success:
-					"border border-border-default bg-background-default text-foreground-success hover:bg-background-subtle focus-visible:outline-foreground-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"
+					"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-3 py-1.5 text-sm",
-				lg: "min-h-10 gap-2.5 px-6 py-2 text-base"
+				lg: "min-h-10 gap-2.5 px-4 py-2 text-base"
 			}
 		},
 		compoundVariants: [
@@ -32,12 +40,16 @@
 			{
 				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-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"
+					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] 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",
 				class:
-					"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"
+					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-alpha-dark-25)] before:transition-all before:duration-150 \
+					 active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)] \
+					 disabled:active:translate-y-0"
 			}
 		],
 		defaultVariants: {
@@ -50,17 +62,22 @@
 </script>
 
 <script lang="ts">
-	import { resolve } from "$app/paths";
-	import type { Snippet } from "svelte";
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import type { ResolvedPathname } from "$app/types";
+	import type { Component, Snippet } from "svelte";
+	import type {
+		HTMLAnchorAttributes,
+		HTMLButtonAttributes,
+		SvelteHTMLElements
+	} from "svelte/elements";
 	import Spinner from "./Spinner.svelte";
 
 	interface Props extends Omit<HTMLAnchorAttributes & HTMLButtonAttributes, "class" | "children"> {
 		variant?: ButtonVariants["variant"];
 		size?: ButtonVariants["size"];
-		href?: string;
+		href?: ResolvedPathname;
 		type?: "button" | "submit" | "reset";
 		disabled?: boolean;
+		icon?: Component<SvelteHTMLElements["svg"]>;
 		class?: string;
 		loading?: boolean;
 		spinnerClass?: string;
@@ -73,6 +90,7 @@
 		href,
 		type = "button",
 		disabled = false,
+		icon,
 		class: className,
 		loading = false,
 		spinnerClass,
@@ -82,29 +100,35 @@
 
 	const classes = $derived(button({ variant, size, class: className }));
 	const spinnerSize = $derived(spinnerClass ?? (size === "lg" ? "size-5" : "size-4"));
+	const iconSize = $derived(size === "lg" ? "size-5" : "size-4");
+	const Icon = $derived(icon);
 </script>
 
+{#snippet content()}
+	{#if loading}
+		<Spinner class={spinnerSize} />
+	{:else}
+		{#if Icon}
+			<Icon class="{iconSize} shrink-0" aria-hidden="true" />
+		{/if}
+		{#if children}
+			{@render children()}
+		{/if}
+	{/if}
+{/snippet}
+
 {#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}
+		{href}
 		class={classes}
 		aria-disabled={disabled || loading ? "true" : undefined}
 		tabindex={disabled ? -1 : undefined}
 		{...rest}
 	>
-		{#if loading}
-			<Spinner class={spinnerSize} />
-		{:else if children}
-			{@render children()}
-		{/if}
+		{@render content()}
 	</a>
 {:else}
 	<button {type} disabled={disabled || loading} class={classes} aria-busy={loading} {...rest}>
-		{#if loading}
-			<Spinner class={spinnerSize} />
-		{:else if children}
-			{@render children()}
-		{/if}
+		{@render content()}
 	</button>
 {/if}
diff --git a/web/src/lib/components/ui/ButtonCard.svelte b/web/src/lib/components/ui/ButtonCard.svelte
index df5f120d..5cab483c 100644
--- a/web/src/lib/components/ui/ButtonCard.svelte
+++ b/web/src/lib/components/ui/ButtonCard.svelte
@@ -2,13 +2,24 @@
 	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",
+		base: "flex gap-3 rounded-(--btn-radius) [--btn-radius:var(--radius-sm)] px-4 py-3 w-48 h-40 cursor-pointer select-none no-underline transition-colors duration-150 ease-in-out \
+               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"
+				ghost: "border border-transparent bg-transparent hover:bg-background-inset"
 			}
 		},
+		compoundVariants: [
+			// raised variants draw inset depth via a ::before layer.
+			{
+				variant: "default",
+				class:
+					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-[max(calc(var(--btn-radius)-2px),0px)] 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"
+			}
+		],
 		defaultVariants: {
 			variant: "default"
 		}
@@ -18,7 +29,7 @@
 </script>
 
 <script lang="ts">
-	import { resolve } from "$app/paths";
+	import type { ResolvedPathname } from "$app/types";
 	import type { Component, Snippet } from "svelte";
 	import type {
 		HTMLAnchorAttributes,
@@ -28,7 +39,7 @@
 
 	interface Props extends Omit<HTMLAnchorAttributes & HTMLButtonAttributes, "class" | "children"> {
 		variant?: ButtonCardVariants["variant"];
-		href?: string;
+		href?: ResolvedPathname;
 		type?: "button" | "submit" | "reset";
 		disabled?: boolean;
 		title?: string;
@@ -55,47 +66,34 @@
 	const Icon = $derived(icon);
 </script>
 
+{#snippet content()}
+	<div class="flex flex-col items-start gap-1.5">
+		{#if title}
+			<div class="flex flex-row gap-2 items-center">
+				{#if Icon}
+					<Icon class="size-4 shrink-0" aria-hidden="true" />
+				{/if}
+				<span class="text-sm font-medium text-foreground-default">{title}</span>
+			</div>
+		{/if}
+		{#if description}
+			<span class="text-xs text-foreground-muted">{description}</span>
+		{/if}
+	</div>
+{/snippet}
+
 {#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}
+		{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}
+		{@render (children ?? content)()}
 	</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}
+		{@render (children ?? content)()}
 	</button>
 {/if}
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
index 4838bb14..ac5a55da 100644
--- a/web/src/lib/components/ui/ButtonGroup.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -7,7 +7,11 @@
 			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"
+					"gap-0 \
+					 [&>*]:relative \
+					 [&>*:not(:first-child)]:[--btn-radius-l:0px] [&>*:not(:first-child)]:-ml-px \
+					 [&>*:not(:last-child)]:[--btn-radius-r:0px] \
+					 [&>*:hover]:z-10 [&>*:focus-visible]:z-10"
 			}
 		},
 		defaultVariants: {
diff --git a/web/src/lib/components/ui/Checkbox.svelte b/web/src/lib/components/ui/Checkbox.svelte
index 0cf875d7..4fb159ef 100644
--- a/web/src/lib/components/ui/Checkbox.svelte
+++ b/web/src/lib/components/ui/Checkbox.svelte
@@ -22,7 +22,7 @@
 	}: Props = $props();
 
 	const labelClasses = $derived(
-		`inline-flex items-center gap-2 cursor-pointer ${disabled ? "cursor-not-allowed text-foreground-disabled" : ""} ${className ?? ""}`
+		`inline-flex items-center gap-2 ${disabled ? "text-foreground-disabled hover:pointer-events-none" : "cursor-pointer"} ${className ?? ""}`
 	);
 </script>
 
@@ -33,15 +33,22 @@
 			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"
+			class="peer size-4 shrink-0 appearance-none rounded border border-border-default bg-background-default transition-colors duration-150 \
+			       hover:bg-background-inset hover:cursor-pointer \
+				   checked:border-foreground-default checked:bg-foreground-default checked:hover:bg-gray-700 \
+				   indeterminate:border-foreground-default indeterminate:bg-foreground-default indeterminate:hover:bg-gray-700 \
+				   focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default \
+				   disabled:hover:bg-background-default disabled:hover:pointer-events-none"
 			{...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"
+			class="pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-foreground-on-emphasis \
+			       peer-checked:block peer-indeterminate:hidden peer-disabled:text-foreground-disabled peer-disabled:hover:cursor-default"
 			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"
+			class="pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-foreground-on-emphasis \
+			       peer-indeterminate:block peer-disabled:text-foreground-disabled peer-disabled:hover:cursor-default"
 			aria-hidden="true"
 		/>
 	</span>
diff --git a/web/src/lib/components/ui/Field.stories.svelte b/web/src/lib/components/ui/Field.stories.svelte
index 35baa6e6..f0592292 100644
--- a/web/src/lib/components/ui/Field.stories.svelte
+++ b/web/src/lib/components/ui/Field.stories.svelte
@@ -22,55 +22,65 @@
 
 <!-- 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>
+	{#snippet template(args)}
+		<Field {...args} 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>
+	{/snippet}
 </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 name="LabelOnly" args={{ subtitle: undefined }}>
+	{#snippet template(args)}
+		<Field {...args} 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>
+	{/snippet}
 </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 name="Required" args={{ required: true }}>
+	{#snippet template(args)}
+		<Field {...args} 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>
+	{/snippet}
 </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>
+	{#snippet template(args)}
+		<Field {...args} 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>
+	{/snippet}
 </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>
+	{#snippet template(args)}
+		<Field {...args} 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>
+	{/snippet}
 </Story>
diff --git a/web/src/lib/components/ui/Field.svelte b/web/src/lib/components/ui/Field.svelte
index ce7d6337..e2ab58d9 100644
--- a/web/src/lib/components/ui/Field.svelte
+++ b/web/src/lib/components/ui/Field.svelte
@@ -27,15 +27,15 @@
 
 <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 for={id} class="text-xs font-medium tracking-wide text-foreground-default uppercase">
 			{label}
 			{#if required}
-				<span class="text-foreground-subtle">*</span>
+				<span class="text-foreground-danger">*</span>
 			{/if}
 		</label>
 	{/if}
 	{@render children({ id })}
 	{#if subtitle}
-		<p class="text-xs text-foreground-subtle">{subtitle}</p>
+		<p class="text-xs text-foreground-muted">{subtitle}</p>
 	{/if}
 </div>
diff --git a/web/src/lib/components/ui/Input.svelte b/web/src/lib/components/ui/Input.svelte
index 8b007375..5498db0e 100644
--- a/web/src/lib/components/ui/Input.svelte
+++ b/web/src/lib/components/ui/Input.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const inputField = tv({
-		base: "flex items-center gap-2 rounded border bg-background-default px-3 py-2 text-sm transition-colors",
+		base: "flex items-center gap-2 rounded border bg-background-default px-2 py-1 min-h-8 transition-colors",
 		variants: {
 			error: {
 				false:
diff --git a/web/src/lib/components/ui/Logo.stories.svelte b/web/src/lib/components/ui/Logo.stories.svelte
index e4c1f3d5..99e290d1 100644
--- a/web/src/lib/components/ui/Logo.stories.svelte
+++ b/web/src/lib/components/ui/Logo.stories.svelte
@@ -18,9 +18,34 @@
 <Story name="Icon" />
 <Story name="Wordmark" args={{ wordmark: true }} />
 
-<Story name="Both">
+<Story name="Both" asChild>
 	<div class="flex flex-col items-start gap-4">
 		<Logo />
 		<Logo wordmark />
 	</div>
 </Story>
+
+<Story name="Colors" asChild>
+	<div class="flex flex-col items-start gap-4">
+		<Logo class="text-foreground-muted" />
+		<Logo class="text-foreground-success" />
+		<Logo class="text-foreground-danger" />
+		<Logo class="text-foreground-info" />
+		<Logo class="text-foreground-warning" />
+	</div>
+</Story>
+
+<Story name="Wordmark Colors" asChild>
+	<div class="flex flex-col items-start gap-4">
+		<Logo wordmark class="text-foreground-muted" />
+		<Logo wordmark class="text-foreground-success" />
+		<Logo wordmark class="text-foreground-info" />
+	</div>
+</Story>
+
+<Story name="On Emphasis" asChild>
+	<div class="bg-background-success-emphasis flex flex-col items-start gap-4 rounded p-4">
+		<Logo class="text-foreground-on-emphasis" />
+		<Logo wordmark class="text-foreground-on-emphasis" />
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Logo.svelte b/web/src/lib/components/ui/Logo.svelte
index e502c4d6..7cc1a17d 100644
--- a/web/src/lib/components/ui/Logo.svelte
+++ b/web/src/lib/components/ui/Logo.svelte
@@ -8,7 +8,32 @@
 </script>
 
 {#if wordmark}
-	<img src="/logos/logotype.svg" alt="tangled" class={`h-8 dark:invert ${className}`} />
+	<svg
+		class={`h-8 ${className}`}
+		viewBox="0 0 118 32"
+		fill="currentColor"
+		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-label="tangled"
+	>
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M78.6118 9.75728C79.2832 9.75733 79.8454 9.87208 80.2983 10.101C80.7513 10.3249 81.1161 10.6064 81.3921 10.9448C81.6732 11.278 81.8895 11.6064 82.0405 11.9292H82.1655V9.91353H85.4702V22.0307C85.4702 23.0305 85.2201 23.8668 84.7202 24.5385C84.2203 25.2154 83.5273 25.7251 82.6421 26.0688C81.762 26.4125 80.7488 26.5844 79.603 26.5844C78.5252 26.5844 77.6012 26.4385 76.8306 26.1469C76.065 25.8553 75.4555 25.462 75.0024 24.9672C74.5495 24.4726 74.2551 23.9237 74.1196 23.3198L77.1978 22.9057C77.2915 23.1243 77.4401 23.3303 77.6431 23.5229C77.8461 23.7206 78.1147 23.8824 78.4478 24.0073C78.7861 24.1321 79.1973 24.1947 79.6812 24.1948C80.4049 24.1948 81.0016 24.0227 81.4702 23.6792C81.9441 23.3355 82.1811 22.7701 82.1812 21.9838V19.7885H82.0405C81.8947 20.1217 81.6758 20.4371 81.3843 20.7338C81.0927 21.0306 80.7174 21.273 80.2593 21.4604C79.8012 21.6477 79.2546 21.7416 78.6196 21.7417C77.7188 21.7417 76.8981 21.5332 76.1587 21.1167C75.4244 20.6948 74.8383 20.0514 74.4009 19.187C73.9686 18.3172 73.7524 17.2181 73.7524 15.8901C73.7524 14.5308 73.9738 13.3952 74.4165 12.4838C74.8592 11.5726 75.4479 10.89 76.1821 10.437C76.9216 9.98403 77.7318 9.75728 78.6118 9.75728ZM79.6733 12.4057C79.1269 12.4058 78.6663 12.5544 78.2915 12.851C77.9166 13.1426 77.6326 13.5491 77.4399 14.0698C77.2472 14.5906 77.1509 15.1922 77.1509 15.8745C77.1509 16.5671 77.2472 17.1662 77.4399 17.6713C77.6378 18.1712 77.9218 18.5594 78.2915 18.8354C78.6663 19.106 79.1269 19.2416 79.6733 19.2417C80.2096 19.2417 80.663 19.1087 81.0327 18.8432C81.4076 18.5724 81.6942 18.1868 81.8921 17.687C82.0952 17.1818 82.1968 16.5776 82.1968 15.8745C82.1968 15.1714 82.0978 14.5619 81.8999 14.0463C81.702 13.5256 81.4155 13.1218 81.0405 12.8354C80.6656 12.5491 80.2096 12.4057 79.6733 12.4057Z" />
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M98.7397 9.75728C99.531 9.75733 100.268 9.88506 100.95 10.1401C101.637 10.39 102.236 10.7679 102.747 11.2729C103.262 11.778 103.663 12.4137 103.95 13.1792C104.236 13.9395 104.379 14.8303 104.379 15.851V16.7651H96.2085V16.7729C96.2085 17.3666 96.3179 17.8797 96.5366 18.312C96.7606 18.7441 97.0758 19.0776 97.4819 19.312C97.888 19.5461 98.3694 19.6635 98.9263 19.6635C99.2959 19.6635 99.6347 19.6113 99.9419 19.5073C100.249 19.4032 100.512 19.2467 100.731 19.0385C100.95 18.8303 101.116 18.5749 101.231 18.2729L104.309 18.476C104.153 19.2155 103.832 19.8615 103.348 20.4135C102.869 20.9603 102.249 21.3876 101.489 21.6948C100.734 21.9967 99.8609 22.1479 98.8716 22.1479C97.6376 22.1478 96.5754 21.8977 95.6851 21.3979C94.7998 20.8928 94.1173 20.179 93.6382 19.2573C93.159 18.3302 92.9194 17.2338 92.9194 15.9682C92.9194 14.7339 93.159 13.6505 93.6382 12.7182C94.1173 11.7861 94.792 11.0593 95.6616 10.5385C96.5365 10.0179 97.5629 9.75728 98.7397 9.75728ZM98.7935 12.2417C98.2886 12.2417 97.8411 12.3591 97.4507 12.5932C97.0654 12.8223 96.7632 13.1324 96.5444 13.5229C96.3427 13.8784 96.2325 14.2718 96.2124 14.7026H101.247C101.247 14.2235 101.142 13.7989 100.934 13.4292C100.726 13.0595 100.437 12.7702 100.067 12.562C99.7024 12.3486 99.2776 12.2417 98.7935 12.2417Z" />
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M54.187 9.75728C54.8536 9.7573 55.4918 9.83543 56.1011 9.99165C56.7155 10.1479 57.26 10.3902 57.7339 10.7182C58.2128 11.0462 58.5897 11.4685 58.8657 11.9838C59.1417 12.4942 59.2798 13.1063 59.2798 13.8198V21.9135H56.1245V20.2495H56.0308C55.8381 20.6244 55.5802 20.9552 55.2573 21.2417C54.9345 21.5229 54.5463 21.7443 54.0933 21.9057C53.6402 22.0619 53.1166 22.1401 52.5229 22.1401C51.7574 22.1401 51.075 22.0072 50.4761 21.7417C49.8772 21.4709 49.4031 21.0723 49.0542 20.5463C48.7105 20.0152 48.5386 19.3535 48.5386 18.562C48.5386 17.8954 48.661 17.3354 48.9058 16.8823C49.1505 16.4292 49.4839 16.0646 49.9058 15.7885C50.3276 15.5125 50.8068 15.3041 51.3433 15.1635C51.8849 15.0229 52.4527 14.9239 53.0464 14.8667C53.7442 14.7937 54.3069 14.726 54.7339 14.6635C55.1608 14.5958 55.4709 14.4968 55.6636 14.3667C55.8561 14.2365 55.9526 14.0436 55.9526 13.7885V13.7417C55.9526 13.247 55.7963 12.864 55.4839 12.5932C55.1767 12.3224 54.7389 12.187 54.1714 12.187C53.5726 12.187 53.0958 12.3199 52.7417 12.5854C52.3876 12.8458 52.1532 13.174 52.0386 13.5698L48.9604 13.3198C49.1167 12.5907 49.424 11.9603 49.8823 11.4292C50.3406 10.8928 50.9319 10.4812 51.6558 10.1948C52.3848 9.90318 53.2288 9.75728 54.187 9.75728ZM55.9761 16.351C55.872 16.4187 55.7285 16.4813 55.5464 16.5385C55.3694 16.5906 55.1687 16.6401 54.9448 16.687C54.721 16.7286 54.4968 16.7677 54.2729 16.8042C54.0491 16.8354 53.8458 16.8641 53.6636 16.8901C53.273 16.9474 52.9318 17.0386 52.6401 17.1635C52.3485 17.2885 52.1219 17.4578 51.9604 17.6713C51.799 17.8797 51.7183 18.1401 51.7183 18.4526C51.7183 18.9056 51.8824 19.2521 52.2104 19.4917C52.5437 19.7259 52.9658 19.8432 53.4761 19.8432C53.9655 19.8432 54.398 19.7468 54.7729 19.5542C55.1479 19.3563 55.4423 19.0906 55.6558 18.7573C55.8693 18.424 55.9761 18.0463 55.9761 17.6245V16.351Z" />
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M117.127 21.9135H113.846V19.9917H113.706C113.549 20.3249 113.328 20.6558 113.042 20.9838C112.76 21.3067 112.393 21.575 111.94 21.7885C111.492 22.0021 110.945 22.1088 110.299 22.1088C109.388 22.1088 108.562 21.8744 107.823 21.4057C107.088 20.9318 106.505 20.2364 106.073 19.3198C105.646 18.398 105.432 17.2676 105.432 15.9292C105.432 14.5542 105.654 13.4109 106.096 12.4995C106.539 11.5829 107.128 10.8979 107.862 10.4448C108.601 9.98651 109.411 9.75728 110.292 9.75728C110.963 9.75729 111.523 9.87189 111.971 10.101C112.424 10.325 112.789 10.6063 113.065 10.9448C113.346 11.2781 113.56 11.6063 113.706 11.9292H113.807V5.91451H117.127V21.9135ZM111.354 12.4057C110.807 12.4057 110.346 12.5542 109.971 12.851C109.596 13.1479 109.312 13.5594 109.12 14.0854C108.927 14.6114 108.831 15.2209 108.831 15.9135C108.831 16.6114 108.927 17.2287 109.12 17.7651C109.318 18.2963 109.601 18.713 109.971 19.0151C110.346 19.3119 110.807 19.4604 111.354 19.4604C111.89 19.4604 112.344 19.3145 112.713 19.0229C113.088 18.726 113.375 18.3119 113.573 17.7807C113.776 17.2495 113.877 16.627 113.877 15.9135C113.877 15.2 113.778 14.5802 113.581 14.0542C113.383 13.5282 113.096 13.1218 112.721 12.8354C112.346 12.549 111.89 12.4057 111.354 12.4057Z" />
+		<path d="M45.353 9.91353H47.6108V12.4135H45.353V18.226C45.353 18.5332 45.3999 18.7729 45.4937 18.9448C45.5874 19.1114 45.7177 19.2286 45.8843 19.2963C46.0561 19.364 46.2541 19.3979 46.478 19.3979C46.6342 19.3979 46.7906 19.3849 46.9468 19.3588C47.103 19.3276 47.2228 19.3042 47.3062 19.2885L47.8296 21.7651C47.6629 21.8172 47.4285 21.8771 47.1265 21.9448C46.8244 22.0177 46.4571 22.062 46.0249 22.0776C45.2229 22.1088 44.5196 22.002 43.9155 21.7573C43.3167 21.5125 42.8504 21.1322 42.5171 20.6167C42.1838 20.1011 42.0197 19.4499 42.0249 18.6635V12.4135H40.3843V9.91353H42.0249V7.03951H45.353V9.91353Z" />
+		<path d="M90.7808 18.3198C90.786 18.6999 90.8537 18.9761 90.9839 19.1479C91.1193 19.3145 91.3486 19.3979 91.6714 19.3979C91.838 19.3927 91.9683 19.3823 92.062 19.3667C92.1557 19.351 92.2339 19.3302 92.2964 19.3042L92.8276 21.726C92.6558 21.7781 92.4448 21.8328 92.1948 21.8901C91.9501 21.9422 91.6192 21.976 91.2026 21.9917C89.9268 22.0385 88.9839 21.7988 88.3745 21.2729C87.7652 20.7417 87.4579 19.9056 87.4526 18.7651V5.91451H90.7808V18.3198Z" />
+		<path d="M68.1138 9.75728C68.947 9.75728 69.6737 9.93962 70.2935 10.3042C70.9132 10.6687 71.395 11.1897 71.7388 11.8667C72.0825 12.5385 72.2544 13.3407 72.2544 14.2729V21.9135H68.9263V14.8667C68.9315 14.1324 68.744 13.5593 68.3638 13.1479C67.9836 12.7313 67.46 12.5229 66.7935 12.5229C66.3456 12.5229 65.9497 12.6193 65.606 12.812C65.2675 13.0047 65.0018 13.286 64.8091 13.6557C64.6216 14.0203 64.5252 14.4605 64.52 14.976V21.9135H61.1919V9.91353H64.3638V12.0307H64.5044C64.77 11.3329 65.2154 10.7807 65.8403 10.3745C66.4653 9.96305 67.2232 9.75728 68.1138 9.75728Z" />
+		<path d="M21.0971 30.866C20.0566 30.8575 19.2628 30.5542 18.4016 30.0269C17.1668 29.3753 16.2237 28.2808 15.5497 27.0739C14.4789 28.4065 13.0476 29.215 11.4453 29.6718C10.763 29.8705 9.56809 30.0721 7.58737 29.3523C4.73277 28.3905 2.65342 25.4114 2.88973 22.3758C2.8465 21.1175 3.30391 19.8825 3.95227 18.8208C2.22264 17.8897 0.812251 16.3266 0.272149 14.4098C-0.0560728 13.3604 -0.0422712 12.2299 0.0787624 11.1512C0.512215 8.60429 2.41696 6.38956 4.86912 5.59294C5.8479 3.35574 7.98378 1.68743 10.4037 1.34778C12.0104 1.12338 13.6735 1.46075 15.0792 2.27979C17.1272 0.00158572 20.6952 -0.671697 23.4195 0.727793C25.4978 1.72322 26.9839 3.80003 27.3447 6.06471C29.3222 6.85928 30.9877 8.47971 31.6413 10.5368C32.0784 11.8104 32.0929 13.2132 31.8098 14.5209C31.3041 16.5615 29.8679 18.2987 28.009 19.2482C28.0135 19.6113 29.2037 22.2296 29.0047 24.2056C28.9612 26.676 27.399 29.0172 25.2325 30.1544C23.9683 30.8945 22.4702 30.8805 21.0971 30.866ZM15.1733 23.755C16.9256 23.5593 18.0743 22.0269 18.9665 20.6469C19.3883 20.0182 19.7105 19.3146 20.0306 18.6454C20.4458 19.027 20.7975 19.7461 21.4541 19.9173C22.1457 20.1333 22.9566 19.9579 23.38 19.3277C24.1902 17.8118 23.7908 15.9827 23.319 14.4119C23.0284 13.5097 22.6472 12.5841 21.9218 11.9446C22.0765 10.85 21.4299 9.73834 20.5106 9.16542C19.7272 9.79198 18.5352 9.78821 17.7794 9.11795C16.3309 10.5997 15.0034 10.5505 13.7212 9.37618C13.4331 9.11226 12.8832 10.9871 10.9535 9.92506C9.84488 10.8567 8.98526 11.753 8.22356 13.0435C7.48342 14.4347 6.70829 15.6703 6.64151 17.1811C6.6094 18.0641 7.29731 18.9892 8.22942 18.9174C9.16105 19.0009 9.7952 18.0813 10.5006 17.6993C10.6058 18.9316 10.7243 20.2556 11.1395 21.4587C11.6161 23.0155 13.2947 24.005 14.8835 23.7784C14.9959 23.7696 15.1733 23.7549 15.1733 23.755ZM16.0828 19.1062C15.2306 18.5823 15.6407 17.4452 15.6066 16.6193C15.6914 15.6227 15.7594 14.575 16.2061 13.667C16.6788 13.0197 17.8318 13.2694 17.8827 14.0999C17.8488 14.9353 17.4664 15.767 17.5121 16.633C17.4129 17.3561 17.5839 18.1684 17.265 18.8293C17.0033 19.195 16.4703 19.3013 16.0828 19.1062ZM12.3606 18.6302C11.5578 18.1933 11.8129 17.0941 11.687 16.3298C11.7914 15.445 11.7045 14.3226 12.4431 13.7021C13.1653 13.1969 14.1485 14.0621 13.8069 14.8564C13.4426 15.8602 13.6814 16.957 13.6891 17.9748C13.5512 18.5752 12.911 18.894 12.3606 18.6302Z" />
+	</svg>
 {:else}
-	<img src="/logos/dolly.svg" alt="tangled" class={`size-8 ${className}`} />
+	<svg
+		class={`size-8 ${className}`}
+		viewBox="0 0 32 32"
+		fill="currentColor"
+		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-label="tangled"
+	>
+		<path d="M21.0971 30.866C20.0566 30.8575 19.2628 30.5542 18.4016 30.0269C17.1668 29.3753 16.2237 28.2808 15.5497 27.0739C14.4789 28.4065 13.0476 29.215 11.4453 29.6718C10.763 29.8705 9.56809 30.0721 7.58737 29.3523C4.73277 28.3905 2.65342 25.4114 2.88973 22.3758C2.8465 21.1175 3.30392 19.8825 3.95228 18.8208C2.22264 17.8897 0.81225 16.3266 0.272148 14.4098C-0.0560731 13.3604 -0.042271 12.2299 0.0787626 11.1512C0.512215 8.60429 2.41697 6.38956 4.86912 5.59294C5.8479 3.35574 7.98378 1.68743 10.4037 1.34778C12.0104 1.12338 13.6735 1.46075 15.0792 2.27979C17.1272 0.00158595 20.6952 -0.671697 23.4195 0.727793C25.4978 1.72322 26.9839 3.80003 27.3447 6.06471C29.3222 6.85928 30.9877 8.47971 31.6413 10.5368C32.0784 11.8104 32.0928 13.2132 31.8098 14.5209C31.3041 16.5615 29.8679 18.2987 28.009 19.2482C28.0135 19.6113 29.2037 22.2296 29.0047 24.2056C28.9612 26.676 27.399 29.0172 25.2325 30.1544C23.9683 30.8945 22.4702 30.8805 21.0971 30.866ZM15.1733 23.755C16.9256 23.5593 18.0743 22.0269 18.9665 20.6469C19.3883 20.0182 19.7105 19.3146 20.0306 18.6454C20.4458 19.0271 20.7975 19.7461 21.4541 19.9173C22.1457 20.1333 22.9566 19.9579 23.38 19.3277C24.1902 17.8118 23.7908 15.9827 23.319 14.4119C23.0284 13.5097 22.6472 12.5841 21.9218 11.9446C22.0765 10.85 21.4299 9.73834 20.5106 9.16542C19.7272 9.79198 18.5352 9.78821 17.7794 9.11795C16.3309 10.5997 15.0034 10.5505 13.7212 9.37618C13.4331 9.11226 12.8832 10.9871 10.9535 9.92506C9.84488 10.8567 8.98526 11.753 8.22356 13.0435C7.48342 14.4347 6.70829 15.6703 6.64151 17.1811C6.6094 18.0641 7.29731 18.9892 8.22942 18.9174C9.16105 19.0009 9.7952 18.0813 10.5006 17.6993C10.6058 18.9316 10.7243 20.2556 11.1395 21.4587C11.6161 23.0155 13.2947 24.005 14.8835 23.7784C14.9959 23.7696 15.1733 23.7549 15.1733 23.755ZM16.0828 19.1062C15.2306 18.5823 15.6407 17.4452 15.6066 16.6193C15.6914 15.6227 15.7594 14.575 16.2061 13.667C16.6788 13.0197 17.8318 13.2694 17.8827 14.0999C17.8488 14.9353 17.4664 15.767 17.5121 16.633C17.4129 17.3561 17.5839 18.1684 17.265 18.8293C17.0033 19.195 16.4703 19.3013 16.0828 19.1062ZM12.3606 18.6302C11.5578 18.1933 11.8129 17.0941 11.687 16.3298C11.7914 15.445 11.7045 14.3226 12.4431 13.7021C13.1653 13.1969 14.1485 14.0621 13.8069 14.8564C13.4426 15.8602 13.6814 16.957 13.6891 17.9748C13.5512 18.5752 12.911 18.894 12.3606 18.6302Z" />
+	</svg>
 {/if}
diff --git a/web/src/routes/+error.svelte b/web/src/routes/+error.svelte
index cba5243c..ab92e6a8 100644
--- a/web/src/routes/+error.svelte
+++ b/web/src/routes/+error.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from "$app/paths";
 	import { page } from "$app/state";
 	import Button from "$lib/components/ui/Button.svelte";
 
@@ -56,7 +57,7 @@
 			</h1>
 			<p class="text-foreground-muted">{copy.message}</p>
 			<div class="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
-				<Button href="/" variant="default">Back to home</Button>
+				<Button href={resolve("/")} variant="default">Back to home</Button>
 			</div>
 		</div>
 	</div>
-- 
2.51.2