hermes brand kit: logo lockups, avatars, banners, OG + social posters

Full kit built from file.svg (user-authored vector master) via a Python
compositor. Everything in site/hermes/branding/ and mirrored into
site-hermes-x/assets/.

Vector lockups (SVG, scalable):
- logo-horizontal.svg + on-sky + light variants (mark + "Hermes" side-by-side)
- logo-stacked.svg + on-sky variant (mark above wordmark)
- wordmark.svg + wordmark-navy.svg (type-only)

Raster assets (PNG at native platform sizes):
- avatar-dark.png / avatar-light.png / avatar-sky.png (1000x1000)
  Social profile images for Twitter / Discord / Nostr / Telegram
- banner-twitter.png (1500x500) — X / LinkedIn / Facebook header
- banner-hero.png (2000x700) — website hero
- og-card.png + og-card-sky.png (1200x630) — Open Graph link previews
- poster-square.png (1080x1080) — Instagram / Mastodon

Branding page rewritten to showcase everything with download links at
hermes.x/branding (deployed to Sia bucket, synced via systemd timer).

The Hermes/Icons folder also contained three third-party images with
visible AdobeStock watermarks or Hermès-brand references — those are
NOT used in the kit, which stays strictly on the user's own winged-
envelope mark + the type lockups built around it.
This commit is contained in:
Local Dev 2026-10-21 23:41:39 +03:00
parent b473ac933a
commit 41b5b184ad
4 changed files with 557 additions and 184 deletions

View file

