diff --git a/docs/superpowers/plans/2026-03-26-logo-implementation.md b/docs/superpowers/plans/2026-03-26-logo-implementation.md
new file mode 100644
index 00000000..cbe0d385
--- /dev/null
+++ b/docs/superpowers/plans/2026-03-26-logo-implementation.md
@@ -0,0 +1,336 @@
+# Logo Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add the faceted gem logo as the default brand mark across the web app, docs site, and all meta assets (favicon, PWA icons, social preview).
+
+**Architecture:** Create SVG logo assets in `apps/web/public/`, wire them into `index.html` as favicon/meta, display the gem icon in the app header/sidebar as the default (before any custom logo is uploaded), and add logo + favicon config to the VitePress docs site.
+
+**Tech Stack:** SVG (hand-authored), Vite static assets, HTML meta tags, VitePress config
+
+---
+
+### Task 1: Create the SVG logo assets
+
+**Files:**
+- Create: `apps/web/public/logo-icon.svg`
+- Create: `apps/web/public/favicon.svg`
+- Create: `apps/web/public/logo.svg`
+
+- [ ] **Step 1: Create `apps/web/public/` directory**
+
+```bash
+mkdir -p apps/web/public
+```
+
+- [ ] **Step 2: Create `apps/web/public/logo-icon.svg` — full-detail gem icon**
+
+```svg
+
+```
+
+- [ ] **Step 3: Create `apps/web/public/favicon.svg` — simplified gem for small sizes (no outline, no girdle)**
+
+```svg
+
+```
+
+- [ ] **Step 4: Create `apps/web/public/logo.svg` — full combination mark (icon + wordmark)**
+
+```svg
+
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/web/public/logo-icon.svg apps/web/public/favicon.svg apps/web/public/logo.svg
+git commit -m "feat(branding): add faceted gem SVG logo assets"
+```
+
+---
+
+### Task 2: Wire favicon and meta tags into index.html
+
+**Files:**
+- Modify: `apps/web/index.html`
+
+- [ ] **Step 1: Add favicon and Open Graph meta tags to `apps/web/index.html`**
+
+Replace the current `` content with:
+
+```html
+
+
+
+
+
+ Stirling Image
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+- [ ] **Step 2: Verify favicon loads in dev**
+
+```bash
+pnpm dev
+```
+
+Open http://localhost:1349 in a browser. The browser tab should show the blue gem favicon.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/web/index.html
+git commit -m "feat(branding): add favicon and meta tags to index.html"
+```
+
+---
+
+### Task 3: Display gem icon as default logo in app header
+
+**Files:**
+- Modify: `apps/web/src/components/layout/app-layout.tsx`
+
+The current code shows the text "Stirling Image" when no custom logo is uploaded. Replace it with the gem SVG icon + text.
+
+- [ ] **Step 1: Create an inline GemLogo component at the top of `app-layout.tsx`**
+
+Add this after the existing imports (before the `AppLayoutProps` interface):
+
+```tsx
+function GemLogo({ className = "h-6 w-6" }: { className?: string }) {
+ return (
+
+ );
+}
+```
+
+Note: Uses `currentColor` so it inherits the text-primary blue color from Tailwind.
+
+- [ ] **Step 2: Replace the text-only fallback in the mobile sidebar header (around line 59-62)**
+
+Replace:
+```tsx
+
+ Stirling Image
+
+```
+
+With:
+```tsx
+
+
+
+ Stirling Image
+
+
+```
+
+- [ ] **Step 3: Replace the text-only fallback in the mobile top bar (around line 104-107)**
+
+Replace the same text-only span with the same icon + text pattern:
+
+```tsx
+
+
+
+ Stirling Image
+
+
+```
+
+- [ ] **Step 4: Verify in dev**
+
+```bash
+pnpm dev
+```
+
+Open http://localhost:1349. The gem icon should appear next to "Stirling Image" in both mobile and desktop views. Test both light and dark mode — the icon should inherit the blue primary color.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/web/src/components/layout/app-layout.tsx
+git commit -m "feat(branding): show gem icon in app header as default logo"
+```
+
+---
+
+### Task 4: Add logo and favicon to VitePress docs site
+
+**Files:**
+- Create: `apps/docs/public/favicon.svg`
+- Modify: `apps/docs/.vitepress/config.mts`
+
+- [ ] **Step 1: Create `apps/docs/public/` directory and copy the favicon**
+
+```bash
+mkdir -p apps/docs/public
+cp apps/web/public/favicon.svg apps/docs/public/favicon.svg
+```
+
+- [ ] **Step 2: Add favicon `head` entry and logo to `apps/docs/.vitepress/config.mts`**
+
+Replace the existing `head` array:
+
+```ts
+head: [
+ ["meta", { name: "theme-color", content: "#3b82f6" }],
+ ["link", { rel: "icon", type: "image/svg+xml", href: "/Stirling-Image/favicon.svg" }],
+],
+```
+
+Note: The `href` includes the base path `/Stirling-Image/` because VitePress is deployed to GitHub Pages with that base.
+
+- [ ] **Step 3: Verify docs site in dev**
+
+```bash
+cd apps/docs && npx vitepress dev
+```
+
+Open the docs site in a browser. The tab should show the gem favicon.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/docs/public/favicon.svg apps/docs/.vitepress/config.mts
+git commit -m "feat(docs): add gem favicon to VitePress site"
+```
+
+---
+
+### Task 5: Generate PNG assets for PWA and social preview
+
+**Files:**
+- Create: `apps/web/public/logo-192.png`
+- Create: `apps/web/public/logo-512.png`
+- Modify: `apps/web/index.html` (add PWA manifest link)
+- Create: `apps/web/public/manifest.json`
+
+- [ ] **Step 1: Generate PNG icons from the SVG using Sharp**
+
+Create a one-off script and run it:
+
+```bash
+cd /Users/sidd/Desktop/Personal/Projects/Stirling-Image
+node -e "
+const sharp = require('sharp');
+const fs = require('fs');
+const svg = fs.readFileSync('apps/web/public/logo-icon.svg');
+
+Promise.all([
+ sharp(svg).resize(192, 192).png().toFile('apps/web/public/logo-192.png'),
+ sharp(svg).resize(512, 512).png().toFile('apps/web/public/logo-512.png'),
+]).then(() => console.log('PNGs generated'));
+"
+```
+
+If `require` doesn't work (ESM), use:
+
+```bash
+node --input-type=module -e "
+import sharp from 'sharp';
+import { readFileSync } from 'fs';
+const svg = readFileSync('apps/web/public/logo-icon.svg');
+await sharp(svg).resize(192, 192).png().toFile('apps/web/public/logo-192.png');
+await sharp(svg).resize(512, 512).png().toFile('apps/web/public/logo-512.png');
+console.log('PNGs generated');
+"
+```
+
+- [ ] **Step 2: Create `apps/web/public/manifest.json`**
+
+```json
+{
+ "name": "Stirling Image",
+ "short_name": "Stirling Image",
+ "icons": [
+ { "src": "/logo-192.png", "sizes": "192x192", "type": "image/png" },
+ { "src": "/logo-512.png", "sizes": "512x512", "type": "image/png" }
+ ],
+ "theme_color": "#3b82f6",
+ "background_color": "#ffffff",
+ "display": "standalone"
+}
+```
+
+- [ ] **Step 3: Add manifest link to `apps/web/index.html`**
+
+Add after the favicon link in ``:
+
+```html
+
+```
+
+- [ ] **Step 4: Verify PNGs were generated correctly**
+
+```bash
+file apps/web/public/logo-192.png apps/web/public/logo-512.png
+```
+
+Expected: both should report as PNG image data with correct dimensions.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add apps/web/public/logo-192.png apps/web/public/logo-512.png apps/web/public/manifest.json apps/web/index.html
+git commit -m "feat(branding): add PWA manifest and PNG logo assets"
+```