onboarding pattern
Welcome
First screen after sign-up + verification. Sets context, sets a single next action.
When to use it
User just verified their email. Greet them and route to the most valuable action.
- User reaches first value action in <60s
- No more than one decision
Layout regions
- header
- main
States
- default
Example
<Container variant="md"><Stack size="6" align="center"><HeroIllustration /><h1 className="text-largeTitle">Welcome, {firstName}</h1><p>Let's set up your first project.</p><Button size="lg">Create your first project</Button><Link href="/dashboard">Skip for now</Link></Stack></Container>The full Welcome pattern specifies 4 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.