Wove onboarding step indicator progression

Summary

Vertical onboarding flow UI showing five numbered steps connected by a curved line, with step three highlighted and accompanied by descriptive text.

Visual description

Light gray background (#F1F1F2) with the Wove logo (geometric sans serif) and close button (X) top-left and top-right. Five numbered steps arranged vertically down the left side (01, 02, 03, 04, 05) in a sans-serif display typeface. A soft gray curved line connects the numbered steps from top to bottom, with a small dot marking the current position at step 03. At that dot, bold dark-gray text reads "Ambient" with light gray sub-copy: "already on and never turns off." The numbers 01, 02, 04, 05 appear in very light gray (nearly invisible except for outline weight). Copyright footer at the bottom credits Polyera and 2015. Overall aesthetic is ultra-minimal with maximum whitespace.

Key takeaway

The curve-line connector is elegant and organic compared to a rigid vertical bar, implying continuous flow rather than discrete steps. The current step (03) is marked with both darker type weight AND explanatory copy, creating a clear focal point without relying on color changes or backgrounds. The un-highlighted steps fade to near-invisibility, reducing cognitive load by hiding what's not immediately relevant. Step progression uses numerical ordering with leading zeros (01, 02, 03), a common SaaS pattern that is scannable at a glance.

Reuse notes

Ideal for multi-step onboarding, setup wizards, or feature tours where clarity and calm matter more than visual excitement. Light monochromatic palette positions this as premium and approachable (wellness, fintech, healthcare). The vertical layout suits mobile-first designs and tall viewport scenarios. Reserve for 4-7 step flows; beyond that, accordion or collapsible sections work better. Pairs well with expansive whitespace and generous line-height type treatment.