One visual language for a devtool.

Relay is an invented product: background agents that run in isolated cloud sandboxes, fix bugs and run migrations, and wait for your approval on the risky steps. I designed the brand and a six-page site at three breakpoints, then built it.

Type: Self-initiated concept · invented brand
Year: 2026
Scope: 6 pages × 3 breakpoints = 18 artboards
Role: Brand, site system, build
Stack: Figma, Astro, Motion, iso.ts, Framer port

Relay landing: “agents that ship while you sleep.” beside an isometric grid of agent sandboxes with live callouts. — Hero · a generated isometric scene

The whole landing

Every section, top to bottom.

The full page as designed, cut in two and read left to right. Below it, the same page at tablet and phone widths.

The whole Relay landing at 1440, split into two columns: hero, stats, run console, approvals, capabilities, isolation, integrations and the closing CTA. — The full landing · 1440, as designed in Figma · open full size ↗

Relay at tablet and phone width: the tablet first fold and three phone screens from down the page. — Tablet · 810 and phone · 390 · open full size ↗

Context

A developer should get the whole promise without reading the docs.

Agents run, you watch every step, risky steps wait for your approval, each run is sandboxed in four layers, and you pay per agent-minute. Each page carries one of those ideas, in the same visual language.

A scene engine

Every hero is generated, so six pages read as one system.

A small scene engine, iso.ts, turns boxes, cylinders and segments into depth-sorted polygons and ASCII layers, then into Figma vectors. One accent, #3DFF9A, is reserved for live state.

Relay “isolated by default.” section: an isometric stack of policy gate, agent loop, network and secrets, microVM. — Isolation · four layers, generated

Watch every step

The run console is the product’s proof.

Every tool call, diff and test run is visible as it happens, so trust comes from what you can see rather than what the page claims.

Relay run console: run #4812 of fix-flaky-tests, eleven steps from reading the issue to a passing suite and a pull request. — Run console · run #4812

Approvals and pricing

Risky actions wait for your phone; you pay by the second.

The approval flow and the pricing page use the same parts as the console, so the system holds from the hero to the bill.

Relay approval section: a policy file beside a phone approving pg-migrate-0042. — Approve risky actions from your phone

Relay pricing: $0, $0.04 per agent-minute and custom, with a cost calculator. — Pricing · start free, scale by the second

The system

18 artboards, then a production build and a Framer port.

Six pages, each at 1440, 810 and 390, built in Astro with Motion and ported to Framer.

An overview of Relay’s 18 artboards: six pages at three breakpoints. — All 18 artboards

18 artboards, a production build and a Framer port, in one language.

Next case: Kleen

Self-initiated concept · brand, design and build by me · figures are illustrative