silentmode/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

hermes/branding: inline the mark SVG so stroke='currentColor' inherits

Browse source 
<object data='mark.svg'> renders the SVG inside its own document — currentColor
there resolves against that document's own body, not the parent page's. The
hero mark was coming out black on dark and the on-acid/amber cells couldn't
re-colour the glyph.

Inlining the SVG puts the <svg> in the same document as .mark-xl / .mark-neg
/ .mark-amber, so each container's color tokens drive the stroke. Also added
an amber (unread-badge) swatch to the mark grid so the Hermes accent colour
has a visible example alongside the Silent Mode acid green.

Link downloads to mark.svg / mark-stroke.svg are unchanged — the files still
ship as standalone assets for third-party reuse.
This commit is contained in:
Local Dev 2026-10-21 00:59:24 +03:00
parent 81082c0c4e
commit 7f301262d1
1 changed files with 25 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
hermes/branding/index.html
View file

@ -7,11 +7,13 @@
<meta name="description" content="Hermes brand kit: mark, palette, name, tone. Not Hermès the fashion house; Hermes the messenger god.">
<link rel="stylesheet" href="../../shared.css">
<style>
.mark-xl{color:var(--acid); line-height:0}
/* 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}
.mark-row .cell small{color:var(--mut); font-size:11px}
.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}
@ -21,6 +23,8 @@
.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}
@ -51,7 +55,16 @@
</nav>
<header class="hero">
<div class="mark mark-xl" aria-hidden="true"><object data="mark.svg" type="image/svg+xml" width="160" height="160">Hermes</object></div>
<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">
<rect x="20" y="23" width="24" height="18" rx="2"/>
<path d="M20 25 L32 35 L44 25"/>
<path d="M20 28 L7 23"/><path d="M20 32 L6 32"/><path d="M20 36 L9 39"/>
<path d="M44 28 L57 23"/><path d="M44 32 L58 32"/><path d="M44 36 L55 39"/>
</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
@ -85,21 +98,25 @@
<div class="mark-row">
<div class="cell">
<div class="mark-16"><object data="mark-stroke.svg" type="image/svg+xml" width="16" height="16"></object></div>
<div class="mark-16"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><rect x="20" y="23" width="24" height="18" rx="2"/><path d="M20 25 L32 35 L44 25"/><path d="M20 30 L7 27"/><path d="M20 34 L8 36"/><path d="M44 30 L57 27"/><path d="M44 34 L56 36"/></g></svg></div>
<small>16 px — simplified stroke variant</small>
</div>
<div class="cell">
<div class="mark-32"><object data="mark.svg" type="image/svg+xml" width="32" height="32"></object></div>
<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"><rect x="20" y="23" width="24" height="18" rx="2"/><path d="M20 25 L32 35 L44 25"/><path d="M20 28 L7 23"/><path d="M20 32 L6 32"/><path d="M20 36 L9 39"/><path d="M44 28 L57 23"/><path d="M44 32 L58 32"/><path d="M44 36 L55 39"/></g></svg></div>
<small>32 px — standard</small>
</div>
<div class="cell">
<div class="mark-64"><object data="mark.svg" type="image/svg+xml" width="64" height="64"></object></div>
<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"><rect x="20" y="23" width="24" height="18" rx="2"/><path d="M20 25 L32 35 L44 25"/><path d="M20 28 L7 23"/><path d="M20 32 L6 32"/><path d="M20 36 L9 39"/><path d="M44 28 L57 23"/><path d="M44 32 L58 32"/><path d="M44 36 L55 39"/></g></svg></div>
<small>64 px — on panel</small>
</div>
<div class="cell">
<div class="mark-neg"><object data="mark.svg" type="image/svg+xml" width="48" height="48"></object></div>
<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"><rect x="20" y="23" width="24" height="18" rx="2"/><path d="M20 25 L32 35 L44 25"/><path d="M20 28 L7 23"/><path d="M20 32 L6 32"/><path d="M20 36 L9 39"/><path d="M44 28 L57 23"/><path d="M44 32 L58 32"/><path d="M44 36 L55 39"/></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"><rect x="20" y="23" width="24" height="18" rx="2"/><path d="M20 25 L32 35 L44 25"/><path d="M20 28 L7 23"/><path d="M20 32 L6 32"/><path d="M20 36 L9 39"/><path d="M44 28 L57 23"/><path d="M44 32 L58 32"/><path d="M44 36 L55 39"/></g></svg></div>
<small>amber (unread badge)</small>
</div>
</div>
<div class="dl-row">