brand: Silent Mode + navigate.st kits (logo, wordmark, avatar, banner, favicon)

Two brand kits, one design language. Each site now has a /brand/ page + a
favicon; every page I own on silentmode.st links the SVG favicon (parallel
sessions can add the same line to Sirius/Hephaestus/Choose when they touch
those files).

Silent Mode kit (site/brand/, site/favicon.svg):
  Mark   — two interlocking chain links, one muted (#8b98a9) + one acid
           (#d6ff3d). The umbrella family mark.
  Logo, wordmark, avatar (400x400 social), banner (1500x500 social header).
  Brand page shows every asset with SVG download, colour palette
  (tokens matching shared.css), usage do's and don'ts.

navigate.st kit (navigate.st/brand/, navigate.st/favicon.svg):
  Mark   — compass rose (N acid, other points muted) inside a chain-link
           ring. Ring keeps it in the Silent Mode family without cloning the
           SilentMode mark; compass says what this specific site is (the
           wayfinding front door).
  Same asset set: logo, wordmark, avatar, banner. Standalone brand page
  (no shared.css — navigate.st runs single-file).

nginx (VPS): added two locations to sites-enabled/navigate-st so /favicon.svg
and /brand/* resolve from /opt/silent-mode/navigate-brand/. Rollback point
at sites-enabled/navigate-st.bak.1788146513. silentmode.st serves both from
disk under /opt/silent-mode/site/ — no vhost change needed.

Verified live: all favicon + brand URLs return 200 on both hosts.
This commit is contained in:
Local Dev 2026-08-31 05:22:45 +02:00
parent 1a17f5fa4e
commit e5ed801ea7
12 changed files with 314 additions and 0 deletions

20
brand/avatar.svg Normal file
View file

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<title>Silent Mode — avatar (400×400 profile square)</title>
<defs>
<radialGradient id="bg" cx="50%" cy="18%" r="90%">
<stop offset="0%" stop-color="#16202e"/>
<stop offset="100%" stop-color="#0b0e14"/>
</radialGradient>
</defs>
<rect width="400" height="400" fill="url(#bg)"/>
<g transform="translate(70,140)">
<rect x="0" y="0" width="150" height="90" rx="45" ry="45"
fill="none" stroke="#8b98a9" stroke-width="18"/>
<rect x="110" y="0" width="150" height="90" rx="45" ry="45"
fill="none" stroke="#d6ff3d" stroke-width="18"/>
</g>
<text x="200" y="310" font-family="system-ui,-apple-system,Segoe UI,sans-serif"
font-size="38" font-weight="600" text-anchor="middle" fill="#e7eaf1">
Silent <tspan fill="#d6ff3d">Mode</tspan>
</text>
</svg>

After

Width:  |  Height:  |  Size: 882 B

28
brand/banner.svg Normal file
View file

@ -0,0 +1,28 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 500">
<title>Silent Mode — banner (1500×500 social header)</title>
<defs>
<radialGradient id="bg" cx="30%" cy="0%" r="90%">
<stop offset="0%" stop-color="#16202e"/>
<stop offset="100%" stop-color="#0b0e14"/>
</radialGradient>
</defs>
<rect width="1500" height="500" fill="url(#bg)"/>
<g transform="translate(160,205)">
<rect x="0" y="0" width="130" height="90" rx="45" ry="45"
fill="none" stroke="#8b98a9" stroke-width="14"/>
<rect x="100" y="0" width="130" height="90" rx="45" ry="45"
fill="none" stroke="#d6ff3d" stroke-width="14"/>
</g>
<text x="450" y="255" font-family="system-ui,-apple-system,Segoe UI,sans-serif"
font-size="82" font-weight="600" fill="#e7eaf1" letter-spacing="0.4">
Silent <tspan fill="#d6ff3d">Mode</tspan>
</text>
<text x="452" y="310" font-family="system-ui,-apple-system,Segoe UI,sans-serif"
font-size="28" font-weight="400" fill="#8b98a9">
Decentralized web infrastructure — names, hosting, browsers, search, messaging.
</text>
<text x="452" y="345" font-family="ui-monospace,SFMono-Regular,Menlo,monospace"
font-size="20" fill="#5e6678">
silentmode.st · silentmode.bch (on chain)
</text>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

231
brand/index.html Normal file
View file

@ -0,0 +1,231 @@
<!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.">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/shared.css">
<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="/">⛓️ Silent <span class="g">Mode</span></a>
<a href="/tools/">Tools</a>
<a href="/prometheus/">Prometheus</a>
<a href="/sirius/">Sirius</a>
<a href="/helios/">Helios</a>
<a href="/hermes/">Hermes</a>
</nav>
<header class="hero">
<div class="mark" style="font-size:52px">
<img src="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; raster it to whatever platform demands
a PNG.</p>
</header>
<div class="wrap">
<!-- ============ ASSETS ============ -->
<section class="plain">
<h2>Assets</h2>
<div class="asset">
<div class="preview"><img src="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="logo.svg" download>SVG</a>
<a href="logo.svg" target="_blank" rel="noopener">Open</a>
</div>
</div>
</div>
<div class="asset">
<div class="preview"><img src="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="wordmark.svg" download>SVG</a>
<a href="wordmark.svg" target="_blank" rel="noopener">Open</a>
</div>
</div>
</div>
<div class="asset">
<div class="preview"><img src="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="avatar.svg" download>SVG</a>
<a href="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="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="banner.svg" download>SVG</a>
<a href="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 ============ -->
<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>

7
brand/logo.svg Normal file
View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<title>Silent Mode — logo</title>
<rect x="24" y="70" width="90" height="60" rx="30" ry="30"
fill="none" stroke="#8b98a9" stroke-width="12"/>
<rect x="86" y="70" width="90" height="60" rx="30" ry="30"
fill="none" stroke="#d6ff3d" stroke-width="12"/>
</svg>

After

Width:  |  Height:  |  Size: 344 B

13
brand/wordmark.svg Normal file
View file

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 120">
<title>Silent Mode — wordmark</title>
<g transform="translate(8,0)">
<rect x="8" y="42" width="72" height="52" rx="26" ry="26"
fill="none" stroke="#8b98a9" stroke-width="8"/>
<rect x="60" y="42" width="72" height="52" rx="26" ry="26"
fill="none" stroke="#d6ff3d" stroke-width="8"/>
</g>
<text x="160" y="88" font-family="system-ui,-apple-system,Segoe UI,Roboto,sans-serif"
font-size="56" font-weight="600" letter-spacing="0.4" fill="#e7eaf1">
Silent <tspan fill="#d6ff3d">Mode</tspan>
</text>
</svg>

After

Width:  |  Height:  |  Size: 615 B

9
favicon.svg Normal file
View file

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<!-- Silent Mode — two interlocking chain links. Left link muted so the right
(acid) reads as the accent; overlap is honest, not faked with clipping. -->
<title>Silent Mode</title>
<rect x="3.5" y="10" width="15" height="12" rx="6" ry="6"
fill="none" stroke="#8b98a9" stroke-width="2.5"/>
<rect x="13.5" y="10" width="15" height="12" rx="6" ry="6"
fill="none" stroke="#d6ff3d" stroke-width="2.5"/>
</svg>

After

Width:  |  Height:  |  Size: 499 B

View file

@ -6,6 +6,7 @@
<title>Helios — searching the decentralized web — Silent Mode</title> <title>Helios — searching the decentralized web — Silent Mode</title>
<meta name="description" content="Helios is the search engine Silent Mode is designing for the decentralized web — no central crawler to trust, no authority to rank, no advertiser to serve. Reads what BCH says exists."> <meta name="description" content="Helios is the search engine Silent Mode is designing for the decentralized web — no central crawler to trust, no authority to rank, no advertiser to serve. Reads what BCH says exists.">
<link rel="stylesheet" href="../shared.css"> <link rel="stylesheet" href="../shared.css">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head> </head>
<body> <body>

View file

@ -6,6 +6,7 @@
<title>Hermes — messaging by name — Silent Mode</title> <title>Hermes — messaging by name — Silent Mode</title>
<meta name="description" content="Hermes: end-to-end encrypted messaging where your Bitcoin Cash name is your identity. NIP-17 sealed DMs over Nostr, no email, no phone number, no company account."> <meta name="description" content="Hermes: end-to-end encrypted messaging where your Bitcoin Cash name is your identity. NIP-17 sealed DMs over Nostr, no email, no phone number, no company account.">
<link rel="stylesheet" href="../shared.css"> <link rel="stylesheet" href="../shared.css">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head> </head>
<body> <body>

View file

@ -6,6 +6,7 @@
<title>Silent Mode — decentralized web infrastructure</title> <title>Silent Mode — decentralized web infrastructure</title>
<meta name="description" content="Silent Mode is a development department for the decentralized web. Names on the Bitcoin Cash chain (Sirius), apps on Sia (Prometheus), search without a gatekeeper (Helios), messaging by name (Hermes), a code forge that signs you in with a wallet (Hephaestus), and the clients that reach them all."> <meta name="description" content="Silent Mode is a development department for the decentralized web. Names on the Bitcoin Cash chain (Sirius), apps on Sia (Prometheus), search without a gatekeeper (Helios), messaging by name (Hermes), a code forge that signs you in with a wallet (Hephaestus), and the clients that reach them all.">
<link rel="stylesheet" href="shared.css"> <link rel="stylesheet" href="shared.css">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head> </head>
<body> <body>

View file

@ -30,6 +30,7 @@
.banner h3{margin:0 0 .3rem;font-size:1.1rem} .banner h3{margin:0 0 .3rem;font-size:1.1rem}
.banner p{margin:.2rem 0 0;color:var(--mut);font-size:14.5px} .banner p{margin:.2rem 0 0;color:var(--mut);font-size:14.5px}
</style> </style>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head> </head>
<body> <body>

View file

@ -28,6 +28,7 @@
footer{color:var(--dim);font-size:12.5px;margin-top:2.5rem;text-align:center} footer{color:var(--dim);font-size:12.5px;margin-top:2.5rem;text-align:center}
</style> </style>
<link rel="stylesheet" href="../shared.css"> <link rel="stylesheet" href="../shared.css">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head> </head>
<body> <body>

View file

@ -66,6 +66,7 @@
.hashes code{font-family:ui-monospace,monospace;font-size:11.5px;color:#c9d4e3;word-break:break-all} .hashes code{font-family:ui-monospace,monospace;font-size:11.5px;color:#c9d4e3;word-break:break-all}
.platform-line{color:var(--dim);font-size:12.5px;margin-top:.2rem;letter-spacing:.02em} .platform-line{color:var(--dim);font-size:12.5px;margin-top:.2rem;letter-spacing:.02em}
</style> </style>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head> </head>
<body> <body>