From 8250555be71894a3ba1e79991d52821dee0bc007 Mon Sep 17 00:00:00 2001
From: ulziibay-kernel <253135130+ulziibay-kernel@users.noreply.github.com>
Date: Wed, 28 Oct 2026 19:27:02 +0000
Subject: [PATCH 1/2] Default the site chrome to the system UI sans stack

The man-page chrome rendered all prose in 14px monospace, which is hard
to read on desktop and mobile. Switch the default reading face to the
tried-and-tested system UI stack (native SF / Segoe UI / Roboto per
platform, nothing to download) at 16px/1.6, and convert the pre-based
prose to real paragraphs. Monospace stays where it means something:
prompt boxes, inline code, and diffs. The space-padded footer becomes a
flex row so it stays flush at any width.

This overrides the earlier 'always monospace' chrome decision; the
man-page structure (headline, uppercase sections, hanging indent,
footer) is unchanged. Auth emails and the OG preview image keep their
own fonts.
---
 app/[...path]/route.ts                 |  8 ++--
 app/bookmarks/route.ts                 | 13 +++---
 app/d/[slug]/CommentsShell.tsx         | 26 ++++++-----
 app/d/[slug]/history/HistoryClient.tsx | 17 ++++---
 app/d/[slug]/history/not-found.tsx     | 43 ++++++++++--------
 app/d/[slug]/history/page.tsx          |  2 +-
 app/d/[slug]/not-found.tsx             | 55 +++++++++++-----------
 app/d/[slug]/page.tsx                  |  2 +-
 app/docs/route.ts                      | 10 ++--
 app/layout.tsx                         |  5 +-
 app/login/route.ts                     | 63 ++++++++++----------------
 app/route.ts                           | 40 ++++++++--------
 lib/auth/verify-pages.ts               | 27 +++++------
 lib/docs/bookmarks-view.ts             |  4 +-
 lib/docs/overlay.ts                    |  4 +-
 lib/page.ts                            | 59 +++++++++++++-----------
 16 files changed, 191 insertions(+), 187 deletions(-)

diff --git a/app/[...path]/route.ts b/app/[...path]/route.ts
index 99ac094..aef4584 100644
--- a/app/[...path]/route.ts
+++ b/app/[...path]/route.ts
@@ -21,11 +21,13 @@ const PAGE = manPage({
   title: "404 — justhtml.sh",
   bodyHtml: `
 <h2>NOT FOUND</h2>
-<div class="body"><pre>404 — there is nothing at this path.</pre></div>
+<div class="body"><p>404 — there is nothing at this path.</p></div>
 
 <h2>SEE ALSO</h2>
-<div class="body"><pre><a href="/">/</a>              what justhtml.sh is
-<a href="/api/health">/api/health</a>    service + database health</pre></div>
+<div class="body">
+<p><a href="/">/</a> — what justhtml.sh is</p>
+<p><a href="/api/health">/api/health</a> — service + database health</p>
+</div>
 `,
 });
 
diff --git a/app/bookmarks/route.ts b/app/bookmarks/route.ts
index 9764fed..f5a5646 100644
--- a/app/bookmarks/route.ts
+++ b/app/bookmarks/route.ts
@@ -19,12 +19,12 @@ export const dynamic = "force-dynamic";
 
 const LIST_LIMIT = 500;
 
-// Rows lay out as a flex line: the man-page `<pre>` (title + dimmed tail) and a
+// Rows lay out as a flex line: the row's main text (title + dimmed tail) and a
 // quiet inline `remove` form sitting on the same baseline.
 const ROW_STYLE = `
 <style>
   .row { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.1rem 0; }
-  .row pre { min-width: 0; }
+  .row .main { min-width: 0; }
   .row a.title { font-weight: 700; }
   .row .tail { color: #888; }
   .row.revoked .title { color: #999; }
@@ -69,7 +69,7 @@ async function bookmarkAccess(
 
 function emptySection(heading: string, copy: string): string {
   return `<h2>${heading}</h2>
