Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Using callouts

Updated on January 21, 2021

Use callouts to draw the user's attention to a particular part of a graphic or to provide additional information. Each callout is composed of three parts: the rectangle that you use to select a part of the screenshot, the connecting line, and the callout text with an explanation.

    General settings

  • Apply the following general settings for callouts:

    1. Use a blank fill (#FFFFFF).

    2. Set Opacity to 100%.

    3. Set Padding to 0

    4. Do not use shading.

  • Selections and lines

  • Use 2pt yellow callout lines (R254, G181, B58 in RGB or #FEB53A in HEX).

    Note: For accessibility, do not refer only to the callout color. Instead, refer to the section or control name on the screen.
  • Use straight, continuous lines only.

    Note: Do not use background shading or shadows on lines, heavy lines, or start/end shapes (arrow heads).
  • Use parallel pointer lines, preferably horizontal or vertical.

  • Highlights

  • To highlight a part of a graphic, use yellow 2pt rectangles or ellipses.

  • Do not use bubbles, borders, or text boxes around callouts.

  • Do not use labels for simple cases when you call out only one item. Describe the item in the text of the article; not in the image.

  • Font

  • Use Open Sans 10pt, black font, and align text to the left.

    Note: Font size may vary depending on the image resolution.
    Note: Do not mix fonts and styles in callout text.
  • Enable and configure Clear Type by performing the following actions:

    1. In the Start menu, search for clear type.

    2. Click Adjust ClearType Text, and follow the wizard.

  • Language

  • Write the callout text in the white space that surrounds the screenshot. Do not write on any of the UI elements of the figure.

  • Use terse, sentence case labels or instructions.

  • Use full sentences for callouts. Capitalize the first word and add sentence punctuation (including a full stop at the end).

  • Content

  • Do not include company sensitive information in any screenshot. Use the Blur tool to hide that information.

  • Disable all browser menu toolbars and status bars to maximize the screen's real value.

  • Design

  • To indicate the order for a set of actions (processes and flows), use arrows. Do not insert numbered diagrams.

  • Use right angles to avoid drawing over layered screenshots if necessary.

  • Avoid cutting any UI elements that are visible in the screenshot with callout lines.

  • Try to limit the number of callouts in a screenshot, based on the size and complexity of the screen.

  • To remove excess noise from a graphic, use the trim feature available on the Images tab in Snagit Editor.

  • Resize images before adding callout text.

  • Use styles provided by Pega Community.

For example:
Callout with blur
High-level callout
Callout without labels

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us