Thiru-tenext
e2fe1b1771
The canvas was #F1F0EC — a warm grey that made every screen look slightly dull. It is white. ── You cannot have both ── That canvas was not an accident: it was deepened from #F7F6F4 on 2026-09-23 precisely so a white card would sit *on* something and its 1px edge could go quiet. A white card on a white page has nothing to sit on. Measured rather than judged by eye: after the canvas change, a pixel scan across a card boundary on the Orders golden read #FFFFFF from end to end. The shadow contributed nothing findable. The cards had not become subtle, they had disappeared. So the edge comes back. `DmCard` drew its border only for tones that are not white — the warm canvas was doing that job for the white ones — and now draws it for every tone, with the lift still underneath. Border plus a soft shadow is the iOS and Revolut shape rather than the borderless Airbnb one, and that is the price of a white page. Paid deliberately. ── What moved with it ── `surfaceAlt` lifts to #F4F2EF. With a white page it is the only token that makes a surface read as recessed — filled inputs, tiles, skeletons, the sunken card — so it can no longer sit within a point of the canvas. `DmCardTone.sunken` filled itself with the canvas colour, which on a white page is not sunken but invisible. It takes `surfaceAlt`.
Screens
Every screen in the app, at 390×844 @3x, with the real fonts.
These are the golden files from test/snapshots/, copied here under readable
names so the set can be browsed, shared or dropped into a deck without anyone
having to know what a golden is. test/snapshots/ is the source of truth —
this folder is a copy, and a stale copy is worse than none, so refresh it
whenever the design moves:
flutter test test/design_snapshot_test.dart --run-skipped --update-goldens
tool/screens.sh
They are rendered by the test harness rather than captured from a handset, so
they are identical on any machine and need no device attached. Two consequences
worth knowing: map tiles are blank, because the harness has no network and
CARTO is fetched live; and the data is DevDoormileApi's, so the names,
addresses and references are invented.
| File | Screen | |
|---|---|---|
00-splash-truck.png |
Splash · first beat | What the app does, in white on the brand crimson the launcher icon opens from. |
00b-splash-invert.png |
Splash · second beat | The invert, caught halfway: the ground lightening as the truck darkens, both on one curve. |
00c-splash-mark.png |
Splash · third beat | Whose app it is. The same mark the launcher icon is cut from. |
01-sign-in.png |
Sign in | One question, one field, one button. |
02-sign-up.png |
Create account | The same shell, three fields. |
03-verify-code.png |
Verify the code | One field behind four boxes that only draw. |
04-home.png |
Home | Welcome, the pickup address, BOOK, and the live booking. |
05-pickup-search.png |
Collect from | Changing the pickup address from the Home header. |
06-orders-active.png |
Orders · Active | State, date, route, packages, reference. |
07-orders-completed.png |
Orders · Completed | Delivered orders and what they cost. |
08-account.png |
Account | Grouped rows, and the build this handset is running. |
09-tracking.png |
Live tracking | The live card, the map, the Miler, the journey rail. |
10-cancel-pickup.png |
Cancel this pickup | The one destructive action, behind a reason. |
11-pickup-where.png |
Pickup · where | Every city Doormile serves, headed by state. One list, no level to open — and the answer to "where do you deliver?". |
12-pickup-when.png |
Pickup · when | The same sheet's second question. It never leaves and never changes height. |
14-send-a-parcel.png |
Send a parcel | The route, the packages, the two commitments. |
15-pickup-map.png |
Pickup point | The map editor, and who the Miler asks for. |
16-pickup-booked.png |
Pickup booked | White tick on green. The reference and the live search. |
17-receipt.png |
Order details | What was collected, weighed, photographed and paid. |
Not here yet
First-run Home — the sphere's caption and the "How it works" rail only
appear for a customer with no orders, and the dev backend seeds three. It needs
a flag on DevFlags to capture, which is not worth adding for a picture.