Illustrations

Distinctive illustrations are a fun way to represent actions, events, and behaviors.

Most of the images we use are rendered as illustrations. Why not use photography or other types of iconography? Well, an illustration-based visual style has a lot of advantages. For example:

  • Illustrations are fun and engaging. They’re a great way to add visual interest and also convey meaning to aid interactions, and they add delight at the right moments.
  • They’re flexible, scalable, and relatively easy to create. Vector-based images help us avoid issues with resolution—our illustrations are always crisp, never pixelated.

Why we use illustrations

Our illustrations represent a variety of subjects without being overly specific, so they work in different contexts. We use illustrations to:

  • Portray objects like appliances, electronics, or other household items
  • Show energy-efficient behaviors or outcomes
  • Explain a process, action, or “how-to” instruction
  • As decoration and set a fun tone

Illustrations hold a lot of potential for animation, too.

Illustrating subject matter

Objects

In order to illustrate an object, sometimes it helps to set the scene. When needed, show objects in context. For example, depict a washing machine with a clothes basket.

Concepts

Use real-world things to point to abstract ideas. For example, a sun or moon can allude to time.

People

Use details to connote human presence—for example, a finger pointing at a screen or slippers on the floor. Don’t show faces or bodies that imply a given age, gender, or race.

Visual guidelines

  • Simple and modern
  • Flat, geometric shapes
  • Usually front or side view
  • Grayscale, plus one color
  • Works on white and 10% gray background
  • Avoid using text
  • No strokes or outlines
  • Not too cute or puffy (use minimal corner radius)

##Size formats

We have two standard sizes for illustrations – small and large. Our 'tip' illustrations are duplicative, so be sure to create both a small and large format of your illustration if you’re designing tips.

Large format

  • Minimum size of 160px / 160pt
  • Compared to small illustrations, these have more detail to help convey different ideas
  • Elements can extend outside of the circle
  • Nothing extends beyond the constraints of a square

Small format

  • Minimum size of 60px / 60pt
  • Reduced to essential details
  • Understandable at a glance
  • Elements do not extend outside of the circle

Placement

Our illustrations are designed to live on one of two background colors – $white or $lightest-gray.

`$white`
`#FFF`

`$lightest-gray`
`#F1F1F1`

Illustration color reference

VariableHexCMYK
$illustration-dark-gray#6666660,0,0,70
$illustration-medium-gray#C1C1C10,0,0,40
$illustration-light-gray#E1E1E10,0,0,20
$illustration-white#F1F1F10,0,0,0
$illustration-highlight#8DC63F50,0,100,0