brand.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Driga — Murmur identity</title>
<link rel="icon" type="image/svg+xml" href="../internal/web/static/brand/favicon.svg">
<style>
@font-face{font-family:Plex;src:url('../internal/web/static/fonts/ibm-plex-sans-latin-400-normal.woff2');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url('../internal/web/static/fonts/ibm-plex-sans-latin-600-normal.woff2');font-weight:600;font-display:swap}
:root{--ink:#1b1e21;--muted:#62666b;--line:#dce0e2;--red:#d20f39}*{box-sizing:border-box}body{margin:0;background:#fafafa;color:var(--ink);font:16px/1.6 Plex,Arial,sans-serif}main,header,footer{width:min(1100px,calc(100% - 48px));margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:25px 0;border-bottom:1px solid var(--line)}header img{width:112px;height:40px}header span,.label{font:11px/1.5 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}h1,h2,p{margin:0}h1{font-size:50px;line-height:1.1;font-weight:600;letter-spacing:-.05em;margin:18px 0}h2{font-size:22px;font-weight:600;letter-spacing:-.025em}a{color:inherit;text-underline-offset:4px}a:focus-visible{outline:3px solid var(--red);outline-offset:5px}.intro{padding:50px 0 35px}.intro p{max-width:580px;color:var(--muted)}.hero{display:flex;align-items:center;justify-content:center;background:#f1f2f3;border-radius:4px;min-height:320px;padding:35px}.hero img{width:min(560px,100%);height:auto}.variations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0 45px}.variant{min-width:0}.plate{height:215px;display:flex;align-items:center;justify-content:center;background:var(--plate);border-radius:3px}.plate img{width:125px;height:125px}.variant p{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;margin:12px 0 0}.variant p a{font-size:11px;color:var(--muted)}.section{padding:34px 0;border-top:1px solid var(--line)}.palette,.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:23px}.swatch{display:flex;align-items:center;gap:13px;font-size:13px}.swatch i{display:block;width:42px;height:42px;background:var(--swatch);border:1px solid #0002;border-radius:3px}.swatch code{display:block;color:var(--muted);font-size:11px}.rules h3{font-size:14px;margin:0 0 9px}.rules p{font-size:13px;color:var(--muted)}.downloads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 35px;margin-top:20px}.downloads a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:13px}.downloads a:hover{text-decoration:underline}.downloads span{font:10px ui-monospace,monospace;color:var(--muted);white-space:nowrap}.sizes{display:flex;gap:25px;align-items:flex-end;margin-top:25px}.sizes figure{margin:0;text-align:center}.sizes figcaption{font:10px ui-monospace,monospace;color:var(--muted);margin-top:10px}.sizes img{display:block}.app{background:var(--red);border-radius:13px;width:64px;height:64px;display:grid;place-items:center}.app img{width:54px;height:54px}footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:30px}@media(max-width:650px){main,header,footer{width:calc(100% - 32px)}header span{font-size:9px}h1{font-size:42px}.intro{padding-top:35px}.hero{min-height:220px;padding:20px}.variations{gap:10px}.plate{height:145px}.plate img{width:92px;height:92px}.variant p{flex-direction:column;align-items:flex-start;gap:4px}.palette,.rules{grid-template-columns:1fr;gap:22px}.downloads{grid-template-columns:1fr}.sizes{gap:20px}.section{padding:28px 0}footer{font-size:11px}.intro p{font-size:14px}}@media print{.hero,.plate{-webkit-print-color-adjust:exact;print-color-adjust:exact}.downloads{display:none}}
</style>
</head>
<body>
<header><img src="../internal/web/static/brand/lockup.svg" alt="Driga" width="112" height="40"><span>Murmur / Brand assets</span></header>
<main>
<section class="intro"><div class="label">The Driga identity</div><h1>Independent movements.<br>One clear presence.</h1><p>Murmur is Driga’s selected mark. Five flowing forms gather around an open center, giving independent activity a recognizable, coordinated shape.</p></section>
<div class="hero"><img src="../internal/web/static/brand/lockup.svg" alt="Driga’s red Murmur symbol alongside its wordmark" width="560" height="199"></div>
<section class="variations" aria-label="Symbol variants">
<div class="variant"><div class="plate" style="--plate:#ffdfd6"><img src="../internal/web/static/brand/murmur.svg" alt="Murmur in primary red" width="125" height="125"></div><p>Primary red <a href="../internal/web/static/brand/murmur.svg" download>Download SVG ↓</a></p></div>
<div class="variant"><div class="plate" style="--plate:#eef0f2"><img src="../internal/web/static/brand/murmur-ink.svg" alt="Murmur in ink" width="125" height="125"></div><p>Monochrome <a href="../internal/web/static/brand/murmur-ink.svg" download>Download SVG ↓</a></p></div>
<div class="variant"><div class="plate" style="--plate:#1b1e21"><img src="../internal/web/static/brand/murmur-white.svg" alt="Murmur in white on a dark background" width="125" height="125"></div><p>Reverse <a href="../internal/web/static/brand/murmur-white.svg" download>Download SVG ↓</a></p></div>
</section>
<section class="section"><h2>Color</h2><div class="palette"><div class="swatch"><i style="--swatch:#d20f39"></i><div>Red (Catppuccin Latte)<code>#D20F39</code></div></div><div class="swatch"><i style="--swatch:#1b1e21"></i><div>Ink<code>#1B1E21</code></div></div><div class="swatch"><i style="--swatch:#ffffff"></i><div>White<code>#FFFFFF</code></div></div></div></section>
<section class="section"><h2>Use with care</h2><div class="rules"><div><h3>Give it space.</h3><p>Leave clear space around the mark of at least one quarter of its displayed size. Keep the five forms together and preserve the open center.</p></div><div><h3>Keep the silhouette.</h3><p>Use the supplied SVGs for sharp rendering at any size. Scale proportionally, retain the orientation, and use the white version on dark surfaces.</p></div><div><h3>Choose the right format.</h3><p>Use the horizontal lockup where the name needs to lead. Use the symbol or app tile in compact spaces. The supplied favicon handles browser tabs.</p></div></div><div class="sizes" aria-label="Small-size examples"><figure><img src="../internal/web/static/brand/murmur.svg" width="16" height="16" alt="Murmur at 16 pixels"><figcaption>16 px</figcaption></figure><figure><img src="../internal/web/static/brand/murmur.svg" width="24" height="24" alt="Murmur at 24 pixels"><figcaption>24 px</figcaption></figure><figure><img src="../internal/web/static/brand/murmur.svg" width="32" height="32" alt="Murmur at 32 pixels"><figcaption>32 px</figcaption></figure><figure><img src="../internal/web/static/brand/murmur.svg" width="48" height="48" alt="Murmur at 48 pixels"><figcaption>48 px</figcaption></figure><figure><div class="app"><img src="../internal/web/static/brand/murmur-white.svg" width="54" height="54" alt="Murmur application tile"></div><figcaption>App tile</figcaption></figure></div></section>
<section class="section"><h2>Downloads</h2><div class="downloads"><a href="../internal/web/static/brand/lockup.svg" download>Horizontal lockup <span>SVG ↓</span></a><a href="../internal/web/static/brand/lockup-white.svg" download>White lockup <span>SVG ↓</span></a><a href="../internal/web/static/brand/lockup-ink.svg" download>Monochrome lockup <span>SVG ↓</span></a><a href="../internal/web/static/brand/lockup-stacked.svg" download>Stacked lockup <span>SVG ↓</span></a><a href="../internal/web/static/brand/murmur-1024.png" download>Transparent symbol <span>1024 px PNG ↓</span></a><a href="../internal/web/static/brand/lockup.png" download>Transparent lockup <span>1200 px PNG ↓</span></a><a href="../internal/web/static/brand/icon-512.png" download>Application icon <span>512 px PNG ↓</span></a><a href="../internal/web/static/brand/favicon.svg" download>Browser icon <span>SVG ↓</span></a></div></section>
<section class="section"><h2>Editable source</h2><p style="margin-top:16px;font-size:13px;max-width:680px;color:var(--muted)">Edit <a href="../internal/web/static/brand/murmur.svg">murmur.svg</a> for the five symbol shapes, or <a href="../internal/web/static/brand/wordmark.svg">wordmark.svg</a> for the lettering. Run <code>python3 scripts/generate-brand.py</code> to regenerate the variants and PNG exports. PNG rendering uses <code>rsvg-convert</code>; <code>--svg-only</code> generates just the vector variants. The master files are preserved. The selected geometry was traced from the approved concept artwork.</p></section>
</main>
<footer><span>Driga · Murmur identity</span><a href="../TRADEMARK.md">Trademark policy ↗</a></footer>
</body>
</html>