# Logo refresh + extension palette shift — design

**Date:** 2026-04-24
**Scope:** Replace the existing arched-niche-with-blue-gem logo with a reliquary-faithful round chapel theca, and shift the extension's primary accent from GitHub-blue to a burnished gold that matches the new logo. Backgrounds and CLI feel preserved.

## Goal

The current logo reads as "modern shrine with a blue diamond" — visually correct in concept (a vessel that holds something precious) but blue-techy enough that the project's name (*Relicario* — Spanish/Italian for *reliquary*) no longer comes through. The user wants more catholic-reliquary authenticity (gold, deep red, decorative finial) without the cross — closer to the user-supplied references of round-chapel theca reliquaries.

The popup currently uses GitHub's dark-blue accent palette throughout. Once the logo shifts to gold, leaving the popup's blue accents in place would create visual whiplash between the toolbar icon and the popup body. The palette shift converts blue → gold and tunes the danger red toward the logo's theca tone, while keeping the dark backgrounds, monospace-ish text, and CLI restraint that define the project's voice.

## Visual identity

### Silhouette

Round chapel-style theca with a fleur-de-lis finial and a compact pedestal. Inspired by user-supplied references of monstrance-style theca reliquaries (round display window in a gold ring, on a small turned base). No cross — the catholic visual vocabulary is preserved through the fleur-de-lis, the deep-red theca, and the burnished gold body.

Composition (master, 220 × 240 viewBox):

- **Pedestal** — y=202 to y=230 (28 units total, ~60% of the original draft):
  - Stem cap: ellipse (cx=110, cy=202, rx=18, ry=4)
  - Stem column: rect (x=98, y=202, w=24, h=12) with a darker knurl ring mid-stem (`ellipse cx=110 cy=208 rx=14 ry=3`)
  - Base plate: rect (x=78, y=212, w=64, h=14, rx=2)
  - Foot ring: ellipse (cx=110, cy=226, rx=44, ry=5)
- **Body** — circle (cx=110, cy=130, r=72) in gold; inner bezel ring (r=60) in deep gold; deep-red theca (r=56) with radial gradient
  - Subtle upper-left bevel highlight: arc-stroke at top-left of body
  - Soft glass glint on the theca: white ellipse @ 14% opacity, rotated −30°
- **Asterisk gem** (the "relic" inside the theca):
  - 6 arms at 60° increments
  - Each arm: lozenge (base width 8, slight bulge mid-arm, pointed tip at 36 from center)
  - **Pinwheel facet split** — every arm is bright (`#f5d97a`) on the CCW side, dark (`#8a5e1c`) on the CW side
  - Center hex facet (mid gold) + sparkle dot (off-white) for that "cut gem" read
- **Hinge collar** — small rect (x=98, y=50, w=24, h=10, rx=2) with a horizontal accent line, where the body meets the fleur
- **Fleur-de-lis** (rooted into the hinge collar, occupies y=−16 to y=50):
  - Thicker stem (7 wide, 12 tall)
  - Tie-band: rect 32 × 7, with a darker knot rectangle in the middle
  - Center petal: tall teardrop with an inner shadow line and a small pearl at the tip
  - Side petals: S-curve outward with a small dark accent on the outer curl
  - Sized so the fleur is ~35% the body's diameter — present but doesn't dominate

### 16 px treatment (favicon)

Pedestal is dropped entirely — it would compress to 1–2 pixels of indistinct gold noise. The 16 px form is the bare medallion: round body + fleur on top.

ViewBox 16 × 16:

- Body: circle (cx=8, cy=9, r=6.5) gold; inner red theca (r=4.8)
- Gem: three crossing 1.2 px lines (vertical + two diagonals) in bright gold + a 0.7 px sparkle dot — reads as `*` at all zoom levels
- Fleur: three triangular tips above the body (center peak at y=0, side wings peaking at y=1, all bases on y=2.5)

### Palette

Backgrounds and text colors are unchanged from the existing GitHub-dark base — preserves the CLI feel.

