bch_qzjqnzgjz7w9tdflpz6u/deviant
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(brand): mirror silentmode brand/ assets into the repo + publish to potidaea.asm

Browse source 
Prior state: the brand assets (Deviant mark + wordmark, favicon, social cards,
palette doc, voice doc, PNG exports) lived ONLY at silentmode:/opt/silent-mode/
site/deviant/brand/ — no git history, no Sia fallback, no backup. Deleting
silentmode would have lost them.

This commit pulls the full 35-file tree into site/deviant/brand/ so the repo
is the source of truth going forward.

Simultaneously (not in this commit — deploy step): uploaded the same tree
to Sia at bns/potidaea/branding/, so the branding page is now also live at:

  https://navigate.st/bns/potidaea.asm/branding/   (via BNS gateway)
  https://navigate.st/bns/potidaea.asm/branding/social/
  https://navigate.st/bns/potidaea.asm/branding/logo/deviant-mark.svg

Alongside the existing deviant.x publication:

  https://navigate.st/deviant/brand/
  https://deviant.x/brand/   (BNS canonical)

Both routes serve the same 'Deviant brand' page because Potidaea is a product
of the Deviant project — showing the parent brand under the product URL is
the honest framing. A Potidaea-specific brand page can land later if we
decide the product deserves its own visual identity surface.

