design: implement the actual SoftLAN wordmark

This commit is contained in:
2026-06-21 21:27:54 +02:00
parent 6415a4e517
commit 9d1cc771fc
2 changed files with 12 additions and 3 deletions
@@ -8,7 +8,11 @@ interface Props {
export const Brand = ({ accent, peerCount }: Props) => ( export const Brand = ({ accent, peerCount }: Props) => (
<div className="brand"> <div className="brand">
<LiveLogo className="brand-mark" accent={accent} size={28} /> <LiveLogo className="brand-mark" accent={accent} size={28} />
<div className="brand-name">SoftLAN</div> {/* Two-tone wordmark per design/logo/INTEGRATION.md: "Soft" in --t-1,
"LAN" always in the accent. */}
<div className="brand-name">
Soft<span className="brand-name-lan">LAN</span>
</div>
{peerCount > 0 && ( {peerCount > 0 && (
<span <span
className="brand-peers" className="brand-peers"
@@ -154,10 +154,15 @@
overflow: visible; overflow: visible;
} }
.brand-name { .brand-name {
font-family: var(--font-ui);
font-weight: 700; font-weight: 700;
font-size: 15px; font-size: 15px;
letter-spacing: -0.005em; letter-spacing: -0.01em;
color: var(--t-1); color: var(--t-1); /* "Soft" — #e6edf3 on dark UI */
}
/* "LAN" is always the accent (per the logo wordmark spec). */
.brand-name-lan {
color: var(--accent);
} }
/* Peer count chip in brand area */ /* Peer count chip in brand area */