Docusign textured-stroke overlay hero example

Summary

A worked hero example for textured strokes: a circular photo mask of an outdoor scene overlaps a bold violet ring outline, with the headline "All in for docusign.org" and a "Work With Us" button.

Visual description

Standard hairline header (section "Photography", subsection "Overlays", page 75). The left column holds "Overlays: Textured Strokes" and short copy on strokes activated by color and texture at intersections with other objects. The right two-thirds is a large light rounded panel laid out like a web hero: a cream content block on the left carries an oversized "All in for / docusign.org" headline, a one-line sub-copy, and a filled violet "Work With Us" button. On the right, a circular photo mask of a person doing trail work overlaps a thick bright-violet ring outline, with a textured green-toned strip appearing where the shapes intersect.

Key takeaway

Promoting a guideline rule into a finished hero mockup so the abstract idea ("strokes activate at intersections") is shown doing real work. The overlap of a photo circle and an open ring creates depth and the brand's "connection" motif in one move.

Reuse notes

A reference for landing-page heroes built from overlapping circular masks and ring outlines, and for guideline decks that show a motif as a polished applied example rather than a diagram. The cream-block-plus-circular-photo hero is directly reusable. Needs a strong single photo to anchor the circle.