370 lines
17 KiB
HTML
370 lines
17 KiB
HTML
|
<!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>
|