Every city hides a game.
This is how we turn the visual language of metro maps into a growing collection of short city games. A living guide to our identity, voice, colour, type and product craft.
Identity
Colour
Typography
Game worlds
How we made it
Working with AI
A collection, not a single game.
The identity starts with the same tension as a metro map: strict structure, immediate recognition and enough colour to make a complex place feel inviting.
Colour behaves like a line.
Six saturated inks form one fixed editorial spectrum. They organise the collection like a diagram without ever replacing the official colours of a real transport line.
Network blue
Explorer and orientation
#0065BDSignal blue
Signal Hunt and detection
#00ADD0Station magenta
Name the Station
#DA39AFConnection orange
Last Connection and urgency
#FF6319Progress yellow
Network Cascade and progression
#F0AB00Play green
Drop and placement
#00AF3F
Colour tells you where you are in the product. Ink tells you what to do. Official operator colours remain untouched whenever the interface represents a real line.
One voice, several speeds.
One grotesque family carries both editorial headlines and practical interface copy. A mono face appears only when a value is truly data.
Aa 東京
Follow the lines. Catch the last train.
08:42
Each mechanic gets a line.
The master brand stays constant while each game owns one editorial accent and one specific verb. Colour creates recognition; the mechanic creates the personality.
Explorer
Read the true map behind every challenge.
Name the Station
Recognise the hidden station from the network around it.
Drop
Place a station from its name and the lines that serve it.
Last Connection
Trace a viable route before the last train leaves.
Signal Hunt
Follow sparse signals until the right station emerges.
Network Cascade
Watch one disruption ripple through the network.
One map. Many games.
The interface is the last stop in a longer route. Official data becomes a frozen city world, that world feeds several mechanics, and each mechanic reveals a different way to read the same network.
- 01
Collect the real network
We begin with official operator and government datasets, with sources and licences recorded.
- 02
Freeze a city world
A versioned, immutable world keeps every game fair, reproducible and attributable.
- 03
Design the mechanic
Each game asks a genuinely different question of the same stations, lines and connections.
- 04
Return to the city
Maps, city pages and station stories make every answer feel connected to a real place.
Built as one connected system
A type-safe stack keeps the route from source data to screen explicit. The technology stays quiet so the city and the mechanic can do the talking.
- TanStack Start
- SSR, routing and the React product surface.
- PostgreSQL + Drizzle
- Versioned worlds and durable game state.
- oRPC + TanStack Query
- One typed contract from server procedure to interface.
- MapLibre GL
- Real networks rendered as responsive, interactive maps.
We code with AI. We never vibecode.
AI sits in the workshop with us: it drafts, refactors and double-checks. What it produces is still engineering work. Written intent comes first, then a typed contract, then a person reading every line before it merges.
- 01
Intent before prompt
A feature starts as written intent: data source, states, edge cases. The first prompt comes after that.
- 02
Types are the referee
Strict TypeScript, Zod at every boundary and one typed contract from server procedure to screen. A wrong guess fails to compile.
- 03
Every diff is read
A human review, the check suite, a passing build and the acceptance tests. Four gates, no exceptions.
- 04
The city is never generated
Models help us build the tools. Stations, lines and timetables come from official operator data, with sources and licences recorded.
Prompt until the screen looks right.
Write the intent, then prompt against it.
Ship code nobody has read.
Read every diff before it merges.
Let the model fill in the missing data.
Bind every value to an official source.
Patch symptoms until the error goes quiet.
Fix the cause, then keep the check that caught it.
- 01
Define the problem
People investigate the problem, speak with the people concerned and write a PRD: the outcome, constraints, risks and definition of done.
- 02
Design the solution
People turn the PRD into product and UX choices, acceptance criteria, data contracts and an architecture that can be challenged before code exists.
- 03
Use AI as an instrument
Claude Code and Codex help explore the codebase, implement contained tasks, suggest refactors, document options and surface checks. Their output remains a proposal in a working branch.
- 04
Verify and decide
People review the diff, run the checks, test the experience with real product judgement, validate it against the PRD and decide whether to release.
Claude Code and Codex are implementation tools, not authors of the product. People do the research, define the direction, curate the data, make the product and UX choices, judge trade-offs, test the experience and decide whether it is ready for players.
AI raises our pace, not our tolerance for guesswork. Nothing reaches a player because a model sounded confident.
Now take the network for a spin.
The guide is only useful if the product feels like it. Follow a line, read the city, and see the system in motion.