← Back Index
Case Study — 01

An AI gateway where you pay per message — no subscriptions, no accounts, and your money stays yours.

Brand IdentityUI / UXMotion Design
ETHGlobal HackMoney 2026 — Finalist
router402.xyz
Router402 live landing page
The live site — router402.xyz
02 — Overview

Router402 lets people use AI models like Claude and Gemini and pay only for what they use — tiny amounts, per message, with no subscription and no prepaid balance.

I designed the entire experience: the brand, the interface, and the motion. My job was to take something built on complex payment technology and make it feel as simple as any everyday app.

Role
Product Designer
(solo design)
Team
Engineering & blockchain
by the team
Year
2026
Type
Web app · Brand · Motion
03 — The Challenge

Make the blockchain invisible.

Paying with crypto usually feels intimidating: wallet pop-ups, gas fees, seed phrases, confirmation screens. For Router402 to feel like a real product, all of that had to disappear. The core design challenge was making it feel like sending a message — not making a transaction.

04 — A system from a single dot

The whole identity grows from one element: a dot. The “O” in the logo, the pixels in the 402 wordmark, the nodes in the interface, and the thousands of particles drifting across the background.

One motif, scaled from a single mark all the way up to a full-screen field — keeping everything feeling like one system.

Particle field — the dot at full scale
Logo
ROUTER logo
Color
#000000
#1D1DFF
#EDEDED
Type
Aa Gg
Space Grotesk — display
Aa 402
Space Mono — labels
05 — The Interface

The product is a calm, focused chat. You switch between AI models from a single dropdown, and everything about payment happens quietly in the background — no wallet pop-ups between messages. The interface stays simple so the technology underneath can be complex.

router402.xyz/app
Router402 chat interface
Model switcherSwap between AI models from one dropdown.
No pop-upsPayment stays quiet between messages.
Usage in AnalyticsEvery bit of spend, tracked in one place.
06 — Motion

Motion carries the brand. I built the animations in p5.js: a dot-matrix wordmark that flickers at its edges, a terminal that types itself, and a field of particles that flows like a current. They aren't decoration — they're the identity in motion.

Wordmark — edge strobe
Terminal — typewriter