Gradient SaaS onboarding role screen template

What does this gradient SaaS onboarding role screen include?

A warm gradient progress bar at step two, a user segmentation form with four role cards covering designer, engineer, product manager, and builder, and a Continue button.

How does the user segmentation form on this screen work?

The four role cards each represent a common SaaS user type. The selected cards pass role data to the backend on Continue. The app uses that data to apply defaults, surface relevant features, and set up the starting view for each user type.

Which templates pair with this gradient role screen?

Two pairings. For the complete gradient flow, this role screen sits between the gradient welcome screen and the gradient ready screen. For the same role selection step in a different style, the pixel role screen uses a pixel progress bar, and the dot role screen uses a photo backdrop with a glass card.

Can users select more than one role card in this onboarding form?

Yes. The form accepts multiple selections so users who work across areas can pick all that apply. A single selection is also valid and triggers that role's defaults immediately.

Which vibe coding tools work with this gradient SaaS onboarding role template?

Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, and Cursor. Paste it in and describe the roles you want and the defaults each role should trigger.