Deploy path for future edits — same two-leg pattern as docs/, with the
Potidaea quirk that its Sia prefix is bns/potidaea/ (not bns/potidaea.asm/,
per potidaea.asm's on-chain s3 record):

  scp -r site/deviant/brand/ silentmode:/opt/silent-mode/site/deviant/
  cd D:/Dev/SilentMode
  node Argus/src/lib/sia-upload.js D:/Dev/Deviant/site/deviant/brand bns/deviant.x/brand
  node Argus/src/lib/sia-upload.js D:/Dev/Deviant/site/deviant/brand bns/potidaea/branding

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Local Dev 2026-10-22 00:48:54 +03:00
parent 1ca645f680
commit f7529ef77b
35 changed files with 1519 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
site/deviant/brand/README.md Normal file
View file

@ -0,0 +1,106 @@
# 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`](palette.md) | Color tokens + typography, extracted from the landing page CSS |
| [`logo/`](logo/) | Wordmarks and combination marks |
| [`icon/`](icon/) | App icons, favicons, the D-mark alone |
| [`social/`](social/) | Open Graph, Twitter card, avatar |
| [`source/`](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: `D` for 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`](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 `@import` is 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 (see `source/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:
```bash
# 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.

5
site/deviant/brand/icon/favicon.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="Deviant">
<rect width="64" height="64" rx="14" fill="#070d1a"/>
<path d="M20 16 h8 a16 16 0 0 1 0 32 h-8 z M28 22 v20 a10 10 0 0 0 0 -20 z" fill="#d6dde9"/>
<circle cx="47" cy="20" r="4.5" fill="#d6ff3d"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 325 B

25
site/deviant/brand/icon/icon-512.svg Normal file
View file

@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" role="img" aria-label="Deviant">
<defs>
<radialGradient id="sky" cx="32%" cy="28%" r="90%">
<stop offset="0%" stop-color="#0c1220"/>
<stop offset="55%" stop-color="#070d1a"/>
<stop offset="100%" stop-color="#02040a"/>
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="10" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<rect width="512" height="512" rx="114" fill="url(#sky)"/>
<g fill="#b8c2d4" opacity="0.5">
<circle cx="96" cy="120" r="2"/>
<circle cx="150" cy="86" r="1.5"/>
<circle cx="412" cy="150" r="2"/>
<circle cx="380" cy="96" r="1.5"/>
<circle cx="430" cy="392" r="1.8"/>
<circle cx="120" cy="408" r="1.6"/>
</g>
<ellipse cx="256" cy="256" rx="150" ry="92" fill="none" stroke="#2a3650" stroke-width="8" transform="rotate(-22 256 256)"/>
<path d="M196 156 h44 a100 100 0 0 1 0 200 h-44 z M236 196 v120 a60 60 0 0 0 0 -120 z" fill="#d6dde9"/>
<circle cx="372" cy="190" r="22" fill="#d6ff3d" filter="url(#glow)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

370
site/deviant/brand/index.html Normal file
View file

@ -0,0 +1,370 @@
<!doctype html>
<html lang="en" data-theme="signal">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BNS gateways (navigate.st/bns/) don't inject <base>, so document.baseURI omits
the deepest URL segment and relative img/hrefs land in the wrong directory.
Explicit <base href="./"> forces resolution against the actual current URL. -->
<base href="./">
<title>Deviant — Brand assets</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--sky-deep: #050810;
--sky-mid: #0a0f1c;
--sky-rim: #131a2a;
--ink-soft: #b8c2d4;
--ink: #d6dde9;
--ink-bright: #f1f4fa;
--muted: #6a7488;
--acid: #d6ff3d;
--acid-glow: rgba(214, 255, 61, 0.55);
--acid-halo: rgba(214, 255, 61, 0.22);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: radial-gradient(ellipse at 30% 20%, var(--sky-mid), var(--sky-deep) 70%, #02040a);
color: var(--ink);
font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
min-height: 100vh;
padding: 48px 32px 96px;
}
header {
max-width: 1400px;
margin: 0 auto 56px;
}
.wordmark {
font-family: 'Fraunces', Georgia, serif;
font-weight: 500;
font-size: 56px;
letter-spacing: -1.5px;
color: var(--ink-bright);
margin: 0 0 6px;
line-height: 1;
}
.wordmark::after {
content: '.';
color: var(--acid);
}
.lede {
color: var(--ink-soft);
font-size: 17px;
margin: 0 0 4px;
max-width: 640px;
}
.lede small {
color: var(--muted);
display: block;
margin-top: 8px;
font-size: 13px;
font-family: 'JetBrains Mono', 'DM Mono', monospace;
}
main {
max-width: 1400px;
margin: 0 auto;
}
section {
margin: 0 0 56px;
}
.section-head {
display: flex;
align-items: baseline;
gap: 16px;
margin: 0 0 24px;
padding-bottom: 12px;
border-bottom: 1px solid var(--sky-rim);
}
.section-head h2 {
font-family: 'Fraunces', Georgia, serif;
font-weight: 400;
font-size: 28px;
color: var(--ink-bright);
margin: 0;
}
.section-head .count {
color: var(--muted);
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 20px;
}
.grid.wide {
grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
}
.card {
background: var(--sky-mid);
border: 1px solid var(--sky-rim);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 120ms ease, transform 120ms ease;
}
.card:hover {
border-color: rgba(214, 255, 61, 0.35);
transform: translateY(-1px);
}
.preview {
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%),
linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
background-color: #060912;
padding: 24px;
min-height: 180px;
}
.preview.tight { padding: 12px; }
.preview.onlight { background: #f6f7fa; background-size: 0; }
.preview img {
max-width: 100%;
height: auto;
display: block;
}
.preview .frame-avatar img {
border-radius: 50%;
overflow: hidden;
}
.meta {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.meta .name {
color: var(--ink-bright);
font-weight: 600;
font-size: 15px;
}
.meta .desc {
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.meta .file {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--ink-soft);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--sky-rim);
}
.meta .file a {
color: var(--acid);
text-decoration: none;
opacity: 0.9;
}
.meta .file a:hover { opacity: 1; text-decoration: underline; }
.meta .file .size {
color: var(--muted);
font-size: 11px;
}
.meta .file .png {
color: var(--ink-soft);
font-size: 11px;
border-left: 1px solid var(--sky-rim);
padding-left: 8px;
margin-left: 4px;
}
.meta .file .png a { color: var(--ink-soft); opacity: 1; }
.meta .file .png a:hover { color: var(--acid); }
.banner {
background: rgba(214, 255, 61, 0.08);
border: 1px solid rgba(214, 255, 61, 0.3);
border-radius: 10px;
padding: 14px 18px;
margin: 0 0 32px;
color: var(--ink);
font-size: 14px;
line-height: 1.5;
}
.banner strong { color: var(--acid); }
footer {
max-width: 1400px;
margin: 64px auto 0;
padding-top: 24px;
border-top: 1px solid var(--sky-rim);
color: var(--muted);
font-size: 13px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
footer a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--sky-rim); }
footer a:hover { color: var(--acid); border-bottom-color: var(--acid); }
@media (max-width: 600px) {
body { padding: 32px 16px 64px; }
.wordmark { font-size: 40px; }
.grid, .grid.wide { grid-template-columns: 1fr; }
}
</style>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>
<body>
<header>
<h1 class="wordmark">Deviant brand</h1>
<p class="lede">Logos, icons and social-media assets. All primary files are SVG — scale-independent, editable in code, and (where text appears) load the site's own fonts via <code>@import</code>. Click any file name to open the raw SVG.
<small>Source: <a href="README.md" style="color: var(--ink-soft);">brand/README.md</a> · <a href="palette.md" style="color: var(--ink-soft);">brand/palette.md</a></small></p>
</header>
<main>
<p class="banner"><strong>Uploading to social media?</strong> SVG isn't accepted for profile avatars, headers, or post images by Twitter/X, GitHub, Discord, LinkedIn, Instagram, Facebook, or Slack. Every card below has a <code>PNG</code> link next to the SVG path — use those. Full PNG set at <a href="source/exports/" style="color: var(--ink-bright);">source/exports/</a>.</p>
<section>
<div class="section-head"><h2>Icons</h2><span class="count">2 files</span></div>
<div class="grid">
<article class="card">
<div class="preview tight"><img src="icon/icon-512.svg" alt="512×512 app icon" width="220" height="220"></div>
<div class="meta">
<div class="name">App icon (512)</div>
<div class="desc">OS launcher, PWA install, app-shell splash. Byte-identical to shells/app/public/icon.svg.</div>
<div class="file"><a href="icon/icon-512.svg">icon/icon-512.svg</a><span class="png"><a download href="source/exports/icon-512.png">PNG</a></span><span class="size">512 × 512</span></div>
</div>
</article>
<article class="card">
<div class="preview tight"><img src="icon/favicon.svg" alt="64×64 favicon" width="96" height="96"></div>
<div class="meta">
<div class="name">Favicon</div>
<div class="desc">Browser tab / tiny sizes. Simplified — no starfield, no glow.</div>
<div class="file"><a href="icon/favicon.svg">icon/favicon.svg</a><span class="png"><a download href="source/exports/favicon-64.png">64</a> · <a href="source/exports/favicon-32.png" download>32</a></span><span class="size">64 × 64</span></div>
</div>
</article>
</div>
</section>
<section>
<div class="section-head"><h2>Logos</h2><span class="count">3 files</span></div>
<div class="grid">
<article class="card">
<div class="preview tight"><img src="logo/deviant-mark.svg" alt="D-mark on dark" width="220" height="220"></div>
<div class="meta">
<div class="name">Mark — on dark</div>
<div class="desc">Orbital-crescent D + acid dot. For dark surfaces.</div>
<div class="file"><a href="logo/deviant-mark.svg">logo/deviant-mark.svg</a><span class="png"><a download href="source/exports/mark-512.png">PNG 512</a></span><span class="size">256 × 256</span></div>
</div>
</article>
<article class="card">
<div class="preview tight onlight"><img src="logo/deviant-mark-onlight.svg" alt="D-mark on light" width="220" height="220"></div>
<div class="meta">
<div class="name">Mark — on light</div>
<div class="desc">Inverted for print / light backgrounds. Ring softens, acid dot deepens to olive.</div>
<div class="file"><a href="logo/deviant-mark-onlight.svg">logo/deviant-mark-onlight.svg</a><span class="png"><a download href="source/exports/mark-onlight-512.png">PNG 512</a></span><span class="size">256 × 256</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="logo/deviant-wordmark.svg" alt="Wordmark" width="360"></div>
<div class="meta">
<div class="name">Wordmark</div>
<div class="desc">Mark + &ldquo;Deviant&rdquo; in Fraunces + &ldquo;POWER YOUR IDEAS.&rdquo; tagline. Header lockup.</div>
<div class="file"><a href="logo/deviant-wordmark.svg">logo/deviant-wordmark.svg</a><span class="png"><a download href="source/exports/wordmark-1440.png">PNG 1440</a></span><span class="size">720 × 180</span></div>
</div>
</article>
</div>
</section>
<section>
<div class="section-head"><h2>Social — cards &amp; banners</h2><span class="count">7 files</span></div>
<div class="grid wide">
<article class="card">
<div class="preview"><img src="social/og-1200x630.svg" alt="Open Graph card" width="560"></div>
<div class="meta">
<div class="name">Open Graph</div>
<div class="desc">Facebook / LinkedIn / Slack link unfurls. The default meta og:image aspect.</div>
<div class="file"><a href="social/og-1200x630.svg">social/og-1200x630.svg</a><span class="png"><a download href="source/exports/og-1200x630.png">PNG</a></span><span class="size">1200 × 630</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/twitter-card-1200x675.svg" alt="Twitter card" width="560"></div>
<div class="meta">
<div class="name">Twitter/X post card</div>
<div class="desc">summary_large_image spec — 16:9. Use in twitter:image meta tag.</div>
<div class="file"><a href="social/twitter-card-1200x675.svg">social/twitter-card-1200x675.svg</a><span class="png"><a download href="source/exports/twitter-card-1200x675.png">PNG</a></span><span class="size">1200 × 675</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/twitter-header-1500x500.svg" alt="Twitter header" width="560"></div>
<div class="meta">
<div class="name">Twitter/X profile header</div>
<div class="desc">Profile banner — orbital ring on the right, wordmark shifted past the ~200px avatar overlap in the lower-left.</div>
<div class="file"><a href="social/twitter-header-1500x500.svg">social/twitter-header-1500x500.svg</a><span class="png"><a download href="source/exports/twitter-header-1500x500.png">PNG</a></span><span class="size">1500 × 500</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/twitter-header-deviation-1500x500.svg" alt="Twitter header — deviation chart" width="560"></div>
<div class="meta">
<div class="name">Twitter/X header — deviation variant</div>
<div class="desc">Uses the site's hero deviation chart (same paths from deviant_website.html) on the right. Same avatar-safe copy zone as the primary header.</div>
<div class="file"><a href="social/twitter-header-deviation-1500x500.svg">social/twitter-header-deviation-1500x500.svg</a><span class="png"><a download href="source/exports/twitter-header-deviation-1500x500.png">PNG</a></span><span class="size">1500 × 500</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/facebook-cover-820x312.svg" alt="Facebook cover" width="560"></div>
<div class="meta">
<div class="name">Facebook page cover</div>
<div class="desc">Desktop-sized. Mobile-safe zone is ~640×360 centered.</div>
<div class="file"><a href="social/facebook-cover-820x312.svg">social/facebook-cover-820x312.svg</a><span class="png"><a download href="source/exports/facebook-cover-820x312.png">PNG</a></span><span class="size">820 × 312</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/linkedin-banner-1584x396.svg" alt="LinkedIn banner" width="560"></div>
<div class="meta">
<div class="name">LinkedIn company banner</div>
<div class="desc">Copy sits right of center to clear the lower-left profile-photo overlap.</div>
<div class="file"><a href="social/linkedin-banner-1584x396.svg">social/linkedin-banner-1584x396.svg</a><span class="png"><a download href="source/exports/linkedin-banner-1584x396.png">PNG</a></span><span class="size">1584 × 396</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/instagram-square-1080x1080.svg" alt="Instagram square" width="360"></div>
<div class="meta">
<div class="name">Instagram / Threads / Discord</div>
<div class="desc">Square 1:1 feed post. Also usable as a large Discord embed.</div>
<div class="file"><a href="social/instagram-square-1080x1080.svg">social/instagram-square-1080x1080.svg</a><span class="png"><a download href="source/exports/instagram-1080.png">PNG</a></span><span class="size">1080 × 1080</span></div>
</div>
</article>
</div>
</section>
<section>
<div class="section-head"><h2>Avatar</h2><span class="count">1 file · rendered square + round</span></div>
<div class="grid">
<article class="card">
<div class="preview tight"><img src="social/avatar-400x400.svg" alt="Square avatar" width="240" height="240"></div>
<div class="meta">
<div class="name">Square (as SVG ships)</div>
<div class="desc">Direct render of the file — the mark on the starfield square.</div>
<div class="file"><a href="social/avatar-400x400.svg">social/avatar-400x400.svg</a><span class="png"><a download href="source/exports/avatar-400.png">400</a> · <a href="source/exports/avatar-1024.png" download>1024</a></span><span class="size">400 × 400</span></div>
</div>
</article>
<article class="card">
<div class="preview tight"><div class="frame-avatar" style="border-radius:50%; overflow:hidden; width:240px; height:240px;"><img src="social/avatar-400x400.svg" alt="Circular avatar preview" width="240" height="240"></div></div>
<div class="meta">
<div class="name">Circular crop preview</div>
<div class="desc">How Twitter / X / GitHub / Discord actually display it. The mark is centered with margin so a circle keeps it whole.</div>
<div class="file"><a href="social/avatar-400x400.svg">social/avatar-400x400.svg</a><span class="png"><a download href="source/exports/avatar-400.png">400</a> · <a href="source/exports/avatar-1024.png" download>1024</a></span><span class="size">400 × 400</span></div>
</div>
</article>
</div>
</section>
</main>
<footer>
<div>Deviant · <span style="color: var(--muted);">brand gallery · rendered from <code>brand/</code></span></div>
<div><a href="../">← the landing page</a> · <a href="README.md">README</a> · <a href="palette.md">palette</a></div>
</footer>
</body>
</html>

5
site/deviant/brand/logo/deviant-mark-onlight.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" role="img" aria-label="Deviant mark">
<ellipse cx="128" cy="128" rx="75" ry="46" fill="none" stroke="#c8ceda" stroke-width="4" transform="rotate(-22 128 128)"/>
<path d="M98 78 h22 a50 50 0 0 1 0 100 h-22 z M118 98 v60 a30 30 0 0 0 0 -60 z" fill="#0a0f1c"/>
<circle cx="186" cy="95" r="11" fill="#6b8a00"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 407 B

11
site/deviant/brand/logo/deviant-mark.svg Normal file
View file

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" role="img" aria-label="Deviant mark">
<defs>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="5" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<ellipse cx="128" cy="128" rx="75" ry="46" fill="none" stroke="#2a3650" stroke-width="4" transform="rotate(-22 128 128)"/>
<path d="M98 78 h22 a50 50 0 0 1 0 100 h-22 z M118 98 v60 a30 30 0 0 0 0 -60 z" fill="#d6dde9"/>
<circle cx="186" cy="95" r="11" fill="#d6ff3d" filter="url(#glow)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 660 B

21
site/deviant/brand/logo/deviant-wordmark.svg Normal file
View file

@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" width="720" height="180" viewBox="0 0 720 180" role="img" aria-label="Deviant — Power Your Ideas">
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500&amp;family=DM+Sans:wght@500&amp;display=swap');
.display { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; }
.body { font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; }
</style>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<rect width="720" height="180" fill="#050810"/>
<g transform="translate(20 22)">
<ellipse cx="70" cy="70" rx="55" ry="34" fill="none" stroke="#2a3650" stroke-width="3" transform="rotate(-22 70 70)"/>
<path d="M48 33 h18 a37 37 0 0 1 0 74 h-18 z M66 48 v44 a22 22 0 0 0 0 -44 z" fill="#d6dde9"/>
<circle cx="112" cy="47" r="8" fill="#d6ff3d" filter="url(#glow)"/>
</g>
<text class="display" x="180" y="106" font-weight="500" font-size="80" fill="#f1f4fa" letter-spacing="-1">Deviant</text>
<text class="body" x="182" y="140" font-weight="500" font-size="18" fill="#b8c2d4" letter-spacing="1">POWER YOUR IDEAS.</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

70
site/deviant/brand/palette.md Normal file
View file

@ -0,0 +1,70 @@
# Deviant — Palette & Typography
Extracted from `Parameters/webfiles/deviant_website.html` (`:root` CSS variables).
The landing page is the source of truth; if these values ever drift, the
website wins.
## Themes
Two live themes swap via `data-theme` on `<html>`:
- `data-theme="signal"` — default. Deep-space blue, cool.
- `data-theme="editorial"` — near-monochrome. High-contrast, more graphic.
## `signal` (default)
| Token | Hex / value | Role |
|---|---|---|
| `--sky-deep` | `#050810` | Page ground — the deepest black |
| `--sky-mid` | `#0a0f1c` | Elevated surfaces (cards, hero) |
| `--sky-rim` | `#131a2a` | Borders, dividers |
| `--ink-soft` | `#b8c2d4` | Secondary text |
| `--ink` | `#d6dde9` | Primary text |
| `--ink-bright` | `#f1f4fa` | Headings, emphasis |
| `--muted` | `#6a7488` | Captions, timestamps |
| `--acid` | `#d6ff3d` | Load-bearing accent — CTAs, orbital dot, focus rings |
| `--acid-glow` | `rgba(214,255,61,0.55)` | Halo behind the acid dot |
| `--acid-halo` | `rgba(214,255,61,0.22)` | Softer diffusion |
| `--acid-dim` | `rgba(214,255,61,0.08)` | Idle-state tint |
| `--rust-deep` | `#6b2a1c` | Rare warning / archival accent |
| `--star-faint` | `rgba(255,255,255,0.22)` | Starfield — background layer |
| `--star-mid` | `rgba(255,255,255,0.38)` | Starfield — mid layer |
| `--star-bright` | `rgba(255,255,255,0.58)` | Starfield — near-foreground |
## `editorial`
| Token | Hex / value | Role |
|---|---|---|
| `--sky-deep` | `#050505` | Page ground |
| `--sky-mid` | `#0a0a0a` | Elevated surfaces |
| `--sky-rim` | `#161616` | Borders |
| `--ink` | `#f2f2f2` | Primary text |
| `--ink-bright` | `#ffffff` | Headings |
| `--ink-soft` | `#d2d2d2` | Secondary text |
| `--muted` | `#9a9a9a` | Captions |
| `--acid` | `#c6ff00` | Accent — slightly cooler than signal's |
| `--acid-glow` | `rgba(198,255,0,0.60)` | |
| `--acid-halo` | `rgba(198,255,0,0.34)` | |
| `--acid-dim` | `rgba(198,255,0,0.16)` | |
## Typography
| Face | Where | Weights loaded |
|---|---|---|
| **Fraunces** | Display headlines, hero, wordmark | 300, 400, 500, 600 (opsz 9..144) |
| **DM Sans** | Body, UI, buttons, nav | 400, 500, 600, 700, 800 |
| **JetBrains Mono** | Code, hashes, addresses (technical surface) | 400, 500 |
| **DM Mono** | Numeric readouts, receipts, tote-style data | 400, 500 |
Load line (Google Fonts):
```html
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
```
## Print / static asset defaults
For assets shipped as SVG (icons, social cards, logos) that must render without
CSS-var lookups: **hard-code the `signal` values above.** The `data-theme`
mechanism is HTML/CSS-only; a raw SVG loaded into Slack or a Twitter feed does
not carry the palette with it.

24
site/deviant/brand/social/avatar-400x400.svg Normal file
View file

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400" role="img" aria-label="Deviant">
<defs>
<radialGradient id="sky" cx="30%" cy="28%" r="95%">
<stop offset="0%" stop-color="#0c1220"/>
<stop offset="55%" stop-color="#070d1a"/>
<stop offset="100%" stop-color="#02040a"/>
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="9" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<!-- Round-crop safe: platforms may circle-crop; keep the mark in the inner 340px -->
<rect width="400" height="400" fill="url(#sky)"/>
<g fill="#ffffff" opacity="0.55">
<circle cx="80" cy="100" r="1.6"/>
<circle cx="340" cy="90" r="1.4"/>
<circle cx="70" cy="330" r="1.5"/>
<circle cx="330" cy="320" r="1.3"/>
</g>
<ellipse cx="200" cy="200" rx="118" ry="72" fill="none" stroke="#2a3650" stroke-width="6" transform="rotate(-22 200 200)"/>
<path d="M154 118 h34 a80 80 0 0 1 0 160 h-34 z M188 152 v92 a46 46 0 0 0 0 -92 z" fill="#d6dde9"/>
<circle cx="292" cy="148" r="17" fill="#d6ff3d" filter="url(#glow)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

36
site/deviant/brand/social/facebook-cover-820x312.svg Normal file
View file

@ -0,0 +1,36 @@
<svg xmlns="http://www.w3.org/2000/svg" width="820" height="312" viewBox="0 0 820 312" role="img" aria-label="Deviant — Power Your Ideas">
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500&amp;family=DM+Sans:wght@600&amp;display=swap');
.display { font-family: 'Fraunces', Georgia, serif; }
.body { font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; }
</style>
<radialGradient id="sky" cx="30%" cy="30%" r="95%">
<stop offset="0%" stop-color="#0c1220"/>
<stop offset="55%" stop-color="#070d1a"/>
<stop offset="100%" stop-color="#02040a"/>
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="10" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<rect width="820" height="312" fill="url(#sky)"/>
<g fill="#ffffff">
<circle cx="120" cy="60" r="1.5" opacity="0.5"/>
<circle cx="280" cy="100" r="1.2" opacity="0.4"/>
<circle cx="480" cy="60" r="1.6" opacity="0.5"/>
<circle cx="700" cy="80" r="1.4" opacity="0.45"/>
<circle cx="150" cy="260" r="1.3" opacity="0.4"/>
<circle cx="380" cy="270" r="1.5" opacity="0.45"/>
<circle cx="620" cy="250" r="1.2" opacity="0.35"/>
</g>
<g transform="translate(60 76)">
<ellipse cx="80" cy="80" rx="62" ry="38" fill="none" stroke="#2a3650" stroke-width="4" transform="rotate(-22 80 80)"/>
<path d="M55 37 h20 a42 42 0 0 1 0 84 h-20 z M75 55 v50 a25 25 0 0 0 0 -50 z" fill="#d6dde9"/>
<circle cx="128" cy="53" r="10" fill="#d6ff3d" filter="url(#glow)"/>
</g>
<text class="display" x="240" y="150" font-weight="500" font-size="76" fill="#f1f4fa" letter-spacing="-1.5">Deviant</text>
<text class="body" x="242" y="188" font-weight="600" font-size="16" fill="#d6ff3d" letter-spacing="3.5">POWER YOUR IDEAS.</text>
<text class="display" x="240" y="240" font-style="italic" font-weight="400" font-size="20" fill="#b8c2d4">A response to a default trajectory.</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

370
site/deviant/brand/social/index.html Normal file
View file

@ -0,0 +1,370 @@
<!doctype html>
<html lang="en" data-theme="signal">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BNS gateways (navigate.st/bns/) don't inject <base>, so document.baseURI omits
the deepest URL segment and relative img/hrefs land in the wrong directory.
Explicit <base href="./"> forces resolution against the actual current URL. -->
<base href="./">
<title>Deviant — Brand assets</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--sky-deep: #050810;
--sky-mid: #0a0f1c;
--sky-rim: #131a2a;
--ink-soft: #b8c2d4;
--ink: #d6dde9;
--ink-bright: #f1f4fa;
--muted: #6a7488;
--acid: #d6ff3d;
--acid-glow: rgba(214, 255, 61, 0.55);
--acid-halo: rgba(214, 255, 61, 0.22);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: radial-gradient(ellipse at 30% 20%, var(--sky-mid), var(--sky-deep) 70%, #02040a);
color: var(--ink);
font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
min-height: 100vh;
padding: 48px 32px 96px;
}
header {
max-width: 1400px;
margin: 0 auto 56px;
}
.wordmark {
font-family: 'Fraunces', Georgia, serif;
font-weight: 500;
font-size: 56px;
letter-spacing: -1.5px;
color: var(--ink-bright);
margin: 0 0 6px;
line-height: 1;
}
.wordmark::after {
content: '.';
color: var(--acid);
}
.lede {
color: var(--ink-soft);
font-size: 17px;
margin: 0 0 4px;
max-width: 640px;
}
.lede small {
color: var(--muted);
display: block;
margin-top: 8px;
font-size: 13px;
font-family: 'JetBrains Mono', 'DM Mono', monospace;
}
main {
max-width: 1400px;
margin: 0 auto;
}
section {
margin: 0 0 56px;
}
.section-head {
display: flex;
align-items: baseline;
gap: 16px;
margin: 0 0 24px;
padding-bottom: 12px;
border-bottom: 1px solid var(--sky-rim);
}
.section-head h2 {
font-family: 'Fraunces', Georgia, serif;
font-weight: 400;
font-size: 28px;
color: var(--ink-bright);
margin: 0;
}
.section-head .count {
color: var(--muted);
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 20px;
}
.grid.wide {
grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
}
.card {
background: var(--sky-mid);
border: 1px solid var(--sky-rim);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 120ms ease, transform 120ms ease;
}
.card:hover {
border-color: rgba(214, 255, 61, 0.35);
transform: translateY(-1px);
}
.preview {
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%),
linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
background-color: #060912;
padding: 24px;
min-height: 180px;
}
.preview.tight { padding: 12px; }
.preview.onlight { background: #f6f7fa; background-size: 0; }
.preview img {
max-width: 100%;
height: auto;
display: block;
}
.preview .frame-avatar img {
border-radius: 50%;
overflow: hidden;
}
.meta {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.meta .name {
color: var(--ink-bright);
font-weight: 600;
font-size: 15px;
}
.meta .desc {
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.meta .file {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--ink-soft);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--sky-rim);
}
.meta .file a {
color: var(--acid);
text-decoration: none;
opacity: 0.9;
}
.meta .file a:hover { opacity: 1; text-decoration: underline; }
.meta .file .size {
color: var(--muted);
font-size: 11px;
}
.meta .file .png {
color: var(--ink-soft);
font-size: 11px;
border-left: 1px solid var(--sky-rim);
padding-left: 8px;
margin-left: 4px;
}
.meta .file .png a { color: var(--ink-soft); opacity: 1; }
.meta .file .png a:hover { color: var(--acid); }
.banner {
background: rgba(214, 255, 61, 0.08);
border: 1px solid rgba(214, 255, 61, 0.3);
border-radius: 10px;
padding: 14px 18px;
margin: 0 0 32px;
color: var(--ink);
font-size: 14px;
line-height: 1.5;
}
.banner strong { color: var(--acid); }
footer {
max-width: 1400px;
margin: 64px auto 0;
padding-top: 24px;
border-top: 1px solid var(--sky-rim);
color: var(--muted);
font-size: 13px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
footer a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--sky-rim); }
footer a:hover { color: var(--acid); border-bottom-color: var(--acid); }
@media (max-width: 600px) {
body { padding: 32px 16px 64px; }
.wordmark { font-size: 40px; }
.grid, .grid.wide { grid-template-columns: 1fr; }
}
</style>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>
<body>
<header>
<h1 class="wordmark">Deviant brand</h1>
<p class="lede">Logos, icons and social-media assets. All primary files are SVG — scale-independent, editable in code, and (where text appears) load the site's own fonts via <code>@import</code>. Click any file name to open the raw SVG.
<small>Source: <a href="README.md" style="color: var(--ink-soft);">brand/README.md</a> · <a href="palette.md" style="color: var(--ink-soft);">brand/palette.md</a></small></p>
</header>
<main>
<p class="banner"><strong>Uploading to social media?</strong> SVG isn't accepted for profile avatars, headers, or post images by Twitter/X, GitHub, Discord, LinkedIn, Instagram, Facebook, or Slack. Every card below has a <code>PNG</code> link next to the SVG path — use those. Full PNG set at <a href="source/exports/" style="color: var(--ink-bright);">source/exports/</a>.</p>
<section>
<div class="section-head"><h2>Icons</h2><span class="count">2 files</span></div>
<div class="grid">
<article class="card">
<div class="preview tight"><img src="icon/icon-512.svg" alt="512×512 app icon" width="220" height="220"></div>
<div class="meta">
<div class="name">App icon (512)</div>
<div class="desc">OS launcher, PWA install, app-shell splash. Byte-identical to shells/app/public/icon.svg.</div>
<div class="file"><a href="icon/icon-512.svg">icon/icon-512.svg</a><span class="png"><a download href="source/exports/icon-512.png">PNG</a></span><span class="size">512 × 512</span></div>
</div>
</article>
<article class="card">
<div class="preview tight"><img src="icon/favicon.svg" alt="64×64 favicon" width="96" height="96"></div>
<div class="meta">
<div class="name">Favicon</div>
<div class="desc">Browser tab / tiny sizes. Simplified — no starfield, no glow.</div>
<div class="file"><a href="icon/favicon.svg">icon/favicon.svg</a><span class="png"><a download href="source/exports/favicon-64.png">64</a> · <a href="source/exports/favicon-32.png" download>32</a></span><span class="size">64 × 64</span></div>
</div>
</article>
</div>
</section>
<section>
<div class="section-head"><h2>Logos</h2><span class="count">3 files</span></div>
<div class="grid">
<article class="card">
<div class="preview tight"><img src="logo/deviant-mark.svg" alt="D-mark on dark" width="220" height="220"></div>
<div class="meta">
<div class="name">Mark — on dark</div>
<div class="desc">Orbital-crescent D + acid dot. For dark surfaces.</div>
<div class="file"><a href="logo/deviant-mark.svg">logo/deviant-mark.svg</a><span class="png"><a download href="source/exports/mark-512.png">PNG 512</a></span><span class="size">256 × 256</span></div>
</div>
</article>
<article class="card">
<div class="preview tight onlight"><img src="logo/deviant-mark-onlight.svg" alt="D-mark on light" width="220" height="220"></div>
<div class="meta">
<div class="name">Mark — on light</div>
<div class="desc">Inverted for print / light backgrounds. Ring softens, acid dot deepens to olive.</div>
<div class="file"><a href="logo/deviant-mark-onlight.svg">logo/deviant-mark-onlight.svg</a><span class="png"><a download href="source/exports/mark-onlight-512.png">PNG 512</a></span><span class="size">256 × 256</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="logo/deviant-wordmark.svg" alt="Wordmark" width="360"></div>
<div class="meta">
<div class="name">Wordmark</div>
<div class="desc">Mark + &ldquo;Deviant&rdquo; in Fraunces + &ldquo;POWER YOUR IDEAS.&rdquo; tagline. Header lockup.</div>
<div class="file"><a href="logo/deviant-wordmark.svg">logo/deviant-wordmark.svg</a><span class="png"><a download href="source/exports/wordmark-1440.png">PNG 1440</a></span><span class="size">720 × 180</span></div>
</div>
</article>
</div>
</section>
<section>
<div class="section-head"><h2>Social — cards &amp; banners</h2><span class="count">7 files</span></div>
<div class="grid wide">
<article class="card">
<div class="preview"><img src="social/og-1200x630.svg" alt="Open Graph card" width="560"></div>
<div class="meta">
<div class="name">Open Graph</div>
<div class="desc">Facebook / LinkedIn / Slack link unfurls. The default meta og:image aspect.</div>
<div class="file"><a href="social/og-1200x630.svg">social/og-1200x630.svg</a><span class="png"><a download href="source/exports/og-1200x630.png">PNG</a></span><span class="size">1200 × 630</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/twitter-card-1200x675.svg" alt="Twitter card" width="560"></div>
<div class="meta">
<div class="name">Twitter/X post card</div>
<div class="desc">summary_large_image spec — 16:9. Use in twitter:image meta tag.</div>
<div class="file"><a href="social/twitter-card-1200x675.svg">social/twitter-card-1200x675.svg</a><span class="png"><a download href="source/exports/twitter-card-1200x675.png">PNG</a></span><span class="size">1200 × 675</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/twitter-header-1500x500.svg" alt="Twitter header" width="560"></div>
<div class="meta">
<div class="name">Twitter/X profile header</div>
<div class="desc">Profile banner — orbital ring on the right, wordmark shifted past the ~200px avatar overlap in the lower-left.</div>
<div class="file"><a href="social/twitter-header-1500x500.svg">social/twitter-header-1500x500.svg</a><span class="png"><a download href="source/exports/twitter-header-1500x500.png">PNG</a></span><span class="size">1500 × 500</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/twitter-header-deviation-1500x500.svg" alt="Twitter header — deviation chart" width="560"></div>
<div class="meta">
<div class="name">Twitter/X header — deviation variant</div>
<div class="desc">Uses the site's hero deviation chart (same paths from deviant_website.html) on the right. Same avatar-safe copy zone as the primary header.</div>
<div class="file"><a href="social/twitter-header-deviation-1500x500.svg">social/twitter-header-deviation-1500x500.svg</a><span class="png"><a download href="source/exports/twitter-header-deviation-1500x500.png">PNG</a></span><span class="size">1500 × 500</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/facebook-cover-820x312.svg" alt="Facebook cover" width="560"></div>
<div class="meta">
<div class="name">Facebook page cover</div>
<div class="desc">Desktop-sized. Mobile-safe zone is ~640×360 centered.</div>
<div class="file"><a href="social/facebook-cover-820x312.svg">social/facebook-cover-820x312.svg</a><span class="png"><a download href="source/exports/facebook-cover-820x312.png">PNG</a></span><span class="size">820 × 312</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/linkedin-banner-1584x396.svg" alt="LinkedIn banner" width="560"></div>
<div class="meta">
<div class="name">LinkedIn company banner</div>
<div class="desc">Copy sits right of center to clear the lower-left profile-photo overlap.</div>
<div class="file"><a href="social/linkedin-banner-1584x396.svg">social/linkedin-banner-1584x396.svg</a><span class="png"><a download href="source/exports/linkedin-banner-1584x396.png">PNG</a></span><span class="size">1584 × 396</span></div>
</div>
</article>
<article class="card">
<div class="preview"><img src="social/instagram-square-1080x1080.svg" alt="Instagram square" width="360"></div>
<div class="meta">
<div class="name">Instagram / Threads / Discord</div>
<div class="desc">Square 1:1 feed post. Also usable as a large Discord embed.</div>
<div class="file"><a href="social/instagram-square-1080x1080.svg">social/instagram-square-1080x1080.svg</a><span class="png"><a download href="source/exports/instagram-1080.png">PNG</a></span><span class="size">1080 × 1080</span></div>
</div>
</article>
</div>
</section>
<section>
<div class="section-head"><h2>Avatar</h2><span class="count">1 file · rendered square + round</span></div>
<div class="grid">
<article class="card">
<div class="preview tight"><img src="social/avatar-400x400.svg" alt="Square avatar" width="240" height="240"></div>
<div class="meta">
<div class="name">Square (as SVG ships)</div>
<div class="desc">Direct render of the file — the mark on the starfield square.</div>
<div class="file"><a href="social/avatar-400x400.svg">social/avatar-400x400.svg</a><span class="png"><a download href="source/exports/avatar-400.png">400</a> · <a href="source/exports/avatar-1024.png" download>1024</a></span><span class="size">400 × 400</span></div>
</div>
</article>
<article class="card">
<div class="preview tight"><div class="frame-avatar" style="border-radius:50%; overflow:hidden; width:240px; height:240px;"><img src="social/avatar-400x400.svg" alt="Circular avatar preview" width="240" height="240"></div></div>
<div class="meta">
<div class="name">Circular crop preview</div>
<div class="desc">How Twitter / X / GitHub / Discord actually display it. The mark is centered with margin so a circle keeps it whole.</div>
<div class="file"><a href="social/avatar-400x400.svg">social/avatar-400x400.svg</a><span class="png"><a download href="source/exports/avatar-400.png">400</a> · <a href="source/exports/avatar-1024.png" download>1024</a></span><span class="size">400 × 400</span></div>
</div>
</article>
</div>
</section>
</main>
<footer>
<div>Deviant · <span style="color: var(--muted);">brand gallery · rendered from <code>brand/</code></span></div>
<div><a href="../Parameters/webfiles/deviant_website.html">← the landing page</a> · <a href="README.md">README</a> · <a href="palette.md">palette</a></div>
</footer>
</body>
</html>

44
site/deviant/brand/social/instagram-square-1080x1080.svg Normal file
View file

@ -0,0 +1,44 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1080" viewBox="0 0 1080 1080" role="img" aria-label="Deviant — Power Your Ideas">
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&amp;family=DM+Sans:wght@500;600&amp;family=JetBrains+Mono:wght@500&amp;display=swap');
.display { font-family: 'Fraunces', Georgia, serif; }
.body { font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; }
.mono { font-family: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace; }
</style>
<radialGradient id="sky" cx="30%" cy="28%" r="95%">
<stop offset="0%" stop-color="#0c1220"/>
<stop offset="55%" stop-color="#070d1a"/>
<stop offset="100%" stop-color="#02040a"/>
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="18" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<rect width="1080" height="1080" fill="url(#sky)"/>
<g fill="#ffffff">
<circle cx="140" cy="120" r="1.8" opacity="0.55"/>
<circle cx="300" cy="80" r="1.4" opacity="0.4"/>
<circle cx="480" cy="140" r="1.2" opacity="0.35"/>
<circle cx="680" cy="100" r="1.6" opacity="0.45"/>
<circle cx="860" cy="140" r="1.3" opacity="0.4"/>
<circle cx="1000" cy="80" r="1.7" opacity="0.5"/>
<circle cx="120" cy="980" r="1.4" opacity="0.4"/>
<circle cx="360" cy="1020" r="1.7" opacity="0.5"/>
<circle cx="600" cy="980" r="1.2" opacity="0.35"/>
<circle cx="840" cy="1020" r="1.5" opacity="0.4"/>
<circle cx="1000" cy="960" r="1.6" opacity="0.45"/>
</g>
<!-- Centered mark -->
<g transform="translate(340 200)">
<ellipse cx="200" cy="200" rx="160" ry="98" fill="none" stroke="#2a3650" stroke-width="8" transform="rotate(-22 200 200)"/>
<path d="M140 96 h46 a107 107 0 0 1 0 214 h-46 z M186 142 v122 a61 61 0 0 0 0 -122 z" fill="#d6dde9"/>
<circle cx="322" cy="132" r="24" fill="#d6ff3d" filter="url(#glow)"/>
</g>
<!-- Copy stack, centered -->
<text class="display" x="540" y="750" text-anchor="middle" font-weight="500" font-size="150" fill="#f1f4fa" letter-spacing="-3">Deviant</text>
<text class="body" x="540" y="810" text-anchor="middle" font-weight="600" font-size="30" fill="#d6ff3d" letter-spacing="5">POWER YOUR IDEAS.</text>
<text class="display" x="540" y="905" text-anchor="middle" font-style="italic" font-weight="400" font-size="34" fill="#b8c2d4">A response to a default trajectory.</text>
<text class="mono" x="540" y="985" text-anchor="middle" font-weight="500" font-size="30" fill="#d6dde9">deviant.x</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

42
site/deviant/brand/social/linkedin-banner-1584x396.svg Normal file
View file

@ -0,0 +1,42 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1584" height="396" viewBox="0 0 1584 396" role="img" aria-label="Deviant — Power Your Ideas">
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500&amp;family=DM+Sans:wght@600&amp;display=swap');
.display { font-family: 'Fraunces', Georgia, serif; }
.body { font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; }
</style>
<radialGradient id="sky" cx="28%" cy="35%" r="90%">
<stop offset="0%" stop-color="#0c1220"/>
<stop offset="55%" stop-color="#070d1a"/>
<stop offset="100%" stop-color="#02040a"/>
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="16" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<!-- LinkedIn banner: profile photo overlaps LOWER-LEFT (circular, ~150px from left,
centred vertically ~30% from bottom on desktop). Keep critical copy right of x=380
and clear of bottom-left 260×160 area. -->
<rect width="1584" height="396" fill="url(#sky)"/>
<g fill="#ffffff">
<circle cx="200" cy="60" r="1.6" opacity="0.5"/>
<circle cx="440" cy="90" r="1.3" opacity="0.4"/>
<circle cx="680" cy="60" r="1.5" opacity="0.45"/>
<circle cx="920" cy="80" r="1.2" opacity="0.35"/>
<circle cx="1160" cy="60" r="1.7" opacity="0.5"/>
<circle cx="1400" cy="90" r="1.4" opacity="0.4"/>
<circle cx="300" cy="340" r="1.3" opacity="0.4"/>
<circle cx="540" cy="360" r="1.5" opacity="0.45"/>
<circle cx="820" cy="340" r="1.2" opacity="0.35"/>
<circle cx="1080" cy="360" r="1.6" opacity="0.45"/>
<circle cx="1340" cy="340" r="1.3" opacity="0.4"/>
</g>
<!-- Right-of-center orbital ring -->
<ellipse cx="1160" cy="200" rx="240" ry="145" fill="none" stroke="#2a3650" stroke-width="6" transform="rotate(-22 1160 200)"/>
<circle cx="1330" cy="90" r="22" fill="#d6ff3d" filter="url(#glow)"/>
<text class="display" x="420" y="200" font-weight="500" font-size="100" fill="#f1f4fa" letter-spacing="-1.5">Deviant</text>
<text class="body" x="422" y="245" font-weight="600" font-size="22" fill="#d6ff3d" letter-spacing="4">POWER YOUR IDEAS.</text>
<text class="display" x="420" y="308" font-style="italic" font-weight="400" font-size="24" fill="#b8c2d4">On-chain experience that intermediation cannot mediate.</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

47
site/deviant/brand/social/og-1200x630.svg Normal file
View file

@ -0,0 +1,47 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" role="img" aria-label="Deviant — Power Your Ideas">
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&amp;family=DM+Sans:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@500&amp;display=swap');
.display { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; }
.body { font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; }
.mono { font-family: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace; }
</style>
<radialGradient id="sky" cx="30%" cy="30%" r="90%">
<stop offset="0%" stop-color="#0c1220"/>
<stop offset="55%" stop-color="#070d1a"/>
<stop offset="100%" stop-color="#02040a"/>
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="14" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<rect width="1200" height="630" fill="url(#sky)"/>
<g fill="#ffffff">
<circle cx="120" cy="80" r="1.8" opacity="0.55"/>
<circle cx="220" cy="150" r="1.2" opacity="0.35"/>
<circle cx="340" cy="70" r="1.6" opacity="0.45"/>
<circle cx="480" cy="120" r="1.1" opacity="0.3"/>
<circle cx="640" cy="90" r="1.9" opacity="0.55"/>
<circle cx="820" cy="140" r="1.3" opacity="0.4"/>
<circle cx="960" cy="70" r="1.6" opacity="0.45"/>
<circle cx="1080" cy="130" r="1.2" opacity="0.35"/>
<circle cx="100" cy="520" r="1.4" opacity="0.4"/>
<circle cx="260" cy="580" r="1.7" opacity="0.5"/>
<circle cx="440" cy="540" r="1.1" opacity="0.3"/>
<circle cx="620" cy="570" r="1.5" opacity="0.4"/>
<circle cx="820" cy="530" r="1.2" opacity="0.35"/>
<circle cx="1020" cy="560" r="1.6" opacity="0.45"/>
</g>
<g transform="translate(90 165)">
<ellipse cx="150" cy="150" rx="115" ry="70" fill="none" stroke="#2a3650" stroke-width="6" transform="rotate(-22 150 150)"/>
<path d="M105 71 h34 a79 79 0 0 1 0 158 h-34 z M139 105 v90 a45 45 0 0 0 0 -90 z" fill="#d6dde9"/>
<circle cx="240" cy="99" r="17" fill="#d6ff3d" filter="url(#glow)"/>
</g>
<text class="display" x="480" y="245" font-weight="500" font-size="130" fill="#f1f4fa" letter-spacing="-2">Deviant</text>
<text class="body" x="482" y="310" font-weight="600" font-size="30" fill="#d6ff3d" letter-spacing="4">POWER YOUR IDEAS.</text>
<text class="display" x="482" y="410" font-style="italic" font-weight="400" font-size="30" fill="#b8c2d4">A response to a default trajectory.</text>
<text class="body" x="482" y="460" font-weight="400" font-size="22" fill="#8892a5">On-chain experience that intermediation cannot mediate.</text>
<text class="mono" x="482" y="560" font-weight="500" font-size="24" fill="#d6dde9">deviant.x</text>
<text class="body" x="614" y="560" font-weight="400" font-size="20" fill="#6a7488">/ navigate.st/bns/deviant.x</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

43
site/deviant/brand/social/twitter-card-1200x675.svg Normal file
View file

@ -0,0 +1,43 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675" role="img" aria-label="Deviant — Power Your Ideas">
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&amp;family=DM+Sans:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@500&amp;display=swap');
.display { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; }
.body { font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; }
.mono { font-family: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace; }
</style>
<radialGradient id="sky" cx="32%" cy="30%" r="92%">
<stop offset="0%" stop-color="#0c1220"/>
<stop offset="55%" stop-color="#070d1a"/>
<stop offset="100%" stop-color="#02040a"/>
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="14" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<rect width="1200" height="675" fill="url(#sky)"/>
<g fill="#ffffff">
<circle cx="140" cy="90" r="1.8" opacity="0.55"/>
<circle cx="300" cy="70" r="1.4" opacity="0.4"/>
<circle cx="480" cy="130" r="1.2" opacity="0.35"/>
<circle cx="680" cy="85" r="1.9" opacity="0.55"/>
<circle cx="860" cy="130" r="1.3" opacity="0.4"/>
<circle cx="1040" cy="80" r="1.6" opacity="0.45"/>
<circle cx="100" cy="580" r="1.5" opacity="0.4"/>
<circle cx="320" cy="610" r="1.7" opacity="0.5"/>
<circle cx="540" cy="590" r="1.1" opacity="0.3"/>
<circle cx="760" cy="610" r="1.5" opacity="0.4"/>
<circle cx="980" cy="580" r="1.2" opacity="0.35"/>
</g>
<g transform="translate(100 185)">
<ellipse cx="150" cy="150" rx="115" ry="70" fill="none" stroke="#2a3650" stroke-width="6" transform="rotate(-22 150 150)"/>
<path d="M105 71 h34 a79 79 0 0 1 0 158 h-34 z M139 105 v90 a45 45 0 0 0 0 -90 z" fill="#d6dde9"/>
<circle cx="240" cy="99" r="17" fill="#d6ff3d" filter="url(#glow)"/>
</g>
<text class="display" x="490" y="265" font-weight="500" font-size="130" fill="#f1f4fa" letter-spacing="-2">Deviant</text>
<text class="body" x="492" y="330" font-weight="600" font-size="30" fill="#d6ff3d" letter-spacing="4">POWER YOUR IDEAS.</text>
<text class="display" x="492" y="440" font-style="italic" font-weight="400" font-size="30" fill="#b8c2d4">A response to a default trajectory.</text>
<text class="body" x="492" y="485" font-weight="400" font-size="22" fill="#8892a5">On-chain. Backed. Yours.</text>
<text class="mono" x="492" y="605" font-weight="500" font-size="26" fill="#d6dde9">deviant.x</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

52
site/deviant/brand/social/twitter-header-1500x500.svg Normal file
View file

@ -0,0 +1,52 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="500" viewBox="0 0 1500 500" role="img" aria-label="Deviant — Power Your Ideas">
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&amp;family=DM+Sans:wght@400;500;600;700&amp;display=swap');
.display { font-family: 'Fraunces', Georgia, serif; }
.body { font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; }
</style>
<radialGradient id="sky" cx="30%" cy="35%" r="88%">
<stop offset="0%" stop-color="#0c1220"/>
<stop offset="55%" stop-color="#070d1a"/>
<stop offset="100%" stop-color="#02040a"/>
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="18" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<!-- X/Twitter desktop overlays a ~200px circular avatar in the lower-left of the
banner (its centre sits roughly at (150, 425) for a 1500×500 image). Keep
critical copy right of x≈340 to clear it. Top/bottom ~60px can be cropped
on mobile. -->
<rect width="1500" height="500" fill="url(#sky)"/>
<g fill="#ffffff">
<circle cx="200" cy="60" r="1.6" opacity="0.5"/>
<circle cx="380" cy="110" r="1.3" opacity="0.4"/>
<circle cx="540" cy="60" r="1.2" opacity="0.35"/>
<circle cx="720" cy="100" r="1.6" opacity="0.45"/>
<circle cx="900" cy="60" r="1.3" opacity="0.4"/>
<circle cx="1080" cy="110" r="1.7" opacity="0.5"/>
<circle cx="1260" cy="70" r="1.5" opacity="0.4"/>
<circle cx="1400" cy="130" r="1.6" opacity="0.45"/>
<circle cx="440" cy="440" r="1.3" opacity="0.35"/>
<circle cx="620" cy="420" r="1.6" opacity="0.45"/>
<circle cx="820" cy="450" r="1.4" opacity="0.4"/>
<circle cx="1020" cy="420" r="1.7" opacity="0.5"/>
<circle cx="1220" cy="450" r="1.2" opacity="0.35"/>
<circle cx="1400" cy="440" r="1.5" opacity="0.4"/>
</g>
<!-- Big orbital ring, right-of-center -->
<ellipse cx="1080" cy="260" rx="280" ry="170" fill="none" stroke="#2a3650" stroke-width="8" transform="rotate(-22 1080 260)"/>
<circle cx="1270" cy="130" r="26" fill="#d6ff3d" filter="url(#glow)"/>
<!-- Copy stack — shifted right (x=360) so X/Twitter's desktop avatar
overlap (bottom-left ~200px circle centred near x=150,y=425) clears it. -->
<text class="display" x="360" y="220" font-weight="500" font-size="130" fill="#f1f4fa" letter-spacing="-2">Deviant</text>
<text class="body" x="362" y="272" font-weight="600" font-size="26" fill="#d6ff3d" letter-spacing="5">POWER YOUR IDEAS.</text>
<text class="display" x="360" y="340" font-style="italic" font-weight="400" font-size="28" fill="#b8c2d4">A response to a default trajectory.</text>
<text class="body" x="360" y="378" font-weight="400" font-size="20" fill="#8892a5">On-chain experience that intermediation cannot mediate.</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

85
site/deviant/brand/social/twitter-header-deviation-1500x500.svg Normal file
View file

@ -0,0 +1,85 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="500" viewBox="0 0 1500 500" role="img" aria-label="Deviant — A response to a default trajectory">
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&amp;family=DM+Sans:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@500&amp;display=swap');
.display { font-family: 'Fraunces', Georgia, serif; }
.body { font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
</style>
<radialGradient id="sky" cx="28%" cy="30%" r="92%">
<stop offset="0%" stop-color="#0c1220"/>
<stop offset="55%" stop-color="#070d1a"/>
<stop offset="100%" stop-color="#02040a"/>
</radialGradient>
<filter id="acid-glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="node-glow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur stdDeviation="10" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<!-- Same avatar-safe policy: keep critical copy right of x≈340. -->
<rect width="1500" height="500" fill="url(#sky)"/>
<!-- Sparse starfield -->
<g fill="#ffffff">
<circle cx="220" cy="80" r="1.6" opacity="0.5"/>
<circle cx="380" cy="120" r="1.2" opacity="0.35"/>
<circle cx="560" cy="60" r="1.4" opacity="0.4"/>
<circle cx="740" cy="90" r="1.6" opacity="0.45"/>
<circle cx="920" cy="60" r="1.3" opacity="0.4"/>
<circle cx="1100" cy="90" r="1.5" opacity="0.45"/>
<circle cx="1280" cy="60" r="1.7" opacity="0.5"/>
<circle cx="1420" cy="110" r="1.4" opacity="0.4"/>
<circle cx="480" cy="440" r="1.3" opacity="0.35"/>
<circle cx="700" cy="460" r="1.5" opacity="0.4"/>
<circle cx="920" cy="440" r="1.6" opacity="0.45"/>
<circle cx="1140" cy="460" r="1.2" opacity="0.35"/>
<circle cx="1360" cy="440" r="1.5" opacity="0.4"/>
</g>
<!-- Copy: wordmark + tagline (left, past avatar overlap) -->
<text class="display" x="360" y="220" font-weight="500" font-size="120" fill="#f1f4fa" letter-spacing="-2">Deviant</text>
<text class="body" x="362" y="270" font-weight="600" font-size="24" fill="#d6ff3d" letter-spacing="5">POWER YOUR IDEAS.</text>
<text class="display" x="360" y="340" font-style="italic" font-weight="400" font-size="26" fill="#b8c2d4">A response to a default trajectory.</text>
<!-- Deviation chart: exact geometry from the site hero (viewBox 380×240),
transformed to sit on the right side of the banner. Scale 1.85x places it
from roughly x=730..1420, y=115..400. -->
<g transform="translate(708 34) scale(1.85)">
<defs>
<!-- Visible curves: exact hero geometry from deviant_website.html:679-681 -->
<path id="path-default" d="M 12 70 C 110 96, 150 120, 200 138 C 255 158, 305 176, 368 198"/>
<path id="path-deviation" d="M 200 138 C 250 120, 300 84, 368 44"/>
<!-- Text-baseline offsets: parallel copies shifted perpendicular to each
curve so labels sit BELOW the default (down-drift) and ABOVE the
deviation (up-lift). Same control-point shape, y shifted uniformly. -->
<path id="path-default-below" d="M 12 86 C 110 112, 150 136, 200 154 C 255 174, 305 192, 368 214"/>
<path id="path-deviation-above" d="M 200 122 C 250 104, 300 68, 368 28"/>
</defs>
<!-- Default trajectory: dashed, muted, curves down-right -->
<use href="#path-default" stroke="#6a7488" stroke-width="1.8" fill="none" opacity="0.75"
stroke-dasharray="4 8" stroke-linecap="round"/>
<!-- Branch dot at the divergence -->
<circle cx="200" cy="138" r="4" fill="#6a7488"/>
<!-- Deviation: solid, acid, curves up-right -->
<use href="#path-deviation" stroke="#d6ff3d" stroke-width="3" fill="none" stroke-linecap="round"
filter="url(#acid-glow)"/>
<!-- Terminal acid node -->
<circle cx="368" cy="44" r="6" fill="#d6ff3d" filter="url(#node-glow)"/>
<!-- Labels run parallel to their respective curves via textPath. Start offsets
chosen so labels sit near the mid/end of each curve. -->
<text class="mono" font-size="10" fill="#6a7488" letter-spacing="2.5">
<textPath href="#path-default-below" startOffset="4%">DEFAULT TRAJECTORY</textPath>
</text>
<text class="mono" font-size="10" fill="#d6ff3d" letter-spacing="2.5">
<textPath href="#path-deviation-above" startOffset="30%">DEVIATION</textPath>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB

41
site/deviant/brand/source/README.md Normal file
View file

@ -0,0 +1,41 @@
# Working files & exports
Author SVGs edit-in-place under `brand/{logo,icon,social}/`. This directory is
for **derivative** files that shouldn't clutter the primary directories.
## Structure
- `exports/` — PNGs generated from the primary SVGs. Do not check in unless a
specific delivery pipeline requires them.
- `sketches/` — WIP art, alternates, rejected variants (kept for provenance).
## Exporting to PNG
Any of these work; pick what's installed.
```bash
# rsvg-convert (librsvg — smallest, fastest)
rsvg-convert -w 1200 -h 630 ../social/og-1200x630.svg -o exports/og-1200x630.png
# Inkscape CLI (higher-fidelity text rendering)
inkscape ../social/og-1200x630.svg --export-type=png --export-filename=exports/og-1200x630.png --export-width=1200
# ImageMagick (falls back if the above aren't installed)
magick -density 300 -background none ../social/og-1200x630.svg -resize 1200x630 exports/og-1200x630.png
```
**Font gotcha:** Fraunces and DM Sans are Google Fonts. If the renderer does
not have them installed locally, the PNG will show the fallback (Georgia /
system sans). For high-fidelity social exports, install both:
```bash
# Ubuntu / Debian
sudo apt-get install fonts-liberation
# Then drop Fraunces + DM Sans .ttf files into ~/.fonts/ and run fc-cache -fv
```
Or export from a browser (`file://` open + screenshot at the target size) —
Chrome/Firefox honour the Google Fonts `<link>` if the SVG references it,
though our brand SVGs use plain `<text>` with a system-safe stack, so the
Fraunces + DM Sans rendering happens only when those faces are locally
available.

BIN
site/deviant/brand/source/exports/avatar-1024.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 190 KiB

BIN
site/deviant/brand/source/exports/avatar-400.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
site/deviant/brand/source/exports/facebook-cover-820x312.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
site/deviant/brand/source/exports/favicon-32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 678 B

BIN
site/deviant/brand/source/exports/favicon-64.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
site/deviant/brand/source/exports/icon-512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
site/deviant/brand/source/exports/instagram-1080.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 230 KiB

BIN
site/deviant/brand/source/exports/linkedin-banner-1584x396.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 133 KiB

BIN
site/deviant/brand/source/exports/mark-512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
site/deviant/brand/source/exports/mark-onlight-512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
site/deviant/brand/source/exports/og-1200x630.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 184 KiB

BIN
site/deviant/brand/source/exports/twitter-card-1200x675.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 176 KiB

BIN
site/deviant/brand/source/exports/twitter-header-1500x500.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 168 KiB

BIN
site/deviant/brand/source/exports/twitter-header-deviation-1500x500.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
site/deviant/brand/source/exports/wordmark-1440.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 34 KiB

52
site/deviant/brand/twitter-header-1500x500.svg Normal file
View file

@ -0,0 +1,52 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="500" viewBox="0 0 1500 500" role="img" aria-label="Deviant — Power Your Ideas">
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&amp;family=DM+Sans:wght@400;500;600;700&amp;display=swap');
.display { font-family: 'Fraunces', Georgia, serif; }
.body { font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; }
</style>
<radialGradient id="sky" cx="30%" cy="35%" r="88%">
<stop offset="0%" stop-color="#0c1220"/>
<stop offset="55%" stop-color="#070d1a"/>
<stop offset="100%" stop-color="#02040a"/>
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="18" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<!-- X/Twitter desktop overlays a ~200px circular avatar in the lower-left of the
banner (its centre sits roughly at (150, 425) for a 1500×500 image). Keep
critical copy right of x≈340 to clear it. Top/bottom ~60px can be cropped
on mobile. -->
<rect width="1500" height="500" fill="url(#sky)"/>
<g fill="#ffffff">
<circle cx="200" cy="60" r="1.6" opacity="0.5"/>
<circle cx="380" cy="110" r="1.3" opacity="0.4"/>
<circle cx="540" cy="60" r="1.2" opacity="0.35"/>
<circle cx="720" cy="100" r="1.6" opacity="0.45"/>
<circle cx="900" cy="60" r="1.3" opacity="0.4"/>
<circle cx="1080" cy="110" r="1.7" opacity="0.5"/>
<circle cx="1260" cy="70" r="1.5" opacity="0.4"/>
<circle cx="1400" cy="130" r="1.6" opacity="0.45"/>
<circle cx="440" cy="440" r="1.3" opacity="0.35"/>
<circle cx="620" cy="420" r="1.6" opacity="0.45"/>
<circle cx="820" cy="450" r="1.4" opacity="0.4"/>
<circle cx="1020" cy="420" r="1.7" opacity="0.5"/>
<circle cx="1220" cy="450" r="1.2" opacity="0.35"/>
<circle cx="1400" cy="440" r="1.5" opacity="0.4"/>
</g>
<!-- Big orbital ring, right-of-center -->
<ellipse cx="1080" cy="260" rx="280" ry="170" fill="none" stroke="#2a3650" stroke-width="8" transform="rotate(-22 1080 260)"/>
<circle cx="1270" cy="130" r="26" fill="#d6ff3d" filter="url(#glow)"/>
<!-- Copy stack — shifted right (x=360) so X/Twitter's desktop avatar
overlap (bottom-left ~200px circle centred near x=150,y=425) clears it. -->
<text class="display" x="360" y="220" font-weight="500" font-size="130" fill="#f1f4fa" letter-spacing="-2">Deviant</text>
<text class="body" x="362" y="272" font-weight="600" font-size="26" fill="#d6ff3d" letter-spacing="5">POWER YOUR IDEAS.</text>
<text class="display" x="360" y="340" font-style="italic" font-weight="400" font-size="28" fill="#b8c2d4">A response to a default trajectory.</text>
<text class="body" x="360" y="378" font-weight="400" font-size="20" fill="#8892a5">On-chain experience that intermediation cannot mediate.</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

70
site/deviant/brand/twitter-header-deviation-1500x500.svg Normal file
View file

@ -0,0 +1,70 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="500" viewBox="0 0 1500 500" role="img" aria-label="Deviant — A response to a default trajectory">
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&amp;family=DM+Sans:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@500&amp;display=swap');
.display { font-family: 'Fraunces', Georgia, serif; }
.body { font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
</style>
<radialGradient id="sky" cx="28%" cy="30%" r="92%">
<stop offset="0%" stop-color="#0c1220"/>
<stop offset="55%" stop-color="#070d1a"/>
<stop offset="100%" stop-color="#02040a"/>
</radialGradient>
<filter id="acid-glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="node-glow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur stdDeviation="10" result="b"/>
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<!-- Same avatar-safe policy: keep critical copy right of x≈340. -->
<rect width="1500" height="500" fill="url(#sky)"/>
<!-- Sparse starfield -->
<g fill="#ffffff">
<circle cx="220" cy="80" r="1.6" opacity="0.5"/>
<circle cx="380" cy="120" r="1.2" opacity="0.35"/>
<circle cx="560" cy="60" r="1.4" opacity="0.4"/>
<circle cx="740" cy="90" r="1.6" opacity="0.45"/>
<circle cx="920" cy="60" r="1.3" opacity="0.4"/>
<circle cx="1100" cy="90" r="1.5" opacity="0.45"/>
<circle cx="1280" cy="60" r="1.7" opacity="0.5"/>
<circle cx="1420" cy="110" r="1.4" opacity="0.4"/>
<circle cx="480" cy="440" r="1.3" opacity="0.35"/>
<circle cx="700" cy="460" r="1.5" opacity="0.4"/>
<circle cx="920" cy="440" r="1.6" opacity="0.45"/>
<circle cx="1140" cy="460" r="1.2" opacity="0.35"/>
<circle cx="1360" cy="440" r="1.5" opacity="0.4"/>
</g>
<!-- Copy: wordmark + tagline (left, past avatar overlap) -->
<text class="display" x="360" y="220" font-weight="500" font-size="120" fill="#f1f4fa" letter-spacing="-2">Deviant</text>
<text class="body" x="362" y="270" font-weight="600" font-size="24" fill="#d6ff3d" letter-spacing="5">POWER YOUR IDEAS.</text>
<text class="display" x="360" y="340" font-style="italic" font-weight="400" font-size="26" fill="#b8c2d4">A response to a default trajectory.</text>
<!-- Deviation chart: exact geometry from the site hero (viewBox 380×240),
transformed to sit on the right side of the banner. Scale 1.85x places it
from roughly x=730..1420, y=115..400. -->
<g transform="translate(708 34) scale(1.85)">
<!-- Default trajectory: dashed, muted, curves down-right -->
<path d="M 12 70 C 110 96, 150 120, 200 138 C 255 158, 305 176, 368 198"
stroke="#6a7488" stroke-width="1.8" fill="none" opacity="0.75"
stroke-dasharray="4 8" stroke-linecap="round"/>
<!-- Branch dot at the divergence -->
<circle cx="200" cy="138" r="4" fill="#6a7488"/>
<!-- Deviation: solid, acid, curves up-right -->
<path d="M 200 138 C 250 120, 300 84, 368 44"
stroke="#d6ff3d" stroke-width="3" fill="none" stroke-linecap="round"
filter="url(#acid-glow)"/>
<!-- Terminal acid node -->
<circle cx="368" cy="44" r="6" fill="#d6ff3d" filter="url(#node-glow)"/>
<!-- Labels -->
<text class="mono" x="12" y="222" font-size="10" fill="#6a7488" letter-spacing="2" text-transform="uppercase">DEFAULT TRAJECTORY</text>
<text class="mono" x="368" y="30" font-size="10" fill="#d6ff3d" letter-spacing="2" text-anchor="end">DEVIATION</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB