Design Guidelines for Paste

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

👉  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.

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.

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

• Paste Components
• Paste Default Theme includes tokens (color, text, and shadow styles), needed for the Paste components library
• Paste Patterns
• Brand Illustrations includes illustrations for empty states, sections, etc
• Asset Documentation includes helpful utilities for marking up designs, like sticky notes and cursors
• File and Cover Sheet Template
• Console Library for teams with Console projects (managed by the Console team)
• SendGrid's legacy SG-DS for teams with legacy SendGrid projects (managed by the SendGrid team)

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 and Dark Theme 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.)

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 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 is a free Google font and our typeface for UI text.

Fira Mono is a free Google font and our monospace typeface for code.

SF Pro Text 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 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.

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!