Marvin

Brand identity and product design for Marvin, a drone fleet-management concept: the mark, color, type, workspace and landing page, as working code.

Client: Self-initiated concept
Role: Brand identity, product UI and landing page
Tools: Claude Code · Codex
Year: 2026
Status: Concept
Live product: marvin.hi-3b5.workers.dev ↗

Marvin keeps track of what happens between drone flights: aircraft, batteries, pilots and service. I designed its brand, its workspace and its landing page as one piece and built them as working code with Claude Code and Codex. Marvin is a self-initiated concept, and all its data is synthetic.

The landing page hero, recorded from the live site. The head turns to follow the fleet in orbit, and one orange diamond marks an aircraft that needs attention. All aircraft, pilots and records are synthetic.

Named after a robot who does the dull work

Most of a drone program’s work happens on the ground: service, batteries, records of who flew what. Douglas Adams’s depressed robot suits that work. I kept his dry humor for the landing page and kept the product plain.

A head in one color

A disc split by a brow line, with two triangular eyes notched below it. The gaps are empty, so the mark works in one color on any ground, from the lockup down to a 16 px browser tab.

I set the wordmark in Cal Sans as outlines and opened it up so no letters touch at 20 px.

Built on circles and thirds: the halves mirror and the eye corners sit on the thirds of the width.

The mark at four sizes, from large to browser-tab size — One mark at every size, down to 16 px.

The mark in black on an orange badge — On orange only as the fault badge.

Black, white and one orange

Black is every ground and white carries the words. Answer Orange is the only accent. Five steps of light, teal to yellow, shade the pictures and mean nothing. A state is always a color, a shape and a word, so no state depends on color alone.

About how much of a brand plate each color takes: black 70, light 13, orange 12, white 5.

Four typefaces, each with a job

Geist carries the product. Geist Mono sets anything you could look up: an aircraft, a battery, a flight. Cal Sans is kept for the logotype and section titles, and Jost Black for DON’T PANIC.

Type specimens, each labeled with its face and job: DON’T PANIC in orange Jost Black, a title in Cal Sans, a reading line in Geist and aircraft, battery and flight numbers in Geist Mono

Pictures drawn the way a drone sees

Every picture is square points lit from the top left. Size and shade follow the same light. Orange stays out of the shading, so it keeps meaning attention.

The head as a lidar scan. It always looks down and away.

The product keeps the brand quiet

Marvin’s workspace is for fleet managers: which aircraft can fly, who flew them and what needs service next. It keeps the black ground, white text and Geist, and adds two state colors with shapes, white brackets for selection and no pictures.

Marvin’s fleet overview: a plan of Warehouse 1 with aircraft markers, two with yellow service triangles, one in flight on a dashed route, and a Needs attention list on the right — Overview. Yellow triangles mark service due; DR-01 is out on a roof check.

Marvin’s overview with DR-08 selected: white brackets around it on the Warehouse 2 plan, an orange Unavailable diamond, and a drawing of the aircraft with its battery in orange — DR-08 selected. White brackets on the plan, an orange diamond for Unavailable, the damaged battery in orange on the drawing.

Marvin’s fleet list: eight aircraft with availability, base, battery and flight time, beside the open events — Fleet. Every aircraft with its availability, base and battery.

Marvin’s flight records: each flight with its aircraft, pilot, duration, outcome and summary status — Flights. Each flight tied to its aircraft and pilot.

The landing page is where the brand speaks

DON’T PANIC is the only large orange on it. The pictures move there: the head follows the fleet, a battery is checked step by step, a drone scans a site into color. Every section points back to the working product.

Open the live product

The service section. A drone’s battery shows in orange while the checklist beside it is worked through step by step.

A section of the landing page: See what’s due, plan what’s next, with a maintenance form over the fleet dashboard — “See what’s due, plan what’s next” puts a maintenance form over the fleet dashboard.

“Every site, one clear picture.” A drone scans a gray point-cloud site into color while the site turns.

A section of the landing page: Built for the work between flights, with three isometric drawings answering which aircraft can fly, who flew it and what changes when you save — “Built for the work between flights” answers three questions with isometric drawings: which aircraft can fly, who flew it and what changes when you save.

The end of the landing page: DON’T PANIC in orange, the line Drone fleet management. Because someone has to., an Open Marvin button and the head drawn in white points — The closing brings DON’T PANIC back above the button that opens the product. On the site the head follows the pointer; here it looks down and away, as the brand draws it.

Closing notes

Marvin is a self-initiated concept. Every aircraft, pilot and record is synthetic, and the choices came from my design reviews, not from user research.

The name, DON’T PANIC and the color names come from Douglas Adams’s The Hitchhiker’s Guide to the Galaxy, as homage; the head nods to Marvin in the 2005 film. The project is not affiliated with or endorsed by the rights holders. Cal Sans, Geist, Geist Mono and Jost are used under the SIL Open Font License.

Closing notes

Marvin is a self-initiated concept. Every aircraft, pilot and record is synthetic, and the choices came from my design reviews, not from user research.