diff --git a/design/screens/01-sign-in.png b/design/screens/01-sign-in.png index 89c785f..140f0d0 100644 Binary files a/design/screens/01-sign-in.png and b/design/screens/01-sign-in.png differ diff --git a/design/screens/02-create-account.png b/design/screens/02-create-account.png index 7e4be61..cf96ba5 100644 Binary files a/design/screens/02-create-account.png and b/design/screens/02-create-account.png differ diff --git a/design/screens/03-enter-pin.png b/design/screens/03-enter-pin.png index 89b71a8..796db05 100644 Binary files a/design/screens/03-enter-pin.png and b/design/screens/03-enter-pin.png differ diff --git a/design/screens/04-home.png b/design/screens/04-home.png index a351902..72e79ca 100644 Binary files a/design/screens/04-home.png and b/design/screens/04-home.png differ diff --git a/design/screens/05-pickup-search.png b/design/screens/05-pickup-search.png index 589fea0..9deed50 100644 Binary files a/design/screens/05-pickup-search.png and b/design/screens/05-pickup-search.png differ diff --git a/design/screens/06-orders-active.png b/design/screens/06-orders-active.png index 6baa1f5..c734ac1 100644 Binary files a/design/screens/06-orders-active.png and b/design/screens/06-orders-active.png differ diff --git a/design/screens/07-orders-completed.png b/design/screens/07-orders-completed.png index 439f2ee..f69076f 100644 Binary files a/design/screens/07-orders-completed.png and b/design/screens/07-orders-completed.png differ diff --git a/design/screens/08-account.png b/design/screens/08-account.png index eda2c4c..77f751a 100644 Binary files a/design/screens/08-account.png and b/design/screens/08-account.png differ diff --git a/design/screens/09-tracking.png b/design/screens/09-tracking.png index 44824da..9752cf4 100644 Binary files a/design/screens/09-tracking.png and b/design/screens/09-tracking.png differ diff --git a/design/screens/10-cancel-pickup.png b/design/screens/10-cancel-pickup.png index a3c3085..9072263 100644 Binary files a/design/screens/10-cancel-pickup.png and b/design/screens/10-cancel-pickup.png differ diff --git a/design/screens/11-pickup-where.png b/design/screens/11-pickup-where.png index 661d60a..472b0cc 100644 Binary files a/design/screens/11-pickup-where.png and b/design/screens/11-pickup-where.png differ diff --git a/design/screens/12-pickup-when.png b/design/screens/12-pickup-when.png index e870396..2b803b4 100644 Binary files a/design/screens/12-pickup-when.png and b/design/screens/12-pickup-when.png differ diff --git a/design/screens/14-send-a-parcel.png b/design/screens/14-send-a-parcel.png index a5d5900..bfa3bfe 100644 Binary files a/design/screens/14-send-a-parcel.png and b/design/screens/14-send-a-parcel.png differ diff --git a/design/screens/16-pickup-booked.png b/design/screens/16-pickup-booked.png index 7b66464..60daa55 100644 Binary files a/design/screens/16-pickup-booked.png and b/design/screens/16-pickup-booked.png differ diff --git a/design/screens/17-receipt.png b/design/screens/17-receipt.png index a85c348..004e770 100644 Binary files a/design/screens/17-receipt.png and b/design/screens/17-receipt.png differ diff --git a/lib/ui/tokens.dart b/lib/ui/tokens.dart index b4d2ffc..3047c41 100644 --- a/lib/ui/tokens.dart +++ b/lib/ui/tokens.dart @@ -75,18 +75,34 @@ class DmColors { static const ink4 = Color(0xFFB4AEAA); // ── Surfaces ───────────────────────────────────────────────────────────── - /// The page canvas. + /// The page canvas. White. /// - /// Deepened on 2026-09-23. At `#F7F6F4` a white card on it was a 3% step, - /// so the 1px border was doing all the separating and every screen read as - /// a list of outlined boxes. A canvas the cards can sit *on* is what lets - /// the edge go quiet. - static const canvas = Color(0xFFF1F0EC); + /// ── This has been both, and the trade is real ── + /// + /// It was `#F7F6F4`, then deepened to `#F1F0EC` on 2026-09-23 so a white + /// card would sit *on* something and the 1px edge could go quiet. That + /// worked, and it also made every screen read as slightly dull — which is + /// the note that brought it here. + /// + /// You cannot have a white page and borderless cards: one of them has to do + /// the separating. On white, [DmCard] is held by its border and + /// [DmShadow.card] rather than by contrast, which is the iOS and Revolut + /// shape rather than the Airbnb one. That is the choice, made deliberately. + /// + /// Everything that needs to read as *recessed* — filled inputs, the + /// segmented groove, a sunken card — moved to [surfaceAlt] and [groove], + /// which are the only tokens still darker than the page. + static const canvas = Color(0xFFFFFFFF); static const surface = Color(0xFFFFFFFF); - /// Filled inputs, quiet chips, tiles, skeleton bases. Also the "sunken" - /// treatment for a disabled primary action. - static const surfaceAlt = Color(0xFFF1EFEC); + /// Filled inputs, quiet chips, tiles, skeleton bases, the "sunken" card and + /// the sunken treatment for a disabled primary action. + /// + /// With a white canvas this is the *only* thing that makes a surface read as + /// recessed, so it carries more weight than it used to. It was within a + /// point of the old canvas, which is why the groove below had to exist at + /// all; on white it does its own job again. + static const surfaceAlt = Color(0xFFF4F2EF); /// The bed a segmented control's chosen segment is raised out of. /// diff --git a/lib/ui/widgets/cards.dart b/lib/ui/widgets/cards.dart index 488b2e3..c51690b 100644 --- a/lib/ui/widgets/cards.dart +++ b/lib/ui/widgets/cards.dart @@ -65,7 +65,9 @@ class DmCard extends StatelessWidget { DmCardTone.plain => DmColors.surface, DmCardTone.fill => DmColors.brand, DmCardTone.wash => DmColors.brandSoft, - DmCardTone.sunken => DmColors.canvas, + // Not the canvas any more: the page is white, and a card filled with + // the page colour is not sunken, it is invisible. + DmCardTone.sunken => DmColors.surfaceAlt, }; Color get _edge => switch (tone) { @@ -106,15 +108,25 @@ class DmCard extends StatelessWidget { boxShadow: _lifts ? (raised ? DmShadow.cardRaised : DmShadow.card) : null, ), child: Container( - // A tone that is not white keeps its edge: a crimson or washed card is - // already separated from the canvas by its own colour, and a shadow - // under a saturated fill reads as grime rather than as lift. - foregroundDecoration: _lifts - ? null - : BoxDecoration( - borderRadius: radius, - border: Border.all(color: _edge), - ), + // ── Every card keeps its edge now ── + // + // A white card used to have none: the warm canvas underneath was doing + // the separating, and a border on top of that contrast read as an + // outlined box rather than a lifted surface. + // + // The page is white. A white card on it is invisible — measured, not + // guessed: a scan across a card boundary on the Orders golden was + // #FFFFFF from end to end, with the shadow contributing nothing the + // eye could find. One of the two has to do the separating, and with + // the page white it has to be the edge. + // + // The lift stays underneath it. Border plus a soft shadow is the iOS + // and Revolut shape; it is not the borderless Airbnb one, and that is + // the cost of a white page. + foregroundDecoration: BoxDecoration( + borderRadius: radius, + border: Border.all(color: _edge), + ), child: ClipRRect( borderRadius: radius, child: Column( diff --git a/test/snapshots/01-sign-in.png b/test/snapshots/01-sign-in.png index 89c785f..140f0d0 100644 Binary files a/test/snapshots/01-sign-in.png and b/test/snapshots/01-sign-in.png differ diff --git a/test/snapshots/01b-create-account.png b/test/snapshots/01b-create-account.png index 7e4be61..cf96ba5 100644 Binary files a/test/snapshots/01b-create-account.png and b/test/snapshots/01b-create-account.png differ diff --git a/test/snapshots/02-pin.png b/test/snapshots/02-pin.png index 89b71a8..796db05 100644 Binary files a/test/snapshots/02-pin.png and b/test/snapshots/02-pin.png differ diff --git a/test/snapshots/03-home.png b/test/snapshots/03-home.png index a351902..72e79ca 100644 Binary files a/test/snapshots/03-home.png and b/test/snapshots/03-home.png differ diff --git a/test/snapshots/03b-pickup-search.png b/test/snapshots/03b-pickup-search.png index 589fea0..9deed50 100644 Binary files a/test/snapshots/03b-pickup-search.png and b/test/snapshots/03b-pickup-search.png differ diff --git a/test/snapshots/04-orders.png b/test/snapshots/04-orders.png index 6baa1f5..c734ac1 100644 Binary files a/test/snapshots/04-orders.png and b/test/snapshots/04-orders.png differ diff --git a/test/snapshots/04b-orders-completed.png b/test/snapshots/04b-orders-completed.png index 439f2ee..f69076f 100644 Binary files a/test/snapshots/04b-orders-completed.png and b/test/snapshots/04b-orders-completed.png differ diff --git a/test/snapshots/05-account.png b/test/snapshots/05-account.png index eda2c4c..77f751a 100644 Binary files a/test/snapshots/05-account.png and b/test/snapshots/05-account.png differ diff --git a/test/snapshots/06-tracking.png b/test/snapshots/06-tracking.png index 44824da..9752cf4 100644 Binary files a/test/snapshots/06-tracking.png and b/test/snapshots/06-tracking.png differ diff --git a/test/snapshots/06b-cancel-sheet.png b/test/snapshots/06b-cancel-sheet.png index a3c3085..9072263 100644 Binary files a/test/snapshots/06b-cancel-sheet.png and b/test/snapshots/06b-cancel-sheet.png differ diff --git a/test/snapshots/07-pickup-where.png b/test/snapshots/07-pickup-where.png index 661d60a..472b0cc 100644 Binary files a/test/snapshots/07-pickup-where.png and b/test/snapshots/07-pickup-where.png differ diff --git a/test/snapshots/07b-pickup-when.png b/test/snapshots/07b-pickup-when.png index e870396..2b803b4 100644 Binary files a/test/snapshots/07b-pickup-when.png and b/test/snapshots/07b-pickup-when.png differ diff --git a/test/snapshots/08-send.png b/test/snapshots/08-send.png index a5d5900..bfa3bfe 100644 Binary files a/test/snapshots/08-send.png and b/test/snapshots/08-send.png differ diff --git a/test/snapshots/11-booked.png b/test/snapshots/11-booked.png index 7b66464..60daa55 100644 Binary files a/test/snapshots/11-booked.png and b/test/snapshots/11-booked.png differ diff --git a/test/snapshots/12-receipt.png b/test/snapshots/12-receipt.png index a85c348..004e770 100644 Binary files a/test/snapshots/12-receipt.png and b/test/snapshots/12-receipt.png differ