From 2a522977e906731d90d368d056f4581a7938b9d8 Mon Sep 17 00:00:00 2001
From: Schwitzz <abbreinholt@gmail.com>
Date: Mon, 26 Oct 2026 23:53:43 -0500
Subject: [PATCH] feat(ui): incorporate PubScript logo as favicon & Topbar mark
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Recreate the gold-rimmed 'PS' typewriter-tile emblem as scalable SVGs:
- public/logo.svg — dark-ground emblem used as the app favicon
- public/logo-mark.svg — transparent mark placed in the Topbar beside
  the page title, with a subtle hover scale

Add <link rel=icon> to index.html and a .ps-topbar-logo rule in
AppShell.css.
---
 apps/web/index.html                |  1 +
 apps/web/public/logo-mark.svg      | 37 +++++++++++++++++++++++++
 apps/web/public/logo.svg           | 43 ++++++++++++++++++++++++++++++
 apps/web/src/components/Topbar.tsx |  9 ++++++-
 packages/ui/src/AppShell.css       | 10 +++++++
 5 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/public/logo-mark.svg
 create mode 100644 apps/web/public/logo.svg

diff --git a/apps/web/index.html b/apps/web/index.html
index 6558e8f..e6afc51 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -6,6 +6,7 @@
     <meta name="color-scheme" content="dark light" />
     <title>PubScript</title>
     <meta name="description" content="A local-first writing environment for authors." />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/web/public/logo-mark.svg b/apps/web/public/logo-mark.svg
