Brand

Two guardrails, a line under tension, and the node where it's signed

The mark draws the product. The two vertical bars are the limits the agent operates between. The line running between them is the rein — under tension, never slack. The ring at the centre is where the decision happens and where it gets signed.

One mark, whatever colour it lands in

Every stroke is currentColor. There is no light build and no dark build — set the colour on the parent and the mark follows. Never hard-code a stroke on it.

text-text
text-text-muted
text-accent-indigo
on page bg

The lockup

Mark plus wordmark. The wordmark is HTML text — never baked into the SVG — so it stays selectable, scales with the type ramp, and picks up Inter like the rest of the page.

Clear space: half the mark's height on every side. At the nav's 28px mark that's 14px — nothing crowds it closer, including the beta pill.

Motion

<AnimatedLogo size={240} /> draws the mark in sequence — guardrails, then the rein, then the ring. Pass replayKey to restart it. Under prefers-reduced-motion it renders the finished mark with no animation at all.

the agent vault

Files

Four copies of the same geometry, each for a context that can't use the others. Change one path, change all four.

components/mark.tsxReact source. <Mark /> and <Lockup />. Strokes are currentColor.
public/mark.svgStandalone SVG for anything outside React — decks, emails, third-party embeds.
app/icon.svgFavicon. Same geometry with literal colours, because a favicon has no parent to inherit from.
app/apple-icon.tsx180×180 PNG for iOS home screens, generated from the same paths.

The previous wordmark lives at public/logo-legacy.svg and public/logo.png. Nothing on the site renders them; the PNG stays at its old path because the waitlist confirmation email still points at it.

Colour

bg
#080810
surface
#0e0e18
border
#1e1e2e
text
#f1f5f9
text-muted
#94a3b8
accent-indigo
#6366f1