silentmode/theseus-site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

site(theseus.x): brand book, family footer, thread mark on Plug-ins page

Browse source 
- New /brand/ directory: compass-mark favicon and logo variants (colour +
  monochrome currentColor), 512x512 avatar with rounded corners, 1200x630
  banner for OpenGraph/Twitter cards, and a brand book page mirroring the
  Sirius.X and Ariadne.X pattern — logo & wordmark, avatar & favicon,
  social banner, colour palette, typography, usage & licence.
- Footer replaces the single-line attribution with the deep, four-column
  family footer (brand column plus Product, Download, Pantheon), an alpha
  badge bar, and the acid-green accent used elsewhere on the site. Brand
  and Sirius.X + Ariadne.X + Hephaestus.X cross-links live here now.
- Ariadne's Thread plug-in card on /plug-ins/ swaps the spool emoji for
  the actual brand-book thread mark (thread.svg, calm variant, 26px
  beside the h3). Same asset the resolver page carries, copied into
  local /assets/ so the icon works offline and doesn't cross-origin.
- /extensions/ picks up a Brand link in the topnav to match the sibling
  pages' navigation set.
This commit is contained in:
Local Dev 2026-09-30 12:12:44 +02:00
parent 65829854a7
commit 8ae97fc9ba
9 changed files with 560 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
assets/thread.svg Normal file
View file

@ -0,0 +1,134 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 108" role="img" aria-label="Ariadne's thread">
<defs>
<radialGradient id="core" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFFAE0" stop-opacity="0.95"/>
<stop offset="18%" stop-color="#F5D983" stop-opacity="0.55"/>
<stop offset="55%" stop-color="#F5D983" stop-opacity="0.14"/>
<stop offset="100%" stop-color="#F5D983" stop-opacity="0"/>
</radialGradient>
<radialGradient id="ambient" cx="50%" cy="50%" r="55%">
<stop offset="0%" stop-color="#F5D983" stop-opacity="0.28"/>
<stop offset="65%" stop-color="#F5D983" stop-opacity="0.06"/>
<stop offset="100%" stop-color="#F5D983" stop-opacity="0"/>
</radialGradient>
<radialGradient id="hot" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFFAE0" stop-opacity="1"/>
<stop offset="55%" stop-color="#FAE7AA" stop-opacity="0.55"/>
<stop offset="100%" stop-color="#FAE7AA" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- ambient outer glow -->
<rect width="108" height="108" fill="url(#ambient)"/>
<!-- soft core glow behind the strands -->
<circle cx="54" cy="54" r="42" fill="url(#core)"/>
<ellipse cx="54" cy="54" rx="38.0" ry="3.1"
transform="rotate(63.5 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.44"
opacity="0.42"/>
<ellipse cx="54" cy="54" rx="37.5" ry="3.4"
transform="rotate(92.3 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.79"
opacity="0.55"/>
<ellipse cx="54" cy="54" rx="39.1" ry="3.5"
transform="rotate(-4.9 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.83"
opacity="0.66"/>
<ellipse cx="54" cy="54" rx="41.3" ry="3.5"
transform="rotate(151.8 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.56"
opacity="0.56"/>
<ellipse cx="54" cy="54" rx="39.4" ry="4.5"
transform="rotate(133.6 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.46"
opacity="0.60"/>
<ellipse cx="54" cy="54" rx="39.2" ry="4.5"
transform="rotate(13.7 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.67"
opacity="0.44"/>
<ellipse cx="54" cy="54" rx="38.0" ry="4.6"
transform="rotate(23.9 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.45"
opacity="0.31"/>
<ellipse cx="54" cy="54" rx="38.6" ry="4.9"
transform="rotate(122.3 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.76"
opacity="0.67"/>
<ellipse cx="54" cy="54" rx="40.9" ry="5.3"
transform="rotate(66.5 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.50"
opacity="0.31"/>
<ellipse cx="54" cy="54" rx="37.0" ry="5.8"
transform="rotate(107.1 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.84"
opacity="0.68"/>
<ellipse cx="54" cy="54" rx="37.9" ry="6.5"
transform="rotate(120.6 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.70"
opacity="0.47"/>
<ellipse cx="54" cy="54" rx="37.6" ry="7.0"
transform="rotate(19.6 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.54"
opacity="0.53"/>
<ellipse cx="54" cy="54" rx="38.8" ry="7.6"
transform="rotate(46.1 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.52"
opacity="0.67"/>
<ellipse cx="54" cy="54" rx="40.7" ry="8.5"
transform="rotate(77.2 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.44"
opacity="0.30"/>
<ellipse cx="54" cy="54" rx="37.7" ry="8.5"
transform="rotate(3.3 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.39"
opacity="0.67"/>
<ellipse cx="54" cy="54" rx="41.2" ry="9.5"
transform="rotate(57.8 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.48"
opacity="0.68"/>
<ellipse cx="54" cy="54" rx="40.5" ry="9.7"
transform="rotate(51.2 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.48"
opacity="0.68"/>
<ellipse cx="54" cy="54" rx="39.6" ry="10.0"
transform="rotate(133.2 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.58"
opacity="0.56"/>
<ellipse cx="54" cy="54" rx="41.8" ry="10.7"
transform="rotate(81.6 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.60"
opacity="0.72"/>
<ellipse cx="54" cy="54" rx="37.9" ry="12.0"
transform="rotate(150.8 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.50"
opacity="0.46"/>
<ellipse cx="54" cy="54" rx="40.5" ry="12.1"
transform="rotate(89.0 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.81"
opacity="0.45"/>
<ellipse cx="54" cy="54" rx="39.4" ry="12.2"
transform="rotate(167.7 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.64"
opacity="0.36"/>
<ellipse cx="54" cy="54" rx="40.0" ry="12.9"
transform="rotate(176.4 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.77"
opacity="0.53"/>
<ellipse cx="54" cy="54" rx="38.3" ry="13.4"
transform="rotate(36.8 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.49"
opacity="0.42"/>
<ellipse cx="54" cy="54" rx="40.2" ry="13.5"
transform="rotate(156.9 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.66"
opacity="0.50"/>
<ellipse cx="54" cy="54" rx="37.0" ry="13.9"
transform="rotate(102.6 54 54)"
fill="none" stroke="#F5D983" stroke-width="0.54"
opacity="0.50"/>
<!-- bright inner core, catches the eye -->
<circle cx="54" cy="54" r="14" fill="url(#hot)"/>
<circle cx="54" cy="54" r="3" fill="#FFFAE0"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

