Skip to content
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
66%
Step 2 of 3

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.

  1. Sign in or use SSO.
  2. Pick a kit. Pick a surface.
  3. Drop a page. Publish.
Start onboarding →
v05 · side-by-side-tutorial
  • 1Connectemail or SSO
  • 2Configurekit + surface
  • 3Shippublish your first page
  • 4Inviteadd the team
Connect your account
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
↩ Canonical layout
All sections