Designedย by
No items found.
Subject


Bookmark
Bookmark
Category
Tech Stack
Added on
January 29, 2026

Prelude Add Number Structure

Clean Onboarding With a Smart Modal Pattern

First thing you notice is that stepped onboarding flow. Numbered green circles (1 through 4) create a clear vertical progression that feels approachable, not overwhelming. Each step is an expandable accordion, which keeps the page from becoming a wall of forms. Step 4 is open, revealing the allow list setup area with an empty state illustration that's minimal but effective.

The Modal Does Its Job

That "Add Number" dialog is dead simple. Phone input with a country selector, two buttons, done. The hierarchy is obvious. "Add Number" gets the dark filled button, "Cancel" is text-only. No confusion about the primary action. The placeholder text shows the expected format, which is a small but thoughtful touch.

Restrained Palette, Strong Hierarchy

The color story is basically white, light gray, and green. Typography is clean sans-serif with good weight contrast between headings and body text. The top nav uses a pill-shaped green badge for "Verify API" that pops against the neutral toolbar. Balance indicator top-right showing โ‚ฌ0.00 keeps billing visible without being pushy. That "Skip to Dashboard" escape hatch at the bottom is a smart pressure release valve.
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