e59a2a01b5
Copies site/sirius/register.html to site-sirius-x/register.html with paths rewritten to absolute silentmode.st URLs (js bundle, importmap, shared.css, WizardConnect vendor) so the page works both from silentmode.st/sirius-x/register.html and from sirius.x/register.html via the BCNR gateway. Nav is swapped to the sirius.x layout with profile-menu.js. Landing, portal, docs, and theseus subpage now link locally with ./register.html instead of redirecting off to silentmode.st. Adds 'Register' to the top nav of all six sirius.x pages. Sia and VPS mirrors updated for register.html and the six pages.
227 lines
13 KiB
HTML
227 lines
13 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">
|
||
<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="../register.html">🪪 Register</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 & 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 & 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><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>
|
||
<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>
|
||
Brand kit for sirius.x ·
|
||
<a href="../">back to sirius.x</a> ·
|
||
<a href="https://silentmode.st/">silentmode.st</a>
|
||
</footer>
|
||
|
||
<script defer src="../js/profile-menu.js"></script>
|
||
</body>
|
||
</html>
|