Mudita

Design harness

Candidate anchor screens for the design harness. Built from Figma, on the design system, each one filling the viewport so it can be annotated at any window size.

These are candidates, not the bank. A screen earns a row in harness/run-assets/exemplars.json one at a time, when it has been annotated and there is a reason to retrieve it.

Cancel flow

All four steps, one proto stitched

The whole flow in a single file: the buttons advance it, and a step switcher at the bottom jumps between screens (arrow keys move, H hides it). Each step keeps the exact CSS it was built with, scoped so the steps cannot overwrite each other. Verified element by element against the four standalone files below.

Step 1: renewal reminder 160:2310

The interception before cancel: renewal date and what is about to be charged.

Step 2: what you keep 160:2163

Loss framing against the decks and credits already in the account.

Step 3: cancel reasons 160:2137

Single-select reason list. The flow has no step 4 in the source file.

Step 5: renewal cancelled 160:2296

Confirmation, with the date access actually ends.

Checkout

Checkout with offer 160:2716

Plan picker plus Stripe payment panel, discounted pricing shown against struck-through list price.

Checkout without offer 160:3238

Same shell, no discount. Carries the $XXX/year placeholder that is in the Figma source.

Checkout without offer, normal user 160:2983

The non-PRO variant of the same surface.

Zero credits 160:3676

Checkout entered from an exhausted credit balance. The frame has no content behind the scrim.

Gold upsell

Gold upgrade modal 1:812

Three-feature upsell with a countdown. Already a row in exemplars.json.

Gold upsell, 50% off 454:712

Rebuilt as HTML from a raster screenshot in the source file, over a reconstructed checkout background.

Empty in source

Pro discount 160:2633 Empty node

The Figma node is genuinely empty (two descendants, no text). Kept as an honest record of the gap rather than invented content.

Also in scope, from Mani

Mani's pricing protos, annotated where they already live. Nothing to rebuild here, this is just the reminder that they are part of the corpus. zero-credits.html and key-screens/pricing are already rows in exemplars.json.

Deck ready modal, expanded To annotate

Early renewal To annotate

Feature modal To annotate