Designedย by
No items found.
Subject


Bookmark
Bookmark
Category
Tech Stack
Added on
January 29, 2026

Prelude Checkout Structure

Clean Modal With Clear Payment Hierarchy

First thing you notice is that modal. It sits perfectly centered over the dimmed dashboard, pulling all focus exactly where it needs to be. The payment method selection uses a blue outline on the active "Credit Card" option with a checkmark badge, making the current choice instantly obvious. Smart.

Dashboard That Doesn't Try Too Hard

Behind the modal, the Prelude Verify API dashboard keeps things minimal. Muted greens for the nav pill, soft grays everywhere else. The stats layout is dead simple: Verifications Volume, Conversion Rate, Conversion Time all in a row. Zero visual clutter. The dual-section approach splitting "Total" and "Average" graphs with their own legends works well for scanning.

Typography and Spacing Do the Heavy Lifting

The type hierarchy in the modal is particularly good. Bold "Select a Method" header, lighter descriptive text, then the amount in monospace-style euro formatting. The "Continue with Stripe" button is a solid dark fill that contrasts against the white card. One standout detail: the region showing "Unknown" with a blue question mark icon. Honest UI that doesn't hide missing data.
Similar screens

Upgrade to SaaSFrame Pro now to see similar examples.

Monthly

$18 /month

Billed $18 monthly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now

Quarterly

$16 /month

Billed $48 quarterly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now

Yearly

$15 /month

Billed $180 yearly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now