@ -1,184 +1,311 @@
<!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="../">
<img src="../assets/mark.svg" alt="Hermes" width="22" height="22" style="display:block">
<span>Hermes<span class="x">.X</span></span>
</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">
<img src="../assets/mark.svg" alt="Hermes" width="160" height="160" style="display:block">
</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"><img src="../assets/mark.svg" alt="Hermes" width="16" height="16" style="display:block"></div>
<small>16 px — stroke variant (one trail)</small>
</div>
<div class="cell">
<div class="mark-32"><img src="../assets/mark.svg" alt="Hermes" width="32" height="32" style="display:block"></div>
<small>32 px — standard (3 tapered trails)</small>
</div>
<div class="cell">
<div class="mark-64"><img src="../assets/mark.svg" alt="Hermes" width="64" height="64" style="display:block"></div>
<small>64 px — in-panel</small>
</div>
<div class="cell">
<div class="mark-neg"><img src="../assets/mark.svg" alt="Hermes" width="48" height="48" style="display:block"></div>
<small>on sky background</small>
</div>
</div>
<div class="dl-row">
<a href="../assets/mark.svg" download>⬇️ mark.webp (main — the signin / top-bar icon)</a>
<a href="../assets/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 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>
<!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, logo lockups, avatars, banners, social cards, palette, voice.">
<link rel="icon" href="../assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="../assets/shared.css">
<style>
.hero-mark{display:inline-flex;line-height:0}
.hero-mark img{width:160px;height:160px;display:block}
.mark-row{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin:1rem 0 1.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:120px}
.mark-row .cell small{color:var(--mut);font-size:11px;text-align:center}
.mark-row .cell img{display:block}
.cell-sky{background:var(--sky)!important;border-color:var(--sky)!important}
.cell-sky small{color:#06111a!important}
.cell-light{background:#f6f6fa!important;border-color:#d6dae2!important}
.cell-light small{color:#5c6577!important}
.logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:1rem 0 1.6rem}
.logo-grid .lo{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:14px;min-height:170px;justify-content:center}
.logo-grid .lo.sky{background:var(--sky);border-color:var(--sky)}
.logo-grid .lo.light{background:#f6f6fa;border-color:#d6dae2}
.logo-grid .lo img{max-width:100%;max-height:140px;height:auto;display:block}
.logo-grid .lo .label{font-size:11.5px;color:var(--mut);text-align:center}
.logo-grid .lo.sky .label{color:#06243a}
.logo-grid .lo.light .label{color:#5c6577}
.avatar-row{display:flex;gap:16px;flex-wrap:wrap;margin:1rem 0 1.6rem}
.avatar-row .av{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:10px;width:200px}
.avatar-row .av img{width:160px;height:160px;border-radius:50%;object-fit:cover;display:block}
.avatar-row .av .label{font-size:11.5px;color:var(--mut);text-align:center}
.banner-wrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin:1rem 0 1.6rem}
.banner-wrap img{width:100%;height:auto;display:block;border-radius:8px}
.banner-wrap .label{font-size:11.5px;color:var(--mut);text-align:center;padding:8px 0 2px}
.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:.8rem 0 1.6rem}
.dl-row a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;padding:8px 14px;border-radius:999px;background:var(--panel);color:var(--ink);border:1px solid var(--line);font-size:12.5px}
.dl-row a:hover{background:var(--panel2);border-color:var(--line2)}
.dl-row a code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--mut)}
</style>
</head>
<body>
<nav class="topnav">
<a class="brand" href="../">
<img src="../assets/mark.svg" alt="Hermes" width="22" height="22" style="display:block">
<span>Hermes<span class="x">.X</span></span>
</a>
<a href="../overview/">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="hero-mark" aria-hidden="true">
<img src="../assets/mark.svg" alt="Hermes">
</div>
<h1>Brand kit</h1>
<p class="tag">Mark, logo lockups, avatars, banners, social cards, palette, 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 winged envelope — a letter mid-flight. Vector, scales
cleanly from favicon to hero. Ships as one SVG with the sky-blue fill plus
dark inner cutouts for the flap V-fold.</p>
<div class="mark-row">
<div class="cell"><img src="../assets/mark.svg" alt="" width="16" height="16"><small>16 px (favicon)</small></div>
<div class="cell"><img src="../assets/mark.svg" alt="" width="24" height="24"><small>24 px (sidebar)</small></div>
<div class="cell"><img src="../assets/mark.svg" alt="" width="32" height="32"><small>32 px</small></div>
<div class="cell"><img src="../assets/mark.svg" alt="" width="64" height="64"><small>64 px</small></div>
<div class="cell"><img src="../assets/mark.svg" alt="" width="96" height="96"><small>96 px (panel)</small></div>
<div class="cell cell-sky"><img src="../assets/mark.svg" alt="" width="64" height="64"><small>on sky</small></div>
<div class="cell cell-light"><img src="../assets/mark.svg" alt="" width="64" height="64"><small>on light</small></div>
</div>
<div class="dl-row">
<a href="../assets/mark.svg" download>⬇️ mark.svg <code>vector master</code></a>
<a href="../assets/favicon.svg" download>⬇️ favicon.svg <code>same, favicon slot</code></a>
</div>
</section>
<section>
<h2>Logo lockups</h2>
<p class="lede">Mark + wordmark for use when context needs more than the icon alone.
Three surfaces: default dark, inverted for sky-blue backgrounds, light-background variant.</p>
<div class="logo-grid">
<div class="lo">
<img src="logo-horizontal.svg" alt="Hermes logo horizontal">
<span class="label">horizontal — default</span>
</div>
<div class="lo sky">
<img src="logo-horizontal-on-sky.svg" alt="Hermes logo on sky">
<span class="label">horizontal — on sky</span>
</div>
<div class="lo light">
<img src="logo-horizontal-light.svg" alt="Hermes logo light">
<span class="label">horizontal — on light</span>
</div>
<div class="lo">
<img src="logo-stacked.svg" alt="Hermes logo stacked" style="max-height:220px">
<span class="label">stacked — default</span>
</div>
<div class="lo sky">
<img src="logo-stacked-on-sky.svg" alt="Hermes logo stacked on sky" style="max-height:220px">
<span class="label">stacked — on sky</span>
</div>
<div class="lo">
<img src="wordmark.svg" alt="Hermes wordmark" style="max-height:60px">
<span class="label">wordmark only</span>
</div>
</div>
<div class="dl-row">
<a href="logo-horizontal.svg" download>⬇️ logo-horizontal.svg</a>
<a href="logo-horizontal-on-sky.svg" download>⬇️ logo-horizontal-on-sky.svg</a>
<a href="logo-horizontal-light.svg" download>⬇️ logo-horizontal-light.svg</a>
<a href="logo-stacked.svg" download>⬇️ logo-stacked.svg</a>
<a href="logo-stacked-on-sky.svg" download>⬇️ logo-stacked-on-sky.svg</a>
<a href="wordmark.svg" download>⬇️ wordmark.svg</a>
<a href="wordmark-navy.svg" download>⬇️ wordmark-navy.svg</a>
</div>
</section>
<section>
<h2>Avatars</h2>
<p class="lede">1000×1000 PNG, square, mark centred. Use the dark variant on
Twitter / Discord / Nostr / Telegram where the default surface is dark;
use the light variant for light-themed platforms.</p>
<div class="avatar-row">
<div class="av">
<img src="avatar-dark.png" alt="Hermes avatar dark">
<span class="label">avatar-dark.png<br>1000×1000</span>
</div>
<div class="av">
<img src="avatar-light.png" alt="Hermes avatar light">
<span class="label">avatar-light.png<br>1000×1000</span>
</div>
<div class="av">
<img src="avatar-sky.png" alt="Hermes avatar sky">
<span class="label">avatar-sky.png<br>1000×1000</span>
</div>
</div>
<div class="dl-row">
<a href="avatar-dark.png" download>⬇️ avatar-dark.png</a>
<a href="avatar-light.png" download>⬇️ avatar-light.png</a>
<a href="avatar-sky.png" download>⬇️ avatar-sky.png</a>
</div>
</section>
<section>
<h2>Banners</h2>
<p class="lede">Social-platform headers + website hero. Rendered at native
aspect ratios so no cropping on upload.</p>
<div class="banner-wrap">
<img src="banner-twitter.png" alt="Hermes Twitter / X banner 1500×500">
<div class="label">banner-twitter.png — 1500×500 (X, LinkedIn, Facebook header)</div>
</div>
<div class="banner-wrap">
<img src="banner-hero.png" alt="Hermes website hero banner 2000×700">
<div class="label">banner-hero.png — 2000×700 (website / landing hero)</div>
</div>
<div class="dl-row">
<a href="banner-twitter.png" download>⬇️ banner-twitter.png</a>
<a href="banner-hero.png" download>⬇️ banner-hero.png</a>
</div>
</section>
<section>
<h2>Social cards + posters</h2>
<p class="lede">Open Graph card for link previews (every chat / search engine
renders this when hermes.x is shared), plus a square Instagram-style poster.</p>
<div class="banner-wrap">
<img src="og-card.png" alt="Hermes Open Graph card 1200×630">
<div class="label">og-card.png — 1200×630 (OG image / Twitter card)</div>
</div>
<div class="banner-wrap">
<img src="og-card-sky.png" alt="Hermes OG card on sky 1200×630">
<div class="label">og-card-sky.png — 1200×630 (sky-background variant)</div>
</div>
<div class="banner-wrap" style="max-width:540px;margin-left:auto;margin-right:auto">
<img src="poster-square.png" alt="Hermes square poster 1080×1080">
<div class="label">poster-square.png — 1080×1080 (Instagram / Mastodon)</div>
</div>
<div class="dl-row">
<a href="og-card.png" download>⬇️ og-card.png</a>
<a href="og-card-sky.png" download>⬇️ og-card-sky.png</a>
<a href="poster-square.png" download>⬇️ poster-square.png</a>
</div>
</section>
<section>
<h2>Usage</h2>
<table class="tbl">
<thead><tr><th>Do</th><th>Don't</th></tr></thead>
<tbody>
<tr>
<td class="y">Keep the envelope tilted, wing on the back-left.</td>
<td class="n">Mirror the mark or tilt it the opposite direction.</td>
</tr>
<tr>
<td class="y">Use the dark-fill variant against sky-blue surfaces.</td>
<td class="n">Place the sky-blue mark on a sky-blue background.</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>
<tr>
<td class="y">Scale the vector mark freely — it's crisp at any size.</td>
<td class="n">Rasterise and re-upscale; use the SVG as the source of truth.</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 + brand kit assets 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>

