Patterns
Widgets and Live Activities
Home Screen widgets and Live Activities.
Approved
Widgets + Live Activities
One Favorite Stop widget and the arrivals Live Activity share one layout: who, how fresh, and the next arrivals. WidgetKit and ActivityKit own each presentation’s size, margins, material and glass.
Live Activity · Lock Screen · fresh
BelmontUpdated 2 min ago
Live Activity · Lock Screen · stale
Stale
BelmontUpdated 18 min ago
Bus stop · fresh
Halsted & RooseveltUpdated just now
Shared layout
| Part | Rule |
|---|---|
| Header | Mode icon (train.svg or bus.svg) and the station or stop name. No route-colour marker in the header. Same on the widget and the Live Activity. |
| Subtitle | Updated X min ago under the name (Updated just now under a minute, Updated N hr ago from an hour). There is no separate Updated line at the bottom. |
| Arrival rows | Stacked vertically, like the app’s arrival rows: route colour marker and destination leading, time trailing. Rows sit directly on the background, with no row fills or dividers. Two rows on the Lock Screen, the expanded Dynamic Island and the medium widget; one on the small widget. |
| Time | Fresh data shows Due or N min, never seconds. Stale data shows each arrival’s locale short clock time (2:21 PM) instead of minutes. |
| Stale | A Stale label (Caption 2 semibold, orange, in a 12% orange capsule) sits to the left of the refresh button, on the same top-trailing row. Widget: 15 minutes after the last update. Live Activity: when the system marks the activity stale. |
| Refresh | Top-trailing arrow.clockwise button, Button(intent: RefreshArrivalsIntent), label Refresh arrivals, 44 × 44pt target. A tap turns the glyph exactly one 360° rotation. On the widget the intent refetches and reloads the timeline; on the Live Activity it updates every activity for that stop. |
| Tap | Anywhere outside the refresh button opens the stop in the app. |
Widget families
| Family | Content |
|---|---|
| systemSmall | Shared header and subtitle, one arrival row, refresh. |
| systemMedium | Shared header and subtitle, two arrival rows, refresh. |
| accessoryRectangular | Stop name (Headline); first route number and time (Caption); Updated X min ago or Stale (Caption 2, secondary). One line each. |
| accessoryInline | “Belmont: 7 min”, adding “, stale” when stale. No refresh. |
| Configuration | Edit Widget offers Favorite, Route and Direction. Route and Direction depend on the favorite; empty means the favorite’s saved routes and direction. |
| Empty | No favorite chosen: Choose a favorite. A deleted favorite: Favorite removed. Edit widget. Never substitute another stop. |
Live Activity presentations
| Presentation | Content |
|---|---|
| Lock Screen and banner | The shared layout with two rows; one row at accessibility text sizes. |
| Expanded Dynamic Island | Header in the centre, two arrival rows in the bottom region, refresh top trailing. |
| Compact and minimal | First route marker leading and the first time trailing. No refresh; the system owns the tap. |