passer.app
The brief
A bus app with no brand yet.
Client
A startup from Costa Rica. An app to track the bus in real time, with digital fare payment.
Problem
They were starting from zero. No logo, no color, no typography. Without that they couldn’t design the app or present the product.
Delivery
Logo, symbol, palette, typography, interface components, social media templates. All gathered in an online brand manual.
01 — Concept
Your city, one tap away.
Passer connects every rider with their bus in real time. The name comes from pasar: Spanish for “to pass,” the constant flow of people moving through the city. The symbol, a P drawn in one continuous stroke, traces that journey: a route that leaves, turns, arrives. Friendly, fast, reliable.
02 — The symbol
One icon, a whole system.
The symbol is the Passer P resolved as an app icon: the upper bowl suggests a stop, a turn in the route, a point on the map. It works in solid, in gradient, in monochrome, always recognizable on the home screen.
App
Solid
Accent
Dark
Light
Mono
03 — Construction
Geometry of the symbol.
The P is built on a modular grid: the bowl rests on a circle, the stem on vertical axes. Constant proportions that hold legibility from a 16px favicon to a billboard. The clear space equals the x-height.
04 — Logotype
05 — Palette
Color palette
Primary color
Purple
#5F1B87
Magenta
#CC0D5A
Dark
#2E2E2E
Light
#F7F7F7
Paper
#FFFFFF
06 — Typography
Aa
Roboto Condensed
Headlines · Interface
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz 1234567890
Move in real time.
Aa
Ubuntu
Body · Paragraphs
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz 1234567890
Your bus, always in sight.
07 — Applications
The brand in the app.
The system applied to the real experience: search for a route, follow the bus live, board with the digital ticket. Color, typography and iconography working together on screen.
9:41
Hi, Ana
Where to today?
From
My location
To
North Terminal
HomeWorkRecent
Next departures
Route 42
Downtown → North
Route 18
South → Downtown
Route 7
East → Terminal
9:41
Av. Libertador · 12 stops
Route 42 · On the way
Your stop: Av. Libertador
4
min
DowntownPlazaYouNorth
9:41
Digital ticket
Downtown
08:30
North
09:05
PSR · 42 · 8F3K9
Urban transit app
hola@passer.app · passer.app
+58 424 000 0000
+58 424 000 0000
Buses · Routes · Tickets
Iconography
08 — UI Kit
Base elements.
Core components of the Passer interface: buttons, fields, chips, switches, badges.
Buttons
Find busesSee routesCancel
Fields
From
My location
To
North Terminal
Chips
HomeWorkRecent
Switches
Badges
LiveNew4 min
Progress
09 — Social media
The brand on social.
A template system for the feed: logo, gradient, condensed type, short messages. One voice in every piece.
Passer
Your bus,
in real
time.
in real
time.
passer.app
Arrive
on time,
always.
on time,
always.
Moving
is the city.
is the city.
Thank you
Design by dequisna · dequisna.uno