Edit this page on GitHub

Illustrations

Guidelines and repository of illustrations that can be used in Twilio UIs


Illustration helps breathe life into our brand. It can take a complex idea and make it easier to understand. It is a tool that allows us to communicate our product in a way that feels human and fun.

Our illustration style is carefully curated by the Twilio Brand team. While adding these elements to your UI, ensure that you are reviewing your work with them. A good place to start is by posting in #mkg-brand.

Read the brand illustration guidelinesOpens an external resource
Browse the illustration repositoryOpens an external resource

General guidelines for product UIs#

  • Only make necessary and thoughtful adjustments to the illustration colors. When doing so, ensure that you’re using Paste's palette.
  • Do not add extraneous elements to the illustrations. You may remove unnecessary elements, but do so while maintaining the thematic feel that the illustration is trying to convey.
  • We recommend using SVGs over PNGs when possible, in order to improve performance and avoid blurring.

Accessibility#

  • Aim to pair your illustrations with text: Remember that different cultures may interpret the same image in different ways, so despite our best intentions, it is helpful to provide adjoining text.
  • Illustrations shouldn't include navigational interactions: Illustrations should not have interactions such as click or hover behavior that is essential to navigation and usage of the product. Instead they should be wrapped with an (or, ideally, laid out with supporting) interactive element such as Anchor.
  • Give your illustrations a title: An SVG title or image alt text is required on non-decorative illustrations so assistive technology can infer equal meaning as a sighted user would. For example, avoid a title that reads "WhatsApp Illustration - 01". Instead a title that says "Get started with our WhatsApp API" is preferable.

Request new illustrations#

The best way to request new illustrations is to file a request with the Brand team. You can create a new request on JIRAOpens an external resource (VPN required)

Support

If you need support, please open a new issue in our GitHub repository. Please try to provide as much detail as possible in your issue.

Contributing

The Paste design system is open source and contributions are welcome. Check out the project on GitHub to learn more about contributing.

Copyright © 2020 Twilio, Inc.