site/hermes/branding/index.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">
    <img src="mark.webp" alt="Hermes" width="3" height="22" style="display:block">
  </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"><img src="mark.webp" alt="Hermes" width="5" height="22" style="display:block"></div>
      <small>16 px — simplified stroke variant</small>
    </div>
    <div class="cell">
      <div class="mark-32"><img src="mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
      <small>32 px — standard</small>
    </div>
    <div class="cell">
      <div class="mark-64"><img src="mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
      <small>64 px — on panel</small>
    </div>
    <div class="cell">
      <div class="mark-neg"><img src="mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
      <small>on acid green</small>
    </div>
    <div class="cell">
      <div class="mark-amber"><img src="mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
      <small>amber (unread badge)</small>
    </div>
  </div>

  <div class="dl-row">
    <a href="mark.webp" download>⬇️ mark.webp (main — the signin / top-bar icon)</a>
    <a href="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 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>