rename(547): the mark is a clasped grimoire

favicon.svg is a violet book with gold corners and clasp and a four-pointed star
in a ring, replacing the indigo book with a spark. It is rendered to 192 and 512
PNG app icons and a 180 touch icon on the page surface.

manifest.json lists those icons instead of a favicon.ico that never existed. It
describes the product as the README does, and takes its colours from the design
system's page surface. index.html's theme-color follows.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/index.html

@@ -4,8 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="manifest" href="/manifest.json">
-    <meta name="theme-color" content="#6c63ff">
+    <meta name="theme-color" content="#14171A">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

frontend/public/favicon.svg

@@ -1,33 +1,18 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
-  <style>
-    .book { fill: #6366f1; stroke: #4f46e5; }
-    .spine { stroke: #4f46e5; }
-    .lines { stroke: #a5b4fc; }
-    @media (prefers-color-scheme: dark) {
-      .book { fill: #e2e8f0; stroke: #cbd5e0; }
-      .spine { stroke: #cbd5e0; }
-      .lines { stroke: #4a5568; }
-    }
-  </style>
-  <!-- Book body -->
-  <path class="book" d="M4 7 C4 7 8 5 16 6 C24 5 28 7 28 7 L28 26 C28 26 24 24 16 25 C8 24 4 26 4 26 Z" stroke-width="0.5"/>
-  <!-- Book spine -->
-  <line class="spine" x1="16" y1="6" x2="16" y2="25" stroke-width="0.8"/>
-  <!-- Left page lines -->
-  <line class="lines" x1="7" y1="11" x2="14" y2="10.5" stroke-width="0.6" stroke-linecap="round"/>
-  <line class="lines" x1="7" y1="14" x2="14" y2="13.5" stroke-width="0.6" stroke-linecap="round"/>
-  <line class="lines" x1="7" y1="17" x2="14" y2="16.5" stroke-width="0.6" stroke-linecap="round"/>
-  <line class="lines" x1="7" y1="20" x2="12" y2="19.5" stroke-width="0.6" stroke-linecap="round"/>
-  <!-- Right page lines -->
-  <line class="lines" x1="18" y1="10.5" x2="25" y2="11" stroke-width="0.6" stroke-linecap="round"/>
-  <line class="lines" x1="18" y1="13.5" x2="25" y2="14" stroke-width="0.6" stroke-linecap="round"/>
-  <line class="lines" x1="18" y1="16.5" x2="25" y2="17" stroke-width="0.6" stroke-linecap="round"/>
-  <!-- Magic spark -->
-  <g transform="translate(24, 5)">
-    <path d="M0 -4 L1 -1 L4 0 L1 1 L0 4 L-1 1 L-4 0 L-1 -1 Z" fill="#f6ad55"/>
-    <path d="M0 -2.5 L0.6 -0.6 L2.5 0 L0.6 0.6 L0 2.5 L-0.6 0.6 L-2.5 0 L-0.6 -0.6 Z" fill="#fbd38d"/>
-  </g>
-  <!-- Secondary sparkles -->
-  <circle cx="20" cy="3" r="0.7" fill="#f6ad55" opacity="0.7"/>
-  <circle cx="27" cy="8" r="0.5" fill="#fbd38d" opacity="0.6"/>
+  <!-- page block, seen at the fore-edge -->
+  <path d="M8.5 4.5 H25.5 Q27 4.5 27 6 V27 Q27 28.5 25.5 28.5 H8.5 Z" fill="#E9DFC6"/>
+  <path d="M25 7 V26.5" stroke="#C9BB97" stroke-width="0.6"/>
+  <!-- cover -->
+  <path d="M5 4 Q5 3 6 3 H24 Q25.5 3 25.5 4.5 V26.5 Q25.5 28 24 28 H6 Q5 28 5 27 Z" fill="#5B4A8A"/>
+  <!-- spine band -->
+  <rect x="5" y="3" width="3.2" height="25" rx="0.6" fill="#47396E"/>
+  <!-- corner fittings -->
+  <path d="M21.5 3 H24 Q25.5 3 25.5 4.5 V7 Z" fill="#D4A94E"/>
+  <path d="M21.5 28 H24 Q25.5 28 25.5 26.5 V24 Z" fill="#D4A94E"/>
+  <!-- clasp across the fore-edge -->
+  <rect x="22.5" y="14" width="5.5" height="3.6" rx="0.8" fill="#D4A94E"/>
+  <circle cx="26.4" cy="15.8" r="0.7" fill="#8A6A22"/>
+  <!-- sigil: a four-pointed star in a ring -->
+  <circle cx="15.5" cy="15.5" r="5.2" fill="none" stroke="#D4A94E" stroke-width="0.9"/>
+  <path d="M15.5 11.4 L16.5 14.5 L19.6 15.5 L16.5 16.5 L15.5 19.6 L14.5 16.5 L11.4 15.5 L14.5 14.5 Z" fill="#F1D48A"/>
 </svg>

frontend/public/manifest.json

@@ -1,17 +1,27 @@
 {
   "name": "Fabled Grimoire",
   "short_name": "Grimoire",
-  "description": "Your self-hosted second brain with AI assistance",
+  "description": "A self-hosted work system-of-record for software projects, built to be driven by Claude Code.",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#1a1a2e",
-  "theme_color": "#6c63ff",
+  "background_color": "#14171A",
+  "theme_color": "#14171A",
   "orientation": "portrait-primary",
   "icons": [
     {
-      "src": "/favicon.ico",
+      "src": "/favicon.svg",
       "sizes": "any",
-      "type": "image/x-icon"
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
   ]
 }