Illustration
Follow these guidelines when creating illustrations. Have questions? Talk to Khari at khari@customer.io.
Last updated
Follow these guidelines when creating illustrations. Have questions? Talk to Khari at khari@customer.io.
Last updated
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
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
We use hand-drawn lettering from That Marker Pack by Dan Petty to highlight key metrics on our marketing site.
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.
