Eco Route — Recommended
Transit 6 + walk 3 + e-scooter 3 (last mile) · transfers: 1
24MIN
🌿 Lowest FootprintSelected ✓
Toronto // Live Match-Day Operations
Toronto — Match-Day Mobility Command
Real-time congestion around BMO Field and the city's eco-transport response. Simulated match-day data refreshes every 5 seconds.
CO₂ Saved Today 🌱
0.00 t
▲ +12.4% vs Match 12 vs all-car baseline
modeled · upper-bound case
Transit Adoption 🚌
0%
of fans on green modes
scenario assumption
Active Eco-Fans ⚡
0
modeled
Congestion Index 🚦
0.0 /10
Heavy near Gate C
modeled
Congestion 7.2 · synced 4s
Heavy
Moderate
Clear
Transit
Shuttle
Bikes
Fan zone
Fan Journey // Low-Carbon Routing
Get to the match, minus the footprint.
Eco-routing engine compares every green option against driving — time, fare, and CO₂ included.
Trip Setup
MATCH DAY · JUN 18Why go green?
THIS FIXTURE🚗 One car trip to the stadium ≈ +4.2 kg CO₂ + parking risk.
🚇 The eco-route avoids 1.8 kg CO₂e vs driving per fan (modeled).
🎟️ Green-mode fans earn 2× Fan Points redeemable at fan zones.
Fast Express Shuttle
Dedicated match-day bus ES-4 · non-stop
20MIN
⚡ Fastest Green OptionView details →
Standard Drive / Rideshare
Via Gardiner Expy · includes parking queue
45MIN
⚠️ High Delay RiskView details →
Route details
Digital Fan Pass
One QR for transit + shuttle + docks. Scan at any gate.
Times include security gate wait at the selected match-clock state. Timeline is illustrative; segment durations are scenario parameters, not timetable values. Eco fare = bundled illustrative fare (~PRESTO base + nominal last-mile allowance), not itemized micromobility pricing. Eco Route is recommended for lowest cost and largest avoided CO₂e; the shuttle is faster but costs ~43% more and avoids 0.7 kg less.
Deliverable // Developer-Ready Spec
EcoMove Design System v1.0
Dark-first, high-contrast tokens for night-match readability. Click any swatch to copy its hex.
01 Color Tokens
Deep navy canvas, emerald for impact, cyan for interaction, violet for AI/shuttle layers, red–amber–green for traffic semantics.
02 Type Scale
Plus Jakarta Sans for display & headers · Inter for body · JetBrains Mono for live data readouts.
Move fans green.
Display / Hero
Plus Jakarta Sans · 800
44px · lh 1.1 · ls −0.03em
City Mobility Command
H1
Plus Jakarta Sans · 700
26px · lh 1.2
Gate Access — Live
H2 / Panel title
Plus Jakarta Sans · 700 · 18px
LIVE METRICS · UPDATED 4S AGO
Label / Kicker
JetBrains Mono · 600 · 12px
uppercase · ls 0.2em
Fans choosing transit rose 12% over the last fixture.
Body
Inter · 400 · 15px · lh 1.6
3.42 t ▲
Data readout
JetBrains Mono · 700 · tabular numerals
03 Component Library
States included: default · hover · selected · disabled. All components are token-driven.
Buttons
Status chips & badges
ClearModerateHeavy
🌿 Lowest Footprint⚡ Fastest Green
LIVE
Toggle switch
Input
Stat tile
CO₂ Saved
3.42 t
▲ +12.4%
04 Foundations — Spacing · Radius · Motion
4
8
12
16
24
32
| Token | Value | Usage |
|---|---|---|
| --r-s | 8px | buttons, inputs |
| --r-m | 12px | chips rows, QR card |
| --r-l | 18px | panels, cards |
| pill | 999px | badges, toggles |
| Motion | Spec | Usage |
|---|---|---|
| micro | 150ms · ease-out | hover, chips |
| state | 300ms · cubic(.2,.7,.2,1) | toggles, selects |
| scene | 500–700ms · same curve | view entry, reveals |
| ambient | 2.6–12s loop | LIVE pulse, map flow |
05 Handoff Tokens for React
:root {
--bg: #0B0E14; --surface: #101624; --line: rgba(148,163,184,.14);
--eco: #10B981; --transit: #06B6D4; --ai: #8B5CF6;
--heavy: #EF4444; --moderate: #F59E0B; --clear: #10B981;
--ink: #E8EDF6; --muted: #8B96AB;
--font-display: 'Plus Jakarta Sans'; --font-body: 'Inter'; --font-mono: 'JetBrains Mono';
}
Breakpoints: mobile < 640px (stacked) · tablet 640–1120px (map above sidebar) · desktop ≥ 1120px (map + 348px rail). Grid: 12-col, 24px gutters, max-width 1440px. Map min-height 520px.