The complete visual system for netplex - built from the fan-in multiplexer mark. Logo, clearspace, colour, type and the round-dot wordmark, all on the product's own tokens.
01 Logo
netplex
Network multiplexing, drawn literally: three streams converge through a node into one channel. Two colours max - netplex orange on ink, or knocked out of orange. Never re-drawn.
Horizontal · darknetplex
Horizontal · lightnetplex
Stackednetplex
Icon only
02 Clearspace & minimum size
Clearspace = mark height
Minimum size20px mark / 16px icon-tile floor
03 Don't
✕recolour
✕rotate
✕stretch
✕add effects
04 App icon & favicon
Tile · orange
Tile · dark
Favicon ramp
05 Colour
Orange is brand + primary action only - never decoration. Ink & the neutral ramp carry the UI; status and data hues are functional.
Accent#ff6e36
Accent hover#ff885a
Ink / bg#0a0b0e
Surface#16181f
Text hi#f1f2f5
Text mute#868a93
OK#41c178
Warn#e8b24a
Error#ee5a55
Info#5fb7ff
Topology / data hues (node roles & link tiers in the product):
#3b82f6
#10b981
#f59e0b
#8b5cf6
#06b6d4
#ec4899
06 Typography
Font policy:Geist for all UI & chrome, Hack for technical/data, and Quicksand for the logo wordmark only - never for body or UI.
Quicksand · Wordmarknetplex
Geist · Display 700Spin up real networks
Geist · Heading 600Topology as code
Geist · Body 400Bridge any device into one fabric - virtual and physical, seamlessly unified.
Hacksudo netplex user reset-admin
Mono · KickerNetwork Emulation Platform
07 The dot - round, never square
Geist's period glyph is squarish. So the wordmark's dot is not the text character - it's a real circle element, baseline-aligned, sized in em so it scales with the type. In code: <span class="wm">netplex<span class="dot"></span></span> with .dot{border-radius:50%}.