diff --git a/docs/superpowers/plans/2026-04-08-visual-identity-modern-fable.md b/docs/superpowers/plans/2026-04-08-visual-identity-modern-fable.md
new file mode 100644
index 0000000..365601e
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-08-visual-identity-modern-fable.md
@@ -0,0 +1,785 @@
+# Modern Fable Visual Identity — 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:** Replace the generic indigo dark-mode palette with a distinctive "Modern Fable" visual identity — deep violet + muted gold, signature card types, pill nav, Fraunces-as-narrator typography, and living micro-details.
+
+**Architecture:** Pure frontend changes across theme CSS, AppHeader, AppLogo, KnowledgeView, ChatPanel, BriefingView, and CalendarView. No backend changes. Each task is independently deployable — palette first, then cards, then nav, then typography, then details.
+
+**Tech Stack:** Vue 3 SFC (scoped CSS), CSS custom properties, Fraunces font (already loaded).
+
+---
+
+## File Map
+
+| Action | Path |
+|--------|------|
+| Modify | `frontend/src/assets/theme.css` |
+| Modify | `frontend/src/components/AppLogo.vue` |
+| Modify | `frontend/src/components/AppHeader.vue` |
+| Modify | `frontend/src/views/KnowledgeView.vue` |
+| Modify | `frontend/src/components/ChatPanel.vue` |
+| Modify | `frontend/src/views/BriefingView.vue` |
+| Modify | `frontend/src/views/CalendarView.vue` |
+| Modify | `frontend/src/App.vue` |
+
+---
+
+### Task 1: Color palette update + logo + scrollbar
+
+**Files:**
+- Modify: `frontend/src/assets/theme.css`
+- Modify: `frontend/src/components/AppLogo.vue`
+
+- [ ] **Step 1: Update the dark theme palette in theme.css**
+
+In `frontend/src/assets/theme.css`, find the `[data-theme="dark"]` block and replace these values:
+
+```css
+[data-theme="dark"] {
+  --color-bg: #0f0f14;
+  --color-bg-secondary: #16161f;
+  --color-bg-card: #1a1a24;
+  --color-surface: #16161f;
+  --color-text: #e4e4f0;
+  --color-text-secondary: #8888a8;
+  --color-text-muted: #52526a;
+  --color-border: rgba(124, 58, 237, 0.12);
+  --color-input-border: rgba(124, 58, 237, 0.22);
+  --color-primary: #a78bfa;
+  --color-danger: #f44336;
+  --color-tag-bg: #2a2a45;
+  --color-tag-text: #c4b5fd;
+  --color-shadow: rgba(0, 0, 0, 0.4);
+  --color-toast-success: #4caf50;
+  --color-toast-error: #f44336;
+  --color-status-todo: #9aa0a6;
+  --color-status-todo-bg: #2a2a35;
+  --color-status-in-progress: #a78bfa;
+  --color-status-in-progress-bg: #2a2a45;
+  --color-status-done: #4caf50;
+  --color-status-done-bg: #1b3a20;
+  --color-priority-low: #80cbc4;
+  --color-priority-low-bg: #1a3a38;
+  --color-priority-medium: #fdd835;
+  --color-priority-medium-bg: #3a3520;
+  --color-priority-high: #f44336;
+  --color-priority-high-bg: #3a1a1a;
+  --color-wikilink: #c4b5fd;
+  --color-wikilink-bg: #2a1a45;
+  --color-overdue: #f44336;
+  --color-code-bg: #12121a;
+  --color-code-inline-bg: #1a1a2a;
+  --color-table-stripe: #14141e;
+  --color-success: #4ade80;
+  --color-warning: #facc15;
+  --color-input-bar-bg: #1a1a24;
+  --color-input-bar-text: #e4e4f0;
+  --color-input-bar-placeholder: rgba(228, 228, 240, 0.35);
+  --color-overlay: rgba(0, 0, 0, 0.65);
+  --color-bubble-user-bg: rgba(255, 255, 255, 0.04);
+  --color-bubble-user-border: rgba(255, 255, 255, 0.10);
+  --color-bubble-user-text: #b0b0c8;
+  --color-bubble-asst-shadow: 0 4px 28px rgba(124, 58, 237, 0.14), 0 2px 8px rgba(0, 0, 0, 0.4);
+  --color-accent-warm: #d4a017;
+  --color-accent-warm-light: #e8c45a;
+  --color-primary-solid: #7c3aed;
+  --color-primary-deep: #5b21b6;
+}
+```
+
+Note: `--color-accent-warm`, `--color-accent-warm-light`, `--color-primary-solid`, and `--color-primary-deep` are new variables.
+
+- [ ] **Step 2: Update the light theme palette**
+
+In the `:root` block, update these values:
+
+```css
+:root {
+  --color-bg: #f5f5fb;
+  --color-bg-secondary: #ededf5;
+  --color-bg-card: #ffffff;
+  --color-surface: #f0f0f8;
+  --color-text: #1a1a1a;
+  --color-text-secondary: #666666;
+  --color-text-muted: #999999;
+  --color-border: #dddde8;
+  --color-input-border: #c8c8d8;
+  --color-primary: #7c3aed;
+  --color-danger: #d93025;
+  --color-tag-bg: #ede5ff;
+  --color-tag-text: #6d28d9;
+  --color-shadow: rgba(0, 0, 0, 0.08);
+  --color-toast-success: #34a853;
+  --color-toast-error: #d93025;
+  --color-status-todo: #5f6368;
+  --color-status-todo-bg: #e8eaed;
+  --color-status-in-progress: #7c3aed;
+  --color-status-in-progress-bg: #ede5ff;
+  --color-status-done: #34a853;
+  --color-status-done-bg: #e6f4ea;
+  --color-priority-low: #5f9ea0;
+  --color-priority-low-bg: #e0f2f1;
+  --color-priority-medium: #f9a825;
+  --color-priority-medium-bg: #fff8e1;
+  --color-priority-high: #d93025;
+  --color-priority-high-bg: #fce8e6;
+  --color-wikilink: #7b1fa2;
+  --color-wikilink-bg: #f3e5f5;
+  --color-overdue: #d93025;
+  --color-code-bg: #f0f0f8;
+  --color-code-inline-bg: #eaeaf4;
+  --color-table-stripe: #f4f4fb;
+  --color-success: #22c55e;
+  --color-warning: #eab308;
+  --color-input-bar-bg: #eaeaf3;
+  --color-input-bar-text: #1a1a1a;
+  --color-input-bar-placeholder: rgba(0, 0, 0, 0.4);
+  --color-overlay: rgba(0, 0, 0, 0.45);
+  --color-bubble-user-bg: rgba(0, 0, 0, 0.04);
+  --color-bubble-user-border: rgba(0, 0, 0, 0.10);
+  --color-bubble-user-text: #3a3a4a;
+  --color-bubble-asst-shadow: 0 2px 16px rgba(124, 58, 237, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
+  --radius-sm: 6px;
+  --radius-md: 12px;
+  --radius-lg: 18px;
+  --radius-pill: 9999px;
+  --focus-ring: 0 0 0 2px rgba(124, 58, 237, 0.4);
+  /* Layout */
+  --page-max-width: 1200px;
+  --page-padding-x: 1rem;
+  --sidebar-width: 260px;
+  /* New brand variables */
+  --color-accent-warm: #b8860b;
+  --color-accent-warm-light: #d4a017;
+  --color-primary-solid: #7c3aed;
+  --color-primary-deep: #5b21b6;
+}
+```
+
+- [ ] **Step 3: Update scrollbar color**
+
+Find:
+```css
+::-webkit-scrollbar-thumb {
+  background: rgba(99, 102, 241, 0.25);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(99, 102, 241, 0.45);
+}
+```
+
+Replace with:
+```css
+::-webkit-scrollbar-thumb {
+  background: rgba(124, 58, 237, 0.25);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(124, 58, 237, 0.45);
+}
+```
+
+- [ ] **Step 4: Update focus ring**
+
+Find:
+```css
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
+```
+
+Replace with:
+```css
+  --focus-ring: 0 0 0 2px rgba(124, 58, 237, 0.4);
+```
+
+- [ ] **Step 5: Update AppLogo gradient**
+
+In `frontend/src/components/AppLogo.vue`, the logo uses `var(--color-primary)` which will automatically pick up the new violet value. No code change needed — the CSS variable update handles it.
+
+However, add a gradient `<defs>` for the book fill to use the deep gradient instead of a flat color. Find the `<style scoped>` block:
+
+```css
+.logo-book {
+  fill: var(--color-primary);
+  stroke: color-mix(in srgb, var(--color-primary) 70%, transparent);
+}
+```
+
+Replace with:
+```css
+.logo-book {
+  fill: url(#logo-gradient);
+  stroke: color-mix(in srgb, var(--color-primary) 70%, transparent);
+}
+```
+
+And add a gradient definition inside the `<svg>` element, before the `<!-- Book body -->` comment:
+
+```html
+    <defs>
+      <linearGradient id="logo-gradient" x1="0" y1="0" x2="1" y2="1">
+        <stop offset="0%" stop-color="var(--color-primary-solid)" />
+        <stop offset="100%" stop-color="var(--color-primary-deep)" />
+      </linearGradient>
+    </defs>
+```
+
+- [ ] **Step 6: Verify TypeScript compiles**
+
+```bash
+cd frontend && npx tsc --noEmit
+```
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add frontend/src/assets/theme.css frontend/src/components/AppLogo.vue
+git commit -m "feat(theme): shift palette from indigo to deep violet + muted gold"
+```
+
+---
+
+### Task 2: Signature header — pill nav + brand shortening + status pulse
+
+**Files:**
+- Modify: `frontend/src/components/AppHeader.vue`
+
+- [ ] **Step 1: Update brand text in header**
+
+Find:
+```html
+        Fabled Assistant
+```
+
+Replace with:
+```html
+        <span class="brand-text">Fabled</span>
+```
+
+- [ ] **Step 2: Wrap nav-center links in a pill container**
+
+Find the `nav-center` div:
+```html
+      <div class="nav-center">
+        <router-link to="/" class="nav-link" :class="{ 'router-link-active': isKnowledgeActive }">Knowledge</router-link>
+        <router-link to="/chat" :class="['nav-link', { 'router-link-active': isChatActive }]">Chat</router-link>
+        <router-link to="/briefing" class="nav-link">Briefing</router-link>
+        <router-link to="/calendar" class="nav-link">Calendar</router-link>
+        <router-link to="/news" class="nav-link">News</router-link>
+        <router-link to="/projects" class="nav-link">Projects</router-link>
+      </div>
+```
+
+Replace with:
+```html
+      <div class="nav-center">
+        <div class="nav-pill-bar">
+          <router-link to="/" class="nav-link" :class="{ 'router-link-active': isKnowledgeActive }">Knowledge</router-link>
+          <router-link to="/chat" :class="['nav-link', { 'router-link-active': isChatActive }]">Chat</router-link>
+          <router-link to="/briefing" class="nav-link">Briefing</router-link>
+          <router-link to="/calendar" class="nav-link">Calendar</router-link>
+          <router-link to="/news" class="nav-link">News</router-link>
+          <router-link to="/projects" class="nav-link">Projects</router-link>
+        </div>
+      </div>
+```
+
+- [ ] **Step 3: Replace header and nav CSS**
+
+Replace the entire `<style scoped>` from `.app-header` through `.nav-link.router-link-active` with:
+
+```css
+.app-header {
+  background: linear-gradient(180deg, var(--color-surface), var(--color-bg));
+  border-bottom: 1px solid rgba(124, 58, 237, 0.08);
+  position: relative;
+}
+.nav {
+  padding: 0.6rem 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+/* Left — brand */
+.nav-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  text-decoration: none;
+  flex-shrink: 0;
+}
+.brand-text {
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  font-optical-sizing: auto;
+  font-weight: 600;
+  font-size: 1rem;
+  letter-spacing: -0.01em;
+  color: #c4b0f0;
+}
+
+/* Center — pill bar */
+.nav-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+}
+.nav-pill-bar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: rgba(124, 58, 237, 0.06);
+  border-radius: 10px;
+  padding: 3px;
+}
+
+/* Right */
+.nav-right {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.nav-link {
+  color: var(--color-text-muted);
+  text-decoration: none;
+  font-size: 0.82rem;
+  padding: 0.3rem 0.75rem;
+  border-radius: 8px;
+  transition: background 0.15s, color 0.15s;
+}
+.nav-link:hover {
+  color: var(--color-text-secondary);
+  background: rgba(124, 58, 237, 0.08);
+}
+.nav-link.router-link-active {
+  color: #c4b5fd;
+  font-weight: 600;
+  background: rgba(124, 58, 237, 0.2);
+  box-shadow: 0 0 12px rgba(124, 58, 237, 0.2);
+}
+```
+
+- [ ] **Step 4: Add status dot pulse animation for loaded state**
+
+Find:
+```css
+.status-green .status-dot  { background: var(--color-success, #2ecc71); }
+```
+
+Replace with:
+```css
+.status-green .status-dot  { background: var(--color-success, #2ecc71); animation: status-pulse 2.5s ease-in-out infinite; }
+```
+
+Find:
+```css
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+```
+
+Add after it:
+```css
+@keyframes status-pulse {
+  0%, 100% { box-shadow: 0 0 4px rgba(74, 222, 128, 0.4); }
+  50% { box-shadow: 0 0 10px rgba(74, 222, 128, 0.6); }
+}
+```
+
+- [ ] **Step 5: Update mobile menu active styling**
+
+Find:
+```css
+  .mobile-menu .nav-link {
+    padding: 0.5rem 0.75rem;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+  }
+```
+
+Replace with:
+```css
+  .mobile-menu .nav-link {
+    padding: 0.5rem 0.75rem;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+  }
+  .mobile-menu .nav-link.router-link-active {
+    background: rgba(124, 58, 237, 0.15);
+    box-shadow: none;
+  }
+```
+
+- [ ] **Step 6: Verify TypeScript compiles**
+
+```bash
+cd frontend && npx tsc --noEmit
+```
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add frontend/src/components/AppHeader.vue
+git commit -m "feat(header): pill nav bar, brand shortening, status pulse, header gradient"
+```
+
+---
+
+### Task 3: Card type DNA — gradient bars, corner accents, hover bloom
+
+**Files:**
+- Modify: `frontend/src/views/KnowledgeView.vue`
+
+**Context:** The cards currently have a left accent strip per type. The new design replaces this with top gradient bars (notes, tasks, lists) and corner accents (person, place), plus a unified violet hover bloom.
+
+- [ ] **Step 1: Replace card accent strips with type-specific top bars and borders**
+
+Find in the `<style scoped>`:
+```css
+/* Type accent strip */
+.k-card--person { border-left: 3px solid #10b981; }
+.k-card--place  { border-left: 3px solid #f59e0b; }
+.k-card--list   { border-left: 3px solid #38bdf8; }
+.k-card--note   { border-left: 3px solid #6366f1; }
+.k-card--task   { border-left: 3px solid #a78bfa; }
+```
+
+Replace with:
+```css
+/* Type-specific card DNA */
+.k-card--note   { border-color: rgba(124, 58, 237, 0.12); }
+.k-card--task   { border-color: rgba(212, 160, 23, 0.10); }
+.k-card--person { border-color: rgba(16, 185, 129, 0.10); }
+.k-card--place  { border-color: rgba(245, 158, 11, 0.10); }
+.k-card--list   { border-color: rgba(56, 189, 248, 0.10); }
+
+/* Top gradient bars */
+.k-card--note::before,
+.k-card--task::before,
+.k-card--list::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 3px;
+  border-radius: 14px 14px 0 0;
+}
+.k-card--note::before {
+  right: 0;
+  background: linear-gradient(90deg, #7c3aed, #a78bfa);
+}
+.k-card--task::before {
+  width: 50%;
+  background: linear-gradient(90deg, #d4a017, transparent);
+}
+.k-card--list::before {
+  right: 0;
+  background: linear-gradient(90deg, #38bdf8, #7dd3fc);
+}
+
+/* Corner accents for entity types */
+.k-card--person::after,
+.k-card--place::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 60px;
+  height: 60px;
+  border-radius: 0 14px 0 60px;
+  pointer-events: none;
+}
+.k-card--person::after { background: rgba(16, 185, 129, 0.06); }
+.k-card--place::after  { background: rgba(245, 158, 11, 0.06); }
+```
+
+- [ ] **Step 2: Update card hover to violet bloom**
+
+Find:
+```css
+.k-card:hover {
+  border-color: rgba(255,255,255,0.14);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+}
+```
+
+Replace with:
+```css
+.k-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15), 0 2px 8px rgba(0, 0, 0, 0.3);
+  border-color: rgba(124, 58, 237, 0.2);
+}
+```
+
+- [ ] **Step 3: Add sidebar section dividers**
+
+Find:
+```css
+.filter-section { margin-bottom: 20px; }
+```
+
+Replace with:
+```css
+.filter-section { margin-bottom: 20px; }
+.filter-section + .filter-section::before {
+  content: '· · ·';
+  display: block;
+  text-align: center;
+  color: rgba(124, 58, 237, 0.3);
+  font-size: 0.9rem;
+  letter-spacing: 0.4em;
+  padding: 4px 0 12px;
+}
+```
+
+- [ ] **Step 4: Add scroll fade to card grid**
+
+Find:
+```css
+.card-grid {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+```
+
+Replace with:
+```css
+.card-grid {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+  mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
+  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
+```
+
+- [ ] **Step 5: Update task card dates to use amber**
+
+Find in the task card CSS:
+```css
+.task-due {
+  font-size: 0.78rem;
+  color: var(--color-text-muted);
+}
+```
+
+Replace with:
+```css
+.task-due {
+  font-size: 0.78rem;
+  color: var(--color-accent-warm);
+}
+```
+
+- [ ] **Step 6: Add Fraunces view title and update sidebar labels**
+
+Find the filter panel label CSS:
+```css
+.filter-label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-muted);
+  margin-bottom: 6px;
+  padding: 0 4px;
+}
+```
+
+Replace with:
+```css
+.filter-label {
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
+  color: var(--color-primary);
+  margin-bottom: 6px;
+  padding: 0 4px;
+}
+```
+
+- [ ] **Step 7: Update empty state with Fraunces narrator voice**
+
+Find:
+```html
+        <div v-else-if="!loading && items.length === 0" class="knowledge-empty">
+          <p>Nothing here yet.</p>
+          <p v-if="activeType || activeTag || searchQuery" class="empty-hint">Try clearing the filters.</p>
+          <p v-else class="empty-hint">Start by creating a note, saving a person or place, or making a list.</p>
+        </div>
+```
+
+Replace with:
+```html
+        <div v-else-if="!loading && items.length === 0" class="knowledge-empty">
+          <p v-if="activeType || activeTag || searchQuery" class="empty-hint">No matches. Try clearing the filters.</p>
+          <p v-else class="empty-narrator">Your story is unwritten. Create your first note to begin.</p>
+        </div>
+```
+
+Add CSS:
+```css
+.empty-narrator {
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  font-size: 1rem;
+  color: var(--color-accent-warm);
+  opacity: 0.85;
+}
+```
+
+- [ ] **Step 8: Update card date stamps to amber**
+
+Find:
+```css
+.k-card-date { font-size: 0.72rem; color: var(--color-muted); white-space: nowrap; }
+```
+
+Replace with:
+```css
+.k-card-date { font-size: 0.72rem; color: var(--color-accent-warm); white-space: nowrap; opacity: 0.7; }
+```
+
+- [ ] **Step 9: Verify TypeScript compiles**
+
+```bash
+cd frontend && npx tsc --noEmit
+```
+
+- [ ] **Step 10: Commit**
+
+```bash
+git add frontend/src/views/KnowledgeView.vue
+git commit -m "feat(knowledge): card type DNA, violet hover bloom, amber timestamps, narrator empty states"
+```
+
+---
+
+### Task 4: ChatPanel + BriefingView + CalendarView — empty states + glow buttons
+
+**Files:**
+- Modify: `frontend/src/components/ChatPanel.vue`
+- Modify: `frontend/src/views/BriefingView.vue`
+- Modify: `frontend/src/views/CalendarView.vue`
+- Modify: `frontend/src/App.vue`
+
+- [ ] **Step 1: Update ChatPanel empty state**
+
+In `frontend/src/components/ChatPanel.vue`, find:
+```html
+          >Send a message to start the conversation.</p>
+```
+
+Replace with:
+```html
+          >Start a conversation.</p>
+```
+
+Find the `.empty-msg` CSS:
+```css
+.empty-msg {
+```
+
+Add these properties (find the existing block and add to it):
+```css
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  color: var(--color-accent-warm, #d4a017);
+```
+
+- [ ] **Step 2: Add scroll fade to ChatPanel messages**
+
+Find the `.messages-container` CSS in ChatPanel.vue. Add:
+```css
+  mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
+  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
+```
+
+- [ ] **Step 3: Update CalendarView empty state**
+
+In `frontend/src/views/CalendarView.vue`, find:
+```html
+      return ListView(
+        children: const [
+          SizedBox(height: 80),
+          Center(child: Text('No events')),
+        ],
+      );
+```
+
+Wait — that's the Flutter file. In the web CalendarView, there's no dedicated empty state text to update since it's a FullCalendar component. Skip this for the web CalendarView — it doesn't have a custom empty state.
+
+- [ ] **Step 4: Add glow to primary action buttons in App.vue global styles**
+
+In `frontend/src/App.vue`, find the `<style>` block (the global unscoped one). The `btn-send` styles are in `ChatInputBar.vue` which is scoped. Instead, add a global hover glow rule. Find the existing `.app-footer` style and add after it:
+
+No — the glow should be on the specific button components. The `btn-send` in `ChatInputBar.vue` already has a hover shadow. Let me update it there.
+
+In `frontend/src/components/ChatInputBar.vue`, find:
+```css
+.btn-send:hover { box-shadow: 0 0 12px rgba(99, 102, 241, 0.5); }
+```
+
+Replace with:
+```css
+.btn-send:hover { box-shadow: 0 0 16px rgba(124, 58, 237, 0.35); }
+```
+
+- [ ] **Step 5: Update KnowledgeView new-note button glow**
+
+In `frontend/src/views/KnowledgeView.vue`, find:
+```css
+.btn-new-note:hover { background: rgba(99, 102, 241, 0.2); }
+```
+
+Replace with:
+```css
+.btn-new-note:hover { background: rgba(124, 58, 237, 0.2); box-shadow: 0 0 12px rgba(124, 58, 237, 0.25); }
+```
+
+- [ ] **Step 6: Update any remaining hardcoded indigo references in KnowledgeView**
+
+Search for `99, 102, 241` in KnowledgeView.vue and replace with `124, 58, 237`. This covers all the rgba references in filter buttons, borders, today bar chips, etc.
+
+Use find-and-replace across the file: `99, 102, 241` → `124, 58, 237`
+
+- [ ] **Step 7: Update hardcoded indigo in BriefingView**
+
+Search for `99, 102, 241` in BriefingView.vue and replace with `124, 58, 237`.
+
+Search for `6366f1` in BriefingView.vue and replace with `7c3aed`.
+
+- [ ] **Step 8: Update hardcoded indigo in AppHeader**
+
+Search for `99, 102, 241` in AppHeader.vue and replace with `124, 58, 237` (for any remaining references not covered by Task 2).
+
+- [ ] **Step 9: Update hardcoded indigo in App.vue shortcuts overlay**
+
+Search for `99, 102, 241` in App.vue and replace with `124, 58, 237`.
+
+Search for `6366f1` in App.vue and replace with `7c3aed`.
+
+- [ ] **Step 10: Verify TypeScript compiles**
+
+```bash
+cd frontend && npx tsc --noEmit
+```
+
+- [ ] **Step 11: Commit**
+
+```bash
+git add frontend/src/components/ChatPanel.vue frontend/src/components/ChatInputBar.vue \
+  frontend/src/views/KnowledgeView.vue frontend/src/views/BriefingView.vue \
+  frontend/src/components/AppHeader.vue frontend/src/App.vue
+git commit -m "feat: narrator empty states, scroll fades, glow buttons, violet color sweep"
+```