9cf5901935
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.
185 lines
10 KiB
HTML
185 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>hermes.x — brand kit</title>
|
||
<meta name="description" content="Hermes brand kit: mark, palette, name, voice.">
|
||
<link rel="icon" href="../assets/favicon.svg" type="image/svg+xml">
|
||
<link rel="stylesheet" href="../assets/shared.css">
|
||
<style>
|
||
.mark-xl{color:var(--sky); line-height:0; display:inline-flex}
|
||
.mark-xl svg{width:160px; height:160px}
|
||
.mark-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:1rem 0 2rem}
|
||
.mark-row .cell{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;min-width:130px}
|
||
.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(--sky);line-height:0}
|
||
.mark-64 svg{width:64px;height:64px}
|
||
.mark-neg{color:#06111a;line-height:0;padding:14px 18px;border-radius:12px;background:var(--sky)}
|
||
.mark-neg svg{width:48px;height:48px}
|
||
|
||
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,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="../">
|
||
<svg viewBox="0 0 64 64" aria-hidden="true"><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>
|
||
hermes<span class="x">.x</span>
|
||
</a>
|
||
<a href="../">Overview</a>
|
||
<a href="../messenger/">Messenger</a>
|
||
<a href="./" class="here">Branding</a>
|
||
<a href="https://theseus.x/" class="get">Get Theseus</a>
|
||
</nav>
|
||
|
||
<header class="hero">
|
||
<div class="mark mark-xl" aria-hidden="true">
|
||
<svg viewBox="0 0 64 64"><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>Brand kit</h1>
|
||
<p class="tag">Mark, palette, name, voice. One page so client builds, add-on
|
||
chrome, screenshots and third-party press stay consistent.</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> (Ἑρμῆς). 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, off the collision path with Chrome's own Ctrl+Shift+M.</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>The mark</h2>
|
||
<p class="lede">A tilted envelope with three speed-trails on the back edge
|
||
— a letter mid-flight. 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 — stroke variant (one trail)</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 (3 tapered trails)</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 — in-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 sky background</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dl-row">
|
||
<a href="../assets/mark.svg" download>⬇️ mark.svg (standard, 3 trails)</a>
|
||
<a href="../assets/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 envelope tilted ~22°, trails on the back-left.</td>
|
||
<td class="n">Mirror the mark or tilt it the opposite direction.</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 — trails merge.</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="y">Pair with the wordmark "hermes.x" 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 a sky-blue primary — fast, airborne, legible
|
||
on both dark and light. The deep navy background is the natural pairing;
|
||
the dim tones are for muted type.</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:#38BDF8"></div><div class="meta"><b>sky</b><code>#38BDF8</code> — primary accent (mark)</div></div>
|
||
<div class="sw"><div class="block" style="background:#60A5FA"></div><div class="meta"><b>sky-soft</b><code>#60A5FA</code> — hover, secondary</div></div>
|
||
<div class="sw"><div class="block" style="background:#0EA5E9"></div><div class="meta"><b>sky-deep</b><code>#0EA5E9</code> — pressed / active</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 class="sw"><div class="block" style="background:#ffc75f"></div><div class="meta"><b>warn</b><code>#ffc75f</code> — warnings, unread accents</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Voice</h2>
|
||
<ul class="steps">
|
||
<li><b>Blunt about limits.</b>
|
||
<span>"Relays still see recipient and timing" is the tone, not "fully
|
||
anonymous messaging". Say what the design does and does not solve.</span></li>
|
||
<li><b>No evangelism about Nostr.</b>
|
||
<span>Nostr is the transport, not the product. Mention it where it
|
||
matters (relays, pubkeys, NIP-17) and don't elsewhere.</span></li>
|
||
<li><b>"Message by name" is the one-line pitch.</b>
|
||
<span>Everything else is supporting detail.</span></li>
|
||
<li><b>Lowercase for product nouns in body copy.</b>
|
||
<span>hermes.x, messenger, panel. Capital Hermes for titles and the first
|
||
mention per page.</span></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 that aren't actually Hermes (forks with different
|
||
protocols or trust models included).</p>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<footer>
|
||
<div>hermes.x — a <a href="https://silentmode.st/">Silent Mode</a> project.</div>
|
||
<div class="fine">Named for the messenger of the gods. Ermis in modern Greek. Spelled Hermes in English.</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|