232 lines
11 KiB
HTML
232 lines
11 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.">
|
|||
|
|
<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>
|