silentmode/sirius
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

sirius.x: /brand/ kit — logo, mono, avatar, banner, favicon, palette

Browse source 
brand/ ships every reusable mark plus a browseable kit page:
  * logo.svg — full colour wordmark (star + sirius.x, .x in acid green)
  * logo-mono.svg — currentColor version for print / one-colour merch
  * favicon.svg — 64×64 rounded square, scales cleanly to 16×16
  * avatar.svg — 512×512 square, hard corners (platforms round-mask)
  * banner.svg — 1200×630 OG / Twitter Card canvas, crop-tolerant layout
  * index.html — brand-kit page: asset previews + download links, full
    colour palette with names/hex, typography sample, do/don't guidance,
    MIT-attribution notice.

Nav: added 🎨 Brand link to every sirius.x page (landing, portal, docs,
theseus). og:image on every page updated to point at /brand/banner.svg
instead of the wordmark logo — social crawlers get a proper 1200×630
banner with title, tagline, and mark instead of a thin logo strip.

Kept /assets/favicon.svg and /assets/logo.svg in place so existing
external references (Nostr metadata, third-party embeds) don't break.
This commit is contained in:
Local Dev 2026-08-31 05:44:25 +02:00
parent adeeae4cd4
commit 13be3577be
10 changed files with 299 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
brand/avatar.svg Normal file
View file

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="sirius.x avatar">
<!-- Square profile-picture avatar. Full-bleed dark background, single star
centered and enlarged so it reads at 24px in a social feed. Corners are
square (not rounded) so the platform can apply its own mask (Twitter,
Discord, Nostr, etc. all round-mask avatars themselves). -->
<rect width="512" height="512" fill="#0b0e14"/>
<path d="M256 40 L288.4 220 L468 256 L288.4 292 L256 472 L223.6 292 L44 256 L223.6 220 Z"
fill="#d6ff3d"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 579 B

34
brand/banner.svg Normal file
View file

@ -0,0 +1,34 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="sirius.x banner">
<!-- 1200x630 = the OpenGraph / Twitter Card canonical size. Left half is the
wordmark + tagline; right half is a large decorative star that survives
aggressive cropping (Facebook, Slack and Discord all crop differently). -->
<defs>
<radialGradient id="glow" cx="70%" cy="50%" r="55%">
<stop offset="0%" stop-color="#16202e"/>
<stop offset="100%" stop-color="#0b0e14"/>
</radialGradient>
</defs>
<rect width="1200" height="630" fill="url(#glow)"/>
<!-- decorative giant star, right side -->
<g opacity="0.95">
<path d="M900 90 L950 300 L1160 315 L950 330 L900 540 L850 330 L640 315 L850 300 Z"
fill="#d6ff3d"/>
</g>
<!-- wordmark, left column -->
<g transform="translate(80, 250)">
<text font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
font-size="110" font-weight="700" fill="#e7eaf1" letter-spacing="-1">
sirius<tspan fill="#d6ff3d">.x</tspan>
</text>
<text y="70" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
font-size="30" font-weight="400" fill="#8b98a9">
The home for names on Bitcoin Cash.
</text>
<text y="115" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
font-size="18" font-weight="500" fill="#5e6678" letter-spacing="1.5">
REGISTER · RESOLVE · VERIFY
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

5
brand/favicon.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<rect width="64" height="64" rx="12" fill="#0b0e14"/>
<path d="M32 4 L36.4 27.6 L60 32 L36.4 36.4 L32 60 L27.6 36.4 L4 32 L27.6 27.6 Z"
fill="#d6ff3d"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 233 B

225
brand/index.html Normal file
View file