15
brand/avatar.svg Normal file
View file

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!-- theseus.x avatar — 512x512 rounded square. Same compass mark as
favicon, scaled up. Social platforms apply a circular mask; the
corner radius (96px) is generous enough that no part of the
compass touches the edge, so the mark stays intact when clipped. -->
<rect width="512" height="512" rx="96" fill="#0b0e14"/>
<!-- N half — red bearing indicator -->
<path d="M256 56 L304 256 L208 256 Z" fill="#e04e4e"/>
<!-- S half — acid -->
<path d="M304 256 L256 456 L208 256 Z" fill="#d6ff3d"/>
<!-- E-W arm — softened acid so the vertical bearing dominates -->
<path d="M56 256 L256 216 L456 256 L256 296 Z" fill="#d6ff3d" opacity="0.55"/>
<!-- Center hole -->
<circle cx="256" cy="256" r="18" fill="#0b0e14"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 828 B

46
brand/banner.svg Normal file
View file

@ -0,0 +1,46 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
<!-- theseus.x social banner — 1200x630 OpenGraph / Twitter Card canonical.
Composition is horizontal: compass mark on the left third, wordmark
centred, tagline underneath. Centre-safe for Facebook + Discord crops. -->
<defs>
<radialGradient id="glow" cx="30%" cy="40%" r="60%">
<stop offset="0%" stop-color="#16202e" stop-opacity="1"/>
<stop offset="100%" stop-color="#0b0e14" stop-opacity="1"/>
</radialGradient>
<filter id="mark-shadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="12" in="SourceGraphic"/>
</filter>
</defs>
<rect width="1200" height="630" fill="url(#glow)"/>
<!-- Compass mark, large, left of centre -->
<g transform="translate(280 175) scale(4.4)">
<g opacity="0.28" filter="url(#mark-shadow)">
<rect width="64" height="64" rx="12" fill="#d6ff3d"/>
</g>
<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"/>
<path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity="0.55"/>
<circle cx="32" cy="32" r="3" fill="#0b0e14"/>
</g>
<!-- Wordmark, right of the compass -->
<text x="580" y="330" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
font-size="90" font-weight="700" fill="#e7eaf1" letter-spacing="-1.5">
theseus<tspan fill="#d6ff3d">.x</tspan>
</text>
<!-- Tagline -->
<text x="580" y="385" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
font-size="26" font-weight="500" fill="#8b98a9" letter-spacing=".3">
The browser that speaks Bitcoin Cash names
</text>
<!-- Small metadata footer, centre-safe -->
<text x="600" y="560" text-anchor="middle" font-family="ui-monospace, monospace"
font-size="18" fill="#5e6678" letter-spacing="2">
NATIVE BCNR RESOLUTION · WINDOWS + ANDROID
</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

