Preview image. Unlock full-res
A left-aligned "how it works" section walking through five numbered steps connected by a dotted vertical line, under a serif headline.
Summary
A vertical five-step process list explaining how to go from proposal to payment, with each step marked by a small blue numbered circle linked by a dotted connecting line. The numbered-circle-and-dotted-spine pattern is the defining structure.
Visual description
A left-aligned serif headline, "Go from proposal to getting paid. Here's how," sits above a short muted intro line. Below, five steps stack vertically: each has a filled blue circle holding a white number (1 to 5), a bold step title, and one or two lines of muted body copy. A dotted vertical line threads between the circles, implying sequence. Titles run from "Select project type and add description" through "You get paid!" The whole block sits on a pale off-white background with no imagery, keeping focus on the text ladder.
Key takeaway
The thin dotted connector between numbered circles makes a plain list read clearly as an ordered flow without any illustration. Pairing a serif headline with clean sans-serif body copy keeps the steps both warm and readable.
Reuse notes
A reliable explainer block for onboarding, setup, or pricing-adjacent "how it works" content. Works on its own or beside a product screenshot; here it stands alone, which puts pressure on the copy to be tight. Light background only as shown; the blue accents would need recoloring on dark.
