Design systemDraft
Flow step
The page every screen of setup, Create a space, Join a space and Invite people is drawn on, so a flow feels like one thing. Prototype drawn at /onboard in the mock build.
| Surface | Implementing file | Status |
|---|---|---|
| App | apps/app/ui/components/FlowStep.tsx (@vyre/ui) | built |
| Deck | not used | not used |
| Lumen | not used | not used |
Anatomy
- Header: the Vyre mark lockup at the top left (static;
workingwhile something waits) and Back, a ghost small button, at the right. Back is left out on the first screen of a flow. Withhero(the first screen and Ready) the mark is large and centred above the title, and the title and lead are centred. - Step strip: "Step 2 of 6" in the caption role, then the stepper bars (
StageStepsstrip form: done, current, to come, with the current step's name once). Left out when the screen is not a step. - Title in the page role, one lead line under it in the muted tone.
- Body: a column with the space-4 gap. Whatever the screen needs, from library components.
- Failure: an error banner above the actions. It says what went wrong in words and what to do next. Never blames the person.
- Actions: one primary, full width, large. At most one quiet alternative under it (ghost, full width).
The title, body and actions come in with the Appear stagger (reduced motion: a fade). The page scrolls, and the column stops at the reading width and sits in the middle on a wide window.
States
| State | Look |
|---|---|
| Normal | as above |
| Disabled primary | the primary is dimmed until the screen has what it needs; the lead says what is missing |
| Failure | the banner appears; the primary becomes the way forward ("Try again", "Ask again") or stays; the quiet alternative offers the second way |
| Loading | the primary shows its busy state and keeps its width |
Props
mark (static, intro, working, done), hero, steps { labels, current }, title, lead, failure, onBack, primary { label, onPress, disabled, loading }, secondary (same), children.
Accessibility
The step line has an accessible label "Step 2 of 6, Master password". The title is a heading. The failure banner is an alert. Back is a button with a name.
Copy
Sentence case. A button is a verb ("Reserve this name", "Set master password"). Every failure names the next step. No em dashes.
Gaps
- The strip does not yet scroll its labels on a very narrow phone with six steps.