impromptooHi-fidelity design mockups for the Impromptoo mobile app — a social app for impromptu meetups: plans, connections, chat, broadcast and ratings. These static pages are the design source of truth; the shipped app lives in mobile/.
Auth & onboarding
Splash
The native launch screen — white spark mark at 76px on brand blue #208AEF, exactly as expo-splash-screen renders it. No theme: same in light and dark.
02Phone number
Phone-first sign in — country selector, formatted US number, legal note.
03Verify code
6-digit OTP boxes with auto-verify, resend countdown, edit-number link.
04Onboarding · Name
Step 1 of 3 — first name plus the tappable avatar circle: “Add a photo · you can add more later”, with the uploading variant.
05Onboarding · About
Step 2 of 3 — bio and “looking for”, feeding the AI-drafted profile.
06Onboarding · Interests
Step 3 of 3 — selectable interest chips plus a custom add.
07Onboarding · Voice interview
The optional spoken intro — a voice interview that turns your answers into the AI-drafted profile.
Feed & plans
Feed
Full-bleed event card — gradient scrim, amber “Almost full” chip, frosted panel, illustrated default cover when the host picked no photo — plus the hosting rail.
09Feed · Empty
First run — the bundled feed illustration at 180px, “No plans yet”, and a Create-a-plan CTA.
10Event detail · Joiner
Cover hero with category pill + frosted vibe chips, “The plan”, host preview, sticky I’m-in bar.
11Event detail · Host
Host review — capacity meter, pending requests with accept/reject, manage actions.
12Confirm interest
Bottom sheet over the feed — optional note to the host, 280-char cap.
13Request sent
The transient join celebration — spring check circle, “Request sent 🎉”, host-will-review note.
14Create a plan
“What’s the plan?” hero, 10-category lane rail, live cover preview (illustrated default, ↻ shuffles curated photos), vibes, when/where, size, visibility.
15Plan is live
“Your plan is live 🎉” — check circle, cover recap card, review-anyone-who-wants-in note.
16Edit plan · Host
The host editing a live plan — same fields as create, prefilled, with a cancel-plan affordance.
Chats & network
Chats
Group threads per plan — template badge on the avatar, real unread badges with bold previews, relative time.
18Chats · Empty
Illustrated “No chats yet” state — join a plan from the feed and its group chat shows up here.
19Chat room
Group chat — bubbles, host broadcast, system messages, the “New” unread divider, member strip, composer.
20Network
Incoming join requests, network broadcasts, and the people you’ve met.
21Network · Empty
Illustrated empty network — show up to a plan and the people you meet become your network.
22Broadcast
Share a private plan with your whole network — recipient count and empty-network warning.
Profile & ratings
Host profile
v3 — captioned photo carousel, AI-drafted about, interests, and the “In your network” mutuals card.
24Profile
Avatar hero with ✎ pencil badge and the “📷 Photos · n” pill, stats row, AI-drafted about, interests, your plans, settings.
25Photo manager
“Your photos” bottom sheet — 3×2 grid with main-photo badge, captions, an uploading tile, dashed ＋ slots, and the caption sheet.
26Edit profile
Bottom sheet — photo, name, bio and looking-for fields over the profile.
27Rate your plans
Post-event bottom sheet — star card per person, per-person skip, and “don’t ask about this plan again”.
Settings & system
Settings
Bottom sheet over the profile — Account (phone · sign out · delete), the push toggle, Privacy & safety → Blocked users, and Help & support (Contact · Terms · Privacy · Version).
29Notifications
Inbox sheet from the feed-header bell — per-type emoji badge on the actor’s avatar, relative times, and the primary-tinted unread rows.
30Blocked users
Full-screen slide-over — a blocked entry with a quiet Unblock, plus the 🕊️ “No one’s blocked” empty state.
31Delete account
Two-step destructive flow — review of what’s erased with the amber open-plans notice, then the type-DELETE confirm gate.
32Legal
Full-screen doc reader — the Terms of Service top section; the same sheet renders the Privacy Policy.
Plan cover art
The 11 bundled category illustrations (assets/covers/*.jpg) — what every plan shows when the host picks no photo, mirroring coverSource() in mobile/src/lib/event-templates.ts. Every card below is the same event-detail screen re-rendered with ?cover=, so editing event-detail.html updates all eleven. (The feed/chats/network empty-state art has its own screens: 08, 16 and 19.)
Cover · Coffee
covers/coffee.jpg on the event-detail hero — the no-photo fallback for coffee plans.
🍽️Cover · Dinner
covers/dinner.jpg — long-table dinners without a host photo.
🍸Cover · Drinks
covers/drinks.jpg — after-work drinks, violet tint behind while it loads.
🌮Cover · Food crawl
covers/food.jpg — the street-food category illustration.
⚽️Cover · Sports
covers/sports.jpg — pickup games, emerald cover color.
🚶Cover · Walk
covers/walk.jpg — golden-hour walks, teal cover color.
🎲Cover · Games
covers/games.jpg — board-game nights, fuchsia tint.
🎬Cover · Movie
covers/movie.jpg — movie nights, deep-red cover color.
🎶Cover · Music
covers/music.jpg — live sets and jams, pink tint.
📚Cover · Study
covers/study.jpg — deep-work sessions, indigo tint.
✨Cover · Anything
covers/custom.jpg — the fallback for fully free-form plans (any template string).
Brand
App icon · spark mark
The shipped app icon (mobile/assets/images/icon.png) — also this gallery’s favicon. Its white counterpart is the splash mark (screen 01); the category covers are the section above.