Documentation image annotations lack consistency

The screenshot images in the documentation should all use the same tools for annotations (arrows, circles, etc). This is tricky because we don't want something that will change and we're again in the position where things are inconsistent. Some images were done using pixelied but as a free website it's unknown how long it will be around.

## Definition of Done
- [ ] Update the Style Guide with a description of how / when to use images in documentation
- [ ] Update the Style Guide with a description of how to annotate images (green for good/attention, red for errors)
- [ ] Ensure all images follow the above

Start by reviewing the documentation Style Guide and the existing screenshot images referenced by the issue. Identify the current annotation approaches and define a consistent, durable approach for documentation images. Done means the Style Guide describes image use and annotation colors, and the documentation images follow those guidelines.

Written by the indexing model from the issue text.