Layout
Composition principles
Place active impact and update time before background detail. Group alerts by passenger relevance, keep route identity visible, and avoid decorative maps when text communicates the disruption better.
U.S. Web Design System / Published template
Public Transit Service Alert Center
A public information center for current transit disruptions, affected routes, time context, and practical passenger alternatives.
Prompt reference v1
Preview
Structure blueprint
Current system status leads into route and severity filters, alert summaries, affected stops, and an expanded plain-language impact view.
Interaction
Behavior and access
Alerts use headings and text severity, filters remain usable without a pointer, expanded details preserve focus, and updates announce without interrupting reading.
Implementation
Engineering boundaries
Render alerts from a server-owned feed with explicit effective windows and time zones. Preserve source identifiers, handle stale feed state visibly, and never infer restoration time.
Design system
U.S. Web Design System token ledger
The open design system for accessible and mobile-friendly United States government websites.
Color roles
- model
- accessible system tokens
- requiredRoles
- base, ink, primary, secondary, warning, error
Typography
- approach
- readable public-service scale
- requirements
- plain-language hierarchy, legible alerts
Spacing
- approach
- responsive public-service grid
- baseUnitPx
- 8
Component rules
- alerts
- State the service impact, affected area, and next action.
- accessibility
- Meet keyboard, contrast, and semantic structure requirements.
Classification