Settle flow
"Settle in one tap of UPI." The settle flow is the product's highest-value moment — it's where the score resets and friendship can breathe again. Every step earns trust: show who owes who, let them pick their UPI app, confirm with one tap, celebrate the resolution.
Flow steps
Step 1 — Trigger: owe amount card
The owe amount card surfaces in the balances tab and at the top of a group's expense list when there's an outstanding balance. The amount is displayed in coral — the only surface where --coral is used for a numeric display. It's not an error; it's a state that needs action.
The "Settle up" button is always teal. It's the only teal button visible in this context. Tapping it triggers the settle sheet or navigates to the confirmation step.
Step 2 — Confirmation: settle card with UPI picker
The settle card uses the same frosted glass treatment as the expense composer. It's always on a colored surface — never on white, because the blur effect becomes invisible.
Amount: Bricolage Grotesque 700, 40px, tight letter-spacing. It should feel weighty — money is moving. The context line ("Farzi Cafe dinner · Aarav paid") grounds the number in the expense it settles.
The avatar pair shows direction: payer left, receiver right, → between them. This is the only place in the app where we show money direction graphically.
UPI squircle pattern
UPI app icons live in squircles: 48×48px, 12px border radius, translucent warm fill. They cycle through a "pick" state every ~1500ms to demonstrate optionality without forcing a choice. The pick state lifts the squircle: scale(1.08) translateY(-3px) with teal fill.
Squircle labels use JetBrains Mono 10px in uppercase. The selected app's label switches to --teal. The settle button label reflects the selected app: "Pay ₹1,400 via PhonePe →" — never generic "Pay now."
Brand icons come from Simple Icons CDN, re-tinted to currentColor. They are never shown in native brand colors. A squircle is always single-color: ink on cream, paper on dark. CRED doesn't have a Simple Icons glyph — show "CR" as text in the display font.
Step 3 — Processing
The processing state appears while the UPI deeplink opens. The spinner is teal: 48px ring, 3px stroke, 800ms spin. The copy is honest: "Opening PhonePe" not "Processing payment." The payment itself happens in the UPI app — Settld is just the launcher.
When the user returns from the UPI app, show a confirmation prompt: "Did the payment go through?" Yes → success, No → return to step 2. Never assume success — always confirm on return.
Step 4 — Success: all settled up
"All settled up." is a celebrated state. The success mark pops in with scale(0.6) → scale(1) using the spring easing. Confetti particles (butter, teal, coral in small squares/circles) fall from off-screen.
The copy is specific: "₹1,400 sent to Aarav. You're even." — not "Payment successful" or "Transaction complete." Those are bank statement words. This is friendship accounting — "You're even" is the emotional resolution, not the technical one.
Confetti specs: 6–10px particles, mix of squares (2px radius) and circles, in butter/teal/coral. Each falls ~200px with rotation from 0→720deg over 2s. Staggered animation-delay 0–600ms so they don't all appear simultaneously. Respect prefers-reduced-motion — if set, skip the fall animation, just fade in the particles at 0.3 opacity then fade out.