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.
This commit is contained in:
Local Dev
parent
4b8d60d034
commit
3879b05dfb
39 changed files with 3430 additions and 0 deletions
251
deviant/anthemus/index.html
Normal file
251
deviant/anthemus/index.html
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
<!doctype html>
|
||||
<html lang="en" data-theme="signal">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Anthemus — Native Bitcoin Cash DEX</title>
|
||||
<meta name="description" content="Anthemus — the native Bitcoin Cash DEX. Under Agora, alongside Potidaea's counterparty-free ASM.">
|
||||
<base href="./">
|
||||
<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;800&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; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background:
|
||||
radial-gradient(ellipse at 30% 20%, var(--sky-mid), var(--sky-deep) 60%, #02040a),
|
||||
var(--sky-deep);
|
||||
color: var(--ink);
|
||||
font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
min-height: 100vh;
|
||||
line-height: 1.55;
|
||||
}
|
||||
header {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 32px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.wordmark {
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: var(--ink-bright);
|
||||
text-decoration: none;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.wordmark::after {
|
||||
content: '.';
|
||||
color: var(--acid);
|
||||
}
|
||||
nav a {
|
||||
color: var(--ink-soft);
|
||||
text-decoration: none;
|
||||
margin-left: 24px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
nav a:hover { color: var(--acid); }
|
||||
main {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 88px 32px 64px;
|
||||
}
|
||||
.breadcrumb {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.breadcrumb a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--sky-rim); }
|
||||
.breadcrumb a:hover { color: var(--acid); border-bottom-color: var(--acid); }
|
||||
h1 {
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-weight: 500;
|
||||
font-size: clamp(56px, 9vw, 120px);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.03em;
|
||||
margin: 0 0 24px;
|
||||
color: var(--ink-bright);
|
||||
}
|
||||
.tagline {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
color: var(--acid);
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 40px;
|
||||
}
|
||||
.lede {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-size: clamp(22px, 3vw, 30px);
|
||||
color: var(--ink-soft);
|
||||
line-height: 1.45;
|
||||
margin: 0 0 32px;
|
||||
max-width: 780px;
|
||||
}
|
||||
.prose p {
|
||||
color: var(--ink);
|
||||
font-size: 18px;
|
||||
max-width: 720px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.prose p strong { color: var(--ink-bright); }
|
||||
.prose p em { color: var(--acid); font-style: italic; }
|
||||
.surfaces {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 16px;
|
||||
margin: 56px 0;
|
||||
}
|
||||
.surface {
|
||||
background: rgba(19,26,42,0.5);
|
||||
border: 1px solid var(--sky-rim);
|
||||
border-radius: 14px;
|
||||
padding: 22px 22px 24px;
|
||||
}
|
||||
.surface-name {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
color: var(--ink-bright);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.surface-desc {
|
||||
color: var(--ink-soft);
|
||||
font-size: 14.5px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.cta {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 24px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.3px;
|
||||
transition: transform 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
.btn:hover { transform: translateY(-1px); }
|
||||
.btn-primary {
|
||||
background: var(--acid);
|
||||
color: #0a0f1c;
|
||||
}
|
||||
.btn-ghost {
|
||||
color: var(--ink);
|
||||
background: transparent;
|
||||
border: 1px solid rgba(184,194,212,0.24);
|
||||
}
|
||||
.btn-ghost:hover { border-color: var(--acid); color: var(--acid); }
|
||||
.kicker {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--acid);
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
footer {
|
||||
max-width: 1200px;
|
||||
margin: 80px auto 0;
|
||||
padding: 32px;
|
||||
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; }
|
||||
footer a:hover { color: var(--acid); }
|
||||
@media (max-width: 640px) {
|
||||
header { flex-direction: column; gap: 12px; align-items: flex-start; }
|
||||
nav a { margin: 0 16px 0 0; }
|
||||
main { padding: 40px 20px 32px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="../" class="wordmark">Deviant</a>
|
||||
<nav>
|
||||
<a href="../">Home</a>
|
||||
<a href="../#agora">Agora</a>
|
||||
<a href="../potidaea/">Potidaea</a>
|
||||
<a href="https://deviant.navigate.st/" target="_blank" rel="noopener noreferrer">Wallet</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<p class="breadcrumb"><a href="../">Deviant</a> · <a href="../#agora">Agora</a> · Anthemus</p>
|
||||
|
||||
<h1>Anthemus</h1>
|
||||
<p class="tagline">Decentralized exchange</p>
|
||||
|
||||
<p class="lede">One of the two markets under Agora — the trading floor for what the mechanism can't price alone.</p>
|
||||
|
||||
<div class="prose">
|
||||
<p><strong>Potidaea</strong> handles counterparty-free swaps for backed assets — the price is the mechanism, no other participant needed. <strong>Anthemus</strong> handles everything else: <em>Token-class assets, wrapped foreign coins, cross-chain price discovery</em> — the parts of the ecosystem where a market has to <em>emerge</em> rather than be enforced.</p>
|
||||
|
||||
<p>Order book plus AMM over one engine. Swap is the exchange with order-making automated; the AMM is a maker on the same book. A single Deposit rail brings assets in from every supported chain — asset × chain → unified USD on Bitcoin Cash — without a per-stablecoin pair matrix.</p>
|
||||
|
||||
<p>Native to Bitcoin Cash. No bridges to trust, no custody to grant. The BCH base layer is the settlement layer.</p>
|
||||
</div>
|
||||
|
||||
<p class="kicker">— The Anthemus interface</p>
|
||||
<div class="surfaces">
|
||||
<div class="surface">
|
||||
<div class="surface-name">Swap</div>
|
||||
<div class="surface-desc">One-click trade against the order book. Order-making automated; you pick the pair and the amount.</div>
|
||||
</div>
|
||||
<div class="surface">
|
||||
<div class="surface-name">Exchange</div>
|
||||
<div class="surface-desc">Pro grid — chart, book, order form. Full-depth market data, limit orders, historical fills.</div>
|
||||
</div>
|
||||
<div class="surface">
|
||||
<div class="surface-name">Deposit</div>
|
||||
<div class="surface-desc">Bring assets in from EVM, Tron, Solana, Bitcoin. Ends as unified USD on BCH — one balance, one currency.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cta">
|
||||
<a class="btn btn-primary" href="https://navigate.st/bns/anthemus.bch/" target="_blank" rel="noopener noreferrer">Open Anthemus <span aria-hidden="true">→</span></a>
|
||||
<a class="btn btn-ghost" href="../#agora">About Agora <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div>Anthemus is a market layer under <a href="../">Deviant</a> · Agora.</div>
|
||||
<div>anthemus.dex · anthemus.bch · deviant.x/anthemus</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
14
deviant/brand-redirect.html
Normal file
14
deviant/brand-redirect.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Deviant — Brand assets</title>
|
||||
<meta http-equiv="refresh" content="0; url=./brand/">
|
||||
<link rel="canonical" href="./brand/">
|
||||
<style>body{background:#050810;color:#d6dde9;font-family:system-ui,sans-serif;padding:40px}a{color:#d6ff3d}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Redirecting to the <a href="./brand/">Deviant brand gallery</a>…</p>
|
||||
<script>location.replace('./brand/');</script>
|
||||
</body>
|
||||
</html>
|
||||
106
deviant/brand/README.md
Normal file
106
deviant/brand/README.md
Normal 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
deviant/brand/icon/favicon.svg
Normal file
5
deviant/brand/icon/favicon.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 325 B |
25
deviant/brand/icon/icon-512.svg
Normal file
25
deviant/brand/icon/icon-512.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
369
deviant/brand/index.html
Normal file
369
deviant/brand/index.html
Normal file
|
|
@ -0,0 +1,369 @@
|
|||
<!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>
|
||||
</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 + “Deviant” in Fraunces + “POWER YOUR IDEAS.” 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 & 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
deviant/brand/logo/deviant-mark-onlight.svg
Normal file
5
deviant/brand/logo/deviant-mark-onlight.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 407 B |
11
deviant/brand/logo/deviant-mark.svg
Normal file
11
deviant/brand/logo/deviant-mark.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 660 B |
21
deviant/brand/logo/deviant-wordmark.svg
Normal file
21
deviant/brand/logo/deviant-wordmark.svg
Normal 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&family=DM+Sans:wght@500&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>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
70
deviant/brand/palette.md
Normal file
70
deviant/brand/palette.md
Normal 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
deviant/brand/social/avatar-400x400.svg
Normal file
24
deviant/brand/social/avatar-400x400.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
36
deviant/brand/social/facebook-cover-820x312.svg
Normal file
36
deviant/brand/social/facebook-cover-820x312.svg
Normal 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&family=DM+Sans:wght@600&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>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
369
deviant/brand/social/index.html
Normal file
369
deviant/brand/social/index.html
Normal file
|
|
@ -0,0 +1,369 @@
|
|||
<!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>
|
||||
</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 + “Deviant” in Fraunces + “POWER YOUR IDEAS.” 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 & 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
deviant/brand/social/instagram-square-1080x1080.svg
Normal file
44
deviant/brand/social/instagram-square-1080x1080.svg
Normal 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&family=DM+Sans:wght@500;600&family=JetBrains+Mono:wght@500&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>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
42
deviant/brand/social/linkedin-banner-1584x396.svg
Normal file
42
deviant/brand/social/linkedin-banner-1584x396.svg
Normal 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&family=DM+Sans:wght@600&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>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
47
deviant/brand/social/og-1200x630.svg
Normal file
47
deviant/brand/social/og-1200x630.svg
Normal 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&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&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>
|
||||
|
After Width: | Height: | Size: 3 KiB |
43
deviant/brand/social/twitter-card-1200x675.svg
Normal file
43
deviant/brand/social/twitter-card-1200x675.svg
Normal 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&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&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>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
52
deviant/brand/social/twitter-header-1500x500.svg
Normal file
52
deviant/brand/social/twitter-header-1500x500.svg
Normal 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&family=DM+Sans:wght@400;500;600;700&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>
|
||||
|
After Width: | Height: | Size: 3 KiB |
85
deviant/brand/social/twitter-header-deviation-1500x500.svg
Normal file
85
deviant/brand/social/twitter-header-deviation-1500x500.svg
Normal 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&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&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>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
41
deviant/brand/source/README.md
Normal file
41
deviant/brand/source/README.md
Normal 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
deviant/brand/source/exports/avatar-1024.png
Normal file
BIN
deviant/brand/source/exports/avatar-1024.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
BIN
deviant/brand/source/exports/avatar-400.png
Normal file
BIN
deviant/brand/source/exports/avatar-400.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
deviant/brand/source/exports/facebook-cover-820x312.png
Normal file
BIN
deviant/brand/source/exports/facebook-cover-820x312.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
deviant/brand/source/exports/favicon-32.png
Normal file
BIN
deviant/brand/source/exports/favicon-32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 678 B |
BIN
deviant/brand/source/exports/favicon-64.png
Normal file
BIN
deviant/brand/source/exports/favicon-64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
deviant/brand/source/exports/icon-512.png
Normal file
BIN
deviant/brand/source/exports/icon-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
deviant/brand/source/exports/instagram-1080.png
Normal file
BIN
deviant/brand/source/exports/instagram-1080.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
BIN
deviant/brand/source/exports/linkedin-banner-1584x396.png
Normal file
BIN
deviant/brand/source/exports/linkedin-banner-1584x396.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
deviant/brand/source/exports/mark-512.png
Normal file
BIN
deviant/brand/source/exports/mark-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
deviant/brand/source/exports/mark-onlight-512.png
Normal file
BIN
deviant/brand/source/exports/mark-onlight-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
deviant/brand/source/exports/og-1200x630.png
Normal file
BIN
deviant/brand/source/exports/og-1200x630.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
BIN
deviant/brand/source/exports/twitter-card-1200x675.png
Normal file
BIN
deviant/brand/source/exports/twitter-card-1200x675.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
deviant/brand/source/exports/twitter-header-1500x500.png
Normal file
BIN
deviant/brand/source/exports/twitter-header-1500x500.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
deviant/brand/source/exports/wordmark-1440.png
Normal file
BIN
deviant/brand/source/exports/wordmark-1440.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
536
deviant/deviant_mindmap.html
Normal file
536
deviant/deviant_mindmap.html
Normal file
|
|
@ -0,0 +1,536 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="signal">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant — The Map</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=JetBrains+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
(function(){try{var t=localStorage.getItem('deviant-theme');if(t==='editorial'){document.documentElement.removeAttribute('data-theme');}else{document.documentElement.setAttribute('data-theme','signal');}}catch(e){document.documentElement.setAttribute('data-theme','signal');}})();
|
||||
</script>
|
||||
<style>
|
||||
:root{
|
||||
--header-h:58px;
|
||||
--bg:#050810; --panel:#0a1120; --panel-2:#0d1626; --line:#1c2436;
|
||||
--ink:#d6dde9; --ink-bright:#f1f4fa; --ink-soft:#b8c2d4; --muted:#6a7488;
|
||||
--acid:#d6ff3d; --acid-soft:#c8ef2e;
|
||||
--acid-halo:rgba(214,255,61,.34); --acid-dim:rgba(214,255,61,.14);
|
||||
--glow:0 0 6px rgba(214,255,61,.5), 0 0 18px rgba(214,255,61,.3), 0 0 40px rgba(214,255,61,.15);
|
||||
--glow-soft:0 0 4px rgba(214,255,61,.4), 0 0 12px rgba(214,255,61,.22);
|
||||
--font:'Fraunces', Georgia, serif;
|
||||
--font-mono:'JetBrains Mono', monospace;
|
||||
}
|
||||
[data-theme="signal"]{
|
||||
--bg:#050505; --panel:#0d0d0d; --panel-2:#121212; --line:#262626;
|
||||
--ink:#f2f2f2; --ink-bright:#ffffff; --ink-soft:#d7d7d7; --muted:#9a9a9a;
|
||||
--acid:#c6ff00; --acid-soft:#b7eb1f;
|
||||
--acid-halo:rgba(198,255,0,.34); --acid-dim:rgba(198,255,0,.16);
|
||||
--glow:0 0 6px rgba(198,255,0,.55), 0 0 18px rgba(198,255,0,.35), 0 0 40px rgba(198,255,0,.18);
|
||||
--glow-soft:0 0 4px rgba(198,255,0,.45), 0 0 12px rgba(198,255,0,.25);
|
||||
--font:'DM Sans', system-ui, "Segoe UI", sans-serif;
|
||||
--font-mono:'DM Mono', ui-monospace, monospace;
|
||||
}
|
||||
*{box-sizing:border-box;margin:0;padding:0;}
|
||||
html,body{background:var(--bg);}
|
||||
html{scroll-padding-top:calc(var(--header-h) + 14px);}
|
||||
body{
|
||||
font-family:var(--font);
|
||||
color:var(--ink);
|
||||
line-height:1.5;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
background:var(--bg);
|
||||
background-attachment:fixed;
|
||||
padding:calc(var(--header-h) + 30px) 22px 90px;
|
||||
}
|
||||
[data-theme="signal"] body{
|
||||
background:
|
||||
radial-gradient(1200px 600px at 50% -10%, rgba(198,255,0,0.06), transparent 60%),
|
||||
radial-gradient(900px 500px at 100% 120%, rgba(198,255,0,0.04), transparent 60%),
|
||||
#050505;
|
||||
background-attachment:fixed;
|
||||
}
|
||||
/* Starfield (from the Deviant website) */
|
||||
.stars{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
|
||||
.starfield{position:absolute;top:50%;left:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;transform-origin:center center;will-change:transform;animation:skyspin 240s linear infinite;}
|
||||
.star{position:absolute;background:rgba(255,255,255,.5);border-radius:50%;
|
||||
animation:twinkle var(--twinkle-duration,12s) ease-in-out infinite;animation-delay:var(--twinkle-delay,0s);}
|
||||
@keyframes twinkle{0%,100%{opacity:.3;}50%{opacity:.85;}}
|
||||
@keyframes skyspin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
|
||||
@media (prefers-reduced-motion: reduce){.star{animation:none;opacity:.4;}.starfield{animation:none;}}
|
||||
/* Frozen site header — shared design system */
|
||||
.site-header{position:fixed;top:0;left:0;right:0;width:100%;z-index:100;
|
||||
background:rgba(5,8,16,0.80);
|
||||
backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);
|
||||
border-bottom:1px solid rgba(255,255,255,0.06);}
|
||||
[data-theme="signal"] .site-header{background:rgba(5,5,5,0.82);}
|
||||
.topbar{max-width:1180px;margin:0 auto;padding:16px 32px;
|
||||
display:flex;justify-content:space-between;align-items:center;}
|
||||
.topbar-right{display:flex;align-items:center;gap:28px;}
|
||||
.topbar .wordmark{font-family:var(--font);font-weight:500;font-size:22px;
|
||||
letter-spacing:-.01em;color:var(--ink-bright);text-decoration:none;line-height:1;}
|
||||
[data-theme="signal"] .topbar .wordmark{font-weight:800;}
|
||||
.topbar .nav{display:flex;gap:36px;font-family:var(--font-mono);font-size:11px;
|
||||
letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
|
||||
.topbar .nav a{color:var(--muted);text-decoration:none;transition:color .2s ease;}
|
||||
.topbar .nav a:hover{color:var(--ink-bright);}
|
||||
.topbar .nav a.active{color:var(--acid);text-shadow:var(--glow-soft);}
|
||||
.theme-toggle{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
|
||||
color:var(--acid);background:rgba(214,255,61,0.06);border:1px solid var(--acid-halo);
|
||||
padding:8px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;
|
||||
transition:border-color .3s ease,color .3s ease,background .3s ease;}
|
||||
.theme-toggle:hover{border-color:var(--acid);background:rgba(214,255,61,0.10);}
|
||||
[data-theme="signal"] .theme-toggle{background:rgba(198,255,0,0.07);}
|
||||
@media(max-width:760px){.topbar{padding:12px 18px;} .topbar .nav{display:none;}}
|
||||
.wrap{max-width:1180px;margin:0 auto;position:relative;z-index:1;}
|
||||
|
||||
/* glow accent word */
|
||||
.g{color:var(--acid);text-shadow:var(--glow);font-weight:800;letter-spacing:.2px;}
|
||||
.gs{color:var(--acid-soft);text-shadow:var(--glow-soft);font-weight:700;}
|
||||
|
||||
/* ===== HEADER / HUB ===== */
|
||||
header{text-align:center;margin-bottom:14px;}
|
||||
.kicker{
|
||||
font-size:12px;letter-spacing:5px;text-transform:uppercase;color:var(--muted);
|
||||
font-weight:700;margin-bottom:22px;
|
||||
}
|
||||
.hub{
|
||||
display:inline-block;position:relative;
|
||||
padding:30px 46px;border-radius:16px;
|
||||
background:linear-gradient(180deg,var(--panel),var(--panel-2));
|
||||
border:1.5px solid var(--acid-halo);
|
||||
box-shadow:var(--glow), inset 0 0 30px rgba(198,255,0,.05);
|
||||
}
|
||||
.hub h1{
|
||||
font-size:clamp(40px,9vw,86px);font-weight:800;letter-spacing:-1px;line-height:.95;
|
||||
color:var(--acid);text-shadow:var(--glow);text-transform:uppercase;
|
||||
}
|
||||
.hub .tag{
|
||||
margin-top:10px;font-size:clamp(13px,2.4vw,16px);font-weight:700;color:var(--ink);
|
||||
letter-spacing:.4px;
|
||||
}
|
||||
.hub .sub{margin-top:4px;font-size:13px;color:var(--muted);font-weight:400;}
|
||||
|
||||
.axiom{
|
||||
max-width:640px;margin:26px auto 0;font-size:14px;color:var(--muted);
|
||||
font-style:normal;border-top:1px solid var(--line);padding-top:18px;
|
||||
}
|
||||
.axiom b{color:var(--ink);font-weight:700;}
|
||||
|
||||
.legend{
|
||||
text-align:center;margin:30px auto 36px;font-size:12px;color:var(--muted);
|
||||
display:flex;gap:18px;justify-content:center;flex-wrap:wrap;align-items:center;
|
||||
}
|
||||
.legend span{display:inline-flex;align-items:center;gap:7px;}
|
||||
.dot{width:9px;height:9px;border-radius:50%;background:var(--acid);box-shadow:var(--glow-soft);}
|
||||
.legend .hint{color:var(--muted);}
|
||||
|
||||
/* ===== BRANCH GRID ===== */
|
||||
.grid{
|
||||
display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
|
||||
align-items:start;
|
||||
}
|
||||
@media(max-width:760px){.grid{grid-template-columns:1fr;}}
|
||||
|
||||
.branch{
|
||||
align-self:start;
|
||||
background:linear-gradient(180deg,var(--panel),var(--panel-2));
|
||||
border:1px solid var(--line);border-radius:14px;overflow:hidden;
|
||||
transition:border-color .25s ease, box-shadow .25s ease, transform .15s ease;
|
||||
}
|
||||
.branch:hover{border-color:var(--acid-halo);box-shadow:0 0 0 1px var(--acid-dim), 0 14px 40px rgba(0,0,0,.5);}
|
||||
.branch.open{border-color:var(--acid);box-shadow:0 0 0 1px var(--acid-dim), var(--glow-soft);}
|
||||
|
||||
.bhead{
|
||||
display:flex;align-items:center;gap:14px;cursor:pointer;
|
||||
padding:20px 20px;user-select:none;
|
||||
min-height:92px;
|
||||
}
|
||||
.bnum{
|
||||
flex:0 0 auto;width:40px;height:40px;border-radius:10px;
|
||||
display:grid;place-items:center;font-weight:800;font-size:16px;
|
||||
color:var(--acid);background:var(--panel);border:1px solid var(--acid-halo);
|
||||
text-shadow:var(--glow-soft);
|
||||
}
|
||||
.btitles{flex:1 1 auto;min-width:0;}
|
||||
.btitle{font-size:17px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||
.bsub{font-size:13px;color:var(--muted);font-weight:400;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||||
.chev{flex:0 0 auto;color:var(--muted);font-size:18px;transition:transform .25s ease;font-weight:700;}
|
||||
.branch.open .chev{transform:rotate(45deg);color:var(--acid);text-shadow:var(--glow-soft);}
|
||||
|
||||
.bbody{
|
||||
max-height:0;overflow:hidden;
|
||||
transition:max-height .4s ease;
|
||||
border-top:1px solid transparent;
|
||||
}
|
||||
.branch.open .bbody{border-top-color:var(--line);}
|
||||
.bbody-inner{padding:6px 20px 20px 20px;}
|
||||
|
||||
ul.points{list-style:none;}
|
||||
ul.points li{
|
||||
position:relative;padding:11px 0 11px 22px;font-size:14px;color:var(--ink-soft);
|
||||
border-bottom:1px solid rgba(255,255,255,.04);
|
||||
}
|
||||
ul.points li:last-child{border-bottom:none;}
|
||||
ul.points li::before{
|
||||
content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;border-radius:2px;
|
||||
background:var(--acid);box-shadow:var(--glow-soft);
|
||||
}
|
||||
ul.points li b{color:var(--ink-bright);font-weight:700;}
|
||||
.pill{
|
||||
display:inline-block;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
|
||||
color:var(--bg);background:var(--acid);padding:2px 8px;border-radius:5px;margin-left:6px;
|
||||
box-shadow:var(--glow-soft);vertical-align:middle;
|
||||
}
|
||||
|
||||
/* footer strip */
|
||||
.epigram{
|
||||
margin:46px auto 6px;max-width:760px;text-align:center;
|
||||
font-size:clamp(18px,2.9vw,27px);font-weight:800;letter-spacing:.2px;line-height:1.25;
|
||||
}
|
||||
.strip{
|
||||
margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
|
||||
}
|
||||
@media(max-width:760px){.strip{grid-template-columns:repeat(2,1fr);}}
|
||||
.stat{
|
||||
background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 14px;text-align:center;
|
||||
}
|
||||
.stat .n{font-size:clamp(22px,4vw,30px);font-weight:800;color:var(--acid);text-shadow:var(--glow-soft);line-height:1;}
|
||||
.stat .l{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:8px;font-weight:700;}
|
||||
|
||||
.controls{text-align:center;margin:30px 0 4px;}
|
||||
.controls button{
|
||||
font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
|
||||
color:var(--acid);background:transparent;border:1px solid var(--acid-halo);
|
||||
padding:10px 20px;border-radius:8px;cursor:pointer;transition:all .2s ease;text-shadow:var(--glow-soft);
|
||||
}
|
||||
.controls button:hover{background:var(--acid-dim);box-shadow:var(--glow-soft);}
|
||||
|
||||
.foot{
|
||||
margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
|
||||
display:flex;justify-content:space-between;align-items:flex-end;gap:28px;
|
||||
font-size:11px;color:#5f5f5f;letter-spacing:1px;
|
||||
}
|
||||
.foot-left{max-width:60%;text-align:left;line-height:1.5;}
|
||||
.foot-right{text-align:right;flex:0 0 auto;}
|
||||
.foot-brand{font-size:24px;font-weight:800;color:var(--acid);text-shadow:var(--glow);text-transform:uppercase;letter-spacing:0;line-height:1;}
|
||||
.slogan{margin-top:7px;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:.5px;}
|
||||
@media(max-width:600px){
|
||||
.foot{flex-direction:column;align-items:flex-start;gap:18px;}
|
||||
.foot-left{max-width:100%;}
|
||||
.foot-right{text-align:left;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stars" id="stars" aria-hidden="true"></div>
|
||||
<header class="site-header">
|
||||
<div class="topbar">
|
||||
<a href="./" class="wordmark">Deviant</a>
|
||||
<div class="topbar-right">
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="./#what">What</a>
|
||||
<a href="./#mechanism">Mechanism</a>
|
||||
<a href="./#proof">Proof</a>
|
||||
<a href="deviant_mindmap.html" class="active">Map</a>
|
||||
<a href="deviant_athenae.html">Governance</a>
|
||||
</nav>
|
||||
<button class="theme-toggle" id="themeToggle" type="button" aria-label="Toggle visual style">Style · <span id="themeName">CosmoGenesis</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="wrap">
|
||||
|
||||
<header>
|
||||
<div class="kicker">Marketing Mindmap · Bitcoin Cash · v2</div>
|
||||
<div class="hub">
|
||||
<h1>Deviant</h1>
|
||||
<div class="tag">A <span class="g">tectonic shift</span> in finance.</div>
|
||||
<div class="sub">A non-custodial Bitcoin Cash wallet on the MBA Standard</div>
|
||||
</div>
|
||||
<p class="axiom">
|
||||
<b>The core distinction is what Deviant introduces:</b> <span class="gs">MBA</span> backing
|
||||
(intrinsic, consensus-enforced, redeemable with no counterparty) and the
|
||||
<span class="gs">counterparty-free ASM</span>. BCH's UTXO + PoW + CashScript design is the
|
||||
<i>enabling substrate</i> — not the differentiator. And one reframing underneath it all:
|
||||
Bitcoin Cash satoshis are a <span class="gs">unit of account, not a price</span>.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="legend">
|
||||
<span><i class="dot"></i> Marketing pillar</span>
|
||||
<span class="hint">Tap any branch to expand · acid-green = the words that carry the pitch</span>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button id="toggleAll">Expand all</button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="grid" id="grid">
|
||||
|
||||
<!-- 1 -->
|
||||
<section class="branch open">
|
||||
<div class="bhead"><div class="bnum">01</div>
|
||||
<div class="btitles"><div class="btitle">The Paradigm</div>
|
||||
<div class="bsub">What Deviant actually is</div></div>
|
||||
<div class="chev">+</div></div>
|
||||
<div class="bbody"><div class="bbody-inner"><ul class="points">
|
||||
<li>Every existing asset — fiat, equity, real estate, crypto tokens — has a <b>single point of failure</b>: an issuer, custodian, or counterparty who can fail, freeze, or disappear.</li>
|
||||
<li>Deviant removes it <span class="g">by construction</span> — not by regulation, not by trust. A <b>gold standard done by mathematics</b>.</li>
|
||||
<li>The differentiator is <span class="g">MBA backing + counterparty-free ASM</span>. Consensus-enforced and economical at scale.</li>
|
||||
</ul></div></div>
|
||||
</section>
|
||||
|
||||
<!-- 2 -->
|
||||
<section class="branch">
|
||||
<div class="bhead"><div class="bnum">02</div>
|
||||
<div class="btitles"><div class="btitle">The Mechanism · ASM</div>
|
||||
<div class="bsub">How it works</div></div>
|
||||
<div class="chev">+</div></div>
|
||||
<div class="bbody"><div class="bbody-inner"><ul class="points">
|
||||
<li><span class="g">ASM — Automated Swap Mechanism.</span> Swap any open-mint asset into any other with <b>no DEX, no AMM, no oracle, no operator</b>.</li>
|
||||
<li>Every unit is <b>self-backed</b> — it carries its own BCH inside the UTXO at a fixed rate. Redemption is a plain spend; swaps are atomic single transactions enforced by consensus.</li>
|
||||
<li><b>Universal Exchange Rate:</b> rate A ÷ rate B — deterministic, no market needed.</li>
|
||||
</ul></div></div>
|
||||
</section>
|
||||
|
||||
<!-- 3 -->
|
||||
<section class="branch">
|
||||
<div class="bhead"><div class="bnum">03</div>
|
||||
<div class="btitles"><div class="btitle">The MBA</div>
|
||||
<div class="bsub">Not a token. A new asset class.</div></div>
|
||||
<div class="chev">+</div></div>
|
||||
<div class="bbody"><div class="bbody-inner"><ul class="points">
|
||||
<li>An <b>MBA</b> (Mathematically / Minted Backed Asset) carries <span class="g">intrinsic, consensus-enforced BCH backing</span> — unilaterally redeemable at a fixed rate, no custodian, no counterparty, purely by mathematics.</li>
|
||||
<li><b>Properties:</b> a guaranteed on-chain <span class="gs">floor value</span>; the rate is <b>fixed and immutable at genesis</b>; redemption is available 24/7 with no off-switch and no permission.</li>
|
||||
<li><b>How it differs:</b> a classical token has no locked peg and leans on intermediary trust and market sentiment. An MBA's value is <span class="g">enforced by the protocol with non-reversible rules</span>.</li>
|
||||
</ul></div></div>
|
||||
</section>
|
||||
|
||||
<!-- 4 -->
|
||||
<section class="branch">
|
||||
<div class="bhead"><div class="bnum">04</div>
|
||||
<div class="btitles"><div class="btitle">The Zero Properties</div>
|
||||
<div class="bsub">The pitch, in single words</div></div>
|
||||
<div class="chev">+</div></div>
|
||||
<div class="bbody"><div class="bbody-inner"><ul class="points">
|
||||
<li><span class="g">Zero counterparty</span> · <span class="g">zero intermediary</span> · <span class="g">zero trust required</span>.</li>
|
||||
<li><span class="g">Zero liquidity ceiling</span> — any user, any amount, any time; supply expands to meet demand.</li>
|
||||
<li><span class="g">Zero fungibility barriers</span> — every open-mint MBA shares one measurement system, interchangeable at an exact rate.</li>
|
||||
<li><b>Zero complexity</b> for founders · <b>zero maintenance</b> · <b>zero ongoing contribution</b> · <b>zero dependence</b> · <b>zero friction</b>. <span class="g">Don't trust, verify.</span></li>
|
||||
</ul></div></div>
|
||||
</section>
|
||||
|
||||
<!-- 5 -->
|
||||
<section class="branch">
|
||||
<div class="bhead"><div class="bnum">05</div>
|
||||
<div class="btitles"><div class="btitle">Founders' Revenue</div>
|
||||
<div class="bsub">Earn without selling the asset</div></div>
|
||||
<div class="chev">+</div></div>
|
||||
<div class="bbody"><div class="bbody-inner"><ul class="points">
|
||||
<li><b>Founder fee</b> on mint only (immutable after genesis). Redemption is free. Set at <b>1% on both sides</b>, it creates a <span class="g">mathematically enforced ~2% round-trip spread</span>.</li>
|
||||
<li><span class="g">Automated, perpetual revenue</span> — the founder earns from <i>activity</i>, not from selling or holding the asset. No treasury to dump, no insider allocation.</li>
|
||||
<li>A <b>Revenue Acquisition Mechanism</b>, not a sale: users acquire from the algorithm; the founder only collects the fee.</li>
|
||||
<li>The 5% cap is a <b>wallet/template guardrail</b>, not a protocol ceiling — the protocol imposes no fee limit.</li>
|
||||
</ul></div></div>
|
||||
</section>
|
||||
|
||||
<!-- 6 -->
|
||||
<section class="branch">
|
||||
<div class="bhead"><div class="bnum">06</div>
|
||||
<div class="btitles"><div class="btitle">Agora</div>
|
||||
<div class="bsub">A market with no analogue</div></div>
|
||||
<div class="chev">+</div></div>
|
||||
<div class="bbody"><div class="bbody-inner"><ul class="points">
|
||||
<li><span class="g">Agora</span> is what emerges when <b>ASM</b> and <b>MBA launch</b> work in combination — an <span class="g">emergent market that has no analogue anywhere</span>.</li>
|
||||
<li>Users <span class="g">swap directly at the protocol level — with no counterparty</span>: no order book, no market maker, no listing gate. The market exists the moment the asset does.</li>
|
||||
<li>Founders <span class="g">create an asset and earn — without ever selling it</span>. Acquisition comes from the algorithm (ASM), not from a seller.</li>
|
||||
<li>Liquidity is <span class="g">Poseidon</span> — deep as an ocean: the protocol is the immutable liquidity provider, native, instant, and unlimited. Zero bootstrap, zero ceiling.</li>
|
||||
</ul></div></div>
|
||||
</section>
|
||||
|
||||
<!-- 7 -->
|
||||
<section class="branch">
|
||||
<div class="bhead"><div class="bnum">07</div>
|
||||
<div class="btitles"><div class="btitle">The Proof</div>
|
||||
<div class="bsub">A working mechanism, not a claim</div></div>
|
||||
<div class="chev">+</div></div>
|
||||
<div class="bbody"><div class="bbody-inner"><ul class="points">
|
||||
<li>Validated on Bitcoin Cash <b>chipnet</b> across 135 snapshots. <span class="pill">Live</span></li>
|
||||
<li><span class="g">~445 tests</span> — the majority exercising MBAs across <b>use cases, configurations, and adversarial / vulnerability scenarios</b>: what MBAs can do, and whether they break. (The early <b>129 atomic swaps</b> were the first proof the mechanism works.)</li>
|
||||
<li>Result across all of it: <span class="g">0 exploits · 100% peg integrity</span>. Wallet core feature-complete; <b>PWA beta live</b> (chipnet/testnet, mainnet structurally absent).</li>
|
||||
<li>The CTA asks the reader to <b>verify a mathematical claim</b>, not to pledge: <i>Verify the contract · Read the spec · Audit the snapshots.</i></li>
|
||||
</ul></div></div>
|
||||
</section>
|
||||
|
||||
<!-- 8 -->
|
||||
<section class="branch">
|
||||
<div class="bhead"><div class="bnum">08</div>
|
||||
<div class="btitles"><div class="btitle">Positioning</div>
|
||||
<div class="bsub">Why Deviant wins its lane</div></div>
|
||||
<div class="chev">+</div></div>
|
||||
<div class="bbody"><div class="bbody-inner"><ul class="points">
|
||||
<li><b>vs conventional tokens</b> (ERC-20, BEP-20, and the like): they're financially and structurally disconnected from their base layer. MBAs are tied to it — one asset's success <span class="gs">amplifies the whole ecosystem</span>.</li>
|
||||
<li><b>vs stablecoins:</b> the <span class="g">bankruptcy-protection floor</span> — on-chain recoverable value if the issuer fails, where a conventional stablecoin recovers $0.</li>
|
||||
<li><b>vs DEX/exchanges:</b> no order matching, no liquidity to bootstrap, no counterparty to wait for.</li>
|
||||
<li>The <b>volatility paradox:</b> the asset marketed as "safe" fails its advertised property under stress; an MBA promises nothing it cannot keep.</li>
|
||||
</ul></div></div>
|
||||
</section>
|
||||
|
||||
<!-- 9 -->
|
||||
<section class="branch">
|
||||
<div class="bhead"><div class="bnum">09</div>
|
||||
<div class="btitles"><div class="btitle">Platform Revenue</div>
|
||||
<div class="bsub">How Deviant earns — no fundraise</div></div>
|
||||
<div class="chev">+</div></div>
|
||||
<div class="bbody"><div class="bbody-inner"><ul class="points">
|
||||
<li><b>Revenue streams:</b> ~<b>0.5% fee on asset mint</b>, voluntary <span class="gs">marketing revenue-share</span> · premium features for sophisticated users.</li>
|
||||
<li><b>Olympic tier ladder</b> — founders opt into promotion via Agora: Free → Bronze → Silver → Gold → <span class="g">Laurel</span>.</li>
|
||||
<li><i>(Possible)</i> additional revenue from <b>dApps</b>, integrations and partnerships.</li>
|
||||
<li>Deviant lets users generate revenue — as <b>Bitcoin</b> lets miners — but with less complexity. The platform's revenue is earned (only) from <span class="g">real economic activity</span>.</li>
|
||||
</ul></div></div>
|
||||
</section>
|
||||
|
||||
<!-- 10 -->
|
||||
<section class="branch">
|
||||
<div class="bhead"><div class="bnum">10</div>
|
||||
<div class="btitles"><div class="btitle">Platform Alignment</div>
|
||||
<div class="bsub">Inverting the extraction model</div></div>
|
||||
<div class="chev">+</div></div>
|
||||
<div class="bbody"><div class="bbody-inner"><ul class="points">
|
||||
<li>Public commitment: <span class="g">25–50% of platform revenue</span> to Bitcoin Cash infrastructure, scaling toward the higher figure.</li>
|
||||
<li><b>Structural recognition of dependency, not philanthropy</b> — "most projects extract from their chain; Deviant inverts that."</li>
|
||||
<li>Direct, 24/7 transparent. Two tracks: protocol-level (nodes, CashScript) now; application-level later.</li>
|
||||
<li>The base layer is the <span class="gs">environment</span> — predetermined, permanent, unaffected by what evolves within it.</li>
|
||||
</ul></div></div>
|
||||
</section>
|
||||
|
||||
<!-- 11 -->
|
||||
<section class="branch">
|
||||
<div class="bhead"><div class="bnum">11</div>
|
||||
<div class="btitles"><div class="btitle">The Origin</div>
|
||||
<div class="bsub">Discovered, not created</div></div>
|
||||
<div class="chev">+</div></div>
|
||||
<div class="bbody"><div class="bbody-inner"><ul class="points">
|
||||
<li><b>The question that produced everything:</b> <span class="g">"Is it possible to back assets without a counterparty?"</span> — the same constraint Satoshi applied, followed honestly, without compromise, to its singular conclusion. No intermediaries, no counterparties, no trust assumptions.</li>
|
||||
<li><b>The concept preceded the technology.</b> Nothing accidental, nothing coincidence — the domain was <span class="gs">discovered, not created</span>.</li>
|
||||
<li><b>The most important distinction:</b> Deviant did not create these mathematical relationships — it <span class="g">discovered</span> them. They existed before; the question navigated to them; the technology made them accessible — the <b>CashScript</b> upgrade on Bitcoin Cash.</li>
|
||||
</ul></div></div>
|
||||
</section>
|
||||
|
||||
<!-- 12 -->
|
||||
<section class="branch">
|
||||
<div class="bhead"><div class="bnum">12</div>
|
||||
<div class="btitles"><div class="btitle">The Story</div>
|
||||
<div class="bsub">Go-to-market & narrative</div></div>
|
||||
<div class="chev">+</div></div>
|
||||
<div class="bbody"><div class="bbody-inner"><ul class="points">
|
||||
<li>The hero declares the negative first: <span class="g">"This is not a fundraise."</span> It's a demonstration of a new paradigm.</li>
|
||||
<li><b>Community first:</b> reach the Bitcoin Cash community, then a wider audience with a product they've never experienced.</li>
|
||||
<li>Founders must <b>deliver first</b> — usefulness generates revenue. The opposite of the 2017 ICO model that sold promises and delivered garbage.</li>
|
||||
<li>Agora, the MBA and the ASM combination is a <span class="g">tectonic shift</span> relative to the conventional financial system — consequences are unpredictable, and you are welcome to <span class="g">experience the new trajectory</span>.</li>
|
||||
</ul></div></div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="epigram"><span class="gs">Discovered truths are permanent.</span></div>
|
||||
|
||||
<!-- proof strip -->
|
||||
<div class="strip">
|
||||
<div class="stat"><div class="n">8</div><div class="l">Asset classes</div></div>
|
||||
<div class="stat"><div class="n">~445</div><div class="l">Tests passing</div></div>
|
||||
<div class="stat"><div class="n">0</div><div class="l">Exploits</div></div>
|
||||
<div class="stat"><div class="n">100%</div><div class="l">Peg integrity</div></div>
|
||||
</div>
|
||||
|
||||
<div class="foot">
|
||||
<div class="foot-left">The protocol rate is the gravitational center. Market prices orbit around it.</div>
|
||||
<div class="foot-right">
|
||||
<div class="foot-brand">Deviant</div>
|
||||
<div class="slogan"><span class="g">Power Your Ideas.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.bhead').forEach(function(h){
|
||||
h.addEventListener('click', function(){
|
||||
var b = h.parentElement;
|
||||
var open = b.classList.toggle('open');
|
||||
var body = b.querySelector('.bbody');
|
||||
body.style.maxHeight = open ? body.scrollHeight + 'px' : '0px';
|
||||
syncToggleLabel();
|
||||
});
|
||||
});
|
||||
|
||||
// initialise the pre-opened branch height
|
||||
document.querySelectorAll('.branch.open .bbody').forEach(function(body){
|
||||
body.style.maxHeight = body.scrollHeight + 'px';
|
||||
});
|
||||
|
||||
var btn = document.getElementById('toggleAll');
|
||||
function syncToggleLabel(){
|
||||
var total = document.querySelectorAll('.branch').length;
|
||||
var open = document.querySelectorAll('.branch.open').length;
|
||||
btn.textContent = (open === total) ? 'Collapse all' : 'Expand all';
|
||||
}
|
||||
btn.addEventListener('click', function(){
|
||||
var total = document.querySelectorAll('.branch').length;
|
||||
var open = document.querySelectorAll('.branch.open').length;
|
||||
var expand = open < total;
|
||||
document.querySelectorAll('.branch').forEach(function(b){
|
||||
var body = b.querySelector('.bbody');
|
||||
if(expand){ b.classList.add('open'); body.style.maxHeight = body.scrollHeight + 'px'; }
|
||||
else { b.classList.remove('open'); body.style.maxHeight = '0px'; }
|
||||
});
|
||||
syncToggleLabel();
|
||||
});
|
||||
syncToggleLabel();
|
||||
window.addEventListener('resize', function(){
|
||||
document.querySelectorAll('.branch.open .bbody').forEach(function(body){
|
||||
body.style.maxHeight = body.scrollHeight + 'px';
|
||||
});
|
||||
});
|
||||
|
||||
// Starfield (matches the Deviant website)
|
||||
(function generateStars(){
|
||||
var c=document.getElementById('stars'); if(!c) return;
|
||||
var field=document.createElement('div'); field.className='starfield';
|
||||
var count = window.innerWidth < 700 ? 230 : 460;
|
||||
var frag=document.createDocumentFragment();
|
||||
for(var i=0;i<count;i++){
|
||||
var s=document.createElement('div'); s.className='star';
|
||||
var roll=Math.random(), size, op, dur;
|
||||
if(roll<0.78){size=1+Math.random()*0.4;op=0.18+Math.random()*0.22;dur=14+Math.random()*8;}
|
||||
else if(roll<0.95){size=1.4+Math.random()*0.6;op=0.32+Math.random()*0.22;dur=10+Math.random()*6;}
|
||||
else {size=1.8+Math.random()*0.8;op=0.45+Math.random()*0.25;dur=8+Math.random()*5;}
|
||||
s.style.width=size+'px'; s.style.height=size+'px';
|
||||
s.style.left=Math.random()*100+'%'; s.style.top=Math.random()*100+'%';
|
||||
s.style.opacity=op; s.style.setProperty('--twinkle-duration',dur+'s');
|
||||
s.style.setProperty('--twinkle-delay',(Math.random()*dur)+'s');
|
||||
frag.appendChild(s);
|
||||
}
|
||||
field.appendChild(frag); c.appendChild(field);
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function themeSwitch(){
|
||||
var btn=document.getElementById('themeToggle');
|
||||
var name=document.getElementById('themeName');
|
||||
if(!btn||!name) return;
|
||||
function sync(){ name.textContent = document.documentElement.getAttribute('data-theme')==='signal' ? 'CosmoGenesis' : 'Editorial'; }
|
||||
sync();
|
||||
btn.addEventListener('click',function(){
|
||||
var isSignal=document.documentElement.getAttribute('data-theme')==='signal';
|
||||
if(isSignal){document.documentElement.removeAttribute('data-theme');try{localStorage.setItem('deviant-theme','editorial');}catch(e){}}
|
||||
else{document.documentElement.setAttribute('data-theme','signal');try{localStorage.setItem('deviant-theme','signal');}catch(e){}}
|
||||
sync();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
14
deviant/deviant_website.html
Normal file
14
deviant/deviant_website.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Deviant — Power Your Ideas</title>
|
||||
<meta http-equiv="refresh" content="0; url=./">
|
||||
<link rel="canonical" href="./">
|
||||
<style>body{background:#050810;color:#d6dde9;font-family:system-ui,sans-serif;padding:40px}a{color:#d6ff3d}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Redirecting to <a href="./">deviant.x</a>…</p>
|
||||
<script>location.replace('./');</script>
|
||||
</body>
|
||||
</html>
|
||||
938
deviant/index.html
Normal file
938
deviant/index.html
Normal file
|
|
@ -0,0 +1,938 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="signal">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Deviant — Power Your Ideas</title>
|
||||
<meta name="description" content="Deviant exists to enable resistance — by giving users on-chain experience that intermediation cannot mediate.">
|
||||
|
||||
<script>
|
||||
(function(){try{var t=localStorage.getItem('deviant-theme');if(t==='editorial'){document.documentElement.removeAttribute('data-theme');}else{document.documentElement.setAttribute('data-theme','signal');}}catch(e){document.documentElement.setAttribute('data-theme','signal');}})();
|
||||
</script>
|
||||
<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=JetBrains+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--header-h: 58px;
|
||||
--sky-deep: #050810;
|
||||
--sky-mid: #0a0f1c;
|
||||
--sky-rim: #131a2a;
|
||||
--star-faint: rgba(255, 255, 255, 0.22);
|
||||
--star-mid: rgba(255, 255, 255, 0.38);
|
||||
--star-bright: rgba(255, 255, 255, 0.58);
|
||||
|
||||
--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);
|
||||
--acid-dim: rgba(214, 255, 61, 0.08);
|
||||
|
||||
--rust-deep: #6b2a1c;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html, body {
|
||||
background: var(--sky-deep);
|
||||
color: var(--ink);
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-weight: 400;
|
||||
font-feature-settings: "ss01", "ss02";
|
||||
font-synthesis: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body { padding-top: var(--header-h); }
|
||||
html { scroll-padding-top: calc(var(--header-h) + 14px); }
|
||||
|
||||
body {
|
||||
background:
|
||||
radial-gradient(ellipse at top, var(--sky-rim) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at bottom right, var(--sky-mid) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at bottom left, #0c1424 0%, transparent 55%),
|
||||
var(--sky-deep);
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Starfield */
|
||||
.stars {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.starfield {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
width: 150vmax; height: 150vmax;
|
||||
margin: -75vmax 0 0 -75vmax;
|
||||
transform-origin: center center;
|
||||
will-change: transform;
|
||||
animation: skyspin 240s linear infinite;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
background: var(--star-faint);
|
||||
border-radius: 50%;
|
||||
animation: twinkle var(--twinkle-duration, 12s) ease-in-out infinite;
|
||||
animation-delay: var(--twinkle-delay, 0s);
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.35; }
|
||||
50% { opacity: 0.85; }
|
||||
}
|
||||
|
||||
@keyframes skyspin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.star { animation: none; opacity: 0.4; }
|
||||
.starfield { animation: none; }
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
/* Top bar */
|
||||
.site-header {
|
||||
position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100;
|
||||
background: rgba(5,8,16,0.80);
|
||||
backdrop-filter: blur(10px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(120%);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.topbar {
|
||||
max-width: 1180px; margin: 0 auto;
|
||||
padding: 16px 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.topbar-right { display: flex; align-items: center; gap: 28px; }
|
||||
|
||||
.wordmark {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--ink-bright);
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wordmark::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: var(--acid);
|
||||
border-radius: 50%;
|
||||
margin-left: 7px;
|
||||
vertical-align: middle;
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
0 0 6px var(--acid-glow),
|
||||
0 0 14px var(--acid-halo);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 36px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.4s ease;
|
||||
}
|
||||
|
||||
.nav a:hover { color: var(--ink-bright); }
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
min-height: calc(100vh - var(--header-h) - 24px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 64px 0 96px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Hero two-column layout */
|
||||
.hero-grid{
|
||||
display:grid;
|
||||
grid-template-columns:minmax(0,1.18fr) minmax(0,0.82fr);
|
||||
gap:clamp(36px,5vw,72px);
|
||||
align-items:center;
|
||||
width:100%;
|
||||
}
|
||||
.hero-left .opening{max-width:none;}
|
||||
.hero-left .opening p{font-size:clamp(17px,2.295vw,26.35px);margin-bottom:0;}
|
||||
.hero-left .response{margin-top:32px;}
|
||||
.hero-right{display:flex;flex-direction:column;gap:30px;}
|
||||
.traj{width:100%;height:auto;display:block;overflow:visible;}
|
||||
.traj .traj-default{stroke:var(--muted);stroke-width:1.4;fill:none;opacity:.6;stroke-dasharray:3 6;stroke-linecap:round;}
|
||||
.traj .traj-dev{stroke:var(--acid);stroke-width:2.4;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 5px var(--acid-halo));}
|
||||
.traj .traj-node{fill:var(--acid);filter:drop-shadow(0 0 7px var(--acid-glow));}
|
||||
.traj .traj-branch{fill:var(--muted);}
|
||||
.traj text{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;}
|
||||
.traj .traj-lbl-muted{fill:var(--muted);}
|
||||
.traj .traj-lbl-acid{fill:var(--acid);}
|
||||
.hero-cta{display:flex;flex-direction:column;gap:12px;}
|
||||
.btn{
|
||||
font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
|
||||
text-decoration:none;padding:15px 18px;border-radius:11px;
|
||||
display:flex;align-items:center;justify-content:space-between;gap:12px;
|
||||
transition:border-color .25s ease,color .25s ease,box-shadow .25s ease,background .25s ease;
|
||||
}
|
||||
.btn-primary{color:var(--sky-deep);background:var(--acid);font-weight:600;box-shadow:0 0 16px var(--acid-dim);}
|
||||
.btn-primary:hover{box-shadow:0 0 28px var(--acid-halo);}
|
||||
.btn-ghost{color:var(--ink);background:transparent;border:1px solid rgba(184,194,212,0.22);}
|
||||
.btn-ghost:hover{border-color:var(--acid);color:var(--ink-bright);}
|
||||
@media (max-width:880px){
|
||||
.hero-grid{grid-template-columns:1fr;gap:40px;}
|
||||
.hero-right{order:2;max-width:440px;}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.28em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
margin-bottom: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.label::before {
|
||||
content: "";
|
||||
width: 22px;
|
||||
height: 1px;
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
.opening {
|
||||
max-width: 920px;
|
||||
}
|
||||
|
||||
.opening p {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 300;
|
||||
font-size: clamp(22px, 3.2vw, 36px);
|
||||
line-height: 1.42;
|
||||
letter-spacing: -0.012em;
|
||||
color: var(--ink);
|
||||
margin-bottom: 28px;
|
||||
font-variation-settings: "opsz" 96;
|
||||
}
|
||||
|
||||
.opening p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.opening .o2 {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.opening .o3 {
|
||||
color: var(--ink-bright);
|
||||
}
|
||||
|
||||
/* The rotating word */
|
||||
.rot-wrap {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rot-word {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: var(--ink-bright);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
}
|
||||
.rot-word::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: calc(100% + 3px);
|
||||
top: 0.14em;
|
||||
width: 2px; height: 0.84em;
|
||||
background: var(--acid);
|
||||
box-shadow: 0 0 6px var(--acid-halo);
|
||||
animation: caretBlink 1s step-end infinite;
|
||||
}
|
||||
@keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.rot-word::after { animation: none; opacity: 0; }
|
||||
}
|
||||
|
||||
/* Deviation glow — acid green luminescence */
|
||||
.deviation {
|
||||
color: var(--acid);
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
text-shadow:
|
||||
0 0 4px var(--acid-glow),
|
||||
0 0 14px var(--acid-halo),
|
||||
0 0 32px var(--acid-dim);
|
||||
}
|
||||
|
||||
/* Response line — slim mark, no box */
|
||||
.response {
|
||||
margin-top: 56px;
|
||||
max-width: 760px;
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.response::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
width: 2px;
|
||||
background: var(--acid);
|
||||
box-shadow:
|
||||
0 0 6px var(--acid-glow),
|
||||
0 0 14px var(--acid-halo);
|
||||
}
|
||||
|
||||
.response p {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 400;
|
||||
font-size: clamp(18px, 1.9vw, 22px);
|
||||
line-height: 1.55;
|
||||
letter-spacing: -0.005em;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.response strong {
|
||||
color: var(--ink-bright);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Pathways */
|
||||
.pathways {
|
||||
padding: 112px 0 96px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.pathways-label {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.28em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.path-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.path {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.path:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.path-num {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.path-title {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.012em;
|
||||
color: var(--ink-bright);
|
||||
margin-bottom: 14px;
|
||||
font-variation-settings: "opsz" 72;
|
||||
}
|
||||
|
||||
.path-desc {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: var(--ink-soft);
|
||||
font-variation-settings: "opsz" 14;
|
||||
}
|
||||
|
||||
.path-arrow {
|
||||
display: inline-block;
|
||||
margin-top: 18px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
transition: color 0.4s ease, gap 0.4s ease;
|
||||
}
|
||||
|
||||
.path:hover .path-arrow { color: var(--acid); }
|
||||
|
||||
.path-arrow::after {
|
||||
content: " →";
|
||||
display: inline-block;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.path:hover .path-arrow::after { transform: translateX(4px); }
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 56px 0 48px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 32px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer-mark {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: var(--muted);
|
||||
max-width: 480px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.footer-mark strong {
|
||||
color: var(--ink);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer-meta {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.footer-meta div { margin-bottom: 6px; }
|
||||
.footer-meta div:last-child { margin-bottom: 0; }
|
||||
|
||||
/* Positioning — what Deviant is */
|
||||
.positioning {
|
||||
padding: 112px 0 96px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.pos-statement { max-width: 980px; margin-top: 8px; }
|
||||
.surfaces {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 44px 48px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
.surface-name {
|
||||
font-family: 'Fraunces', serif; font-weight: 400; font-size: 22px;
|
||||
color: var(--ink-bright); margin-bottom: 8px; letter-spacing: -0.012em;
|
||||
font-variation-settings: "opsz" 72;
|
||||
}
|
||||
.surface-desc {
|
||||
font-family: 'Fraunces', serif; font-weight: 300; font-size: 15px;
|
||||
line-height: 1.6; color: var(--ink-soft); font-variation-settings: "opsz" 14;
|
||||
}
|
||||
.clean-note { margin-top: 80px; }
|
||||
.clean-tags { display: flex; flex-wrap: wrap; gap: 12px 28px; }
|
||||
.clean-tags span {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 11px;
|
||||
letter-spacing: 0.18em; text-transform: uppercase; color: var(--acid);
|
||||
}
|
||||
.clean-note p {
|
||||
margin-top: 24px; max-width: 720px;
|
||||
font-family: 'Fraunces', serif; font-weight: 300; font-size: 16px;
|
||||
line-height: 1.62; color: var(--ink-soft);
|
||||
}
|
||||
.slogan-closing { text-align: center; margin: 120px 0 8px; }
|
||||
.slogan-line {
|
||||
margin-top: 88px;
|
||||
font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
|
||||
font-size: clamp(26px, 4vw, 44px); letter-spacing: -0.01em;
|
||||
color: var(--acid);
|
||||
text-shadow: 0 0 6px var(--acid-glow), 0 0 18px var(--acid-halo), 0 0 40px var(--acid-dim);
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 880px) {
|
||||
.container { padding: 0 22px; }
|
||||
.topbar { padding: 12px 20px; }
|
||||
.nav { display: none; }
|
||||
.opening p { font-size: clamp(20px, 5.4vw, 28px); }
|
||||
.hero { min-height: calc(100vh - var(--header-h)); padding: 40px 0 72px; }
|
||||
.response { margin-top: 56px; padding-left: 22px; }
|
||||
.response p { font-size: 17px; }
|
||||
.pathways { padding: 88px 0 72px; }
|
||||
.path-grid { grid-template-columns: 1fr; gap: 56px; }
|
||||
.pathways-label { margin-bottom: 40px; }
|
||||
footer { flex-direction: column; align-items: flex-start; }
|
||||
.footer-meta { text-align: left; }
|
||||
.positioning { padding: 88px 0 72px; }
|
||||
.surfaces { grid-template-columns: 1fr; gap: 44px; margin-top: 56px; }
|
||||
.clean-note { margin-top: 56px; }
|
||||
.slogan-line { margin-top: 64px; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container { padding: 0 18px; }
|
||||
.label { font-size: 9px; margin-bottom: 32px; }
|
||||
.label::before { width: 14px; }
|
||||
.opening p { font-size: 19px; line-height: 1.45; }
|
||||
.response p { font-size: 16px; }
|
||||
.path-title { font-size: 22px; }
|
||||
}
|
||||
|
||||
/* Skip-link for accessibility */
|
||||
.skip { position: absolute; left: -9999px; }
|
||||
.skip:focus {
|
||||
left: 12px; top: 12px; z-index: 100;
|
||||
padding: 8px 14px; background: var(--ink-bright); color: var(--sky-deep);
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 11px;
|
||||
letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
|
||||
}
|
||||
/* Proof metrics */
|
||||
.metrics {
|
||||
display: grid; grid-template-columns: repeat(4, 1fr);
|
||||
gap: 28px; margin-top: 64px;
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
padding: 36px 0;
|
||||
}
|
||||
.metric-n {
|
||||
font-family: 'Fraunces', serif; font-weight: 400;
|
||||
font-size: clamp(30px, 4vw, 46px); line-height: 1;
|
||||
color: var(--acid);
|
||||
text-shadow: 0 0 6px var(--acid-glow), 0 0 18px var(--acid-halo);
|
||||
font-variation-settings: "opsz" 96;
|
||||
}
|
||||
.metric-l {
|
||||
margin-top: 12px;
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 10px;
|
||||
letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
|
||||
}
|
||||
/* Contrast grid (positioning) */
|
||||
.vs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 48px; margin-top: 72px; }
|
||||
.vs-col .vs-head {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 10px;
|
||||
letter-spacing: 0.2em; text-transform: uppercase;
|
||||
color: var(--muted); margin-bottom: 14px;
|
||||
}
|
||||
.vs-col.is-mba .vs-head { color: var(--acid); }
|
||||
.vs-col .vs-body {
|
||||
font-family: 'Fraunces', serif; font-weight: 300; font-size: 16px;
|
||||
line-height: 1.62; color: var(--ink-soft);
|
||||
}
|
||||
.vs-col .vs-body strong { color: var(--ink-bright); font-weight: 500; }
|
||||
@media (max-width: 880px) {
|
||||
.metrics { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
|
||||
.vs-grid { grid-template-columns: 1fr; gap: 36px; }
|
||||
.surfaces { grid-template-columns: 1fr !important; }
|
||||
}
|
||||
|
||||
/* ===== Style switch: Signal theme (sans / glow, mindmap aesthetic) ===== */
|
||||
[data-theme="signal"] {
|
||||
--sky-deep:#050505; --sky-mid:#0a0a0a; --sky-rim:#161616;
|
||||
--ink:#f2f2f2; --ink-bright:#ffffff; --ink-soft:#d2d2d2; --muted:#9a9a9a;
|
||||
--acid:#c6ff00;
|
||||
--acid-glow:rgba(198,255,0,0.60); --acid-halo:rgba(198,255,0,0.34); --acid-dim:rgba(198,255,0,0.16);
|
||||
}
|
||||
[data-theme="signal"] * { font-family:'DM Sans', system-ui, "Segoe UI", sans-serif !important; font-style: normal !important; }
|
||||
[data-theme="signal"] body { line-height:1.62; -webkit-font-smoothing:antialiased; }
|
||||
/* uppercase labels in mono — the v6 treatment */
|
||||
[data-theme="signal"] .label,
|
||||
[data-theme="signal"] .pathways-label,
|
||||
[data-theme="signal"] .nav,
|
||||
[data-theme="signal"] .nav a,
|
||||
[data-theme="signal"] .vs-head,
|
||||
[data-theme="signal"] .metric-l,
|
||||
[data-theme="signal"] .clean-tags span,
|
||||
[data-theme="signal"] .kicker,
|
||||
[data-theme="signal"] .footer-meta,
|
||||
[data-theme="signal"] .theme-toggle { font-family:'DM Mono', ui-monospace, monospace !important; letter-spacing:0.12em; }
|
||||
[data-theme="signal"] .btn { font-family:'DM Mono', ui-monospace, monospace !important; }
|
||||
[data-theme="signal"] body {
|
||||
background:
|
||||
radial-gradient(1200px 600px at 50% -10%, rgba(198,255,0,0.06), transparent 60%),
|
||||
radial-gradient(900px 500px at 100% 120%, rgba(198,255,0,0.04), transparent 60%),
|
||||
#050505;
|
||||
}
|
||||
[data-theme="signal"] .label,
|
||||
[data-theme="signal"] .pathways-label,
|
||||
[data-theme="signal"] .nav,
|
||||
[data-theme="signal"] .vs-head,
|
||||
[data-theme="signal"] .metric-l,
|
||||
[data-theme="signal"] .clean-tags span,
|
||||
[data-theme="signal"] .opening p { font-weight: 700 !important; }
|
||||
[data-theme="signal"] .wordmark,
|
||||
[data-theme="signal"] .path-title,
|
||||
[data-theme="signal"] .surface-name,
|
||||
[data-theme="signal"] .slogan-line,
|
||||
[data-theme="signal"] .metric-n,
|
||||
[data-theme="signal"] .footer-mark strong { font-weight: 800 !important; }
|
||||
[data-theme="signal"] .deviation,
|
||||
[data-theme="signal"] .slogan-line,
|
||||
[data-theme="signal"] .metric-n {
|
||||
text-shadow: 0 0 6px rgba(198,255,0,0.55), 0 0 18px rgba(198,255,0,0.35), 0 0 40px rgba(198,255,0,0.18) !important;
|
||||
}
|
||||
|
||||
/* Style-switch button */
|
||||
.theme-toggle {
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 10px;
|
||||
letter-spacing: 0.16em; text-transform: uppercase;
|
||||
color: var(--acid); background: rgba(214,255,61,0.06);
|
||||
border: 1px solid var(--acid-halo); padding: 8px 13px; border-radius: 999px;
|
||||
cursor: pointer; white-space: nowrap;
|
||||
transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
.theme-toggle:hover { border-color: var(--acid); background: rgba(214,255,61,0.10); }
|
||||
[data-theme="signal"] .site-header { background: rgba(5,5,5,0.82); }
|
||||
[data-theme="signal"] .theme-toggle { background: rgba(198,255,0,0.07); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main" class="skip">Skip to content</a>
|
||||
|
||||
<div class="stars" aria-hidden="true" id="stars"></div>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="topbar">
|
||||
<a href="./" class="wordmark">Deviant</a>
|
||||
<div class="topbar-right">
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="#what">What</a>
|
||||
<a href="#mechanism">Mechanism</a>
|
||||
<a href="#proof">Proof</a>
|
||||
<a href="https://deviant.navigate.st/" target="_blank" rel="noopener noreferrer">Wallet</a>
|
||||
<a href="./potidaea/">Potidaea</a>
|
||||
<a href="./anthemus/">Anthemus</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<main id="main" class="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="hero-left">
|
||||
<div class="label">A response to a default trajectory</div>
|
||||
<div class="opening">
|
||||
<p class="o-lead">When the institutional, technical, economic, and rhetorical forces all point in the same direction, the outcome they point toward becomes the default trajectory. <span class="deviation">Deviation</span> from the trajectory requires active resistance. In a <span class="rot-wrap"><span class="rot-word" id="rot">captured</span></span> information environment with limited resistance capacity, the default trajectory is what occurs.</p>
|
||||
</div>
|
||||
<div class="response">
|
||||
<p><strong>Deviant</strong> exists to enable that resistance — by giving users on-chain experience that <em>intermediation cannot mediate</em>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="hero-right" aria-label="Trajectory and entry points">
|
||||
<svg class="traj" viewBox="0 0 380 240" role="img" aria-label="A default trajectory drifting down, and a deviation breaking upward">
|
||||
<path class="traj-default" d="M 12 70 C 110 96, 150 120, 200 138 C 255 158, 305 176, 368 198"/>
|
||||
<circle class="traj-branch" cx="200" cy="138" r="3.4"/>
|
||||
<path class="traj-dev" d="M 200 138 C 250 120, 300 84, 368 44"/>
|
||||
<circle class="traj-node" cx="368" cy="44" r="5"/>
|
||||
<text class="traj-lbl-muted" x="12" y="216">Default trajectory</text>
|
||||
<text class="traj-lbl-acid" x="368" y="30" text-anchor="end">Deviation</text>
|
||||
</svg>
|
||||
<div class="hero-cta">
|
||||
<a class="btn btn-primary" href="https://deviant.navigate.st/" target="_blank" rel="noopener noreferrer">Open Deviant Wallet <span aria-hidden="true">→</span></a>
|
||||
<a class="btn btn-ghost" href="https://deviant.navigate.st/" target="_blank" rel="noopener noreferrer">Create Your Own Asset <span aria-hidden="true">→</span></a>
|
||||
<a class="btn btn-ghost" href="#agora">Agora — Potidaea ASM & Anthemus DEX <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<section class="positioning" id="what" aria-label="What Deviant is">
|
||||
<div class="pathways-label">What this is</div>
|
||||
|
||||
<div class="opening pos-statement">
|
||||
<p>Deviant is the first wallet for an asset class that exists <span class="deviation">nowhere else</span> — a Bitcoin‑Cash‑backed asset you can redeem at a fixed rate, at any time, with no issuer, no custodian, and no counterparty. Enforced by mathematics, not trust.</p>
|
||||
</div>
|
||||
|
||||
<div class="response">
|
||||
<p>Permissionless mint, fixed rate, unlimited reservoir — the contract replaces the market maker, the liquidity provider, and the counterparty at once. Mint from a permissionless covenant; exit by burning your output back to its Bitcoin‑Cash floor; swap to any other permissionless‑mint asset in a single atomic transaction. <strong>No pool. No oracle. No one to ask.</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="surfaces">
|
||||
<div class="surface"><div class="surface-name">Artemision</div><div class="surface-desc">Create. Genesis in one transaction — core parameters sealed, irreversible.</div></div>
|
||||
<div class="surface"><div class="surface-name">Katalogos</div><div class="surface-desc">The asset list. Every class, filterable across the backed ↔ non-backed spectrum and by use-case.</div></div>
|
||||
<div class="surface"><div class="surface-name">Agora</div><div class="surface-desc">The market hub. Home to Potidaea — a counterparty-free automated swap mechanism — and Anthemus, a decentralized exchange.</div></div>
|
||||
</div>
|
||||
|
||||
<div class="clean-note">
|
||||
<div class="clean-tags"><span>No issuer</span><span>No custodian</span><span>No counterparty</span><span>No token sale</span></div>
|
||||
<p>Not a fundraise, not a pre‑mine. The contract is small enough to read end to end in an evening — read it, replay the chain, break it or trust it. The wallet reports facts the chain has already settled; it never asks you to trust it.</p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="positioning" id="mechanism" aria-label="The mechanism">
|
||||
<div class="pathways-label">The mechanism · ASM</div>
|
||||
<div class="opening pos-statement">
|
||||
<p>Every unit is <span class="deviation">self‑backed</span> — it carries its own Bitcoin Cash inside the UTXO at a fixed rate. Redemption is a plain spend; a swap is a single atomic transaction, settled by consensus.</p>
|
||||
</div>
|
||||
<div class="response">
|
||||
<p>The <strong>Automated Swap Mechanism</strong> prices every exchange by the Universal Exchange Rate — rate A ÷ rate B — derived from genesis constants alone. No DEX, no AMM, no oracle, no operator. There is no <em>approximately</em>: the floor is an equality the contract enforces at consensus level. <strong>Deterministic, not probabilistic.</strong></p>
|
||||
</div>
|
||||
<div class="clean-note">
|
||||
<div class="clean-tags"><span>No counterparty</span><span>No oracle</span><span>No pool</span><span>No operator</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="positioning" id="agora" aria-label="Agora">
|
||||
<div class="pathways-label">Agora — the market hub</div>
|
||||
<div class="opening pos-statement">
|
||||
<p>Two markets under one roof. <strong>Potidaea</strong> is the native-BCH ASM — counterparty-free swaps priced by the Universal Exchange Rate, backing enforced at consensus level. <strong>Anthemus</strong> is the DEX — order-book and AMM for token-class assets and cross-chain price discovery. Together they cover every asset the wallet can hold.</p>
|
||||
</div>
|
||||
<div class="response">
|
||||
<p>Potidaea's market exists the moment an MBA does — no order book, no listing gate; a founder can <strong>create an asset and earn without ever selling it</strong>. Anthemus adds the trading floor for everything the mechanism can't price alone — Token-class assets, wrapped foreign coins, cross-chain settlement.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="positioning" id="proof" aria-label="The proof">
|
||||
<div class="pathways-label">The proof</div>
|
||||
<div class="opening pos-statement">
|
||||
<p>Not a hypothesis — a working mechanism, validated on the Bitcoin Cash <span class="deviation">chipnet</span> across 287 snapshots.</p>
|
||||
</div>
|
||||
<div class="metrics">
|
||||
<div><div class="metric-n">564</div><div class="metric-l">Tests passing</div></div>
|
||||
<div><div class="metric-n">52,998</div><div class="metric-l">Chipnet swaps</div></div>
|
||||
<div><div class="metric-n">0</div><div class="metric-l">Exploits</div></div>
|
||||
<div><div class="metric-n">100%</div><div class="metric-l">Peg integrity</div></div>
|
||||
</div>
|
||||
<div class="response" style="margin-top:56px;">
|
||||
<p>The early atomic swaps proved the mechanism works; the bulk of the suite then exercised MBAs across <strong>use cases, configurations, and adversarial scenarios</strong> — what the assets can do, and whether they break. The wallet core is feature‑complete and a <strong>PWA beta is live</strong> on chipnet. The contract is small enough to read in an evening: verify it, replay the chain, break it or trust it.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="positioning" id="positioning" aria-label="Why it is different">
|
||||
<div class="pathways-label">Why it is different</div>
|
||||
<div class="opening pos-statement">
|
||||
<p>A conventional token is <span class="deviation">disconnected</span> from its base layer; an MBA is tied to it — so one asset's success amplifies the whole ecosystem.</p>
|
||||
</div>
|
||||
<div class="vs-grid">
|
||||
<div class="vs-col"><div class="vs-head">Conventional tokens · ERC-20, BEP-20, …</div><div class="vs-body">No locked peg. Value rests on issuer reputation, demand, and traded liquidity — disconnected from any base‑layer floor.</div></div>
|
||||
<div class="vs-col is-mba"><div class="vs-head">The MBA</div><div class="vs-body">Value <strong>enforced by the protocol, not promised by an issuer</strong>. Price cannot fall below the mathematical floor.</div></div>
|
||||
<div class="vs-col"><div class="vs-head">Stablecoins</div><div class="vs-body">When the issuer fails, a conventional stablecoin recovers $0. An MBA carries an on‑chain <strong>bankruptcy‑protection floor</strong>.</div></div>
|
||||
<div class="vs-col is-mba"><div class="vs-head">DEX / exchanges</div><div class="vs-body">No order matching, no liquidity to bootstrap, no counterparty to wait for — the protocol is the exchange.</div></div>
|
||||
</div>
|
||||
<div class="clean-note">
|
||||
<p>The <strong>volatility paradox</strong>: the asset marketed as "safe" fails its advertised property under stress. An MBA promises nothing it cannot keep — and because supply expands only against locked Bitcoin Cash, every asset launched <em>amplifies</em> the scarcity of the base layer rather than diluting it.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="positioning" id="economics" aria-label="The economics">
|
||||
<div class="pathways-label">The economics — no fundraise</div>
|
||||
<div class="opening pos-statement">
|
||||
<p>Revenue is <span class="deviation">earned from real activity</span>, never raised. Like Bitcoin's own launch: no pre‑mine, no token sale.</p>
|
||||
</div>
|
||||
<div class="surfaces">
|
||||
<div class="surface"><div class="surface-name">Founder revenue</div><div class="surface-desc">A mint‑only fee, immutable after genesis. Set at 1% on both sides, it creates a mathematically enforced ~2% round‑trip spread — automated revenue from activity, not from selling the asset.</div></div>
|
||||
<div class="surface"><div class="surface-name">Platform revenue</div><div class="surface-desc">Three streams: a voluntary marketing revenue‑share on the Olympic tier ladder (Free → Bronze → Silver → Gold → Laurel), a ~0.5% wallet swap fee, and premium features.</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="positioning" id="alignment" aria-label="Bitcoin Cash alignment">
|
||||
<div class="pathways-label">Bitcoin Cash alignment</div>
|
||||
<div class="opening pos-statement">
|
||||
<p>Most projects extract from their chain. Deviant <span class="deviation">inverts</span> that — a public commitment of 25–50% of platform revenue to Bitcoin Cash infrastructure, scaling toward the higher figure.</p>
|
||||
</div>
|
||||
<div class="response">
|
||||
<p>Structural recognition of dependency, not philanthropy. The base layer is the <strong>environment</strong> — predetermined, permanent, unaffected by what evolves within it. Stars hang without visible support; planets wander yet hold their courses, bound by an unseen force. So here: <em>mathematics, not authority, holds the system together.</em></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pathways" id="pathways" aria-label="Project pathways">
|
||||
<div class="pathways-label">Where to begin</div>
|
||||
|
||||
<div class="path-grid">
|
||||
<a href="https://deviant.navigate.st/" target="_blank" rel="noopener noreferrer" class="path">
|
||||
<div class="path-num">— 01</div>
|
||||
<div class="path-title">The Wallet</div>
|
||||
<div class="path-desc">On-chain experience without intermediation. Send, receive, and mint value-bearing assets the captured layer cannot mediate. Chipnet beta today — real testnet, no real funds.</div>
|
||||
<div class="path-arrow">Open the wallet</div>
|
||||
</a>
|
||||
|
||||
<a href="./potidaea/" class="path">
|
||||
<div class="path-num">— 02</div>
|
||||
<div class="path-title">Potidaea · Automated Swap Mechanism</div>
|
||||
<div class="path-desc">Counterparty-free by design. Swaps between BCH and backing-anchored assets are priced by the covenant — the mechanism that makes an MBA economy possible without pooled liquidity.</div>
|
||||
<div class="path-arrow">Enter Potidaea</div>
|
||||
</a>
|
||||
|
||||
<a href="./anthemus/" class="path">
|
||||
<div class="path-num">— 03</div>
|
||||
<div class="path-title">Anthemus · Decentralized Exchange</div>
|
||||
<div class="path-desc">Order-book plus AMM for token-class assets and cross-chain price discovery. Participants price the market; the interchain settlement hub's public trading floor.</div>
|
||||
<div class="path-arrow">Enter Anthemus</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="slogan-line slogan-closing">Power Your Ideas.</div>
|
||||
|
||||
<footer>
|
||||
<div class="footer-mark">
|
||||
<strong>Deviant</strong> is built on Bitcoin Cash because, measured against the whitepaper, BCH retains the structural properties the original specification depends on. The base layer matters.
|
||||
</div>
|
||||
<div class="footer-meta">
|
||||
<div>Version 0.1 · Deviant</div>
|
||||
<div>Last updated · August 2026</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Generate starfield
|
||||
(function generateStars() {
|
||||
const container = document.getElementById('stars');
|
||||
if (!container) return;
|
||||
|
||||
const field = document.createElement('div'); field.className = 'starfield';
|
||||
const count = window.innerWidth < 700 ? 260 : 520;
|
||||
const frag = document.createDocumentFragment();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const s = document.createElement('div');
|
||||
s.className = 'star';
|
||||
|
||||
// Most stars are tiny and faint
|
||||
const roll = Math.random();
|
||||
let size, opacity, twinkleDur;
|
||||
if (roll < 0.78) {
|
||||
size = 1 + Math.random() * 0.4; // mostly tiny
|
||||
opacity = 0.18 + Math.random() * 0.22;
|
||||
twinkleDur = 14 + Math.random() * 8;
|
||||
} else if (roll < 0.95) {
|
||||
size = 1.4 + Math.random() * 0.6;
|
||||
opacity = 0.32 + Math.random() * 0.22;
|
||||
twinkleDur = 10 + Math.random() * 6;
|
||||
} else {
|
||||
size = 1.8 + Math.random() * 0.8;
|
||||
opacity = 0.45 + Math.random() * 0.25;
|
||||
twinkleDur = 8 + Math.random() * 5;
|
||||
}
|
||||
|
||||
s.style.width = size + 'px';
|
||||
s.style.height = size + 'px';
|
||||
s.style.left = Math.random() * 100 + '%';
|
||||
s.style.top = Math.random() * 100 + '%';
|
||||
s.style.opacity = opacity;
|
||||
s.style.setProperty('--twinkle-duration', twinkleDur + 's');
|
||||
s.style.setProperty('--twinkle-delay', (Math.random() * twinkleDur) + 's');
|
||||
|
||||
frag.appendChild(s);
|
||||
}
|
||||
field.appendChild(frag);
|
||||
container.appendChild(field);
|
||||
})();
|
||||
|
||||
// Rotating word — typewriter: type -> hold 5s -> delete -> next
|
||||
(function typeWord() {
|
||||
const el = document.getElementById('rot');
|
||||
if (!el) return;
|
||||
const words = ['captured', 'compromised', 'constrained'];
|
||||
const wrap = el.parentElement;
|
||||
|
||||
// Reserve a fixed slot = widest word so the text after it never reflows.
|
||||
function reserve() {
|
||||
if (!wrap) return;
|
||||
const prev = el.textContent;
|
||||
let max = 0;
|
||||
words.forEach(function (w) { el.textContent = w; if (el.offsetWidth > max) max = el.offsetWidth; });
|
||||
el.textContent = prev;
|
||||
wrap.style.minWidth = (max + 8) + 'px';
|
||||
}
|
||||
reserve();
|
||||
if (document.fonts && document.fonts.ready) document.fonts.ready.then(reserve);
|
||||
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
el.textContent = words[0];
|
||||
return;
|
||||
}
|
||||
|
||||
let wi = 0, ci = 0, deleting = false;
|
||||
const typeMs = 95, delMs = 45, holdMs = 5000, gapMs = 500;
|
||||
el.textContent = '';
|
||||
function tick() {
|
||||
const w = words[wi];
|
||||
if (!deleting) {
|
||||
ci++; el.textContent = w.slice(0, ci);
|
||||
if (ci === w.length) { deleting = true; setTimeout(tick, holdMs); return; }
|
||||
setTimeout(tick, typeMs);
|
||||
} else {
|
||||
ci--; el.textContent = w.slice(0, ci);
|
||||
if (ci === 0) { deleting = false; wi = (wi + 1) % words.length; setTimeout(tick, gapMs); return; }
|
||||
setTimeout(tick, delMs);
|
||||
}
|
||||
}
|
||||
setTimeout(tick, 700);
|
||||
})();
|
||||
|
||||
// Style switch: Signal (default) <-> Editorial, persisted across pages
|
||||
(function themeSwitch(){
|
||||
var btn = document.getElementById('themeToggle');
|
||||
var name = document.getElementById('themeName');
|
||||
if (!btn || !name) return;
|
||||
function sync(){ name.textContent = document.documentElement.getAttribute('data-theme') === 'signal' ? 'CosmoGenesis' : 'Editorial'; }
|
||||
sync();
|
||||
btn.addEventListener('click', function(){
|
||||
var isSignal = document.documentElement.getAttribute('data-theme') === 'signal';
|
||||
if (isSignal) { document.documentElement.removeAttribute('data-theme'); try{localStorage.setItem('deviant-theme','editorial');}catch(e){} }
|
||||
else { document.documentElement.setAttribute('data-theme','signal'); try{localStorage.setItem('deviant-theme','signal');}catch(e){} }
|
||||
sync();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
282
deviant/potidaea/index.html
Normal file
282
deviant/potidaea/index.html
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
<!doctype html>
|
||||
<html lang="en" data-theme="signal">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Potidaea — Native-BCH Automated Swap Mechanism</title>
|
||||
<meta name="description" content="Potidaea — the native-BCH ASM. Counterparty-free swaps, priced by the Universal Exchange Rate, backing enforced at consensus level.">
|
||||
<base href="./">
|
||||
<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;800&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; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background:
|
||||
radial-gradient(ellipse at 30% 20%, var(--sky-mid), var(--sky-deep) 60%, #02040a),
|
||||
var(--sky-deep);
|
||||
color: var(--ink);
|
||||
font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
min-height: 100vh;
|
||||
line-height: 1.55;
|
||||
}
|
||||
header {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 32px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.wordmark {
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: var(--ink-bright);
|
||||
text-decoration: none;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.wordmark::after {
|
||||
content: '.';
|
||||
color: var(--acid);
|
||||
}
|
||||
nav a {
|
||||
color: var(--ink-soft);
|
||||
text-decoration: none;
|
||||
margin-left: 24px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
nav a:hover { color: var(--acid); }
|
||||
main {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 88px 32px 64px;
|
||||
}
|
||||
.breadcrumb {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.breadcrumb a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--sky-rim); }
|
||||
.breadcrumb a:hover { color: var(--acid); border-bottom-color: var(--acid); }
|
||||
h1 {
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-weight: 500;
|
||||
font-size: clamp(56px, 9vw, 120px);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.03em;
|
||||
margin: 0 0 24px;
|
||||
color: var(--ink-bright);
|
||||
}
|
||||
.tagline {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
color: var(--acid);
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 40px;
|
||||
}
|
||||
.lede {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-size: clamp(22px, 3vw, 30px);
|
||||
color: var(--ink-soft);
|
||||
line-height: 1.45;
|
||||
margin: 0 0 32px;
|
||||
max-width: 780px;
|
||||
}
|
||||
.prose p {
|
||||
color: var(--ink);
|
||||
font-size: 18px;
|
||||
max-width: 720px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.prose p strong { color: var(--ink-bright); }
|
||||
.prose p em { color: var(--acid); font-style: italic; }
|
||||
.surfaces {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 16px;
|
||||
margin: 56px 0;
|
||||
}
|
||||
.surface {
|
||||
background: rgba(19,26,42,0.5);
|
||||
border: 1px solid var(--sky-rim);
|
||||
border-radius: 14px;
|
||||
padding: 22px 22px 24px;
|
||||
}
|
||||
.surface-name {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
color: var(--ink-bright);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.surface-desc {
|
||||
color: var(--ink-soft);
|
||||
font-size: 14.5px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.cta {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 24px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.3px;
|
||||
transition: transform 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
.btn:hover { transform: translateY(-1px); }
|
||||
.btn-primary {
|
||||
background: var(--acid);
|
||||
color: #0a0f1c;
|
||||
}
|
||||
.btn-ghost {
|
||||
color: var(--ink);
|
||||
background: transparent;
|
||||
border: 1px solid rgba(184,194,212,0.24);
|
||||
}
|
||||
.btn-ghost:hover { border-color: var(--acid); color: var(--acid); }
|
||||
.kicker {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--acid);
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 16px;
|
||||
margin: 40px 0 8px;
|
||||
padding: 24px 0;
|
||||
border-top: 1px solid var(--sky-rim);
|
||||
border-bottom: 1px solid var(--sky-rim);
|
||||
}
|
||||
.stat-n {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-weight: 500;
|
||||
font-size: clamp(28px, 4vw, 40px);
|
||||
color: var(--ink-bright);
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
.stat-l {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
footer {
|
||||
max-width: 1200px;
|
||||
margin: 80px auto 0;
|
||||
padding: 32px;
|
||||
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; }
|
||||
footer a:hover { color: var(--acid); }
|
||||
@media (max-width: 640px) {
|
||||
header { flex-direction: column; gap: 12px; align-items: flex-start; }
|
||||
nav a { margin: 0 16px 0 0; }
|
||||
main { padding: 40px 20px 32px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="../" class="wordmark">Deviant</a>
|
||||
<nav>
|
||||
<a href="../">Home</a>
|
||||
<a href="../#agora">Agora</a>
|
||||
<a href="../anthemus/">Anthemus</a>
|
||||
<a href="https://deviant.navigate.st/" target="_blank" rel="noopener noreferrer">Wallet</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<p class="breadcrumb"><a href="../">Deviant</a> · <a href="../#agora">Agora</a> · Potidaea</p>
|
||||
|
||||
<h1>Potidaea</h1>
|
||||
<p class="tagline">Counterparty-free automated swap mechanism</p>
|
||||
|
||||
<p class="lede">One of the two markets under Agora — the one where the price is the mechanism.</p>
|
||||
|
||||
<div class="prose">
|
||||
<p><strong>Potidaea</strong> handles counterparty-free swaps for backed assets. Every exchange is priced by the <em>Universal Exchange Rate</em> — rate A ÷ rate B, derived from genesis constants alone — and settled by consensus. <strong>No pool. No oracle. No one to ask.</strong></p>
|
||||
|
||||
<p>The contract is the market maker, the liquidity provider, and the counterparty at once. Mint from a permissionless covenant; exit by burning your output back to its Bitcoin Cash floor; swap to any other permissionless-mint asset in a single atomic transaction.</p>
|
||||
|
||||
<p>Named after Ποτίδαια — the city of Poseidon — because the liquidity behaves like ocean: MBA↔MBA depth is infinite from moment zero. Backing <em>is</em> liquidity, elastic-mint. There is no bootstrap, no seeding, no thin-pairs, no slippage in the usual sense.</p>
|
||||
</div>
|
||||
|
||||
<p class="kicker">— The Potidaea flow</p>
|
||||
<div class="surfaces">
|
||||
<div class="surface">
|
||||
<div class="surface-name">Genesis</div>
|
||||
<div class="surface-desc">One transaction seals the core parameters — backing rate, category, mint policy. Immutable after mint; no upgrade key, no admin.</div>
|
||||
</div>
|
||||
<div class="surface">
|
||||
<div class="surface-name">Swap</div>
|
||||
<div class="surface-desc">Any address can claim against the reservoir. Sequencer + sharded reservoir + auto-assign — measured at 196 swaps/sec on a local BCHN node.</div>
|
||||
</div>
|
||||
<div class="surface">
|
||||
<div class="surface-name">Redeem</div>
|
||||
<div class="surface-desc">Burn the output back to its BCH floor at any time. The floor is an equality the contract enforces at consensus level — not an approximation.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div><div class="stat-n">52,998</div><div class="stat-l">Chipnet swaps</div></div>
|
||||
<div><div class="stat-n">0</div><div class="stat-l">Exploits</div></div>
|
||||
<div><div class="stat-n">100%</div><div class="stat-l">Peg integrity</div></div>
|
||||
<div><div class="stat-n">~52k</div><div class="stat-l">Per 32 MB block</div></div>
|
||||
</div>
|
||||
|
||||
<div class="cta">
|
||||
<a class="btn btn-primary" href="https://navigate.st/bns/potidaea.asm/" target="_blank" rel="noopener noreferrer">Enter Potidaea <span aria-hidden="true">→</span></a>
|
||||
<a class="btn btn-ghost" href="../#agora">About Agora <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div>Potidaea is a market layer under <a href="../">Deviant</a> · Agora.</div>
|
||||
<div>potidaea.asm · deviant.x/potidaea</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue