Content comes first

Secondary elements are truly secondary. Using visual elements should always complement the content and user experience. They never detract from it.

Visuals are balanced

Putting together different visual elements creates harmony. Layouts are open and never over-crowded. White space is used intentionally to create balance between content and graphic elements.

Animation is complementary

Motion guides interaction and draws focus throughout a user experience. Animation is applied to secondary elements to enhance the experience.

Scale and color

Leader lines are fixed-height and available in 4 px and 8 px.

Leader lines appear vertically or horizontally only. They’re never at an angle.

Leader lines always point to content on the page without intersecting other elements.

The content will always inform color usage.

Scale – width

Width is flexible and scales in multiples of 4.

Height & Spacing

Use one of the two heights and always keep the space between the dot and the pill match the height of the leader line.

Color

Leader line don’ts

Don’t rotate leader lines diagonally.

Don’t separate the dot and line.

Don’t scale the line or the dot individually.

Don’t use a leader line without a dot.

Don’t mix two colors (other than gray).

Don’t apply a transparency.

Don’t repeat multiple lines in close proximity.

Examples

  • Was this Helpful?
  •