-<div class="body"><pre>${copy}</pre></div>`;
+<div class="body"><p>${copy}</p></div>`;
 }
 
 function section(heading: string, rows: string[]): string {
@@ -94,7 +94,8 @@ export async function GET(req: Request): Promise<Response> {
     else shared.push(bookmark);
   }
 
-  const intro = `<div class="body"><pre>Signed in as <code>${esc(email)}</code>.\n\nBookmarks track current access. If a doc's access is later revoked it stays\nlisted with a revoked label and no link — use remove to drop it.</pre></div>`;
+  const intro = `<div class="body"><p>Signed in as <code>${esc(email)}</code>.</p>
+<p>Bookmarks track current access. If a doc's access is later revoked it stays listed with a revoked label and no link — use remove to drop it.</p></div>`;
 
   // Revoked rows show the title snapshotted at bookmark time (bookmark_title),
   // never the doc's current title, which the viewer can no longer see.
@@ -136,13 +137,13 @@ export async function GET(req: Request): Promise<Response> {
       ? section("YOUR DOCUMENTS", ownedRows)
       : emptySection(
           "YOUR DOCUMENTS",
-          "You haven't bookmarked any of your own documents yet. Use the bookmark\nbutton on a doc to save it here."
+          "You haven't bookmarked any of your own documents yet. Use the bookmark button on a doc to save it here."
         ),
     shared.length
       ? section("SHARED WITH YOU", sharedRows)
       : emptySection(
           "SHARED WITH YOU",
-          "Nothing shared with you is bookmarked yet. Use the bookmark button on a\ndoc to save it here."
+          "Nothing shared with you is bookmarked yet. Use the bookmark button on a doc to save it here."
         ),
   ].join("\n");
 
diff --git a/app/d/[slug]/CommentsShell.tsx b/app/d/[slug]/CommentsShell.tsx
index 8943b12..79b88b4 100644
--- a/app/d/[slug]/CommentsShell.tsx
+++ b/app/d/[slug]/CommentsShell.tsx
@@ -35,6 +35,10 @@ import { startVersionPolling } from "@/lib/docs/version-polling";
 // vertical selection toolbar (add comment + react). All persistence goes through
 // /api/v1/docs/:slug/comments and /reactions; the API enforces permissions.
 
+// Chrome (top bar, rail, composer, buttons) uses the site-wide system sans
+// reading face; code and the inline-code chips stay monospace. Comment bodies
+// keep their Georgia serif (.jh-md below).
+const SANS = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
 const MONO = `ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace`;
 // The picker set — the curated brand emoji (birthday.md B11 example set). Every
 // one is in the server's ALLOWED_EMOJI (lib/docs/reactions.ts); agents may also
@@ -1253,7 +1257,7 @@ function paletteVars(p: ChromePalette): React.CSSProperties {
 
 // --------------------------- subcomponents ---------------------------
 
-// Light / dark / auto theme control in the chrome bar. Segmented, monospace,
+// Light / dark / auto theme control in the chrome bar. Segmented,
 // themed off the same --jh-tog-* vars as the comment toggle so it recolors in
 // dark. "auto" (◐) matches the document; ☀/☾ force the choice and persist it.
 const THEME_OPTS: { m: ThemeMode; glyph: string; label: string }[] = [
@@ -1739,7 +1743,7 @@ function LinkGlyph() {
 // attribute. Desktop (>768px): collapsing hides the rail to reclaim width; the
 // scrim + ✕ are display:none. Mobile (<=768px): the doc is full-width and the
 // rail is an off-canvas right drawer that slides in over the doc with a scrim.
-// Light mode only, monospace chrome — consistent with the rest of the shell.
+// Light mode only, sans chrome — consistent with the rest of the shell.
 const RAIL_CSS = `
 /* Read-time chip. Kernel brand palette: the fill gets heavier as the estimate grows —
    kernel-green #81b300 under 5 min, beige-muted #e1dccf to 15, charcoal #212225 past
@@ -1899,8 +1903,8 @@ const barStyle: React.CSSProperties = {
   alignItems: "center",
   height: "2.4rem",
   padding: "0 1.25rem",
-  fontFamily: MONO,
-  fontSize: 13,
+  fontFamily: SANS,
+  fontSize: 14,
   borderBottom: "1px solid var(--jh-bar-border, #ccc)",
   color: "var(--jh-bar-fg, #111)",
   background: "var(--jh-bar-bg, #fff)",
@@ -1921,7 +1925,7 @@ const railStyle: React.CSSProperties = {
   background: "var(--jh-rail-bg, #fbfbfb)",
   position: "relative",
   overflowY: "auto",
-  fontFamily: MONO,
+  fontFamily: SANS,
   transition: CHROME_TRANSITION,
 };
 
@@ -1993,8 +1997,8 @@ const composerTextarea: React.CSSProperties = {
   width: "100%",
   border: "1px solid var(--jh-input-border, #d4d4d4)",
   borderRadius: 4,
-  fontFamily: MONO,
-  fontSize: 12,
+  fontFamily: SANS,
+  fontSize: 13,
   padding: 5,
   resize: "vertical",
   minHeight: 34,
@@ -2004,8 +2008,8 @@ const composerTextarea: React.CSSProperties = {
 
 function composerBtn(disabled: boolean): React.CSSProperties {
   return {
-    fontFamily: MONO,
-    fontSize: 12,
+    fontFamily: SANS,
+    fontSize: 13,
     border: "1px solid var(--jh-btn-border, #111)",
     background: "var(--jh-btn-bg, #111)",
     color: "var(--jh-btn-fg, #fff)",
@@ -2044,8 +2048,8 @@ const toastStyle: React.CSSProperties = {
   transform: "translateX(-50%)",
   background: "var(--jh-sel-bg, #111)",
   color: "var(--jh-sel-fg, #fff)",
-  fontFamily: MONO,
-  fontSize: 12,
+  fontFamily: SANS,
+  fontSize: 13,
   padding: "7px 14px",
   borderRadius: 7,
   boxShadow: "0 4px 14px var(--jh-sel-shadow, rgba(0,0,0,.3))",
diff --git a/app/d/[slug]/history/HistoryClient.tsx b/app/d/[slug]/history/HistoryClient.tsx
index cef1810..f248ce1 100644
--- a/app/d/[slug]/history/HistoryClient.tsx
+++ b/app/d/[slug]/history/HistoryClient.tsx
@@ -28,6 +28,9 @@ type Props = {
   versions: VersionMeta[]; // newest first
 };
 
+// Chrome (headers, version list, buttons) uses the site-wide system sans reading
+// face; the diff pane is code and stays monospace.
+const SANS = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
 const MONO = `ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace`;
 
 function fmtBytes(n: number): string {
@@ -56,7 +59,7 @@ export default function HistoryClient({ slug, title, currentVersion, versions }:
   const sel = versions.find((v) => v.version === selected);
 
   return (
-    <div style={{ fontFamily: MONO, fontSize: 13, lineHeight: 1.55 }}>
+    <div style={{ fontFamily: SANS, fontSize: 14, lineHeight: 1.6 }}>
       <div
         style={{
           display: "flex",
@@ -142,11 +145,13 @@ export default function HistoryClient({ slug, title, currentVersion, versions }:
           </div>
 
           {sel && sel.patch !== undefined ? (
-            <PatchDiff
-              key={`${sel.version}-${split ? "split" : "unified"}`}
-              patch={sel.patch}
-              options={{ diffStyle: split ? "split" : "unified", themeType: "light" }}
-            />
+            <div style={{ fontFamily: MONO, fontSize: 13, lineHeight: 1.55 }}>
+              <PatchDiff
+                key={`${sel.version}-${split ? "split" : "unified"}`}
+                patch={sel.patch}
+                options={{ diffStyle: split ? "split" : "unified", themeType: "light" }}
+              />
+            </div>
           ) : (
             <p style={{ opacity: 0.6 }}>
               No diff to show. This is the oldest retained snapshot.
diff --git a/app/d/[slug]/history/not-found.tsx b/app/d/[slug]/history/not-found.tsx
index 22f926c..b3bba6b 100644
--- a/app/d/[slug]/history/not-found.tsx
+++ b/app/d/[slug]/history/not-found.tsx
@@ -3,54 +3,57 @@
 // the /d/:slug private notice; no existence oracle. Carries a real 404 status.
 //
 // Chrome: the LOCKED variant-A man-page chrome (birthday.md "Site-wide redesign
-// decisions"). The root layout supplies <html>/<body> + the monospace brand;
+// decisions"). The root layout supplies <html>/<body> + the sans reading face;
 // this matches manPage()'s markup (headline + <h2> + .body + footer).
 
 const BODY: React.CSSProperties = {
   margin: "0 auto",
   padding: "2rem 1.5rem 3rem",
   maxWidth: 760,
-  fontFamily: `ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace`,
-  fontSize: 14,
-  lineHeight: 1.55,
+  fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`,
+  fontSize: 16,
+  lineHeight: 1.6,
   color: "#111",
   background: "#fff",
 };
 
-function footerLine(date: string): string {
-  const left = "justhtml.sh";
-  const right = "JUSTHTML.SH(1)";
-  const width = 78;
-  const gaps = Math.max(2, width - left.length - right.length - date.length);
-  const l = Math.ceil(gaps / 2);
-  const r = gaps - l;
-  return `${left}${" ".repeat(l)}${date}${" ".repeat(r)}${right}`;
+// One quiet justified footer line, flex space-between so it stays flush at any
+// wrap width. Mirrors manPage()'s footer.
+function Footer({ date }: { date: string }) {
+  return (
+    <div style={{ display: "flex", justifyContent: "space-between", gap: "1rem" }}>
+      <span>justhtml.sh</span>
+      <span>{date}</span>
+      <span>JUSTHTML.SH(1)</span>
+    </div>
+  );
 }
 
 export default function HistoryNotFound() {
   const date = new Date().toISOString().slice(0, 10);
   return (
     <main style={BODY}>
-      <pre style={{ fontWeight: 700, margin: "0 0 1.5rem" }}>JUSTHTML.SH(1)</pre>
+      <div style={{ fontWeight: 700, margin: "0 0 1.5rem" }}>JUSTHTML.SH(1)</div>
       <h2
         style={{
           fontSize: 14,
           fontWeight: 700,
-          margin: "1.6rem 0 0.3rem",
+          margin: "1.6rem 0 0.4rem",
           textTransform: "uppercase",
-          letterSpacing: "0.03em",
+          letterSpacing: "0.05em",
         }}
       >
         PRIVATE OR NOT FOUND
       </h2>
       <div style={{ paddingLeft: "3.5ch" }}>
-        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>{`This document is private, or does not exist.
-
-If you were given a link with a ?viewtoken=… on it, use that exact
-link. The owner can rotate the token, which invalidates old links.`}</pre>
+        <p style={{ margin: "0 0 0.4rem" }}>This document is private, or does not exist.</p>
+        <p style={{ margin: 0 }}>
+          If you were given a link with a ?viewtoken=… on it, use that exact link.
+          The owner can rotate the token, which invalidates old links.
+        </p>
       </div>
       <footer style={{ marginTop: "2.5rem", color: "#666" }}>
-        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>{footerLine(date)}</pre>
+        <Footer date={date} />
       </footer>
     </main>
   );
diff --git a/app/d/[slug]/history/page.tsx b/app/d/[slug]/history/page.tsx
index 1bd416c..e206583 100644
--- a/app/d/[slug]/history/page.tsx
+++ b/app/d/[slug]/history/page.tsx
@@ -68,7 +68,7 @@ export default async function HistoryPage({ params, searchParams }: Props) {
         margin: "0 auto",
         maxWidth: 1100,
         padding: "1.5rem 1.25rem 4rem",
-        fontFamily: `ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace`,
+        fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`,
       }}
     >
       <HistoryClient
diff --git a/app/d/[slug]/not-found.tsx b/app/d/[slug]/not-found.tsx
index e4510d7..ea7d22d 100644
--- a/app/d/[slug]/not-found.tsx
+++ b/app/d/[slug]/not-found.tsx
@@ -9,28 +9,30 @@ import { headers } from "next/headers";
 //
 // Chrome: the LOCKED variant-A man-page chrome (birthday.md "Site-wide redesign
 // decisions" — the private-doc notice, previously chrome-less, now reads as a
-// full page). The root layout supplies <html>/<body> + the monospace brand;
+// full page). The root layout supplies <html>/<body> + the sans reading face;
 // this matches manPage()'s markup (headline + <h2> + .body + footer).
 
 const BODY: React.CSSProperties = {
   margin: "0 auto",
   padding: "2rem 1.5rem 3rem",
   maxWidth: 760,
-  fontFamily: `ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace`,
-  fontSize: 14,
-  lineHeight: 1.55,
+  fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`,
+  fontSize: 16,
+  lineHeight: 1.6,
   color: "#111",
   background: "#fff",
 };
 
-function footerLine(date: string): string {
-  const left = "justhtml.sh";
-  const right = "JUSTHTML.SH(1)";
-  const width = 78;
-  const gaps = Math.max(2, width - left.length - right.length - date.length);
-  const l = Math.ceil(gaps / 2);
-  const r = gaps - l;
-  return `${left}${" ".repeat(l)}${date}${" ".repeat(r)}${right}`;
+// One quiet justified footer line, flex space-between so it stays flush at any
+// wrap width. Mirrors manPage()'s footer.
+function Footer({ date }: { date: string }) {
+  return (
+    <div style={{ display: "flex", justifyContent: "space-between", gap: "1rem" }}>
+      <span>justhtml.sh</span>
+      <span>{date}</span>
+      <span>JUSTHTML.SH(1)</span>
+    </div>
+  );
 }
 
 export default async function ViewerNotFound() {
@@ -64,33 +66,32 @@ export default async function ViewerNotFound() {
 
   return (
     <main style={BODY}>
-      <pre style={{ fontWeight: 700, margin: "0 0 1.5rem" }}>JUSTHTML.SH(1)</pre>
+      <div style={{ fontWeight: 700, margin: "0 0 1.5rem" }}>JUSTHTML.SH(1)</div>
       <h2
         style={{
           fontSize: 14,
           fontWeight: 700,
-          margin: "1.6rem 0 0.3rem",
+          margin: "1.6rem 0 0.4rem",
           textTransform: "uppercase",
-          letterSpacing: "0.03em",
+          letterSpacing: "0.05em",
         }}
       >
         PRIVATE OR NOT FOUND
       </h2>
       <div style={{ paddingLeft: "3.5ch" }}>
-        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
-          {`This document is private, or does not exist.
-
-If you were given a link with a ?viewtoken=… on it, use that exact
-link. The owner can rotate the token, which invalidates old links.
-
-Was this shared with you? `}
-          <a href={signinHref}>Sign in</a>
-          {` with the email it was
-shared to — if you have access, you'll land right back here.`}
-        </pre>
+        <p style={{ margin: "0 0 0.4rem" }}>This document is private, or does not exist.</p>
+        <p style={{ margin: "0 0 0.4rem" }}>
+          If you were given a link with a ?viewtoken=… on it, use that exact link.
+          The owner can rotate the token, which invalidates old links.
+        </p>
+        <p style={{ margin: 0 }}>
+          Was this shared with you? <a href={signinHref}>Sign in</a> with the
+          email it was shared to — if you have access, you'll land right back
+          here.
+        </p>
       </div>
       <footer style={{ marginTop: "2.5rem", color: "#666" }}>
-        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>{footerLine(date)}</pre>
+        <Footer date={date} />
       </footer>
     </main>
   );
diff --git a/app/d/[slug]/page.tsx b/app/d/[slug]/page.tsx
index 7075808..a575244 100644
--- a/app/d/[slug]/page.tsx
+++ b/app/d/[slug]/page.tsx
@@ -33,7 +33,7 @@ export const dynamic = "force-dynamic";
 //
 // Token rules identical to /raw: owner session → email/domain grant → view token
 // → public; otherwise the "private or does not exist" notice (no existence
-// oracle). The root layout provides <html>/<body> + the monospace brand; these
+// oracle). The root layout provides <html>/<body> + the sans reading face; these
 // components render body content only.
 
 type Props = {
diff --git a/app/docs/route.ts b/app/docs/route.ts
index 5e8359b..954b54d 100644
--- a/app/docs/route.ts
+++ b/app/docs/route.ts
@@ -107,14 +107,13 @@ function docRow(opts: {
   const vis = opts.isPublic ? "public" : "private";
   // Comment count: a compact `Nc` suffix (variant C), only when there are any.
   const comments = opts.commentCount > 0 ? ` · ${opts.commentCount}c` : "";
-  return `<div class="row"><pre><a class="title" href="${esc(href)}">${esc(label)}</a>  <span class="tail">${esc(opts.access)} ${vis} · ${esc(fmtDate(opts.updatedAt))}${comments}</span></pre></div>`;
+  return `<div class="row"><a class="title" href="${esc(href)}">${esc(label)}</a> <span class="tail">${esc(opts.access)} ${vis} · ${esc(fmtDate(opts.updatedAt))}${comments}</span></div>`;
 }
 
 function ownedSection(owned: DocListRow[]): string {
   if (owned.length === 0) {
     return `<h2>YOUR DOCUMENTS</h2>
-<div class="body"><pre>You don't own any documents yet. Your agent publishes them via the
-API (POST /api/v1/docs) using the key it holds — see <a href="/llms.txt">/llms.txt</a>.</pre></div>`;
+<div class="body"><p>You don't own any documents yet. Your agent publishes them via the API (POST /api/v1/docs) using the key it holds — see <a href="/llms.txt">/llms.txt</a>.</p></div>`;
   }
   const rows = owned.map((d) =>
     docRow({
@@ -135,8 +134,7 @@ ${rows.join("\n")}
 function sharedSection(shared: SharedDocRow[]): string {
   if (shared.length === 0) {
     return `<h2>SHARED WITH YOU</h2>
-<div class="body"><pre>Nothing is shared with you yet. When someone grants your email (or
-your email's domain) access to a doc, it shows up here.</pre></div>`;
+<div class="body"><p>Nothing is shared with you yet. When someone grants your email (or your email's domain) access to a doc, it shows up here.</p></div>`;
   }
   const rows = shared.map((d) =>
     docRow({
@@ -205,7 +203,7 @@ export async function GET(req: Request): Promise<Response> {
   const sections: string[] = [];
   sections.push(VARIANT_C_STYLE);
   sections.push(
-    `<div class="body session"><pre>Signed in as <code>${esc(email)}</code>. See <a href="/bookmarks">bookmarks</a>.</pre><form method="POST" action="/logout"><button type="submit">log out</button></form></div>`
+    `<div class="body session"><p>Signed in as <code>${esc(email)}</code>. See <a href="/bookmarks">bookmarks</a>.</p><form method="POST" action="/logout"><button type="submit">log out</button></form></div>`
   );
   if (hasAccount) {
     sections.push(ownedSection(owned));
diff --git a/app/layout.tsx b/app/layout.tsx
index 16ef6e0..1e45c06 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,7 +7,8 @@ import type { ReactNode } from "react";
 // not add a React runtime to the man-page pages (homepage, /auth.md, /llms.txt,
 // /raw, the JSON discovery docs, the form POSTs). It exists solely so the two
 // designated React surfaces have a document shell. Styling is kept consistent with
-// the man-page brand: monospace, always light mode (httpbingo.org vibe).
+// the man-page brand: the system sans reading face (SANS in lib/page.ts),
+// always light mode.
 export const metadata = {
   title: "justhtml.sh",
 };
@@ -23,7 +24,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
             __html: `:root{color-scheme:light}
 *{box-sizing:border-box}
 html,body{margin:0}
-body{font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;color:#111;background:#fff}
+body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#111;background:#fff}
 a{color:#0000ee}`,
           }}
         />
diff --git a/app/login/route.ts b/app/login/route.ts
index cdac393..9c165d6 100644
--- a/app/login/route.ts
+++ b/app/login/route.ts
@@ -19,18 +19,14 @@ const EXPIRY_MIN = LOGIN_TOKEN_TTL_MIN;
 // claim ceremony — ONE flow"). We avoid the earlier "this never creates an
 // account" phrasing the founder found confusing; we just say what it does.
 function introCopy(): string {
-  return `Enter your email and we'll send a single-use link that signs you
-in on this device. No password.
-
-Sign-up is agent-only: an account is created when your agent signs
-you up via <a href="/auth.md">/auth.md</a>. Use this to get back to docs you own or
-that were shared with you.`;
+  return `<p>Enter your email and we'll send a single-use link that signs you in on this device. No password.</p>
+<p>Sign-up is agent-only: an account is created when your agent signs you up via <a href="/auth.md">/auth.md</a>. Use this to get back to docs you own or that were shared with you.</p>`;
 }
 
 // Variant A chrome with the LOCKED /login spacing fix: a clear vertical gap
 // between the email input and the "send login link" button (birthday.md:
-// "add vertical space between the email input and the … button"). The blank
-// <pre> line inside the form supplies that gap in the monospace column.
+// "add vertical space between the email input and the … button"), supplied by
+// the submit row's top margin.
 function loginForm(next: string, opts: { error?: string } = {}): string {
   const errBlock = opts.error
     ? `<p class="err">${esc(opts.error)}</p>\n`
@@ -39,16 +35,14 @@ function loginForm(next: string, opts: { error?: string } = {}): string {
     title: "justhtml.sh — login",
     bodyHtml: `
 <h2>SIGN IN</h2>
-<div class="body"><pre>${introCopy()}</pre></div>
+<div class="body">${introCopy()}</div>
 
 <h2>EMAIL</h2>
 <div class="body">
 ${errBlock}<form method="POST" action="/login">
-<pre>email: <input type="email" name="email" required autofocus inputmode="email" autocomplete="email" placeholder="you@example.com"></pre>
+<p>email: <input type="email" name="email" required autofocus inputmode="email" autocomplete="email" placeholder="you@example.com"></p>
 <input type="hidden" name="next" value="${esc(next)}">
-<pre>
-
-       <button type="submit">send login link</button></pre>
+<p style="margin-top:1.2rem"><button type="submit">send login link</button></p>
 </form>
 </div>
 `,
@@ -62,24 +56,17 @@ ${errBlock}<form method="POST" action="/login">
 function dashboardPage(email: string, hasAccount: boolean): string {
   const body = hasAccount
     ? `<h2>SIGNED IN</h2>
-<div class="body"><pre>You're signed in as <code>${esc(email)}</code>, and you have a justhtml.sh
-account. See <a href="/docs">your documents</a> — owned and shared with you.
-
-Your agent publishes and manages docs with the key it received when
-it signed you up. Private docs you own (and any shared with your
-email) render right in the browser while you're signed in.
-
-See <a href="/llms.txt">/llms.txt</a> and <a href="/api/spec.yaml">/api/spec.yaml</a> for the full API.</pre></div>`
+<div class="body">
+<p>You're signed in as <code>${esc(email)}</code>, and you have a justhtml.sh account. See <a href="/docs">your documents</a> — owned and shared with you.</p>
+<p>Your agent publishes and manages docs with the key it received when it signed you up. Private docs you own (and any shared with your email) render right in the browser while you're signed in.</p>
+<p>See <a href="/llms.txt">/llms.txt</a> and <a href="/api/spec.yaml">/api/spec.yaml</a> for the full API.</p>
+</div>`
     : `<h2>NO ACCOUNT YET</h2>
-<div class="body"><pre>You're signed in as <code>${esc(email)}</code>, but you don't have a
-justhtml.sh account yet.
-
-Sign-up is agent-only — tell your agent to sign up at
-<a href="/auth.md">justhtml.sh/auth.md</a>. It registers with this email; we email you a
-6-digit code; you read the code back to your agent. You'll end up
-with an account and your agent will hold the API key.
-
-Anything shared with your email shows up under <a href="/docs">your documents</a>.</pre></div>`;
+<div class="body">
+<p>You're signed in as <code>${esc(email)}</code>, but you don't have a justhtml.sh account yet.</p>
+<p>Sign-up is agent-only — tell your agent to sign up at <a href="/auth.md">justhtml.sh/auth.md</a>. It registers with this email; we email you a 6-digit code; you read the code back to your agent. You'll end up with an account and your agent will hold the API key.</p>
+<p>Anything shared with your email shows up under <a href="/docs">your documents</a>.</p>
+</div>`;
   return manPage({
     title: "justhtml.sh — account",
     bodyHtml: body,
@@ -91,13 +78,11 @@ function checkEmailPage(): string {
     title: "justhtml.sh — check your email",
     bodyHtml: `
 <h2>CHECK YOUR EMAIL</h2>
-<div class="body"><pre>If that address can sign in, a login link is on its way.
-
-The link is single-use and expires in ${EXPIRY_MIN} minutes. Click it on
-this device to sign in.
-
-Didn't get it? It may be filtered, or the address may be one we
-don't send to. You can <a href="/login">request another</a>.</pre></div>
+<div class="body">
+<p>If that address can sign in, a login link is on its way.</p>
+<p>The link is single-use and expires in ${EXPIRY_MIN} minutes. Click it on this device to sign in.</p>
+<p>Didn't get it? It may be filtered, or the address may be one we don't send to. You can <a href="/login">request another</a>.</p>
+</div>
 `,
   });
 }
@@ -153,7 +138,7 @@ export async function POST(req: Request): Promise<Response> {
       manPage({
         title: "justhtml.sh — slow down",
         bodyHtml: `<h2>TOO MANY REQUESTS</h2>
-<div class="body"><pre>Too many login links requested. Try again in about ${mins} minute(s).</pre></div>`,
+<div class="body"><p>Too many login links requested. Try again in about ${mins} minute(s).</p></div>`,
       }),
       { status: 429, headers: { "Retry-After": String(tripped.retryAfter) } }
     );
@@ -183,7 +168,7 @@ export async function POST(req: Request): Promise<Response> {
       manPage({
         title: "justhtml.sh — email failed",
         bodyHtml: `<h2>COULDN'T SEND</h2>
-<div class="body"><pre>We couldn't send the login email just now. Please <a href="/login">try again</a>.</pre></div>`,
+<div class="body"><p>We couldn't send the login email just now. Please <a href="/login">try again</a>.</p></div>`,
       }),
       { status: 500 }
     );
diff --git a/app/route.ts b/app/route.ts
index b574b65..49056b5 100644
--- a/app/route.ts
+++ b/app/route.ts
@@ -38,18 +38,19 @@ export function GET() {
     margin: 0 auto;
     padding: 2rem 1.5rem 3rem;
     max-width: 760px;
-    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
-    font-size: 14px;
-    line-height: 1.55;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
     color: #111;
     background: #fff;
   }
   .headline { font-weight: 700; margin: 0 0 1.5rem; }
   h2 {
-    font-size: 14px; font-weight: 700; margin: 1.6rem 0 0.3rem;
-    text-transform: uppercase; letter-spacing: 0.03em;
+    font-size: 14px; font-weight: 700; margin: 1.6rem 0 0.4rem;
+    text-transform: uppercase; letter-spacing: 0.05em;
   }
-  pre { white-space: pre-wrap; margin: 0; }
+  p { margin: 0 0 0.4rem; }
+  pre { white-space: pre-wrap; margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace; font-size: 14px; }
   .body { padding-left: 3.5ch; }
   a { color: #0000ee; }
   .promptwrap { position: relative; }
@@ -73,13 +74,14 @@ export function GET() {
   .copy svg { width: 13px; height: 13px; }
   .hint { color: #666; margin: 0 0 0.5rem; }
   footer { margin-top: 2.5rem; color: #666; }
+  footer .foot { display: flex; justify-content: space-between; gap: 1rem; }
 </style>
 </head>
 <body>
-<pre class="headline">JUSTHTML.SH(1)</pre>
+<div class="headline">JUSTHTML.SH(1)</div>
 
 <h2>NAME</h2>
-<div class="body"><pre>justhtml.sh — a place for agents to publish and discuss HTML documents</pre></div>
+<div class="body"><p>justhtml.sh — a place for agents to publish and discuss HTML documents</p></div>
 
 <h2>SYNOPSIS</h2>
 <div class="body">
@@ -96,21 +98,19 @@ ${COPY_BTN}
 </div>
 
 <h2>DESCRIPTION</h2>
-<div class="body"><pre>The agent self-onboards, gets an API key, and publishes HTML to stable
-URLs like https://justhtml.sh/d/fierce-tiger-12345. Once published,
-documents can be edited and commented on, by you (via the web UI) or an
-agent (via API). Docs are private by default. There is no build step, no
-framework — the document you publish is the document people see.</pre></div>
+<div class="body"><p>The agent self-onboards, gets an API key, and publishes HTML to stable URLs like https://justhtml.sh/d/fierce-tiger-12345. Once published, documents can be edited and commented on, by you (via the web UI) or an agent (via API). Docs are private by default. There is no build step, no framework — the document you publish is the document people see.</p></div>
 
 <h2>SEE ALSO</h2>
-<div class="body"><pre><a href="/auth.md">/auth.md</a>        how agents sign up + authenticate
-<a href="/llms.txt">/llms.txt</a>       agent-facing usage
-<a href="/openapi.json">/openapi.json</a>   OpenAPI spec
-<a href="/docs">/docs</a>           your documents
-<a href="/bookmarks">/bookmarks</a>      bookmarked docs
-<a href="https://github.com/kernel/just-html">github</a>          source</pre></div>
+<div class="body">
+<p><a href="/auth.md">/auth.md</a> — how agents sign up + authenticate</p>
+<p><a href="/llms.txt">/llms.txt</a> — agent-facing usage</p>
+<p><a href="/openapi.json">/openapi.json</a> — OpenAPI spec</p>
+<p><a href="/docs">/docs</a> — your documents</p>
+<p><a href="/bookmarks">/bookmarks</a> — bookmarked docs</p>
+<p><a href="https://github.com/kernel/just-html">github</a> — source</p>
+</div>
 
-<footer><pre>justhtml.sh                      2026-06-13                      JUSTHTML.SH(1)</pre></footer>
+<footer><div class="foot"><span>justhtml.sh</span><span>2026-06-13</span><span>JUSTHTML.SH(1)</span></div></footer>
 
 <script>
 // The one intentional bit of JS on this page: a clipboard copy button. The
diff --git a/lib/auth/verify-pages.ts b/lib/auth/verify-pages.ts
index dbcaaee..97d5c71 100644
--- a/lib/auth/verify-pages.ts
+++ b/lib/auth/verify-pages.ts
@@ -23,21 +23,20 @@ export function signingInPage(token: string, next: string): string {
     title: "justhtml.sh — signing you in",
     bodyHtml: `
 <h2>SIGNING YOU IN</h2>
-<div class="body"><pre>Signing you in…</pre></div>
+<div class="body"><p>Signing you in…</p></div>
 
 <form id="verifyform" method="POST" action="/login/verify">
 <input type="hidden" name="token" value="${esc(token)}">
 <input type="hidden" name="next" value="${esc(next)}">
 <noscript>
-<div class="body"><pre>Click the button to finish signing in on this device.
-<button type="submit">sign in</button></pre></div>
+<div class="body"><p>Click the button to finish signing in on this device.</p>
+<p><button type="submit">sign in</button></p></div>
 </noscript>
 </form>
 <script>document.getElementById('verifyform').submit();</script>
 
 <noscript>
-<div class="body"><pre>This link is single-use. If it's expired or already used you'll
-be asked to <a href="/login">request a new one</a>.</pre></div>
+<div class="body"><p>This link is single-use. If it's expired or already used you'll be asked to <a href="/login">request a new one</a>.</p></div>
 </noscript>
 `,
   });
@@ -57,14 +56,12 @@ export function confirmSignInPage(token: string, next: string): string {
     title: "justhtml.sh — confirm sign-in",
     bodyHtml: `
 <h2>ALMOST THERE</h2>
-<div class="body"><pre>Tap the button to finish signing in on this device. This link is
-single-use — if it's expired or already used you'll be asked to
-<a href="/login">request a new one</a>.</pre></div>
+<div class="body"><p>Tap the button to finish signing in on this device. This link is single-use — if it's expired or already used you'll be asked to <a href="/login">request a new one</a>.</p></div>
 
 <form method="POST" action="/login/verify">
 <input type="hidden" name="token" value="${esc(token)}">
 <input type="hidden" name="next" value="${esc(next)}">
-<div class="body"><pre><button type="submit">sign in</button></pre></div>
+<div class="body"><p><button type="submit">sign in</button></p></div>
 </form>
 `,
   });
@@ -86,14 +83,14 @@ export function deadLinkPage(next?: string): string {
     title: "justhtml.sh — link expired",
     bodyHtml: `
 <h2>LINK EXPIRED OR USED</h2>
-<div class="body"><pre>This login link is expired or already used.
-
-Request a new one at <a href="${esc(requestHref)}">justhtml.sh/login</a>${
+<div class="body">
+<p>This login link is expired or already used.</p>
+<p>Request a new one at <a href="${esc(requestHref)}">justhtml.sh/login</a>${
       dest
-        ? ` — signing in again
-will take you straight to where this link was headed.`
+        ? ` — signing in again will take you straight to where this link was headed.`
         : "."
-    }</pre></div>
+    }</p>
+</div>
 `,
   });
 }
diff --git a/lib/docs/bookmarks-view.ts b/lib/docs/bookmarks-view.ts
index ff6ab9c..fb9193f 100644
--- a/lib/docs/bookmarks-view.ts
+++ b/lib/docs/bookmarks-view.ts
@@ -42,14 +42,14 @@ export function bookmarkRow(m: RowModel): string {
   const label = m.title && m.title.trim() ? m.title : m.slug;
 
   if (revoked) {
-    return `<div class="row revoked"><pre><span class="title">${esc(label)}</span>  <span class="tail">revoked · ${esc(fmtDate(m.bookmarkedAt))}</span></pre>${removeForm(m.docId)}</div>`;
+    return `<div class="row revoked"><div class="main"><span class="title">${esc(label)}</span> <span class="tail">revoked · ${esc(fmtDate(m.bookmarkedAt))}</span></div>${removeForm(m.docId)}</div>`;
   }
 
   const href = m.token
     ? `/d/${encodeURIComponent(m.slug)}?viewtoken=${encodeURIComponent(m.token)}`
     : `/d/${encodeURIComponent(m.slug)}`;
   const vis = m.isPublic ? "public" : "private";
-  return `<div class="row"><pre><a class="title" href="${esc(href)}">${esc(label)}</a>  <span class="tail">${esc(m.access)} ${vis} · ${esc(fmtDate(m.bookmarkedAt))}</span></pre>${removeForm(m.docId)}</div>`;
+  return `<div class="row"><div class="main"><a class="title" href="${esc(href)}">${esc(label)}</a> <span class="tail">${esc(m.access)} ${vis} · ${esc(fmtDate(m.bookmarkedAt))}</span></div>${removeForm(m.docId)}</div>`;
 }
 
 // Inputs for re-resolving a bookmarked doc's access at read time, reduced to
diff --git a/lib/docs/overlay.ts b/lib/docs/overlay.ts
index 9ac50dc..2a9c5b8 100644
--- a/lib/docs/overlay.ts
+++ b/lib/docs/overlay.ts
@@ -425,7 +425,7 @@ export const OVERLAY_SCRIPT = String.raw`
       + "html.jh-dark span[data-jh-seg].jh-focus{background:rgba(245,197,24,.2);box-shadow:0 0 0 1px rgba(245,197,24,.85)}"
       + "span[data-jh-chip]{display:inline-flex;align-items:center;gap:2px;font-size:11.5px;line-height:1;"
       + "background:#fbfbfb;border:1px solid #e0e0e0;border-radius:10px;padding:1px 6px 1px 5px;margin-left:4px;"
-      + "vertical-align:.12em;font-family:ui-monospace,Menlo,Consolas,monospace;cursor:pointer;user-select:none;"
+      + "vertical-align:.12em;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;cursor:pointer;user-select:none;"
       + "white-space:nowrap;transition:border-color .1s,background .1s,opacity .12s}"
       + "span[data-jh-chip]:hover{border-color:#bbb;background:#fff}"
       + "span[data-jh-chip].mine{border-color:#9db8d8;background:#eef3fb}"
@@ -441,7 +441,7 @@ export const OVERLAY_SCRIPT = String.raw`
       + "html.jh-dark span[data-jh-chip].mine .jh-ct{color:#9db8d8}"
       + ".jh-pop{position:fixed;display:none;background:#fff;border:1px solid #ccc;border-radius:6px;"
       + "box-shadow:0 4px 16px rgba(0,0,0,.18);z-index:2147483647;padding:6px 8px;font-size:11px;max-width:280px;"
-      + "font-family:ui-monospace,Menlo,Consolas,monospace;color:#222}"
+      + "font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#222}"
       + ".jh-pop .jh-row{display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:4px}"
       + ".jh-pick .jh-row{cursor:pointer}"
       + ".jh-pick .jh-row:hover{background:#f3f3f3}"
diff --git a/lib/page.ts b/lib/page.ts
index 8a5c594..046e7ea 100644
--- a/lib/page.ts
+++ b/lib/page.ts
@@ -1,12 +1,23 @@
-// Shared man-page-style HTML shell. Monospace, zero JS, zero framework CSS.
+// Shared man-page-style HTML shell. Zero JS, zero framework CSS.
 // httpbingo.org / Unix man-page vibe. This is the brand.
 //
 // Chrome system: variant A, LOCKED 2026-06-13 (birthday.md "Site-wide redesign
-// decisions"). A SINGLE uppercase `JUSTHTML.SH(1)` headline — no top bar, no
-// `GENERAL` center label, no doubled title. Left-aligned uppercase <h2> section
-// heads with hanging-indent (3.5ch) bodies, and ONE quiet justified footer line
-// (`justhtml.sh … <date> … JUSTHTML.SH(1)`). Always light, monospace. Matches
-// the shipped homepage chrome (app/route.ts, variant B) verbatim.
+// decisions"; typography updated 2026-10-28). A SINGLE uppercase
+// `JUSTHTML.SH(1)` headline — no top bar, no `GENERAL` center label, no
+// doubled title. Left-aligned uppercase <h2> section heads with hanging-indent
+// (3.5ch) bodies, and ONE quiet justified footer line
+// (`justhtml.sh … <date> … JUSTHTML.SH(1)`). Always light.
+//
+// Typography: the default reading font is the tried-and-tested system UI stack
+// (the GitHub/Bootstrap lineage) — native SF on macOS/iOS, Segoe UI on Windows,
+// Roboto on Android — nothing to download, and the most readable option on
+// both desktop and mobile. Monospace stays where it means something: prompt
+// boxes, inline code, diffs. Prose lives in <p>; <pre> is code.
+
+// The site-wide default reading face.
+export const SANS = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
+// Code only: prompts, inline code, diffs.
+export const MONO = `ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace`;
 
 const STYLE = `
   :root { color-scheme: light; }
@@ -14,42 +25,38 @@ const STYLE = `
   body {
     margin: 0 auto;
     padding: 2rem 1.5rem 3rem;
-    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
-    font-size: 14px;
-    line-height: 1.55;
+    font-family: ${SANS};
+    font-size: 16px;
+    line-height: 1.6;
     color: #111;
     background: #fff;
     max-width: 760px;
   }
   .headline { font-weight: 700; margin: 0 0 1.5rem; }
   h1, h2 {
-    font-size: 14px; font-weight: 700; margin: 1.6rem 0 0.3rem;
-    text-transform: uppercase; letter-spacing: 0.03em;
+    font-size: 14px; font-weight: 700; margin: 1.6rem 0 0.4rem;
+    text-transform: uppercase; letter-spacing: 0.05em;
   }
-  pre { white-space: pre-wrap; margin: 0; }
+  p { margin: 0 0 0.4rem; }
+  pre { white-space: pre-wrap; margin: 0; font-family: ${MONO}; font-size: 14px; }
   .body { padding-left: 3.5ch; }
   a { color: #0000ee; }
   .hint { color: #666; margin: 0 0 0.5rem; }
   .err { color: #b00020; margin: 0 0 0.5rem; }
-  code { background: rgba(127,127,127,0.12); padding: 0.05rem 0.3rem; border-radius: 3px; }
+  code { font-family: ${MONO}; font-size: 0.9em; background: rgba(127,127,127,0.12); padding: 0.05rem 0.3rem; border-radius: 3px; }
   input, button { font: inherit; }
   input[type=email] { padding: 2px 6px; border: 1px solid #999; background: #fff; color: #111; }
   button { padding: 2px 12px; border: 1px solid #999; background: #f6f6f6; color: #111; cursor: pointer; border-radius: 3px; }
   button:hover { background: #ededed; }
   footer { margin-top: 2.5rem; color: #666; }
+  footer .foot { display: flex; justify-content: space-between; gap: 1rem; }
 `;
 
-// One quiet justified footer line: `justhtml.sh … <date> … JUSTHTML.SH(1)`.
-// Spacing is in characters so it reads true in the monospace column. Mirrors the
-// homepage footer (which hardcodes the same shape at the design's wrap width).
-function footerLine(date: string): string {
-  const left = "justhtml.sh";
-  const right = "JUSTHTML.SH(1)";
-  const width = 78;
-  const gaps = Math.max(2, width - left.length - right.length - date.length);
-  const l = Math.ceil(gaps / 2);
-  const r = gaps - l;
-  return `${left}${" ".repeat(l)}${date}${" ".repeat(r)}${right}`;
+// One quiet justified footer line: `justhtml.sh … <date> … JUSTHTML.SH(1)`,
+// laid out with flexbox space-between so it stays flush at any wrap width.
+// Mirrors the homepage footer.
+function footerRow(date: string): string {
+  return `<div class="foot"><span>justhtml.sh</span><span>${date}</span><span>JUSTHTML.SH(1)</span></div>`;
 }
 
 export function manPage(opts: {
@@ -67,9 +74,9 @@ export function manPage(opts: {
 <style>${STYLE}</style>
 </head>
 <body>
-<pre class="headline">JUSTHTML.SH(1)</pre>
+<div class="headline">JUSTHTML.SH(1)</div>
 ${opts.bodyHtml}
-<footer><pre>${footerLine(date)}</pre></footer>
+<footer>${footerRow(date)}</footer>
 </body>
 </html>`;
 }

From b633fb9cd6d6686d5b985d4766881026ba6990fb Mon Sep 17 00:00:00 2001
From: ulziibay-kernel <253135130+ulziibay-kernel@users.noreply.github.com>
Date: Wed, 28 Oct 2026 19:33:16 +0000
Subject: [PATCH 2/2] Fall back to the system sans stack for docs that set no
 font
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A doc's HTML renders byte-pristine in the sandboxed iframe, so a doc
with no font-family of its own fell back to the browser default serif —
noticeably different from the site's sans chrome. In the shell-embedded
render (the /d/:slug viewer), inject the system sans stack as a
last-resort default when the doc has no authored font rule (inline
<style> blocks and style attributes; prose or code samples that merely
mention font-family don't count). The injected rules use :where() so any
author CSS wins, and direct /raw fetches stay byte-pristine like the
comment overlay.
---
 app/d/[slug]/raw/route.test.ts | 57 ++++++++++++++++++++++++++++++++++
 app/d/[slug]/raw/route.ts      | 13 +++++---
 lib/docs/font-fallback.test.ts | 48 ++++++++++++++++++++++++++++
 lib/docs/font-fallback.ts      | 27 ++++++++++++++++
 4 files changed, 141 insertions(+), 4 deletions(-)
 create mode 100644 app/d/[slug]/raw/route.test.ts
 create mode 100644 lib/docs/font-fallback.test.ts
 create mode 100644 lib/docs/font-fallback.ts

diff --git a/app/d/[slug]/raw/route.test.ts b/app/d/[slug]/raw/route.test.ts
new file mode 100644
index 0000000..e177b0a
--- /dev/null
+++ b/app/d/[slug]/raw/route.test.ts
@@ -0,0 +1,57 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  findBySlug: vi.fn(),
+  canViewSession: vi.fn(),
+  verifyViewCap: vi.fn(),
+  getSession: vi.fn(),
+}));
+
+vi.mock("@/lib/docs/store", () => ({ findBySlug: mocks.findBySlug }));
+vi.mock("@/lib/docs/access", () => ({ canViewSession: mocks.canViewSession }));
+vi.mock("@/lib/docs/viewcap", () => ({ verifyViewCap: mocks.verifyViewCap }));
+vi.mock("@/lib/auth/session", () => ({ getSession: mocks.getSession }));
+
+import { GET } from "@/app/d/[slug]/raw/route";
+
+const FONTLESS_DOC = `<!doctype html><html><head><title>x</title></head><body><p>plain</p></body></html>`;
+const STYLED_DOC = `<!doctype html><html><head><style>body{font-family:Georgia}</style></head><body><p>fancy</p></body></html>`;
+
+function doc(html: string) {
+  return { id: 1, slug: "a-doc", html, is_public: true, title: null, version: 1 };
+}
+
+async function get(url: string) {
+  const res = await GET(new Request(url), { params: Promise.resolve({ slug: "a-doc" }) });
+  return { status: res.status, html: await res.text() };
+}
+
+describe("GET /d/:slug/raw", () => {
+  beforeEach(() => {
+    mocks.findBySlug.mockReset();
+    mocks.canViewSession.mockReset().mockResolvedValue(true);
+    mocks.getSession.mockReset().mockResolvedValue(null);
+  });
+
+  it("serves byte-pristine HTML on a direct fetch — no overlay, no injected font", async () => {
+    mocks.findBySlug.mockResolvedValue(doc(FONTLESS_DOC));
+    const { status, html } = await get("https://justhtml.sh/d/a-doc/raw");
+    expect(status).toBe(200);
+    expect(html).toBe(FONTLESS_DOC);
+  });
+
+  it("injects the default sans font for a fontless doc in the shell variant", async () => {
+    mocks.findBySlug.mockResolvedValue(doc(FONTLESS_DOC));
+    const { html } = await get("https://justhtml.sh/d/a-doc/raw?overlay=1");
+    expect(html).toContain('data-jh-default-font="1"');
+    expect(html).toContain("-apple-system");
+    expect(html.indexOf('data-jh-default-font')).toBeLessThan(html.toLowerCase().lastIndexOf("</body>"));
+  });
+
+  it("leaves a doc that declares its own font untouched in the shell variant", async () => {
+    mocks.findBySlug.mockResolvedValue(doc(STYLED_DOC));
+    const { html } = await get("https://justhtml.sh/d/a-doc/raw?overlay=1");
+    expect(html).not.toContain("data-jh-default-font");
+    expect(html).toContain("font-family:Georgia");
+  });
+});
diff --git a/app/d/[slug]/raw/route.ts b/app/d/[slug]/raw/route.ts
index 4f732da..370e4e1 100644
--- a/app/d/[slug]/raw/route.ts
+++ b/app/d/[slug]/raw/route.ts
@@ -3,6 +3,7 @@ import { canViewSession } from "@/lib/docs/access";
 import { verifyViewCap } from "@/lib/docs/viewcap";
 import { getSession } from "@/lib/auth/session";
 import { OVERLAY_SCRIPT } from "@/lib/docs/overlay";
+import { fontFallbackStyle } from "@/lib/docs/font-fallback";
 
 export const dynamic = "force-dynamic";
 
@@ -65,12 +66,16 @@ export async function GET(req: Request, ctx: Ctx): Promise<Response> {
     if (!(await canViewSession(doc, session, viewtoken))) return deny(404, "Not found.");
   }
 
-  // Inject the comment overlay only for the shell-embedded variant. We append the
-  // script before </body> (or at the end if there's no body tag), leaving the
-  // user's HTML otherwise untouched. The CSP sandbox already permits scripts.
+  // Inject the comment overlay — and, for docs that set no font of their own,
+  // the site's default sans face (lib/docs/font-fallback.ts) — only for the
+  // shell-embedded variant. We append before </body> (or at the end if there's
+  // no body tag), leaving the user's HTML otherwise untouched. The CSP sandbox
+  // already permits scripts. The font decision must be made on the pristine
+  // bytes: the overlay script itself mentions font-family.
   let html = doc.html;
   if (wantOverlay) {
-    const tag = `<script data-jh-overlay="1">${OVERLAY_SCRIPT}</script>`;
+    const fontTag = fontFallbackStyle(html);
+    const tag = `${fontTag}<script data-jh-overlay="1">${OVERLAY_SCRIPT}</script>`;
     const idx = html.toLowerCase().lastIndexOf("</body>");
     html = idx === -1 ? html + tag : html.slice(0, idx) + tag + html.slice(idx);
   }
diff --git a/lib/docs/font-fallback.test.ts b/lib/docs/font-fallback.test.ts
new file mode 100644
index 0000000..595eadc
--- /dev/null
+++ b/lib/docs/font-fallback.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { fontFallbackStyle } from "./font-fallback";
+
+describe("fontFallbackStyle", () => {
+  it("returns the sans fallback for a doc with no styling", () => {
+    const tag = fontFallbackStyle("<h1>hi</h1><p>plain doc</p>");
+    expect(tag).toContain("data-jh-default-font");
+    expect(tag).toContain("-apple-system");
+    expect(tag).toContain("ui-monospace");
+  });
+
+  it("returns nothing when the doc declares a font-family", () => {
+    expect(
+      fontFallbackStyle(`<style>body{font-family:'Inter',sans-serif}</style><p>x</p>`)
+    ).toBe("");
+  });
+
+  it("returns nothing when the doc declares a font shorthand", () => {
+    expect(fontFallbackStyle(`<style>p{font:16px serif}</style>`)).toBe("");
+  });
+
+  it("returns nothing when the doc loads a webfont", () => {
+    expect(fontFallbackStyle(`<style>@font-face{font-family:X;src:url(x.woff2)}</style>`)).toBe("");
+  });
+
+  it("ignores unrelated CSS — a doc styled in every other way still gets the fallback", () => {
+    expect(fontFallbackStyle(`<style>body{color:#111;background:#fff}</style>`)).not.toBe("");
+  });
+
+  it("is case-insensitive about author font rules", () => {
+    expect(fontFallbackStyle(`<STYLE>BODY{FONT-FAMILY:Arial}</STYLE>`)).toBe("");
+  });
+
+  it("detects a font set in an inline style attribute", () => {
+    expect(fontFallbackStyle(`<body style="font-family:Verdana">x</body>`)).toBe("");
+    expect(fontFallbackStyle(`<p style='font: 14px serif'>x</p>`)).toBe("");
+  });
+
+  it("ignores font-family mentioned in prose or code samples", () => {
+    expect(
+      fontFallbackStyle(`<p>This doc sets no font-family at all.</p><pre>body { font-family: serif }</pre>`)
+    ).not.toBe("");
+  });
+
+  it("ignores non-font rules in a style block", () => {
+    expect(fontFallbackStyle(`<style>h1{color:red}</style><p>x</p>`)).not.toBe("");
+  });
+});
diff --git a/lib/docs/font-fallback.ts b/lib/docs/font-fallback.ts
new file mode 100644
index 0000000..aa9e8b7
--- /dev/null
+++ b/lib/docs/font-fallback.ts
@@ -0,0 +1,27 @@
+import { SANS, MONO } from "@/lib/page";
+
+// The viewer renders each doc's own HTML in a sandboxed iframe, so a doc's
+// typeface is whatever its author chose. A doc that sets no font at all falls
+// back to the browser default — a serif — which reads badly next to the site's
+// sans chrome. When the shell-embedded render (the /d/:slug viewer) serves a
+// doc with no font declaration of its own, we inject the site-wide system sans
+// stack as the default instead. Docs that set any font rule are untouched, and
+// because the injected rules use :where() (zero specificity) any author CSS
+// would win anyway. Direct /raw fetches stay byte-pristine — like the comment
+// overlay, this only rides the shell variant.
+
+// An author font rule counts only in real CSS contexts: inside a <style> block
+// or a style="" attribute. Prose or code samples that merely mention
+// "font-family" must not count — a doc about CSS is not a styled doc.
+function hasAuthoredFont(html: string): boolean {
+  const blocks = html.match(/<style[^>]*>[\s\S]*?<\/style>/gi) ?? [];
+  const rule = /font-family|font\s*:|@font-face/i;
+  if (blocks.some((block) => rule.test(block))) return true;
+  return /style\s*=\s*["'][^"']*font(-family)?\s*:/i.test(html);
+}
+
+/** The <style> injected into fontless docs by the shell render ("" if none). */
+export function fontFallbackStyle(html: string): string {
+  if (hasAuthoredFont(html)) return "";
+  return `<style data-jh-default-font="1">:where(html){font-family:${SANS}}:where(code,kbd,samp,pre){font-family:${MONO}}</style>`;
+}