Reference

Use the lightest visual treatment that explains the action.

Compare annotation primitives, connector anchors, and emphasis treatments against the same stable product surface.

Back to example stories
7 recipes

Annotation primitives

Use these when the reader needs an explanation, direction, emphasis, sequence, label, or privacy treatment.

What you are seeing
The same dashboard with one annotation primitive at a time.
What GuideShot proves
Every primitive resolves against stable product geometry and renders offline.
What changes
Only the annotation kind and its placement change.
The project health dashboard with a callout beside the Open report action.

1 / 7

Callout

Attach durable explanatory copy to one stable product target.

  1. 1Name the target
  2. 2Place the explanation
3 recipes

Connector anchors

Use an edge anchor for a clean boundary relationship, a center anchor for the whole control, or a standalone arrow when copy is unnecessary.

What you are seeing
One product action with three connector treatments.
What GuideShot proves
Connectors remain attached to measured target geometry.
What changes
The anchor and presence of explanatory copy change.
A callout connected to the edge of the Open report action.

1 / 3

Edge anchor

Terminate the connector at the nearest target boundary for a clean relationship.

  1. 1Set connector to arrow
  2. 2Anchor at the edge
3 recipes

Emphasis treatments

Use plain composition when context matters, spotlight when distractions should recede, and outline when the boundary matters.

What you are seeing
One clean captured scene recomposed three ways.
What GuideShot proves
Annotation-only edits do not require another browser capture.
What changes
Only the offline emphasis layer changes.
A project metric spotlighted behind a connected callout.

2 / 3

Spotlight emphasis

Pair a callout with a spotlight to suppress competing interface details.

  1. 1Reuse the same capture
  2. 2Add spotlight emphasis