State pattern · updated 3 Sept 2026
Onboarding checklist
An onboarding checklist is a short, visible list of setup steps shown to a new user, each marked done as it is completed, that guides the first session toward the moment the product becomes useful. It is the empty state of the whole product, given structure.
Think of it as
The card in a new appliance box: "1. Remove the film. 2. Plug in. 3. Press start." Three lines, ticked as you go, gone when you are done.
Worked example
A checklist decodes as a repeated row pattern with two visual states, done and not done, so it is a clean place to check that the muted "not done" text still passes contrast and that the done state is communicated by more than colour. The ones that persist across sessions store progress locally or on the account; the ones that do not annoy on every visit.
Why it matters
Checklists convert a product's empty state into momentum, and they are one of the few UI patterns with a clear finish. They are also a state pattern, which means the design system has to specify done, not done, current and dismissed, and most systems specify only one.
How it fails
Progress communicated by colour alone, invisible to a colour-blind user. A checklist that cannot be dismissed. Steps that reset every visit because nothing persists.
What to measure open the decoder →
- Contrast of the muted "not done" rows
- Whether the done state uses an icon or text, not colour only
- Whether the checklist persists, and where
- Focus order through the steps
Where you meet it
- SaaS first-run screens
- Developer consoles
- Mobile app first launch
On this site
The palette pages show every role under four simulated colour-vision deficiencies, which is the test a colour-only done state fails.
Showcase collections that exhibit it
Build it
Next rung
Onboarding is a sequence of states. Once the states are specified, the next thing to check is how the interface behaves when a list is empty, which is where this pattern came from.