From c9fa3079abe2b79b39ca2c2a60d11fed477503a0 Mon Sep 17 00:00:00 2001
From: Jacob Zweifel <jacob@jacobzweifel.com>
Date: Wed, 26 Aug 2026 22:20:59 -0400
Subject: [PATCH] Dress the admin pages in the site letterhead

The /admin routes were unstyled system-ui defaults next to a landing page
with a committed identity. A shared admin layout now carries the same
letterhead: the airmail stripe, the paper/ink/accent palette in both
color schemes, serif body with the mono uppercase system voice, a
masthead nav with the current section marked, and one skin for inputs,
buttons, links, notices, and code across every admin page.

The pages shed their ad-hoc styles and hardcoded colors, keeping only
their own structure. Redundant per-page back-links gave way to the
masthead nav; destructive actions (Delete, Remove, Release, Sign out)
wear a quiet outline instead of the primary accent; the hosting page's
paused notice trades its side-stripe for a sunk paper panel.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/lib/components/PageForm.svelte   |  12 +-
 apps/web/src/routes/admin/+layout.svelte      | 315 ++++++++++++++++++
 apps/web/src/routes/admin/+page.svelte        |  42 +--
 .../web/src/routes/admin/hosting/+page.svelte |  76 +++--
 apps/web/src/routes/admin/pages/+page.svelte  |  37 +-
 .../routes/admin/pages/[rkey]/+page.svelte    |  16 +-
 .../src/routes/admin/pages/new/+page.svelte   |  14 +-
 7 files changed, 402 insertions(+), 110 deletions(-)
 create mode 100644 apps/web/src/routes/admin/+layout.svelte

diff --git a/apps/web/src/lib/components/PageForm.svelte b/apps/web/src/lib/components/PageForm.svelte
index c95eafc..c6534cb 100644
--- a/apps/web/src/lib/components/PageForm.svelte
+++ b/apps/web/src/lib/components/PageForm.svelte
@@ -55,17 +55,11 @@
 		display: grid;
 		gap: 0.25rem;
 	}
