A modern, clean and minimalist interpretation of S-13, the screen where a walk-in customer confirms what they pay and what they receive. The structure and restraint come from Stripe's web and app. The colours, shapes and typeface come from the PERURI Digital Summit 2026 key visual.
Tablet at 1280×800, scaled to fit. Sample numbers. "[Nama money changer]", "[Logo]" and "[Nama platform]" stay placeholders (Q-24).
Six moves, each traced to Stripe screens on Mobbin and translated to PERURI's palette and a counter tablet read at arm's length.
Stripe Checkout puts the merchant's colour on the left and the task on the right. Ours: PERURI navy holds the step, the title and the "powered by" line; the white side holds only the numbers and the decision.
Stripe: payment link previewStripe's signature is a single diagonal gradient. Ours is the key visual's angled hexagons in electric blue and purple, in the corner of the navy panel only, so the delight never competes with the amounts.
Stripe: homepage heroStripe never uses pure black; its text is a deep slate-navy on cool off-white. Ours: ink #141A4F and slate #5B6185, both drawn from PERURI navy, on white with #E3E5F0 hairlines.
Stripe: payment detailStripe's receipts pair "AMOUNT PAID" labels with the figure, and show the currency code lighter than the number. Ours: ANDA MEMBAYAR over a 74 px amount; "USD" and "Rp" are kept first, as the format rule requires, but set lighter.
Stripe: receiptStripe groups figures in a single bordered surface with a faint layered shadow, and puts the summary in a tinted strip. Ours: pay and receive share one sheet with an exchange mark, and the rate and the lock time sit in a lavender-tinted footer.
Stripe Dashboard app: paymentStripe's blurple marks the action and little else. Ours: PERURI electric blue fills only the confirm button and the small icons. Purple stays in the shapes, because purple text on white fails contrast (3:1).
Stripe: checkoutPERURI colours sampled from the key visual (Figma node 387:16619; "Legacy Purple" is a named variable there). Neutrals derived for the UI.
#202887 · summary panel#3C3CF8 · action, icons#E957FF · shapes only#CFCFFF · labels on navy#141A4F · text#5B6185 · labels#F1F1FF · fact strip#E3E5F0 · borders