11
brand/favicon.svg Normal file
View file

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<!-- theseus.x — Navigator compass mark. Rounded dark square (matches the
sirius.x sibling family). N (top) half red like every real compass
needle, S (bottom) half in Silent Mode acid green. E-W arm softened
so the N-S bearing reads clearly at 16x16 tab-icon size. -->
<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"/>
<path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity="0.55"/>
<circle cx="32" cy="32" r="3" fill="#0b0e14"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 644 B

316
brand/index.html Normal file
View file

@ -0,0 +1,316 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Brand — Theseus.X</title>
<meta name="description" content="Theseus.X brand kit — compass mark, 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="Theseus.X">
<meta property="og:title" content="Theseus.X brand kit">
<meta property="og:description" content="Compass mark, wordmark, avatar, banner, favicon, colour palette. All SVG, downloadable, MIT.">
<meta property="og:url" content="https://theseus.x/brand/">
<meta property="og:image" content="https://theseus.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;
--bearing:#e04e4e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
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:fixed;top:0;left:0;right:0;z-index:20;display:flex;gap:2px;align-items:center;flex-wrap:wrap;
padding:10px 1.2rem;background:rgba(11,14,20,.88);backdrop-filter:blur(10px)}
.topnav .brand{font-weight:600;color:var(--ink);text-decoration:none;margin-right:14px;font-size:15px;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
.topnav .brand .g{color:var(--acid)}
.topnav .brand svg{width:20px;height:20px}
.topnav a{color:var(--mut);text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px;
display:inline-flex;align-items:center;gap:6px}
.topnav a:hover{color:var(--ink);background:var(--panel)}
.topnav a.here{color:var(--acid);background:rgba(214,255,61,.08)}
.topnav a.get{margin-left:auto;background:rgba(214,255,61,.10);color:var(--acid);font-weight:500}
.topnav a.get:hover{background:rgba(214,255,61,.18)}
.topnav a .g{color:var(--acid)}
.topnav a svg.tabicon{width:15px;height:15px;flex:none}
/* Sidebar overlay — same shape as index.html */
:root{--sn-w:200px;--tn-h:52px}
body{padding-top:var(--tn-h)}
.sidenav{position:fixed;top:var(--tn-h);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,.94);backdrop-filter:blur(12px);
display:flex;justify-content:space-around;overflow-x:auto;
scrollbar-width:none;-ms-overflow-style:none}
.sidenav::-webkit-scrollbar{display:none;width:0;height:0}
.sidenav a{flex:1;min-width:44px;padding:8px 4px;justify-content:center;gap:0;opacity:.5;font-size:15px}
.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:20px}
.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="../">
<svg viewBox="0 0 64 64" 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"/>
<path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity=".55"/>
<circle cx="32" cy="32" r="3" fill="#0b0e14"/>
</svg>
<span>Theseus<span class="g">.X</span></span>
</a>
<a href="../plug-ins/">Plug-ins</a>
<a href="../extensions/">Extensions</a>
<a class="here" href="./">Brand</a>
<a href="https://sirius.x/" title="Register a BCNR name"><svg class="tabicon" viewBox="0 0 64 64" 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>Sirius<span class="g">.X</span></span></a>
<a class="get" href="../#download">Get Theseus</a>
</nav>
<aside class="sidenav" aria-label="On this page">
<a href="#logo" title="Compass mark &amp; wordmark"><span class="ic" aria-hidden="true">🧭</span><span class="lb">Logo</span></a>
<a href="#avatar" title="Avatar &amp; 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 &amp; licence" ><span class="ic" aria-hidden="true">📜</span><span class="lb">Usage</span></a>
</aside>
<header class="hero">
<div class="mark">🎨</div>
<h1>Theseus.X <span class="g">brand kit</span></h1>
<p class="tag">The Navigator compass mark, wordmark, avatar, banner, favicon, and 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>Compass mark &amp; wordmark</h2>
<p class="lede">A rounded dark square with a compass rose — north half in bearing red like every
real compass needle, south half in Silent Mode acid green, softened east-west arm so the N-S
bearing dominates. Plus <b>theseus.x</b> with the <code>.x</code> TLD picked out in acid. The
mark 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="theseus.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="theseus.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 &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="theseus.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; the corner radius keeps the compass intact when clipped.</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="theseus.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 Theseus.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 compass mark 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="theseus.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
accent that signals "this is Theseus.X", and bearing red is reserved for the compass mark's
north triangle — never used for links, buttons, or generic UI accents.</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:#e04e4e"></div><div class="info"><b>Bearing</b>#e04e4e — compass north, mark only</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 / verified chain</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 · theseus.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. The compass north triangle is the only place
<b>bearing red</b> appears; don't add red anywhere else in the chrome.</div>
</section>
<section id="usage">
<h2>Usage &amp; licence</h2>
<p class="lede">All assets are MIT. Reuse them for third-party tools that integrate with
Theseus.X (BCNR name explorers, wallet bridges, blog posts, review sites). Keep the compass
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 "opens in Theseus" or "supports BCNR".</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)">Do</b> use the monochrome logo where the acid green would clash.</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 compass.</li>
<li><b style="color:var(--ink)">Don't</b> introduce a second accent colour — acid green is the only one.</li>
</ul>
</section>
</div>
<footer>
Sibling brand kits: <a href="https://sirius.x/brand/">sirius.x/brand</a> ·
<a href="https://ariadne.x/brand/">ariadne.x/brand</a>
</footer>
<script>
// Sidenav scroll-spy: highlight the section currently in view.
(() => {
const links = document.querySelectorAll(".sidenav a[href^='#']");
if (!links.length) return;
const entries = [];
links.forEach((a) => { const el = document.querySelector(a.getAttribute("href")); if (el) entries.push({ el, link: a }); });
if (!entries.length) return;
const setActive = (link) => { links.forEach((l) => l.classList.remove("active")); link.classList.add("active"); };
const update = () => {
const doc = document.documentElement;
const scrollBottom = window.scrollY + window.innerHeight;
if (scrollBottom >= (doc.scrollHeight - 4)) { setActive(entries[entries.length - 1].link); return; }
const line = window.scrollY + window.innerHeight * 0.35;
let active = entries[0].link;
for (const e of entries) {
if (e.el.getBoundingClientRect().top + window.scrollY <= line) active = e.link;
else break;
}
setActive(active);
};
window.addEventListener("scroll", update, { passive: true });
window.addEventListener("resize", update);
update();
})();
</script>
</body>
</html>

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

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 64" fill="currentColor">
<!-- theseus.x monochrome wordmark. Uses currentColor so it inherits from
the surrounding text. Compass mark is drawn as one silhouette — the
N and S triangles fused into a diamond, with the E-W arm behind at
50% opacity so the bearing still reads. Print, embossing, single-
colour merch. -->
<g>
<rect x="0" y="0" width="64" height="64" rx="12" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M32 6 L38 32 L32 58 L26 32 Z" fill="currentColor"/>
<path d="M6 32 L32 27 L58 32 L32 37 Z" fill="currentColor" opacity="0.5"/>
<circle cx="32" cy="32" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
</g>
<text x="80" y="43" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
font-size="30" font-weight="600" fill="currentColor" letter-spacing=".5">
theseus.x
</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 963 B

