GIIS Smart Campus — Design System & Product Design Documentation

01Research: 2025 Design System Trends

What the best design systems are doing right now

Before a single token was named, we surveyed the landscape. Design systems in 2025 are moving fast — away from rigid component libraries toward adaptive, semantic, emotionally-intelligent systems. Here's what shaped our approach.

🎨

Semantic Token Architecture

The shift from raw values (like #4A7A9B) to semantic tokens (--color-status-safe) means components carry intent, not just style. Multi-brand theming becomes a config change, not a rebuild.

Applied ✓

📱

Mobile-First with Progressive Density

Rather than shrinking desktop UIs, leading systems (Material 3, Apple HIG 2025) start from touch-native patterns and add information density as screens grow. Minimum 44px touch targets are non-negotiable.

Applied ✓

♿

Accessibility as Foundation

WCAG 2.2 and APCA contrast methods are now baked into token generation, not audited afterward. The best systems (IBM Carbon, Adobe Spectrum) treat accessible colour ratios as input constraints.

Applied ✓

🤖

AI-Assisted Microcopy Variants

Systems now encode multiple copy variants — calm, urgent, empathetic — as component properties. The notification component isn't just a template; it has voice/tone tokens too.

Applied ✓

🌙

Light/Dark as a First-Class Feature

Dark mode is no longer an afterthought. In 2025, the Figma Variables API means dual-mode tokens are live in component properties. We spec both modes for every component from Day 1.

Planned Q3

⚡

Motion as Communication

Beyond aesthetics, animation encodes system state. A status card that gently pulses communicates "live and monitoring" without a badge. Framer and Lottie patterns are now embedded in handoff specs.

Applied ✓

02User Personas

Three real people. Three completely different Tuesdays.

These aren't demographic buckets. They're portraits of emotional reality. Every design decision in this system passes through a simple filter: would this make Priya less anxious? Would Arjun actually tap this? Would Sarah trust this to run her morning without her?

"I just want to stop worrying. Give me proof she's safe and I'll love this service forever." — Priya Menon, primary persona

🧑‍👧

Primary · Parent

Priya Menon

Finance professional · Parent of Grade 5 student

Core Goals

Instant confirmation her daughter boarded safely
Proactive alerts — no hunting through the app
Easy route change without calling the school

Fears & Frustrations

Bus leaves without any communication
Silent notifications = immediate anxiety spiral
Paying premium school fees but feeling ignored

Accessibility Needs

One-handed use while on the MRT commuting
Notification latency above 2 mins destroys trust
High-contrast text for bright outdoor conditions

Urgency

Tech comfort

Tolerance for friction

"If I haven't heard anything by 8am, I'm already calling the school."

🎒

Secondary · Student

Arjun Sharma

Grade 9 student · GIIS Singapore Campus

Core Goals

Know bus ETA without opening the full app
Change pickup location for activities days
Not look stressed or confused in front of friends

Fears & Frustrations

Missing the bus and having to explain to parents
App that "looks like it was made for parents"
Too many taps to find basic information

Accessibility Needs

Thumb-reach optimised navigation — single hand
Quick glance widget for lock screen ETA
Dark mode for evening use after activities

Speed

Tech comfort

Aesthetic sensitivity

"The app is fine for my mum but it takes forever to find out if the bus is running late."

🗂️

Tertiary · Admin

Sarah Tan

Transport Coordinator · GIIS Admin Staff

Core Goals

Full visibility of all routes in one view
Respond to parent queries with real data
Reassign students without restarting the day

Fears & Frustrations

System errors with no explanation — can't answer parents
Live map inaccessible when she uses keyboard nav
Data that's 5 minutes stale during an active incident

Accessibility Needs

Full keyboard navigation — uses mouse rarely on desktop
Screen reader compatibility for incident reports
Scalable text up to 150% without layout breakage

Control

Speed

Error tolerance

"When something goes wrong, I need to know what happened, when, and what to tell the parents who are calling right now."

03Visual Style Guide

The language the product speaks

Every visual choice here was made for Priya first. Calm, trustworthy, clear. Not clinical — there's warmth here too. The palette draws from Singapore's coastal blues and morning light. The type says: we're professional, and we've thought this through.

Color System

60% cream base (calm, non-clinical), 30% white surfaces (clarity), 10% navy/blue accents (trust, authority). Maximum 3 hues + neutrals. Never pure black or white.

Primary — Trust Navy

Navy 950

#0D1B2A

--navy-950

Navy 900

#1A2D3F

--navy-900

Navy 800

#243D52

--navy-800

Navy 700

#2D5A7A

--navy-700

Blue 500

#4A7A9B

--blue-500

Blue 300

#8AAFCF

--blue-300

Blue 50

#EBF4FB

--blue-50

Neutral — Warm Cream

Charcoal 900

#1E1B18

--charcoal-900

Charcoal 800

#2D2926

--charcoal-800

Charcoal 300

#9A8F89

--charcoal-300

Cream 300

#EAE4DC

--cream-300

Cream 200

#F2EDE6

--cream-200

Cream 100

#FAF8F5

--cream-100

Semantic Status Colors

Each semantic meaning carries background, border, text, and icon variants — never just a single hex value. These map directly to the notification system that was redesigned to serve Priya's anxiety.

ℹ️

Info

Bus tracking live, route updates, schedule confirmations

✅

Safe / Boarded

Student confirmed on bus. Trust moment — most important state for Priya

⏱️

Delay

Running late, with specific ETA. Empathetic — never a system log

🚨

Alert / Action

Requires parent/admin action. Clear next step always present

WCAG Contrast Ratios

Aa

14.8:1

Navy 900 on White

AAA ✓

Aa

4.7:1

Blue 500 on White

AA ✓

Aa

16.1:1

Charcoal 800 on Cream

AAA ✓

Aa

3.2:1

Blue 500 on Blue-50

Large only

Aa

5.1:1

Green 500 on White

AA ✓

Aa

2.9:1

Muted text

Non-essential only

Typography System

Two typefaces: Lora (serif) for editorial headings and emotional moments — it carries warmth and authority. Inter (sans-serif) for all functional text, data, and UI labels — maximum legibility at small sizes. Scale uses 1.200 (Minor Third) ratio for balanced, SaaS-appropriate hierarchy.

Display · 39.8px
Lora 600 / -0.03em

Bus arriving

Hero screens, major status moments

H1 · 33.2px
Lora 600 / -0.025em

Ananya is on board

Page headings, section titles

H2 · 27.6px
Lora 600 / -0.02em

Today's Routes

Section headings, card titles

H3 · 23px
Inter 600 / -0.01em

Route 3B — East District

Card headings, modal titles

Body · 16px
Inter 400 / normal

Ananya's bus is running 18 minutes late today. We'll update you as soon as she boards at the Buona Vista stop.

All body copy, notifications

Small · 13.3px
Inter 500 / +0.01em

Last updated 3 minutes ago · Route 3B

Meta info, timestamps, helper text

Label · 11.1px
Inter 700 / +0.1em

Boarding Status

Section labels, badge text, table headers

Spacing System — 8pt Grid

All spacing values are multiples of 8px, with 4px for fine-tuning inside components. This creates unconscious visual rhythm that signals craft — even when users can't name what they're feeling.

--sp-14px

--sp-28px

--sp-312px

--sp-416px

--sp-524px

--sp-632px

--sp-748px

--sp-864px

--sp-996px

--sp-10128px

04Component Library

The building blocks — every state documented

Components aren't just design patterns. For this system, they're trust instruments. Every button that responds predictably, every notification that's readable at a glance, every error message that explains itself — all of these are moments of trust-building or trust-breaking.

Button

Interactive

Variant	Height	H.Padding	Font	Use Case
Primary · Large	48px	24px	`14px/600`	Primary screen action — one per section max
Primary · Medium	40px	20px	`14px/600`	Card-level actions, form submits
Primary · Small	32px	14px	`11px/600`	Table row actions, compact UI
Secondary	40px	20px	`14px/600`	Supporting action alongside primary
Ghost	40px	20px	`14px/600`	Tertiary actions, info links
Destructive	40px	20px	`14px/600`	Irreversible actions — always confirm

Form Inputs

Data Entry

Student Name

As registered on school records

Pickup Stop

Phone Number ✕

⚠ Please enter a valid Singapore mobile number

Property	Default	Focus	Error	Disabled
Height	40px	40px	40px	40px
Border	`1.5px #DDD5CA`	`1.5px #4A7A9B`	`1.5px #C0392B`	`1.5px #EAE4DC`
Shadow	none	`0 0 0 3px #EBF4FB`	`0 0 0 3px #FEECEC`	none
Label position	Top-aligned, 6px gap. Never placeholder-only.

Status Badges

Status

Boarded In Transit Delayed Alert Route Active 18 Students +12 min ETA

Badges always use both a colour AND a label — never colour alone. Dot variant includes a live status indicator. Height: 22px. Padding: 3px 10px. Radius: pill (999px). Font: 11px/700.

System Alerts

Feedback

✅

Ananya has boarded safely

Confirmed at Buona Vista stop, 7:48 AM. Route 3B — estimated school arrival 8:15 AM.

⏱️

Route 3B is running 18 minutes late today

Expected pickup at Buona Vista: 8:06 AM. We'll send you a confirmation when Ananya boards.

🚨

Route 3B — Bus breakdown at Queensway

A replacement bus has been dispatched. Please check the app for updated ETA. Contact admin: +65 6XXX XXXX.

Every alert has: icon (semantic, not decorative), bold title, human-readable description, and — for warnings/critical — a clear next action. Delay notifications were redesigned to speak to Priya, not at her. The old system said "Route 3B: ETA +18min." The new system says what she actually needs to hear.

Push Notification Card

Mobile · Critical

✅

Ananya is on the bus

7:48 AM · Just now

Safe

She boarded at Buona Vista and is on Route 3B. Estimated arrival at school: 8:15 AM.

⏱️

Route 3B running late

7:32 AM · 2 min ago

+18 min

Ananya's bus is running 18 minutes late today — we'll update you as soon as she boards.

The notification component is the most critical touchpoint in the entire system. The left accent bar communicates status instantly — before the user reads a word. The message speaks to the parent, not the system. The action button is always 44px min height for reliable one-thumb tapping.

05Wireframes & Hi-Fi Mockups

What Priya, Arjun, and Sarah actually see

Wireframes were validated against each persona's scenario before any visual polish was applied. The question wasn't "does this follow the pattern?" — it was "would Priya feel calm after seeing this screen at 7:30am?"

Parent App — Home Screen (Priya) iOS · Mobile

7:48 AM ●●● ▲

🚌 Refreshing route…

Boarding Status

✅ Ananya is Safe

Boarded at Buona Vista · 7:48 AM

ETA School 8:15 AM →

🗺️

Live Track

Route 3B

⏱️

Arrival

8:15 AM

Recent Activity

Ananya boarded at Buona Vista stop

7:48 AM today

🏠

Home

🗺️

Track

🔔

Alerts

👤

Profile

Admin Dashboard — Fleet Overview (Sarah) Web · Desktop

12

Routes Active

587

Students Tracked

2

Delays

0

Alerts

Live Map ☁ Rain Alert

🗺️ Interactive Fleet Map
(Canvas with text fallback for keyboard nav)

Fleet Status

Route 3B · 18 students · Queensway

On Time

Route 7A · 22 students · Clementi

+18 min

Route 5D · 19 students · Jurong

⚠ Rain Risk

Route 2C · 15 students · Bishan

On Time

👻 Ghost Replay — Route 7A

🚌

7:00 AM7:207:40 AM ◀ now

06Accessibility Audit & Standards

WCAG 2.1 AA — all 8 findings resolved

Accessibility wasn't audited at the end. It was built in from the token level. The 8 findings from the original audit were prioritised by human impact — not technical severity. Safety and trust issues shipped first, polish last.

07Design Process

How we got here — six stages, one north star

The north star was always the same: "Does this make Priya less anxious?" That question filtered every decision from user research to the icon stroke weight.

Jul 2022
Weeks 1–3

UCDC Analysis + User Research

Ran a full User-Centered Design Canvas analysis with stakeholders. Conducted 12 interviews across parent, student, and admin segments. Identified the emotional truth that would drive all design decisions: this wasn't a logistics product — it was an anxiety-management product.

Phase 1 Field Research UCDC Workshop Affinity Mapping

Aug 2022
Weeks 4–6

Persona Development

Built Priya, Arjun, and Sarah as complete portraits — including accessibility dimensions, emotional states at each touchpoint, and the fears they carry into every interaction. Not demographics. Not user types. Real people with real Tuesday mornings.

Phase 1 3 Full Personas Journey Mapping

Sep 2022
Weeks 7–9

Accessibility Audit + WCAG 2.1 AA

Full audit across all three user contexts. 8 findings identified and categorised by human impact (not just technical severity). Critical: notification default settings. Important: live map keyboard inaccessibility. Polish: notification microcopy tone.

Phase 2 WCAG 2.1 AA 8 Findings

Oct 2022
Weeks 10–14

Design System Foundation

Built the token architecture first — colours, spacing, typography, motion — before touching any components. Named tokens semantically (--color-status-safe, not --color-green). Established 8pt grid and 1.200 type scale. Shared in Figma Variables for both web and mobile.

Phase 3 Token Architecture Figma Variables Design Tokens

Nov–Dec 2022
Weeks 15–22

Component Library + Wireframes

Built 24 core components in Figma with full state documentation. Notification card redesigned from scratch — 4 rounds of iteration to get the tone and hierarchy right. Wireframes validated against each persona's scenario before visual treatment.

Phase 3 24 Components Figma Auto Layout Wireframes

Jan–Sep 2023
Weeks 23–48

Hi-Fi Mockups + Iterative Prototyping + Handoff

Figma prototypes tested with 6 representative users (2 per persona). 3 major prototype iterations. Developer handoff via Figma Inspect + annotated component specs. Result: 30% reduction in design iteration time due to shared design language between design and engineering.

Phase 4 6 User Tests 3 Iterations Dev Handoff

08Design Tooling

How the system was built and where it lives

The right tool for each job. Figma as the single source of truth. FigJam for collaborative thinking. Principle for prototype motion. Lottie for production animations. The entire stack was chosen to maximise handoff quality and minimise interpretation errors.

🎨

Figma — Primary Design Tool

Single source of truth for all design work. Shared with engineering team via Figma Inspect for accurate spacing, tokens, and asset export.

Design System Library with shared components
Figma Variables for semantic design tokens
Auto Layout for responsive component intent
Prototype links for user testing flows
Figma Inspect for dev handoff
Branching for major system updates

🧠

FigJam — Research & Strategy

Collaborative whiteboard for UCDC analysis, journey mapping, affinity clustering, and design critique sessions with stakeholders.

UCDC Canvas analysis
Emotional journey mapping
Affinity diagram from interviews
Wireframe sketching & critique
Async stakeholder sign-off

⚡

Principle — Motion Design

Prototyping meaningful micro-animations — the boarding confirmation pulse, status card transitions, and the notification entrance animation that signals "something important just happened."

Boarding status transition animation
Notification slide-in (350ms, ease-out)
Status pulse for live tracking
Screen transition system

🎭

Lottie / LottieFiles

Production-quality animations exported from After Effects and embedded directly in both iOS/Android and React web admin. No frame drops, no video files.

Boarding confirmation celebration
Empty state illustrations
Loading states (3 variants)
Bus location pin animation

♿

Stark — Accessibility Testing

Figma plugin used throughout design (not just at audit stage) to check contrast ratios, simulate colour blindness, and validate touch target sizes before handoff.

Contrast ratio checking (APCA + WCAG)
Colour blindness simulation
Focus order annotation
Touch target size validation

📐

Tokens Studio for Figma

Manages design tokens as JSON, synced to the codebase via GitHub. When a token changes in Figma, CSS custom properties update in the next engineering build.

JSON token export
GitHub sync for CSS variables
Multi-theme token sets (Light/Dark)
Version control for token history

09Launch Timeline

What shipped, what's next, what's planned

Delivery was phased by human impact: the notification system and boarding confirmation — Priya's critical anxiety moments — shipped in Phase 1. Admin keyboard accessibility and student-facing features followed. Dark mode and widget extensions are on the roadmap.

Jul–Sep 2022

Phase 1: Foundation

User research (12 interviews)
UCDC analysis workshop
3 full personas developed
Journey mapping complete
Accessibility audit — all 8 findings documented

✓ Complete

Oct–Dec 2022

Phase 2: Design System

Token architecture (Figma Variables)
24-component library
Wireframes for all 3 user types
Notification system redesign
Hi-fi mockups — mobile + web admin

✓ Complete

Jan–Sep 2023

Phase 3: Build & Test

3 rounds prototype testing
6 user tests (2 per persona)
Dev handoff + annotation
All 8 a11y findings shipped
v1.0 production launch

✓ Complete

Q3 2026 (Planned)

Phase 4: Expansion

Dark mode (all platforms)
iOS/Android lock-screen widget
Parent-admin direct messaging
Longitudinal research — disruption recovery
Design system v2.0

Roadmap

10Design Decision Log

The why behind every significant choice

Developers shouldn't have to reverse-engineer intent. Stakeholders shouldn't have to remember why. This log captures the reasoning behind the decisions that shaped the product — so the system can be evolved without losing what made it work.

Core Intent: make a parent feel their child is safe, without having to think about it. Every design decision either serves that intent or doesn't belong in the system.

Category	Decision	Human Rationale	Trade-off
Visual	Warm cream background, not white	Clinical white reads as cold or sterile — medical, not caring. Cream says "this was thought about." For a parent already anxious at 7:30am, the screen's emotional register matters before a single word is read.	Slightly lower max contrast ceiling; compensated by using navy-900 for all body text (16:1 ratio)
Visual	Lora serif for headings + status moments	Serif type in digital interfaces signals "we've thought this through" — it reads as intentional. For the boarding confirmation ("Ananya is safe"), the emotional weight of that message deserves type that feels considered, not generic.	Slightly heavier page weight from loading Lora; accepted given the emotional ROI on the confirmation screen
Accessibility	Notifications default ON, not opt-in	The original system required users to explicitly enable notifications. Priya didn't know. So every morning she opened the app to check, and found nothing — read as "nothing is wrong" but felt as "the system doesn't care." Changing the default directly addressed the core anxiety driver.	Some users might not want notifications and need to opt-out. Acceptable trade-off vs. the emotional damage of silent defaults.
Accessibility	Text-mode alternative for fleet map	Sarah navigates primarily by keyboard. The canvas-rendered map was completely inaccessible to her. When a system error occurs during an incident, Sarah can't do her job — and parents calling in can sense her uncertainty. Giving her a reliable text view restores her authority.	Maintaining two views adds engineering overhead. Worth it: without this, an entire user group has no access to critical operational data.
Motion	Boarding confirmation animation — 350ms pulse	The moment Priya's child boards is the most emotionally significant moment in the entire product. A static badge change felt anticlimactic. A gentle pulse says: "this just happened, and it matters." It's not decoration — it's emotional punctuation.	Respects prefers-reduced-motion — all animations check this media query and fall back to immediate state change
Microcopy	Delay messages rewritten with empathy	"Route 3B: ETA +18min" is a system log. "Ananya's bus is running 18 minutes late — we'll update you when she boards" is a conversation. A premium school transport service isn't just moving children — it's managing parental trust. The copy had to close that gap.	Longer strings, slightly more complex localisation. Both accepted in favour of the trust that personalised language builds.
Architecture	8pt grid + 1.200 type scale enforced via tokens	The old interface had 11 different spacing values and 8 font sizes in active use. This wasn't a visual problem — it was a trust problem. Inconsistency reads as lack of care. The discipline of the 8pt grid creates the unconscious sense that things are where they should be.	Required refactoring of legacy components. One-time cost; permanent benefit to design velocity (30% reduction in iteration time)
Architecture	Semantic token naming over raw values	`--color-status-safe` vs `#2D7A4A` — the difference is that a developer reading the token understands intent, not just value. When "safe" needs to become a different shade for dark mode, it changes in one place. The system scales without tribal knowledge.	Larger initial token architecture effort. Pays back every time the system evolves or adds a new theme.

What We Tried and Rejected — v1.4

Rejected: "Traffic light" status system (red / amber / green) — tested with parents; red for "bus is delayed" caused disproportionate anxiety. Replaced with calm amber for delays, reserving red exclusively for genuine safety incidents.

Rejected: Dashboard-first home screen for parents — tested a parent "overview" with multiple data cards. Priya's first question was always "but is she safe?" Everything else was noise until that was answered. Boarding confirmation moved to the hero position.

Rejected: Hamburger menu on mobile admin — Sarah needed access to fleet status and incident management too quickly. Bottom navigation with visible labels tested significantly faster for task completion, and kept critical functions one tap away.

What We Tried and Rejected — v1.5

Rejected: Glassmorphism / frosted-glass cards — initially trialled as a modernisation of the card system. Under real-world testing on midrange Android devices the backdrop-filter caused rendering drops on status update animations. Performance consistency was non-negotiable; dropped in favour of shadow-elevation cards.

Rejected: Bus replay exposed to parents — user testing showed parents began hunting for moments the bus "slowed down" or "paused." This amplified anxiety rather than resolving it. Replay is now admin-only, giving Sarah data authority without exposing raw movement history to already-anxious parents.

Rejected: Full-screen animation on boarding confirmation — an early iteration showed a full-screen "confetti" moment when Ananya boarded. Parent feedback: "It felt like I won something, not like my child was safe." The heartbeat pulse was chosen — present, purposeful, but not celebratory.

Open Questions for Future Sprints

08v1.5 Enhancement Proposal — "Ethereal Utility"

From reporting to feeling

The v1.4 system earned trust through clarity. These v1.5 enhancements push further — turning the interface from something parents check, into something that actively reassures them. Every change here passes the same test as v1.4: would Priya feel calmer? Would Arjun actually use this? Would Sarah's morning be easier?

The goal isn't to modernise the aesthetic. It's to close the gap between "the system shows data" and "the system shows it cares."

Visual Style — "Soft-Edge Layering"

Moving the hero card from a flat linear gradient to a mesh gradient is a small change with an outsized emotional effect. It shifts the "boarding confirmed" screen from a database entry to something that feels more like a morning sky — soft, alive, and calm.

🌊

Mesh Gradients on Status Cards

Replace the hard linear gradient on the hero boarding card with organic radial mesh overlays. The "Safe" state blends green into navy in a soft ellipse — not a database badge, but a morning sky confirming safety. Implemented via multi-layer radial-gradient() CSS with no external deps.

Priya — reduced anxiety

⬜

Bento Grid Layout

The Parent Home Screen moves from a vertical stack to a 2-column Bento grid. Hero cell (2×1): Boarding Status. Side cell: Live Map. Bottom cells: ETA and Quick Actions. This lets Priya scan Status → Map → Action in milliseconds rather than scrolling. Live in the wireframe above.

Priya — faster scanning

🪟

Shadowless Card Elevation

Remove explicit borders from resting card states. Use var(--shadow-sm) for resting and var(--shadow-md) for active — elevation replaces the visual noise of borders. The "Safe" status breathes and pops. New token: --shadow-card-resting aliased to --shadow-sm.

Priya — visual calm

Micro-Interactions — "System Heartbeat"

Micro-interactions aren't decoration here. They're proof of life. The system should feel like it's actively watching, not passively displaying. Every animation below has a prefers-reduced-motion fallback baked in.

💓

Heartbeat Pulse on Status Change

When status flips from "Waiting" to "Boarded", the status card emits a single slow ripple via a CSS box-shadow keyframe animation — a 2.4s loop using --color-status-safe. It mimics a sigh of relief. Demonstrated live in the Parent App wireframe above. Duration: 350ms per pulse, 2s interval.

Priya — emotional confirmation

🚌

Smart Pull-to-Refresh

Replace the standard spinner with a miniature bus icon driving across a path. The bus drives left-to-right using a CSS translateX animation with opacity fade in/out. Reduces perceived wait time and provides semantic feedback: "the app is checking the route." See the wireframe's pull-to-refresh indicator above.

Priya — less anxiety refreshing

📳

Haptic Feedback Patterns

Implement distinct vibration signatures via the Web Vibration API. Double light tap (2×50ms): Safe/Boarded confirmation. Heavy single pulse (400ms): Alert or incident. This lets Arjun know status while the phone is in his pocket — never needs to look at the screen to know the bus is on time.

Arjun — glanceability

Platform Innovations — Beyond the Screen

🏝️

Live Activities (iOS Dynamic Island)

Replace repeated push notifications with a persistent OS-level Live Activity on the lock screen. Shows a progress bar of the bus route, real-time ETA, and current street. Arjun gets glanceable ETA without unlocking his phone. Priya monitors without opening the app. Requires iOS 16+ WidgetKit integration — no design system UI impact.

Arjun — discreet checks

☁️

Context-Aware Morning Mode

Pull weather and traffic APIs at 6:45 AM. If heavy rain is forecast, the Admin Dashboard automatically highlights flood-prone routes in var(--amber-100) before delays occur. Sarah goes from reactive firefighting to proactive management. Demonstrated in the Admin wireframe above with Route 5D highlighted and the animated "Rain Alert" badge.

Sarah — proactive ops

👻

Ghost Bus Replay

A timeline scrubber on the Admin Map lets Sarah rewind a bus route by up to 60 minutes. Drag the thumb to replay exact path and velocity. When a parent calls claiming "the bus never came to our stop," Sarah can show them — right then, on a live call — exactly where the bus was at 7:42 AM. Resolves disputes in seconds. See the scrubber in the Admin wireframe above.

Sarah — dispute resolution

Impact Summary

Enhancement	Primary Persona	Human Benefit	Implementation
Bento Grid Layout	Priya	Status → Map → Action scanned in one visual pass. No scrolling to confirm safety.	New CSS Grid utility classes. No component rebuild required.
Mesh Gradients + Heartbeat Pulse	Priya	The boarding confirmation feels like a moment, not a database entry. Emotional punctuation.	CSS `radial-gradient()` + `@keyframes box-shadow`. Zero JS required.
Smart Pull-to-Refresh	Priya	Anxious refreshing feels purposeful. Semantic feedback replaces a generic spinner.	CSS animation on bus emoji icon in refresh slot.
Haptic Feedback Patterns	Arjun	Status readable without looking at screen. Safe = 2 light taps. Alert = 1 heavy pulse.	Web Vibration API. Mobile OS only. Graceful degradation on desktop.
Live Activities	Arjun	Discreet ETA glance on lock screen. Never needs to open the app in front of friends.	Native iOS 16+ WidgetKit / Android Dynamic Widget. No design system UI impact.
Context-Aware Morning Mode	Sarah	Sarah sees risk before it becomes a delay. Shifts from firefighting to prevention.	Weather API integration + new `.dash-risk-route` token class.
Ghost Bus Replay	Sarah	Resolves "bus never came" disputes in seconds with visual historical evidence.	New "Timeline" scrubber component in Admin UI. Requires location history API.