netplex. Early Access is open. Join the list to get in first.
netplex · brand kit v1
Brand kit
How netplex. looks: the logo, the empty space around it, colours, fonts and the round-dot name. All of it matches the product itself.
01 Logo
netplex
The logo shows three lines joining at a point into one line. Use two colours at most: netplex orange on dark, or cut out of orange. Never redraw it.
Horizontal · darknetplex
Horizontal · lightnetplex
Stackednetplex
Icon only
02 Spacing & smallest 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 for the brand and main buttons only, never decoration. Dark and grey shades make up the rest. Status and chart colours only carry meaning.
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
Fonts: Geist for all screens and menus, Hack for code and data, and Quicksand for the logo name only.
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 full stop is squarish. So the dot in our name is a real circle, not a text character, and it scales with the text. In code: <span class="wm">netplex<span class="dot"></span></span> with .dot{border-radius:50%}.