View file

@ -25,6 +25,7 @@
<img src="assets/mark.svg" alt="Hermes" width="22" height="22" style="display:block">
<span>Hermes<span class="x">.X</span></span>
</a>
<a href="overview/">Overview</a>
<a href="messenger/">Messenger</a>
<a href="branding/">Branding</a>
<a href="https://theseus.x/" class="get">Get Theseus</a>

View file

@ -88,6 +88,7 @@
<img src="../assets/mark.svg" alt="Hermes" width="22" height="22" style="display:block">
<span>Hermes<span class="x">.X</span></span>
</a>
<a href="../overview/">Overview</a>
<a href="./" class="here">Messenger</a>
<a href="../branding/">Branding</a>
<a href="https://theseus.x/" class="get">Get Theseus</a>

244
overview/index.html Normal file
View file

@ -0,0 +1,244 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>hermes.x — overview</title>
<meta name="description" content="Overview of Hermes: end-to-end encrypted DMs over Nostr addressed by on-chain registered name. The desktop messenger (Theseus) is live; the browser messenger is in progress — this page shows the UI, the plan, and what's left.">
<link rel="icon" href="../assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="../assets/shared.css">
<style>
/* ---- status banner ---- */
.status-banner{
background:rgba(255,199,95,.08);
border:1px solid rgba(255,199,95,.26);
border-radius:12px;
padding:14px 18px;
margin:1.5rem auto;
max-width:780px;
font-size:14px;
color:var(--ink);
display:flex;gap:14px;align-items:flex-start;
}
.status-banner .dot{
width:10px;height:10px;border-radius:50%;background:var(--warn);
margin-top:6px;flex-shrink:0;animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity:.4 } }
.status-banner b{color:var(--warn)}
/* ---- mockup frame ---- */
.mockup{
background:var(--panel);border:1px solid var(--line2);border-radius:16px;
overflow:hidden;margin:1.5rem auto;max-width:860px;
box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.mockup .window-bar{
display:flex;align-items:center;gap:8px;padding:10px 14px;
background:var(--panel2);border-bottom:1px solid var(--line);
}
.mockup .window-bar .dot{width:11px;height:11px;border-radius:50%;background:#444a56}
.mockup .window-bar .dot:nth-child(1){background:#ff5f57}
.mockup .window-bar .dot:nth-child(2){background:#febc2e}
.mockup .window-bar .dot:nth-child(3){background:#28c840}
.mockup .window-bar .title{color:var(--mut);font-size:12px;margin-left:10px}
.mockup .window-bar .status{margin-left:auto;font-size:11px;color:var(--ok);padding:2px 10px;border-radius:999px;background:rgba(79,209,165,.14)}
.mockup .window-bar .npub{color:var(--mut);font-size:11px;font-family:ui-monospace,monospace;margin-left:12px}
.mockup .npub b{color:var(--sky)}
.mockup .app{display:grid;grid-template-columns:220px 1fr;min-height:420px}
.mockup .side{background:var(--panel2);border-right:1px solid var(--line);display:flex;flex-direction:column}
.mockup .side-head{padding:10px;display:flex;gap:6px;border-bottom:1px solid var(--line)}
.mockup .side-head input{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 10px;color:var(--mut);font-size:12px}
.mockup .side-head button{background:var(--sky);color:#06111a;border:none;border-radius:6px;padding:6px 10px;font-weight:600;cursor:pointer;font-size:13px}
.mockup .contact{display:flex;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.03);cursor:pointer}
.mockup .contact.active{background:var(--panel3)}
.mockup .contact .avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#2a3a4a,#1a2432);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--mut);font-weight:600;text-transform:uppercase}
.mockup .contact .meta{flex:1;min-width:0}
.mockup .contact .name{font-size:12.5px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mockup .contact .last{font-size:11px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mockup .contact .badge{background:var(--sky);color:#06111a;font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px}
.mockup .thread{display:flex;flex-direction:column;background:var(--bg)}
.mockup .thread-head{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.mockup .thread-head .name{font-weight:600;font-size:13px}
.mockup .thread-head .pk{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--mut)}
.mockup .thread-body{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.mockup .bubble{max-width:70%;padding:7px 11px;border-radius:14px;font-size:13px;line-height:1.4}
.mockup .bubble.in{background:#1d2634;align-self:flex-start;border-bottom-left-radius:4px}
.mockup .bubble.out{background:#0d2a3a;align-self:flex-end;border-bottom-right-radius:4px;color:#d9ecfa}
.mockup .bubble .time{display:block;font-size:10px;color:var(--dim);margin-top:3px}
.mockup .compose{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);background:var(--panel)}
.mockup .compose input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 11px;color:var(--mut);font-size:13px}
.mockup .compose button{background:var(--sky);color:#06111a;border:none;padding:0 18px;border-radius:8px;font-weight:600;cursor:pointer}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:700px){.plan-grid{grid-template-columns:1fr}}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.plan h3{display:flex;align-items:center;gap:8px}
.plan ul{margin:.5rem 0 0;padding:0 0 0 1.2rem;color:var(--mut);font-size:14px;line-height:1.7}
.mockup-caption{text-align:center;color:var(--dim);font-size:12px;margin-top:-.5rem;margin-bottom:1.5rem}
</style>
</head>
<body>
<nav class="topnav">
<a class="brand" href="../">
<img src="../assets/mark.svg" alt="Hermes" width="22" height="22" style="display:block">
<span>Hermes<span class="x">.X</span></span>
</a>
<a href="./" class="here">Overview</a>
<a href="../messenger/">Messenger</a>
<a href="../branding/">Branding</a>
<a href="https://theseus.x/" class="get">Get Theseus</a>
</nav>
<header class="hero">
<div class="mark" style="color:var(--sky); line-height:0; display:inline-flex" aria-hidden="true">
<img src="../assets/mark.svg" alt="Hermes" width="96" height="96" style="display:block">
</div>
<h1>What Hermes <span class="x">is</span></h1>
<p class="tag">End-to-end encrypted DMs over Nostr, addressed by your
on-chain registered name instead of a public-key string. The desktop
client (inside Theseus) is live today; the browser messenger is in
progress. This page shows the UI, the plan, and what still has to
land before the browser version ships.</p>
</header>
<div class="status-banner">
<div class="dot"></div>
<div>
<b>Preview.</b> The desktop messenger inside <a href="https://theseus.x/">Theseus</a>
is live today — threaded chat, persistent history, address book, keyboard
shortcut <code class="inline">Ctrl+Shift+E</code>. The web-only client
(what this page becomes) is in development: BIP-39 → Nostr key derivation,
BCH-name resolution via gateway, NIP-17 wrap/unwrap, WebSocket to relays,
IndexedDB inbox. Everything client-side, nothing uploaded.
</div>
</div>
<div class="mockup" aria-label="Messenger UI preview">
<div class="window-bar">
<div class="dot"></div><div class="dot"></div><div class="dot"></div>
<div class="title">Hermes · hermes.x/messenger</div>
<span class="npub">your npub: <b>npub1ab…z89</b></span>
<span class="status">1/1 relay</span>
</div>
<div class="app">
<aside class="side">
<div class="side-head"><input value="Search contacts…" readonly><button>+</button></div>
<div class="contact">
<div class="avatar">AL</div>
<div class="meta"><div class="name">alice</div><div class="last">you: see you tomorrow</div></div>
</div>
<div class="contact active">
<div class="avatar">BO</div>
<div class="meta"><div class="name">bob</div><div class="last">great, send me the link</div></div>
<div class="badge">2</div>
</div>
<div class="contact">
<div class="avatar">TE</div>
<div class="meta"><div class="name">test</div><div class="last">chipnet is working</div></div>
</div>
</aside>
<section class="thread">
<div class="thread-head">
<div>
<div class="name">bob</div>
<div class="pk">023bf8c1…9ad2</div>
</div>
</div>
<div class="thread-body">
<div class="bubble in">hey, did you register your name yet?<span class="time">11:38</span></div>
<div class="bubble out">just now — bob.x is live<span class="time">11:40</span></div>
<div class="bubble in">nice. send me the hermes.x link<span class="time">11:42</span></div>
<div class="bubble out">https://hermes.x/messenger<span class="time">11:43</span></div>
<div class="bubble in">great, send me the link<span class="time">11:44</span></div>
</div>
<div class="compose">
<input value="Message…" readonly>
<button>Send</button>
</div>
</section>
</div>
</div>
<div class="mockup-caption">Non-interactive preview — live build pending (see roadmap below).</div>
<div class="wrap narrow">
<section>
<h2>Two clients, one identity</h2>
<div class="plan-grid">
<div class="plan">
<h3>Desktop (Theseus) <span class="src ok">live</span></h3>
<ul>
<li>Full crypto in-process (NIP-17, nip44 v2)</li>
<li>Persistent inbox + read-state on disk</li>
<li>Address book (local JSON + vCard import)</li>
<li>Sidebar panel, Ctrl+Shift+E shortcut</li>
<li>Vault-bind: no re-typing the mnemonic</li>
<li>Reverse-resolve pk → on-chain name</li>
</ul>
<div class="cta" style="justify-content:flex-start;margin-top:1.2rem">
<a class="btn primary" href="https://theseus.x/">Get Theseus</a>
</div>
</div>
<div class="plan">
<h3>Web (this page) <span class="src next">building</span></h3>
<ul>
<li>Same crypto, same identity (same wallet seed derivation)</li>
<li>BCH name resolution via public gateway</li>
<li>WebSocket to Nostr relays from the browser</li>
<li>IndexedDB inbox — survives tab close, scoped to this origin</li>
<li>No download, no install, no account</li>
<li>Mnemonic entry only — never stored in plaintext</li>
</ul>
<div class="cta" style="justify-content:flex-start;margin-top:1.2rem">
<a class="btn ghost" href="../">Why Hermes</a>
</div>
</div>
</div>
</section>
<section>
<h2>Why wait for the web client</h2>
<p class="lede">The web messenger isn't ready yet because of three things we
want to get right before shipping:</p>
<ol class="steps">
<li><b>Key handling in a tab.</b>
<span>A wallet mnemonic is the most sensitive bit of data a user has. In
the desktop app it lives in main-process memory; in a tab it has to
survive page reloads without ever landing in plaintext anywhere. We're
wiring a WebCrypto-backed non-extractable key path with the vault PIN
as the gate.</span></li>
<li><b>Resolver gateway.</b>
<span>The desktop talks to a chipnet Fulcrum directly. A browser can't
— it needs an HTTPS gateway that answers <code class="inline">np</code>
/ <code class="inline">nr</code> for a name. The gateway is live
(<code class="inline">navigate.st/api/dns/alice.x</code>) but the
client-side cache + signature-verification path still has an edge case
with lapsed names.</span></li>
<li><b>Relay persistence.</b>
<span>Desktop keeps a long-lived WebSocket to each relay. A tab doesn't,
because browsers throttle background sockets. The web client needs
offline queueing and a well-defined "catch-up" fetch on return —
otherwise you re-open the tab and the inbox feels empty.</span></li>
</ol>
<p>Until the three are solid, <b>install Theseus</b> for the real thing.
The web client will land here when the above are green.</p>
<div class="cta">
<a class="btn primary" href="https://theseus.x/">Get Theseus</a>
<a class="btn ghost" href="../branding/">Brand kit</a>
</div>
</section>
</div>
<footer>
<div>hermes.x — a <a href="https://silentmode.st/">Silent Mode</a> project.</div>
<div class="fine">Preview only. The functional web client is being built.</div>
</footer>
</body>
</html>