58712e77da
Bulk-inserts <link rel="icon" type="image/svg+xml" href="/favicon.svg"> before the </head> tag on every silentmode.st page that was missing it. All 36 site HTML pages now advertise the chain-links favicon; browsers show it in tabs and bookmarks across the whole umbrella site. Pages touched (29): apps/, choose/*, deviant/* (7 pages under the parent house), hephaestus/, hephaestus.x/* (9 chain-published mirror pages), nav/ (redirect stub), register.html (redirect stub), sirius/, sirius/register.html, store/ (redirect stub), tlds/. Already had favicon from earlier passes (7): index.html, brand/, tools/, prometheus/, helios/, hermes/, releases/. Line-ending preservation: choose/index.html and sirius/register.html were originally stored with CRLF endings; the plain Python read/write path normalized them to LF and produced a noisy diff. Both files re-serialized as CRLF before the favicon insert to keep the diff to +1 line each. Deploy: rsync-equivalent tar-pipe to /opt/silent-mode/site/, plus per-file scp for the two CRLF-corrected files. Verified live: 7 spot-checked URLs each report exactly one <link rel="icon"> in served HTML. |
||
|---|---|---|
| .. | ||
| icon | ||
| logo | ||
| social | ||
| source | ||
| index.html | ||
| palette.md | ||
| README.md | ||
Deviant — Brand assets
Canonical brand assets for the Deviant project. Source of truth for logos, icons,
and social-media cards. All primary assets are SVG (resolution-independent,
editable in code); PNG exports live under source/exports/ when tooling
generates them.
Contents
| Path | Purpose |
|---|---|
palette.md |
Color tokens + typography, extracted from the landing page CSS |
logo/ |
Wordmarks and combination marks |
icon/ |
App icons, favicons, the D-mark alone |
social/ |
Open Graph, Twitter card, avatar |
source/ |
Editable working files, exports, raw art |
Voice — one paragraph
Deviant exists to enable resistance — by giving users on-chain experience that intermediation cannot mediate.
Tagline (short): Power Your Ideas. Tagline (subline): A response to a default trajectory.
The mark
The Deviant mark is a stylized "D" as an orbital crescent on a starfield, with a single acid-yellow dot orbiting the outer ring. It reads two ways:
- Letterform:
Dfor Deviant. - Astronomical: a partial planetary disc with a satellite — the "deviation from the default trajectory" imagery encoded in the logo itself.
Never redraw the orbital dot inside the ring, never tint it any other color —
the acid yellow (--acid) is the load-bearing accent across the whole system.
Themes
Both themes ship — the landing page respects data-theme="editorial" in
localStorage; assets should exist for both:
- signal (default): starfield ink on cool deep-space blue. Acid
#d6ff3d. - editorial: near-monochrome charcoal, more graphic. Acid
#c6ff00.
See palette.md for exact values.
What to use where
| Surface | Asset | Size |
|---|---|---|
| Browser tab / OS icon | icon/favicon.svg, icon/icon-512.svg |
64 / 512 |
| App shell splash | icon/icon-512.svg |
512 (matches shells/app/public/icon.svg) |
| Website header, README | logo/deviant-wordmark.svg |
720×180 |
| Print / dark surfaces | logo/deviant-mark.svg |
256×256, no background |
| Print / light surfaces | logo/deviant-mark-onlight.svg |
256×256, inverted |
| Open Graph (Facebook, LinkedIn, Slack unfurls) | social/og-1200x630.svg |
1200×630 |
| Twitter/X post card (summary_large_image) | social/twitter-card-1200x675.svg |
1200×675 (16:9, current spec) |
| Twitter/X header (profile banner) | social/twitter-header-1500x500.svg |
1500×500 (3:1, with profile-photo safe zone) |
| Facebook page cover | social/facebook-cover-820x312.svg |
820×312 desktop / 640×360 mobile-safe |
| LinkedIn company banner | social/linkedin-banner-1584x396.svg |
1584×396 (with profile-photo safe zone) |
| Instagram feed post | social/instagram-square-1080x1080.svg |
1080×1080 (also works for Discord/Threads) |
| Social avatar (X, GitHub, Discord, LinkedIn) | social/avatar-400x400.svg |
400×400, round-crop-safe |
Fonts
Every SVG with text loads the website's own faces (Fraunces + DM Sans +
JetBrains Mono) via a <style>@import url(fonts.googleapis.com/...)</style>
block inside the SVG. That means:
- In a browser (opening the SVG directly, or embedding via
<img>) the Google fonts fetch and render — same as the website. - In
rsvg-convert/ most SVG-to-PNG renderers the@importis IGNORED (they don't fetch remote CSS) and the fallback stack applies: Georgia for display, system sans for body. If pixel-perfect PNG exports matter, either install Fraunces + DM Sans locally on the export machine, or export from a browser screenshot instead (seesource/README.md).
The <style> block never breaks anything — it degrades to the fallback stack.
PNG exports
SVGs are the source. When a platform demands PNG:
# One-off — needs rsvg-convert (fonts fall back) or a headless browser (fonts real)
rsvg-convert -w 1200 -h 630 brand/social/og-1200x630.svg -o brand/source/exports/og-1200x630.png
Do not check in PNGs unless a specific delivery pipeline requires them —
source/exports/ is .gitignore-friendly for that reason.
Do
- Keep the acid dot outside the ring (upper-right, ~2 o'clock).
- Use Fraunces for display type, DM Sans for body, JetBrains Mono or DM Mono for code / addresses / hashes.
- Preserve the black-with-starfield background on dark surfaces; the mark is designed for it.
Don't
- Don't recolor the acid dot — that yellow-green is the brand.
- Don't add glow to the wordmark; the glow lives only on the orbital dot.
- Don't tighten the letterspacing of "Deviant" below −0.02em; the wordmark breathes.
- Don't put the wordmark on the acid color as a background.