Icons

SF Symbols in the app except for the transit icons below and the custom Favorite glyph. The Favorite is a five-point rounded star in a 24pt box: centre 12 × 12.9, outer radius 10.8, inner radius 5.6, tip radius 3.4, and valley radius 1.8, joined with quadratic curves. Unsaved uses a 2pt round-join outline; saved uses a fill plus a 0.6pt round-join stroke. Both weights scale with the glyph at 14 / 18 / 22 / 32pt. Other icons are filled for identity and outlined for actions; 22pt in controls and 28pt for the alert.

Refresh is one clockwise arrow (SF Symbol arrow.clockwise), never two. icons/refresh.svg is the single source for every refresh control on the web (#i-refresh): filled paths in currentColor matching the 2.2 stroke of the other action icons. It spins one turn (0.6 s, ease-in-out) while refreshing; no spin under Reduce Motion.

Transit icons

Train, Bus and Train + bus are custom SVGs. icons/ is the single source: train.svg, bus.svg and train-bus.svg. The web app and the iOS app draw these files and nothing else for transit modes. Each is a 24 × 24 viewBox of filled paths in currentColor: no hard-coded colours, no stroke-only shapes, no text. Colour comes from the context: Ink on Paper, white on a line or Brand fill, and Always black on Yellow. Shown at 16 / 24 / 44pt.

Updating a transit icon

1. Draw on a 24 × 24 artboard with filled shapes only; outline any strokes and remove text.
2. Export as SVG, run npx svgo --multipass, and set every fill to currentColor.
3. Replace the file in icons/ with the same name.
4. Run go test ./...; it fails on a missing file, a hard-coded colour, a stroke or text.
5. Check this section at 16 / 24 / 44pt in light, dark and on the line colours.
6. Sync the files into the iOS asset catalog (see icons/README.md).

Vehicle markers

A 25pt body with a separate heading arrow (13 × 10, centre 20.5 from the body centre, rotated to the bearing) and an upright glyph: a circle in the line colour for a train, a 7-radius rounded square in Brand for a bus, both with a 2pt Paper keyline (white in light, #0F141C in dark). Stale: solid Muted body, white glyph. Selected: the body keyline turns Ink (a bus adds a 1 Paper hairline inside it), and the marker scales to 1.25×. The bus number tag sits above the body, below it when the bus heads up the screen. Rules: Vehicle positions.