The UX section of the style guide must be viewed in Google Chrome.
Information Flags
Information flags are used to cue test takers to functionality that may not be immediately obvious.
Information flags have a white #FFFFFF background, a gray #BBBBBB border, rounded corners, and a drop shadow to differentiate them from surrounding content. Each flag has a tail connecting it to the UI element for which it provides a cue. The flag’s text is bold, gray #727272, and 83% the base font size (see the Typography page for more information).
A flag can appear in eight positions relative to the element about which it provides information. The position is chosen based on the surrounding context (e.g., to avoid overlap with other elements, to avoid positioning the flag off-screen.)
The following two examples present the eight possible positions for information flags.
To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.
Information flags have a white
#FFFFFFbackground, a gray#BBBBBBborder, rounded corners, and a drop shadow to differentiate them from surrounding content. Each flag has a tail connecting it to the UI element for which it provides a cue. The flag’s text is bold, gray#727272, and 83% the base font size (see the Typography page for more information).A flag can appear in eight positions relative to the element about which it provides information. The position is chosen based on the surrounding context (e.g., to avoid overlap with other elements, to avoid positioning the flag off-screen.)
The following two examples present the eight possible positions for information flags.
To view alternative presentations and styling, use the Change Theme
and Read Aloud 
buttons in the upper-right of the screen.