One accent. Everything repaints.
Press T and click any swatch. Multi presets carry three stops: stop 1 is --color-primary (every text, border and label, always ≥ 4.5:1); stops 2 and 3 paint only the logo, headline words, buttons, rules and glows through --color-grad. Solid presets repeat one colour. Shift+T toggles light mode. Contract: STYLE_GUIDE.md.
01 · Tokens
:root — the only place a hex is allowed02 · Logo
<svg class="logo"><use href="#btcKnot|#btcLockupH"/> · fill=url(#btcDuo) via .logo · never <img>Sizes: hero knot clamp(180px,20vw,260px) · topbar lockup 34px · footer 26px. One knot per view. Wordmark paths use var(--text), the knot uses the accent.
03 · Type
Orbitron 400 display · Inter body · JetBrains Mono dataH2 section title .th
H3 card title 17px
Lead paragraph Inter, max 64ch, 1.7 line-height. Bold is text colour.
Body copy 14.5–16px in --text-2.
Label · mono 10px .2em uppercase
Note · mono 11px with accent b for emphasis.
04 · Buttons
.btn + -primary / -arsenal / -ghost / -hud · -lg -sm05 · Primitives
.card · .corners · .chip · .tag · .tagrow · .fieldCard with corners
Hero and feature cards only. Hover lifts 2px and lights the border in the accent.
Gradient card
Default card for lists. Meta rows are their own line, never absolute.
06 · Hero art
.hero-art · .radar · .blip · .logo-knot07 · Shell
topbar (blur on scroll) · burger <900px · footer 4 columns · theme fabThe header above and the footer below are the live shell. Resize under 900px for the burger. The ◐ fab bottom-right is the theme panel (T / Shift+T).
08 · Motion
micro .12–.2s · standard .3–.5s · cinematic .7–1.6s · ambient loops · reduced-motion → .001s