-	input,
-	select,
-	textarea {
-		font: inherit;
-		padding: 0.4rem;
-	}
-	textarea {
-		font-family: ui-monospace, monospace;
+	select {
+		justify-self: start;
 	}
 	button {
 		justify-self: start;
-		padding: 0.5rem 1rem;
+		margin-top: 0.5rem;
 	}
 </style>
diff --git a/apps/web/src/routes/admin/+layout.svelte b/apps/web/src/routes/admin/+layout.svelte
new file mode 100644
index 0000000..58aab06
--- /dev/null
+++ b/apps/web/src/routes/admin/+layout.svelte
@@ -0,0 +1,315 @@
+<script lang="ts">
+	import { page } from '$app/state';
+
+	let { children } = $props();
+
+	const section = $derived(
+		page.url.pathname.startsWith('/admin/pages')
+			? 'pages'
+			: page.url.pathname.startsWith('/admin/hosting')
+				? 'hosting'
+				: 'overview'
+	);
+</script>
+
+<div class="admin">
+	<div class="airmail" aria-hidden="true"></div>
+
+	<header class="masthead">
+		<a class="wordmark" href="/admin">Mooring</a>
+		<nav aria-label="Admin">
+			<a href="/admin" aria-current={section === 'overview' ? 'page' : undefined}>Overview</a>
+			<a href="/admin/pages" aria-current={section === 'pages' ? 'page' : undefined}>Pages</a>
+			<a href="/admin/hosting" aria-current={section === 'hosting' ? 'page' : undefined}>
+				Hosting
+			</a>
+		</nav>
+	</header>
+
+	{@render children()}
+
+	<footer>
+		<span class="rule" aria-hidden="true"></span>
+		<span class="valediction">Wind bless you.</span>
+	</footer>
+</div>
+
+<style>
+	/* Palette and type mirror the site theme (SiteLayout.svelte): the back
+	   office is written on the same letterhead as the sites it manages. */
+	.admin {
+		--paper: #f7f3ea;
+		--paper-sunk: #efe9dc;
+		--ink: #161d2b;
+		--muted: #6f6757;
+		--accent: #9c3218;
+		--accent-ink: #fdfbf6;
+		--rule: #e0d8c8;
+		--airmail-blue: #1c3f6e;
+		--warn: #7c2144;
+		--ok: #256c3f;
+		--stripe-paper: #f7f3ea;
+
+		--font-serif: 'Iowan Old Style', 'Hoefler Text', 'Palatino Linotype', Palatino,
+			'Book Antiqua', Georgia, serif;
+		--font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Mono', Menlo, Consolas,
+			monospace;
+
+		background: var(--paper);
+		color: var(--ink);
+		font-family: var(--font-serif);
+		font-size: 1.05rem;
+		line-height: 1.6;
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		background-image: repeating-linear-gradient(
+			45deg,
+			color-mix(in srgb, var(--ink) 1.4%, transparent) 0 1px,
+			transparent 1px 4px
+		);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.admin {
+			--paper: #101520;
+			--paper-sunk: #161c29;
+			--ink: #e9e3d6;
+			--muted: #948b78;
+			--accent: #d4714f;
+			--accent-ink: #101520;
+			--rule: #242c3a;
+			--airmail-blue: #3a6ea8;
+			--warn: #e39aae;
+			--ok: #86c294;
+		}
+	}
+
+	.airmail {
+		height: 6px;
+		background: repeating-linear-gradient(
+			-45deg,
+			var(--accent) 0 10px,
+			var(--stripe-paper) 10px 20px,
+			var(--airmail-blue) 20px 30px,
+			var(--stripe-paper) 30px 40px
+		);
+	}
+
+	.masthead,
+	.admin :global(main),
+	footer {
+		width: 100%;
+		max-width: 46rem;
+		margin-inline: auto;
+		padding-inline: clamp(1.25rem, 5vw, 3rem);
+		box-sizing: border-box;
+	}
+
+	.masthead {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: 0.5rem 1rem;
+		padding-top: 1.75rem;
+	}
+
+	.wordmark {
+		font-size: 1.15rem;
+		font-weight: 600;
+		letter-spacing: 0.01em;
+		color: var(--accent);
+		text-decoration: none;
+	}
+
+	.masthead nav {
+		display: flex;
+		gap: 1.25rem;
+	}
+
+	.masthead nav a {
+		font-family: var(--font-mono);
+		font-size: 0.72rem;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		color: var(--muted);
+		text-decoration: none;
+		padding: 0.5rem 0.25rem 2px;
+		margin: -0.5rem -0.25rem 0;
+		border-bottom: 1px solid transparent;
+		transition:
+			color 160ms ease,
+			border-color 160ms ease;
+	}
+
+	.masthead nav a:hover,
+	.masthead nav a:focus-visible {
+		color: var(--ink);
+		border-bottom-color: var(--accent);
+	}
+
+	.masthead nav a[aria-current='page'] {
+		color: var(--ink);
+		border-bottom-color: var(--airmail-blue);
+	}
+
+	.admin :global(main) {
+		flex: 1;
+		padding-block: clamp(2rem, 5vw, 3rem) 3rem;
+	}
+
+	footer {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		padding-block: 1.5rem 2.5rem;
+		font-family: var(--font-mono);
+		font-size: 0.72rem;
+		letter-spacing: 0.06em;
+		color: var(--muted);
+	}
+
+	footer .rule {
+		flex: 1;
+		height: 1px;
+		background: var(--rule);
+	}
+
+	.valediction {
+		font-style: italic;
+	}
+
+	/* --- Shared skin for everything the admin pages render --- */
+
+	.admin :global(h1) {
+		margin: 0 0 0.75rem;
+		font-size: 1.7rem;
+		font-weight: 600;
+		line-height: 1.2;
+		letter-spacing: -0.01em;
+		text-wrap: balance;
+	}
+
+	.admin :global(h2) {
+		margin: 2.25rem 0 0.75rem;
+		font-family: var(--font-mono);
+		font-size: 0.72rem;
+		font-weight: 500;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		color: color-mix(in srgb, var(--airmail-blue) 75%, var(--ink));
+		border-bottom: 1px solid var(--rule);
+		padding-bottom: 0.4rem;
+	}
+
+	.admin :global(a) {
+		color: var(--accent);
+		text-underline-offset: 0.18em;
+	}
+
+	.admin :global(code) {
+		font-family: var(--font-mono);
+		font-size: 0.82em;
+		background: var(--paper-sunk);
+		border: 1px solid var(--rule);
+		border-radius: 2px;
+		padding: 0.05em 0.3em;
+		overflow-wrap: anywhere;
+	}
+
+	.admin :global(small),
+	.admin :global(.meta) {
+		color: var(--muted);
+		font-size: 0.88rem;
+	}
+
+	.admin :global(input:not([type='checkbox'])),
+	.admin :global(select),
+	.admin :global(textarea) {
+		box-sizing: border-box;
+		padding: 0.5rem 0.7rem;
+		font-family: var(--font-mono);
+		/* 16px floor: anything smaller makes iOS Safari zoom on focus. */
+		font-size: 1rem;
+		color: var(--ink);
+		background: var(--paper);
+		border: 1px solid color-mix(in srgb, var(--muted) 80%, var(--rule));
+		border-radius: 2px;
+	}
+
+	.admin :global(input::placeholder),
+	.admin :global(textarea::placeholder) {
+		color: var(--muted);
+		opacity: 1;
+	}
+
+	.admin :global(input[type='checkbox']) {
+		accent-color: var(--accent);
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.admin :global(button),
+	.admin :global(a.btn) {
+		box-sizing: border-box;
+		padding: 0.5rem 1.1rem;
+		font-family: var(--font-mono);
+		font-size: 0.8rem;
+		letter-spacing: 0.04em;
+		color: var(--accent-ink);
+		background: var(--accent);
+		border: 1px solid var(--accent);
+		border-radius: 2px;
+		cursor: pointer;
+		transition: filter 160ms ease;
+	}
+
+	.admin :global(a.btn) {
+		display: inline-block;
+		text-decoration: none;
+	}
+
+	.admin :global(button:hover),
+	.admin :global(button:focus-visible),
+	.admin :global(a.btn:hover),
+	.admin :global(a.btn:focus-visible) {
+		filter: brightness(1.12);
+	}
+
+	.admin :global(button.quiet) {
+		color: var(--muted);
+		background: transparent;
+		border-color: color-mix(in srgb, var(--muted) 55%, var(--rule));
+		transition:
+			color 160ms ease,
+			border-color 160ms ease;
+	}
+
+	.admin :global(button.quiet:hover),
+	.admin :global(button.quiet:focus-visible) {
+		filter: none;
+		color: var(--warn);
+		border-color: var(--warn);
+	}
+
+	.admin :global(.notice) {
+		color: var(--ok);
+	}
+
+	.admin :global(.error),
+	.admin :global([role='alert']) {
+		color: var(--warn);
+	}
+
+	.admin :global(:focus-visible) {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+
+	.admin ::selection,
+	.admin :global(::selection) {
+		background: var(--accent);
+		color: var(--accent-ink);
+	}
+</style>
diff --git a/apps/web/src/routes/admin/+page.svelte b/apps/web/src/routes/admin/+page.svelte
index a4330c1..5807984 100644
--- a/apps/web/src/routes/admin/+page.svelte
+++ b/apps/web/src/routes/admin/+page.svelte
@@ -22,8 +22,8 @@
 
 <main>
 	<h1>Welcome aboard</h1>
-	<p>
-		Signed in as <strong>@{data.handle}</strong> <code>({data.did})</code>
+	<p class="meta">
+		Signed in as <strong>@{data.handle}</strong> · <code>{data.did}</code>
 	</p>
 	{#if data.profile?.displayName || data.sifaProfile?.headline}
 		<p>
@@ -69,10 +69,6 @@
 		<button type="submit">Save settings</button>
 	</form>
 	<p>
-		<a href="/admin/pages">Pages →</a>
-		<span class="dot">·</span>
-		<a href="/admin/hosting">Hosting →</a>
-		<span class="dot">·</span>
 		<a href="/s/{data.handle}">View your site →</a>
 	</p>
 
@@ -109,18 +105,12 @@
 		</ul>
 	{/if}
 
-	<form method="POST" action="?/logout">
-		<button type="submit">Sign out</button>
+	<form method="POST" action="?/logout" class="signout">
+		<button type="submit" class="quiet">Sign out</button>
 	</form>
 </main>
 
 <style>
-	main {
-		max-width: 36rem;
-		margin: 4rem auto;
-		padding: 0 1rem;
-		font-family: system-ui, sans-serif;
-	}
 	.settings {
 		display: grid;
 		gap: 1rem;
@@ -135,24 +125,18 @@
 		align-items: center;
 		gap: 0.5rem;
 	}
-	input,
-	textarea {
-		font: inherit;
-		padding: 0.4rem;
-	}
-	button {
-		margin-top: 1rem;
-		padding: 0.5rem 1rem;
+	.settings button {
+		margin-top: 0.5rem;
 		justify-self: start;
 	}
-	small {
-		color: #666;
+	ul {
+		margin: 0;
+		padding-left: 1.25rem;
 	}
-	.notice {
-		color: #060;
+	li {
+		margin: 0.25rem 0;
 	}
-	.dot {
-		margin: 0 0.5rem;
-		color: #999;
+	.signout {
+		margin-top: 2.5rem;
 	}
 </style>
diff --git a/apps/web/src/routes/admin/hosting/+page.svelte b/apps/web/src/routes/admin/hosting/+page.svelte
index 2dc8272..cdea7cb 100644
--- a/apps/web/src/routes/admin/hosting/+page.svelte
+++ b/apps/web/src/routes/admin/hosting/+page.svelte
@@ -17,7 +17,6 @@
 
 <main>
 	<h1>Hosting</h1>
-	<p><a href="/admin">← Admin</a></p>
 
 	{#if form?.message}
 		<p class="notice">{form.message}</p>
@@ -30,7 +29,7 @@
 			<a href="https://{data.slug}.{data.appHost}"><strong>{data.slug}.{data.appHost}</strong></a>.
 		</p>
 		<form method="POST" action="?/release">
-			<button type="submit">Release this subdomain</button>
+			<button type="submit" class="quiet">Release this subdomain</button>
 		</form>
 		<p>
 			<small>
@@ -78,7 +77,7 @@
 					</form>
 					<form method="POST" action="?/removeDomain" class="row">
 						<input type="hidden" name="domain" value={d.domain} />
-						<button type="submit">Remove</button>
+						<button type="submit" class="quiet">Remove</button>
 					</form>
 					{#if !d.verifiedAt}
 						<p class="hint">
@@ -117,14 +116,9 @@
 </main>
 
 <style>
-	main {
-		max-width: 36rem;
-		margin: 4rem auto;
-		padding: 0 1rem;
-		font-family: system-ui, sans-serif;
-	}
 	.inline {
 		display: flex;
+		flex-wrap: wrap;
 		gap: 0.75rem;
 		align-items: end;
 	}
@@ -134,54 +128,64 @@
 	}
 	.joined {
 		display: inline-flex;
-		align-items: center;
+		align-items: stretch;
+	}
+	.joined input {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
 	}
 	.suffix {
-		padding: 0.4rem 0.5rem;
-		background: #f2f2f2;
-		border: 1px solid #ccc;
+		display: inline-flex;
+		align-items: center;
+		padding: 0 0.5rem;
+		font-family: var(--font-mono);
+		font-size: 0.88rem;
+		background: var(--paper-sunk);
+		border: 1px solid color-mix(in srgb, var(--muted) 80%, var(--rule));
 		border-left: 0;
-		color: #555;
-	}
-	input {
-		font: inherit;
-		padding: 0.4rem;
-	}
-	button {
-		padding: 0.5rem 1rem;
+		border-radius: 0 2px 2px 0;
+		color: var(--muted);
 	}
 	.domains {
 		list-style: none;
+		margin: 0;
 		padding: 0;
 	}
 	.domains li {
-		padding: 0.75rem 0;
-		border-bottom: 1px solid #eee;
+		padding: 0.85rem 0;
+		border-bottom: 1px solid var(--rule);
 	}
 	.row {
 		display: inline-block;
 		margin-left: 0.5rem;
 	}
+	.row button {
+		font-size: 0.7rem;
+		padding: 0.3rem 0.7rem;
+	}
+	.verified,
+	.pending {
+		font-family: var(--font-mono);
+		font-size: 0.7rem;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		margin-left: 0.35rem;
+	}
 	.verified {
-		color: #060;
+		color: var(--ok);
 	}
 	.pending {
-		color: #a60;
+		color: color-mix(in srgb, var(--accent) 80%, var(--ink));
 	}
 	.hint {
-		margin: 0.5rem 0 0;
-		color: #555;
+		margin: 0.6rem 0 0;
+		color: var(--muted);
 		font-size: 0.9em;
 	}
-	small {
-		color: #666;
-	}
-	.notice {
-		color: #060;
-	}
 	.paused {
-		color: #555;
-		border-left: 3px solid #ddd;
-		padding-left: 0.75rem;
+		color: var(--muted);
+		padding: 0.85rem 1.25rem;
+		background: var(--paper-sunk);
+		border: 1px solid var(--rule);
 	}
 </style>
diff --git a/apps/web/src/routes/admin/pages/+page.svelte b/apps/web/src/routes/admin/pages/+page.svelte
index 8dd676f..7cebde3 100644
--- a/apps/web/src/routes/admin/pages/+page.svelte
+++ b/apps/web/src/routes/admin/pages/+page.svelte
@@ -9,7 +9,6 @@
 </svelte:head>
 
 <main>
-	<p><a href="/admin">← Admin</a></p>
 	<h1>Pages</h1>
 
 	{#if form?.message}
@@ -17,7 +16,7 @@
 	{/if}
 
 	{#if data.pages.length === 0}
-		<p>No pages yet. An /about page is a good first one.</p>
+		<p class="empty">No pages yet. An <code>/about</code> page is a good first one.</p>
 	{:else}
 		<ul>
 			{#each data.pages as page (page.rkey)}
@@ -30,41 +29,45 @@
 					</small>
 					<form method="POST" action="?/delete">
 						<input type="hidden" name="rkey" value={page.rkey} />
-						<button type="submit">Delete</button>
+						<button type="submit" class="quiet">Delete</button>
 					</form>
 				</li>
 			{/each}
 		</ul>
 	{/if}
 
-	<p><a href="/admin/pages/new">New page</a></p>
+	<p class="new">
+		<a class="btn" href="/admin/pages/new">New page</a>
+	</p>
 </main>
 
 <style>
-	main {
-		max-width: 44rem;
-		margin: 4rem auto;
-		padding: 0 1rem;
-		font-family: system-ui, sans-serif;
-	}
 	ul {
 		list-style: none;
+		margin: 0;
 		padding: 0;
 	}
 	li {
 		display: flex;
+		flex-wrap: wrap;
 		align-items: baseline;
-		gap: 0.75rem;
-		padding: 0.6rem 0;
-		border-bottom: 1px solid #eee;
+		gap: 0.35rem 0.75rem;
+		padding: 0.7rem 0;
+		border-bottom: 1px solid var(--rule);
 	}
 	li form {
 		margin-left: auto;
 	}
-	small {
-		color: #666;
+	li form button {
+		font-size: 0.7rem;
+		padding: 0.3rem 0.7rem;
+	}
+	.empty {
+		padding: 1.25rem;
+		background: var(--paper-sunk);
+		border: 1px solid var(--rule);
 	}
-	.notice {
-		color: #060;
+	.new {
+		margin-top: 1.5rem;
 	}
 </style>
diff --git a/apps/web/src/routes/admin/pages/[rkey]/+page.svelte b/apps/web/src/routes/admin/pages/[rkey]/+page.svelte
index 35e4673..73f5bbc 100644
--- a/apps/web/src/routes/admin/pages/[rkey]/+page.svelte
+++ b/apps/web/src/routes/admin/pages/[rkey]/+page.svelte
@@ -23,7 +23,7 @@
 </svelte:head>
 
 <main>
-	<p><a href="/admin/pages">← All pages</a></p>
+	<p class="crumb"><a href="/admin/pages">← All pages</a></p>
 	<h1>Edit page</h1>
 	<p class="meta">
 		<code>{data.rkey}</code>
@@ -39,17 +39,11 @@
 </main>
 
 <style>
-	main {
-		max-width: 44rem;
-		margin: 4rem auto;
-		padding: 0 1rem;
-		font-family: system-ui, sans-serif;
-	}
-	.meta {
-		color: #666;
+	.crumb {
+		margin: 0 0 1rem;
 		font-size: 0.9rem;
 	}
-	.error {
-		color: #a11;
+	.meta {
+		margin-bottom: 1.75rem;
 	}
 </style>
diff --git a/apps/web/src/routes/admin/pages/new/+page.svelte b/apps/web/src/routes/admin/pages/new/+page.svelte
index cfdabb1..140a784 100644
--- a/apps/web/src/routes/admin/pages/new/+page.svelte
+++ b/apps/web/src/routes/admin/pages/new/+page.svelte
@@ -18,7 +18,7 @@
 </svelte:head>
 
 <main>
-	<p><a href="/admin/pages">← All pages</a></p>
+	<p class="crumb"><a href="/admin/pages">← All pages</a></p>
 	<h1>New page</h1>
 
 	{#if form?.message}
@@ -29,13 +29,11 @@
 </main>
 
 <style>
-	main {
-		max-width: 44rem;
-		margin: 4rem auto;
-		padding: 0 1rem;
-		font-family: system-ui, sans-serif;
+	.crumb {
+		margin: 0 0 1rem;
+		font-size: 0.9rem;
 	}
-	.error {
-		color: #a11;
+	h1 {
+		margin-bottom: 1.75rem;
 	}
 </style>
-- 
2.51.2