Illustration

Follow these guidelines when creating illustrations. Have questions? Talk to Khari at khari@customer.io.

Style

As described in our "Dream it, do it" brand story, our hand-drawn style mimics a whiteboard marker. Some elements include:

  • Using common metaphors and objects to maintain a sense of practicality and realism

  • An ink outline represents the process of sketching initial shapes before filling

  • Basic shapes are filled with largeer, solid blocks of color

  • Depth and detail is created using ink "dots" and shades of ink and gray

  • Gray accent marks make things active by representing movement

Illustrations

Be aware of how many colors you're adding. Most illustrations and icons will work with 1-3 colors in addition to Gray, Ink, and Purple (300). Our hand-drawn style is naturally playful and superfluous use of color carries the risk of appearing childish.

Be aware of the context. Is this an isolated illustration or is it a part of multiple icons within the section? If there are multiple, should they be unique or should they be tied together? Even if this icon is used elsewhere on the website, adjust colors as needed to fit the current context.

When representing the product, maintain alignment. Leverage existing color usage in the product allows the visitor to more easily draw connections between both illustrations and product screenshots.

When representing a real-life object, be realistic when you can. To avoid being overly playful, consider the colors associated with the real-life object the illustration is representing.

Use hand-drawn underlines when emphasizing keywords in headers. To keep things consistent, we use purple-300

Hand Lettering

We use hand-drawn lettering from That Marker Pack by Dan Petty to highlight key metrics on our marketing site.

Gradients & Backgrounds‌

  • Backgrounds will use the -100 variation of the -900 text on the background itself.

    • For example: if the text color is purple-900, then the background will be purple-100.

  • Geometrics and subtle curves

  • Used to add contrast or highlighting to content or illustrations.

Last updated