Designedย by
No items found.
Subject


Bookmark
Bookmark
Category
Tech Stack
Added on
January 29, 2026

Prelude Generate Key Structure

A Modal That Actually Feels Considered

First thing you notice is that yellow warning box. It pops hard against the otherwise neutral palette and does exactly what it should: grab attention before you do something irreversible. The hierarchy inside the modal is tight. Title, description, warning, input, actions. No fluff.

Guided Setup Done Right

Behind the modal, there's a numbered onboarding flow with expandable sections. Steps 1 through 4 with plus/minus toggles. It's simple but it works. The green numbered circles give just enough visual progression without feeling like a homework assignment. That "Skip to Dashboard" link at the bottom is a smart pressure release valve for impatient users.

Typography and Spacing Carry the Weight

The type is clean and readable. Nothing fancy. The button contrast between "Cancel" as plain text and "Generate Key" as a solid black pill creates a clear primary/secondary action split. The Resources section at the bottom with three cards feels like a thoughtful addition rather than an afterthought. Prelude's balance indicator and green "Top Up" button in the header are subtle but functional touches.
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