f73b35c349
New site-hermes-x/ — standalone .x site (own nav, own assets, own OG tags),
sibling to site-theseus-x and site-sirius-x. Internal nav stays on hermes.x:
Overview, Messenger (preview + UI mockup), Branding (brand kit). The only
cross-link is 'Get Theseus' pointing at theseus.x where appropriate.
Mark redesigned: tilted winged envelope with three tapered speed-trails on
the back-left (top longest, bottom shortest). Default colour sky #38BDF8 —
swappable via --sky in site-hermes-x/assets/shared.css. Alternate orange
palette documented but not applied by default. Mark propagated to:
- site-hermes-x/assets/mark.svg + mark-stroke.svg (16-20px variant)
- site/hermes/{index.html, branding/{index.html, mark.svg, mark-stroke.svg}}
- TheseusNavigator/bundled-addons/hermes/{addon.json, panel.html}
Theseus addon moves out of the top-right extensions dock and into the
left-strip sidebar: panels[].side = 'left' + registerSidebarPanel({side:'left'}).
Appears alongside Mail/Pithos/Telegram, excluded from rightPanels() so the
extensions dock no longer lists it. Verified via sidebarState() CDP query —
hermes:main is no longer in the right-panels list.
site/hermes/ (the nested silentmode.st/hermes page) also updated to the new
mark for consistency; both the sovereign hermes.x and the silentmode-nested
page now show the same winged envelope.
193 lines
11 KiB
HTML
193 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.x — brand kit</title>
|
||
<meta name="description" content="Hermes brand kit: mark, palette, name, voice. Not Hermès the fashion house; Hermes the messenger god.">
|
||
<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(-22 32 32)"><rect x="20" y="26" width="30" height="18" rx="1.5"/><path d="M20 27 L35 37 L50 27"/><path d="M20 36 L4 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(-22 32 32)"><rect x="20" y="26" width="30" height="18" rx="1.5"/><path d="M20 27 L35 37 L50 27"/><path d="M20 30 L2 30"/><path d="M20 36 L10 36"/><path d="M20 42 L14 42"/></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>
|
||
<div class="note warn" style="margin-top:1rem"><b>Not Hermès.</b> The French
|
||
fashion house owns the mental model for the word with the grave accent and
|
||
the orange leather. We spell it <b>Hermes</b> (no accent). Our mark is a
|
||
winged envelope mid-flight, not a horse-drawn carriage. If a visitor
|
||
confuses the two, the mark alone should set them straight.</div>
|
||
</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(-22 32 32)"><rect x="20" y="26" width="30" height="18" rx="1.5"/><path d="M20 27 L35 37 L50 27"/><path d="M20 36 L4 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(-22 32 32)"><rect x="20" y="26" width="30" height="18" rx="1.5"/><path d="M20 27 L35 37 L50 27"/><path d="M20 30 L2 30"/><path d="M20 36 L10 36"/><path d="M20 42 L14 42"/></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(-22 32 32)"><rect x="20" y="26" width="30" height="18" rx="1.5"/><path d="M20 27 L35 37 L50 27"/><path d="M20 30 L2 30"/><path d="M20 36 L10 36"/><path d="M20 42 L14 42"/></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(-22 32 32)"><rect x="20" y="26" width="30" height="18" rx="1.5"/><path d="M20 27 L35 37 L50 27"/><path d="M20 30 L2 30"/><path d="M20 36 L10 36"/><path d="M20 42 L14 42"/></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">Pair with the Hermès logotype or any horsey mascot.</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:#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>
|
||
|
||
<div class="note"><b>Alternate: Hermès-palette orange.</b> The brand file also
|
||
carries a warm orange variant (<code class="inline">#FF6D00</code>,
|
||
<code class="inline">#FF8C1A</code>, <code class="inline">#E65100</code>)
|
||
for third parties who prefer the Hermes-god colour association. Pick one
|
||
or the other — never both in the same build. Sky-mid is the default.</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>
|