relicario/docs/superpowers/specs/2026-04-24-relicario-logo-refresh-design.md

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 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 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>