| Use | Old | New |
|-----|-----|-----|
| Logo gold (bright) | n/a | `#d2ab43` |
| Logo gold (mid) | n/a | `#aa812a` |
| Logo gold (deep) | n/a | `#7c5719` |
| Logo gold (highlight) | n/a | `#f5d97a` |
| Logo gold (shadow) | n/a | `#8a5e1c` |
| Logo red (theca bright) | n/a | `#9a1a1a` |
| Logo red (theca shadow) | n/a | `#3a0a0a` |
| **Primary button bg** | `#1f6feb` | `#7c5719` |
| **Primary button hover** | `#388bfd` | `#aa812a` |
| **Primary text / link** | `#58a6ff` | `#d2ab43` |
| **Focus ring / outline** | `#58a6ff` (often @ 30%) | `#aa812a` (@ 40%) |
| **Selected row tint** | `rgba(88,166,255,0.12)` | `rgba(170,129,42,0.11)` |
| **Selected row left-border** | `#58a6ff` / `#1f6feb` | `#aa812a` |
| **Danger fg** | `#f85149` | `#ab2b20` |
| **Danger emphasis bg** | `#da3633` | `#791111` |
| **Sig-block --blue** | `#1f6feb` | `#aa812a` (renamed `--gold`) |
| **TOTP ring stroke** | `#58a6ff` | `#d2ab43` |
| **Backgrounds** | `#0d1117` / `#161b22` / `#21262d` / `#30363d` | unchanged |
| **Text fg / muted / dim** | `#c9d1d9` / `#8b949e` / `#6e7681` | unchanged |
| **Status success** | `#3fb950` | unchanged |
| **Status warning** | `#d29922` | unchanged |

The B/C midpoint gold ramp comes from RGB midpoints between two earlier candidate palettes (a "burnished" 10%-darker variant and an "antique" 20%-darker variant).

## Files affected

### New / replaced asset files

- **`extension/icons/relicario-logo.svg`** — replace entirely with the new master (220 × 240 viewBox, gold/red).
- **`extension/icons/relicario-logo-16.svg`** — replace entirely with the bare-medallion 16 px version (16 × 16 viewBox).
- **`extension/icons/icon-16.png`** — regenerate from `relicario-logo-16.svg` via ImageMagick.
- **`extension/icons/icon-48.png`** — regenerate from `relicario-logo.svg` (the master) at 48 × 48.
- **`extension/icons/icon-128.png`** — regenerate from `relicario-logo.svg` at 128 × 128.

### Code files touching colors

