Coach Marks
Search the component library

Coach Marks

v1.0.2

Coach marks call attention to new or unique features, nudge users in the right direction, or guide users during onboarding.

Usage

Use coach marks sparingly. Focus on feature benefits (not features) and a single interaction.

Coach marks can either appear automatically, for example, when users visit a page for the first time or when a new feature is added, or in response to an action, like activating an info icon.

A coach mark points to the targeted UI element on the page. It displays a title, description and either a dismissal link or 'X' icon. Once the coach mark is dismissed, it will not appear again.

Even though users can dismiss a coach mark when they interact with the targeted part of the UI, always include either a link or "X" icon. (This is useful for new features or prompting users to take a specific action.)

Icon coach mark

The basic coach mark with a link to dismiss.

Coach mark with the close icon.

Types

There are two types of coach marks:

  • Informational calls attention to a section on the page. (If there is too much informational text to add below a field, it is better to use a coach mark.)
  • Instructional provides short, task-oriented tips. 

Notes:

An example of using a Coach Mark when there's too much information to put under the input.

Redlines

Spacing20px vertical padding
24px horizontal padding
4px between title and message
24px between message and dismissal link
4px between arrow and target element
Dimensions280px wide at every viewport
Arrow16px wide, 8px tall
Prefer to position the arrow in the center of the box, or 32px from either side
If necessary the arrow may be positioned as close as 20px from either end
Prefer arrows to point downwards rather than upwards
Arrow never points out of either side
Close iconremove-sm-18
Centered in a 44x44 px tap target in the upper right corner
ColorsDigital Ice Blue background color
All text is Charcoal
Drop shadowShifted 3px downwards
rgba(0, 0, 0, 0.25) color
7px blur, 0px spread
TypographyTitle is Bold UI Text
Message is Basic UI Text
Links are link styled Basic UI Text, but overridden to use Charcoal for both active and hover for contrast purposes
Info triggerUse the info-fill-18 icon

Single Instance Coach Mark

Changelog

1.0.2

  • ADDED: Feature links

1.0.1

  • FIXED: Inconsistencies in sketch file

1.0.0

  • CHANGED: Initial version