KO
Verified
ABC-123-XY
Phase 0 · Awaiting Approval
TripLink Design System
One unified design language for Passenger, Driver, and Operations — built for trust, safety, and clarity before any feature development begins.
00
Cover & Design Principles
Every subsequent phase consumes this system. Priority: Usability → Trust → Safety → Clarity → Accessibility → Consistency → Scalability → Visual polish.
Approval gate
STOP after Phase 0. Do not begin Phase 1 — Registration & Identity Verification — until this design system is reviewed and approved.
Full documentation lives in design-system/docs/ and README.md.
Trust FirstIdentity, verification, payment, booking and safety must communicate trust clearly.
Safety Is VisibleSafety actions stay discoverable during active trips — never buried in settings.
Simple By DefaultComplex operational processes become simple, understandable steps.
Mobile FirstPassenger and Driver experiences are designed for on-the-move use.
Operations FirstAdmin prioritises visibility, alerts, verification, safety, payments and decisions.
Progressive DisclosureShow the most important information first; reveal secondary detail on demand.
State DrivenDesign every feature around its full lifecycle including exceptional states.
Accessible By DesignWCAG 2.2 AA is built into components from the start.
01
Foundations
Color, type, space, radius, and elevation. Brand purple is used strategically — never flooded.
Brand — Deep TripLink Purple
Accent — TripLink Orange
Semantic
Typography — Inter
Find a Travel Buddy
Trip details
Lagos → Abuja
Your payment is held in escrow until the trip is completed.
Verified drivers. Shared seats. Safer intercity travel.
Cancellation free until 12 hours before departure
₦12,500
Digital trip pass
Spacing — 8px base
4
8
12
16
24
32
40
48
64
Radius (restrained)
xs 4
sm 6
md 8
lg 12
xl 16
2xl 20
Elevation
xs
sm
md
lg
xl
02
Design Tokens
Runtime CSS variables in tokens.css; machine-readable source in tokens.json. Never invent arbitrary values.
| Category | Prefix / examples | Use |
|---|---|---|
| Color | --tl-purple-*, --tl-color-primary | Brand, semantic, aliases |
| Type | --tl-text-h1, --tl-fw-semibold | Hierarchy & buttons |
| Space | --tl-space-1 … --tl-space-8 | Layout rhythm |
| Motion | --tl-duration-fast, --tl-ease-standard | Purposeful, reduced-motion aware |
| Z-index | --tl-z-safety, --tl-z-sos | Safety above chrome |
| Map | --tl-map-marker-*, route widths | Consistent map language |
Business state colors
Pending
Verified
Rejected
In Progress
Awaiting Action
Under Review
Completed
Suspended
Cancelled
Failed
Expired
03
Components
Reusable building blocks first. Interactive components support default, hover, focus, pressed, selected, disabled, loading, success, and error.
Buttons
Inputs
We’ll send a one-time code
Enter a valid email address
Password strength: Strong
OTP
Selection & controls
Badges, avatars, alerts
Verified
Escrow released
Held in escrow
SOS
In progress
Identity verified
AO
JB
A
B
+3
Escrow protection
Your fare is held securely and released after trip completion.Product components
Published
Fri 12 Sep · 08:00
Ikeja, Lagos
Garki, Abuja
Seat selector
D DriverTakenSelectedAvailable
Seat fare₦12,000
Service fee₦500
Total₦12,500
Held in escrow until arrival is confirmed.
04
Passenger App
Mobile-first. Primary action: Find a Travel Buddy. Nav: Home · Trips · Messages · Activity · Profile.
Home · Travel Buddy
TripLink
Where are you travelling?
Suggested matches
Verified driver
08:00
Lagos → Abuja
Digital Trip Pass
Trip Pass
TripLink · Digital Pass
Lagos → Abuja
Show QR or OTP at pickup
482193
Escrow held
₦12,500
Released after arrival confirmation.
05
Driver App
Mobile-first. Primary action: Create Trip. Nav: Home · Trips · Requests · Messages · Profile.
Requests
Requests
TA
Awaiting
NE
Approved
Verification status
Verification
Under review
We’re reviewing your identity, vehicle and screening. This usually takes 24–48 hours.
- ✓ Phone verified
- ✓ Identity documents
- … Vehicle inspection
- ○ Background screening
06
Safety & Live Trip
SOS is highly discoverable, requires intentional activation, and severity is never color-only.
Live map language
42 min
ETA Abuja
Driver
Passenger
Pickup
Destination
SOS control (press & hold demo)
Press and hold to arm SOS
Confirm emergency alert?
TripLink Safety and your emergency contacts will be notified with live location.
Severity levels (label + color + icon)
ℹ Informational
Trip share active
Two contacts can view your live journey.
⚠ Warning
Minor route change
Driver adjusted for traffic. Still on planned corridor.
⬆ High priority
Speed threshold exceeded
Ops notified. Passenger can report unsafe behaviour.
◼ Critical
SOS activated
Immediate response required. Live location streaming.
Route deviation — Vehicle left planned corridor. Pattern uses dashed red route + alert + label.
Safety panel (active trip)
Trip in progress · Safety on
07
Payments & Booking
Escrow must never be ambiguous. Always explain hold → release → refund states in plain language.
Fare₦12,000
Service fee₦500
Pay now₦12,500
● Held in escrow
₦12,500
Funds are protected until pickup verification and arrival confirmation complete.
✓ Escrow released
₦12,500
Released to driver after trip completion.
↩ Refunded
₦12,500
Returned to original payment method. Processing 1–3 business days.
Trip lifecycle timeline
Booked & paid
Pickup verified
Live journey
Arrival confirmed
Rated
08
Admin Operations
Desktop-first sidebar: Overview · Operations · People · Verification · Safety · Finance · Trust · Analytics · System.
09
Responsive Variants
Mobile highest priority for apps. Desktop highest for Admin. Breakpoints: 480 · 768 · 1024 · 1280 · 1440.
| Surface | Priority | Patterns |
|---|---|---|
| Passenger / Driver | Mobile highest | Bottom nav, bottom sheets, 44px targets, safe-area, one-handed SOS |
| Tablet | Adaptive | Flexible cards, expanded maps, 8-column grid |
| Admin | Desktop highest | Sidebar, dense tables, filters, multi-column dashboards, ops maps |
10
Empty, Loading & Error States
No major feature ships without these states defined.
⌕
No travel buddies yet
Try different dates or nearby cities. New trips are published throughout the day.
!
Payment failed
We couldn’t charge your method. Your booking is not confirmed. No escrow hold was created.
✓
Booking confirmed
Your Digital Trip Pass is ready. Fare is held in escrow until arrival.
11
Prototype Standards
Clickable flows must consume system components. See design-system/docs/09-prototypes.md.
| Flow | Surface | Key states |
|---|---|---|
| Passenger registration → verification | Passenger | OTP, pending, approved, rejected |
| Find Travel Buddy → book → pay → pass | Passenger | Empty matches, escrow held, payment fail |
| Pickup QR/OTP → live trip → SOS → arrival | Both | Mismatch, deviation, SOS confirm |
| Driver create trip → request approval → execute | Driver | Draft, published, awaiting, completed |
| Admin verification · live monitor · safety alert | Admin | Queue, critical, resolve, escalate |
12
Developer Handoff
Engineers implement against tokens and tl-* components — not one-off screen styles.
00 PrinciplesDesign principles & brand
01 FoundationsColor, type, space, grid
02 TokensCSS & JSON consumption
03 ComponentsFull inventory & states
04 NavigationPassenger, Driver, Admin IA
05 UX PatternsAuth through ratings
06 Safety & MapsSOS, severity, markers
07 A11y & ResponsiveWCAG 2.2 AA rules
08 ScreensFull screen lists by role
09 Prototypes20 required flows
12 HandoffDoD, gates, token requests
Quality controlPre-approval checklist
Phase 0 complete — awaiting approval
Next: Phase 1 — Registration & Identity Verification, only after explicit approval of this design system.