@ -0,0 +1,225 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Brand — sirius.x</title>
<meta name="description" content="sirius.x brand kit — logo, wordmark, avatar, banner, favicon, colour palette, and usage guidance. All assets served as SVG so they stay crisp at any size.">
<link rel="icon" href="./favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="./favicon.svg" color="#d6ff3d">
<meta property="og:type" content="website">
<meta property="og:site_name" content="sirius.x">
<meta property="og:title" content="sirius.x brand kit">
<meta property="og:description" content="Logo, wordmark, avatar, banner, favicon, colour palette. All SVG, downloadable, MIT.">
<meta property="og:url" content="https://silentmode.st/sirius-x/brand/">
<meta property="og:image" content="https://silentmode.st/sirius-x/brand/banner.svg">
<meta name="twitter:card" content="summary_large_image">
<style>
:root{
--bg:#0b0e14; --panel:#141a24; --panel2:#18202c; --line:rgba(255,255,255,.09);
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1100px 560px at 50% -12%,#16202e,var(--bg));
color:var(--ink);font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}
a{color:var(--acid)}
.wrap{max-width:1040px;margin:0 auto;padding:0 1.2rem}
.topnav{position:sticky;top:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap;
padding:10px 1.2rem;background:rgba(11,14,20,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px;letter-spacing:.2px}
.topnav .brand .g{color:var(--acid)}
.topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px}
.topnav a:hover{color:var(--ink);background:var(--panel)}
.topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)}
.topnav a.portal{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500}
.topnav a.portal:hover{background:rgba(214,255,61,.18)}
header.hero{text-align:center;padding:3.5rem 1.2rem 1rem}
.mark{font-size:44px;line-height:1}
h1{font-size:clamp(1.7rem,4.6vw,2.3rem);margin:.3rem 0 .3rem}
h1 .g{color:var(--acid)}
.tag{color:var(--mut);font-size:1.02rem;max-width:640px;margin:0 auto}
section{padding:2.2rem 0;border-top:1px solid var(--line);margin-top:2rem}
section:first-of-type{border-top:none;margin-top:1.2rem}
h2{font-size:1.35rem;margin:0 0 .35rem}
h3{font-size:1rem;margin:0 0 .3rem}
.lede{color:var(--mut);margin:0 0 1.4rem;max-width:720px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.asset{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;display:flex;flex-direction:column}
.asset .preview{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:20px;
margin-bottom:12px;min-height:130px;display:flex;align-items:center;justify-content:center}
.asset .preview.wide{padding:0}
.asset .preview.wide img{width:100%;height:auto;display:block;border-radius:9px}
.asset .preview.avatar{padding:0}
.asset .preview.avatar img{width:104px;height:104px;display:block;border-radius:14px}
.asset .preview.favicon img{width:64px;height:64px;display:block}
.asset .preview.mono{background:#eef1f7;color:#0b0e14}
.asset h3{display:flex;align-items:center;justify-content:space-between;gap:10px}
.asset .meta{color:var(--dim);font-size:12.5px;margin:2px 0 10px;font-family:ui-monospace,monospace}
.asset .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.btn{display:inline-block;text-decoration:none;padding:6px 12px;border-radius:8px;background:transparent;
border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-family:inherit;cursor:pointer}
.btn:hover{background:var(--panel2)}
.btn.acid{background:var(--acid);color:#0b0e14;border-color:var(--acid);font-weight:600}
.btn.acid:hover{filter:brightness(1.1)}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:1rem}
.sw{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sw .chip{height:70px}
.sw .info{padding:10px 12px;font-size:12.5px;font-family:ui-monospace,monospace;color:var(--mut)}
.sw .info b{color:var(--ink);display:block;font-family:inherit}
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acid);
border-radius:10px;padding:12px 15px;color:var(--mut);font-size:13.5px;margin-top:1.2rem}
.note b{color:var(--ink)}
code{background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:12.5px;word-break:break-all}
footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem}
</style>
</head>
<body>
<nav class="topnav">
<a class="brand" href="../">⭐ <span class="g">sirius.x</span></a>
<a href="../#try">Try it</a>
<a href="../docs/">📚 Docs</a>
<a href="../theseus/">🧭 Theseus</a>
<a href="../#roadmap">Roadmap</a>
<a href="./" class="here">🎨 Brand</a>
<a href="https://silentmode.st/" rel="noopener">Silent Mode ↗</a>
<a href="../portal.html" class="portal">🔑 Sign in</a>
</nav>
<header class="hero">
<div class="mark">🎨</div>
<h1>sirius.x <span class="g">brand kit</span></h1>
<p class="tag">Logo, wordmark, avatar, banner, favicon, and the colour palette. Every asset ships as
SVG so it stays crisp at any size and reads correctly in light and dark contexts. Free to reuse
with attribution.</p>
</header>
<div class="wrap">
<section>
<h2>Logo &amp; wordmark</h2>
<p class="lede">A 4-point sparkle star plus <b>sirius.x</b>, with the <code>.x</code> TLD picked out
in acid green. The star alone works when you have no room for the wordmark; the full lockup is
the default choice everywhere else.</p>
<div class="grid">
<div class="asset">
<div class="preview"><img src="./logo.svg" alt="sirius.x logo" style="max-width:100%;height:auto"></div>
<h3>Wordmark <span class="meta">SVG · 320×64</span></h3>
<p class="lede" style="margin-bottom:.6rem">Full colour, dark backgrounds. Use this by default.</p>
<div class="row">
<a class="btn acid" href="./logo.svg" download>Download SVG</a>
<a class="btn" href="./logo.svg" target="_blank">Open</a>
</div>
</div>
<div class="asset">
<div class="preview mono" style="color:#0b0e14"><img src="./logo-mono.svg" alt="sirius.x mono" style="max-width:100%;height:auto;color:inherit"></div>
<h3>Wordmark, monochrome <span class="meta">SVG · currentColor</span></h3>
<p class="lede" style="margin-bottom:.6rem">Uses <code>currentColor</code>, inherits from the
surrounding text. Print, embossing, single-colour merch.</p>
<div class="row">
<a class="btn acid" href="./logo-mono.svg" download>Download SVG</a>
<a class="btn" href="./logo-mono.svg" target="_blank">Open</a>
</div>
</div>
</div>
</section>
<section>
<h2>Avatar &amp; favicon</h2>
<p class="lede">Square icons for social profiles, Nostr, GitHub, and browser tabs.</p>
<div class="grid">
<div class="asset">
<div class="preview avatar"><img src="./avatar.svg" alt="sirius.x avatar"></div>
<h3>Avatar <span class="meta">SVG · 512×512</span></h3>
<p class="lede" style="margin-bottom:.6rem">Square profile picture. Social platforms apply
their own round mask, so corners stay hard.</p>
<div class="row">
<a class="btn acid" href="./avatar.svg" download>Download SVG</a>
<a class="btn" href="./avatar.svg" target="_blank">Open</a>
</div>
</div>
<div class="asset">
<div class="preview favicon"><img src="./favicon.svg" alt="sirius.x favicon"></div>
<h3>Favicon <span class="meta">SVG · 64×64, 12px radius</span></h3>
<p class="lede" style="margin-bottom:.6rem">Rounded browser-tab icon. Scales down to 16×16
cleanly; used on every sirius.x page.</p>
<div class="row">
<a class="btn acid" href="./favicon.svg" download>Download SVG</a>
<a class="btn" href="./favicon.svg" target="_blank">Open</a>
</div>
</div>
</div>
</section>
<section>
<h2>Social banner</h2>
<p class="lede">1200×630 (OpenGraph / Twitter Card canonical). Composition survives aggressive
centre-cropping — the star and tagline both stay visible even after Facebook and Discord chop
the sides.</p>
<div class="asset">
<div class="preview wide"><img src="./banner.svg" alt="sirius.x banner"></div>
<div class="row">
<a class="btn acid" href="./banner.svg" download>Download SVG</a>
<a class="btn" href="./banner.svg" target="_blank">Open</a>
</div>
</div>
</section>
<section>
<h2>Colour palette</h2>
<p class="lede">Silent Mode family colours. Dark chromes are the default; acid green is the
single accent that consistently signals "this is sirius.x".</p>
<div class="swatches">
<div class="sw"><div class="chip" style="background:#d6ff3d"></div><div class="info"><b>Acid</b>#d6ff3d — accent, links, active nav</div></div>
<div class="sw"><div class="chip" style="background:#0b0e14"></div><div class="info"><b>Background</b>#0b0e14 — page canvas</div></div>
<div class="sw"><div class="chip" style="background:#141a24"></div><div class="info"><b>Panel</b>#141a24 — cards, elevated surfaces</div></div>
<div class="sw"><div class="chip" style="background:#18202c"></div><div class="info"><b>Panel 2</b>#18202c — nested / step items</div></div>
<div class="sw"><div class="chip" style="background:#e7eaf1"></div><div class="info"><b>Ink</b>#e7eaf1 — body text on dark</div></div>
<div class="sw"><div class="chip" style="background:#8b98a9"></div><div class="info"><b>Muted</b>#8b98a9 — secondary text</div></div>
<div class="sw"><div class="chip" style="background:#5e6678"></div><div class="info"><b>Dim</b>#5e6678 — tertiary text, dividers</div></div>
<div class="sw"><div class="chip" style="background:#4fd1a5"></div><div class="info"><b>OK</b>#4fd1a5 — success / available</div></div>
<div class="sw"><div class="chip" style="background:#f6768a"></div><div class="info"><b>Taken</b>#f6768a — errors / unavailable</div></div>
<div class="sw"><div class="chip" style="background:#ffc75f"></div><div class="info"><b>Warn</b>#ffc75f — caution, holds</div></div>
</div>
</section>
<section>
<h2>Typography</h2>
<p class="lede">System font stack, so nothing needs to load and every OS renders the wordmark in
the same family the reader is used to.</p>
<div class="asset" style="max-width:640px">
<p style="margin:0;font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-size:36px;font-weight:600;letter-spacing:-.5px">The quick brown fox</p>
<p style="margin:.4rem 0 0;color:var(--mut);font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-size:16px">jumps over the lazy dog · 0123456789 · sirius.x</p>
<div class="meta" style="margin-top:12px">system-ui, -apple-system, Segoe UI, Roboto, sans-serif</div>
</div>
<div class="note">The wordmark's <code>.x</code> is a <code>&lt;tspan fill="#d6ff3d"&gt;</code> —
don't render the whole word in acid, and don't render the star without the star's exact 4-point
path (it's a mark, not a generic asterisk).</div>
</section>
<section>
<h2>Usage &amp; licence</h2>
<p class="lede">All assets are MIT. Reuse them for third-party tools that integrate with sirius.x
(wallets, indexers, explorers, blog posts about BCNR). Keep the star's proportions intact and
don't recolour the acid to a similar-but-different green — palette drift is what makes brands
look untrustworthy over time.</p>
<ul style="color:var(--mut);font-size:14px;padding-left:1.2rem">
<li><b style="color:var(--ink)">Do</b> use the mark to indicate "supports sirius.x" or "hosted on sirius.x".</li>
<li><b style="color:var(--ink)">Do</b> shrink to the favicon at 16×16 — the SVG scales cleanly.</li>
<li><b style="color:var(--ink)">Don't</b> imply endorsement of a specific product without asking.</li>
<li><b style="color:var(--ink)">Don't</b> stretch, skew, or re-tint the star.</li>
</ul>
</section>
</div>
<footer>
Brand kit for sirius.x ·
<a href="../">back to sirius.x</a> ·
<a href="https://silentmode.st/">silentmode.st</a>
</footer>
</body>
</html>

10
brand/logo-mono.svg Normal file
View file

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 64" role="img" aria-label="sirius.x (monochrome)">
<!-- Single-fill variant for print, embossing, one-colour merch. currentColor
so the SVG inherits the surrounding text colour when inlined; pass
style="color: #d6ff3d" to force the acid green. -->
<g fill="currentColor">
<path d="M32 12 L35.3 30.7 L54 34 L35.3 37.3 L32 56 L28.7 37.3 L10 34 L28.7 30.7 Z"/>
<text x="72" y="42" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
font-size="28" font-weight="600" letter-spacing=".5">sirius.x</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 623 B

8
brand/logo.svg Normal file
View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 64" role="img" aria-label="sirius.x">
<path d="M32 12 L35.3 30.7 L54 34 L35.3 37.3 L32 56 L28.7 37.3 L10 34 L28.7 30.7 Z"
fill="#d6ff3d"/>
<text x="72" y="42" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
font-size="28" font-weight="600" fill="#e7eaf1" letter-spacing=".5">
sirius<tspan fill="#d6ff3d">.x</tspan>
</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 434 B

3
docs/index.html
View file

@ -12,7 +12,7 @@
<meta property="og:title" content="sirius.x docs — how BCNR works">
<meta property="og:description" content="The TLD registry, name registration, records, resolver, mainnet pricing, and how to verify anything against the chain.">
<meta property="og:url" content="https://silentmode.st/sirius-x/docs/">
<meta property="og:image" content="https://silentmode.st/sirius-x/assets/logo.svg">
<meta property="og:image" content="https://silentmode.st/sirius-x/brand/banner.svg">
<meta name="twitter:card" content="summary">
<style>
:root{
@ -85,6 +85,7 @@
<a href="./" class="here">📚 Docs</a>
<a href="../theseus/">🧭 Theseus</a>
<a href="../#roadmap">Roadmap</a>
<a href="../brand/">🎨 Brand</a>
<a href="https://silentmode.st/" rel="noopener">Silent Mode ↗</a>
<a href="../portal.html" class="portal">🔑 Sign in</a>
</nav>

3
index.html
View file

@ -15,7 +15,7 @@
<meta property="og:title" content="sirius.x — the home for names on Bitcoin Cash">
<meta property="og:description" content="Register a top-level domain, register a name under one, look up records, verify anything against the chain. Backed by Sia + VPS + on-chain.">
<meta property="og:url" content="https://silentmode.st/sirius-x/">
<meta property="og:image" content="https://silentmode.st/sirius-x/assets/logo.svg">
<meta property="og:image" content="https://silentmode.st/sirius-x/brand/banner.svg">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="sirius.x — the home for names on Bitcoin Cash">
<meta name="twitter:description" content="Register a TLD or a name, look up records, verify against the chain. Your keys, your names.">
@ -96,6 +96,7 @@
<a href="./docs/">📚 Docs</a>
<a href="./theseus/">🧭 Theseus</a>
<a href="#roadmap">Roadmap</a>
<a href="./brand/">🎨 Brand</a>
<a href="https://silentmode.st/" rel="noopener">Silent Mode ↗</a>
<a href="./portal.html" class="portal">🔑 Sign in</a>
</nav>

3
portal.html
View file

@ -12,7 +12,7 @@
<meta property="og:title" content="sirius.x portal — your BCNR names">
<meta property="og:description" content="Sign in with your seed phrase to see every name your wallet holds and manage records. Keys never leave the browser.">
<meta property="og:url" content="https://silentmode.st/sirius-x/portal.html">
<meta property="og:image" content="https://silentmode.st/sirius-x/assets/logo.svg">
<meta property="og:image" content="https://silentmode.st/sirius-x/brand/banner.svg">
<meta name="twitter:card" content="summary">
<style>
:root{
@ -92,6 +92,7 @@
<a href="./docs/">📚 Docs</a>
<a href="./theseus/">🧭 Theseus</a>
<a href="./#roadmap">Roadmap</a>
<a href="./brand/">🎨 Brand</a>
<a href="https://silentmode.st/" rel="noopener">Silent Mode ↗</a>
<a href="./portal.html" class="portal here">🔑 Sign in</a>
</nav>

3
theseus/index.html
View file

@ -12,7 +12,7 @@
<meta property="og:title" content="Theseus Navigator — the browser that speaks Bitcoin Cash names">
<meta property="og:description" content="Native .bch and BCNR name resolution built into a Chromium browser. No OS-level daemon, no root-store install. Download for Windows.">
<meta property="og:url" content="https://silentmode.st/sirius-x/theseus/">
<meta property="og:image" content="https://silentmode.st/sirius-x/assets/logo.svg">
<meta property="og:image" content="https://silentmode.st/sirius-x/brand/banner.svg">
<meta name="twitter:card" content="summary">
<style>
:root{
@ -85,6 +85,7 @@
<a href="../docs/">📚 Docs</a>
<a href="./" class="here">🧭 Theseus</a>
<a href="../#roadmap">Roadmap</a>
<a href="../brand/">🎨 Brand</a>
<a href="https://silentmode.st/" rel="noopener">Silent Mode ↗</a>
<a href="../portal.html" class="portal">🔑 Sign in</a>
</nav>