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
parent
1a17f5fa4e
commit
e5ed801ea7
12 changed files with 314 additions and 0 deletions
20
brand/avatar.svg
Normal file
20
brand/avatar.svg
Normal 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
28
brand/banner.svg
Normal 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
231
brand/index.html
Normal 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
7
brand/logo.svg
Normal 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
13
brand/wordmark.svg
Normal 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
9
favicon.svg
Normal 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 |
|
|
@ -6,6 +6,7 @@
|
|||
<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.">
|
||||
<link rel="stylesheet" href="../shared.css">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<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.">
|
||||
<link rel="stylesheet" href="../shared.css">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<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.">
|
||||
<link rel="stylesheet" href="shared.css">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
.banner h3{margin:0 0 .3rem;font-size:1.1rem}
|
||||
.banner p{margin:.2rem 0 0;color:var(--mut);font-size:14.5px}
|
||||
</style>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
footer{color:var(--dim);font-size:12.5px;margin-top:2.5rem;text-align:center}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../shared.css">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@
|
|||
.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}
|
||||
</style>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue