09656c8a19
The sidebar panel used to be a launcher that opened the standalone Messages window; now it IS the messenger — signin screen with "Open with Theseus ID" (derives the Nostr key from the unlocked vault seed) or "Open an existing account" (12/24-word mnemonic fallback), then a contacts + thread view with a narrow-width single-column fallback. The ⧉ button still pops the standalone window out, so the Ctrl+Shift+E flow keeps working. - main.js: expose a global._hermesAPI with status/canUseVault/init/inbox/ send/markThreadRead/contacts* so the addon can proxy panel calls without granting it ipcRenderer or crossing the HERMES_ONLY sender gate. hermesEmit also fans out on an in-process __hermes_bus so the panel gets live inbox/status pushes decoupled from hermesWin's lifetime. - bundled-addons/hermes/index.js: proxies each allow-listed method onto global._hermesAPI, forwards bus events to api.emit for the panel. - panel.html: signin + app screens, mobile-style single column under 540px. - Mark updated to the spread-wings variant: envelope sized up (34×22), three tapered trails extending outside the viewBox so the wings don't bunch at the back of the envelope at any size. Applied to the addon icon (manifest base64), the panel header, both /hermes sites, and site-hermes-x's favicon + mark SVGs.
202 lines
11 KiB
HTML
202 lines
11 KiB
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">
|
||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||
<g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)">
|
||
<rect x="18" y="24" width="34" height="22" rx="1.5"/>
|
||
<path d="M18 25 L35 39 L52 25"/>
|
||
<path d="M18 28 L-4 24"/>
|
||
<path d="M18 36 L-6 36"/>
|
||
<path d="M18 44 L0 46"/>
|
||
</g>
|
||
</svg>
|
||
</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"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 36 L-4 36"/></g></svg></div>
|
||
<small>16 px — simplified stroke variant</small>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="mark-32"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 28 L-4 24"/><path d="M18 36 L-6 36"/><path d="M18 44 L0 46"/></g></svg></div>
|
||
<small>32 px — standard</small>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="mark-64"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 28 L-4 24"/><path d="M18 36 L-6 36"/><path d="M18 44 L0 46"/></g></svg></div>
|
||
<small>64 px — on panel</small>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="mark-neg"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 28 L-4 24"/><path d="M18 36 L-6 36"/><path d="M18 44 L0 46"/></g></svg></div>
|
||
<small>on acid green</small>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="mark-amber"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-20 32 32)"><rect x="18" y="24" width="34" height="22" rx="1.5"/><path d="M18 25 L35 39 L52 25"/><path d="M18 28 L-4 24"/><path d="M18 36 L-6 36"/><path d="M18 44 L0 46"/></g></svg></div>
|
||
<small>amber (unread badge)</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dl-row">
|
||
<a href="mark.svg" download>⬇️ mark.svg (standard, 3 feathers per wing)</a>
|
||
<a href="mark-stroke.svg" download>⬇️ mark-stroke.svg (16–20 px variant)</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>
|