The mark, and how to use it.
A soft square divided by a single stepped cut. The two halves never touch: the gap between them is the void, and it is the one thing in the mark that must never be closed.
// zip · 99 KB · svg, png, favicons, guidelines
mark.svg
mark-on-light.svg
mark-mono-ink.svg
mark-mono-paper.svg
mark-mono-accent.svg
The animated version ships as a paste-in block rather than a file: mark-animated-snippet.txt holds an inline SVG plus a short <style> tag, no script and
nothing to load. An SVG referenced through <img> cannot be styled
from the page, so inlining it is also what lets you recolour the halves in CSS. It honours prefers-reduced-motion and holds the static mark when motion is off.
Everything is drawn on a 100-unit square. Scale it to anything; never redraw it by eye.
- Shell corner radius
- 30 units · 30%
- Cut angle, upper run
- 45°
- Jog corner radius
- 7 units
- Void width
- ~4.2 units
- Animation travel
- −2.6 / +1.1 units
- Loop
- 3.6s ease-in-out
At the tightest frame of the loop the halves still hold about 1.1 units of gap. The void is load-bearing — if it ever closes, the mark is wrong.
Signal
#7C5CFF · oklch(.62 .23 285)
Paper
#E8EAF0 · the light half
Ink
#0B0C10 · the dark half
Surface
#15171C · raised on ink
Signal replaces the old #240754, which was too dark to survive at small
sizes. Same hue family, usable lightness.
Clear space = 25% of the mark's height.
Nothing enters the dashed zone — no type, no rules, no other logos, no photograph edges. In the horizontal lockup the wordmark sits at 65% of the mark's height with a gap of 40% of that height.
Minimum size: 16px on screen, 6mm in print. Below that use a mono file.
The lockup SVGs use live Helvetica text so you can retype them. Before you send anything to a printer or a merch vendor, convert the wordmark to outlines.
64 
32 
16
actual pixelson ink
64 
32 
16
actual pixelson paper
And never close the void. If a vendor asks for a version with the halves joined, send them the mono file instead.
Vector
Lockups
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#0B0C10">// 99 KB · everything above, plus written guidelines