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.
This commit is contained in:
Local Dev 2026-10-21 23:43:13 +03:00
parent 41d906215a
commit 587218f88b
16 changed files with 226 additions and 103 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

View file

@ -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>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.7 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.7 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.7 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.7 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

BIN
hermes/branding/og-card.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

View 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

View 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