ac53958af3
site/brand/social/ and site/brand/icon/ carry ready-to-upload PNGs at the sizes X, LinkedIn, Facebook, Instagram, GitHub and PWA manifests want: X header 1500x500, post 1200x675, LinkedIn 1584x396, Facebook 820x312, Instagram 1080, avatars 400/1024, icons 512/192, favicons 64/32, plus the Open Graph 1200x630 that every page already advertises. The brand page gained a "Social media and icons" section with download links. scripts/brand-assets.mjs renders the whole set from one HTML template via scripts/render-html-png.cjs (Electron offscreen). Windows clamps even an offscreen window to the work area, so captures taller than the screen are rendered as strips and stitched on a canvas inside the page. The VPS serves silentmode.st with Angie, not nginx (nginx.service is dead there), so the URL rules now live in VPS/SilentMode/silentmode-st.angie.conf, deployed and live. try_files lists $uri/index.html before $uri because a bare $uri also matches a directory and would 301 to add the slash back. GOTCHAS and the URL-scheme notes corrected accordingly.
306 lines
15 KiB
HTML
306 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Brand — Silent Mode</title>
|
||
<meta name="description" content="Silent Mode brand kit: logo, wordmark, avatar, banner, colors, usage. Two interlocking chain links — the family mark for the whole Silent Mode stack.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:site_name" content="Silent Mode">
|
||
<meta property="og:title" content="Brand — Silent Mode">
|
||
<meta property="og:description" content="Silent Mode brand kit: logo, wordmark, avatar, banner, colors, usage. Two interlocking chain links — the family mark for the whole Silent Mode stack.">
|
||
<meta property="og:url" content="https://silentmode.st/brand">
|
||
<meta property="og:image" content="https://silentmode.st/brand/og.png">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="630">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||
<link rel="stylesheet" href="shared.css?v=20260910">
|
||
<style>
|
||
.asset{background:var(--panel);border:1px solid var(--line);border-radius:14px;
|
||
padding:22px;margin-bottom:16px;display:grid;gap:14px;
|
||
grid-template-columns:1fr;align-items:center}
|
||
@media (min-width:800px){.asset{grid-template-columns:1fr 320px}}
|
||
.asset .preview{background:#0e131b;border:1px solid var(--line);border-radius:10px;
|
||
display:flex;align-items:center;justify-content:center;padding:22px;min-height:200px}
|
||
.asset .preview img{max-width:100%;max-height:340px;display:block}
|
||
.asset .meta h3{margin:0 0 .3rem;font-size:1.05rem}
|
||
.asset .meta p{margin:.3rem 0 0;color:var(--mut);font-size:14px;line-height:1.55}
|
||
.asset .meta .size{color:var(--dim);font-size:12.5px;letter-spacing:.02em;margin-top:.4rem}
|
||
.asset .meta .dl{display:flex;gap:8px;flex-wrap:wrap;margin-top:.9rem}
|
||
.asset .meta .dl a{padding:8px 14px;font-size:13px;border-radius:8px;
|
||
background:var(--panel2);border:1px solid var(--line);color:var(--ink);text-decoration:none}
|
||
.asset .meta .dl a:hover{border-color:var(--acid);color:var(--acid)}
|
||
|
||
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:1rem}
|
||
.swatch{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
|
||
.swatch .chip{height:80px}
|
||
.swatch .info{padding:10px 12px}
|
||
.swatch .info .n{font-size:13px;color:var(--ink);font-weight:600}
|
||
.swatch .info .h{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--dim);margin-top:2px}
|
||
.swatch .info .r{font-size:11.5px;color:var(--mut);margin-top:4px;line-height:1.4}
|
||
|
||
.dont{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--taken);
|
||
border-radius:10px;padding:12px 16px;color:var(--mut);font-size:13.5px}
|
||
.dont ul{margin:.4rem 0 0;padding-left:1.2rem}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="topnav">
|
||
<a class="brand" href="./"><svg class="logo" viewBox="0 0 32 20" aria-hidden="true"><rect class="l1" x="1.5" y="3.5" width="17" height="13" rx="6.5" ry="6.5" fill="none" stroke-width="2.6"/><rect class="l2" x="13.5" y="3.5" width="17" height="13" rx="6.5" ry="6.5" fill="none" stroke-width="2.6"/></svg>Silent <span class="g">Mode</span></a>
|
||
<a href="theseus">Theseus</a>
|
||
<a href="prometheus">Prometheus</a>
|
||
<a href="sirius">Sirius</a>
|
||
<a href="hephaestus">Hephaestus</a>
|
||
<a href="helios">Helios</a>
|
||
<a href="hermes">Hermes</a>
|
||
<a href="tools">Tools</a>
|
||
</nav>
|
||
|
||
<header class="hero">
|
||
<div class="mark" style="font-size:52px">
|
||
<img src="brand/logo.svg" alt="" style="height:64px;vertical-align:middle">
|
||
</div>
|
||
<h1>Silent Mode — <span class="g">brand</span></h1>
|
||
<p class="tag">Two interlocking chain links, one acid green — the family mark for
|
||
every Silent Mode product. Kit below: logo, wordmark, avatar, banner, palette,
|
||
usage. Every asset is a scalable SVG, and the <a href="brand#social">social section</a>
|
||
has PNGs at every platform size.</p>
|
||
</header>
|
||
|
||
<div class="wrap">
|
||
|
||
<!-- ============ ASSETS ============ -->
|
||
<section class="plain">
|
||
<h2>Assets</h2>
|
||
|
||
<div class="asset">
|
||
<div class="preview"><img src="brand/logo.svg" alt="Silent Mode logo" style="max-height:200px"></div>
|
||
<div class="meta">
|
||
<h3>Logo</h3>
|
||
<p>Two interlocking chain links. Use where the mark stands alone — favicons,
|
||
app icons, small tile placements. Reads at any size from 16 px up.</p>
|
||
<div class="size">SVG · viewBox 200×200 · scalable</div>
|
||
<div class="dl">
|
||
<a href="brand/logo.svg" download>SVG</a>
|
||
<a href="brand/logo.svg" target="_blank" rel="noopener">Open</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="asset">
|
||
<div class="preview"><img src="brand/wordmark.svg" alt="Silent Mode wordmark"></div>
|
||
<div class="meta">
|
||
<h3>Wordmark</h3>
|
||
<p>Mark + "Silent <b style="color:var(--acid)">Mode</b>" set at 56 px, letter
|
||
spacing 0.4. Use for horizontal placements — page headers, business cards,
|
||
email signatures.</p>
|
||
<div class="size">SVG · viewBox 640×120</div>
|
||
<div class="dl">
|
||
<a href="brand/wordmark.svg" download>SVG</a>
|
||
<a href="brand/wordmark.svg" target="_blank" rel="noopener">Open</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="asset">
|
||
<div class="preview"><img src="brand/avatar.svg" alt="Silent Mode avatar" style="max-height:280px"></div>
|
||
<div class="meta">
|
||
<h3>Avatar</h3>
|
||
<p>Square 400×400 with radial background, centred mark, wordmark below.
|
||
Sized for social profile pictures — X, Mastodon, Nostr, GitHub org avatar.
|
||
Rasters cleanly to 200×200 and 100×100.</p>
|
||
<div class="size">SVG · viewBox 400×400</div>
|
||
<div class="dl">
|
||
<a href="brand/avatar.svg" download>SVG</a>
|
||
<a href="brand/avatar.svg" target="_blank" rel="noopener">Open</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="asset" style="grid-template-columns:1fr">
|
||
<div class="preview" style="padding:14px"><img src="brand/banner.svg" alt="Silent Mode banner" style="width:100%;max-height:none"></div>
|
||
<div class="meta">
|
||
<h3>Banner</h3>
|
||
<p>Wide 1500×500 header for X / Mastodon covers, GitHub org banners, OG social
|
||
cards. Tagline and second-line URL are text nodes — edit in a vector editor
|
||
if you need a different language or campaign.</p>
|
||
<div class="size">SVG · viewBox 1500×500 · 3:1 aspect</div>
|
||
<div class="dl">
|
||
<a href="brand/banner.svg" download>SVG</a>
|
||
<a href="brand/banner.svg" target="_blank" rel="noopener">Open</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="asset">
|
||
<div class="preview" style="padding:36px"><img src="favicon.svg" alt="Silent Mode favicon" style="max-height:120px;image-rendering:pixelated"></div>
|
||
<div class="meta">
|
||
<h3>Favicon</h3>
|
||
<p>The same mark, compressed for tab-bar and bookmark rendering. Served from
|
||
<code class="inline">/favicon.svg</code>. Also works as a 16×16 PNG once
|
||
rasterised — the shape holds.</p>
|
||
<div class="size">SVG · viewBox 32×32</div>
|
||
<div class="dl">
|
||
<a href="favicon.svg" download="favicon.svg">SVG</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ PALETTE ============ -->
|
||
<!-- ============ SOCIAL + ICONS (PNG) ============ -->
|
||
<section id="social">
|
||
<h2>Social media and icons</h2>
|
||
<p class="lede">Ready-made PNGs at the sizes each platform wants. Same mark, same
|
||
palette, rendered from the SVGs above; nothing here needs editing before upload.
|
||
X, GitHub, Discord, LinkedIn, Instagram and Facebook all refuse SVG for avatars
|
||
and headers, so use these.</p>
|
||
|
||
<div class="asset">
|
||
<div class="preview"><img src="brand/social/x-header-1500x500.png" alt="Silent Mode header banner, 1500 by 500" loading="lazy"></div>
|
||
<div class="meta">
|
||
<h3>Headers and banners</h3>
|
||
<p>Mark, wordmark, one-line description and the two addresses. The layout keeps
|
||
the left 60% clear of platform overlays; the avatar sits over the bottom-left
|
||
on X without covering text.</p>
|
||
<div class="size">PNG · flattened on the dark ground</div>
|
||
<div class="dl">
|
||
<a href="brand/social/x-header-1500x500.png" download>X header 1500×500</a>
|
||
<a href="brand/social/linkedin-banner-1584x396.png" download>LinkedIn 1584×396</a>
|
||
<a href="brand/social/facebook-cover-820x312.png" download>Facebook 820×312</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="asset">
|
||
<div class="preview"><img src="brand/social/x-post-1200x675.png" alt="Silent Mode post card, 1200 by 675" loading="lazy"></div>
|
||
<div class="meta">
|
||
<h3>Post and link cards</h3>
|
||
<p>For tweets, announcements and anywhere a 16:9 image is embedded. The 1200×630
|
||
version is what every silentmode.st page advertises as its Open Graph image,
|
||
so shared links already show it.</p>
|
||
<div class="size">PNG · 16:9 and 1.91:1</div>
|
||
<div class="dl">
|
||
<a href="brand/social/x-post-1200x675.png" download>Post 1200×675</a>
|
||
<a href="brand/og.png" download="silentmode-og-1200x630.png">Open Graph 1200×630</a>
|
||
<a href="brand/social/instagram-square-1080x1080.png" download>Square 1080×1080</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="asset">
|
||
<div class="preview"><img src="brand/social/avatar-400.png" alt="Silent Mode avatar, 400 by 400" style="max-height:240px;border-radius:50%" loading="lazy"></div>
|
||
<div class="meta">
|
||
<h3>Avatars and app icons</h3>
|
||
<p>Avatar: mark over the wordmark on the dark ground, safe inside a circle crop.
|
||
Icons: the mark alone on flat <code class="inline">#0b0e14</code> for
|
||
favicons, PWA manifests and store listings.</p>
|
||
<div class="size">PNG · square</div>
|
||
<div class="dl">
|
||
<a href="brand/social/avatar-400.png" download>Avatar 400</a>
|
||
<a href="brand/social/avatar-1024.png" download>Avatar 1024</a>
|
||
<a href="brand/icon/icon-512.png" download>Icon 512</a>
|
||
<a href="brand/icon/icon-192.png" download>Icon 192</a>
|
||
<a href="brand/icon/favicon-64.png" download>Favicon 64</a>
|
||
<a href="brand/icon/favicon-32.png" download>Favicon 32</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="color:var(--dim);font-size:13px;margin:1rem 0 0">Regenerate the whole set
|
||
after a palette or mark change with <code class="inline">node scripts/brand-assets.mjs</code>
|
||
in the repo; it renders every size from one template.</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Palette</h2>
|
||
<p class="lede">Small palette on purpose — one accent, one text tone, three greys,
|
||
a couple of semantics. Same tokens the whole site's <code class="inline">shared.css</code>
|
||
exposes as CSS variables.</p>
|
||
|
||
<div class="palette">
|
||
<div class="swatch"><div class="chip" style="background:#d6ff3d"></div>
|
||
<div class="info"><div class="n">Acid</div><div class="h">#d6ff3d</div>
|
||
<div class="r">The accent — links, marks, active state, one CTA per view.</div></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#0b0e14"></div>
|
||
<div class="info"><div class="n">Ink (bg)</div><div class="h">#0b0e14</div>
|
||
<div class="r">Page background. Dark by default; a light theme is the exception.</div></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#141a24"></div>
|
||
<div class="info"><div class="n">Panel</div><div class="h">#141a24</div>
|
||
<div class="r">Cards, buttons ghost, elevated surfaces.</div></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#e7eaf1"></div>
|
||
<div class="info"><div class="n">Text</div><div class="h">#e7eaf1</div>
|
||
<div class="r">Body ink.</div></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#8b98a9"></div>
|
||
<div class="info"><div class="n">Muted</div><div class="h">#8b98a9</div>
|
||
<div class="r">Secondary text, disabled state, muted mark stroke.</div></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#5e6678"></div>
|
||
<div class="info"><div class="n">Dim</div><div class="h">#5e6678</div>
|
||
<div class="r">Meta, timestamps, "less important than muted".</div></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#b39ddb"></div>
|
||
<div class="info"><div class="n">Sia</div><div class="h">#b39ddb</div>
|
||
<div class="r">Storage badge. Only for "content lives on Sia".</div></div></div>
|
||
<div class="swatch"><div class="chip" style="background:#4fd1a5"></div>
|
||
<div class="info"><div class="n">Server</div><div class="h">#4fd1a5</div>
|
||
<div class="r">Server badge. Only for "content lives on an ordinary server".</div></div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ USAGE ============ -->
|
||
<section>
|
||
<h2>Usage</h2>
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h3>Where the mark goes</h3>
|
||
<p>Anywhere Silent Mode itself is the subject: project sites, README banners,
|
||
social profiles, presentation title slides. If a specific product is the
|
||
subject (Theseus, Sirius, Prometheus, Hermes, Helios), prefer <i>that</i>
|
||
product's own mark and reserve this one for the umbrella.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Clear space</h3>
|
||
<p>Give the mark clearance equal to one chain-link on every side. On the banner
|
||
this is honoured by the left-margin; when placing the logo yourself, respect it.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Colours in prose</h3>
|
||
<p>The word "Mode" is in acid; the rest is body text. Don't reverse — "Silent"
|
||
in acid + "Mode" in body doesn't read as this brand.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Rasterising</h3>
|
||
<p>SVG is the canonical format. Any modern image tool can convert it to PNG
|
||
at the size you need; Inkscape and rsvg-convert are the free defaults.
|
||
Don't distribute a low-fidelity trace as "the logo".</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dont" style="margin-top:1.4rem">
|
||
<b>Don't:</b>
|
||
<ul>
|
||
<li>Recolour the mark into the palette of another product or brand.</li>
|
||
<li>Distort the chain-link proportions (they read as chain because of the ratio; squished, they don't).</li>
|
||
<li>Place the mark on a busy image without a solid backing panel.</li>
|
||
<li>Use the mark to endorse a third-party product, service, or claim without written permission.</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="note"><b>Related brand kits.</b> Navigate.st has its own mark (a compass
|
||
rose in a chain-link ring) at <a href="https://navigate.st/brand/">navigate.st/brand/</a>.
|
||
Each Silent Mode product (Theseus, Sirius, Prometheus, Hermes, Helios) will
|
||
eventually have its own kit; this one is the umbrella.</div>
|
||
|
||
</div>
|
||
|
||
<footer>
|
||
<div>Silent Mode — a Deviant project.</div>
|
||
<div class="fine">Brand kit v1 · 2026-08-20. Everything in this kit is licensed for
|
||
accurate reference to the Silent Mode project. For commercial use of the mark
|
||
outside that scope, ask first.</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|