- **`extension/src/popup/styles.css`** — bulk find-and-replace of the blue/red hex values per the table above. ~20 hits.
- **`extension/src/popup/components/types/login.ts`** — line 50: link color `#58a6ff` → `#d2ab43`.
- **`extension/src/popup/components/types/totp.ts`** — line 60: TOTP ring stroke `#58a6ff` → `#d2ab43`.
- **`extension/src/popup/components/generator-popover.ts`** — line 283: validation error color `#f85149` → `#ab2b20`.
- **`extension/src/popup/components/settings.ts`** — lines 28, 52, 53: blacklist-remove `#f85149` → `#ab2b20`; bar/toast active state `#1f6feb` → `#7c5719`.
- **`extension/src/content/capture.ts`** — lines 184, 195: hostname text `#58a6ff` → `#d2ab43`; save button bg `#1f6feb` → `#7c5719`.
- **`extension/src/content/icon.ts`** — lines 73, 203: ack-prompt button bg `#1f6feb` → `#7c5719`; title color `#58a6ff` → `#d2ab43`.
- **`extension/setup.html`** — strength-bar very-weak `#f85149` → `#ab2b20`; advice block left-border `#1f6feb` → `#aa812a`; match/test result fail `#f85149` → `#ab2b20`. (Strength bar's other gradient stops should be re-tuned to match — e.g., weak/medium/strong should still progress visually.)

### Test files

No new tests required — palette + logo are visual changes. Existing 124 Vitest + 155 Rust tests should remain green throughout (the changes are CSS hex strings + SVG markup; no behavior changes).

## Acceptance

- [ ] `extension/icons/relicario-logo.svg` matches the master design (gold body, red theca, asterisk gem with pinwheel facets, fleur-de-lis finial, compact pedestal).
- [ ] `extension/icons/relicario-logo-16.svg` matches the bare-medallion 16 px design (no pedestal).
- [ ] `extension/icons/icon-16.png`, `icon-48.png`, `icon-128.png` regenerated from the SVGs and visually correct at the toolbar.
- [ ] `git grep -nE '#(58a6ff|1f6feb|388bfd|f85149|da3633)' extension/` returns zero hits in `src/` and `setup.html` (it can still appear in `node_modules/`, `dist/`, `dist-firefox/` — those don't matter).
- [ ] `bun run build:all` passes for both Chrome and Firefox bundles.
- [ ] `bun run test` passes (124/124).
- [ ] `cargo test --workspace` passes (155/155).
- [ ] Manual smoke check: load `extension/dist/` in Chrome → toolbar icon shows the new logo → open popup → primary buttons (`+ New`, `autofill`, `save`) are gold-bg → focus rings on inputs are gold → selected list row has gold left-border + tint → danger buttons (trash, delete) are theca-red → TOTP countdown ring is gold.

## Out of scope

- The capture-prompt and ack-prompt content-script DOM (closed Shadow DOM): inline colors get updated, but no layout/UX changes.
- New icon sizes (256, 512, etc.). Current set is 16/48/128, matching `manifest.json`.
- Rendering paths that already use gold-friendly colors (success green, warning yellow). Those stay.
- Logo sizes for App Store / web favicon / social cards. None of those exist yet for this project; defer.

## Open questions deferred to plan

- **Setup-page strength bar color ramp:** β₀ used `#f85149 → #d29922 → #3fb950` for very-weak → medium → strong. The danger red is now `#ab2b20`; do we keep the warning yellow / success green unchanged for the gradient (mixed-temperature ramp), or also shift them toward the warmer family (e.g. amber instead of yellow)? Plan defaults to keeping yellow/green untouched — the bar's role is functional accessibility, and the universal red→yellow→green semantics are stronger than aesthetic coherence.
- **Sig-block class rename:** existing CSS classes are `sig-block--blue`, `sig-block--red`. After the swap, `--blue` no longer matches the rendered color. Plan options: (a) keep names, accept the mismatch (zero risk, semantically wrong), (b) rename to `--gold` / `--red` (touches all consumers — cheap to do and worth doing). Plan ships (b).
- **PNG regeneration tool:** project memory specifies ImageMagick (`magick`) over `rsvg-convert`. Plan will use `magick -background none -density 384 input.svg -resize 128x128 output.png` (and 48, 16) per memory.
- **WAR / CSP:** SVG files are loaded as extension-origin assets, no MV3 web-accessible-resources changes needed. Confirmed by inspecting current manifest (WAR is empty).

## Master SVG (full source)

Embedded for reference — implementation plan will copy this verbatim into `extension/icons/relicario-logo.svg`.

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 240" fill="none">
  <defs>
    <radialGradient id="redTheca" cx="0.4" cy="0.35">
      <stop offset="0%" stop-color="#9a1a1a"/>
      <stop offset="100%" stop-color="#3a0a0a"/>
    </radialGradient>
    <linearGradient id="goldRing" x1="0" x2="1">
      <stop offset="0%" stop-color="#d2ab43"/>
      <stop offset="50%" stop-color="#f5d97a"/>
      <stop offset="100%" stop-color="#7c5719"/>
    </linearGradient>
    <linearGradient id="goldHi" x1="0" x2="1">
      <stop offset="0%" stop-color="#fde9a8"/>
      <stop offset="100%" stop-color="#d2ab43"/>
    </linearGradient>
  </defs>

  <!-- Pedestal (compact) -->
  <ellipse cx="110" cy="226" rx="44" ry="5" fill="url(#goldRing)"/>
  <rect x="78" y="212" width="64" height="14" rx="2" fill="url(#goldRing)"/>
  <rect x="98" y="202" width="24" height="12" fill="url(#goldRing)"/>
  <ellipse cx="110" cy="208" rx="14" ry="3" fill="#7c5719"/>
  <ellipse cx="110" cy="202" rx="18" ry="4" fill="url(#goldRing)"/>

  <!-- Body, bezel, theca -->
  <circle cx="110" cy="130" r="72" fill="url(#goldRing)"/>
  <path d="M 110 58 A 72 72 0 0 0 38 130" stroke="#fde9a8" stroke-width="2" fill="none" opacity="0.6"/>
  <circle cx="110" cy="130" r="60" fill="#7c5719"/>
  <circle cx="110" cy="130" r="56" fill="url(#redTheca)"/>
  <ellipse cx="86" cy="108" rx="16" ry="7" fill="#ffffff" opacity="0.14" transform="rotate(-30 86 108)"/>

  <!-- Asterisk gem with pinwheel facets -->
  <g transform="translate(110, 130)">
    <g transform="rotate(0)">
      <path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="#f5d97a"/>
      <path d="M 0 0 L  4.5 -3.5 C  5.5 -16,  3.5 -29, 0 -36 Z" fill="#8a5e1c"/>
    </g>
    <g transform="rotate(60)">
      <path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="#f5d97a"/>
      <path d="M 0 0 L  4.5 -3.5 C  5.5 -16,  3.5 -29, 0 -36 Z" fill="#8a5e1c"/>
    </g>
    <g transform="rotate(120)">
      <path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="#f5d97a"/>
      <path d="M 0 0 L  4.5 -3.5 C  5.5 -16,  3.5 -29, 0 -36 Z" fill="#8a5e1c"/>
    </g>
    <g transform="rotate(180)">
      <path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="#f5d97a"/>
      <path d="M 0 0 L  4.5 -3.5 C  5.5 -16,  3.5 -29, 0 -36 Z" fill="#8a5e1c"/>
    </g>
    <g transform="rotate(240)">
      <path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="#f5d97a"/>
      <path d="M 0 0 L  4.5 -3.5 C  5.5 -16,  3.5 -29, 0 -36 Z" fill="#8a5e1c"/>
    </g>
    <g transform="rotate(300)">
      <path d="M 0 0 L -4.5 -3.5 C -5.5 -16, -3.5 -29, 0 -36 Z" fill="#f5d97a"/>
      <path d="M 0 0 L  4.5 -3.5 C  5.5 -16,  3.5 -29, 0 -36 Z" fill="#8a5e1c"/>
    </g>
    <polygon points="0,-6 5.2,-3 5.2,3 0,6 -5.2,3 -5.2,-3" fill="#d2ab43" stroke="#7c5719" stroke-width="0.6"/>
    <circle cx="-1.5" cy="-2" r="1.4" fill="#fff3cf"/>
  </g>

  <!-- Hinge collar -->
  <rect x="98" y="50" width="24" height="10" rx="2" fill="url(#goldRing)"/>
  <line x1="100" y1="55" x2="120" y2="55" stroke="#7c5719" stroke-width="0.8"/>

  <!-- Fleur-de-lis -->
  <g transform="translate(110, 50)">
    <rect x="-3.5" y="-12" width="7" height="12" fill="url(#goldRing)"/>
    <rect x="-16" y="-18" width="32" height="7" rx="1.5" fill="url(#goldRing)"/>
    <rect x="-3" y="-19" width="6" height="9" rx="0.8" fill="#7c5719"/>
    <path d="M 0 -18 Q -8 -36, -4 -54 Q -1 -62, 0 -64 Q 1 -62, 4 -54 Q 8 -36, 0 -18 Z" fill="url(#goldRing)"/>
    <path d="M 0 -22 Q -2.5 -36, 0 -52 Q 2.5 -36, 0 -22 Z" fill="#7c5719" opacity="0.55"/>
    <circle cx="0" cy="-66" r="2.5" fill="url(#goldHi)"/>
    <path d="M -4 -18 Q -22 -22, -26 -38 Q -22 -50, -16 -50 Q -16 -38, -10 -32 Q -6 -28, -4 -28 Z" fill="url(#goldRing)"/>
    <ellipse cx="-25" cy="-44" rx="2" ry="3" fill="#7c5719" opacity="0.4" transform="rotate(-20 -25 -44)"/>
    <path d="M  4 -18 Q  22 -22,  26 -38 Q  22 -50,  16 -50 Q  16 -38,  10 -32 Q  6 -28,  4 -28 Z" fill="url(#goldRing)"/>
    <ellipse cx="25" cy="-44" rx="2" ry="3" fill="#7c5719" opacity="0.4" transform="rotate(20 25 -44)"/>
  </g>
</svg>
```

## 16 px SVG (full source)

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
  <defs>
    <radialGradient id="redThecaSm" cx="0.4" cy="0.35">
      <stop offset="0%" stop-color="#9a1a1a"/>
      <stop offset="100%" stop-color="#3a0a0a"/>
    </radialGradient>
    <linearGradient id="goldRingSm" x1="0" x2="1">
      <stop offset="0%" stop-color="#d2ab43"/>
      <stop offset="50%" stop-color="#f5d97a"/>
      <stop offset="100%" stop-color="#7c5719"/>
    </linearGradient>
  </defs>

  <!-- Body + theca -->
  <circle cx="8" cy="9" r="6.5" fill="url(#goldRingSm)"/>
  <circle cx="8" cy="9" r="4.8" fill="url(#redThecaSm)"/>

  <!-- Asterisk-as-3-bars -->
  <g transform="translate(8, 9)" stroke="#f5d97a" stroke-width="1.2" stroke-linecap="round">
    <line x1="0" y1="-3" x2="0" y2="3"/>
    <line x1="-2.6" y1="-1.5" x2="2.6" y2="1.5"/>
    <line x1="-2.6" y1="1.5" x2="2.6" y2="-1.5"/>
  </g>
  <circle cx="8" cy="9" r="0.7" fill="#fff3cf"/>

  <!-- Fleur (3 tips) -->
  <path d="M 8 0 L 7.2 2.5 L 8.8 2.5 Z" fill="url(#goldRingSm)"/>
  <path d="M 5.6 2.5 L 6.5 1 L 7.3 2.5 Z" fill="url(#goldRingSm)"/>
  <path d="M 10.4 2.5 L 9.5 1 L 8.7 2.5 Z" fill="url(#goldRingSm)"/>
</svg>
```
