feat(brand): BRAND_* env scheme — instance branding without a rebuild

Replace baked-in UOM/MysticMoon/UOMysticmoon branding with a BRAND_* env scheme so one prebuilt image runs as any shard; UOMysticmoon becomes the first tenant that sets these vars rather than a special case in the code. Architecture (chosen because the app ships as a prebuilt image): - server/src/config/brand.js + bot/src/brand.js read BRAND_* once at boot, with Runic Gateway defaults. - Text/colors reach the SPA at RUNTIME through the existing public settings API (settings.model.getPublic -> SiteContext), so no client rebuild. The admin-editable site title + contact email still override BRAND_NAME/email. - SiteContext applies BRAND_ACCENT_COLOR to the --accent CSS var at runtime. - Express templates the built index.html <title>/description/OG/favicon at serve time from BRAND_* (renderIndexHtml in app.js). - Server-side consumers read brand directly: emails, TOTP issuer, API docs, boot logs, HTML error page. Bot uses it for embed color + logs. Assets: logo/hero/favicon delivered from a ./brand:/app/brand bind-mount (BRAND_LOGO/HERO/FAVICON), with neutral defaults baked in; hero falls back to a built-in image when unset. Scope: also genericized package.json names (uomysticmoon-* -> runic-gateway-*) and the DB_NAME/DB_USER/COOKIE_NAME code defaults (runic_gateway/runic/ rg_token). Production keeps its real values by pinning them in .env — see .env.uomysticmoon.example, which reproduces the exact UOMysticmoon identity (proof the substitution works). Changing a deployed COOKIE_NAME invalidates existing sessions, so UOMysticmoon pins uomm_token. Verified: 193 server tests pass, client builds, app.js loads + templates the built index.html, brand transform injects title/description/OG/favicon.
2026-07-18 02:20:04 -05:00
parent 1bb9e3c3c3
commit 7a08546da6
49 changed files with 389 additions and 119 deletions
--- a/client/index.html
+++ b/client/index.html
@@ -3,8 +3,8 @@
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>UOMysticmoon</title>
-    <meta name="description" content="UOMysticmoon — an independent private Ultima Online shard. News, screenshots, guides, and community notes." />
+    <title>Runic Gateway</title>
+    <meta name="description" content="Runic Gateway — an independent private Ultima Online shard. News, screenshots, guides, and community notes." />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap" rel="stylesheet" />
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "uomysticmoon-client",
+  "name": "runic-gateway-client",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "uomysticmoon-client",
+      "name": "runic-gateway-client",
      "version": "1.0.0",
      "dependencies": {
        "@tiptap/extension-image": "^2.27.2",
--- a/client/package.json
+++ b/client/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "uomysticmoon-client",
+  "name": "runic-gateway-client",
  "private": true,
  "version": "1.0.0",
  "type": "module",
--- a/client/src/components/SiteFooter.jsx
+++ b/client/src/components/SiteFooter.jsx
@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom'
 import { useSite } from '../contexts/SiteContext.jsx'

 export default function SiteFooter() {
-  const { contactEmail } = useSite()
+  const { contactEmail, siteTitle } = useSite()
  return (
    <footer
      className="sans"
@@ -16,7 +16,7 @@ export default function SiteFooter() {
      }}
    >
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
-        <span>UOMysticmoon is an independent private shard project.</span>
+        <span>{siteTitle} is an independent private shard project.</span>
        <span style={{ color: 'var(--dim)', fontSize: '0.84rem' }}>
          <a href={`mailto:${contactEmail}`} style={{ color: 'var(--accent)', textDecoration: 'none' }}>
            {contactEmail}
--- a/client/src/components/SiteHeader.jsx
+++ b/client/src/components/SiteHeader.jsx
@@ -1,6 +1,7 @@
 import { Link, NavLink } from 'react-router-dom'
 import MoonDot from './MoonDot.jsx'
 import { useAuth } from '../contexts/AuthContext.jsx'
+import { useSite } from '../contexts/SiteContext.jsx'

 // One consistent top nav for the whole public site. Every page gets the same
 // main links plus an auth-aware entry on the right (Sign in / My Account / Admin).
@@ -27,6 +28,7 @@ const linkStyle = ({ isActive }) => ({

 export default function SiteHeader() {
  const { user, loading } = useAuth()
+  const { siteTitle } = useSite()

  // Where the auth entry points: staff → admin, player → portal, else sign in.
  const account =
@@ -57,7 +59,7 @@ export default function SiteHeader() {
          style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: '1.2rem', letterSpacing: '0.05em', color: 'var(--accent-bright)', textDecoration: 'none', fontWeight: 600 }}
        >
          <MoonDot />
-          UOMysticmoon
+          {siteTitle}
        </Link>
        <nav style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
          {NAV.map((l) => (
--- a/client/src/contexts/SiteContext.jsx
+++ b/client/src/contexts/SiteContext.jsx
@@ -23,13 +23,24 @@ export function SiteProvider({ children }) {
    refresh()
  }, [refresh])

+  const brand = settings.brand || {}
+
+  // Apply the instance accent color to the CSS variable the theme is built on,
+  // so branding flows to every `var(--accent)` at runtime (no rebuild).
+  useEffect(() => {
+    if (brand.accent) document.documentElement.style.setProperty('--accent', brand.accent)
+  }, [brand.accent])
+
  const value = {
    settings,
    loading,
    refresh,
+    brand,
    mode: settings.site_mode || 'live',
-    siteTitle: settings.site_title || 'UOMysticmoon',
-    contactEmail: settings.contact_email || 'UOMysticmoon@gmail.com',
+    siteTitle: brand.name || settings.site_title || 'Runic Gateway',
+    siteShortName: brand.shortName || brand.name || settings.site_title || 'Runic Gateway',
+    contactEmail: brand.contactEmail || settings.contact_email || '',
+    heroImage: brand.hero || '/assets/img/hero-moon.png',
  }

  return <SiteContext.Provider value={value}>{children}</SiteContext.Provider>
--- a/client/src/lib/heroLayout.js
+++ b/client/src/lib/heroLayout.js
@@ -1,13 +1,20 @@
 // Shared hero-layout helpers used by the public portal and the admin editor.

-export const DEFAULT_HERO_IMAGE = '/assets/img/uomysticmoon-main-hero.png'
+// Neutral built-in default; the instance hero image (BRAND_HERO) overrides it at
+// runtime, threaded in as `defaultImage` by the portal.
+export const DEFAULT_HERO_IMAGE = '/assets/img/hero-moon.png'

-// The original hand-tuned multi-gradient hero background (used only for the
-// untouched default so the live page is byte-for-byte unchanged until edited).
-export const HERO_BG =
-  "linear-gradient(90deg,rgba(11,15,20,0.34) 0%,rgba(11,15,20,0.5) 36%,rgba(11,15,20,0.78) 62%,rgba(11,15,20,0.66) 100%),linear-gradient(180deg,rgba(11,15,20,0.08) 0%,rgba(11,15,20,0.72) 100%),url('" +
-  DEFAULT_HERO_IMAGE +
-  "')"
+// The original hand-tuned multi-gradient hero background over a given image
+// (used for the untouched default so the live page stays consistent until edited).
+export function heroBgStack(image) {
+  return (
+    "linear-gradient(90deg,rgba(11,15,20,0.34) 0%,rgba(11,15,20,0.5) 36%,rgba(11,15,20,0.78) 62%,rgba(11,15,20,0.66) 100%),linear-gradient(180deg,rgba(11,15,20,0.08) 0%,rgba(11,15,20,0.72) 100%),url('" +
+    (image || DEFAULT_HERO_IMAGE) +
+    "')"
+  )
+}
+
+export const HERO_BG = heroBgStack(DEFAULT_HERO_IMAGE)

 // Single-stop dark overlay driven by the editor's opacity slider.
 export function buildOverlay(opacity) {
@@ -16,12 +23,13 @@ export function buildOverlay(opacity) {

 // Background style for a layout. When `isDefault` and no custom image is set, use
 // the exact original gradient stack; otherwise compose the overlay over the image.
-export function heroBackground(layout, { isDefault = false } = {}) {
+export function heroBackground(layout, { isDefault = false, defaultImage } = {}) {
  const bg = layout.background || {}
+  const fallback = defaultImage || DEFAULT_HERO_IMAGE
  const backgroundImage =
    isDefault && !bg.image_url
-      ? HERO_BG
-      : `${buildOverlay(layout.overlay?.opacity ?? 0.72)}, url('${bg.image_url || DEFAULT_HERO_IMAGE}')`
+      ? heroBgStack(fallback)
+      : `${buildOverlay(layout.overlay?.opacity ?? 0.72)}, url('${bg.image_url || fallback}')`
  return {
    backgroundColor: 'var(--bg-deep)',
    backgroundImage,
@@ -44,7 +52,7 @@ export function parseLayout(str) {
 // The current hardcoded hero as a HeroLayout, so the page is unchanged until
 // staff publish their own. Font sizes use the existing clamp() strings so the
 // default stays responsive (editor-created text uses px).
-export function defaultLayout(teaser) {
+export function defaultLayout(teaser, name = 'Runic Gateway') {
  return {
    version: 1,
    background: { image_url: null, position_x: 'left', position_y: 'center', size: 'cover' },
@@ -62,7 +70,7 @@ export function defaultLayout(teaser) {
          width: 760,
          lines: [
            { text: 'Private shard project', tag: 'span', fontSize: '0.74rem', color: '#c2d2e6', weight: 700, letterSpacing: '0.22em', transform: 'uppercase', font: 'sans' },
-            { text: 'UOMysticmoon', tag: 'h1', fontSize: 'clamp(3rem,8.5vw,5.75rem)', color: 'var(--head)', weight: 600, letterSpacing: '0.02em', lineHeight: 1, font: 'display', marginTop: 14 },
+            { text: name, tag: 'h1', fontSize: 'clamp(3rem,8.5vw,5.75rem)', color: 'var(--head)', weight: 600, letterSpacing: '0.02em', lineHeight: 1, font: 'display', marginTop: 14 },
            { text: 'A private Ultima Online world in progress', tag: 'p', fontSize: '1.32rem', color: '#dbe2ea', italic: true, marginTop: 22 },
            { text: teaser, tag: 'div', html: true, fontSize: '1.06rem', color: '#c4cdd8', maxWidth: 600, marginTop: 22 },
          ],
--- a/client/src/routes/admin/AdminLayout.jsx
+++ b/client/src/routes/admin/AdminLayout.jsx
@@ -126,7 +126,7 @@ const navBtnBase = {

 export default function AdminLayout() {
  const { user, logout } = useAuth()
-  const { mode } = useSite()
+  const { mode, siteTitle } = useSite()
  const navigate = useNavigate()
  const location = useLocation()
  const title =
@@ -225,7 +225,7 @@ export default function AdminLayout() {
          <MoonDot />
          <div>
            <div className="display" style={{ fontSize: '1.02rem', color: 'var(--head)', letterSpacing: '0.03em' }}>
-              UOMysticmoon
+              {siteTitle}
            </div>
            <div className="sans" style={{ color: 'var(--dim)', fontSize: '0.66rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              Admin
--- a/client/src/routes/admin/AdminLogin.jsx
+++ b/client/src/routes/admin/AdminLogin.jsx
@@ -3,6 +3,7 @@ import { Link, useNavigate, useLocation } from 'react-router-dom'
 import MoonDot from '../../components/MoonDot.jsx'
 import ProviderIcon from '../../components/ProviderIcon.jsx'
 import { useAuth } from '../../contexts/AuthContext.jsx'
+import { useSite } from '../../contexts/SiteContext.jsx'
 import { api } from '../../api/client.js'

 // Friendly copy for the ?sso_error codes the SSO callback can redirect back with.
@@ -15,9 +16,6 @@ const SSO_ERRORS = {
  error: 'Could not complete sign-in. Please try again.',
 }

-const BG =
-  "linear-gradient(180deg,rgba(11,15,20,0.72),rgba(11,15,20,0.9)),url('/assets/img/uomysticmoon-main-hero.png')"
-
 // Hidden anti-bot field. Off-screen via CSS (NOT display:none/hidden, which bots
 // skip) so real users never fill it but naive scripted bots do. Name must match
 // the server's HONEYPOT_FIELD ('company').
@@ -33,6 +31,8 @@ const honeypotStyle = {

 export default function AdminLogin() {
  const { user, login, loginTotp, ssoLoginTotp } = useAuth()
+  const { siteTitle, heroImage } = useSite()
+  const BG = `linear-gradient(180deg,rgba(11,15,20,0.72),rgba(11,15,20,0.9)),url('${heroImage}')`
  const navigate = useNavigate()
  const location = useLocation()
  const dest = location.state?.from?.pathname || '/admin'
@@ -160,7 +160,7 @@ export default function AdminLogin() {
            <MoonDot size={15} glow={0.55} />
          </div>
          <h1 className="display" style={{ margin: 0, fontSize: '1.7rem', letterSpacing: '0.04em', color: 'var(--head)' }}>
-            UOMysticmoon
+            {siteTitle}
          </h1>
          <p className="sans" style={{ margin: '6px 0 0', color: '#9aa6b4', fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            Admin Panel
--- a/client/src/routes/admin/views/EmailDelivery.jsx
+++ b/client/src/routes/admin/views/EmailDelivery.jsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { api } from '../../../api/client.js'
+import { useSite } from '../../../contexts/SiteContext.jsx'

 // Email delivery panel (Gmail over OAuth2), rendered as a section on the Settings
 // page. Sending is authorized by an in-app "Connect Gmail" consent flow that
@@ -52,6 +53,7 @@ function StatusPanel({ config }) {
 }

 export default function EmailDelivery() {
+  const { siteTitle } = useSite()
  const [config, setConfig] = useState(null)
  const [error, setError] = useState('')
  const [senderName, setSenderName] = useState('')
@@ -213,7 +215,7 @@ export default function EmailDelivery() {
              onChange={(e) => setSenderName(e.target.value)}
              className="input"
              autoComplete="off"
-              placeholder="UOMysticmoon"
+              placeholder={siteTitle}
            />
          </label>

--- a/client/src/routes/player/PlayerPortalLayout.jsx
+++ b/client/src/routes/player/PlayerPortalLayout.jsx
@@ -1,6 +1,7 @@
 import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom'
 import MoonDot from '../../components/MoonDot.jsx'
 import { useAuth } from '../../contexts/AuthContext.jsx'
+import { useSite } from '../../contexts/SiteContext.jsx'

 // Shared shell for the logged-in player portal. Uses the same sidebar shell as
 // Admin (icon nav, sticky content header, footer sign-out) so the two logged-in
@@ -55,6 +56,7 @@ const navBtnBase = {

 export default function PlayerPortalLayout() {
  const { user, logout } = useAuth()
+  const { siteTitle } = useSite()
  const navigate = useNavigate()
  const location = useLocation()
  const title =
@@ -84,7 +86,7 @@ export default function PlayerPortalLayout() {
          <MoonDot />
          <div>
            <div className="display" style={{ fontSize: '1.02rem', color: 'var(--head)', letterSpacing: '0.03em' }}>
-              UOMysticmoon
+              {siteTitle}
            </div>
            <div className="sans" style={{ color: 'var(--dim)', fontSize: '0.66rem', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              Player Portal
--- a/client/src/routes/player/PlayerShell.jsx
+++ b/client/src/routes/player/PlayerShell.jsx
@@ -1,12 +1,12 @@
 import { Link } from 'react-router-dom'
 import MoonDot from '../../components/MoonDot.jsx'
-
-const BG =
-  "linear-gradient(180deg,rgba(11,15,20,0.72),rgba(11,15,20,0.9)),url('/assets/img/uomysticmoon-main-hero.png')"
+import { useSite } from '../../contexts/SiteContext.jsx'

 // Centered card layout shared by the player login / register pages. `subtitle`
 // labels the card; `footer` is optional content under the card (e.g. cross-links).
 export default function PlayerShell({ subtitle, children, footer }) {
+  const { siteTitle, heroImage } = useSite()
+  const bg = `linear-gradient(180deg,rgba(11,15,20,0.72),rgba(11,15,20,0.9)),url('${heroImage}')`
  return (
    <main
      style={{
@@ -16,7 +16,7 @@ export default function PlayerShell({ subtitle, children, footer }) {
        padding: '40px 18px',
        overflow: 'hidden',
        backgroundColor: 'var(--bg-deep)',
-        backgroundImage: BG,
+        backgroundImage: bg,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
      }}
@@ -27,7 +27,7 @@ export default function PlayerShell({ subtitle, children, footer }) {
            <MoonDot size={15} glow={0.55} />
          </div>
          <h1 className="display" style={{ margin: 0, fontSize: '1.7rem', letterSpacing: '0.04em', color: 'var(--head)' }}>
-            UOMysticmoon
+            {siteTitle}
          </h1>
          <p className="sans" style={{ margin: '6px 0 0', color: '#9aa6b4', fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            {subtitle}
--- a/client/src/routes/public/About.jsx
+++ b/client/src/routes/public/About.jsx
@@ -3,14 +3,14 @@ import PageHeader from '../../components/PageHeader.jsx'
 import { useSite } from '../../contexts/SiteContext.jsx'

 export default function About() {
-  const { contactEmail } = useSite()
+  const { contactEmail, siteShortName } = useSite()
  return (
    <PublicLayout section="website">
      <div className="shell-narrow page-body">
-        <PageHeader eyebrow="About" title="About Mysticmoon" />
+        <PageHeader eyebrow="About" title={`About ${siteShortName}`} />
        <div className="prose">
          <p>
-            Mysticmoon is an independent, privately-run Ultima Online shard built by a small group of long-time players.
+            {siteShortName} is an independent, privately-run Ultima Online shard built by a small group of long-time players.
            It is not affiliated with or endorsed by the owners of Ultima Online — it is a labor of love for the old
            worlds and the friendships made in them.
          </p>
--- a/client/src/routes/public/Maintenance.jsx
+++ b/client/src/routes/public/Maintenance.jsx
@@ -2,14 +2,12 @@ import { Link } from 'react-router-dom'
 import MoonDot from '../../components/MoonDot.jsx'
 import { useSite } from '../../contexts/SiteContext.jsx'

-const HERO_BG =
-  "linear-gradient(180deg,rgba(11,15,20,0.55) 0%,rgba(11,15,20,0.74) 60%,rgba(11,15,20,0.92) 100%),url('/assets/img/uomysticmoon-main-hero.png')"
-
 export default function Maintenance() {
-  const { settings, contactEmail } = useSite()
+  const { settings, contactEmail, siteShortName, heroImage } = useSite()
+  const heroBg = `linear-gradient(180deg,rgba(11,15,20,0.55) 0%,rgba(11,15,20,0.74) 60%,rgba(11,15,20,0.92) 100%),url('${heroImage}')`
  const message =
    settings.maintenance_message ||
-    'Mysticmoon is in maintenance while we shape its towns, roads, and dungeons. The gates will open soon. Until then, follow along as the world wakes.'
+    `${siteShortName} is in maintenance while we shape its towns, roads, and dungeons. The gates will open soon. Until then, follow along as the world wakes.`

  return (
    <main
@@ -22,7 +20,7 @@ export default function Maintenance() {
        padding: '80px max(18px,calc((100% - 760px)/2))',
        overflow: 'hidden',
        backgroundColor: 'var(--bg-deep)',
-        backgroundImage: HERO_BG,
+        backgroundImage: heroBg,
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
--- a/client/src/routes/public/News.jsx
+++ b/client/src/routes/public/News.jsx
@@ -4,9 +4,11 @@ import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
 import { useAsync } from '../../lib/useAsync.js'
 import { longDate } from '../../lib/format.js'
 import { api } from '../../api/client.js'
+import { useSite } from '../../contexts/SiteContext.jsx'

 export default function News() {
  const { loading, error, data } = useAsync(() => api.posts('news'))
+  const { siteShortName } = useSite()
  const posts = data || []

  return (
@@ -15,7 +17,7 @@ export default function News() {
        <PageHeader
          eyebrow="Development"
          title="News & Updates"
-          lead="Progress notes and announcements as Mysticmoon takes shape."
+          lead={`Progress notes and announcements as ${siteShortName} takes shape.`}
        />
        <section style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {loading && <Loading />}
--- a/client/src/routes/public/Portal.jsx
+++ b/client/src/routes/public/Portal.jsx
@@ -9,10 +9,10 @@ import { defaultLayout, parseLayout, heroBackground } from '../../lib/heroLayout
 const PREVIEW = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('preview') === '1'

 export default function Portal() {
-  const { settings } = useSite()
+  const { settings, siteShortName, siteTitle, heroImage } = useSite()
  const teaser =
    settings.homepage_teaser ||
-    'Mysticmoon is still being shaped beneath a midnight sky — a quiet preview for the news, screenshots, guides, and community notes to come as the world wakes.'
+    `${siteShortName} is still being shaped beneath a midnight sky — a quiet preview for the news, screenshots, guides, and community notes to come as the world wakes.`

  // Published layout (public). Falls back to the pre-populated default if missing,
  // malformed, the wrong version, or empty — so the hero is never blank.
@@ -34,9 +34,9 @@ export default function Portal() {
  }, [])

  const active = (PREVIEW && draft) || (published && published.elements.length ? published : null)
-  const layout = active || defaultLayout(teaser)
+  const layout = active || defaultLayout(teaser, siteTitle)
  const isDefault = !active
-  const bgStyle = heroBackground(layout, { isDefault })
+  const bgStyle = heroBackground(layout, { isDefault, defaultImage: heroImage })
  const elements = [...layout.elements].sort((a, b) => (a.z || 0) - (b.z || 0))

  return (
--- a/client/src/routes/public/Website.jsx
+++ b/client/src/routes/public/Website.jsx
@@ -1,24 +1,26 @@
 import { Link } from 'react-router-dom'
 import PublicLayout from '../../components/PublicLayout.jsx'
 import PageHeader from '../../components/PageHeader.jsx'
+import { useSite } from '../../contexts/SiteContext.jsx'

 const CARDS = [
  { kicker: 'Gallery', title: 'Gameplay Pictures', body: 'Screenshots from towns, dungeons, events, and daily life on the shard.', to: '/site/screenshots' },
  { kicker: 'Updates', title: 'Development News', body: 'Progress notes, shard milestones, and public announcements.', to: '/site/news' },
  { kicker: 'Community', title: 'Five on Friday', body: 'Weekly questions, small previews, and notes from the team.', to: '/site/five-on-friday' },
  { kicker: 'Long-form', title: 'Monthly Newsletter', body: 'Fuller summaries for players who want the whole picture.', to: '/site/newsletter' },
-  { kicker: 'Reference', title: 'Wiki', body: 'Guides and reference pages for the Mysticmoon world.', to: '/wiki' },
+  { kicker: 'Reference', title: 'Wiki', body: 'Guides and reference pages for the game world.', to: '/wiki' },
  { kicker: 'Live', title: 'Shard Status', body: 'Launch state, test windows, and known issues.', to: '/site/status' },
 ]

 export default function Website() {
+  const { siteShortName } = useSite()
  return (
    <PublicLayout section="website">
      <div className="shell page-body">
        <PageHeader
          center
          eyebrow="Public portal"
-          title="Mysticmoon Website"
+          title={`${siteShortName} Website`}
          lead="A home for gameplay pictures, development updates, community posts, monthly newsletters, and weekly Five on Friday notes."
        />
        <section className="grid-3">
--- a/client/src/routes/wiki/Wiki.jsx
+++ b/client/src/routes/wiki/Wiki.jsx
@@ -5,6 +5,7 @@ import PageHeader from '../../components/PageHeader.jsx'
 import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
 import { useAsync } from '../../lib/useAsync.js'
 import { api } from '../../api/client.js'
+import { useSite } from '../../contexts/SiteContext.jsx'

 function SearchBox({ initial, onSubmit }) {
  const [term, setTerm] = useState(initial || '')
@@ -61,6 +62,7 @@ function PageCard({ page }) {
 }

 export default function Wiki() {
+  const { siteShortName } = useSite()
  const [searchParams, setSearchParams] = useSearchParams()
  const activeCategory = searchParams.get('category')
  const activeTag = searchParams.get('tag')
@@ -92,7 +94,7 @@ export default function Wiki() {
        <PageHeader
          center
          eyebrow="Knowledge base"
-          title="Mysticmoon Wiki"
+          title={`${siteShortName} Wiki`}
          lead="A calm starting point for shard guides, the world and its lore, gameplay systems, and community rules."
        />
        <SearchBox initial={activeQ || ''} onSubmit={runSearch} />
--- a/client/src/styles/theme.css
+++ b/client/src/styles/theme.css
@@ -1,4 +1,4 @@
-/* ===== UOMysticmoon design tokens (from the Claude Design handoff) ===== */
+/* ===== Runic Gateway design tokens (from the Claude Design handoff) ===== */
 :root {
  --bg: #0e1318;
  --bg-deep: #0b0f14;