7411070fd6
- inline chain-link logo in every top nav and the two chain-emoji hero marks (index, sirius/register); shared.css sizes/colours it via .l1/.l2 - homepage hero figure: Theseus opening hello.bch (BCDN badge, no DNS) - Open Graph + Twitter card meta on all 13 silentmode.st pages, image brand/og.png (1200x630, rendered from the brand kit) - contrast: --dim 5e6678 -> 7a8496 (3.4:1 -> 5.1:1); default .btn no longer off-palette blue with 3.9:1 white text, now panel2/ink; nav links 9px pad - figure.shot styles for screenshots; tools/img/ holds the Theseus and Ariadne-Android shots for the download cards (wired in a follow-up, the tools page is mid-ship in another session) - scripts/serve-site.mjs: zero-dep static server for previewing site/
241 lines
12 KiB
HTML
241 lines
12 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">
|
||
<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="/tools/">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>
|
||
</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>
|