668855cebd
Every Sirius.X sub-page carried the old header shape — "Try it" and
"Register" living in the topnav next to the cross-site tabs — so
clicking Market or TLD reset the layout back to a state the index no
longer used. Rewrote each topnav to the site-only tabs (Sirius.X · TLD
· Market · Theseus.X · Sign in) and appended ".X" to the Theseus tab
so the ecosystem naming is consistent across pages.
Added the overlay side-nav to every page that carries named sections:
tld.html — Search · Registered
theseus/ — Download · How · Verify
docs/ — TLD registry · Register · Private TLDs ·
Market · Records · Signed records
admin/ — Sign in · Session · Mint TLD · Registry
brand/ — Logo · Avatar · Banner · Palette · Typography ·
Usage (section IDs added — the h2s were unnamed)
Same shape as the index and as Theseus.X: pointer-events:none overlay,
opacity 0.35 by default, ink + blurred backdrop on hover, acid green
on the active section, IntersectionObserver scroll-spy. Icon rail on
medium, bottom bar on mobile.
Pages without meaningful anchor targets (market/, portal.html,
studio.html, register.html) keep the trimmed topnav but no sidebar —
adding an empty rail would just be noise.
299 lines
19 KiB
HTML
299 lines
19 KiB
HTML
<!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">
|
||
<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;9..144,700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{
|
||
--bg:#050810; --panel:#141a24; --panel2:#0a0f1c; --line:rgba(255,255,255,.06);
|
||
--ink:#f1f4fa; --mut:#b8c2d4; --dim:#6a7488; --acid:#d6ff3d;
|
||
}
|
||
*{box-sizing:border-box}
|
||
body{margin:0;background:radial-gradient(ellipse 1200px 600px at 50% -5%,#131a2a 0%,transparent 60%),radial-gradient(ellipse 900px 500px at 100% 100%,#0a0f1c 0%,transparent 55%),radial-gradient(ellipse 900px 500px at 0% 100%,#0c1424 0%,transparent 55%),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)}
|
||
.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)}
|
||
|
||
/* Adaptive side nav — same shape as index.html and Theseus.X */
|
||
:root{--sn-w:200px}
|
||
.sidenav{position:fixed;top:56px;left:0;bottom:0;width:var(--sn-w);z-index:15;
|
||
background:transparent;padding:32px 12px 22px 18px;
|
||
overflow-y:auto;pointer-events:none;transition:width .15s ease}
|
||
.sidenav a{display:flex;align-items:center;gap:14px;color:var(--mut);text-decoration:none;
|
||
padding:9px 12px;border-radius:10px;
|
||
font-size:14.5px;font-weight:500;opacity:.35;pointer-events:auto;
|
||
transition:opacity .12s,color .12s,background .12s,backdrop-filter .12s}
|
||
.sidenav a .ic{flex:none;width:22px;font-size:18px;line-height:1;text-align:center;
|
||
display:none;justify-content:center;align-items:center}
|
||
.sidenav a .lb{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.sidenav a:hover{opacity:1;color:var(--ink);background:rgba(11,14,20,.72);backdrop-filter:blur(8px)}
|
||
.sidenav a.active{opacity:.85;color:var(--acid)}
|
||
.sidenav a.active:hover{opacity:1}
|
||
section{scroll-margin-top:70px}
|
||
@media (max-width:1180px){
|
||
:root{--sn-w:64px}
|
||
.sidenav{padding:22px 6px}
|
||
.sidenav a{justify-content:center;padding:12px 4px;gap:0}
|
||
.sidenav a .ic{display:inline-flex}
|
||
.sidenav a .lb{display:none}
|
||
}
|
||
@media (max-width:720px){
|
||
:root{--sn-w:0}
|
||
body{padding-bottom:64px}
|
||
.sidenav{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;
|
||
padding:4px;flex-direction:row;background:rgba(11,14,20,.52);
|
||
display:flex;justify-content:space-around;overflow-x:auto}
|
||
.sidenav a{flex:1;min-width:56px;padding:10px 6px;justify-content:center;gap:0;opacity:.5}
|
||
.sidenav a .ic{display:inline-flex}
|
||
.sidenav a .lb{display:none}
|
||
}
|
||
|
||
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}
|
||
/* Deviant-family fonts + Fraunces/Ubuntu reader toggle. */
|
||
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-feature-settings:"ss01","ss02"}
|
||
code,.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
|
||
body{font-family:'DM Sans','Inter',system-ui,sans-serif !important;font-feature-settings:"ss01","ss02"}
|
||
html[data-font-cmp="ubuntu"] body,html[data-font-cmp="ubuntu"] h1,html[data-font-cmp="ubuntu"] h2,html[data-font-cmp="ubuntu"] h3,html[data-font-cmp="ubuntu"] p,html[data-font-cmp="ubuntu"] a,html[data-font-cmp="ubuntu"] button,html[data-font-cmp="ubuntu"] span,html[data-font-cmp="ubuntu"] div,html[data-font-cmp="ubuntu"] label,html[data-font-cmp="ubuntu"] input,html[data-font-cmp="ubuntu"] li{font-family:'Ubuntu',system-ui,sans-serif !important}
|
||
html[data-font-cmp="ubuntu"] code,html[data-font-cmp="ubuntu"] .mono{font-family:'JetBrains Mono',ui-monospace,monospace !important}
|
||
.font-picker{display:inline-flex;align-items:center;gap:2px;padding:2px;margin:0 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
|
||
.font-picker button{background:transparent;border:none;color:var(--dim);padding:4px 10px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit}
|
||
.font-picker button:hover{color:var(--ink)}
|
||
.font-picker button.active{background:var(--acid);color:var(--bg);font-weight:600}
|
||
</style>
|
||
<script type="importmap">
|
||
{ "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } }
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="topnav">
|
||
<a class="brand" href="../"><svg width="18" height="18" viewBox="0 0 64 64" style="vertical-align:-4px;margin-right:6px" aria-hidden="true"><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><span class="g">Sirius.X</span></a>
|
||
<a href="../tld.html">🌐 TLD</a>
|
||
<a href="../theseus/"><svg width="14" height="14" viewBox="0 0 64 64" style="vertical-align:-2px;margin-right:4px" aria-hidden="true"><rect width="64" height="64" rx="12" fill="#0b0e14"/><path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/><path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/><circle cx="32" cy="32" r="3" fill="#0b0e14"/></svg>Theseus<span class="g">.X</span></a>
|
||
<a href="../portal.html" class="portal">🔑 Sign in</a>
|
||
</nav>
|
||
|
||
<aside class="sidenav" aria-label="On this page">
|
||
<a href="#logo" title="Logo & wordmark" ><span class="ic" aria-hidden="true">✦</span><span class="lb">Logo</span></a>
|
||
<a href="#avatar" title="Avatar & favicon" ><span class="ic" aria-hidden="true">🎭</span><span class="lb">Avatar</span></a>
|
||
<a href="#banner" title="Social banner" ><span class="ic" aria-hidden="true">🖼</span><span class="lb">Banner</span></a>
|
||
<a href="#palette" title="Colour palette" ><span class="ic" aria-hidden="true">🎨</span><span class="lb">Palette</span></a>
|
||
<a href="#typography" title="Typography" ><span class="ic" aria-hidden="true">🅰️</span><span class="lb">Typography</span></a>
|
||
<a href="#usage" title="Usage & licence" ><span class="ic" aria-hidden="true">📜</span><span class="lb">Usage</span></a>
|
||
</aside>
|
||
|
||
<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 id="logo">
|
||
<h2>Logo & 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 id="avatar">
|
||
<h2>Avatar & 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 id="banner">
|
||
<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 id="palette">
|
||
<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 id="typography">
|
||
<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><tspan fill="#d6ff3d"></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 id="usage">
|
||
<h2>Usage & 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 id="site-footer"></footer>
|
||
|
||
<script src="../js/pin-escrow.js?v=20260909pin"></script>
|
||
<script src="../js/pricing.js?v=20260909tldhigh"></script>
|
||
<script defer src="../js/site-footer.js?v=20260907rel"></script>
|
||
<script defer src="../js/theme.js?v=20260920compact"></script>
|
||
<script defer src="../js/profile-menu.js?v=20260908tabs"></script>
|
||
<script>
|
||
(() => {
|
||
const links = document.querySelectorAll(".sidenav a[href^='#']");
|
||
if (!links.length) return;
|
||
const map = new Map();
|
||
links.forEach((a) => { const el = document.querySelector(a.getAttribute("href")); if (el) map.set(el, a); });
|
||
const io = new IntersectionObserver((entries) => {
|
||
entries.forEach((en) => {
|
||
if (!en.isIntersecting) return;
|
||
const a = map.get(en.target); if (!a) return;
|
||
links.forEach((l) => l.classList.remove("active"));
|
||
a.classList.add("active");
|
||
});
|
||
}, { rootMargin: "-40% 0px -55% 0px", threshold: 0 });
|
||
map.forEach((_, el) => io.observe(el));
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|