Lisbon Tram Atlas
Published your app
  • Make the route list readable on narrow screens
  • Keep every card in a row the same height
  • Switch the display face to a grotesque
3 days ago
17 actions

I reworked the route cards and settled the type scale across the atlas.

What changed:

  • Typography: one grotesque across the interface, so headings and labels share a rhythm.
  • Card layout:
    • Padding loosened to p-5 so tap targets clear 44px on touch.
    • Every tram photo locked to a 16:10 crop.
    • flex-col h-full and items-stretch on the grid, so cards in a row match height.
  • Detail work: softened the shadow under the hero line and pulled the route badge in from the edge.

The atlas now reads cleanly at 320px and keeps its hierarchy on wide displays.

Snapshot saved 3 days ago
Ran for 47 seconds
Snapshot saved 22 hours ago
Published your app 9 minutes ago
Build, test, revise…
Watch deploys from anywhere — the Turnstone companion app is out on mobile.
Runtime
Elastic (4 vCPU / 8 GiB RAM / 3 max)  Manage  See all usage
Datastore
Production datastore connected  Manage

Your production datastore is live. The atlas can read and write visitor data with row-level rules applied.