Search…
Illustration
Follow these guidelines when creating illustrations. Have questions? Talk to Khari at [email protected]

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.
Left: Woah, colors! Draws attention away from text. Right: Calmer, doesn't overly compete with text.
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.
Left: Same color usage and they start to blend together. Right: Each are unique, but are still tied together
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.
Left: Too many unique colors. Right: Same colors used in product to represent the workflow items
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.
It's a life preserver so red is an easily understood choice
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.
If the background has a texture, we use our dot matrix.
In some cases, we may pair it with a subtle, monotone gradient
Copy link
On this page
Style
Illustrations
Hand Lettering
Gradients & Backgrounds‌