Map
Selection and focus
Selected, focused and pressed states on the map and in lists.
Default and selected states of map stops, vehicles and route options, as built in the iOS app. Examples are drawn at 2× (route chips 1.5×); values are in points. Every stop and vehicle marker has a keyline in Paper (white in light, #0F141C in dark) so it holds its edge on any map in either theme: 2 on station capsules, bus stops, vehicle bodies and heading arrows; 1.5 on station circles. Selection inverts it: the keyline turns Ink (#101A2E light, #EEF1F6 dark) at the same width, so the marker’s size and shape never change and nothing is drawn outside it. On Brand fills (bus stops and buses) a 1 Paper hairline sits inside the Ink keyline so the Ink never touches the blue. Stops scale to 1.12 and vehicles to 1.25. No other colour marks selection.
Stations and stops
1 line
1 line · selected
3 lines
3 lines · selected
< z15 · 1 line
< z15 · 2+ lines
< z15 · selected
1 line
1 line · selected
3 lines
3 lines · selected
< z15 · 1 line
< z15 · 2+ lines
< z15 · selected
z16+
z16+ · selected
z14–16
z14–16 · selected
< z14 · selected
z16+
z16+ · selected
z14–16
z14–16 · selected
< z14 · selected
Dashed box: the 44 × 44 hit area every stop marker keeps.
| Marker | Default | Selected |
|---|---|---|
| Station · zoom 15+ | StationIconView at 22 high (side 26 − 4) on a 2pt Paper capsule: Card 2 capsule, Ink train glyph 16.5, one 4.95 × 13.2 bar per line (radius 1.98, gap 1.5). The Paper capsule is #0F141C in dark | Keyline turns Ink at the same 2; nothing else changes. Scales to 1.12 |
| Station · below zoom 15 | 10 circle, 1.5 Paper inner border; line colour at a one-line station, Card 2 at a multi-line station | Becomes the zoom 15+ capsule with the Ink keyline, at any zoom |
| Bus stop · zoom 16+ | 20 Brand square, radius 5 (side × 0.25), 2pt Paper inner border, Accent Ink bus glyph 10.4 (side × 0.52) | Border turns Ink at the same 2, with a 1 Paper hairline inside it so the Ink never touches the Brand fill. Scales to 1.12 |
| Bus stop · zoom 14–16 | 7 Brand square, radius 1.5, no glyph or border | Becomes the zoom 16+ marker with the Ink keyline |
| Bus stop · below zoom 14 | Not drawn | The open stop is still drawn, as the zoom 16+ marker with the Ink keyline |
| Transition | easeInOut 0.25 s on selection change; none under Reduce Motion | |
| Tap | Registers on touch-up (not MapKit selection). Tapping the selected marker does nothing. Pressed: not defined | |
| Other markers | Unchanged: no dimming or hiding of other stops. Opening a stop that serves buses draws its first bus route (4pt line, route colour or Brand) and dims every train lane to 35% opacity; a train-only stop leaves lanes at full colour | |
| Bus stop group | The Ink keyline sits on the physical stop for the chosen direction and moves when the direction changes. The other direction’s stop draws as an ordinary unselected bus stop | |
| Z-order | MKAnnotationView zPriority: bus stop 300 < station 400 < selected stop 500 < vehicle 900 < selected vehicle 1000. Within a layer, bus stops are added first and stations last | |
Vehicles
Train
Selected
Stale
Stale · selected
22
Bus22
Selected22
Stale22
Heading 0–45°22
Stale · selected22
Selected · heading 0–45°Red
Blue
Brown
Green
Orange
Purple
Pink
Yellow
Red · selected
Blue · selected
Brown · selected
Green · selected
Orange · selected
Purple · selected
Pink · selected
Yellow · selected
Train
Selected
Stale
Stale · selected
22
Bus22
Selected22
Stale22
Heading 0–45°22
Stale · selected22
Selected · heading 0–45°Red
Blue
Brown
Green
Orange
Purple
Pink
Yellow
Red · selected
Blue · selected
Brown · selected
Green · selected
Orange · selected
Purple · selected
Pink · selected
Yellow · selected
| State | Train | Bus |
|---|---|---|
| Default | 25 circle in the line colour, 2pt Paper keyline, glyph 15 fixed Ink on Blue, Pink and Yellow (route hex luminance ≥ 0.5) and white on the other lines; 13 × 10 heading arrow 20.5 from centre, rotated to bearing | 25 Brand square, radius 7, 2pt Paper keyline, Accent Ink glyph 13.5; number tag 11 heavy, min 22 × 17, radius 6, Paper fill, 1.5 Brand stroke, 23 above the body (below at bearing 315–45°) |
| Selected | The body keyline turns Ink at the same 2; a bus adds a 1 Paper hairline inside it so the Ink never touches the Brand fill. The heading arrow and number tag are unchanged. The whole marker scales to 1.25 on a spring of 0.3 s, bounce 0.25; instant under Reduce Motion. Accessibility trait Selected. zPriority 1000 | |
| Stale | Body solid Muted, glyph white, bus tag text and stroke Muted; never translucent. A stale selected vehicle takes the same Ink keyline | |
| Pressed | None: vehicle markers take no hit testing | |
| Tap an arrival | Selects that run’s vehicle. If the stop or the vehicle is outside the map area above the sheet, the camera fits both, zooming out only as needed (smooth 0.45 s, none under Reduce Motion); otherwise it stays. With no live vehicle: a light haptic only. The selection clears when another stop opens or the stop closes. The tapped arrival row has no selected style | |
Route options
All
All
All2236
151
All
All
All2236
151
| Chip | Unselected | Selected |
|---|---|---|
| Train route | 28 circle in the line colour; optional line letter at 7.8 bold | Concentric halo: Paper 0–2 out, Ink 2–4.5 out (2.5 stroke) |
| Bus route, All | 28 high, min 44 wide, 8 side padding, radius 10, Body bold Brand label, 2pt Brand inner border, no fill | Brand fill, Accent Ink label; concentric halo with Paper ring radius 12 and Ink ring radius 13.25, so its outer edge is radius 14.5 |
| Behaviour | Single select: All or one route. Tapping the selected route returns to All. All shows only with 2+ routes; a single route shows selected. Chips sit 6 apart in a 44 high row with 3.25 side inset so the halo is never clipped; type capped at xxxLarge. Pressed: not defined (system plain button style) | |
| Control | Rule |
|---|---|
| Nearby mode menu | 44 Liquid Glass circle, Brand glyphs. Trains and buses: train and bus glyphs at size 12 (19.2 drawn), 3 apart; one mode: that glyph at size 22. Native menu in fixed order Trains and buses · Trains · Buses; the current option shows the system checkmark. No other selected styling |
| Direction | System segmented picker for up to 2 directions, system menu picker for 3+ or accessibility type sizes. Selected styling is the system’s |
| Search, route lists | No route filter or selected row state |
Accessibility
| Element | As built |
|---|---|
| Stop marker | Button; label “Name station” or the bus stop name; hint “Shows stop arrivals”; trait Selected when open |
| Vehicle marker | Not a button; label per Vehicle positions; trait Selected when highlighted |
| Route chip | Button labelled with the route name (“Route N” when unnamed) or “All routes”; trait Selected |
| Nearby mode | Label “Nearby mode”, value the current option |
| Arrival row | Expandable rows: value Expanded or Collapsed. Otherwise hint “Shows this vehicle on the map” |
| Focus ring | None drawn by the app; VoiceOver uses the system cursor. The focus-ring tokens size the selection halo only |
| Programmatic focus | Search field only: focused when Search opens from a launch scenario or its tab is tapped again, and released when a result opens |
| Sheet grabber | 44 focus target exposed as a three-step adjustable (low, half, full) |
| Hit areas | 44 × 44 minimum on stop markers, route chips, the Nearby menu and icon buttons. Vehicle markers sit in a 44 frame without hit testing |
Not defined
| Item | Status |
|---|---|
| Pressed state for stop markers and route chips | Not defined |
| Dimming of other stop markers while a stop is open | Not defined |
| Distinct style for the other direction of a bus stop group | Not defined |
| Selected style on the arrival row whose vehicle is highlighted | Not defined |
| Route filter or selected row in Search and route lists | Not defined |
| Keyboard or Full Keyboard Access focus ring | Not defined |
| VoiceOver focus move on selecting a stop or vehicle | Not defined |