Skip to contentSkip to navigationSkip to topbar
Figma
Star

Illustrations

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


Illustrations help 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 guidelines(link takes you to an external page)

Browse the illustration library(link takes you to an external page). To log in to the library with your Twilio credentials, request application access through IT via ServiceNow(link takes you to an external page) for "The Library (Bynder)".

General guidelines for product UIs

General guidelines for product UIs page anchor
  • 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.
  • 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

Request new illustrations page anchor

The best way to request new illustrations is to file a request with the Brand team. You can create a new request on Jira(link takes you to an external page) (VPN required).