diff --git a/bun.lock b/bun.lock
index 9c145de..ca93c4a 100644
--- a/bun.lock
+++ b/bun.lock
@@ -11,8 +11,7 @@
         "drizzle-orm": "^0.45.3",
       },
       "devDependencies": {
-        "@fontsource-variable/onest": "^5.3.1",
-        "@fontsource-variable/unbounded": "^5.3.0",
+        "@fontsource-variable/archivo": "^5.3.0",
         "@internationalized/date": "^3.12.4",
         "@lucide/svelte": "^1.48.0",
         "@sveltejs/adapter-vercel": "^6.3.4",
@@ -131,9 +130,7 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.12", "", {}, "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww=="],
 
-    "@fontsource-variable/onest": ["@fontsource-variable/onest@5.3.1", "", {}, "sha512-xaaw6G4HDB2/RczsWLD/2bnib4ykmQlTlBUN3GOEOiyErilZukQWVJG95h9zwAy0i8KY+QzDa+COPfqhI72Acw=="],
-
-    "@fontsource-variable/unbounded": ["@fontsource-variable/unbounded@5.3.0", "", {}, "sha512-ea565Ncn4r7gPdBEHcmaF31V11hDfkL7b/JCklLobQbMfbu2ZZQrVWNgdeEFWFLqNh36yhieZWOgxdAnMTzrLg=="],
+    "@fontsource-variable/archivo": ["@fontsource-variable/archivo@5.3.0", "", {}, "sha512-HogK8FJelrD1o7TlZlkIVtHgc20bO5PZRWE7mUeUTdMN055alznQV6/00J00IBeu8FQAH4s3zW9UJNvKExXf+g=="],
 
     "@internationalized/date": ["@internationalized/date@3.12.4", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-M1dEn4c1U1HsSlaVR8upZtSqvXrTkHDfv18H01uCSJyjVLDxnBR38v/fMxecmlwXKR4i9HeZcmgQAPE6A+aGJQ=="],
 
diff --git a/package.json b/package.json
index 8dd58c5..7cb9838 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,7 @@
     "drizzle-orm": "^0.45.3"
   },
   "devDependencies": {
-    "@fontsource-variable/onest": "^5.3.1",
-    "@fontsource-variable/unbounded": "^5.3.0",
+    "@fontsource-variable/archivo": "^5.3.0",
     "@internationalized/date": "^3.12.4",
     "@lucide/svelte": "^1.48.0",
     "@sveltejs/adapter-vercel": "^6.3.4",
diff --git a/src/lib/assets/favicon.svg b/src/lib/assets/favicon.svg
index c0f5513..d9b85bc 100644
--- a/src/lib/assets/favicon.svg
+++ b/src/lib/assets/favicon.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="9" fill="#cc2e0b"/><circle cx="16" cy="16" r="9" fill="#fff"/><circle cx="16" cy="16" r="5.5" fill="#3d7dd8"/><circle cx="14" cy="14" r="1.8" fill="#fff" opacity=".85"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#16181d"/><circle cx="16" cy="16" r="8.5" fill="none" stroke="#fff" stroke-width="3"/><circle cx="16" cy="16" r="3.5" fill="#e3350d"/></svg>
diff --git a/src/lib/components/compare/stat-comparison.svelte b/src/lib/components/compare/stat-comparison.svelte
index 6a59046..aaf6894 100644
--- a/src/lib/components/compare/stat-comparison.svelte
+++ b/src/lib/components/compare/stat-comparison.svelte
@@ -31,15 +31,15 @@
 	<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
 		{#each rows as row (row.label)}
 			{@const best = Math.max(...row.values)}
-			<figure class="rounded-2xl border bg-card p-4">
+			<figure class="rounded-lg border bg-card p-4">
 				<figcaption class="text-sm font-medium">{row.label}</figcaption>
 				<ul class="mt-3 grid gap-1.5">
 					{#each series as s, i (s.name)}
 						{@const value = row.values[i]}
 						<li class="group grid grid-cols-[1fr_2.5rem] items-center gap-2" title="{s.name}: {value} {row.label}">
-							<span class="h-2 overflow-hidden rounded-full bg-muted">
+							<span class="h-2 overflow-hidden rounded-sm bg-muted">
 								<span
-									class="block h-full rounded-full transition-[width] duration-500"
+									class="block h-full rounded-sm transition-[width] duration-500"
 									style:width="{(value / row.max) * 100}%"
 									style:background-color={s.color}
 								></span>
diff --git a/src/lib/components/dex/dex-table.svelte b/src/lib/components/dex/dex-table.svelte
new file mode 100644
index 0000000..e30521a
--- /dev/null
+++ b/src/lib/components/dex/dex-table.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+	import ArrowDownIcon from "@lucide/svelte/icons/arrow-down";
+	import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
+	import PokemonArt from "$lib/components/pokemon/pokemon-art.svelte";
+	import TypeBadge from "$lib/components/pokemon/type-badge.svelte";
+	import { statTotal, type DexListEntry, type DexQuery, type SortKey } from "$lib/dex/list.js";
+	import { dexNumber } from "$lib/pokemon/format.js";
+	import { STAT_KEYS, STAT_LABELS, type StatKey } from "$lib/pokemon/types.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		entries,
+		query,
+		onsort,
+		eager = 0,
+	}: {
+		entries: DexListEntry[];
+		query: DexQuery;
+		onsort: (sort: SortKey, desc: boolean) => void;
+		eager?: number;
+	} = $props();
+
+	// Narrow screens only have room for one figure, so show whichever stat is being sorted on.
+	const compactKey = $derived<StatKey | "total">(
+		(STAT_KEYS as readonly string[]).includes(query.sort) ? (query.sort as StatKey) : "total",
+	);
+	const compactLabel = $derived(compactKey === "total" ? "Total" : STAT_LABELS[compactKey].short);
+
+	function figure(entry: DexListEntry, key: StatKey | "total"): number {
+		return key === "total" ? statTotal(entry) : entry.stats[STAT_KEYS.indexOf(key)];
+	}
+
+	function sortBy(key: SortKey) {
+		// Figures read best largest first; dex number and name read best ascending.
+		const numeric = key !== "dex" && key !== "name";
+		onsort(key, query.sort === key ? !query.desc : numeric);
+	}
+
+	function ariaSort(key: SortKey) {
+		if (query.sort !== key) return undefined;
+		return query.desc ? "descending" : "ascending";
+	}
+</script>
+
+{#snippet header(key: SortKey, label: string, title: string, className: string)}
+	<th scope="col" aria-sort={ariaSort(key)} class={cn("p-0 font-medium", className)}>
+		<button
+			type="button"
+			{title}
+			onclick={() => sortBy(key)}
+			class={cn(
+				"inline-flex h-9 w-full items-center gap-1 px-2 hover:text-foreground",
+				key === "dex" || key === "name" ? "justify-start" : "justify-end",
+				query.sort === key && "text-foreground",
+			)}
+		>
+			{label}
+			{#if query.sort === key}
+				{#if query.desc}
+					<ArrowDownIcon class="size-3" aria-hidden="true" />
+				{:else}
+					<ArrowUpIcon class="size-3" aria-hidden="true" />
+				{/if}
+			{/if}
+		</button>
+	</th>
+{/snippet}
+
+<div class="overflow-clip rounded-lg border bg-card">
+	<table class="w-full text-sm">
+		<thead class="border-b bg-muted text-xs text-muted-foreground lg:sticky lg:top-14 lg:z-10">
+			<tr>
+				{@render header("dex", "No.", "Sort by dex number", "hidden w-20 pl-2 sm:table-cell")}
+				{@render header("name", "Pokémon", "Sort by name", "pl-2 text-left sm:pl-0")}
+				<th scope="col" class="hidden w-40 px-2 text-left font-medium md:table-cell">Type</th>
+				{#each STAT_KEYS as key (key)}
+					{@render header(key, STAT_LABELS[key].short, `Sort by ${STAT_LABELS[key].long}`, "hidden w-14 lg:table-cell")}
+				{/each}
+				{@render header("total", "Total", "Sort by base stat total", "hidden w-16 pr-2 lg:table-cell")}
+				{@render header(compactKey, compactLabel, "Sort by this figure", "w-16 pr-2 lg:hidden")}
+			</tr>
+		</thead>
+		<tbody class="divide-y">
+			{#each entries as entry, index (entry.id)}
+				<tr class="relative transition-colors hover:bg-muted/60" style:--tint="var(--type-{entry.types[0]})">
+					<td class="hidden py-1.5 pl-4 text-muted-foreground tabular font-condensed sm:table-cell">
+						{dexNumber(entry.speciesId)}
+					</td>
+					<td class="py-1.5 pr-2 pl-4 sm:pl-2">
+						<div class="flex items-center gap-3">
+							<span class="tint-field grid size-11 shrink-0 place-items-center rounded-md p-0.5">
+								<PokemonArt
+									id={entry.id}
+									name=""
+									width={96}
+									widths={[96, 192]}
+									sizes="44px"
+									eager={index < eager}
+								/>
+							</span>
+							<div class="min-w-0">
+								<p class="text-xs text-muted-foreground tabular font-condensed sm:hidden">{dexNumber(entry.speciesId)}</p>
+								<a
+									href="/pokemon/{entry.slug}"
+									class="font-medium after:absolute after:inset-0 hover:underline hover:underline-offset-4 focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-ring"
+									data-sveltekit-preload-data="hover"
+								>
+									{entry.name}
+								</a>
+								<div class="mt-1 flex gap-1 md:hidden">
+									{#each entry.types as type (type)}
+										<TypeBadge {type} size="sm" />
+									{/each}
+								</div>
+							</div>
+						</div>
+					</td>
+					<td class="hidden px-2 md:table-cell">
+						<div class="flex gap-1">
+							{#each entry.types as type (type)}
+								<TypeBadge {type} size="sm" />
+							{/each}
+						</div>
+					</td>
+					{#each STAT_KEYS as key, i (key)}
+						<td class={cn("hidden px-2 text-right tabular lg:table-cell", query.sort === key ? "font-semibold" : "text-muted-foreground")}>
+							{entry.stats[i]}
+						</td>
+					{/each}
+					<td class="hidden pr-4 pl-2 text-right font-semibold tabular lg:table-cell">{statTotal(entry)}</td>
+					<td class="pr-4 pl-2 text-right font-semibold tabular lg:hidden">{figure(entry, compactKey)}</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
diff --git a/src/lib/components/dex/dex-tile.svelte b/src/lib/components/dex/dex-tile.svelte
index 5a7d59e..54005fd 100644
--- a/src/lib/components/dex/dex-tile.svelte
+++ b/src/lib/components/dex/dex-tile.svelte
@@ -14,28 +14,23 @@
 
 <a
 	href="/pokemon/{entry.slug}"
-	class="group block rounded-2xl outline-offset-4"
+	class="group block rounded-lg border bg-card p-1.5 transition-colors hover:border-(--tint)"
 	style:--tint="var(--type-{entry.types[0]})"
 	data-sveltekit-preload-data="hover"
 >
-	<div class="tint-field relative overflow-hidden rounded-2xl p-[8%]">
-		<PokemonArt
-			id={entry.id}
-			name={entry.name}
-			{eager}
-			class="transition-transform duration-300 ease-out group-hover:-translate-y-1 group-hover:scale-[1.04]"
-		/>
+	<div class="tint-field relative overflow-hidden rounded-md p-[8%]">
+		<PokemonArt id={entry.id} name={entry.name} {eager} />
 		{#if highlight}
 			<span
-				class="absolute top-2 right-2 rounded-full bg-background/80 px-2 py-0.5 text-xs font-medium tabular backdrop-blur"
+				class="absolute top-1.5 right-1.5 rounded-sm bg-card px-1.5 py-0.5 text-xs font-medium tabular"
 			>
 				<span class="text-muted-foreground">{highlight.label}</span>
 				{highlight.value}
 			</span>
 		{/if}
 	</div>
-	<div class="px-1 pt-2.5">
-		<p class="text-xs text-muted-foreground tabular">{dexNumber(entry.speciesId)}</p>
+	<div class="px-1.5 pt-2 pb-1">
+		<p class="text-xs text-muted-foreground tabular font-condensed">{dexNumber(entry.speciesId)}</p>
 		<p class="leading-snug font-medium text-balance group-hover:underline group-hover:underline-offset-4">
 			{entry.name}
 		</p>
diff --git a/src/lib/components/dex/type-filter.svelte b/src/lib/components/dex/type-filter.svelte
index 52aba4b..f72d4c2 100644
--- a/src/lib/components/dex/type-filter.svelte
+++ b/src/lib/components/dex/type-filter.svelte
@@ -16,7 +16,7 @@
 <div
 	role="group"
 	aria-label="Filter by type"
-	class="-mx-4 flex gap-1.5 overflow-x-auto px-4 pb-1 [scrollbar-width:none] sm:mx-0 sm:flex-wrap sm:overflow-visible sm:px-0 sm:pb-0"
+	class="-mx-4 flex gap-1 overflow-x-auto px-4 pb-1 [scrollbar-width:none] sm:mx-0 sm:grid sm:grid-cols-6 sm:overflow-visible sm:px-0 sm:pb-0 lg:grid-cols-9"
 >
 	{#each TYPES as type (type)}
 		{@const active = selected.includes(type)}
@@ -26,14 +26,14 @@
 			onclick={() => toggle(type)}
 			style:--chip="var(--type-{type})"
 			class={cn(
-				"inline-flex h-7 shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors",
+				"inline-flex h-8 shrink-0 items-center gap-2 rounded-sm border px-2.5 text-xs font-medium transition-colors",
 				active
 					? cn("border-transparent bg-(--chip)", typeTextClass(type))
 					: "bg-card text-muted-foreground hover:border-(--chip) hover:text-foreground",
 			)}
 		>
 			<span
-				class={cn("size-2 rounded-full", active ? "bg-current opacity-60" : "bg-(--chip)")}
+				class={cn("h-3 w-1 rounded-full", active ? "bg-current opacity-50" : "bg-(--chip)")}
 				aria-hidden="true"
 			></span>
 			{titleCase(type)}
diff --git a/src/lib/components/pokemon/damage-class-icon.svelte b/src/lib/components/pokemon/damage-class-icon.svelte
index eac28d4..0fcd5c1 100644
--- a/src/lib/components/pokemon/damage-class-icon.svelte
+++ b/src/lib/components/pokemon/damage-class-icon.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <span
-	class={cn("inline-flex h-5 items-center gap-1 rounded-full px-2 text-[0.6875rem] font-medium", {
+	class={cn("inline-flex h-5 items-center gap-1 rounded-sm px-1.5 text-[0.6875rem] font-medium", {
 		"bg-[#f4d9cf] text-[#8a2f12] dark:bg-[#4a2418] dark:text-[#ffb59c]": value === "physical",
 		"bg-[#d7e2f7] text-[#233f86] dark:bg-[#1c2d52] dark:text-[#a8c2ff]": value === "special",
 		"bg-muted text-muted-foreground": value === "status",
diff --git a/src/lib/components/pokemon/detail-section.svelte b/src/lib/components/pokemon/detail-section.svelte
index 2951bba..bd30d77 100644
--- a/src/lib/components/pokemon/detail-section.svelte
+++ b/src/lib/components/pokemon/detail-section.svelte
@@ -11,10 +11,10 @@
 		$props();
 </script>
 
-<section {id} aria-labelledby="{id}-title" class="scroll-mt-32">
+<section {id} aria-labelledby="{id}-title" class="scroll-mt-36">
 	<div class="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
 		<div>
-			<h2 id="{id}-title" class="font-display text-2xl font-semibold tracking-tight">{title}</h2>
+			<h2 id="{id}-title" class="section-title">{title}</h2>
 			{#if description}
 				<p class="mt-1 max-w-prose text-sm text-muted-foreground">{description}</p>
 			{/if}
diff --git a/src/lib/components/pokemon/evolution-chain.svelte b/src/lib/components/pokemon/evolution-chain.svelte
index 4ae950c..285f090 100644
--- a/src/lib/components/pokemon/evolution-chain.svelte
+++ b/src/lib/components/pokemon/evolution-chain.svelte
@@ -16,11 +16,11 @@
 		aria-current={current ? "page" : undefined}
 		style:--tint="var(--type-{node.types[0]})"
 		class={cn(
-			"group flex w-40 shrink-0 flex-col items-center gap-1 rounded-2xl border border-transparent p-3 text-center transition-colors hover:border-(--tint)",
+			"group flex w-40 shrink-0 flex-col items-center gap-1 rounded-lg border border-transparent p-3 text-center transition-colors hover:border-(--tint)",
 			current && "border-(--tint) bg-card",
 		)}
 	>
-		<div class="tint-field w-full rounded-xl p-2">
+		<div class="tint-field w-full rounded-md p-2">
 			<PokemonArt id={node.speciesId} name={node.name} width={192} widths={[192, 256]} sizes="140px" />
 		</div>
 		<span class="mt-1 text-xs text-muted-foreground tabular">{dexNumber(node.speciesId)}</span>
diff --git a/src/lib/components/pokemon/form-list.svelte b/src/lib/components/pokemon/form-list.svelte
index 56e3a9c..b4f9420 100644
--- a/src/lib/components/pokemon/form-list.svelte
+++ b/src/lib/components/pokemon/form-list.svelte
@@ -16,11 +16,11 @@
 				aria-current={current ? "page" : undefined}
 				style:--tint="var(--type-{form.types[0]})"
 				class={cn(
-					"group flex h-full flex-col gap-2 rounded-2xl border p-3 transition-colors hover:border-(--tint)",
+					"group flex h-full flex-col gap-2 rounded-lg border p-3 transition-colors hover:border-(--tint)",
 					current && "border-(--tint) bg-card",
 				)}
 			>
-				<div class="tint-field rounded-xl p-2">
+				<div class="tint-field rounded-md p-2">
 					<PokemonArt id={form.id} name={form.name} width={192} widths={[192, 256]} sizes="160px" />
 				</div>
 				<p class="text-sm leading-snug font-medium">{form.form ?? "Default"}</p>
diff --git a/src/lib/components/pokemon/gender-ratio.svelte b/src/lib/components/pokemon/gender-ratio.svelte
index 84d232a..db03c40 100644
--- a/src/lib/components/pokemon/gender-ratio.svelte
+++ b/src/lib/components/pokemon/gender-ratio.svelte
@@ -7,7 +7,7 @@
 
 {#if ratio}
 	<div class="grid gap-1.5">
-		<div class="flex h-2 overflow-hidden rounded-full bg-muted" aria-hidden="true">
+		<div class="flex h-2 overflow-hidden rounded-sm bg-muted" aria-hidden="true">
 			<div class="bg-[#3d7dd8]" style:width="{ratio.male}%"></div>
 			<div class="bg-[#e0569b]" style:width="{ratio.female}%"></div>
 		</div>
diff --git a/src/lib/components/pokemon/learnset-table.svelte b/src/lib/components/pokemon/learnset-table.svelte
index 7f679e6..377086a 100644
--- a/src/lib/components/pokemon/learnset-table.svelte
+++ b/src/lib/components/pokemon/learnset-table.svelte
@@ -92,7 +92,7 @@
 
 		{#each methods as m (m)}
 			<Tabs.Content value={m} class="mt-4">
-				<div class="overflow-x-auto rounded-xl border bg-card {loading ? 'opacity-60' : ''}">
+				<div class="overflow-x-auto rounded-lg border bg-card {loading ? 'opacity-60' : ''}">
 					<table class="w-full min-w-[40rem] text-sm">
 						<thead class="border-b text-left text-xs text-muted-foreground">
 							<tr>
diff --git a/src/lib/components/pokemon/pokemon-about.svelte b/src/lib/components/pokemon/pokemon-about.svelte
new file mode 100644
index 0000000..c288f3e
--- /dev/null
+++ b/src/lib/components/pokemon/pokemon-about.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { PokemonDetail } from "$lib/pokemon/detail.js";
+	import { formatHeight, formatWeight } from "$lib/pokemon/format.js";
+	import FlavorText from "./flavor-text.svelte";
+	import GenderRatio from "./gender-ratio.svelte";
+
+	let { detail }: { detail: PokemonDetail } = $props();
+
+	const height = $derived(formatHeight(detail.entry.height));
+	const weight = $derived(formatWeight(detail.entry.weight));
+</script>
+
+<div class="grid gap-8 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)] lg:gap-12">
+	<div class="grid content-start gap-8">
+		<FlavorText entries={detail.flavor} />
+
+		<dl class="grid gap-4">
+			<dt class="text-sm text-muted-foreground">Abilities</dt>
+			{#each detail.abilities as ability (ability.slug)}
+				<dd>
+					<p class="font-medium">
+						<a href="/abilities/{ability.slug}" class="hover:underline hover:underline-offset-4">{ability.name}</a>
+						{#if ability.hidden}
+							<span class="ml-1 text-xs font-normal text-muted-foreground">Hidden ability</span>
+						{/if}
+					</p>
+					<p class="max-w-prose text-sm text-muted-foreground">{ability.effect}</p>
+				</dd>
+			{/each}
+		</dl>
+	</div>
+
+	<dl class="grid content-start divide-y rounded-lg border bg-card text-sm">
+		<div class="grid grid-cols-[7rem_1fr] items-baseline gap-4 px-4 py-3">
+			<dt class="text-muted-foreground">Height</dt>
+			<dd class="tabular"><span class="font-medium">{height.metric}</span> <span class="ml-2 text-muted-foreground">{height.imperial}</span></dd>
+		</div>
+		<div class="grid grid-cols-[7rem_1fr] items-baseline gap-4 px-4 py-3">
+			<dt class="text-muted-foreground">Weight</dt>
+			<dd class="tabular"><span class="font-medium">{weight.metric}</span> <span class="ml-2 text-muted-foreground">{weight.imperial}</span></dd>
+		</div>
+		<div class="grid grid-cols-[7rem_1fr] items-center gap-4 px-4 py-3">
+			<dt class="text-muted-foreground">Gender</dt>
+			<dd><GenderRatio rate={detail.breeding.genderRate} /></dd>
+		</div>
+	</dl>
+</div>
diff --git a/src/lib/components/pokemon/pokemon-hero.svelte b/src/lib/components/pokemon/pokemon-hero.svelte
index bf9a20e..8dac091 100644
--- a/src/lib/components/pokemon/pokemon-hero.svelte
+++ b/src/lib/components/pokemon/pokemon-hero.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
+	import ArrowLeftIcon from "@lucide/svelte/icons/arrow-left";
+	import ArrowRightIcon from "@lucide/svelte/icons/arrow-right";
 	import ScaleIcon from "@lucide/svelte/icons/scale";
 	import SparklesIcon from "@lucide/svelte/icons/sparkles";
 	import UsersIcon from "@lucide/svelte/icons/users";
 	import { Button } from "$lib/components/ui/button/index.js";
 	import { Toggle } from "$lib/components/ui/toggle/index.js";
 	import type { PokemonDetail } from "$lib/pokemon/detail.js";
-	import { dexNumber, formatHeight, formatWeight } from "$lib/pokemon/format.js";
+	import { dexNumber } from "$lib/pokemon/format.js";
 	import CollectionButtons from "./collection-buttons.svelte";
 	import CryButton from "./cry-button.svelte";
-	import FlavorText from "./flavor-text.svelte";
-	import GenderRatio from "./gender-ratio.svelte";
 	import PokemonArt from "./pokemon-art.svelte";
 	import TypeBadge from "./type-badge.svelte";
 
@@ -17,117 +17,93 @@
 
 	let shiny = $state(false);
 	const entry = $derived(detail.entry);
-	const height = $derived(formatHeight(entry.height));
-	const weight = $derived(formatWeight(entry.weight));
 </script>
 
-<div class="mx-auto grid max-w-7xl gap-8 px-4 py-8 sm:px-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] lg:gap-14 lg:py-12">
-	<div class="mx-auto w-full max-w-[34rem] lg:self-center">
-		<div class="tint-field relative aspect-square overflow-hidden rounded-[2.5rem] p-[9%]">
-			{#key `${entry.id}-${shiny}`}
-				<PokemonArt
-					id={entry.id}
-					name={shiny ? `Shiny ${entry.name}` : entry.name}
-					{shiny}
-					eager
-					width={512}
-					widths={[384, 512, 768]}
-					sizes="(min-width: 1024px) 34rem, 90vw"
-					class="hero-art drop-shadow-[0_18px_30px_rgb(0_0_0/0.18)]"
-				/>
-			{/key}
-			<div class="absolute bottom-4 left-4 flex gap-2">
-			<Toggle
-				bind:pressed={shiny}
-				variant="outline"
-				size="sm"
-				aria-label="Show shiny coloring"
-				class="bg-background/80 backdrop-blur"
-			>
-				<SparklesIcon />
-				Shiny
-			</Toggle>
-				<CryButton url={detail.cries.latest} name={entry.name} />
-			</div>
-		</div>
-	</div>
-
-	<div class="flex flex-col justify-center">
-		<p class="font-display text-lg font-medium text-[color-mix(in_oklab,var(--tint)_55%,var(--foreground))] tabular">
-			{dexNumber(entry.speciesId)}
-		</p>
-		<h1 class="mt-1 font-display text-4xl font-semibold tracking-tight text-balance sm:text-6xl">
-			{entry.name}
-		</h1>
-		{#if detail.genus}
-			<p class="mt-2 text-lg text-muted-foreground">{detail.genus}</p>
-		{/if}
-		<div class="mt-5 flex flex-wrap items-center gap-2">
-			{#each entry.types as type (type)}
-				<TypeBadge {type} size="lg" href="/?type={type}" />
-			{/each}
-			<Button href="/compare?p={entry.slug}" variant="outline" size="sm" class="ml-auto">
-				<ScaleIcon />
-				Compare
-			</Button>
-			<Button href="/team?add={entry.slug}" variant="outline" size="sm">
-				<UsersIcon />
-				Add to team
-			</Button>
-		</div>
-
-		<div class="mt-5">
-			<CollectionButtons pokemonId={entry.id} name={entry.name} />
-		</div>
+<div class="dark type-band">
+	<div class="mx-auto max-w-7xl px-4 sm:px-6">
+		<nav aria-label="Adjacent Pokémon" class="flex items-center justify-between gap-4 pt-4 text-sm">
+			{#if detail.prev}
+				<a href="/pokemon/{detail.prev.slug}" class="flex items-center gap-1.5 text-muted-foreground hover:text-foreground" data-sveltekit-preload-data="hover">
+					<ArrowLeftIcon class="size-4" />
+					<span class="tabular font-condensed">{dexNumber(detail.prev.speciesId)}</span>
+					<span class="hidden sm:inline">{detail.prev.name}</span>
+				</a>
+			{:else}
+				<span></span>
+			{/if}
+			{#if detail.next}
+				<a href="/pokemon/{detail.next.slug}" class="flex items-center gap-1.5 text-muted-foreground hover:text-foreground" data-sveltekit-preload-data="hover">
+					<span class="hidden sm:inline">{detail.next.name}</span>
+					<span class="tabular font-condensed">{dexNumber(detail.next.speciesId)}</span>
+					<ArrowRightIcon class="size-4" />
+				</a>
+			{/if}
+		</nav>
 
-		<div class="mt-8">
-			<FlavorText entries={detail.flavor} />
-		</div>
+		<div class="grid items-center gap-6 pt-4 pb-8 md:grid-cols-[minmax(0,1fr)_20rem] lg:grid-cols-[minmax(0,1fr)_26rem] lg:pb-10">
+			<div class="order-2 md:order-1">
+				<p class="font-display text-xl font-medium text-muted-foreground">{dexNumber(entry.speciesId)}</p>
+				<h1 class="mt-1 font-display text-5xl leading-[0.95] font-bold tracking-tight text-balance sm:text-7xl">
+					{entry.name}
+				</h1>
+				{#if detail.genus}
+					<p class="mt-3 text-lg text-muted-foreground">{detail.genus}</p>
+				{/if}
+				<div class="mt-5 flex flex-wrap gap-1.5">
+					{#each entry.types as type (type)}
+						<TypeBadge {type} size="lg" href="/?type={type}" />
+					{/each}
+				</div>
 
-		<dl class="mt-8 grid grid-cols-2 gap-x-8 gap-y-6 border-t pt-6 sm:grid-cols-3">
-			<div>
-				<dt class="text-sm text-muted-foreground">Height</dt>
-				<dd class="mt-1 font-medium tabular">{height.metric}</dd>
-				<dd class="text-sm text-muted-foreground tabular">{height.imperial}</dd>
-			</div>
-			<div>
-				<dt class="text-sm text-muted-foreground">Weight</dt>
-				<dd class="mt-1 font-medium tabular">{weight.metric}</dd>
-				<dd class="text-sm text-muted-foreground tabular">{weight.imperial}</dd>
-			</div>
-			<div class="col-span-2 sm:col-span-1">
-				<dt class="text-sm text-muted-foreground">Gender</dt>
-				<dd class="mt-1"><GenderRatio rate={detail.breeding.genderRate} /></dd>
+				<div class="mt-8 flex flex-wrap gap-2">
+					<Button href="/compare?p={entry.slug}" variant="outline" size="sm">
+						<ScaleIcon />
+						Compare
+					</Button>
+					<Button href="/team?add={entry.slug}" variant="outline" size="sm">
+						<UsersIcon />
+						Add to team
+					</Button>
+				</div>
+				<div class="mt-2">
+					<CollectionButtons pokemonId={entry.id} name={entry.name} />
+				</div>
 			</div>
-			<div class="col-span-full">
-				<dt class="text-sm text-muted-foreground">Abilities</dt>
-				<dd class="mt-2 grid gap-3 sm:grid-cols-2">
-					{#each detail.abilities as ability (ability.slug)}
-						<div>
-							<p class="font-medium">
-								<a href="/abilities/{ability.slug}" class="hover:underline hover:underline-offset-4">{ability.name}</a>
-								{#if ability.hidden}
-									<span class="ml-1 text-xs font-normal text-muted-foreground">Hidden ability</span>
-								{/if}
-							</p>
-							<p class="text-sm text-muted-foreground">{ability.effect}</p>
-						</div>
-					{/each}
-				</dd>
+
+			<div class="order-1 mx-auto w-full max-w-72 md:order-2 md:max-w-none">
+				{#key `${entry.id}-${shiny}`}
+					<PokemonArt
+						id={entry.id}
+						name={shiny ? `Shiny ${entry.name}` : entry.name}
+						{shiny}
+						eager
+						width={512}
+						widths={[384, 512, 768]}
+						sizes="(min-width: 1024px) 26rem, (min-width: 768px) 20rem, 18rem"
+						class="hero-art drop-shadow-[0_16px_24px_rgb(0_0_0/0.35)]"
+					/>
+				{/key}
+				<div class="mt-2 flex justify-center gap-2">
+					<Toggle bind:pressed={shiny} variant="outline" size="sm" aria-label="Show shiny coloring">
+						<SparklesIcon />
+						Shiny
+					</Toggle>
+					<CryButton url={detail.cries.latest} name={entry.name} />
+				</div>
 			</div>
-		</dl>
+		</div>
 	</div>
 </div>
 
 <style>
 	:global(.hero-art) {
-		animation: hero-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+		animation: hero-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
 	}
 
 	@keyframes hero-in {
 		from {
 			opacity: 0;
-			transform: translateY(12px) scale(0.94);
+			transform: scale(0.96);
 		}
 	}
 </style>
diff --git a/src/lib/components/pokemon/stat-bars.svelte b/src/lib/components/pokemon/stat-bars.svelte
index c93b7ad..dab28be 100644
--- a/src/lib/components/pokemon/stat-bars.svelte
+++ b/src/lib/components/pokemon/stat-bars.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
-	import { MAX_BASE_STAT, statRanges } from "$lib/pokemon/stats.js";
+	import { MAX_BASE_STAT, statBand, statRanges } from "$lib/pokemon/stats.js";
 	import { STAT_KEYS, STAT_LABELS, type BaseStats } from "$lib/pokemon/types.js";
 
 	let { stats }: { stats: BaseStats } = $props();
@@ -26,7 +26,7 @@
 		</ToggleGroup.Root>
 	</div>
 
-	<table class="w-full border-separate border-spacing-y-2 text-sm">
+	<table class="w-full text-sm">
 		<thead class="sr-only">
 			<tr>
 				<th scope="col">Stat</th>
@@ -37,16 +37,17 @@
 		</thead>
 		<tbody>
 			{#each STAT_KEYS as key, i (key)}
-				<tr>
-					<th scope="row" class="w-20 pr-3 text-left font-normal text-muted-foreground">
+				<tr class="border-b">
+					<th scope="row" class="w-20 py-2 pr-3 text-left font-normal text-muted-foreground">
 						{STAT_LABELS[key].long}
 					</th>
 					<td class="w-10 pr-3 text-right font-semibold tabular">{stats[i]}</td>
 					<td>
-						<div class="h-2.5 overflow-hidden rounded-full bg-muted">
+						<div class="h-2 overflow-hidden rounded-sm bg-muted">
 							<div
-								class="h-full rounded-full bg-tint transition-[width] duration-500"
+								class="h-full rounded-sm transition-[width] duration-500"
 								style:width="{Math.min(100, (stats[i] / MAX_BASE_STAT) * 100)}%"
+								style:background-color="var(--stat-{statBand(stats[i])})"
 							></div>
 						</div>
 					</td>
@@ -56,8 +57,8 @@
 				</tr>
 			{/each}
 			<tr>
-				<th scope="row" class="pt-2 pr-3 text-left font-medium">Total</th>
-				<td class="pt-2 pr-3 text-right font-semibold tabular">{total}</td>
+				<th scope="row" class="py-2 pr-3 text-left font-medium">Total</th>
+				<td class="py-2 pr-3 text-right font-semibold tabular">{total}</td>
 				<td colspan="2"></td>
 			</tr>
 		</tbody>
diff --git a/src/lib/components/pokemon/type-badge.svelte b/src/lib/components/pokemon/type-badge.svelte
index 6b0cd46..85be6c6 100644
--- a/src/lib/components/pokemon/type-badge.svelte
+++ b/src/lib/components/pokemon/type-badge.svelte
@@ -12,11 +12,11 @@
 
 	const classes = $derived(
 		cn(
-			"inline-flex items-center justify-center rounded-full font-medium whitespace-nowrap",
+			"inline-flex items-center justify-center rounded-sm font-medium whitespace-nowrap",
 			typeTextClass(type),
-			size === "sm" && "h-5 px-2 text-[0.6875rem]",
-			size === "md" && "h-6 px-2.5 text-xs",
-			size === "lg" && "h-8 px-3.5 text-sm",
+			size === "sm" && "h-5 min-w-14 px-1.5 text-[0.6875rem]",
+			size === "md" && "h-6 min-w-16 px-2 text-xs",
+			size === "lg" && "h-8 min-w-20 px-3 text-sm",
 			className,
 		),
 	);
diff --git a/src/lib/components/site/command-palette.svelte b/src/lib/components/site/command-palette.svelte
index 9578051..0c31f94 100644
--- a/src/lib/components/site/command-palette.svelte
+++ b/src/lib/components/site/command-palette.svelte
@@ -95,7 +95,7 @@
 			<Command.Group heading="Types">
 				{#each types as type (type)}
 					<Command.Item value="type-{type}" onSelect={() => open(`/?type=${type}`)}>
-						<span class="size-3 rounded-full" style:background-color="var(--type-{type})"></span>
+						<span class="h-3.5 w-1 rounded-full" style:background-color="var(--type-{type})"></span>
 						All {titleCase(type)} Pokémon
 					</Command.Item>
 				{/each}
diff --git a/src/lib/components/site/logo.svelte b/src/lib/components/site/logo.svelte
index fc25e75..f5d88b1 100644
--- a/src/lib/components/site/logo.svelte
+++ b/src/lib/components/site/logo.svelte
@@ -5,8 +5,7 @@
 </script>
 
 <svg viewBox="0 0 32 32" aria-hidden="true" class={cn("size-7 shrink-0", className)}>
-	<rect width="32" height="32" rx="9" class="fill-primary" />
-	<circle cx="16" cy="16" r="9" fill="#fff" />
-	<circle cx="16" cy="16" r="5.5" fill="#3d7dd8" />
-	<circle cx="14" cy="14" r="1.8" fill="#fff" opacity=".85" />
+	<rect width="32" height="32" rx="7" class="fill-foreground" />
+	<circle cx="16" cy="16" r="8.5" fill="none" stroke-width="3" class="stroke-background" />
+	<circle cx="16" cy="16" r="3.5" fill="#e3350d" />
 </svg>
diff --git a/src/lib/components/site/search-trigger.svelte b/src/lib/components/site/search-trigger.svelte
index e3e8e40..7b44ffb 100644
--- a/src/lib/components/site/search-trigger.svelte
+++ b/src/lib/components/site/search-trigger.svelte
@@ -15,7 +15,7 @@
 	variant="outline"
 	size="sm"
 	onclick={() => (palette.open = true)}
-	class="hidden w-56 justify-start gap-2 text-muted-foreground sm:flex"
+	class="hidden w-60 justify-start gap-2 bg-background text-muted-foreground sm:flex dark:bg-background"
 >
 	<SearchIcon />
 	Search Pokémon
diff --git a/src/lib/components/site/site-footer.svelte b/src/lib/components/site/site-footer.svelte
index 2c44bb7..24059de 100644
--- a/src/lib/components/site/site-footer.svelte
+++ b/src/lib/components/site/site-footer.svelte
@@ -1,4 +1,4 @@
-<footer class="mt-24 border-t">
+<footer class="mt-20 border-t bg-card">
 	<div
 		class="mx-auto flex max-w-7xl flex-col gap-2 px-4 py-8 text-sm text-muted-foreground sm:px-6 md:flex-row md:justify-between"
 	>
diff --git a/src/lib/components/site/site-header.svelte b/src/lib/components/site/site-header.svelte
index da4a24c..fa2a040 100644
--- a/src/lib/components/site/site-header.svelte
+++ b/src/lib/components/site/site-header.svelte
@@ -16,23 +16,23 @@
 	}
 </script>
 
-<header class="sticky top-0 z-40 border-b bg-background/85 backdrop-blur-md">
-	<div class="mx-auto flex h-14 max-w-7xl items-center gap-6 px-4 sm:px-6">
+<header class="sticky top-0 z-40 border-b bg-card">
+	<div class="mx-auto flex h-14 max-w-7xl items-center gap-8 px-4 sm:px-6">
 		<a href="/" class="flex items-center gap-2 rounded-md" aria-label="Dexa home">
-			<Logo />
-			<span class="font-display text-lg font-semibold tracking-tight">dexa</span>
+			<Logo class="size-6" />
+			<span class="font-display text-lg font-bold tracking-tight">dexa</span>
 		</a>
 
-		<nav aria-label="Main" class="hidden lg:block">
-			<ul class="flex items-center gap-1">
+		<nav aria-label="Main" class="hidden self-stretch lg:block">
+			<ul class="flex h-full items-stretch gap-5">
 				{#each navItems as item (item.href)}
 					<li>
 						<a
 							href={item.href}
 							aria-current={isActive(item.href) ? "page" : undefined}
 							class={cn(
-								"rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground",
-								"aria-[current=page]:bg-secondary aria-[current=page]:font-medium aria-[current=page]:text-foreground",
+								"flex h-full items-center border-y-2 border-transparent text-sm text-muted-foreground transition-colors hover:text-foreground",
+								"aria-[current=page]:border-b-foreground aria-[current=page]:font-medium aria-[current=page]:text-foreground",
 							)}
 						>
 							{item.label}
@@ -53,13 +53,13 @@
 	</div>
 
 	<nav aria-label="Main" class="border-t lg:hidden">
-		<ul class="flex gap-1 overflow-x-auto px-3 py-1.5 [scrollbar-width:none]">
+		<ul class="flex gap-5 overflow-x-auto px-4 [scrollbar-width:none]">
 			{#each navItems as item (item.href)}
 				<li class="shrink-0">
 					<a
 						href={item.href}
 						aria-current={isActive(item.href) ? "page" : undefined}
-						class="block rounded-md px-3 py-1.5 text-sm text-muted-foreground aria-[current=page]:bg-secondary aria-[current=page]:font-medium aria-[current=page]:text-foreground"
+						class="block border-y-2 border-transparent py-2 text-sm text-muted-foreground aria-[current=page]:border-b-foreground aria-[current=page]:font-medium aria-[current=page]:text-foreground"
 					>
 						{item.label}
 					</a>
diff --git a/src/lib/components/team/defense-table.svelte b/src/lib/components/team/defense-table.svelte
index 3914fc2..c7abbac 100644
--- a/src/lib/components/team/defense-table.svelte
+++ b/src/lib/components/team/defense-table.svelte
@@ -19,7 +19,7 @@
 	}
 </script>
 
-<div class="overflow-x-auto rounded-2xl border bg-card">
+<div class="overflow-x-auto rounded-lg border bg-card">
 	<table class="w-full min-w-[36rem] text-sm">
 		<caption class="sr-only">Damage each team member takes from each attacking type</caption>
 		<thead class="border-b text-xs text-muted-foreground">
@@ -38,7 +38,7 @@
 				<tr class={cn(danger && "bg-[#c8102e]/6")}>
 					<th scope="row" class="px-3 py-1.5 text-left">
 						<span
-							class={cn("inline-flex h-6 w-20 items-center rounded-full px-2.5 text-xs font-medium", typeTextClass(row.attack))}
+							class={cn("inline-flex h-6 w-20 items-center justify-center rounded-sm px-2 text-xs font-medium", typeTextClass(row.attack))}
 							style:background-color="var(--type-{row.attack})"
 						>
 							{titleCase(row.attack)}
diff --git a/src/lib/components/team/saved-teams.svelte b/src/lib/components/team/saved-teams.svelte
index 4519015..dea23d2 100644
--- a/src/lib/components/team/saved-teams.svelte
+++ b/src/lib/components/team/saved-teams.svelte
@@ -100,10 +100,10 @@
 </script>
 
 {#if signedIn}
-	<section aria-labelledby="saved-title" class="rounded-2xl border bg-card p-5 sm:p-6">
+	<section aria-labelledby="saved-title" class="rounded-lg border bg-card p-5 sm:p-6">
 		<div class="flex flex-wrap items-center justify-between gap-3">
 			<div>
-				<h2 id="saved-title" class="font-display text-xl font-semibold">Your teams</h2>
+				<h2 id="saved-title" class="section-title">Your teams</h2>
 				{#if current}
 					<p class="mt-1 text-sm text-muted-foreground">Editing “{current.name}”.</p>
 				{/if}
diff --git a/src/lib/components/team/team-slot.svelte b/src/lib/components/team/team-slot.svelte
index 9366a96..dd50d5c 100644
--- a/src/lib/components/team/team-slot.svelte
+++ b/src/lib/components/team/team-slot.svelte
@@ -15,7 +15,7 @@
 
 {#if member}
 	<div class="group relative flex flex-col" style:--tint="var(--type-{member.types[0]})">
-		<a href="/pokemon/{member.slug}" class="tint-field block rounded-2xl p-[10%]">
+		<a href="/pokemon/{member.slug}" class="tint-field block rounded-lg p-[10%]">
 			<PokemonArt id={member.id} name={member.name} width={256} widths={[192, 256, 384]} sizes="(min-width: 1024px) 180px, 45vw" />
 		</a>
 		<p class="mt-2 truncate px-1 font-medium">{member.name}</p>
@@ -27,7 +27,7 @@
 		<button
 			type="button"
 			onclick={onremove}
-			class="absolute top-2 right-2 grid size-7 place-items-center rounded-full bg-background/85 text-muted-foreground backdrop-blur hover:text-foreground"
+			class="absolute top-2 right-2 grid size-7 place-items-center rounded-md bg-card text-muted-foreground hover:text-foreground"
 			aria-label="Remove {member.name}"
 		>
 			<XIcon class="size-4" />
@@ -37,7 +37,7 @@
 	<button
 		type="button"
 		onclick={onadd}
-		class="flex aspect-square w-full flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed text-sm text-muted-foreground transition-colors hover:border-primary hover:text-foreground"
+		class="flex aspect-square w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed text-sm text-muted-foreground transition-colors hover:border-primary hover:text-foreground"
 	>
 		<PlusIcon class="size-6" />
 		Add Pokémon
diff --git a/src/lib/components/types/type-chart.svelte b/src/lib/components/types/type-chart.svelte
index 46c772c..ea709ec 100644
--- a/src/lib/components/types/type-chart.svelte
+++ b/src/lib/components/types/type-chart.svelte
@@ -21,7 +21,7 @@
 	}
 </script>
 
-<div class="overflow-x-auto rounded-2xl border bg-card p-3">
+<div class="overflow-x-auto rounded-lg border bg-card p-3">
 	<table class="mx-auto border-separate border-spacing-0.5 text-xs" onmouseleave={() => (hover = null)}>
 		<caption class="sr-only">Damage multiplier of each attacking type (rows) against each defending type (columns)</caption>
 		<thead>
diff --git a/src/lib/pokemon/stats.test.ts b/src/lib/pokemon/stats.test.ts
new file mode 100644
index 0000000..5dc3323
--- /dev/null
+++ b/src/lib/pokemon/stats.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vite-plus/test";
+import { statBand } from "./stats.js";
+
+describe("statBand", () => {
+  it("places base stats in rating bands", () => {
+    expect(statBand(1)).toBe(1);
+    expect(statBand(49)).toBe(1);
+    expect(statBand(50)).toBe(2);
+    expect(statBand(79)).toBe(2);
+    expect(statBand(80)).toBe(3);
+    expect(statBand(100)).toBe(4);
+    expect(statBand(120)).toBe(5);
+    expect(statBand(150)).toBe(6);
+    expect(statBand(255)).toBe(6);
+  });
+});
diff --git a/src/lib/pokemon/stats.ts b/src/lib/pokemon/stats.ts
index cf68124..82351a8 100644
--- a/src/lib/pokemon/stats.ts
+++ b/src/lib/pokemon/stats.ts
@@ -31,3 +31,13 @@ export function statRanges(stats: BaseStats, level: number): [number, number][]
     ];
   });
 }
+
+/** Lower bound of each rating band, from poor (1) to exceptional (6). */
+const STAT_BANDS = [0, 50, 80, 100, 120, 150] as const;
+
+/** Rating band of a base stat, used to color stat bars from 1 (poor) to 6 (exceptional). */
+export function statBand(base: number): 1 | 2 | 3 | 4 | 5 | 6 {
+  let band = 1;
+  for (let i = 0; i < STAT_BANDS.length; i++) if (base >= STAT_BANDS[i]) band = i + 1;
+  return band as 1 | 2 | 3 | 4 | 5 | 6;
+}
diff --git a/src/lib/pokemon/types.ts b/src/lib/pokemon/types.ts
index b87ef6a..423a861 100644
--- a/src/lib/pokemon/types.ts
+++ b/src/lib/pokemon/types.ts
@@ -29,7 +29,7 @@ export function isTypeName(value: string): value is TypeName {
 const LIGHT_TEXT_TYPES = new Set<TypeName>(["fighting", "poison", "ghost", "dragon", "dark"]);
 
 export function typeTextClass(type: TypeName): string {
-  return LIGHT_TEXT_TYPES.has(type) ? "text-white" : "text-[#1c2340]";
+  return LIGHT_TEXT_TYPES.has(type) ? "text-white" : "text-[#16181d]";
 }
 
 export function typeColorVar(type: string): string {
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index e1670a9..75e2c3f 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -11,7 +11,7 @@
 
 <div class="mx-auto flex max-w-2xl flex-col items-start px-4 py-24 sm:px-6">
 	<p class="font-display text-6xl font-semibold text-muted-foreground/50 tabular">{page.status}</p>
-	<h1 class="mt-4 font-display text-3xl font-semibold tracking-tight">
+	<h1 class="mt-4 page-title">
 		{notFound ? "This page isn’t in the Pokédex" : "Something went wrong"}
 	</h1>
 	<p class="mt-3 text-muted-foreground">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index efc0ee3..8220837 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -21,7 +21,7 @@
 	<meta name="description" content="A fast, complete Pokédex: every Pokémon, move, ability and type matchup, plus a team builder and collection tracker." />
 </svelte:head>
 
-<ModeWatcher themeColors={{ light: "#f5f6f8", dark: "#0f1528" }} />
+<ModeWatcher themeColors={{ light: "#f3f4f6", dark: "#131417" }} />
 <Toaster position="bottom-center" />
 <CommandPalette />
 {#if data.accountsEnabled}
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index fd66114..3fead06 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -10,6 +10,7 @@ export const load: PageServerLoad = ({ url, setHeaders }) => {
   setHeaders({ "cache-control": "public, max-age=0, s-maxage=3600, stale-while-revalidate=86400" });
   return {
     query,
+    view: url.searchParams.get("view") === "grid" ? ("grid" as const) : ("list" as const),
     initial: results.slice(0, INITIAL_COUNT),
     total: results.length,
     speciesCount: pokemonList.filter((p) => p.isDefault).length,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8bcbfa6..b53e72a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,15 +1,19 @@
 <script lang="ts">
+	import LayoutGridIcon from "@lucide/svelte/icons/layout-grid";
+	import ListIcon from "@lucide/svelte/icons/list";
 	import SearchIcon from "@lucide/svelte/icons/search";
 	import XIcon from "@lucide/svelte/icons/x";
 	import { onMount } from "svelte";
 	import { replaceState } from "$app/navigation";
 	import { page } from "$app/state";
+	import DexTable from "$lib/components/dex/dex-table.svelte";
 	import DexTile from "$lib/components/dex/dex-tile.svelte";
 	import FilterControls from "$lib/components/dex/filter-controls.svelte";
 	import TypeFilter from "$lib/components/dex/type-filter.svelte";
 	import { Button } from "$lib/components/ui/button/index.js";
 	import * as Empty from "$lib/components/ui/empty/index.js";
 	import { Input } from "$lib/components/ui/input/index.js";
+	import * as ToggleGroup from "$lib/components/ui/toggle-group/index.js";
 	import { loadDexList } from "$lib/dex/client.js";
 	import {
 		DEFAULT_QUERY,
@@ -30,6 +34,7 @@
 	let query = $derived<DexQuery>({ ...data.query });
 	let all = $state<DexListEntry[] | null>(null);
 	let limit = $state(PAGE_SIZE);
+	let view = $derived(data.view);
 
 	const results = $derived(all ? queryDex(all, query) : data.initial);
 	const total = $derived(all ? results.length : data.total);
@@ -40,11 +45,23 @@
 		loadDexList().then((entries) => (all = entries));
 	});
 
+	function syncUrl() {
+		const params = toSearchParams(query);
+		if (view === "grid") params.set("view", "grid");
+		const search = params.toString().replaceAll("%2C", ",");
+		replaceState(search ? `?${search}` : page.url.pathname, page.state);
+	}
+
 	function update(next: Partial<DexQuery>) {
 		query = { ...query, ...next };
 		limit = PAGE_SIZE;
-		const search = toSearchParams(query).toString().replaceAll("%2C", ",");
-		replaceState(search ? `?${search}` : page.url.pathname, page.state);
+		syncUrl();
+	}
+
+	function setView(next: string) {
+		if (next !== "list" && next !== "grid") return;
+		view = next;
+		syncUrl();
 	}
 
 	function highlight(entry: DexListEntry) {
@@ -72,7 +89,7 @@
 
 <div class="mx-auto max-w-7xl px-4 pt-10 pb-8 sm:px-6">
 	<div class="flex flex-wrap items-end justify-between gap-x-6 gap-y-2">
-		<h1 class="font-display text-4xl font-semibold tracking-tight sm:text-5xl">Pokédex</h1>
+		<h1 class="page-title">Pokédex</h1>
 		<p class="text-muted-foreground tabular">{count.format(data.speciesCount)} species across nine generations</p>
 	</div>
 
@@ -87,7 +104,7 @@
 				aria-label="Search Pokémon"
 				autocomplete="off"
 				spellcheck={false}
-				class="h-12 rounded-xl bg-card pr-10 pl-11 text-base md:text-base"
+				class="h-11 rounded-lg bg-card pr-10 pl-11 text-base md:text-base"
 			/>
 			{#if query.q}
 				<button
@@ -105,23 +122,37 @@
 		<FilterControls {query} onchange={update} />
 	</div>
 
-	<div class="mt-6 flex h-8 items-center gap-3 text-sm text-muted-foreground" aria-live="polite">
-		<span class="tabular">{count.format(total)} {total === 1 ? "result" : "results"}</span>
+	<div class="mt-6 flex h-8 items-center gap-3 text-sm text-muted-foreground">
+		<span class="tabular" aria-live="polite">{count.format(total)} {total === 1 ? "result" : "results"}</span>
 		{#if isFiltered(query)}
 			<Button variant="link" size="sm" class="h-auto px-0" onclick={() => update({ ...DEFAULT_QUERY, sort: query.sort, desc: query.desc })}>
 				Clear filters
 			</Button>
 		{/if}
+		<ToggleGroup.Root type="single" variant="outline" size="sm" value={view} onValueChange={setView} aria-label="Layout" class="ml-auto">
+			<ToggleGroup.Item value="list" aria-label="List" title="List">
+				<ListIcon />
+			</ToggleGroup.Item>
+			<ToggleGroup.Item value="grid" aria-label="Grid" title="Grid">
+				<LayoutGridIcon />
+			</ToggleGroup.Item>
+		</ToggleGroup.Root>
 	</div>
 
 	{#if visible.length}
-		<ul class="mt-2 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
-			{#each visible as entry, index (entry.id)}
-				<li>
-					<DexTile {entry} highlight={highlight(entry)} eager={index < 12} />
-				</li>
-			{/each}
-		</ul>
+		{#if view === "list"}
+			<div class="mt-2">
+				<DexTable entries={visible} {query} eager={12} onsort={(sort, desc) => update({ sort, desc })} />
+			</div>
+		{:else}
+			<ul class="mt-2 grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+				{#each visible as entry, index (entry.id)}
+					<li>
+						<DexTile {entry} highlight={highlight(entry)} eager={index < 12} />
+					</li>
+				{/each}
+			</ul>
+		{/if}
 		{#if all && limit < results.length}
 			<div {@attach loadMore} class="h-px" aria-hidden="true"></div>
 		{/if}
diff --git a/src/routes/abilities/+page.svelte b/src/routes/abilities/+page.svelte
index 0d9ea32..4538a21 100644
--- a/src/routes/abilities/+page.svelte
+++ b/src/routes/abilities/+page.svelte
@@ -32,7 +32,7 @@
 
 <div class="mx-auto max-w-5xl px-4 pt-10 pb-8 sm:px-6">
 	<div class="flex flex-wrap items-end justify-between gap-x-6 gap-y-2">
-		<h1 class="font-display text-4xl font-semibold tracking-tight sm:text-5xl">Abilities</h1>
+		<h1 class="page-title">Abilities</h1>
 		<p class="text-muted-foreground tabular">{data.abilities.length} abilities</p>
 	</div>
 
@@ -45,14 +45,14 @@
 			placeholder="Search abilities"
 			aria-label="Search abilities"
 			autocomplete="off"
-			class="h-12 rounded-xl bg-card pl-11 text-base md:text-base"
+			class="h-11 rounded-lg bg-card pl-11 text-base md:text-base"
 		/>
 	</div>
 
 	<p class="mt-6 text-sm text-muted-foreground tabular" aria-live="polite">
 		{results.length} {results.length === 1 ? "result" : "results"}
 	</p>
-	<ul class="mt-3 divide-y rounded-xl border bg-card">
+	<ul class="mt-3 divide-y rounded-lg border bg-card">
 		{#each results as ability (ability.slug)}
 			<li>
 				<a href="/abilities/{ability.slug}" class="flex items-start justify-between gap-6 px-4 py-3 hover:bg-secondary/60">
diff --git a/src/routes/abilities/[slug]/+page.svelte b/src/routes/abilities/[slug]/+page.svelte
index e566aa3..678a375 100644
--- a/src/routes/abilities/[slug]/+page.svelte
+++ b/src/routes/abilities/[slug]/+page.svelte
@@ -25,7 +25,7 @@
 				<ArrowLeftIcon class="size-4" />
 				All abilities
 			</a>
-			<h1 class="mt-4 font-display text-4xl font-semibold tracking-tight sm:text-6xl">{data.ability.name}</h1>
+			<h1 class="mt-4 page-title">{data.ability.name}</h1>
 			<p class="mt-2 text-muted-foreground">
 				Introduced in Generation {GENERATIONS[data.ability.generation - 1]?.numeral ?? data.ability.generation}
 			</p>
@@ -39,7 +39,7 @@
 	<div class="mx-auto grid max-w-7xl gap-12 px-4 py-12 sm:px-6">
 		{#each groups as group (group.id)}
 			<section aria-labelledby="{group.id}-title">
-				<h2 id="{group.id}-title" class="font-display text-2xl font-semibold tracking-tight">
+				<h2 id="{group.id}-title" class="section-title">
 					{group.title}
 					<span class="text-lg font-medium text-muted-foreground tabular">{group.entries.length}</span>
 				</h2>
diff --git a/src/routes/collection/+page.svelte b/src/routes/collection/+page.svelte
index f232b48..866c367 100644
--- a/src/routes/collection/+page.svelte
+++ b/src/routes/collection/+page.svelte
@@ -72,14 +72,14 @@
 </svelte:head>
 
 <div class="mx-auto max-w-7xl px-4 pt-10 pb-8 sm:px-6">
-	<h1 class="font-display text-4xl font-semibold tracking-tight sm:text-5xl">Your collection</h1>
+	<h1 class="page-title">Your collection</h1>
 
 	{#if !data.configured}
 		<p class="mt-6 text-muted-foreground">Accounts aren’t set up on this deployment, so collections can’t be saved.</p>
 	{:else if !species.length || collection.status !== "ready"}
 		<div class="mt-8 grid gap-4">
-			<Skeleton class="h-24 w-full rounded-2xl" />
-			<Skeleton class="h-64 w-full rounded-2xl" />
+			<Skeleton class="h-24 w-full rounded-lg" />
+			<Skeleton class="h-64 w-full rounded-lg" />
 		</div>
 	{:else}
 		<p class="mt-3 max-w-prose text-muted-foreground">
@@ -87,7 +87,7 @@
 		</p>
 
 		<section aria-labelledby="progress-title" class="mt-8 grid gap-6 lg:grid-cols-[1.2fr_1fr]">
-			<div class="rounded-2xl border bg-card p-6">
+			<div class="rounded-lg border bg-card p-6">
 				<h2 id="progress-title" class="sr-only">Progress</h2>
 				<p class="font-display text-5xl font-semibold tabular">
 					{count.format(caughtCount)}
@@ -106,7 +106,7 @@
 					</div>
 				</dl>
 			</div>
-			<div class="rounded-2xl border bg-card p-6">
+			<div class="rounded-lg border bg-card p-6">
 				<h3 class="font-medium">By generation</h3>
 				<dl class="mt-4 grid gap-2.5">
 					{#each byGeneration as row (row.gen.id)}
@@ -142,7 +142,7 @@
 							onclick={() => collection.toggle(entry.id, 'caught')}
 							style:--tint="var(--type-{entry.types[0]})"
 							class={cn(
-								"flex w-full flex-col items-center rounded-xl border p-2 text-center transition-colors",
+								"flex w-full flex-col items-center rounded-lg border p-2 text-center transition-colors",
 								state.caught ? "tint-field border-transparent" : "bg-card hover:border-foreground/30",
 							)}
 						>
diff --git a/src/routes/compare/+page.svelte b/src/routes/compare/+page.svelte
index b817758..a2ebc3b 100644
--- a/src/routes/compare/+page.svelte
+++ b/src/routes/compare/+page.svelte
@@ -41,13 +41,13 @@
 </svelte:head>
 
 <div class="mx-auto max-w-7xl px-4 pt-10 pb-8 sm:px-6">
-	<h1 class="font-display text-4xl font-semibold tracking-tight sm:text-5xl">Compare</h1>
+	<h1 class="page-title">Compare</h1>
 	<p class="mt-3 max-w-prose text-muted-foreground">Put up to four Pokémon side by side.</p>
 
 	<ul class="mt-8 grid grid-cols-2 gap-4 lg:grid-cols-4">
 		{#each entries as entry, i (entry.slug)}
 			<li class="relative" style:--tint="var(--type-{entry.types[0]})">
-				<a href="/pokemon/{entry.slug}" class="tint-field block rounded-2xl p-[10%]">
+				<a href="/pokemon/{entry.slug}" class="tint-field block rounded-lg p-[10%]">
 					<PokemonArt id={entry.id} name={entry.name} width={256} widths={[256, 384]} sizes="(min-width: 1024px) 280px, 45vw" />
 				</a>
 				<div class="mt-3 flex items-center gap-2 px-1">
@@ -63,7 +63,7 @@
 				<button
 					type="button"
 					onclick={() => setSlugs(entries.filter((e) => e.slug !== entry.slug).map((e) => e.slug))}
-					class="absolute top-2 right-2 grid size-7 place-items-center rounded-full bg-background/85 text-muted-foreground backdrop-blur hover:text-foreground"
+					class="absolute top-2 right-2 grid size-7 place-items-center rounded-md bg-card text-muted-foreground hover:text-foreground"
 					aria-label="Remove {entry.name}"
 				>
 					<XIcon class="size-4" />
@@ -75,7 +75,7 @@
 				<button
 					type="button"
 					onclick={() => (pickerOpen = true)}
-					class="flex aspect-square w-full flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed text-sm text-muted-foreground transition-colors hover:border-primary hover:text-foreground"
+					class="flex aspect-square w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed text-sm text-muted-foreground transition-colors hover:border-primary hover:text-foreground"
 				>
 					<PlusIcon class="size-6" />
 					Add Pokémon
@@ -87,14 +87,14 @@
 	{#if entries.length}
 		<div class="mt-14 grid gap-14">
 			<section aria-labelledby="stats-title">
-				<h2 id="stats-title" class="font-display text-2xl font-semibold tracking-tight">Base stats</h2>
+				<h2 id="stats-title" class="section-title">Base stats</h2>
 				<div class="mt-5">
 					<StatComparison {series} />
 				</div>
 			</section>
 
 			<section aria-labelledby="matchups-title">
-				<h2 id="matchups-title" class="font-display text-2xl font-semibold tracking-tight">Type matchups</h2>
+				<h2 id="matchups-title" class="section-title">Type matchups</h2>
 				<p class="mt-1 text-sm text-muted-foreground">Damage each Pokémon takes from every attacking type.</p>
 				<div class="mt-5">
 					<DefenseTable team={entries} rows={teamDefense(entries)} />
@@ -102,8 +102,8 @@
 			</section>
 
 			<section aria-labelledby="profile-title">
-				<h2 id="profile-title" class="font-display text-2xl font-semibold tracking-tight">Profile</h2>
-				<div class="mt-5 overflow-x-auto rounded-2xl border bg-card">
+				<h2 id="profile-title" class="section-title">Profile</h2>
+				<div class="mt-5 overflow-x-auto rounded-lg border bg-card">
 					<table class="w-full min-w-[36rem] text-sm">
 						<thead class="border-b text-left text-xs text-muted-foreground">
 							<tr>
diff --git a/src/routes/layout.css b/src/routes/layout.css
index decf20f..b1a8bec 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -1,32 +1,32 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn-svelte/tailwind.css";
-@import "@fontsource-variable/onest";
-@import "@fontsource-variable/unbounded";
+@import "@fontsource-variable/archivo/wdth.css";
 
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --radius: 0.75rem;
+  --radius: 0.5rem;
 
-  --background: #f5f6f8;
-  --foreground: #1c2340;
+  /* Chrome stays neutral so type colors are the only hues on the page. */
+  --background: #f3f4f6;
+  --foreground: #16181d;
   --card: #ffffff;
-  --card-foreground: #1c2340;
+  --card-foreground: #16181d;
   --popover: #ffffff;
-  --popover-foreground: #1c2340;
-  --primary: #cc2e0b;
+  --popover-foreground: #16181d;
+  --primary: #16181d;
   --primary-foreground: #ffffff;
-  --secondary: #e9ecf2;
-  --secondary-foreground: #1c2340;
-  --muted: #eceef3;
-  --muted-foreground: #5b6478;
-  --accent: #e6e9f0;
-  --accent-foreground: #1c2340;
+  --secondary: #e8eaee;
+  --secondary-foreground: #16181d;
+  --muted: #eceef1;
+  --muted-foreground: #5c6370;
+  --accent: #e4e7eb;
+  --accent-foreground: #16181d;
   --destructive: #c8102e;
-  --border: #dde1e8;
-  --input: #d3d8e1;
-  --ring: #cc2e0b;
+  --border: #dcdfe4;
+  --input: #d0d4da;
+  --ring: #2f6feb;
 
   /* Canonical type palette; text color on each is chosen for contrast. */
   --type-normal: #a8a77a;
@@ -52,6 +52,14 @@
 
   --tint: var(--type-normal);
 
+  /* Base stat rating bands, poor to exceptional. */
+  --stat-1: #e5533d;
+  --stat-2: #ef8a3a;
+  --stat-3: #e6bd2e;
+  --stat-4: #8fc049;
+  --stat-5: #35ad88;
+  --stat-6: #3a8fd6;
+
   /* Categorical series for comparisons, validated for color vision deficiency. */
   --series-1: #2a78d6;
   --series-2: #eb6834;
@@ -60,24 +68,24 @@
 }
 
 .dark {
-  --background: #0f1528;
-  --foreground: #e8ebf3;
-  --card: #161d33;
-  --card-foreground: #e8ebf3;
-  --popover: #1a2239;
-  --popover-foreground: #e8ebf3;
-  --primary: #ff6a47;
-  --primary-foreground: #0f1528;
-  --secondary: #1f2842;
-  --secondary-foreground: #e8ebf3;
-  --muted: #1b2339;
-  --muted-foreground: #98a1b8;
-  --accent: #232d49;
-  --accent-foreground: #e8ebf3;
+  --background: #131417;
+  --foreground: #e9eaec;
+  --card: #1b1d21;
+  --card-foreground: #e9eaec;
+  --popover: #212328;
+  --popover-foreground: #e9eaec;
+  --primary: #e9eaec;
+  --primary-foreground: #131417;
+  --secondary: #24262b;
+  --secondary-foreground: #e9eaec;
+  --muted: #202226;
+  --muted-foreground: #989da7;
+  --accent: #282b31;
+  --accent-foreground: #e9eaec;
   --destructive: #ff5c6c;
-  --border: #262f4a;
-  --input: #2e3855;
-  --ring: #ff6a47;
+  --border: #2b2e34;
+  --input: #363940;
+  --ring: #6ea0ff;
 
   --series-1: #3987e5;
   --series-2: #d95926;
@@ -85,15 +93,38 @@
   --series-4: #c98500;
 }
 
+/* A deep wash of the current type behind light text. Pair with .dark so dark: variants apply inside. */
+.dark.type-band {
+  --band: color-mix(in oklab, var(--tint) 50%, #0d0e11);
+  --background: var(--band);
+  --foreground: #ffffff;
+  --muted-foreground: color-mix(in oklab, #ffffff 74%, var(--band));
+  --muted: color-mix(in oklab, #ffffff 10%, var(--band));
+  --secondary: color-mix(in oklab, #ffffff 14%, var(--band));
+  --secondary-foreground: #ffffff;
+  --border: color-mix(in oklab, #ffffff 22%, var(--band));
+  --input: color-mix(in oklab, #ffffff 30%, var(--band));
+  --primary: #ffffff;
+  --primary-foreground: #16181d;
+  background: var(--band);
+  color: var(--foreground);
+}
+
+/* Fixing lightness keeps every type equally dark without draining its hue. */
+@supports (color: oklch(from red l c h)) {
+  .dark.type-band {
+    --band: oklch(from var(--tint) 0.38 calc(c * 0.55) h);
+  }
+}
+
 @theme inline {
-  --font-sans: "Onest Variable", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Unbounded Variable", "Onest Variable", ui-sans-serif, sans-serif;
+  --font-sans: "Archivo Variable", ui-sans-serif, system-ui, sans-serif;
 
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 10px);
+  --radius-xl: calc(var(--radius) + 2px);
+  --radius-2xl: calc(var(--radius) + 4px);
 
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -151,7 +182,6 @@
 
   body {
     @apply bg-background text-foreground font-sans antialiased;
-    font-feature-settings: "ss01";
   }
 
   :focus-visible {
@@ -159,25 +189,44 @@
   }
 }
 
+/* Archivo's width axis: expanded for headings, condensed for dense figures. */
 @utility font-display {
-  font-family: var(--font-display);
-  font-feature-settings: "tnum";
+  font-stretch: 118%;
+  font-variant-numeric: tabular-nums;
+}
+
+@utility font-condensed {
+  font-stretch: 82%;
+}
+
+@utility page-title {
+  font-stretch: 118%;
+  font-size: var(--text-3xl);
+  line-height: 1.1;
+  font-weight: 700;
+  letter-spacing: var(--tracking-tight);
+  text-wrap: balance;
+
+  @media (width >= 40rem) {
+    font-size: var(--text-4xl);
+  }
+}
+
+@utility section-title {
+  font-stretch: 118%;
+  font-size: var(--text-xl);
+  line-height: 1.25;
+  font-weight: 600;
+  letter-spacing: var(--tracking-tight);
 }
 
 @utility tabular {
   font-variant-numeric: tabular-nums;
 }
 
-/* A soft field of the current tint, used behind artwork. */
+/* A flat wash of the current tint, used behind artwork. */
 @utility tint-field {
-  background:
-    radial-gradient(
-      circle at 50% 55%,
-      color-mix(in oklab, var(--tint) 38%, transparent) 0%,
-      color-mix(in oklab, var(--tint) 14%, transparent) 55%,
-      transparent 72%
-    ),
-    color-mix(in oklab, var(--tint) 12%, var(--card));
+  background: color-mix(in oklab, var(--tint) 16%, var(--card));
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 5140fc5..be028a8 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -48,13 +48,13 @@
 </svelte:head>
 
 <div class="mx-auto max-w-md px-4 py-16 sm:px-6">
-	<h1 class="font-display text-3xl font-semibold tracking-tight">
+	<h1 class="page-title">
 		{mode === "sign-in" ? "Sign in to Dexa" : "Create your Dexa account"}
 	</h1>
 	<p class="mt-2 text-muted-foreground">Track the Pokémon you’ve caught and keep your teams on every device.</p>
 
 	{#if !data.configured}
-		<p class="mt-8 rounded-xl border bg-card p-4 text-sm">
+		<p class="mt-8 rounded-lg border bg-card p-4 text-sm">
 			Accounts aren’t set up on this deployment. Set <code>DATABASE_URL</code> and <code>BETTER_AUTH_SECRET</code> to
 			enable them.
 		</p>
diff --git a/src/routes/moves/+page.svelte b/src/routes/moves/+page.svelte
index ff56508..4f88331 100644
--- a/src/routes/moves/+page.svelte
+++ b/src/routes/moves/+page.svelte
@@ -64,7 +64,7 @@
 
 <div class="mx-auto max-w-7xl px-4 pt-10 pb-8 sm:px-6">
 	<div class="flex flex-wrap items-end justify-between gap-x-6 gap-y-2">
-		<h1 class="font-display text-4xl font-semibold tracking-tight sm:text-5xl">Moves</h1>
+		<h1 class="page-title">Moves</h1>
 		<p class="text-muted-foreground tabular">{data.moves.length} moves</p>
 	</div>
 
@@ -78,7 +78,7 @@
 				placeholder="Search moves"
 				aria-label="Search moves"
 				autocomplete="off"
-				class="h-12 rounded-xl bg-card pl-11 text-base md:text-base"
+				class="h-11 rounded-lg bg-card pl-11 text-base md:text-base"
 			/>
 		</div>
 		<TypeFilter selected={query.types} onchange={(types) => update({ types: types.slice(-1) })} />
@@ -120,7 +120,7 @@
 		{results.length} {results.length === 1 ? "result" : "results"}
 	</p>
 
-	<div class="mt-3 overflow-x-auto rounded-xl border bg-card">
+	<div class="mt-3 overflow-x-auto rounded-lg border bg-card">
 		<table class="w-full min-w-[44rem] text-sm">
 			<thead class="border-b text-left text-xs text-muted-foreground">
 				<tr>
diff --git a/src/routes/moves/[slug]/+page.svelte b/src/routes/moves/[slug]/+page.svelte
index e888422..a6e490c 100644
--- a/src/routes/moves/[slug]/+page.svelte
+++ b/src/routes/moves/[slug]/+page.svelte
@@ -30,7 +30,7 @@
 				<ArrowLeftIcon class="size-4" />
 				All moves
 			</a>
-			<h1 class="mt-4 font-display text-4xl font-semibold tracking-tight sm:text-6xl">{move.name}</h1>
+			<h1 class="mt-4 page-title">{move.name}</h1>
 			<div class="mt-4 flex flex-wrap items-center gap-2">
 				<TypeBadge type={move.type} size="lg" href="/moves?type={move.type}" />
 				<DamageClassIcon value={move.damageClass} class="h-8 px-3 text-sm" />
@@ -51,7 +51,7 @@
 	</div>
 
 	<section aria-labelledby="learned-title" class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
-		<h2 id="learned-title" class="font-display text-2xl font-semibold tracking-tight">
+		<h2 id="learned-title" class="section-title">
 			Learned by {data.learnedBy.length} Pokémon
 		</h2>
 		{#if data.learnedBy.length}
diff --git a/src/routes/pokemon/[slug]/+page.svelte b/src/routes/pokemon/[slug]/+page.svelte
index f3a1d9a..2269d0c 100644
--- a/src/routes/pokemon/[slug]/+page.svelte
+++ b/src/routes/pokemon/[slug]/+page.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-	import ArrowLeftIcon from "@lucide/svelte/icons/arrow-left";
-	import ArrowRightIcon from "@lucide/svelte/icons/arrow-right";
 	import DetailSection from "$lib/components/pokemon/detail-section.svelte";
 	import EvolutionChain from "$lib/components/pokemon/evolution-chain.svelte";
 	import FormList from "$lib/components/pokemon/form-list.svelte";
 	import LearnsetTable from "$lib/components/pokemon/learnset-table.svelte";
+	import PokemonAbout from "$lib/components/pokemon/pokemon-about.svelte";
 	import PokemonHero from "$lib/components/pokemon/pokemon-hero.svelte";
 	import StatBars from "$lib/components/pokemon/stat-bars.svelte";
 	import TrainingBreeding from "$lib/components/pokemon/training-breeding.svelte";
@@ -19,6 +18,7 @@
 
 	const sections = $derived(
 		[
+			{ id: "about", label: "About" },
 			{ id: "stats", label: "Stats" },
 			{ id: "matchups", label: "Matchups" },
 			detail.evolution ? { id: "evolution", label: "Evolution" } : false,
@@ -37,33 +37,13 @@
 </svelte:head>
 
 <article style:--tint="var(--type-{entry.types[0]})">
-	<div class="border-b bg-[color-mix(in_oklab,var(--tint)_7%,var(--background))]">
-		<nav aria-label="Adjacent Pokémon" class="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 pt-5 text-sm sm:px-6">
-			{#if detail.prev}
-				<a href="/pokemon/{detail.prev.slug}" class="flex items-center gap-1.5 text-muted-foreground hover:text-foreground" data-sveltekit-preload-data="hover">
-					<ArrowLeftIcon class="size-4" />
-					<span class="tabular">{dexNumber(detail.prev.speciesId)}</span>
-					<span class="hidden sm:inline">{detail.prev.name}</span>
-				</a>
-			{:else}
-				<span></span>
-			{/if}
-			{#if detail.next}
-				<a href="/pokemon/{detail.next.slug}" class="flex items-center gap-1.5 text-muted-foreground hover:text-foreground" data-sveltekit-preload-data="hover">
-					<span class="hidden sm:inline">{detail.next.name}</span>
-					<span class="tabular">{dexNumber(detail.next.speciesId)}</span>
-					<ArrowRightIcon class="size-4" />
-				</a>
-			{/if}
-		</nav>
-		<PokemonHero {detail} />
-	</div>
+	<PokemonHero {detail} />
 
-	<nav aria-label="Sections" class="sticky top-14 z-30 border-b bg-background/90 backdrop-blur-md">
-		<ul class="mx-auto flex max-w-7xl gap-1 overflow-x-auto px-4 py-2 [scrollbar-width:none] sm:px-6">
+	<nav aria-label="Sections" class="sticky top-[6.125rem] z-30 border-b bg-card lg:top-14">
+		<ul class="mx-auto flex max-w-7xl gap-6 overflow-x-auto px-4 [scrollbar-width:none] sm:px-6">
 			{#each sections as section (section.id)}
 				<li class="shrink-0">
-					<a href="#{section.id}" class="block rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground">
+					<a href="#{section.id}" class="block border-y-2 border-transparent py-2.5 text-sm text-muted-foreground hover:border-b-(--tint) hover:text-foreground">
 						{section.label}
 					</a>
 				</li>
@@ -71,7 +51,11 @@
 		</ul>
 	</nav>
 
-	<div class="mx-auto grid max-w-7xl gap-16 px-4 py-12 sm:px-6">
+	<div class="mx-auto grid max-w-7xl grid-cols-[minmax(0,1fr)] gap-14 px-4 py-10 sm:px-6">
+		<DetailSection id="about" title="About">
+			<PokemonAbout {detail} />
+		</DetailSection>
+
 		<DetailSection id="stats" title="Base stats">
 			<div class="max-w-3xl">
 				<StatBars stats={entry.stats} />
diff --git a/src/routes/quiz/+page.svelte b/src/routes/quiz/+page.svelte
index 501fca4..94873f5 100644
--- a/src/routes/quiz/+page.svelte
+++ b/src/routes/quiz/+page.svelte
@@ -91,7 +91,7 @@
 
 <div class="mx-auto max-w-3xl px-4 pt-10 pb-8 sm:px-6">
 	<div class="flex flex-wrap items-end justify-between gap-4">
-		<h1 class="font-display text-4xl font-semibold tracking-tight sm:text-5xl">Who’s that Pokémon?</h1>
+		<h1 class="page-title">Who’s that Pokémon?</h1>
 		<dl class="flex gap-6 text-sm">
 			<div>
 				<dt class="text-muted-foreground">Streak</dt>
@@ -129,7 +129,7 @@
 	</div>
 
 	<div
-		class="relative mt-6 overflow-hidden rounded-[2.5rem] p-6 sm:p-8 transition-colors duration-500 {outcome === 'playing' ? 'bg-secondary' : 'tint-field'}"
+		class="relative mt-6 overflow-hidden rounded-lg p-6 sm:p-8 transition-colors duration-500 {outcome === 'playing' ? 'bg-secondary' : 'tint-field'}"
 		style:--tint={current ? `var(--type-${current.types[0]})` : undefined}
 	>
 		{#if current}
diff --git a/src/routes/team/+page.svelte b/src/routes/team/+page.svelte
index 56b7895..252f7ee 100644
--- a/src/routes/team/+page.svelte
+++ b/src/routes/team/+page.svelte
@@ -13,7 +13,7 @@
 	import { loadDexList } from "$lib/dex/client.js";
 	import type { DexListEntry } from "$lib/dex/list.js";
 	import { STAT_KEYS, STAT_LABELS } from "$lib/pokemon/types.js";
-	import { MAX_BASE_STAT } from "$lib/pokemon/stats.js";
+	import { MAX_BASE_STAT, statBand } from "$lib/pokemon/stats.js";
 	import {
 		TEAM_SIZE,
 		averageStats,
@@ -122,7 +122,7 @@
 <div class="mx-auto max-w-7xl px-4 pt-10 pb-8 sm:px-6">
 	<div class="flex flex-wrap items-end justify-between gap-4">
 		<div>
-			<h1 class="font-display text-4xl font-semibold tracking-tight sm:text-5xl">Team builder</h1>
+			<h1 class="page-title">Team builder</h1>
 			<p class="mt-3 max-w-prose text-muted-foreground">
 				Pick up to six Pokémon. Dexa checks which attacks your team struggles against and which types it can hit hard.
 			</p>
@@ -160,9 +160,9 @@
 	{#if team.length}
 		<div class="mt-14 grid gap-14">
 			<section aria-labelledby="summary-title">
-				<h2 id="summary-title" class="font-display text-2xl font-semibold tracking-tight">Summary</h2>
+				<h2 id="summary-title" class="section-title">Summary</h2>
 				<div class="mt-5 grid gap-6 md:grid-cols-2">
-					<div class="rounded-2xl border bg-card p-5">
+					<div class="rounded-lg border bg-card p-5">
 						<h3 class="font-medium">Shared weaknesses</h3>
 						{#if weaknesses.length}
 							<p class="mt-1 text-sm text-muted-foreground">
@@ -177,7 +177,7 @@
 							<p class="mt-1 text-sm text-muted-foreground">No attacking type hits several members without an answer.</p>
 						{/if}
 					</div>
-					<div class="rounded-2xl border bg-card p-5">
+					<div class="rounded-lg border bg-card p-5">
 						<h3 class="font-medium">Not covered by same-type attacks</h3>
 						{#if uncovered.length}
 							<p class="mt-1 text-sm text-muted-foreground">
@@ -196,7 +196,7 @@
 			</section>
 
 			<section aria-labelledby="defense-title">
-				<h2 id="defense-title" class="font-display text-2xl font-semibold tracking-tight">Defensive matchups</h2>
+				<h2 id="defense-title" class="section-title">Defensive matchups</h2>
 				<p class="mt-1 max-w-prose text-sm text-muted-foreground">
 					Damage each member takes from every attacking type. Highlighted rows are shared weaknesses.
 				</p>
@@ -206,14 +206,14 @@
 			</section>
 
 			<section aria-labelledby="stats-title">
-				<h2 id="stats-title" class="font-display text-2xl font-semibold tracking-tight">Average base stats</h2>
+				<h2 id="stats-title" class="section-title">Average base stats</h2>
 				<dl class="mt-5 grid max-w-3xl gap-2.5">
 					{#each STAT_KEYS as key, i (key)}
 						<div class="grid grid-cols-[5rem_2.5rem_1fr] items-center gap-3 text-sm">
 							<dt class="text-muted-foreground">{STAT_LABELS[key].long}</dt>
 							<dd class="text-right font-semibold tabular">{averages[i]}</dd>
-							<dd class="h-2.5 overflow-hidden rounded-full bg-muted">
-								<div class="h-full rounded-full bg-primary" style:width="{(averages[i] / MAX_BASE_STAT) * 100}%"></div>
+							<dd class="h-2 overflow-hidden rounded-sm bg-muted">
+								<div class="h-full rounded-sm" style:width="{(averages[i] / MAX_BASE_STAT) * 100}%" style:background-color="var(--stat-{statBand(averages[i])})"></div>
 							</dd>
 						</div>
 					{/each}
diff --git a/src/routes/types/+page.svelte b/src/routes/types/+page.svelte
index ab1447f..f21afb4 100644
--- a/src/routes/types/+page.svelte
+++ b/src/routes/types/+page.svelte
@@ -33,14 +33,14 @@
 </svelte:head>
 
 <div class="mx-auto max-w-7xl px-4 pt-10 pb-8 sm:px-6">
-	<h1 class="font-display text-4xl font-semibold tracking-tight sm:text-5xl">Type chart</h1>
+	<h1 class="page-title">Type chart</h1>
 	<p class="mt-3 max-w-prose text-muted-foreground">
 		Rows attack, columns defend. Pick one or two defending types to see how every attack lands against that combination.
 	</p>
 
-	<section aria-labelledby="calculator-title" class="mt-10 rounded-2xl border bg-card p-5 sm:p-6">
+	<section aria-labelledby="calculator-title" class="mt-10 rounded-lg border bg-card p-5 sm:p-6">
 		<div class="flex flex-wrap items-center justify-between gap-3">
-			<h2 id="calculator-title" class="font-display text-xl font-semibold">Defense calculator</h2>
+			<h2 id="calculator-title" class="section-title">Defense calculator</h2>
 			{#if defenders.length}
 				<Button variant="ghost" size="sm" onclick={() => setDefenders([])}>Clear</Button>
 			{/if}
diff --git a/static/icon.svg b/static/icon.svg
index c0f5513..d9b85bc 100644
--- a/static/icon.svg
+++ b/static/icon.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="9" fill="#cc2e0b"/><circle cx="16" cy="16" r="9" fill="#fff"/><circle cx="16" cy="16" r="5.5" fill="#3d7dd8"/><circle cx="14" cy="14" r="1.8" fill="#fff" opacity=".85"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#16181d"/><circle cx="16" cy="16" r="8.5" fill="none" stroke="#fff" stroke-width="3"/><circle cx="16" cy="16" r="3.5" fill="#e3350d"/></svg>
diff --git a/static/manifest.webmanifest b/static/manifest.webmanifest
index f06b526..5a89af0 100644
--- a/static/manifest.webmanifest
+++ b/static/manifest.webmanifest
@@ -4,7 +4,7 @@
   "description": "The last Pokédex you will ever need.",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#f5f6f8",
-  "theme_color": "#cc2e0b",
+  "background_color": "#f3f4f6",
+  "theme_color": "#16181d",
   "icons": [{ "src": "/icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any" }]
 }