Matveyan — Senior Product Designer for Fintech, Trading & Design Systems
Bento Grid
← All examples
“A city transit authority: network map, wayfinding, live service status.”
The agent invented Northline - A city transit authority: four lines, sixty-one stations, one flat fare.
- pure + inspo
- dark mode
- 1+ MCP calls · 2 sites studied
- 8.6 / 10
The map obeys one rule that most generated diagrams break: lines only ever meet at a marked interchange, so no colour is drawn on top of another. Two horizontals, two verticals and a single dogleg produce four ringed interchanges, eight named termini with proper cap bars, and tick marks for intermediate stops. The fares section says zones were removed in 2023, that it cost revenue, and that it paid for itself in eleven months.
Matveyan — Senior Product Designer for Fintech, Trading & Design Systems - The more useful of the two returned exemplars: a designer's own dark page built around coolly precise data visualisation. Its discipline of letting one diagram carry the fold, on a neutral charcoal so the data colours read cleanly, is the composition this page uses.
Campaign Monitor: Email Marketing Platform & Services - The other returned exemplar. A cool geometric dark SaaS page; contributed the raised-panel treatment for the map frame and the live-status row rhythm, but nothing about transit.
recommenda city transit authority: network map, wayfinding, live service status (mode: dark)
Returned a Bento Grid pick and two SaaS exemplars. Recorded honestly: the archive has no transit authority in it, so the useful output was compositional (one diagram carrying a dark fold, raised panels, status rows) and the map convention itself came from the domain rather than from a reference.
--slate#14161aNeutral charcoal, chosen deliberately over the navy and green darks elsewhere in this gallery: four line colours have to read as data, and a tinted ground would bias them.--red#e4483dThe spine line, and the bar through the roundel.--blue#3a86d6The north-south line through Cathedral and Old Foundry.--green#3fae6eThe second vertical, and the live-status pulse dot.--yellow#e8b93cThe southern link, and the one colour also used for a warning: minor delays on that line show in the same yellow.--chalk#eef1f5Off-white for station ticks, interchange rings and headline type.