Preview image. Unlock full-res
A dark-mode UI flow showing a stepped form asking users to choose a collaboration offer type with three stacked options, each with an icon and description.
Summary
A stepped form UI in dark mode presenting three mutually exclusive collaboration options to a user, each with a labeled icon, title, subtitle, and right-arrow affordance.
Visual description
Dark rounded-corner modal on a charcoal background with a light green progress bar at the top. A "Contract" icon appears in a note-style white card near the center. The heading "Choose offer type" sits above a gray subheading asking "What type of collaboration do you have in mind?" Below are three stacked list items: Collaboration (with a green curved icon, labeled "Treated as partnership"), Paid Plan (green money bag, "Budget based, average $600"), and Unpaid Plan (green circular icon, "Based on mutual benefits"). Each option has a right-arrow button in a dark pill shape. At the bottom, a Back button (checkbox icon) and a Skip button (phone icon) offer navigation.
Key takeaway
The clean separation of mutually exclusive choices using icons, consistent spacing, and subtle highlights; the pairing of human-readable labels with secondary descriptive text; the progress indicator combining visual hierarchy with directional clarity in a dark context.
Reuse notes
Works well for multi-step SaaS onboarding, partnership flows, or pricing selection where users must commit to one path. The dark palette and muted greens suggest a financial or enterprise product. Pair with previous/next navigation for longer flows.
