diff --git a/jottit/__init__.py b/jottit/__init__.py
index 6cb1e43..e8e0036 100644
--- a/jottit/__init__.py
+++ b/jottit/__init__.py
@@ -10,6 +10,7 @@
 from jottit.blueprints.root import root_bp
 from jottit.blueprints.secret import secret_bp
 from jottit.blueprints.site import site_bp
+from jottit.chrome import chrome_context
 from jottit.db import close_request_conn, make_engine
 from jottit.site_resolver import resolve_site
 
@@ -32,5 +33,6 @@ def create_app() -> Flask:
 
     app.before_request(resolve_site)
     app.teardown_request(close_request_conn)
+    app.context_processor(chrome_context)
 
     return app
diff --git a/jottit/chrome.py b/jottit/chrome.py
new file mode 100644
index 0000000..dea5464
--- /dev/null
+++ b/jottit/chrome.py
@@ -0,0 +1,48 @@
+"""Shared template context: site, page list, signin state, and design row.
+
+Wired into the Flask app as a `context_processor` so every render_template
+call sees these variables without each view having to pass them.
+"""
+
+from __future__ import annotations
+
+from typing import Any
+
+from flask import g, request
+
+from jottit import auth
+from jottit.db import get_design, get_request_conn, list_pages
+from jottit.urls import page_slug, site_root
+
+
+def chrome_context() -> dict[str, Any]:
+    """Variables every page template can rely on.
+
+    `site` and `pages` are `None` on apex-domain routes (the front page);
+    templates should branch on `site` before reading from it.
+    """
+    site = getattr(g, "site", None)
+    if site is None:
+        return {
+            "site": None,
+            "pages": [],
+            "design": None,
+            "is_signed_in": False,
+            "is_unclaimed": False,
+            "site_root_path": "/",
+            "page_slug": page_slug,
+        }
+
+    conn = get_request_conn()
+    pages = list_pages(conn, site_id=site.id) if conn is not None else []
+    design = get_design(conn, site_id=site.id) if conn is not None else None
+    return {
+        "site": site,
+        "pages": pages,
+        "design": design,
+        "is_signed_in": auth.is_signed_in_to(site.id),
+        "is_unclaimed": site.password is None,
+        "site_root_path": site_root(),
+        "page_slug": page_slug,
+        "current_path": request.path,
+    }
diff --git a/jottit/db.py b/jottit/db.py
index eccfe0e..cfa9cf2 100644
--- a/jottit/db.py
+++ b/jottit/db.py
@@ -635,6 +635,19 @@ def update_design(conn: Connection, *, site_id: int, **fields: object) -> None:
 # ---- Export ----
 
 
