bce4aa3529
Two UX polishes: 1. Register-tab icon flipped from 🪪 (identification-card emoji, renders as a hollow box in system-ui fonts without extended emoji) to ✏️ (pencil), which reads as 'edit/create' and ships in every emoji font worth targeting. Changed across the nav on all 8 pages plus the footer injector's Product column. Kept the Register nav item — six items total in the nav, and from any subpage it's one click to the search on landing. 2. tld.html no longer duplicates the wallet-choice + mint flow inline. The Register button on a search result now hands the label off to the shared register-flow.js modal — same modal that name registration uses — via a new window.siriusRegisterTld(label, {serviceFeeSats}) entry point. register-flow.js grew: - startTldFlow / window.siriusRegisterTld: sets state.tld and walks the modal through wallet-choice → Fund → stepConfirmTld → stepRegisterTld → stepDoneTld - stepConfirmTld: shows label + fee + owner, no per-name quote - stepRegisterTld: dispatches to registerTldWithBuiltInWallet or registerTldWithExternalWallet based on state.wallet/state.session - stepDoneTld: 'X is yours' with txid + certificate id + operator address, no record editor (a TLD certificate has no records to set immediately) - stepWallet / stepExternalConfirm branch on state.tld so the modal heading and the WC-confirm path route correctly tld.html trimmed: removed the entire signin-section + mint-section plus their inline handlers (~250 lines gone). Now just search + registered-TLDs list + a delegator to the shared modal. If a user is already signed in via the wallet dropdown, the modal recognises the saved wallet ('Unlock my browser wallet' button appears) instead of asking them to sign in again on this page.
224 lines
13 KiB
HTML
224 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>
|
||
<script type="importmap">
|
||
{ "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } }
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="topnav">
|
||
<a class="brand" href="../">⭐ <span class="g">Sirius.X</span></a>
|
||
<a href="../#try">Try it</a>
|
||
<a href="../#search-input">✏️ Register</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</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 id="site-footer"></footer>
|
||
|
||
<script defer src="../js/site-footer.js?v=20260907rel"></script>
|
||
<script defer src="../js/profile-menu.js?v=20260907inline"></script>
|
||
</body>
|
||
</html>
|