hermes brand kit assets: avatars, banners, logos, OG + social posters
Follow-up to 120dd8e1 which committed only the branding page rewrite but dropped the binary assets. All kit files now land in both mirrors: site/hermes/branding/ and site-hermes-x/assets/. Each generated by the Python compositor at scratchpad/build_brand_kit.py from the user's own file.svg master.
BIN
hermes/branding/avatar-dark.png
Normal file
|
After Width: | Height: | Size: 105 KiB |
BIN
hermes/branding/avatar-light.png
Normal file
|
After Width: | Height: | Size: 82 KiB |
BIN
hermes/branding/avatar-sky.png
Normal file
|
After Width: | Height: | Size: 81 KiB |
BIN
hermes/branding/banner-hero.png
Normal file
|
After Width: | Height: | Size: 91 KiB |
BIN
hermes/branding/banner-twitter.png
Normal file
|
After Width: | Height: | Size: 60 KiB |
|
|
@ -3,65 +3,77 @@
|
|||
<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">
|
||||
<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="../favicon.svg" type="image/svg+xml">
|
||||
<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}
|
||||
.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}
|
||||
|
||||
.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}
|
||||
.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{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{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)}
|
||||
.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="../../">⛓️ 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>
|
||||
<a class="brand" href="../../">
|
||||
<img src="../favicon.svg" alt="Hermes" width="22" height="22" style="display:block">
|
||||
<span>Hermes<span class="x">.X</span></span>
|
||||
</a>
|
||||
<a href="https://hermes.x/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="mark.svg" alt="Hermes" width="3" height="22" style="display:block">
|
||||
<div class="hero-mark" aria-hidden="true">
|
||||
<img src="../favicon.svg" alt="Hermes">
|
||||
</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>
|
||||
<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">
|
||||
|
|
@ -70,124 +82,228 @@
|
|||
<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>
|
||||
(Ἑρμῆς). 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 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>
|
||||
<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">
|
||||
<div class="mark-16"><img src="mark.svg" alt="Hermes" width="5" height="22" style="display:block"></div>
|
||||
<small>16 px — simplified stroke variant</small>
|
||||
<div class="cell"><img src="../favicon.svg" alt="" width="16" height="16"><small>16 px (favicon)</small></div>
|
||||
<div class="cell"><img src="../favicon.svg" alt="" width="24" height="24"><small>24 px (sidebar)</small></div>
|
||||
<div class="cell"><img src="../favicon.svg" alt="" width="32" height="32"><small>32 px</small></div>
|
||||
<div class="cell"><img src="../favicon.svg" alt="" width="64" height="64"><small>64 px</small></div>
|
||||
<div class="cell"><img src="../favicon.svg" alt="" width="96" height="96"><small>96 px (panel)</small></div>
|
||||
<div class="cell cell-sky"><img src="../favicon.svg" alt="" width="64" height="64"><small>on sky</small></div>
|
||||
<div class="cell cell-light"><img src="../favicon.svg" alt="" width="64" height="64"><small>on light</small></div>
|
||||
</div>
|
||||
|
||||
<div class="dl-row">
|
||||
<a href="mark.svg" download>⬇️ mark.svg <code>vector master</code></a>
|
||||
<a href="../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="cell">
|
||||
<div class="mark-32"><img src="mark.svg" alt="Hermes" width="3" height="22" style="display:block"></div>
|
||||
<small>32 px — standard</small>
|
||||
<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="cell">
|
||||
<div class="mark-64"><img src="mark.svg" alt="Hermes" width="3" height="22" style="display:block"></div>
|
||||
<small>64 px — on panel</small>
|
||||
<div class="lo light">
|
||||
<img src="logo-horizontal-light.svg" alt="Hermes logo light">
|
||||
<span class="label">horizontal — on light</span>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="mark-neg"><img src="mark.svg" alt="Hermes" width="3" height="22" style="display:block"></div>
|
||||
<small>on acid green</small>
|
||||
<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="cell">
|
||||
<div class="mark-amber"><img src="mark.svg" alt="Hermes" width="3" height="22" style="display:block"></div>
|
||||
<small>amber (unread badge)</small>
|
||||
<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="mark.svg" download>⬇️ mark.svg (main — the signin / top-bar icon)</a>
|
||||
<a href="mark-wings-both.webp" download>⬇️ mark-wings-both.webp (variant — full upper + lower wings)</a>
|
||||
<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 helmet upright, wings symmetrical.</td>
|
||||
<td class="n">Rotate, mirror only one wing, or detach them from the helmet.</td>
|
||||
<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">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>
|
||||
<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 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>
|
||||
<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:#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:#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> "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>
|
||||
<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 not actually Hermes (that includes forks
|
||||
with different protocols or trust models).</p>
|
||||
<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>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>
|
||||
<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>
|
||||
|
|
|
|||
1
hermes/branding/logo-horizontal-light.svg
Normal file
|
After Width: | Height: | Size: 6.7 KiB |
1
hermes/branding/logo-horizontal-on-sky.svg
Normal file
|
After Width: | Height: | Size: 6.7 KiB |
1
hermes/branding/logo-horizontal.svg
Normal file
|
After Width: | Height: | Size: 6.7 KiB |
1
hermes/branding/logo-stacked-on-sky.svg
Normal file
|
After Width: | Height: | Size: 6.7 KiB |
1
hermes/branding/logo-stacked.svg
Normal file
|
After Width: | Height: | Size: 6.7 KiB |
BIN
hermes/branding/og-card-sky.png
Normal file
|
After Width: | Height: | Size: 52 KiB |
BIN
hermes/branding/og-card.png
Normal file
|
After Width: | Height: | Size: 68 KiB |
BIN
hermes/branding/poster-square.png
Normal file
|
After Width: | Height: | Size: 87 KiB |
1
hermes/branding/wordmark-navy.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 200" role="img" aria-label="Hermes"><title>Hermes</title><text x="300" y="144" font-family="Segoe UI, Arial, sans-serif" font-size="144" font-weight="700" fill="#06111a" text-anchor="middle" letter-spacing="-3">Hermes</text></svg>
|
||||
|
After Width: | Height: | Size: 289 B |
1
hermes/branding/wordmark.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 200" role="img" aria-label="Hermes"><title>Hermes</title><text x="300" y="144" font-family="Segoe UI, Arial, sans-serif" font-size="144" font-weight="700" fill="#e7eaf1" text-anchor="middle" letter-spacing="-3">Hermes</text></svg>
|
||||
|
After Width: | Height: | Size: 289 B |