new file mode 100644
index 0000000..a9d3d1b
--- /dev/null
+++ b/apps/web/public/logo-mark.svg
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="PubScript">
+  <defs>
+    <linearGradient id="mg-gold" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#f9edc4"/>
+      <stop offset="0.27" stop-color="#e8c76a"/>
+      <stop offset="0.52" stop-color="#c9a23a"/>
+      <stop offset="0.72" stop-color="#f4d683"/>
+      <stop offset="1" stop-color="#937420"/>
+    </linearGradient>
+    <radialGradient id="mg-ivory" cx="45%" cy="38%" r="72%">
+      <stop offset="0" stop-color="#fffdf4"/>
+      <stop offset="0.72" stop-color="#f5ecd6"/>
+      <stop offset="1" stop-color="#e8dcbd"/>
+    </radialGradient>
+    <filter id="mg-shadow" x="-35%" y="-35%" width="170%" height="170%">
+      <feDropShadow dx="0" dy="5" stdDeviation="8" flood-color="#000000" flood-opacity="0.35"/>
+    </filter>
+  </defs>
+
+  <g filter="url(#mg-shadow)">
+    <!-- P tile -->
+    <circle cx="126" cy="256" r="120" fill="url(#mg-gold)"/>
+    <circle cx="126" cy="256" r="104" fill="url(#mg-ivory)"/>
+    <circle cx="126" cy="256" r="104" fill="none" stroke="#8a6d1c" stroke-width="1.5" opacity="0.5"/>
+    <text x="126" y="256" text-anchor="middle" dominant-baseline="central"
+          font-family="Georgia, 'Times New Roman', serif" font-size="152" font-weight="600"
+          fill="#21242c">P</text>
+
+    <!-- S tile -->
+    <circle cx="386" cy="256" r="120" fill="url(#mg-gold)"/>
+    <circle cx="386" cy="256" r="104" fill="url(#mg-ivory)"/>
+    <circle cx="386" cy="256" r="104" fill="none" stroke="#8a6d1c" stroke-width="1.5" opacity="0.5"/>
+    <text x="386" y="256" text-anchor="middle" dominant-baseline="central"
+          font-family="Georgia, 'Times New Roman', serif" font-size="152" font-weight="600"
+          fill="#21242c">S</text>
+  </g>
+</svg>
diff --git a/apps/web/public/logo.svg b/apps/web/public/logo.svg
new file mode 100644
index 0000000..839afda
--- /dev/null
+++ b/apps/web/public/logo.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="PubScript">
+  <defs>
+    <radialGradient id="ps-bg" cx="48%" cy="40%" r="78%">
+      <stop offset="0" stop-color="#2b313d"/>
+      <stop offset="1" stop-color="#15181f"/>
+    </radialGradient>
+    <linearGradient id="ps-gold" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#f9edc4"/>
+      <stop offset="0.27" stop-color="#e8c76a"/>
+      <stop offset="0.52" stop-color="#c9a23a"/>
+      <stop offset="0.72" stop-color="#f4d683"/>
+      <stop offset="1" stop-color="#937420"/>
+    </linearGradient>
+    <radialGradient id="ps-ivory" cx="45%" cy="38%" r="72%">
+      <stop offset="0" stop-color="#fffdf4"/>
+      <stop offset="0.72" stop-color="#f5ecd6"/>
+      <stop offset="1" stop-color="#e8dcbd"/>
+    </radialGradient>
+    <filter id="ps-shadow" x="-35%" y="-35%" width="170%" height="170%">
+      <feDropShadow dx="0" dy="7" stdDeviation="11" flood-color="#000000" flood-opacity="0.45"/>
+    </filter>
+  </defs>
+
+  <rect width="512" height="512" rx="104" fill="url(#ps-bg)"/>
+
+  <g filter="url(#ps-shadow)">
+    <!-- P tile -->
+    <circle cx="126" cy="256" r="120" fill="url(#ps-gold)"/>
+    <circle cx="126" cy="256" r="104" fill="url(#ps-ivory)"/>
+    <circle cx="126" cy="256" r="104" fill="none" stroke="#8a6d1c" stroke-width="1.5" opacity="0.5"/>
+    <text x="126" y="256" text-anchor="middle" dominant-baseline="central"
+          font-family="Georgia, 'Times New Roman', serif" font-size="152" font-weight="600"
+          fill="#21242c">P</text>
+
+    <!-- S tile -->
+    <circle cx="386" cy="256" r="120" fill="url(#ps-gold)"/>
+    <circle cx="386" cy="256" r="104" fill="url(#ps-ivory)"/>
+    <circle cx="386" cy="256" r="104" fill="none" stroke="#8a6d1c" stroke-width="1.5" opacity="0.5"/>
+    <text x="386" y="256" text-anchor="middle" dominant-baseline="central"
+          font-family="Georgia, 'Times New Roman', serif" font-size="152" font-weight="600"
+          fill="#21242c">S</text>
+  </g>
+</svg>
diff --git a/apps/web/src/components/Topbar.tsx b/apps/web/src/components/Topbar.tsx
index 04fd521..c4f7ed8 100644
--- a/apps/web/src/components/Topbar.tsx
+++ b/apps/web/src/components/Topbar.tsx
@@ -29,7 +29,14 @@ export function Topbar({ onOpenPalette, onOpenExport }: TopbarProps) {
 
   return (
     <header className="ps-topbar">
-      <h1 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>{title}</h1>
+      <img
+        src="/logo-mark.svg"
+        alt="PubScript"
+        className="ps-topbar-logo"
+        style={{ height: 26, width: "auto", marginRight: 12, display: "inline-block", verticalAlign: "middle" }}
+      />
+
+      <h1 style={{ margin: 0, fontSize: 15, fontWeight: 600, display: "inline-flex", verticalAlign: "middle" }}>{title}</h1>
 
       {autoSave && <Badge variant="success">✓ autosave on</Badge>}
 
diff --git a/packages/ui/src/AppShell.css b/packages/ui/src/AppShell.css
index 8181184..5441431 100644
--- a/packages/ui/src/AppShell.css
+++ b/packages/ui/src/AppShell.css
@@ -113,6 +113,16 @@ body {
   border-bottom: 1px solid var(--ps-border);
   background: var(--ps-surface);
 }
+.ps-topbar-logo {
+  height: 26px;
+  width: auto;
+  border-radius: 6px;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+.ps-topbar-logo:hover {
+  transform: scale(1.05);
+  opacity: 0.9;
+}
 .ps-main {
   grid-area: main;
   overflow: auto;