Redesign: Poppins, a two-step destination, and a splash that says what the app does

The effort pass, end to end. Every screen was run through one test — if I
remove this sentence, does the customer make a worse decision? — and the parts
that failed it are gone.

The flow

  Home ▸ BOOK ▸ Where is it going? ▸ When shall we collect? ▸ details ▸ booked

BOOK opens a sheet, not a form. The destination is browsed state-then-district
because a flat list of every serviceable district survives twelve and not
sixty, and search cuts across states because somebody who knows they are
sending to Chennai should not have to know which state it is in. Districts
multi-select, but only where the server allows it: BookingLimits advertises
maxDestinations: 1 until the Miler build keys on consignmentid, and a sheet
that ignored that would sell a booking the network cannot complete.

The pickup window is now a step the customer answers rather than a slot chosen
for them. A pickup window is a promise about somebody's afternoon.

What the screens stopped saying

Home lost the orb caption for returning customers and a four-cell live card.
Send lost the city strip, both address fields, the optional disclosure and
three sentences about charging — the route, the packages and the button are
what is left. Tracking lost a radar with a bike in it, a Milers-in-your-zone
count, a "Step 2 of 7" and a sentence describing the screen you were looking
at. The window sheet lost "Fastest pickup", "4 Milers nearby" and "Relaxed
evening handover".

Type

Poppins, which has no variable release — four static cuts, and the sans styles
set fontWeight alone because fontVariations on a static font is ignored in
silence. Every weight dropped a step and the tracking went deeper: Poppins is
built on near-circles and carries more ink than the humanist faces before it.

Objects

One lit sphere on Home, and the primary button now takes its gradient and rim
because a committing action that is not lit like the hero reads as a different
material. The tracking rail's connector is crimson as far as the parcel has
come, so the line is the progress bar. Confirmation is a white tick on green:
crimson is this app's action colour and that screen has nothing left to do.

Bugs found on the way

The OTP screen dropped digits. Four fields passing focus along lose a keystroke
that arrives mid-transition, so "1234" became "124" and the screen answered
"That code did not match" — blaming the customer for its own race. One field
now, four boxes that only draw.

Nothing ever asked for the customer's location: detectPickupLocation was the
OTP screen's job, so a restored session or an auto-login never triggered the
permission prompt and the pickup map had nothing to centre on.

The launcher icon and both splash screens pointed at a house drawn as two
vector paths — a placeholder that shipped.

The splash clock started when the widget was built rather than when it was
visible, so the truck got 0.45s of a 1.8s beat behind Android's own splash.
It waits on waitUntilFirstFrameRasterized now, raced against a timeout so a
binding that never reports one cannot strand the app.

Also: design/screens/ holds all 19 screens under readable names, tool/ has the
scripts that refresh them and rebrand the Lottie, and DESIGN.md is current.

flutter analyze clean. 88 tests, 1 skipped.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EqVJPB9B4QuieZnBAAKgYQ

lib/main.dart

@@ -1,17 +1,31 @@
 import 'dart:async';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
+import 'data/app_config.dart';
+
 import 'state/app_scope.dart';
 import 'state/app_state.dart';
 import 'ui/screens/auth/login_screen.dart';
 import 'ui/screens/shell_screen.dart';
