4ea506596f
Earlier iterations left the nested site/hermes/* on the superseded winged- helmet design and the Theseus addon on acid-green despite the branding tokens moving to sky-mid. This brings every surface to the same mark + colour: - TheseusNavigator/bundled-addons/hermes/addon.json: both icon fields (toolbar + panel declared) swap from acid-green helmet to sky-mid (#38BDF8) tapered-trails envelope. Picks up on next addon re-copy. - TheseusNavigator/bundled-addons/hermes/panel.html: inline SVG swapped from helmet dome paths to the tilted-envelope + 3 tapered trails. Uses currentColor so the panel's own colour token drives it. - site/hermes/branding/mark.svg + mark-stroke.svg: standard (3 trails) + simplified 16-20px (1 trail) variants match site-hermes-x/assets/. - site/hermes/branding/index.html: six inline mark cells (hero + 5 size cells) swapped in bulk. - site/hermes/index.html: hero mark SVG swapped. Grep confirms all seven surfaces now carry 'rotate(-22 32 32)' — the tapered-trails signature. Nothing left on the old helmet.
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(-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>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(-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 — 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(-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</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 — 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(-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 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(-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>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>
|