Sections · onboarding-flow · variants
Onboarding flow · 10 layouts
Same primitives, different stories. Five ways to walk a new user in.
v01 · horizontal-3-step
Onboarding
Three steps. Five minutes.
1
Connect
Sign in. Optional org SSO.
2
Configure
Pick a kit. Pick a surface.
3
Ship
Drop a page. Publish.
v02 · vertical-stepper
Connect your account
Sign in with email or SSO. Org-wide projects are imported automatically.
Continue →
v03 · interactive-progress-circle
Configure your kit
Pick a brand kit and a surface stack. You can change either later.
v04 · video-walkthrough
Step 1 · Connect
Step 2 · Configure
Step 3 · Ship
Walk it with us
Three screens. One flow.
Each screen of the actual product, cycling. CSS keyframes, no MP4.
- Sign in or use SSO.
- Pick a kit. Pick a surface.
- Drop a page. Publish.
Start onboarding →
v05 · side-by-side-tutorial
- 1Connectemail or SSO
- 2Configurekit + surface
- 3Shippublish your first page
- 4Inviteadd the team
v06 · orbital-steps
1
Connect
SSO or email
2
Configure
Kit + surface
3
Ship
Publish a page
4
Invite
Bring the team
Your
goal
v07 · typewriter-step-titles
1
Connect your account
Email or SSO. We import your projects.
2
Configure your kit
Brand palette, type scale, surface stack.
3
Ship your first page
Compose, animate, publish.
v08 · parallax-step-cards
1
Connect
SSO or email. Your org's projects come along for the ride.
2
Configure
Pick a brand kit, a surface, a container scale. Change anytime.
3
Ship
Compose primitives. Snap to tokens. Publish to your domain.
v09 · video-with-overlay-steps
v10 · checklist-with-progress
Get to your first publish
0%
- ✓Sign in with SSO or email2 min
- ✓Pick a brand kit1 min
- ✓Choose a surface stack2 min
- ✓Drop your first page3 min
- ✓Publish to your domain1 min