16
brand/logo.svg Normal file
View file

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 64">
<!-- theseus.x wordmark. Compass mark on the left, "theseus" in ink, ".x"
in acid green. Kept minimal — no drop-shadow, no gradients — so the
SVG scales cleanly on both dark and light chromes. -->
<g transform="translate(0 0)">
<rect x="0" y="0" 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"/>
<path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity="0.55"/>
<circle cx="32" cy="32" r="3" fill="#0b0e14"/>
</g>
<text x="80" y="43" font-family="system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
font-size="30" font-weight="600" fill="#e7eaf1" letter-spacing=".5">
theseus<tspan fill="#d6ff3d">.x</tspan>
</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 851 B

1
extensions/index.html
View file

@ -147,6 +147,7 @@
</a>
<a href="../plug-ins/">Plug-ins</a>
<a class="here" href="./">Extensions</a>
<a href="../brand/">Brand</a>
<a href="https://sirius.x/" title="Register a BCNR name"><svg class="tabicon" viewBox="0 0 64 64" 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>Sirius<span class="g">.X</span></span></a>
<a class="get" href="../#download">Get Theseus</a>
</nav>

6
plug-ins/index.html
View file

@ -84,7 +84,8 @@
code{background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:13px}
.ext{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:1rem 0}
.ext h3{margin:0 0 .3rem;font-size:1.15rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ext h3 .icon{font-size:1.4rem}
.ext h3 .icon{font-size:1.4rem;display:inline-flex;align-items:center;line-height:1}
.ext h3 .icon img{width:26px;height:26px;display:block}
.ext .cur{color:var(--acid);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.ext .desc{color:var(--mut);font-size:14px;margin:.3rem 0 .8rem}
.ext .verifybox{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line);font-size:11.5px;color:var(--dim)}
@ -117,6 +118,7 @@
</a>
<a class="here" href="./">Plug-ins</a>
<a href="../extensions/">Extensions</a>
<a href="../brand/">Brand</a>
<a href="https://sirius.x/" title="Register a BCNR name"><svg class="tabicon" viewBox="0 0 64 64" 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>Sirius<span class="g">.X</span></span></a>
<a class="get" href="../#download">Get Theseus</a>
</nav>
@ -160,7 +162,7 @@
DNS resolver plus gateway, installed by Theseus's setup by default (opt-out) and switchable from
<b>Settings › Plug-ins</b>. The same resolver ships standalone for Windows and as Ariadne for Android.</p>
<div class="ext" id="ariadne">
<h3><span class="icon">🧵</span> Ariadne's Thread <span class="cur" style="margin-left:auto">current <span data-live="resolver-version">0.1.3</span></span></h3>
<h3><span class="icon"><img src="../assets/thread.svg" alt="" aria-hidden="true"></span> Ariadne's Thread <span class="cur" style="margin-left:auto">current <span data-live="resolver-version">0.1.3</span></span></h3>
<div class="desc">Windows service: answers A/AAAA for registered names, forwards everything else to your upstream
resolver, serves Sia-hosted content through a local gateway with a machine-local CA. Answers MX/TXT/NS from
owner-signed DNS records.</div>