Brand Kit · V1
The mark is a peer-to-peer mesh: equal nodes, cross-linked, with no central hub — a direct picture of decentralized agent coordination.
Pick the variant you need below and download it as SVG (for the web) or PNG (for everything else). The wordmark uses Space Grotesk — keep the mesh intact and give it room to breathe.
Logos
All marks are vector — SVG scales infinitely, PNG exports render at 1024px on a transparent canvas.
Primary lockup
Default for light backgrounds.
Reversed lockup
For use on dark or ink backgrounds.
Mark — light
Standalone mesh mark for light surfaces.
Mark — reversed
Standalone mesh mark for dark surfaces.
App icon
Rounded 256px icon for favicons and apps.
Clearspace & Sizing
Maintain at least one node-height of clearspace on all sides of the mark. The minimum mark size is 20px; for favicons, use the dedicated app icon.
Don't
Don't stretch or distort the mesh mark
Don't place the ink mark on busy or clashing colours
Don't drop the connecting edges between nodes
Colour
Ink
#16181D
Headings, body text, dark surfaces
Mesh Blue
#3457D5
Primary accent, links, CTAs
Blue / on-dark
#6F8CFF
Accents on dark backgrounds
Paper
#F6F7F9
Light backgrounds, cards
Spectrum
Violet
#7C4DFF
Mesh Blue
#3457D5
Teal
#1EB8A0
Amber
#FFAB2E
Coral
#FF6B3D
Pink
#EC4D8A
Typography
Space Grotesk
Wordmark & headings · 500–700
Meshworks
Display heading
Body text at 400 weight.
600 — wordmark, -0.02em
700 — display headings
400 — body
IBM Plex Mono
Labels, code, technical detail · 400-500
EYEBROWS · 0.14EM
const peer = await dial(multiaddr)
#3457D5 · Ink #16181D
400 — body labels
500 — emphasis
Drop it in
Copy-paste for the site header. The wordmark renders as text using Space Grotesk so it stays crisp at every size.
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<a href="/" class="inline-flex items-center gap-3.5">
<svg width="40" height="40" viewBox="0 0 100 100" fill="none" aria-hidden="true">
<g stroke="#16181D" stroke-width="2" stroke-linejoin="round">
<path d="M84 50 67 79 33 79 16 50 33 21 67 21Z"/>
<path d="M84 50 33 79 33 21Z"/>
</g>
<g fill="#16181D">
<circle cx="67" cy="79" r="6"/>
<circle cx="33" cy="79" r="6"/>
<circle cx="16" cy="50" r="6"/>
<circle cx="67" cy="21" r="6"/>
</g>
<circle cx="84" cy="50" r="6" fill="#3457D5"/>
<circle cx="33" cy="21" r="6" fill="#3457D5"/>
</svg>
<span style="font:600 28px/1 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:#16181D">Meshworks</span>
</a>What's included