+def list_pages(conn: Connection, *, site_id: int) -> list[Row]:
+    """List a site's non-deleted pages, alphabetically by name.
+
+    Used by the chrome sidebar to render a navigation list. Home (the
+    empty-name page) sorts first.
+    """
+    rows = conn.execute(
+        select(pages.c.name).where(pages.c.site_id == site_id, pages.c.deleted.is_(False))
+    ).all()
+    # Empty-name (home) goes to the top; remaining pages sort case-insensitively.
+    return sorted(rows, key=lambda r: (r.name != "", r.name.lower()))
+
+
 def get_pages_for_export(conn: Connection, *, site_id: int) -> list[Row]:
     """Latest non-deleted pages with their latest revision content, for export.
 
@@ -704,13 +717,17 @@ def new_site(
         .returning(sites.c.id)
     ).scalar_one()
 
+    # `system-ui` resolves to whatever the visitor's OS uses for UI text
+    # (San Francisco on macOS, Segoe UI on Windows, etc); `sans-serif` is
+    # the fallback. Replaces the 2007 default of "Lucida_Grande".
+    default_font = "system-ui, sans-serif"
     conn.execute(
         insert(designs).values(
             site_id=site_id,
-            title_font="Lucida_Grande",
-            subtitle_font="Lucida_Grande",
-            headings_font="Lucida_Grande",
-            content_font="Lucida_Grande",
+            title_font=default_font,
+            subtitle_font=default_font,
+            headings_font=default_font,
+            content_font=default_font,
             header_color=scheme.header_color,
             title_color=scheme.title_color,
             subtitle_color=scheme.subtitle_color,
diff --git a/jottit/static/base.css b/jottit/static/base.css
new file mode 100644
index 0000000..eff48d2
--- /dev/null
+++ b/jottit/static/base.css
@@ -0,0 +1,104 @@
+html {
+  font-family: var(--content-font);
+  font-size: var(--content-size);
+  line-height: 1.5;
+  color: var(--fg);
+  background: var(--bg);
+}
+
+body {
+  min-height: 100vh;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--headings-font);
+  line-height: 1.2;
+  margin-top: var(--space-5);
+  margin-bottom: var(--space-3);
+}
+
+h1 { font-size: var(--headings-size); }
+h2 { font-size: calc(var(--headings-size) * 0.85); }
+h3 { font-size: calc(var(--headings-size) * 0.72); }
+
+p, ul, ol, dl, blockquote, pre, table, figure {
+  margin-top: 0;
+  margin-bottom: var(--space-4);
+}
+
+ol, ul {
+  padding-left: var(--space-5);
+  list-style: revert;
+}
+
+a {
+  color: var(--link);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+a:visited { color: var(--link-visited); }
+a:hover, a:focus { text-decoration-thickness: 2px; }
+
+button {
+  cursor: pointer;
+  padding: var(--space-2) var(--space-4);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+
+button:hover { background: var(--surface-alt); }
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="number"],
+textarea {
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+
+textarea { font-family: var(--content-font); resize: vertical; min-height: 12rem; }
+
+label { display: block; }
+
+fieldset {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--space-3) var(--space-4);
+  margin-bottom: var(--space-4);
+}
+
+legend { padding: 0 var(--space-2); font-weight: 600; }
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--border);
+  margin: var(--space-5) 0;
+}
+
+code, pre, kbd, samp {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.95em;
+}
+
+pre {
+  padding: var(--space-3);
+  background: var(--surface-alt);
+  border-radius: var(--radius);
+  overflow-x: auto;
+}
+
+blockquote {
+  border-left: 3px solid var(--border);
+  padding-left: var(--space-4);
+  color: var(--muted);
+}
+
+small { color: var(--muted); }
+
+time { color: var(--muted); }
diff --git a/jottit/static/components.css b/jottit/static/components.css
new file mode 100644
index 0000000..13f6d4f
--- /dev/null
+++ b/jottit/static/components.css
@@ -0,0 +1,238 @@
+.page {
+  max-width: 60rem;
+  margin: 0 auto;
+  padding: var(--space-4);
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-5);
+}
+
+@media (min-width: 50rem) {
+  .page {
+    grid-template-columns: minmax(0, 1fr) 16rem;
+    grid-template-areas:
+      "header header"
+      "main   sidebar"
+      "footer footer";
+  }
+  .site-header { grid-area: header; }
+  main          { grid-area: main; }
+  .site-sidebar { grid-area: sidebar; }
+  .site-footer  { grid-area: footer; }
+}
+
+.site-header {
+  background: var(--header-color);
+  color: var(--title-color);
+  padding: var(--space-5) var(--space-5) var(--space-3);
+  border-radius: var(--radius);
+}
+
+.site-header a { color: var(--title-color); }
+
+.site-header hgroup h1 {
+  font-family: var(--title-font);
+  font-size: var(--title-size);
+  margin: 0;
+}
+
+.site-header .subtitle {
+  font-family: var(--subtitle-font);
+  font-size: var(--subtitle-size);
+  color: var(--subtitle-color);
+  margin: var(--space-1) 0 0;
+}
+
+.claim-banner {
+  background: rgba(255,255,255,0.15);
+  padding: var(--space-2) var(--space-3);
+  margin: 0 0 var(--space-3);
+  border-radius: var(--radius);
+}
+
+.site-nav {
+  margin-top: var(--space-3);
+}
+
+.site-nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  padding: 0;
+  list-style: none;
+  margin: 0;
+}
+
+.site-nav a,
+.site-nav button.link {
+  color: var(--subtitle-color);
+  text-decoration: none;
+  font-size: 0.9em;
+}
+
+.site-nav a:hover,
+.site-nav button.link:hover { text-decoration: underline; }
+
+.site-sidebar {
+  border-left: 1px solid var(--border);
+  padding-left: var(--space-4);
+}
+
+@media (max-width: 50rem) {
+  .site-sidebar {
+    border-left: 0;
+    border-top: 1px solid var(--border);
+    padding-left: 0;
+    padding-top: var(--space-4);
+  }
+}
+
+.page-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.page-list strong { color: var(--fg); }
+
+.new-page {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.new-page input[type="text"] { flex: 1; }
+
+.site-footer {
+  text-align: center;
+  color: var(--muted);
+  font-size: 0.9em;
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--border);
+}
+
+main > article {
+  max-width: var(--measure);
+}
+
+.front .lede {
+  font-size: 1.2em;
+  color: var(--muted);
+  margin-bottom: var(--space-5);
+}
+
+.new-site,
+.site-form,
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  max-width: var(--measure);
+}
+
+.form-error {
+  background: var(--danger-bg);
+  color: var(--danger);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius);
+  border: 1px solid var(--danger);
+}
+
+button.destructive {
+  background: var(--danger);
+  color: #fff;
+  border-color: var(--danger);
+}
+
+button.destructive:hover { filter: brightness(0.9); }
+
+button.link {
+  background: none;
+  border: 0;
+  padding: 0;
+  color: var(--link);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.form.inline,
+form.inline { display: inline; }
+
+.revision-banner {
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--space-3);
+  margin-bottom: var(--space-4);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  align-items: center;
+}
+
+.page-meta {
+  color: var(--muted);
+  font-size: 0.9em;
+  margin-bottom: var(--space-3);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
+.admin .admin-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+
+.revisions {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.revisions li {
+  padding: var(--space-2) 0;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  align-items: baseline;
+}
+
+.revisions .changes {
+  color: var(--muted);
+  font-size: 0.9em;
+}
+
+.pagination {
+  margin-top: var(--space-4);
+}
+
+.diff-body ins {
+  background: #e6ffed;
+  text-decoration: none;
+}
+
+.diff-body del {
+  background: #ffebe9;
+  text-decoration: line-through;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
+}
+
+.hint {
+  color: var(--muted);
+  font-size: 0.9em;
+}
diff --git a/jottit/static/reset.css b/jottit/static/reset.css
new file mode 100644
index 0000000..98538e2
--- /dev/null
+++ b/jottit/static/reset.css
@@ -0,0 +1,17 @@
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+ol, ul { list-style: none; }
+
+img, picture, svg, video { max-width: 100%; display: block; }
+
+button, input, select, textarea {
+  font: inherit;
+  color: inherit;
+}
+
+a { color: inherit; }
diff --git a/jottit/static/tokens.css b/jottit/static/tokens.css
new file mode 100644
index 0000000..105fb69
--- /dev/null
+++ b/jottit/static/tokens.css
@@ -0,0 +1,40 @@
+:root {
+  --hue: 210;
+  --brightness: 100;
+
+  --header-color: hsl(var(--hue) 60% calc(var(--brightness) * 0.22%));
+  --title-color: #fff;
+  --subtitle-color: #bfe8ff;
+
+  --bg: hsl(var(--hue) 30% calc(var(--brightness) * 0.99%));
+  --fg: #222;
+  --muted: #666;
+  --link: #06c;
+  --link-visited: #639;
+  --border: #ddd;
+  --surface: #fff;
+  --surface-alt: #f7f7f7;
+  --danger: #b00020;
+  --danger-bg: #fdecea;
+
+  --title-font: system-ui, sans-serif;
+  --subtitle-font: system-ui, sans-serif;
+  --headings-font: system-ui, sans-serif;
+  --content-font: system-ui, sans-serif;
+
+  --title-size: 200%;
+  --subtitle-size: 100%;
+  --headings-size: 150%;
+  --content-size: 100%;
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-8: 3rem;
+
+  --radius: 4px;
+  --measure: 38rem;
+}
diff --git a/jottit/static/utilities.css b/jottit/static/utilities.css
new file mode 100644
index 0000000..19a3c90
--- /dev/null
+++ b/jottit/static/utilities.css
@@ -0,0 +1,19 @@
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.deleted { color: var(--muted); }
+
+.empty { color: var(--muted); }
+
+.cancel { color: var(--muted); }
+
+.count { color: var(--muted); }
diff --git a/jottit/templates/admin_change_password.html b/jottit/templates/admin_change_password.html
index ca6c8e6..4895e5a 100644
--- a/jottit/templates/admin_change_password.html
+++ b/jottit/templates/admin_change_password.html
@@ -1,25 +1,25 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Change password</title>
-</head>
-<body>
-  <h1>Change password</h1>
-  {% if error %}<p class="error">{{ error }}</p>{% endif %}
-  <form method="post">
-    <p>
-      <label>Current password<br>
-        <input type="password" name="current_password" required autofocus>
-      </label>
-    </p>
-    <p>
-      <label>New password<br>
-        <input type="password" name="new_password" required>
-      </label>
-    </p>
-    <p><button type="submit">Change password</button></p>
-  </form>
-  <p><a href="settings">Back to settings</a></p>
-</body>
-</html>
+{% extends "base.html" %}
+{% block title %}Change password{% endblock %}
+{% block content %}
+  <article class="admin">
+    <header><h1>Change password</h1></header>
+
+    {% include "partials/form_error.html" %}
+
+    <form method="post" class="form">
+      <p>
+        <label>Current password
+          <input type="password" name="current_password" required autofocus>
+        </label>
+      </p>
+      <p>
+        <label>New password
+          <input type="password" name="new_password" required>
+        </label>
+      </p>
+      <p><button type="submit">Change password</button></p>
+    </form>
+
+    <p><a href="settings">Back to settings</a></p>
+  </article>
+{% endblock %}
diff --git a/jottit/templates/admin_change_site_address.html b/jottit/templates/admin_change_site_address.html
index 3dc546e..0f12da7 100644
--- a/jottit/templates/admin_change_site_address.html
+++ b/jottit/templates/admin_change_site_address.html
@@ -1,21 +1,22 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Change site address</title>
-</head>
-<body>
-  <h1>Change site address</h1>
-  {% if error %}<p class="error">{{ error }}</p>{% endif %}
-  <form method="post">
-    <p>
-      <label>Site address<br>
-        <input type="text" name="public_url" value="{{ public_url }}" autofocus>
-      </label>
-      <small>Letters, numbers, and dashes. Leave blank to remove the subdomain.</small>
-    </p>
-    <p><button type="submit">Save</button></p>
-  </form>
-  <p><a href="settings">Back to settings</a></p>
-</body>
-</html>
+{% extends "base.html" %}
+{% block title %}Change site address{% endblock %}
+{% block content %}
+  <article class="admin">
+    <header><h1>Change site address</h1></header>
+
+    {% include "partials/form_error.html" %}
+
+    <form method="post" class="form">
+      <p>
+        <label>Site address
+          <input type="text" name="public_url" value="{{ public_url }}"
+                 autofocus pattern="[a-z0-9-]*" autocomplete="off">
+          <small>Letters, numbers, and dashes. Leave blank to remove the subdomain.</small>
+        </label>
+      </p>
+      <p><button type="submit">Save</button></p>
+    </form>
+
+    <p><a href="settings">Back to settings</a></p>
+  </article>
+{% endblock %}
diff --git a/jottit/templates/admin_delete.html b/jottit/templates/admin_delete.html
index 1bf449f..f550055 100644
--- a/jottit/templates/admin_delete.html
+++ b/jottit/templates/admin_delete.html
@@ -1,15 +1,14 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Delete site</title>
-</head>
-<body>
-  <h1>Delete site</h1>
-  <p>This will remove the site from public listings and free its subdomain. Pages and revisions stay on file in case we ever add a restore path.</p>
-  <form method="post">
-    <p><button type="submit">Delete this site</button></p>
-  </form>
-  <p><a href="settings">Cancel</a></p>
-</body>
-</html>
+{% extends "base.html" %}
+{% block title %}Delete site{% endblock %}
+{% block content %}
+  <article class="admin">
+    <header><h1>Delete site</h1></header>
+    <p>This will remove the site from public listings and free its subdomain. Pages and revisions stay on file in case we ever add a restore path.</p>
+
+    <form method="post" class="form">
+      <p><button type="submit" class="destructive">Delete this site</button></p>
+    </form>
+
+    <p><a href="settings">Cancel</a></p>
+  </article>
+{% endblock %}
diff --git a/jottit/templates/admin_design.html b/jottit/templates/admin_design.html
index 8e3c353..ae6312b 100644
--- a/jottit/templates/admin_design.html
+++ b/jottit/templates/admin_design.html
@@ -1,44 +1,44 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Design</title>
-</head>
-<body>
-  <h1>Design</h1>
-  {% if error %}<p class="error">{{ error }}</p>{% endif %}
-  <form method="post">
-    <fieldset>
-      <legend>Fonts</legend>
-      <p><label>Title font <input type="text" name="title_font" value="{{ design.title_font }}"></label></p>
-      <p><label>Subtitle font <input type="text" name="subtitle_font" value="{{ design.subtitle_font }}"></label></p>
-      <p><label>Headings font <input type="text" name="headings_font" value="{{ design.headings_font }}"></label></p>
-      <p><label>Content font <input type="text" name="content_font" value="{{ design.content_font }}"></label></p>
-    </fieldset>
+{% extends "base.html" %}
+{% block title %}Design{% endblock %}
+{% block content %}
+  <article class="admin">
+    <header><h1>Design</h1></header>
 
-    <fieldset>
-      <legend>Colors</legend>
-      <p><label>Header color <input type="text" name="header_color" value="{{ design.header_color }}" placeholder="#003452"></label></p>
-      <p><label>Title color <input type="text" name="title_color" value="{{ design.title_color }}" placeholder="#fff"></label></p>
-      <p><label>Subtitle color <input type="text" name="subtitle_color" value="{{ design.subtitle_color }}" placeholder="#bfe8ff"></label></p>
-    </fieldset>
+    {% include "partials/form_error.html" %}
 
-    <fieldset>
-      <legend>Sizes (percent)</legend>
-      <p><label>Title size <input type="number" name="title_size" value="{{ design.title_size }}" min="25" max="500"></label></p>
-      <p><label>Subtitle size <input type="number" name="subtitle_size" value="{{ design.subtitle_size }}" min="25" max="500"></label></p>
-      <p><label>Headings size <input type="number" name="headings_size" value="{{ design.headings_size }}" min="25" max="500"></label></p>
-      <p><label>Content size <input type="number" name="content_size" value="{{ design.content_size }}" min="25" max="500"></label></p>
-    </fieldset>
+    <form method="post" class="form design-form">
+      <fieldset>
+        <legend>Fonts</legend>
+        <p><label>Title <input type="text" name="title_font" value="{{ design.title_font }}"></label></p>
+        <p><label>Subtitle <input type="text" name="subtitle_font" value="{{ design.subtitle_font }}"></label></p>
+        <p><label>Headings <input type="text" name="headings_font" value="{{ design.headings_font }}"></label></p>
+        <p><label>Content <input type="text" name="content_font" value="{{ design.content_font }}"></label></p>
+      </fieldset>
 
-    <fieldset>
-      <legend>Background</legend>
-      <p><label>Hue (0–360) <input type="number" name="hue" value="{{ design.hue }}" min="0" max="360"></label></p>
-      <p><label>Brightness (0–300) <input type="number" name="brightness" value="{{ design.brightness }}" min="0" max="300"></label></p>
-    </fieldset>
+      <fieldset>
+        <legend>Colors</legend>
+        <p><label>Header <input type="text" name="header_color" value="{{ design.header_color }}" placeholder="#003452"></label></p>
+        <p><label>Title <input type="text" name="title_color" value="{{ design.title_color }}" placeholder="#fff"></label></p>
+        <p><label>Subtitle <input type="text" name="subtitle_color" value="{{ design.subtitle_color }}" placeholder="#bfe8ff"></label></p>
+      </fieldset>
 
-    <p><button type="submit">Save design</button></p>
-  </form>
-  <p><a href="settings">Back to settings</a></p>
-</body>
-</html>
+      <fieldset>
+        <legend>Sizes (percent)</legend>
+        <p><label>Title <input type="number" name="title_size" value="{{ design.title_size }}" min="25" max="500"></label></p>
+        <p><label>Subtitle <input type="number" name="subtitle_size" value="{{ design.subtitle_size }}" min="25" max="500"></label></p>
+        <p><label>Headings <input type="number" name="headings_size" value="{{ design.headings_size }}" min="25" max="500"></label></p>
+        <p><label>Content <input type="number" name="content_size" value="{{ design.content_size }}" min="25" max="500"></label></p>
+      </fieldset>
+
+      <fieldset>
+        <legend>Background</legend>
+        <p><label>Hue (0–360) <input type="number" name="hue" value="{{ design.hue }}" min="0" max="360"></label></p>
+        <p><label>Brightness (0–300) <input type="number" name="brightness" value="{{ design.brightness }}" min="0" max="300"></label></p>
+      </fieldset>
+
+      <p><button type="submit">Save design</button></p>
+    </form>
+
+    <p><a href="settings">Back to settings</a></p>
+  </article>
+{% endblock %}
diff --git a/jottit/templates/admin_settings.html b/jottit/templates/admin_settings.html
index 5049629..c9ce99d 100644
--- a/jottit/templates/admin_settings.html
+++ b/jottit/templates/admin_settings.html
@@ -1,37 +1,46 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Settings</title>
-</head>
-<body>
-  <h1>Settings</h1>
-  {% if error %}<p class="error">{{ error }}</p>{% endif %}
-  <form method="post">
-    <p>
-      <label>Title<br>
-        <input type="text" name="title" value="{{ title }}">
-      </label>
-    </p>
-    <p>
-      <label>Subtitle<br>
-        <input type="text" name="subtitle" value="{{ subtitle }}">
-      </label>
-    </p>
-    <p>
-      <label>Email<br>
-        <input type="email" name="email" value="{{ email }}">
-      </label>
-    </p>
-    <fieldset>
-      <legend>Security</legend>
-      <p><label><input type="radio" name="security" value="private" {% if security == "private" %}checked{% endif %}> Private — only you can view or edit</label></p>
-      <p><label><input type="radio" name="security" value="public" {% if security == "public" %}checked{% endif %}> Public — anyone can view, only you can edit</label></p>
-      <p><label><input type="radio" name="security" value="open" {% if security == "open" %}checked{% endif %}> Open — anyone can view or edit</label></p>
-    </fieldset>
-    <p><button type="submit">Save settings</button></p>
-  </form>
-  <p><a href="change-site-address">Site address: {{ public_url or "(none)" }}</a></p>
-  <p><a href="change-password">Change password</a></p>
-</body>
-</html>
+{% extends "base.html" %}
+{% block title %}Settings{% endblock %}
+{% block content %}
+  <article class="admin">
+    <header><h1>Settings</h1></header>
+
+    {% include "partials/form_error.html" %}
+
+    <form method="post" class="form">
+      <p>
+        <label>Title
+          <input type="text" name="title" value="{{ title }}">
+        </label>
+      </p>
+      <p>
+        <label>Subtitle
+          <input type="text" name="subtitle" value="{{ subtitle }}">
+        </label>
+      </p>
+      <p>
+        <label>Email
+          <input type="email" name="email" value="{{ email }}">
+        </label>
+      </p>
+
+      <fieldset>
+        <legend>Security</legend>
+        <p><label><input type="radio" name="security" value="private" {% if security == "private" %}checked{% endif %}> Private — only you can view or edit</label></p>
+        <p><label><input type="radio" name="security" value="public" {% if security == "public" %}checked{% endif %}> Public — anyone can view, only you can edit</label></p>
+        <p><label><input type="radio" name="security" value="open" {% if security == "open" %}checked{% endif %}> Open — anyone can view or edit</label></p>
+      </fieldset>
+
+      <p><button type="submit">Save settings</button></p>
+    </form>
+
+    <nav class="admin-links" aria-label="Other settings">
+      <ul>
+        <li><a href="change-site-address">Site address: <code>{{ public_url or "(none)" }}</code></a></li>
+        <li><a href="change-password">Change password</a></li>
+        <li><a href="design">Design</a></li>
+        <li><a href="export">Export pages</a></li>
+        <li><a href="delete" class="destructive">Delete this site</a></li>
+      </ul>
+    </nav>
+  </article>
+{% endblock %}
diff --git a/jottit/templates/base.html b/jottit/templates/base.html
new file mode 100644
index 0000000..b95f82c
--- /dev/null
+++ b/jottit/templates/base.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{% block title %}{% if site and site.title %}{{ site.title }}{% else %}Jottit{% endif %}{% endblock %}</title>
+  {% if site and (site.security == "private" or not site.public_url) %}
+    <meta name="robots" content="noindex, nofollow">
+  {% endif %}
+  <link rel="icon" href="/favicon.ico">
+  <link rel="stylesheet" href="{{ url_for('static', filename='tokens.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='base.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='components.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='utilities.css') }}">
+  {% block head %}{% endblock %}
+  {% if design %}
+    {% include "partials/design_style.html" %}
+  {% endif %}
+</head>
+<body>
+  <div class="page">
+    {% if site %}
+      {% include "partials/site_header.html" %}
+    {% endif %}
+
+    <main>
+      {% block content %}{% endblock %}
+    </main>
+
+    {% if site %}
+      {% include "partials/site_sidebar.html" %}
+    {% endif %}
+
+    <footer class="site-footer">
+      <p>Powered by <a href="https://jottit.org/">Jottit</a>.</p>
+    </footer>
+  </div>
+</body>
+</html>
diff --git a/jottit/templates/change_password.html b/jottit/templates/change_password.html
index a16ca6b..d4019fa 100644
--- a/jottit/templates/change_password.html
+++ b/jottit/templates/change_password.html
@@ -1,20 +1,19 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Set a new password</title>
-</head>
-<body>
-  <h1>Set a new password</h1>
-  {% if error %}<p class="error">{{ error }}</p>{% endif %}
-  <form method="post">
-    <input type="hidden" name="d" value="{{ token }}">
-    <p>
-      <label>New password<br>
-        <input type="password" name="new_password" required autofocus>
-      </label>
-    </p>
-    <p><button type="submit">Set password</button></p>
-  </form>
-</body>
-</html>
+{% extends "base.html" %}
+{% block title %}Set a new password{% endblock %}
+{% block content %}
+  <article class="site-form">
+    <header><h1>Set a new password</h1></header>
+
+    {% include "partials/form_error.html" %}
+
+    <form method="post" class="form">
+      <input type="hidden" name="d" value="{{ token }}">
+      <p>
+        <label>New password
+          <input type="password" name="new_password" required autofocus>
+        </label>
+      </p>
+      <p><button type="submit">Set password</button></p>
+    </form>
+  </article>
+{% endblock %}
diff --git a/jottit/templates/changes.html b/jottit/templates/changes.html
index b01f799..123e8a9 100644
--- a/jottit/templates/changes.html
+++ b/jottit/templates/changes.html
@@ -1,30 +1,36 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Recent changes</title>
-</head>
-<body>
-  <h1>Recent changes</h1>
-  {% if changes %}
-    <ul>
-      {% for c in changes %}
-        <li>
-          <a href="{{ site_root_path }}{{ page_slug(c.page_name) }}?r={{ c.revision }}">
-            {{ c.page_name or "Home" }} &mdash; revision {{ c.revision }}
-          </a>
-          <small>{{ c.created.strftime("%Y-%m-%d %H:%M") }} UTC</small>
-          {% if c.page_deleted %}<em>(page since deleted)</em>{% endif %}
-          {% if c.changes %}<span class="changes">{{ c.changes|safe }}</span>{% endif %}
-        </li>
-      {% endfor %}
-    </ul>
-    {% if older_before %}
-      <p><a href="?before={{ older_before }}">Older &rarr;</a></p>
+{% extends "base.html" %}
+{% block title %}Recent changes{% endblock %}
+
+{% block head %}
+  <link rel="alternate" type="application/rss+xml"
+        title="Recent changes" href="?m=rss">
+  <link rel="alternate" type="application/feed+json"
+        title="Recent changes (JSON)" href="?m=json">
+{% endblock %}
+
+{% block content %}
+  <article class="changes">
+    <header><h1>Recent changes</h1></header>
+
+    {% if changes %}
+      <ol class="revisions">
+        {% for c in changes %}
+          <li>
+            <a href="{{ site_root_path }}{{ page_slug(c.page_name) }}?r={{ c.revision }}">{{ c.page_name or "Home" }} — revision {{ c.revision }}</a>
+            <time datetime="{{ c.created.isoformat() }}Z">{{ c.created.strftime("%Y-%m-%d %H:%M") }} UTC</time>
+            {% if c.page_deleted %}<em class="deleted">(page since deleted)</em>{% endif %}
+            {% if c.changes %}<span class="changes">{{ c.changes|safe }}</span>{% endif %}
+          </li>
+        {% endfor %}
+      </ol>
+
+      {% if older_before %}
+        <p class="pagination"><a href="?before={{ older_before }}">Older &rarr;</a></p>
+      {% endif %}
+    {% else %}
+      <p class="empty">No changes yet.</p>
     {% endif %}
-  {% else %}
-    <p>No changes yet.</p>
-  {% endif %}
-  <p><a href="{{ site_root_path }}">Back to site</a></p>
-</body>
-</html>
+
+    <p><a href="{{ site_root_path }}">Back to site</a></p>
+  </article>
+{% endblock %}
diff --git a/jottit/templates/claim_site.html b/jottit/templates/claim_site.html
index a7b2056..b9b4993 100644
--- a/jottit/templates/claim_site.html
+++ b/jottit/templates/claim_site.html
@@ -1,30 +1,32 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Claim this site</title>
-</head>
-<body>
-  <h1>Claim this site</h1>
-  {% if error %}<p class="error">{{ error }}</p>{% endif %}
-  <form method="post">
-    <p>
-      <label>Password<br>
-        <input type="password" name="password" value="{{ password }}" required>
-      </label>
-    </p>
-    <p>
-      <label>Email<br>
-        <input type="email" name="email" value="{{ email }}" required>
-      </label>
-    </p>
-    <fieldset>
-      <legend>Security</legend>
-      <p><label><input type="radio" name="security" value="private" {% if security == "private" %}checked{% endif %}> Private — only you can view or edit</label></p>
-      <p><label><input type="radio" name="security" value="public" {% if security == "public" %}checked{% endif %}> Public — anyone can view, only you can edit</label></p>
-      <p><label><input type="radio" name="security" value="open" {% if security == "open" %}checked{% endif %}> Open — anyone can view or edit</label></p>
-    </fieldset>
-    <p><button type="submit">Claim site</button></p>
-  </form>
-</body>
-</html>
+{% extends "base.html" %}
+{% block title %}Claim this site{% endblock %}
+{% block content %}
+  <article class="site-form">
+    <header><h1>Claim this site</h1></header>
+    <p>Set a password and pick how open you want this site to be. We'll email you a recovery link if you forget the password later.</p>
+
+    {% include "partials/form_error.html" %}
+
+    <form method="post" class="form">
+      <p>
+        <label>Password
+          <input type="password" name="password" value="{{ password }}" required autofocus>
+        </label>
+      </p>
+      <p>
+        <label>Email
+          <input type="email" name="email" value="{{ email }}" required>
+        </label>
+      </p>
+
+      <fieldset>
+        <legend>Security</legend>
+        <p><label><input type="radio" name="security" value="private" {% if security == "private" %}checked{% endif %}> Private — only you can view or edit</label></p>
+        <p><label><input type="radio" name="security" value="public" {% if security == "public" %}checked{% endif %}> Public — anyone can view, only you can edit</label></p>
+        <p><label><input type="radio" name="security" value="open" {% if security == "open" %}checked{% endif %}> Open — anyone can view or edit</label></p>
+      </fieldset>
+
+      <p><button type="submit">Claim site</button></p>
+    </form>
+  </article>
+{% endblock %}
diff --git a/jottit/templates/deleted.html b/jottit/templates/deleted.html
index 959f5ba..f99da8c 100644
--- a/jottit/templates/deleted.html
+++ b/jottit/templates/deleted.html
@@ -1,11 +1,14 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Deleted</title>
-</head>
-<body>
-  <h1>This page has been deleted</h1>
-  <p>&ldquo;{{ page_name }}&rdquo; is gone. Append <code>?r=N</code> to view a specific revision.</p>
-</body>
-</html>
+{% extends "base.html" %}
+{% block title %}Deleted{% endblock %}
+{% block content %}
+  <article>
+    <header><h1>This page has been deleted</h1></header>
+    <p>&ldquo;{{ page_name }}&rdquo; is gone. Append <code>?r=<var>N</var></code> to view a specific revision, or restore it from the page's history.</p>
+    {% if is_signed_in or is_unclaimed %}
+      <form action="{{ site_root_path }}{{ page_slug(page_name) }}" method="post" class="undelete">
+        <input type="hidden" name="m" value="undelete">
+        <button type="submit">Undelete this page</button>
+      </form>
+    {% endif %}
+  </article>
+{% endblock %}
diff --git a/jottit/templates/diff.html b/jottit/templates/diff.html
index 82187d2..d769b02 100644
--- a/jottit/templates/diff.html
+++ b/jottit/templates/diff.html
@@ -1,18 +1,20 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Diff: {{ page_name or "Home" }}</title>
-</head>
-<body>
-  <h1>Diff: {{ page_name or "Home" }}</h1>
-  <p>
-    Comparing
-    <a href="{{ site_root_path }}{{ page_name }}?r={{ a.revision }}">revision {{ a.revision }}</a>
-    with
-    <a href="{{ site_root_path }}{{ page_name }}?r={{ b.revision }}">revision {{ b.revision }}</a>.
-  </p>
-  <article>{{ diff_html|safe }}</article>
-  <p><a href="{{ site_root_path }}{{ page_name }}?m=history">Back to history</a></p>
-</body>
-</html>
+{% extends "base.html" %}
+{% block title %}Diff: {{ page_name or "Home" }}{% endblock %}
+
+{% block content %}
+  <article class="diff">
+    <header>
+      <h1>Diff: {{ page_name or "Home" }}</h1>
+      <p>
+        Comparing
+        <a href="{{ site_root_path }}{{ page_slug(page_name) }}?r={{ a.revision }}">revision {{ a.revision }}</a>
+        with
+        <a href="{{ site_root_path }}{{ page_slug(page_name) }}?r={{ b.revision }}">revision {{ b.revision }}</a>.
+      </p>
+    </header>
+
+    <section class="diff-body">{{ diff_html|safe }}</section>
+
+    <p><a href="{{ site_root_path }}{{ page_slug(page_name) }}?m=history">Back to history</a></p>
+  </article>
+{% endblock %}
diff --git a/jottit/templates/edit_page.html b/jottit/templates/edit_page.html
index 18f81ff..d80d160 100644
--- a/jottit/templates/edit_page.html
+++ b/jottit/templates/edit_page.html
@@ -1,18 +1,26 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Edit: {{ page_name or "Home" }}</title>
-</head>
-<body>
-  <h1>Edit: {{ page_name or "Home" }}</h1>
-  <form method="post">
-    <input type="hidden" name="current_revision" value="{{ current_revision }}">
-    <p><textarea name="content" rows="20" cols="80">{{ content }}</textarea></p>
-    <p>
-      <button type="submit">Save</button>
-      {% if page_name %}<button type="submit" name="delete" value="1">Delete</button>{% endif %}
-    </p>
-  </form>
-</body>
-</html>
+{% extends "base.html" %}
+
+{% block title %}Edit: {{ page_name or "Home" }}{% if site and site.title %} — {{ site.title }}{% endif %}{% endblock %}
+
+{% block content %}
+  <article class="edit">
+    <header><h1>Edit: {{ page_name or "Home" }}</h1></header>
+
+    <form method="post" class="edit-form">
+      <input type="hidden" name="current_revision" value="{{ current_revision }}">
+      <p>
+        <label>
+          <span class="visually-hidden">Page content (Markdown)</span>
+          <textarea name="content" rows="20" cols="80" autofocus>{{ content }}</textarea>
+        </label>
+      </p>
+      <p class="actions">
+        <button type="submit">Save</button>
+        <a class="cancel" href="{{ site_root_path }}{{ page_slug(page_name) }}">Cancel</a>
+        {% if page_name %}
+          <button type="submit" name="delete" value="1" class="destructive">Delete</button>
+        {% endif %}
+      </p>
+    </form>
+  </article>
+{% endblock %}
diff --git a/jottit/templates/forgot_password.html b/jottit/templates/forgot_password.html
index 97b49bf..3ed320c 100644
--- a/jottit/templates/forgot_password.html
+++ b/jottit/templates/forgot_password.html
@@ -1,18 +1,16 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Forgot your password?</title>
-</head>
-<body>
-  <h1>Forgot your password?</h1>
-  {% if sent %}
-    <p>We've emailed a password reset link to the address on file.</p>
-  {% else %}
-    <p>We'll email a one-time password reset link to the email address on file for this site.</p>
-    <form method="post">
-      <p><button type="submit">Email me a reset link</button></p>
-    </form>
-  {% endif %}
-</body>
-</html>
+{% extends "base.html" %}
+{% block title %}Forgot your password?{% endblock %}
+{% block content %}
+  <article class="site-form">
+    <header><h1>Forgot your password?</h1></header>
+
+    {% if sent %}
+      <p>We've emailed a password-reset link to the address on file. The link works once — if you need another, come back to this page.</p>
+    {% else %}
+      <p>We'll email a one-time password-reset link to the email address on file for this site.</p>
+      <form method="post" class="form">
+        <p><button type="submit">Email me a reset link</button></p>
+      </form>
+    {% endif %}
+  </article>
+{% endblock %}
diff --git a/jottit/templates/history.html b/jottit/templates/history.html
index 40e99e3..3a9e384 100644
--- a/jottit/templates/history.html
+++ b/jottit/templates/history.html
@@ -1,24 +1,36 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>History: {{ page_name or "Home" }}</title>
-</head>
-<body>
-  <h1>History: {{ page_name or "Home" }}</h1>
-  <p>{{ total }} revision{{ "s" if total != 1 }}.</p>
-  <ul>
-    {% for r in revisions %}
-      <li>
-        <a href="{{ site_root_path }}{{ page_name }}?r={{ r.revision }}">Revision {{ r.revision }}</a>
-        <small>{{ r.created.strftime("%Y-%m-%d %H:%M") }} UTC</small>
-        {% if r.changes %}<span class="changes">{{ r.changes|safe }}</span>{% endif %}
-      </li>
-    {% endfor %}
-  </ul>
-  {% if older_before %}
-    <p><a href="?m=history&amp;before={{ older_before }}">Older &rarr;</a></p>
-  {% endif %}
-  <p><a href="{{ site_root_path }}{{ page_name }}">Back to page</a></p>
-</body>
-</html>
+{% extends "base.html" %}
+{% block title %}History: {{ page_name or "Home" }}{% endblock %}
+
+{% block head %}
+  <link rel="alternate" type="application/rss+xml"
+        title="{{ page_name or 'Home' }} history"
+        href="?m=history_rss">
+  <link rel="alternate" type="application/feed+json"
+        title="{{ page_name or 'Home' }} history (JSON)"
+        href="?m=history_json">
+{% endblock %}
+
+{% block content %}
+  <article class="history">
+    <header>
+      <h1>History: {{ page_name or "Home" }}</h1>
+      <p class="count">{{ total }} revision{{ "s" if total != 1 }}.</p>
+    </header>
+
+    <ol class="revisions">
+      {% for r in revisions %}
+        <li>
+          <a href="{{ site_root_path }}{{ page_slug(page_name) }}?r={{ r.revision }}">Revision {{ r.revision }}</a>
+          <time datetime="{{ r.created.isoformat() }}Z">{{ r.created.strftime("%Y-%m-%d %H:%M") }} UTC</time>
+          {% if r.changes %}<span class="changes">{{ r.changes|safe }}</span>{% endif %}
+        </li>
+      {% endfor %}
+    </ol>
+
+    {% if older_before %}
+      <p class="pagination"><a href="?m=history&amp;before={{ older_before }}">Older &rarr;</a></p>
+    {% endif %}
+
+    <p><a href="{{ site_root_path }}{{ page_slug(page_name) }}">Back to page</a></p>
+  </article>
+{% endblock %}
diff --git a/jottit/templates/index.html b/jottit/templates/index.html
index cff2767..3f33a0e 100644
--- a/jottit/templates/index.html
+++ b/jottit/templates/index.html
@@ -1,11 +1,28 @@
-<!doctype html>
-<html lang="en">
-<head><meta charset="utf-8"><title>Jottit</title></head>
-<body>
-  <h1>Jottit</h1>
-  <form method="post" action="/">
-    <p><textarea name="content" rows="10" cols="60"></textarea></p>
-    <p><button type="submit">Create a site</button></p>
-  </form>
-</body>
-</html>
+{% extends "base.html" %}
+{% block title %}Jottit — make a site by filling out a textbox{% endblock %}
+{% block content %}
+  <article class="front">
+    <header>
+      <h1>Jottit</h1>
+      <p class="lede">Getting a website should be as easy as filling out a textbox.</p>
+    </header>
+
+    <form method="post" action="/" class="new-site">
+      <p>
+        <label>
+          <span class="visually-hidden">What goes on the home page?</span>
+          <textarea name="content" rows="12" cols="60" autofocus
+                    placeholder="What goes on the home page?"></textarea>
+        </label>
+      </p>
+      <p class="hint">
+        <label>
+          Want a custom subdomain?
+          <input type="text" name="public_url" placeholder="my-site"
+                 pattern="[a-z0-9-]+" autocomplete="off">
+        </label>
+      </p>
+      <p><button type="submit">Create a site</button></p>
+    </form>
+  </article>
+{% endblock %}
diff --git a/jottit/templates/notfound.html b/jottit/templates/notfound.html
index 263ec3d..3b6cbe4 100644
--- a/jottit/templates/notfound.html
+++ b/jottit/templates/notfound.html
@@ -1,11 +1,11 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Not found</title>
-</head>
-<body>
-  <h1>Not found</h1>
-  <p>There's no page named &ldquo;{{ page_name }}&rdquo; on this site.</p>
-</body>
-</html>
+{% extends "base.html" %}
+{% block title %}Not found{% endblock %}
+{% block content %}
+  <article>
+    <header><h1>Not found</h1></header>
+    <p>There's no page named &ldquo;{{ page_name }}&rdquo; on this site.</p>
+    {% if is_signed_in or is_unclaimed %}
+      <p><a href="{{ site_root_path }}{{ page_slug(page_name) }}?m=edit">Create this page</a></p>
+    {% endif %}
+  </article>
+{% endblock %}
diff --git a/jottit/templates/partials/design_style.html b/jottit/templates/partials/design_style.html
new file mode 100644
index 0000000..628f361
--- /dev/null
+++ b/jottit/templates/partials/design_style.html
@@ -0,0 +1,23 @@
+{# Inline CSS variables sourced from the site's design row.
+
+   The 2007 site embedded full per-site CSS rules here; we surface the
+   values as custom properties instead and let the global stylesheet
+   reference them. That keeps the per-request payload small and lets
+   the M9 stylesheet rewrite without coordinating with this template. #}
+<style>
+  :root {
+    {% if design.header_color %}--header-color: {{ design.header_color }};{% endif %}
+    {% if design.title_color %}--title-color: {{ design.title_color }};{% endif %}
+    {% if design.subtitle_color %}--subtitle-color: {{ design.subtitle_color }};{% endif %}
+    {% if design.title_font %}--title-font: {{ design.title_font|replace("_", " ") }};{% endif %}
+    {% if design.subtitle_font %}--subtitle-font: {{ design.subtitle_font|replace("_", " ") }};{% endif %}
+    {% if design.headings_font %}--headings-font: {{ design.headings_font|replace("_", " ") }};{% endif %}
+    {% if design.content_font %}--content-font: {{ design.content_font|replace("_", " ") }};{% endif %}
+    {% if design.title_size %}--title-size: {{ design.title_size }}%;{% endif %}
+    {% if design.subtitle_size %}--subtitle-size: {{ design.subtitle_size }}%;{% endif %}
+    {% if design.headings_size %}--headings-size: {{ design.headings_size }}%;{% endif %}
+    {% if design.content_size %}--content-size: {{ design.content_size }}%;{% endif %}
+    {% if design.hue %}--hue: {{ design.hue }};{% endif %}
+    {% if design.brightness %}--brightness: {{ design.brightness }};{% endif %}
+  }
+</style>
diff --git a/jottit/templates/partials/form_error.html b/jottit/templates/partials/form_error.html
new file mode 100644
index 0000000..89de835
--- /dev/null
+++ b/jottit/templates/partials/form_error.html
@@ -0,0 +1,3 @@
+{# Inline form error. Hidden when no error message is set, so callers can
+   include this unconditionally above their form fields. #}
+{% if error %}<p class="form-error" role="alert">{{ error }}</p>{% endif %}
diff --git a/jottit/templates/partials/site_header.html b/jottit/templates/partials/site_header.html
new file mode 100644
index 0000000..3cf80fe
--- /dev/null
+++ b/jottit/templates/partials/site_header.html
@@ -0,0 +1,34 @@
+{# Header chrome rendered on every site page: title, subtitle, primary nav.
+   The unclaimed-site banner sits above the header so it's the most visible
+   action for a brand-new site. #}
+<header class="site-header">
+  {% if is_unclaimed %}
+    <div class="claim-banner">
+      <a href="{{ site_root_path }}site/claim">Claim this site</a>
+    </div>
+  {% endif %}
+
+  <hgroup>
+    <h1><a href="{{ site_root_path }}">{{ site.title or "Untitled site" }}</a></h1>
+    {% if site.subtitle %}<p class="subtitle">{{ site.subtitle }}</p>{% endif %}
+  </hgroup>
+
+  <nav class="site-nav" aria-label="Site">
+    <ul>
+      <li><a href="{{ site_root_path }}site/changes">recent changes</a></li>
+      {% if is_signed_in or is_unclaimed %}
+        <li><a href="{{ site_root_path }}admin/settings">settings</a></li>
+        <li><a href="{{ site_root_path }}admin/design">design</a></li>
+      {% endif %}
+      {% if is_signed_in %}
+        <li>
+          <form action="{{ site_root_path }}site/signout" method="post" class="inline">
+            <button type="submit" class="link">sign out</button>
+          </form>
+        </li>
+      {% elif not is_unclaimed %}
+        <li><a href="{{ site_root_path }}site/signin">sign in</a></li>
+      {% endif %}
+    </ul>
+  </nav>
+</header>
diff --git a/jottit/templates/partials/site_sidebar.html b/jottit/templates/partials/site_sidebar.html
new file mode 100644
index 0000000..2dd5b69
--- /dev/null
+++ b/jottit/templates/partials/site_sidebar.html
@@ -0,0 +1,32 @@
+{# Page list for the current site. Hidden when the site has only the
+   home page — it's noise on a fresh site. The "new page" form is a
+   plain link to the edit URL; M10 will replace the inline form with
+   a JS-driven inline create. #}
+{% if pages|length > 1 or is_signed_in %}
+<aside class="site-sidebar" aria-label="Pages on this site">
+  <h2 class="visually-hidden">Pages</h2>
+  <ul class="page-list">
+    {% for p in pages %}
+      {% set label = p.name or "Home" %}
+      {% set href = site_root_path + page_slug(p.name) %}
+      <li>
+        {% if current_path == href %}
+          <strong>{{ label }}</strong>
+        {% else %}
+          <a href="{{ href }}">{{ label }}</a>
+        {% endif %}
+      </li>
+    {% endfor %}
+  </ul>
+  {% if is_signed_in or is_unclaimed %}
+    <form action="{{ site_root_path }}" method="get" class="new-page">
+      <label>
+        <span class="visually-hidden">New page name</span>
+        <input type="text" name="m" value="edit" hidden>
+        <input type="text" name="name" placeholder="New page name" required>
+      </label>
+      <button type="submit">Create</button>
+    </form>
+  {% endif %}
+</aside>
+{% endif %}
diff --git a/jottit/templates/signin.html b/jottit/templates/signin.html
index 160488c..a716dbc 100644
--- a/jottit/templates/signin.html
+++ b/jottit/templates/signin.html
@@ -1,21 +1,21 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Sign in</title>
-</head>
-<body>
-  <h1>Sign in</h1>
-  {% if error %}<p class="error">{{ error }}</p>{% endif %}
-  <form method="post">
-    <input type="hidden" name="return_to" value="{{ return_to }}">
-    <p>
-      <label>Password<br>
-        <input type="password" name="password" required autofocus>
-      </label>
-    </p>
-    <p><button type="submit">Sign in</button></p>
-  </form>
-  <p><a href="site/forgot-password">Forgot your password?</a></p>
-</body>
-</html>
+{% extends "base.html" %}
+{% block title %}Sign in{% endblock %}
+{% block content %}
+  <article class="site-form">
+    <header><h1>Sign in</h1></header>
+
+    {% include "partials/form_error.html" %}
+
+    <form method="post" class="form">
+      <input type="hidden" name="return_to" value="{{ return_to }}">
+      <p>
+        <label>Password
+          <input type="password" name="password" required autofocus>
+        </label>
+      </p>
+      <p><button type="submit">Sign in</button></p>
+    </form>
+
+    <p class="forgot"><a href="forgot-password">Forgot your password?</a></p>
+  </article>
+{% endblock %}
diff --git a/jottit/templates/view_page.html b/jottit/templates/view_page.html
index b594a43..44327f6 100644
--- a/jottit/templates/view_page.html
+++ b/jottit/templates/view_page.html
@@ -1,13 +1,59 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>{{ page_name or "Home" }}</title>
-</head>
-<body>
-  <article>{{ content_html|safe }}</article>
-  <footer>
-    <small>revision {{ revision.revision }}</small>
-  </footer>
-</body>
-</html>
+{% extends "base.html" %}
+
+{% block title %}{{ page_name or "Home" }}{% if site and site.title %} — {{ site.title }}{% endif %}{% endblock %}
+
+{% block head %}
+  <link rel="alternate" type="application/rss+xml"
+        title="{{ page_name or 'Home' }} history"
+        href="{{ site_root_path }}{{ page_slug(page_name) }}?m=history_rss">
+  <link rel="alternate" type="application/feed+json"
+        title="{{ page_name or 'Home' }} history (JSON)"
+        href="{{ site_root_path }}{{ page_slug(page_name) }}?m=history_json">
+  <link rel="alternate" type="application/rss+xml"
+        title="{{ site.title or 'Site' }} recent changes"
+        href="{{ site_root_path }}site/changes.rss">
+{% endblock %}
+
+{% block content %}
+  <article class="page">
+    <header>
+      <h1>{{ page_name or "Home" }}</h1>
+      {% if is_old_revision %}
+        <p class="revision-banner">
+          Viewing revision <strong>{{ revision.revision }}</strong>
+          of {{ latest_revision_number }}.
+          <a href="{{ site_root_path }}{{ page_slug(page_name) }}">Latest</a>
+          {% if revision.revision > 1 %}
+            · <a href="?r={{ revision.revision - 1 }}">prev</a>
+          {% endif %}
+          {% if revision.revision < latest_revision_number %}
+            · <a href="?r={{ revision.revision + 1 }}">next</a>
+          {% endif %}
+        </p>
+
+        {% if is_signed_in or is_unclaimed %}
+          <form action="" method="post" class="revert">
+            <input type="hidden" name="m" value="revert">
+            <input type="hidden" name="r" value="{{ revision.revision }}">
+            <button type="submit">Revert page to this revision</button>
+          </form>
+        {% endif %}
+      {% endif %}
+    </header>
+
+    <div class="content">
+      {{ content_html|safe }}
+    </div>
+
+    <footer class="page-meta">
+      <p>
+        Revision {{ revision.revision }} &middot;
+        <time datetime="{{ revision.created.isoformat() }}Z">{{ revision.created.strftime("%Y-%m-%d %H:%M") }} UTC</time>
+        {% if is_signed_in or is_unclaimed %}
+          &middot; <a href="?m=edit">edit</a>
+          &middot; <a href="?m=history">history</a>
+        {% endif %}
+      </p>
+    </footer>
+  </article>
+{% endblock %}
diff --git a/jottit/views/page.py b/jottit/views/page.py
index dfe64ee..9ad1895 100644
--- a/jottit/views/page.py
+++ b/jottit/views/page.py
@@ -99,11 +99,16 @@ def _render_view(conn: Connection, page_name: str) -> ResponseReturnValue:
     if revision is None:
         abort(404)
 
+    latest = get_revision(conn, page_id=page.id)
     rendered = format_content(revision.content, site_root=site_root())
     return render_template(
         "view_page.html",
         page_name=page_name,
         revision=revision,
+        latest_revision_number=latest.revision if latest is not None else revision.revision,
+        is_old_revision=requested_revision is not None
+        and latest is not None
+        and revision.revision != latest.revision,
         content_html=rendered,
     )
 
diff --git a/tests/test_admin_design.py b/tests/test_admin_design.py
index 24d9fce..9bdf9b6 100644
--- a/tests/test_admin_design.py
+++ b/tests/test_admin_design.py
@@ -85,9 +85,9 @@ def test_get_renders_form_with_current_design(client: FlaskClient, db_engine: En
 
     assert response.status_code == 200
     body = response.data.decode()
-    # new_site populates the design row from a random ColorScheme; the
-    # title font default is Lucida_Grande.
-    assert "Lucida_Grande" in body
+    # new_site seeds the design row with "system-ui, sans-serif" so the
+    # site resolves to the visitor's OS font without shipping a webfont.
+    assert "system-ui, sans-serif" in body
 
 
 # ---- POST: happy path ----
diff --git a/tests/test_db_queries.py b/tests/test_db_queries.py
index 9947c12..8ebc300 100644
--- a/tests/test_db_queries.py
+++ b/tests/test_db_queries.py
@@ -84,7 +84,7 @@ def test_new_site_creates_design_row_with_random_scheme(db_conn: Connection) ->
     site_id = new_site(db_conn, content="hi", secret_url="d1")
 
     design = db_conn.execute(select(designs).where(designs.c.site_id == site_id)).one()
-    assert design.title_font == "Lucida_Grande"
+    assert design.title_font == "system-ui, sans-serif"
     assert design.header_color.startswith("#")
     assert design.title_color.startswith("#")
     assert design.subtitle_color.startswith("#")
@@ -574,7 +574,7 @@ def test_get_design_returns_row_created_by_new_site(db_conn: Connection) -> None
 
     assert design is not None
     assert design.site_id == site_id
-    assert design.title_font == "Lucida_Grande"
+    assert design.title_font == "system-ui, sans-serif"
 
 
 def test_update_design_patches_provided_fields(db_conn: Connection) -> None:
diff --git a/tests/test_page_view.py b/tests/test_page_view.py
index d94b066..b8931f6 100644
--- a/tests/test_page_view.py
+++ b/tests/test_page_view.py
@@ -40,7 +40,7 @@ def test_home_on_public_subdomain_renders_latest_revision(
     assert response.status_code == 200
     body = response.data.decode()
     assert "<strong>hi there</strong>" in body
-    assert "revision 1" in body
+    assert "Revision 1" in body
 
 
 def test_named_page_renders_content(client: FlaskClient, db_engine: Engine) -> None: