Conventions¶

	iOS	Android
Status	⏳	⏳
Code	—	—

Source: click dummies docs/companion_app/sailever-ios.html, docs/companion_app/sailever-android.html. Verified against code: 2026-10-11 (no code yet; checked against the click dummies)

Purpose¶

Rules every screen of the phone apps follows: units, formats, colours, feedback and shared components. Screen files link here instead of repeating them.

Units and formats¶

Units are fixed: nautical miles, knots, degrees true. There is no unit setting. Times use the trip's time zone (see trips.md, Edit trip).

Value	Format	Example
Distance on cards, totals, days, tracks	1 decimal + `NM`	`25.3 NM`
Distance in the chart tools	2 decimals below 10 NM, 1 decimal from 10 NM	`4.27 NM`, `12.4 NM`
Speed (SOG)	1 decimal, `kn`	`5.4 kn`
Course, bearing	3 digits with leading zeros + `°`, then `T`	`047°T`
Duration, long (also the logbook totals of sailing and engine time)	`{h} h {mm} min`, as on the website (server formats)	`5 h 07 min`, `41 h 07 min`
Duration, short (clock style), phone only for narrow rows (day rows, live panel)	`{h}:{mm}`	`5:07`
Hours on trip cards	1 decimal + `h`, as on the website	`3.4h`
Clock time	24 h `HH:MM`	`09:00`
Day label	`{Weekday} {d}.{m}.`	`Fri 9.10.`
Long date	`{d} {Mon} {yyyy}`	`9 Oct 2026`
Trip date range	As on the website: repeats only what differs (same day: long date; same month: `{d}–{d} {Mon} {yyyy}`; same year: `{d} {Mon} – {d} {Mon} {yyyy}`; else both full dates)	`9–11 Oct 2026`, `28 Sep – 3 Oct 2026`, `30 Dec 2025 – 2 Jan 2026`
Position	`DD°MM.mmm′N DDD°MM.mmm′E`	`43°03.678′N 16°11.052′E`
Grid label on the chart	`DD°MM′N DD°MM′E`	`42°45′N 16°15′E`

Distances in the chart tools are great-circle distances. Bearings are the initial great-circle course, in degrees true.

Numbers are the server's (calculations.md, ingestion.md); the app never recomputes them.

Colours¶

Same tokens as the website (apps/server/app/assets/stylesheets/tokens.css), light and dark. Sailing, engine, motorsail and rest colours are the vessel-state tokens in vessel-state.md § Server colours; unlike the website map, the app draws motorsailing in --motorsail.

Use	Token	Light	Dark
Bridged (estimated) distance in bars	`--line`	`#CBD6D6`	`#233A4D`
Boat marker, route line, live dot, Skipper badge	`--signal`	`#ED6017`	`#FF7A33`
Primary buttons	`--action`	`#C94E0E`	`#C94E0E` (not redefined for dark)
Destructive text	`--bad`	`#C9352C`	`#FF6B61`
Water / land on the chart tools' base (app only, no website token)	`--water` / `--land`	`#CFE3E6` / `#EDE7D6`	`#0A2132` / `#1A2A33`

The theme follows the system unless the user picks Light or Dark (account.md).

Fonts: Big Shoulders Display (large titles, big numbers, uppercase), Hanken Grotesk (text), IBM Plex Mono (labels, coordinates, IDs, tabular numbers).

Feedback¶

Pattern	Behaviour	iOS vs Android
Toast / snackbar	One at a time. Disappears after about 4 s. May carry one action (Undo).	iOS: glass toast at the top, icon on the left, 3.6 s. Android: snackbar at the bottom, above the live panel on the Map tab, 4 s.
Confirmation	Needed before deleting a trip, track or boat, unpairing a device and removing a passkey. Cancel and the action.	iOS: centred alert, action in red. Android: dialog with an icon, action as a red text button.
Delete	Final. The confirmation says so. No Undo.	—
Undo	Only for local actions that the server never saw, like clearing a planned route.	—
Validation	A required field left empty keeps the form open and focuses the field.	iOS: toast "Give the boat a name". Android: red field outline.

Shared components¶

Component	Content & format	Behaviour
Trip card	See trips.md, Trip card.	Used on the Logbook and Trips tabs.
Split bar	Bar in sail, engine and (if any) bridged colours, proportional to NM. Legend: "Sailed {x} NM", "Motored {x} NM" (with " · {h} h" engine time where shown), "Estimated {x} NM".	Accessible label "Sailed {x} NM, motored {y} NM".
Readout tile	Small mono uppercase label, big display number, small unit. Sail and engine tiles have a 3 px coloured bar at the bottom.	Read only.
Crew	Crew icon (group) on trips the user crewed on; there are no visibility levels (../server/sharing.md).	Labels from the server (`sharing.crew.*`).
System share sheet	Preview with title and URL, then the platform's targets.	iOS: AirDrop, Messages, Mail, …, Copy. Android: Messages, WhatsApp, Gmail, Quick Share, …, copy button. Toast/snackbar after copying: "Link copied".
Avatar	Initials of first and last name on the signal colour.	Opens Account from every tab.

States and edge cases¶

Lists that can be empty show an empty state with an icon, a bold title and one line of help.
While data is loading or offline: ⏳ not designed (see README, Not in the click dummies).

Known deviations¶

The dummies show logbook totals as 41h 07min (unit in small muted text). This spec uses the website format 41 h 07 min.
The iOS dummy uses --bad: #D62F25 and the dummies use #FF7A33 for --action in dark mode. This spec uses the website tokens.
The dummies offer Undo after deleting a trip or a boat and after unpairing a device, while the confirmation says the trip "will be gone for good". The server deletes for good. This spec drops those Undo actions.