Skip to content
Change the site theme
(information)

Design Guidelines for Paste

Get started with Paste design tools to create your own Twilio customer experiences and prototypes.


Access to Figma

Access to Figma page anchor

As a Twilio Designer, you have access to Figma. Join the Twilio organization by requesting an account through ServiceNow(link takes you to an external page). When you have access to Figma, you can learn more by reviewing our Working with Figma guide(link takes you to an external page).


How to turn on libraries

How to turn on libraries page anchor

👉  Ideally, you won’t have to worry too much about turning libraries on if you’re joining an existing team. A "Team Owner" (or "Admin") should have already gone through the steps of turning on default libraries (like the Paste and Console Navigation libraries) with these steps: setting up a Figma team(link takes you to an external page).

If you want to control libraries per file, go to the “Assets” tab on a file. This is also where you can drag in components to your file. Click the book icon in the upper corner. From the modal, you can turn libraries on and off.

Buttons to click in Figma to open the library selector

Modal in Figma where you can select the Paste components library to link to your project

The main libraries we recommend you have enabled for each file are:

Any time a library is updated, you’ll get a notification in your project asking if you’d like to update.


Paste currently has Default Theme(link takes you to an external page) and Dark Theme(link takes you to an external page) libraries.

When you have a theme library linked, you'll have access to:

  • Text styles (font families, font weights, and font sizes)
  • Colour styles (fill and stroke for background, border, and text colors)
  • Effect styles (shadows, etc.)

Menu in Figma when you can navigate through tokens for the Default theme

You should be using components from Paste to compose your UIs whenever possible, but the text and layer styles will be helpful when you need to compose something more custom.

This can be anything from setting a piece of text next to an icon to creating a custom stepper component.


Components are UI elements that can be reused across your designs. They help you create and manage consistent designs across projects.

You can drag and drop components into your project via the Assets panel on the left, and swap to different variants for a given component via the Design panel on the right.

Any layer with a ⚙️ emoji indicates that there are nested variants available.

Any layer with a ✏️ emoji indicates an editable layer.

Check out our tips and tricks(link takes you to an external page) for more helpful hints about using the Paste Components library.


We release library updates continuously and use Figma’s version history to keep track.

We demarcate changes with hints which you can see in the description of each update:

  • 🚀  New: [summary of a new thing]
  •   Improved: [summary of an improved thing]
  • 🐛  Fixed: [summary of a bug fix]
  • ❗️  Breaking: [summary of a breaking change]

Fonts in Paste are preloaded into Figma so you don't need to download or install any font files.

Inter(link takes you to an external page) is a free Google font and our typeface for UI text.

Fira Mono(link takes you to an external page) is a free Google font and our monospace typeface for code.

SF Pro Text(link takes you to an external page) is the system font for Apple platforms. We represent native web element styles (like option lists in Select) in our design assets in macOS styles.

Whitney(link takes you to an external page) is the Twilio brand typeface. Reach out to us in #help-design-system if you need access to the Whitney font files for work outside of Figma.


Additional questions or concerns

Additional questions or concerns page anchor

If you have any questions for us that weren’t covered by this guide, or you are running into problems using our design resources, please reach out!

Black lives matter.