Colors
Magenta = identity moments · Blue = workhorse actions
Brand — primary
Base
E5007E
Hover
C70070
Press
A30060
Soft
FDE6F2
Brand — secondary
Base
5669FF
Hover
4055EB
Press
3445D1
Soft
E8EBFF
Neutrals
fg-1
15161A
fg-2
4A4D55
fg-3
6B6E76
fg-4
767A82
Canvas
F7F6F4
Border
D9D7D1
Semantic
Success
1F7A4E
Warning
C2410C
Danger
B91C1C
Info
1D4ED8
Transport modes
Train
1D4ED8
Bus
007A66
Tram
C8146B
Bike
B8580B
Car
5B3FA8
P+R
36505C
Typography
Manrope for UI · IBM Plex Mono for line codes
Display
32/38
Where to?
Title 1
26/32
Trip planner
Title 3
18/24
Saved journeys
Body
16/24
Verified successfully.
Caption
13/18
Resend code in 0:20
Micro
11/14
Step free
Route / mono
15/20
RE11 · T1 · CFL
Spacing, radii & elevation
4px base grid · 3-step shadow ladder
Spacing
Radii
sm·8
lg·16
2xl·28
Elevation
sh-1
sh-2
sh-3
Navigation
4 destinations max · magenta marks the active tab
Plan
Departures
Lines
Account
Cards & status pills
No left-border accents — status is icon + tint
Card / tone
Home → Kirchberg
RE11 · 24 min · Step free
Fewer transfers
Filter applied
RE11 delayed 6 min
Updated 09:41
Pill / tone
On time
Delayed
Cancelled
Step free
Route card
52 min
14:47 – 15:39
7
›
11
›
22
Step free
Not too crowded
Journey timeline
Wasserbillig, Gare · Plat. 2
14:54 · RE11
Luxembourg, Gare Centrale
15:23 · arrival
Fields & segmented
Sunken fields for search
Field / states
Enter starting point…
Luxembourg Gare Centrale
Segmented control
Depart
Arrive
Mode chips
Carry icon + label, never color alone
Mode chip / states
Train
Bus
Tram
Bike
Line badges & mode tiles
IBM Plex Mono, tabular, per-mode color
Line badge / mode
RE11
T1
C1
Mode tile / mode
Buttons
Pill-shaped · filled for primary, tonal for secondary
Button / variants
Plan a trip
Sign in
Save journey
Choose on map
Cancel
Disabled