hermes-site/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.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.webp" alt="Hermes" width="5" height="22" style="display:block">
    <span>Hermes<span class="x">.X</span></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">
    <img src="../assets/mark.webp" alt="Hermes" width="3" height="22" 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.webp" alt="Hermes" width="5" height="22" style="display:block"></div>
      <small>16 px — stroke variant (one trail)</small>
    </div>
    <div class="cell">
      <div class="mark-32"><img src="../assets/mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
      <small>32 px — standard (3 tapered trails)</small>
    </div>
    <div class="cell">
      <div class="mark-64"><img src="../assets/mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
      <small>64 px — in-panel</small>
    </div>
    <div class="cell">
      <div class="mark-neg"><img src="../assets/mark.webp" alt="Hermes" width="3" height="22" style="display:block"></div>
      <small>on sky background</small>
    </div>
  </div>

  <div class="dl-row">
    <a href="../assets/mark.webp" 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>