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
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.
Collect the real network
We begin with official operator and government datasets, with sources and licences recorded.
Freeze a city world
A versioned, immutable world keeps every game fair, reproducible and attributable.
Design the mechanic
Each game asks a genuinely different question of the same stations, lines and connections.
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.
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.