site/deviant/brand/README.md
Local Dev 3879b05dfb Sweep: mobile Ariadne updates, Deviant brand + sites, Hephaestus bootstrap, snappymail
Broad-scope commit sweeping in work from parallel sessions plus this session's
dev-only utilities. No single unifying theme — this is the "commit everything
that's ready" pass. Grouped by area below.

AriadneResolver / mobile
* Small updates to BchFetcher, Bns, MainActivity, AriadneVpnService, and the
  Android manifest — from a parallel mobile-resolver session.
* AriadneResolver/mobile/webpreview/ — new local dev webview (index.html +
  server.mjs) for iterating on the mobile UI without a device.

Email / SnappyMail
* Email/snappymail-plugin/silentmode-addresses — new SnappyMail plugin
  (README, CSS, PHP entry, JS) for surfacing @silentmode.st address
  management inside the webmail UI.

Hephaestus (Forgejo + auth-proxy)
* auth-proxy/src/oidc.ts + docker-compose.yml updates.
* scripts/bootstrap-auth.sh — idempotent script that registers the wallet
  auth-proxy as Forgejo's OIDC provider after `docker compose up -d`. All
  secrets read from .env — no literals in the script.

TheseusNavigator / dev tools
* dev/list-tlds.mjs — enumerate every registered BNS name grouped by TLD via
  our own indexer.
* dev/show-tlds-bch.mjs — dump the full records payload of the legacy
  tlds.bch name (kept as a diagnostic for the list-in-one-NFT era).

Deviant sites + brand
* site/deviant/ — new microsites (anthemus, potidaea, brand, mindmap, main
  index) plus the full brand kit under site/deviant/brand/ (logos, icons,
  palette, social exports as SVG source + PNG renders).
* site-sirius-x/portal.html — updates.

Coordination
* _coordination/sessions/mobile-resolver.md — parallel-session notes.

Deliberately excluded from this commit:
* scratchpad/ — this session's temp drafts (Sia doc mockups, tlds UPD payloads).
* TheseusNavigator/_prev/ — ~372 MB of prior release binaries; belongs in
  a separate artefacts store, not the git tree. Add to .gitignore next pass.
2026-08-30 10:38:49 +02:00

106 lines
4.6 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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