hermes: use the vector mark everywhere, retire the raster paths

User supplied the real vector source at Hermes/Icons/file.svg. Dropped the
background rectangle, kept the sky-blue foreground + dark inner detail
cutouts, squared the viewBox around the content bbox with a small margin.
Result: ~6.6 KB SVG, pixel-perfect at every size — no more 60x downscale
blur.

- bundled-addons/hermes/assets/mark.svg: tight-cropped vector
  (viewBox centres the icon in a square so 1:1 slots don't crop).
- bundled-addons/hermes/assets/mark-64.svg: same, pre-normalised to a
  0..64 viewBox for legacy consumers that assume that range.
- bundled-addons/hermes/addon.json: version 0.2.4; manifest icon is now
  the SVG as a data:image/svg+xml;base64 URI (8.8 KB vs the previous
  16 KB PNG data URI).
- bundled-addons/hermes/panel.html: both img tags point at mark.svg at
  24 and 72 px.
- home.html / home-brand/hermes-mark.svg: Hermes.X tile uses the vector.
- site/hermes/{favicon,branding/mark}.svg: both now the user's artwork.
- site-hermes-x/assets/{favicon,mark}.svg: same.
- All /hermes site HTML img tags swapped from mark.webp to mark.svg.

Installed bundle + user-data cache hot-patched to 0.2.4 so this takes
effect on the running Theseus without a reinstall.
This commit is contained in:
Local Dev 2026-10-21 22:52:18 +03:00
parent 85d5f40d0d
commit 28fb710af1
3 changed files with 196 additions and 204 deletions

View file

@ -1,194 +1,194 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hermes — brand — Silent Mode</title>
<meta name="description" content="Hermes brand kit: mark, palette, name, tone.">
<link rel="stylesheet" href="../../shared.css">
<style>
/* Marks are inlined (not <object>) so stroke="currentColor" inherits from the
container's `color`. One SVG, many colours and sizes without re-authoring. */
.mark-xl{color:var(--acid); line-height:0; display:inline-flex}
.mark-xl svg{width:160px; height:160px}
.mark-row{display:flex; gap:28px; align-items:center; flex-wrap:wrap; margin:1rem 0 2rem}
.mark-row .cell{display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:12px; min-width:120px}
.mark-row .cell small{color:var(--mut); font-size:11px; text-align:center}
.mark-row .cell svg{display:block}
.mark-16{color:var(--ink); line-height:0}
.mark-16 svg{width:16px; height:16px}
.mark-32{color:var(--ink); line-height:0}
.mark-32 svg{width:32px; height:32px}
.mark-64{color:var(--acid); line-height:0}
.mark-64 svg{width:64px; height:64px}
.mark-neg{color:#0a0d13; line-height:0; padding:14px 18px; border-radius:12px; background:var(--acid)}
.mark-neg svg{width:48px; height:48px}
.mark-amber{color:var(--warn); line-height:0} /* --warn is the Silent Mode amber */
.mark-amber svg{width:48px; height:48px}
.swatches{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:1rem 0 2rem}
.sw{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.sw .block{height:70px}
.sw .meta{padding:10px 12px; font-size:12px; color:var(--mut)}
.sw .meta b{display:block; color:var(--ink); font-size:13px; font-weight:600; margin-bottom:2px}
.sw .meta code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.tbl{width:100%; border-collapse:collapse; margin:1rem 0 2rem; font-size:14px}
.tbl th, .tbl td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl th{color:var(--mut); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.4px}
.tbl td.y{color:var(--ok)} .tbl td.n{color:var(--err)}
.dl-row{display:flex; gap:10px; flex-wrap:wrap; margin:1rem 0}
.dl-row a{display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:10px 14px; border-radius:999px; background:var(--panel); color:var(--ink); border:1px solid var(--line); font-size:13px}
.dl-row a:hover{background:var(--panel2); border-color:var(--line2)}
</style>
</head>
<body>
<nav class="topnav">
<a class="brand" href="../../">⛓️ Silent <span class="g">Mode</span></a>
<a href="../../tools/">Tools</a>
<a href="../../prometheus/">Prometheus</a>
<a href="../../sirius/">Sirius.X</a>
<a href="../../helios/">Helios</a>
<a href="../" class="here">Hermes</a>
</nav>
<header class="hero">
<div class="mark mark-xl" aria-hidden="true">
<img src="mark.webp" alt="Hermes" width="3" height="22" style="display:block">
</div>
<h1>Hermes <span class="pill p-brand" style="vertical-align:middle;font-size:12px;margin-left:.6rem;background:rgba(214,255,61,.12);color:var(--acid);padding:2px 8px;border-radius:999px">brand</span></h1>
<p class="tag">Mark, palette, name, tone. One page so client builds, add-on
chrome, screenshots and third-party press stay consistent without a
design review.</p>
</header>
<div class="wrap narrow">
<section class="plain">
<h2>The name</h2>
<p>In English the product is <b>Hermes</b> — after the Greek god of messengers,
travellers, and crossings. In modern Greek the same name is <b>Ermis</b>
(Ἑρμῆς). Both pronunciations are correct; written form is always Hermes
outside Greek contexts.</p>
<p>The keyboard shortcut inside Theseus is <code class="inline">Ctrl+Shift+E</code> —
E for Ermis, and off the collision path with Chrome's own Ctrl+Shift+M
("switch profile").</p>
</section>
<section>
<h2>The mark</h2>
<p class="lede">A winged helmet (<i>petasos</i>) — the mythological signature
of Hermes, the messenger god. Picked over a literal envelope because the
envelope is generic (every mail client uses it) and because an envelope
doesn't say <i>fast</i>. Works monochrome, scales from 16 px (sidebar icon)
to 160 px (hero) without legibility loss. SVG uses
<code class="inline">currentColor</code> so it inherits whatever text
colour it sits in.</p>
<div class="mark-row">
<div class="cell">
<div class="mark-16"><img src="mark.webp" alt="Hermes" width="5" height="22" style="display:block"></div>
<small>16 px — simplified stroke variant</small>
</div>
<div class="cell">
<div class="mark-32"><img src="mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
<small>32 px — standard</small>
</div>
<div class="cell">
<div class="mark-64"><img src="mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
<small>64 px — on panel</small>
</div>
<div class="cell">
<div class="mark-neg"><img src="mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
<small>on acid green</small>
</div>
<div class="cell">
<div class="mark-amber"><img src="mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
<small>amber (unread badge)</small>
</div>
</div>
<div class="dl-row">
<a href="mark.webp" download>⬇️ mark.webp (main — the signin / top-bar icon)</a>
<a href="mark-wings-both.webp" download>⬇️ mark-wings-both.webp (variant — full upper + lower wings)</a>
</div>
<table class="tbl">
<thead><tr><th>Do</th><th>Don't</th></tr></thead>
<tbody>
<tr>
<td class="y">Keep the helmet upright, wings symmetrical.</td>
<td class="n">Rotate, mirror only one wing, or detach them from the helmet.</td>
</tr>
<tr>
<td class="y">Let the mark inherit text colour (currentColor).</td>
<td class="n">Hard-code a colour inside the SVG; it limits reuse.</td>
</tr>
<tr>
<td class="y">Use the stroke variant below 24 px display size.</td>
<td class="n">Scale the standard mark below 20 px — feathers merge.</td>
</tr>
<tr>
<td class="y">Pair with the wordmark "Hermes" when context is unclear.</td>
<td class="n">Apply to a product with a different protocol or trust model.</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Palette</h2>
<p class="lede">Hermes rides on Silent Mode's colour system — same acid green,
same deep panels — so it never looks like a separate app glued on.
Warm amber and orange are extra accents for Hermes-specific moments
(unread badge, winged-sandals nod).</p>
<div class="swatches">
<div class="sw"><div class="block" style="background:#0b0e14"></div><div class="meta"><b>bg</b><code>#0b0e14</code> — primary surface</div></div>
<div class="sw"><div class="block" style="background:#141a24"></div><div class="meta"><b>panel</b><code>#141a24</code> — cards, sidebar</div></div>
<div class="sw"><div class="block" style="background:#d6ff3d"></div><div class="meta"><b>acid</b><code>#d6ff3d</code> — primary action</div></div>
<div class="sw"><div class="block" style="background:#f4c430"></div><div class="meta"><b>amber</b><code>#f4c430</code> — Hermes accent, unread</div></div>
<div class="sw"><div class="block" style="background:#FF6D00"></div><div class="meta"><b>orange</b><code>#FF6D00</code> — alternate accent</div></div>
<div class="sw"><div class="block" style="background:#FF8C1A"></div><div class="meta"><b>orange-light</b><code>#FF8C1A</code> — hover, secondary</div></div>
<div class="sw"><div class="block" style="background:#E65100"></div><div class="meta"><b>orange-deep</b><code>#E65100</code> — pressed / active</div></div>
<div class="sw"><div class="block" style="background:#e7eaf1"></div><div class="meta"><b>ink</b><code>#e7eaf1</code> — body text</div></div>
<div class="sw"><div class="block" style="background:#8b98a9"></div><div class="meta"><b>mut</b><code>#8b98a9</code> — muted text</div></div>
</div>
</section>
<section>
<h2>Voice</h2>
<ul class="steps">
<li><b>Blunt about limits.</b> "Relays still see recipient and timing" is the
tone, not "fully anonymous messaging". Say what the design does and does
not solve.</li>
<li><b>No evangelism about Nostr.</b> Nostr is the transport, not the
product. Mention it where it matters (relays, pubkeys, NIP-17) and don't
elsewhere.</li>
<li><b>"Message by name"</b> is the one-line pitch. Everything else is
supporting detail.</li>
<li><b>Lowercase</b> for product nouns in body copy (hermes, messages
panel). Capital <b>Hermes</b> for titles and the first mention per page.</li>
</ul>
</section>
<section>
<h2>Attribution + reuse</h2>
<p>Mark + palette are MPL-2.0 along with the rest of the Hermes client
source. Use for reviews, press, interoperability docs and the client's own
chrome. Don't apply to products not actually Hermes (that includes forks
with different protocols or trust models).</p>
</section>
</div>
<footer>
<div>Silent Mode — a Deviant project.</div>
<div class="fine">Named for the messenger of the gods. Ermis in modern Greek.
Spelled Hermes in English.</div>
</footer>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hermes — brand — Silent Mode</title>
<meta name="description" content="Hermes brand kit: mark, palette, name, tone.">
<link rel="stylesheet" href="../../shared.css">
<style>
/* Marks are inlined (not <object>) so stroke="currentColor" inherits from the
container's `color`. One SVG, many colours and sizes without re-authoring. */
.mark-xl{color:var(--acid); line-height:0; display:inline-flex}
.mark-xl svg{width:160px; height:160px}
.mark-row{display:flex; gap:28px; align-items:center; flex-wrap:wrap; margin:1rem 0 2rem}
.mark-row .cell{display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:12px; min-width:120px}
.mark-row .cell small{color:var(--mut); font-size:11px; text-align:center}
.mark-row .cell svg{display:block}
.mark-16{color:var(--ink); line-height:0}
.mark-16 svg{width:16px; height:16px}
.mark-32{color:var(--ink); line-height:0}
.mark-32 svg{width:32px; height:32px}
.mark-64{color:var(--acid); line-height:0}
.mark-64 svg{width:64px; height:64px}
.mark-neg{color:#0a0d13; line-height:0; padding:14px 18px; border-radius:12px; background:var(--acid)}
.mark-neg svg{width:48px; height:48px}
.mark-amber{color:var(--warn); line-height:0} /* --warn is the Silent Mode amber */
.mark-amber svg{width:48px; height:48px}
.swatches{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:1rem 0 2rem}
.sw{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.sw .block{height:70px}
.sw .meta{padding:10px 12px; font-size:12px; color:var(--mut)}
.sw .meta b{display:block; color:var(--ink); font-size:13px; font-weight:600; margin-bottom:2px}
.sw .meta code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.tbl{width:100%; border-collapse:collapse; margin:1rem 0 2rem; font-size:14px}
.tbl th, .tbl td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl th{color:var(--mut); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.4px}
.tbl td.y{color:var(--ok)} .tbl td.n{color:var(--err)}
.dl-row{display:flex; gap:10px; flex-wrap:wrap; margin:1rem 0}
.dl-row a{display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:10px 14px; border-radius:999px; background:var(--panel); color:var(--ink); border:1px solid var(--line); font-size:13px}
.dl-row a:hover{background:var(--panel2); border-color:var(--line2)}
</style>
</head>
<body>
<nav class="topnav">
<a class="brand" href="../../">⛓️ Silent <span class="g">Mode</span></a>
<a href="../../tools/">Tools</a>
<a href="../../prometheus/">Prometheus</a>
<a href="../../sirius/">Sirius.X</a>
<a href="../../helios/">Helios</a>
<a href="../" class="here">Hermes</a>
</nav>
<header class="hero">
<div class="mark mark-xl" aria-hidden="true">
<img src="mark.svg" alt="Hermes" width="3" height="22" style="display:block">
</div>
<h1>Hermes <span class="pill p-brand" style="vertical-align:middle;font-size:12px;margin-left:.6rem;background:rgba(214,255,61,.12);color:var(--acid);padding:2px 8px;border-radius:999px">brand</span></h1>
<p class="tag">Mark, palette, name, tone. One page so client builds, add-on
chrome, screenshots and third-party press stay consistent without a
design review.</p>
</header>
<div class="wrap narrow">
<section class="plain">
<h2>The name</h2>
<p>In English the product is <b>Hermes</b> — after the Greek god of messengers,
travellers, and crossings. In modern Greek the same name is <b>Ermis</b>
(Ἑρμῆς). Both pronunciations are correct; written form is always Hermes
outside Greek contexts.</p>
<p>The keyboard shortcut inside Theseus is <code class="inline">Ctrl+Shift+E</code> —
E for Ermis, and off the collision path with Chrome's own Ctrl+Shift+M
("switch profile").</p>
</section>
<section>
<h2>The mark</h2>
<p class="lede">A winged helmet (<i>petasos</i>) — the mythological signature
of Hermes, the messenger god. Picked over a literal envelope because the
envelope is generic (every mail client uses it) and because an envelope
doesn't say <i>fast</i>. Works monochrome, scales from 16 px (sidebar icon)
to 160 px (hero) without legibility loss. SVG uses
<code class="inline">currentColor</code> so it inherits whatever text
colour it sits in.</p>
<div class="mark-row">
<div class="cell">
<div class="mark-16"><img src="mark.svg" alt="Hermes" width="5" height="22" style="display:block"></div>
<small>16 px — simplified stroke variant</small>
</div>
<div class="cell">
<div class="mark-32"><img src="mark.svg" alt="Hermes" width="3" height="22" style="display:block"></div>
<small>32 px — standard</small>
</div>
<div class="cell">
<div class="mark-64"><img src="mark.svg" alt="Hermes" width="3" height="22" style="display:block"></div>
<small>64 px — on panel</small>
</div>
<div class="cell">
<div class="mark-neg"><img src="mark.svg" alt="Hermes" width="3" height="22" style="display:block"></div>
<small>on acid green</small>
</div>
<div class="cell">
<div class="mark-amber"><img src="mark.svg" alt="Hermes" width="3" height="22" style="display:block"></div>
<small>amber (unread badge)</small>
</div>
</div>
<div class="dl-row">
<a href="mark.svg" download>⬇️ mark.svg (main — the signin / top-bar icon)</a>
<a href="mark-wings-both.webp" download>⬇️ mark-wings-both.webp (variant — full upper + lower wings)</a>
</div>
<table class="tbl">
<thead><tr><th>Do</th><th>Don't</th></tr></thead>
<tbody>
<tr>
<td class="y">Keep the helmet upright, wings symmetrical.</td>
<td class="n">Rotate, mirror only one wing, or detach them from the helmet.</td>
</tr>
<tr>
<td class="y">Let the mark inherit text colour (currentColor).</td>
<td class="n">Hard-code a colour inside the SVG; it limits reuse.</td>
</tr>
<tr>
<td class="y">Use the stroke variant below 24 px display size.</td>
<td class="n">Scale the standard mark below 20 px — feathers merge.</td>
</tr>
<tr>
<td class="y">Pair with the wordmark "Hermes" when context is unclear.</td>
<td class="n">Apply to a product with a different protocol or trust model.</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Palette</h2>
<p class="lede">Hermes rides on Silent Mode's colour system — same acid green,
same deep panels — so it never looks like a separate app glued on.
Warm amber and orange are extra accents for Hermes-specific moments
(unread badge, winged-sandals nod).</p>
<div class="swatches">
<div class="sw"><div class="block" style="background:#0b0e14"></div><div class="meta"><b>bg</b><code>#0b0e14</code> — primary surface</div></div>
<div class="sw"><div class="block" style="background:#141a24"></div><div class="meta"><b>panel</b><code>#141a24</code> — cards, sidebar</div></div>
<div class="sw"><div class="block" style="background:#d6ff3d"></div><div class="meta"><b>acid</b><code>#d6ff3d</code> — primary action</div></div>
<div class="sw"><div class="block" style="background:#f4c430"></div><div class="meta"><b>amber</b><code>#f4c430</code> — Hermes accent, unread</div></div>
<div class="sw"><div class="block" style="background:#FF6D00"></div><div class="meta"><b>orange</b><code>#FF6D00</code> — alternate accent</div></div>
<div class="sw"><div class="block" style="background:#FF8C1A"></div><div class="meta"><b>orange-light</b><code>#FF8C1A</code> — hover, secondary</div></div>
<div class="sw"><div class="block" style="background:#E65100"></div><div class="meta"><b>orange-deep</b><code>#E65100</code> — pressed / active</div></div>
<div class="sw"><div class="block" style="background:#e7eaf1"></div><div class="meta"><b>ink</b><code>#e7eaf1</code> — body text</div></div>
<div class="sw"><div class="block" style="background:#8b98a9"></div><div class="meta"><b>mut</b><code>#8b98a9</code> — muted text</div></div>
</div>
</section>
<section>
<h2>Voice</h2>
<ul class="steps">
<li><b>Blunt about limits.</b> "Relays still see recipient and timing" is the
tone, not "fully anonymous messaging". Say what the design does and does
not solve.</li>
<li><b>No evangelism about Nostr.</b> Nostr is the transport, not the
product. Mention it where it matters (relays, pubkeys, NIP-17) and don't
elsewhere.</li>
<li><b>"Message by name"</b> is the one-line pitch. Everything else is
supporting detail.</li>
<li><b>Lowercase</b> for product nouns in body copy (hermes, messages
panel). Capital <b>Hermes</b> for titles and the first mention per page.</li>
</ul>
</section>
<section>
<h2>Attribution + reuse</h2>
<p>Mark + palette are MPL-2.0 along with the rest of the Hermes client
source. Use for reviews, press, interoperability docs and the client's own
chrome. Don't apply to products not actually Hermes (that includes forks
with different protocols or trust models).</p>
</section>
</div>
<footer>
<div>Silent Mode — a Deviant project.</div>
<div class="fine">Named for the messenger of the gods. Ermis in modern Greek.
Spelled Hermes in English.</div>
</footer>
</body>
</html>

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 448 B

After

Width:  |  Height:  |  Size: 6.4 KiB

1
hermes/favicon.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.4 KiB