Color Tokens
All CSS custom properties. Toggle the theme switch above to compare light & dark values.
Backgrounds & Surfaces
--bg
--surface
--surface-alt
Text
--text
--text-secondary
--text-muted
Borders
--border
--border-strong
Primary
--primary
--primary-hover
--primary-tint
--primary-tint-strong
Semantic
--destructive
--destructive-tint
--success
--success-hover
Navigation
--nip-bg
--nav-blue
Typography
Inter font family. Weights: 400 (Regular), 500 (Medium), 600 (Semi-bold), 700 (Bold).
Maneuver Distance
ETA Arrival Time
Panel Title
Location Name
Body Text Medium
Button Label / Stat
Section Title
Label / Caption
Spacing
--space-0 (0px)
--space-50 (1px)
--space-100 (2px)
--space-200 (4px)
--space-300 (8px)
--space-400 (12px)
--space-500 (16px)
--space-600 (20px)
--space-700 (24px)
--space-800 (32px)
Border Radius
--radius-0 (0px)
--radius-100 (2px)
--radius-200 (4px)
--radius-300 (8px)
--radius-400 (12px)
--radius-500 (16px)
--radius-600 (20px)
--radius-700 (24px)
--radius-800 (32px)
--radius-full (9999px)
Shadows
Subtle
0 1px 2px rgba(0,0,0,0.05)
Default
0 4px 6px -1px rgba(0,0,0,0.1)
Elevated
0 4px 12px rgba(0,0,0,0.15)
Dark Overlay
0 4px 12px rgba(0,0,0,0.3)
Components
Buttons
Toggle Switches
Traffic Flow
Traffic Incidents
Radio Groups (Segmented)
Inputs
Badges
Fastest
Connected
Error
Maneuver Icons In Use
Continue / Straight
Bear Left / Keep Left
Bear Right / Keep Right
Turn Left
Turn Right
Sharp Left
Sharp Right
U-turn
Merge Left
Merge Right
Roundabout Around (Go Back)
Roundabout Across (Straight)
Roundabout Left Exit
Roundabout Right Exit
Exit Motorway Left
Exit Motorway Right
Route Cards
Via A10
Fastest
14:32
23 min
42 km
Via N201
14:45
36 min
38 km
Search Result Items
Amsterdam Centraal
Stationsplein 15, 1012 AB Amsterdam
Amsterdam Arena
ArenA Boulevard 1, 1101 AX Amsterdam
Map Markers
SVG icons placed on the map. Source files live in public/map-icons/ — edit the SVG file to update the icon everywhere.
/map-icons/destination-flag.svg
Panels
Navigation & UI panels rendered statically for reference.
Next Instruction Panel
Exit Shields Figma reference ↗
Style is auto-detected from destination coordinates. Berlin/Amsterdam → EU · London → UK · New York → US
EU — right / left exit
22
22
US / Canada — right / left exit
UK — number only
ETA Panel
Search Panel
Results
Amsterdam Centraal
Stationsplein 15, 1012 AB Amsterdam
Amsterdam Arena
ArenA Boulevard 1, 1101 AX Amsterdam
Location Panel
Amsterdam Centraal
Stationsplein 15, 1012 AB Amsterdam
+31 20 123 4567
Route Panel
To Amsterdam Centraal
Via A10
Fastest
14:32
23 min
42 km
Via N201
14:45
36 min
38 km