Silent Mode — brand

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 social section has PNGs at every platform size.

Assets

Silent Mode logo

Logo

Two interlocking chain links. Use where the mark stands alone — favicons, app icons, small tile placements. Reads at any size from 16 px up.

SVG · viewBox 200×200 · scalable
SVG Open
Silent Mode wordmark

Wordmark

Mark + "Silent Mode" set at 56 px, letter spacing 0.4. Use for horizontal placements — page headers, business cards, email signatures.

SVG · viewBox 640×120
SVG Open
Silent Mode avatar

Avatar

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.

SVG · viewBox 400×400
SVG Open
Silent Mode banner

Banner

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.

SVG · viewBox 1500×500 · 3:1 aspect
SVG Open
Silent Mode favicon

Favicon

The same mark, compressed for tab-bar and bookmark rendering. Served from /favicon.svg. Also works as a 16×16 PNG once rasterised — the shape holds.

SVG · viewBox 32×32
SVG

Social media and icons

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.

Silent Mode header banner, 1500 by 500

Headers and banners

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.

PNG · flattened on the dark ground
X header 1500×500 LinkedIn 1584×396 Facebook 820×312
Silent Mode post card, 1200 by 675

Post and link cards

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.

PNG · 16:9 and 1.91:1
Post 1200×675 Open Graph 1200×630 Square 1080×1080
Silent Mode avatar, 400 by 400

Avatars and app icons

Avatar: mark over the wordmark on the dark ground, safe inside a circle crop. Icons: the mark alone on flat #0b0e14 for favicons, PWA manifests and store listings.

PNG · square
Avatar 400 Avatar 1024 Icon 512 Icon 192 Favicon 64 Favicon 32

Regenerate the whole set after a palette or mark change with node scripts/brand-assets.mjs in the repo; it renders every size from one template.

Palette

Small palette on purpose — one accent, one text tone, three greys, a couple of semantics. Same tokens the whole site's shared.css exposes as CSS variables.

Acid
#d6ff3d
The accent — links, marks, active state, one CTA per view.
Ink (bg)
#0b0e14
Page background. Dark by default; a light theme is the exception.
Panel
#141a24
Cards, buttons ghost, elevated surfaces.
Text
#e7eaf1
Body ink.
Muted
#8b98a9
Secondary text, disabled state, muted mark stroke.
Dim
#5e6678
Meta, timestamps, "less important than muted".
Sia
#b39ddb
Storage badge. Only for "content lives on Sia".
Server
#4fd1a5
Server badge. Only for "content lives on an ordinary server".

Usage

Where the mark goes

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 that product's own mark and reserve this one for the umbrella.

Clear space

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.

Colours in prose

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.

Rasterising

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".

Don't:
  • Recolour the mark into the palette of another product or brand.
  • Distort the chain-link proportions (they read as chain because of the ratio; squished, they don't).
  • Place the mark on a busy image without a solid backing panel.
  • Use the mark to endorse a third-party product, service, or claim without written permission.
Related brand kits. Navigate.st has its own mark (a compass rose in a chain-link ring) at navigate.st/brand/. Each Silent Mode product (Theseus, Sirius, Prometheus, Hermes, Helios) will eventually have its own kit; this one is the umbrella.