Module 1 — Authentication
3 frames — Login, Sign Up, Password Recovery
┌─────────────────────────────────────────────────────────────┐
│ [empty - centered card] │
│ │
│ ┌──────────────────────┐ │
│ │ LeadManager Pro │ │
│ │ [logo/icon] │ │
│ └──────────────────────┘ │
│ │
│ ┌──────────────────────┐ │
│ │ Email │ │
│ └──────────────────────┘ │
│ ┌──────────────────────┐ │
│ │ Password │ │
│ └──────────────────────┘ │
│ │
│ [ Sign In ] ← blue button │
│ │
│ Forgot password? · Sign up │
│ │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ [empty - centered card] │
│ │
│ ┌──────────────────────┐ │
│ │ LeadManager Pro │ │
│ └──────────────────────┘ │
│ │
│ ┌──────────────────────┐ │
│ │ Full Name │ │
│ └──────────────────────┘ │
│ ┌──────────────────────┐ │
│ │ Work Email │ │
│ └──────────────────────┘ │
│ ┌──────────────────────┐ │
│ │ Password │ │
│ └──────────────────────┘ │
│ ┌──────────────────────┐ │
│ │ Confirm Password │ │
│ └──────────────────────┘ │
│ │
│ [ Create Account ] ← blue button │
│ │
│ Already have an account? Sign in │
│ │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ [empty - centered card] │
│ │
│ ┌──────────────────────┐ │
│ │ LeadManager Pro │ │
│ └──────────────────────┘ │
│ │
│ Enter your email and we'll send │
│ you a link to reset your password. │
│ │
│ ┌──────────────────────┐ │
│ │ Email │ │
│ └──────────────────────┘ │
│ │
│ [ Send Reset Link ] ← blue button │
│ │
│ Remember password? Sign in │
│ │
└─────────────────────────────────────────────────────────────┘
Module 2 — Admin Dashboard
2 frames — Overview, Customer Management
┌────────────┬────────────────────────────────────────────────┐
│ │ Breadcrumbs: Admin > Overview │
│ Sidebar ├────────────────────────────────────────────────┤
│ │ │
│ [icon] │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ Overview │ │ Users │ │ Leads │ │ Sends │ │
│ │ │ 24 │ │ 1,847 │ │ 312 │ │
│ [icon] │ └─────────┘ └─────────┘ └─────────┘ │
│ Customers │ │
│ │ Recent Signups │
│ [icon] │ ┌────────────────────────────────────────┐ │
│ Packages │ │ jane@acme.com today │ │
│ │ │ bob@startup.io yesterday │ │
│ [icon] │ │ alice@corp.net 2 days ago │ │
│ Logs │ └────────────────────────────────────────┘ │
│ │ │
│ [icon] │ System Logs │
│ Settings │ ┌────────────────────────────────────────┐ │
│ │ │ [INFO] New signup: jane@acme.com │ │
│ │ │ [INFO] Import completed: 847 leads │ │
│ │ │ [WARN] SMTP test failed: mail@client.com│ │
│ │ └────────────────────────────────────────┘ │
└────────────┴────────────────────────────────────────────────┘
┌────────────┬────────────────────────────────────────────────┐
│ │ Breadcrumbs: Admin > Customers │
│ Sidebar ├────────────────────────────────────────────────┤
│ │ │
│ [icon] │ Customers [+ Add] │
│ Overview │ │
│ │ ┌────────────────────────────────────────┐ │
│ [icon] │ │ Search customers... 🔍 │ │
│ Customers │ └────────────────────────────────────────┘ │
│ ●active │ │
│ │ ┌────────────────────────────────────────┐ │
│ [icon] │ │ ○ jane@acme.com │ Pro │ 847 leads│ │
│ Packages │ │ Active │ Since Jan 2026 │ │
│ │ ├────────────────────────────────────────┤ │
│ [icon] │ │ ○ bob@startup.io │ Free │ 23 leads │ │
│ Logs │ │ Suspended │ Since Mar 2026 │ │
│ │ ├────────────────────────────────────────┤ │
│ [icon] │ │ ○ alice@corp.net │ Pro │ 312 leads │ │
│ Settings │ │ Active │ Since Feb 2026 │ │
│ │ └────────────────────────────────────────┘ │
└────────────┴────────────────────────────────────────────────┘
Module 3 — Customer Dashboard
3 frames — Leads Overview, Lead Detail, Bulk Actions
┌────────────┬────────────────────────────────────────────────┐
│ │ Breadcrumbs: Dashboard │
│ Sidebar ├────────────────────────────────────────────────┤
│ │ │
│ [icon] │ Dashboard [Send Campaign] │
│ Dashboard │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ [icon] │ │ Total │ │ Valid │ │ Sent │ │
│ Leads │ │ Leads │ │ Emails │ │Campaigns│ │
│ ●active │ │ 1,847 │ │ 1,203 │ │ 12 │ │
│ │ └─────────┘ └─────────┘ └─────────┘ │
│ [icon] │ │
│ Import │ Recent Leads │
│ │ ┌────┬─────────────────┬────────────┬────┐ │
│ [icon] │ │ ☐ │ Name │ Email │St. │ │
│ Campaigns │ ├────┼─────────────────┼────────────┼────┤ │
│ │ │ ☐ │ Jane Cooper │ jane@... │ ✓ │ │
│ [icon] │ │ ☐ │ Wade Warren │ wade@... │ ✓ │ │
│ Verify │ │ ☐ │ Esther Howard │ esther@... │ ? │ │
│ │ │ ☐ │ Cameron │ cam@... │ ✗ │ │
│ [icon] │ └────┴─────────────────┴────────────┴────┘ │
│ SMTP │ │
│ │ Showing 1-20 of 1,847 [< 1 2 ... 93 >] │
└────────────┴────────────────────────────────────────────────┘
┌────────────┬────────────────────────────────────────────────┐
│ │ Breadcrumbs: Leads > Jane Cooper │
│ Sidebar ├────────────────────────────────────────────────┤
│ │ │
│ [icon] │ Jane Cooper [Edit] [Delete]│
│ Dashboard │ │
│ │ ┌────────────────────────────────────────┐ │
│ [icon] │ │ Email │ jane@acme.com │ │
│ Leads │ ├──────────┼─────────────────────────────┤ │
│ │ │ Phone │ +1 555 123 4567 │ │
│ [icon] │ ├──────────┼─────────────────────────────┤ │
│ Import │ │ Company │ Acme Corp │ │
│ │ ├──────────┼─────────────────────────────┤ │
│ [icon] │ │ Status │ [Valid ✓] [Verify Again] │ │
│ Campaigns │ ├──────────┼─────────────────────────────┤ │
│ │ │ Tags │ [VIP] [Q1-2026] │ │
│ [icon] │ ├──────────┼─────────────────────────────┤ │
│ Verify │ │ Notes │ Met at conference. │ │
│ │ │ │ Interested in enterprise. │ │
│ [icon] │ └──────────┴─────────────────────────────┘ │
│ SMTP │ │
│ │ Send History │
│ │ ┌────────────────────────────────────────┐ │
│ │ │ Q1 Campaign │ Sent Jan 15 │ ✓ │ │
│ │ │ Launch email │ Sent Feb 1 │ ✓ │ │
│ │ └────────────────────────────────────────┘ │
└────────────┴────────────────────────────────────────────────┘
┌────────────┬────────────────────────────────────────────────┐
│ │ Breadcrumbs: Leads │
│ Sidebar ├────────────────────────────────────────────────┤
│ │ │
│ [icon] │ Leads (1,847) [+ Add Lead] [Bulk ▾] │
│ Dashboard │ └─ Delete selected │
│ │ └─ Verify selected │
│ [icon] │ └─ Export selected │
│ Leads │ │
│ ●active │ ┌────┬─────────────────┬────────────┬────┐ │
│ │ │ ☑ │ Name │ Email │St. │ │
│ [icon] │ ├────┼─────────────────┼────────────┼────┤ │
│ Import │ │ ☑ │ Jane Cooper │ jane@... │ ✓ │ │
│ │ │ ☑ │ Wade Warren │ wade@... │ ✓ │ │
│ [icon] │ │ ☐ │ Esther Howard │ esther@... │ ? │ │
│ Campaigns │ │ ☐ │ Cameron │ cam@... │ ✗ │ │
│ │ └────┴─────────────────┴────────────┴────┘ │
│ [icon] │ │
│ Verify │ 3 of 1,847 selected [Clear] │
│ │ │
│ [icon] │ [Delete 3] [Verify 3] [Export CSV] │
│ SMTP │ │
└────────────┴────────────────────────────────────────────────┘
Module 4 — Google Drive CSV Import
3 frames — Paste Link, Column Mapping, Import Progress
┌────────────┬────────────────────────────────────────────────┐
│ │ Breadcrumbs: Import │
│ Sidebar ├────────────────────────────────────────────────┤
│ │ │
│ [icon] │ Import from Google Drive │
│ Dashboard │ │
│ │ ┌────────────────────────────────────────┐ │
│ [icon] │ │ Paste your Google Drive shared link │ │
│ Leads │ │ │ │
│ │ │ https://drive.google.com/file/d/... │ │
│ [icon] │ └────────────────────────────────────────┘ │
│ Import │ │
│ ●active │ ┌────────────────────────────────────────┐ │
│ │ │ [ Fetch File ] │ │
│ [icon] │ └────────────────────────────────────────┘ │
│ Campaigns │ │
│ │ ── OR ── │
│ [icon] │ │
│ Verify │ ┌────────────────────────────────────────┐ │
│ │ │ 📁 Import from local CSV file │ │
│ [icon] │ └────────────────────────────────────────┘ │
│ SMTP │ │
└────────────┴────────────────────────────────────────────────┘
┌────────────┬────────────────────────────────────────────────┐
│ │ Breadcrumbs: Import > Map Columns │
│ Sidebar ├────────────────────────────────────────────────┤
│ │ │
│ [icon] │ Map CSV Columns to Lead Fields │
│ Dashboard │ │
│ │ File: leads_q1_2026.csv (1,247 rows) │
│ [icon] │ │
│ Leads │ ┌────────────────────────────────────────┐ │
│ │ │ CSV Column │ Lead Field │ │
│ [icon] │ ├──────────────────┼───────────────────┤ │
│ Import │ │ A │ Email [▾] │ │
│ │ │ B │ Name [▾] │ │
│ [icon] │ │ C │ Company [▾] │ │
│ Campaigns │ │ D │ Phone [▾] │ │
│ │ │ E │ [skip] [▾] │ │
│ [icon] │ │ F │ [skip] [▾] │ │
│ Verify │ └──────────────────────────────────────┘ │
│ │ │
│ [icon] │ Preview (first 3 rows) │
│ SMTP │ ┌────────────────────────────────────────┐ │
│ │ │ jane@acme.com │ Jane │ Acme │ ... │ │
│ │ └────────────────────────────────────────┘ │
│ │ │
│ │ [ Cancel ] [ Start Import ] │
└────────────┴────────────────────────────────────────────────┘
┌────────────┬────────────────────────────────────────────────┐
│ │ Breadcrumbs: Import > In Progress │
│ Sidebar ├────────────────────────────────────────────────┤
│ │ │
│ [icon] │ Importing leads_q1_2026.csv │
│ Dashboard │ │
│ │ ┌────────────────────────────────────────┐ │
│ [icon] │ │ ████████████░░░░░░░░░ 62% │ │
│ Leads │ │ 774 / 1,247 rows processed │ │
│ │ │ 12 rows with errors │ │
│ [icon] │ └────────────────────────────────────────┘ │
│ Import │ │
│ ●active │ ── Errors (click to review) ── │
│ │ ┌────────────────────────────────────────┐ │
│ [icon] │ │ Row 23: Invalid email format │ │
│ Campaigns │ │ Row 41: Duplicate email address │ │
│ │ │ Row 88: Missing required field (name) │ │
│ [icon] │ └────────────────────────────────────────┘ │
│ Verify │ │
│ │ [Cancel Import] │
└────────────┴────────────────────────────────────────────────┘
Module 5 — Email Verification
2 frames — Single Verify Modal, Bulk Verify
┌─────────────────────────────────────────────────────────────┐
│ Verify: jane@acme.com │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ ✓ Syntax check ✓ Passed │ │
│ │ ✓ MX record lookup ✓ Found: gmail.com │ │
│ │ ✓ SMTP connection ✓ Connected │ │
│ │ ✓ Mailbox exists ✓ jane@acme.com exists │ │
│ │ ✓ Not disposable ✓ Passed │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ Result: VALID │
│ │
│ [ Close ] │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ Verify 47 Selected Leads │
│ │
│ Processing with: celery worker on localhost │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ ██████████████████░░░░░░░░░ 23/47 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ jane@acme.com ✓ Valid │ │
│ │ wade@startup.io ✓ Valid │ │
│ │ esther@corp.net ? Uncertain (server timeout)│ │
│ │ cam@co.com ✗ Invalid (mailbox full) │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ Summary: 35 valid · 8 uncertain · 4 invalid │
│ Time elapsed: 1m 23s │
│ │
│ [ Cancel ] [ Download Report ] │
└─────────────────────────────────────────────────────────────┘
Module 6 — SMTP Configuration
1 frame — SMTP Settings Form
┌────────────┬────────────────────────────────────────────────┐
│ │ Breadcrumbs: SMTP Settings │
│ Sidebar ├────────────────────────────────────────────────┤
│ │ │
│ [icon] │ SMTP Configuration │
│ Dashboard │ │
│ │ Used to send emails from YOUR address. │
│ [icon] │ We never store your password in plain text. │
│ Leads │ │
│ │ ┌────────────────────────────────────────┐ │
│ [icon] │ │ SMTP Host │ smtp.gmail.com │ │
│ Import │ ├───────────────────┼────────────────────┤ │
│ │ │ Port │ 587 │ │
│ [icon] │ ├───────────────────┼────────────────────┤ │
│ Campaigns │ │ Username │ your@email.com │ │
│ │ ├───────────────────┼────────────────────┤ │
│ [icon] │ │ Password │ •••••••••••••••• │ │
│ Verify │ ├───────────────────┼────────────────────┤ │
│ │ │ Use TLS │ [✓] Yes │ │
│ [icon] │ └───────────────────────────────────────┘ │
│ SMTP │ │
│ ●active │ [ Test Connection ] [ Save ] │
│ │ │
│ [icon] │ Last tested: Jan 15, 2026 — ✓ Connected │
│ Settings │ │
└────────────┴────────────────────────────────────────────────┘
Module 7 — Bulk Email Campaigns
3 frames — Compose, Sending, Results
┌────────────┬────────────────────────────────────────────────┐
│ │ Breadcrumbs: Campaigns > New Campaign │
│ Sidebar ├────────────────────────────────────────────────┤
│ │ │
│ [icon] │ New Campaign [Save Draft] │
│ Dashboard │ │
│ │ ┌────────────────────────────────────────┐ │
│ [icon] │ │ Subject: │ │
│ Leads │ │ Exclusive offer for Q1 leads │ │
│ │ └────────────────────────────────────────┘ │
│ [icon] │ │
│ Import │ ┌────────────────────────────────────────┐ │
│ │ │ To: [○ All valid leads (1,203)] │ │
│ [icon] │ │ [○ Selected tags: VIP, Q1] │ │
│ Campaigns │ │ [○ Custom filter...] │ │
│ ●active │ └────────────────────────────────────────┘ │
│ │ │
│ [icon] │ ┌────────────────────────────────────────┐ │
│ Verify │ │ Body: │ │
│ │ │ Hi {{first_name}}, │ │
│ [icon] │ │ │ │
│ SMTP │ │ We have an exclusive offer for you... │ │
│ │ │ │ │
│ [icon] │ │ [B] [I] [Link] [Personalize ▾] │ │
│ Settings │ └────────────────────────────────────────┘ │
│ │ │
│ │ Preview: [Desktop] [Mobile] │
│ │ │
│ │ [Cancel] [Send Campaign →] │
└────────────┴────────────────────────────────────────────────┘
┌────────────┬────────────────────────────────────────────────┐
│ │ Breadcrumbs: Campaigns > Q1 Offer > Sending │
│ Sidebar ├────────────────────────────────────────────────┤
│ │ │
│ [icon] │ Sending: Q1 Exclusive Offer │
│ Dashboard │ Status: ● Sending │
│ │ │
│ [icon] │ ┌────────────────────────────────────────┐ │
│ Leads │ │ ████████████████░░░░░░ 847/1,203 │ │
│ │ │ 847 of 1,203 emails sent │ │
│ [icon] │ │ 23 failed · 0 bounced │ │
│ Import │ └────────────────────────────────────────┘ │
│ │ │
│ [icon] │ Recent sends │
│ Campaigns │ ┌────────────────────────────────────────┐ │
│ ●active │ │ jane@acme.com ✓ Sent │ │
│ │ │ wade@startup.io ✓ Sent │ │
│ [icon] │ │ cam@co.com ✗ Failed (recip err)│ │
│ Verify │ └────────────────────────────────────────┘ │
│ │ │
│ [icon] │ [Pause Sending] [Cancel All] │
│ SMTP │ │
└────────────┴────────────────────────────────────────────────┘
┌────────────┬────────────────────────────────────────────────┐
│ │ Breadcrumbs: Campaigns > Q1 Offer > Results │
│ Sidebar ├────────────────────────────────────────────────┤
│ │ │
│ [icon] │ Q1 Exclusive Offer [← Back to List] │
│ Dashboard │ Sent Jan 20, 2026 │
│ │ │
│ [icon] │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ Leads │ │ Sent │ │ Opened │ │ Clicked │ │
│ │ │ 1,180 │ │ 342 (29%)│ │ 87 (7%) │ │
│ [icon] │ └─────────┘ └─────────┘ └─────────┘ │
│ Import │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ [icon] │ │ Bounced │ │ Failed │ │ Unsubs │ │
│ Campaigns │ │ 12 │ │ 11 │ │ 2 │ │
│ ●active │ └─────────┘ └─────────┘ └─────────┘ │
│ │ │
│ [icon] │ ┌────────────────────────────────────────┐ │
│ Verify │ │ Email opens over time │ │
│ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░ │ │
│ [icon] │ └────────────────────────────────────────┘ │
│ SMTP │ │
└────────────┴────────────────────────────────────────────────┘
Component Inventory
All states documented
Button (primary)
defaulthoveractivedisabledloading
Button (secondary)
defaulthoveractivedisabled
Input field
defaultfocuserrordisabled
Select dropdown
defaultopenselecteddisabled
Table row
defaultselectedhover
Status badge
valid ✓invalid ✗uncertain ?unverified
Modal
openloadingsuccesserror
Sidebar nav item
defaultactivehover
Progress bar
emptypartialcompleteerror
Toast notification
successerrorwarninginfo
Checkbox
uncheckedcheckedindeterminate
Pagination
has-prevhas-nextcurrent page