+import 'ui/screens/splash_screen.dart';
 import 'ui/tokens.dart';
 
 void main() {
   WidgetsFlutterBinding.ensureInitialized();
 
+  // What this build is, in the log, on every launch.
+  //
+  // Not a debugging leftover: the offline build and the auto-login build look
+  // identical to the real one from the outside, and the whole reason the first
+  // mock was deleted was that nobody could tell which mode a handset was in.
+  // The Account screen says it too, but a build that cannot get past the login
+  // screen cannot show you the Account screen — which is exactly the session
+  // where you most need to know. Release builds print nothing.
+  if (!kReleaseMode) debugPrint('[BUILD] ${AppConfig.describe}');
+
   // Draw behind the system bars — expected on Android 15+ and the reason the
   // screens manage their own SafeArea insets.
   SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
@@ -97,7 +111,7 @@ ThemeData buildDoormileTheme() {
 
   return ThemeData(
     useMaterial3: true,
-    fontFamily: 'Manrope',
+    fontFamily: 'Poppins',
     colorScheme: scheme,
     scaffoldBackgroundColor: DmColors.bg,
     splashFactory: InkSparkle.splashFactory,
@@ -128,8 +142,25 @@ ThemeData buildDoormileTheme() {
   );
 }
 
-/// Forward navigation slides in from the right and fades, matching the
-/// prototype's screen transition.
+/// Forward navigation, as a shared axis.
+///
+/// ── What was wrong with the old one ──
+///
+/// The incoming page slid 6% from the right and faded, and the page behind it
+/// did nothing at all — it sat still until it was covered. That is the single
+/// thing that makes a push feel like a slide projector rather than like
+/// movement: both surfaces have to travel, or the eye reads the new one as
+/// pasted over a photograph of the old one.
+///
+/// Now the outgoing page slides the other way and dims as it leaves, so the
+/// pair share one axis of motion; the incoming page carries a small scale-up
+/// so it arrives *towards* the viewer rather than merely across; and the fade
+/// is held back until the travel is a third done, which is what stops the two
+/// pages muddying into each other mid-transition.
+///
+/// The timing lives on [DmPageRoute]: 420ms in, 340ms back. Going back is
+/// always quicker than going forward — the customer already knows what is
+/// behind them.
 class _DmPageTransitions extends PageTransitionsBuilder {
   const _DmPageTransitions();
 
@@ -141,19 +172,45 @@ class _DmPageTransitions extends PageTransitionsBuilder {
     Animation<double> secondaryAnimation,
     Widget child,
   ) {
-    final curved = CurvedAnimation(
+    final enter = CurvedAnimation(
       parent: animation,
-      curve: Curves.easeOutCubic,
-      reverseCurve: Curves.easeInCubic,
+      curve: DmMotion.enter,
+      reverseCurve: DmMotion.enter.flipped,
     );
-    return FadeTransition(
-      opacity: curved,
-      child: SlideTransition(
-        position: Tween(
-          begin: const Offset(0.06, 0),
-          end: Offset.zero,
-        ).animate(curved),
-        child: child,
+    final exit = CurvedAnimation(
+      parent: secondaryAnimation,
+      curve: DmMotion.enter,
+      reverseCurve: DmMotion.enter.flipped,
+    );
+
+    return SlideTransition(
+      // The page being covered leaves to the left, a third of the distance the
+      // arriving one travels. Parallax: the thing further away moves less.
+      position: Tween(
+        begin: Offset.zero,
+        end: const Offset(-0.09, 0),
+      ).animate(exit),
+      child: FadeTransition(
+        opacity: Tween(begin: 1.0, end: 0.6).animate(exit),
+        child: SlideTransition(
+          position: Tween(
+            begin: const Offset(0.14, 0),
+            end: Offset.zero,
+          ).animate(enter),
+          child: FadeTransition(
+            // Held back: at 0 the page is transparent, at 0.35 of the travel
+            // it is solid. Fading over the whole distance leaves both pages
+            // half-visible through each other for most of it.
+            opacity: CurvedAnimation(
+              parent: animation,
+              curve: const Interval(0, 0.35, curve: Curves.easeOut),
+            ),
+            child: ScaleTransition(
+              scale: Tween(begin: 0.97, end: 1.0).animate(enter),
+              child: child,
+            ),
+          ),
+        ),
       ),
     );
   }
@@ -164,16 +221,32 @@ class _DmPageTransitions extends PageTransitionsBuilder {
 /// Three states, and the middle one is the reason this widget exists: until the
 /// stored session has been looked for we do not yet know whether this customer
 /// is signed in, and showing them a login form that vanishes a moment later is
-/// worse than showing them nothing. The Android 12 splash is still up for most
-/// of it.
-class _Launch extends StatelessWidget {
+/// worse than showing them nothing.
+///
+/// That middle state used to be a blank canvas — correct, and a hole where the
+/// app's first impression goes. It is [SplashScreen] now, which owns both the
+/// wait and its own minimum, and tells this widget when it is finished. The
+/// native window background carries the same mark from process start, so the
+/// handover into Flutter is invisible.
+class _Launch extends StatefulWidget {
   const _Launch();
 
+  @override
+  State<_Launch> createState() => _LaunchState();
+}
+
+class _LaunchState extends State<_Launch> {
+  bool _splashDone = false;
+
   @override
   Widget build(BuildContext context) {
     final app = AppScope.of(context);
-    if (app.restoringSession) {
-      return const Scaffold(backgroundColor: DmColors.canvas, body: SizedBox());
+
+    if (!_splashDone) {
+      return SplashScreen(
+        ready: !app.restoringSession,
+        onDone: () => setState(() => _splashDone = true),
+      );
     }
     return app.isSignedIn ? const ShellScreen() : const LoginScreen();
   }