Skip to contentSkip to navigationSkip to topbar
Figma
Star

About Paste

An overview of what Paste is, is not, and how to use the platform.


Paste is a design system used to build accessible, cohesive, and high-quality customer experiences at Twilio. Paste supports Product Designers and Engineers with tooling and assets that help them build customer UIs in Figma and React.

What's a design system?

What's a design system? page anchor

Design systems are much more than just component libraries. Paste combines Twilio’s design language, via our foundations on typography, color, layout, and spacing, with content design guidelines, accessible functional primitives, themes, and interactive UI components—everything you need to create high quality, accessible software applications. It ensures each product resonates with our customers, and presents Twilio in a consistent and cohesive way, that is backed by customer research.

System hierarchy chart

Themes in Paste are built on top of design tokens and define what style each token represents in that theme. When a theme is paired with functional primitives like Box and Text, they create themed Paste components like Heading, Card, and Button. Patterns, like empty state, are composed using a group of components. Multiple patterns are then used to compose full page templates like an objects list.

  • Accessible by default. As a principle, the design systems team does not ship a component, primitive, or composition if it does not meet or surpass our target of WCAG 2.1 AA Compliance. This means that as a consuming team, you can expect a lot of the heavy lifting required to build accessible products to be done by Paste. However, you must still think about, and regularly audit your product for accessibility. The Design Systems team can support you on this work.
  • Composable by design. Paste tokens, primitives, components, and compositions themselves are inherently composable. This means, in the simplest of terms, that you can use small or large pieces interchangably to solve your product / UI problems.
  • Concerned with application logic. All Paste components are presentational, and have no opinions on the way data is passed to them.
  • Stateful. While components have encapsulated internal state when necessary (e.g., UI behavior or keyboard interaction), the components themselves are not concerned with application state.
  • Product or domain specific. Paste components aim to serve all UI needs semantically, and Paste compositions aim to serve Twilio pattern needs at the most generic level. We believe that a good design system raises the floor of great customer experience, and are excited to see thoughtful, well-researched ejections from the system that raise the ceiling.

Why are we building Paste?

Why are we building Paste? page anchor

A common question we get is: why build a design system at Twilio? Here are some of the reasons why were investing in a common UX platform for our customers:

Accessibility at Twilio scale

Accessibility at Twilio scale page anchor

One of the core components of Twilio Magic is to Be Inclusive. Designing and building experiences that are accessible to a diverse set of users is an important part of this goal, but unfortunately requires a great deal of time and subject matter expertise. Teams that use Paste get accessibility best practices built in, so that they can focus on the customer problem without sacrificing inclusion.

Bring cohesion to our diverse suite of products

Bring cohesion to our diverse suite of products page anchor

Great UX is important, and equally so is the unified application of it. Twilio customers use different products for different needs. By using Paste components and guidelines that are aligned to Twilio UX’s best practice, teams can swiftly build products that customers don’t have to relearn constantly. And for specific customer needs, Paste also allows for thoughtful deviation via custom implementations to truly delight users.

Get better at scale and optimize for efficiency that counts

Get better at scale and optimize for efficiency that counts page anchor

By providing all teams with a shared set of composable tokens, components, and patterns to pull from, Paste helps teams design and build faster, and makes future UI upgrades simple. This allows us to keep our product quality bar high without sacrificing speed. This also allows for efficient reuse of features and designs across a customer’s journey by enabling UI reuse across different products and workflows.

Instill trust and confidence

Instill trust and confidence page anchor

Paste is designed to mature our UI interfaces and improve reuse, resiliency, and upgrades at scale. By using Paste, we can create interfaces that inspire customer trust by shipping product UI updates with zero negative impact to the end customer. Our technology choices mean our components are encapsulated but extensible, enabling versioned design updates.

Paste takes a lot of its inspiration from the fantastic folks that have done this before us. We seek diverse opinions in designing our solutions for our customers. We cant build Paste without the ideas and tools proposed by:

These principles are statements of how I work, how you work, how we work as a UX organisation. We hold ourselves accountable to the behaviours and practices for which they advocate. We challenge our work to meet the standards they call for.

Think big and take small steps

Think big and take small steps page anchor

Work methodically towards a compelling vision. Be willing to iterate your work as you build an understanding of customer needs, capturing the vision as you adjust and progress.

Understand the customer, their problem, and the context first. Begin by conducting or seeking out the customer research that will enable you to create a compelling solution.

Seek feedback early and often

Seek feedback early and often page anchor

Share work while it’s still scrappy to shape its direction. Collaborate with other disciplines to expose different ideas that challenge your thinking and strengthen your work as it evolves.

Validate work with customer testing

Validate work with customer testing page anchor

Invite real customers to test and challenge solutions. Gather robust feedback and iterate your work until it both solves the customer problem and improves the overall product experience.

Shepherd work all the way to the customer

Shepherd work all the way to the customer page anchor

Take responsibility for every detail that’s delivered to the customer. Share the work’s intent with your team and ensure that its implementation is true to the vision.

Develop a seamless experience

Develop a seamless experience page anchor

Create customer experiences that are unified in look and feel. Make the transitions between business units unnoticeable with consistent use of styles, patterns, and interactions.

Refine to the essentials

Refine to the essentials page anchor

Choose every element with a clear purpose that’s attached to a customer need. Refine the experience until every component is essential in solving the customer problem.

Meet the high standard that’s expected, then push past it. Elevate function, form, language, and design to ensure that the quality of the experience raises the bar for future work.

Recognize the diversity of every user

Recognize the diversity of every user page anchor

Understand that our users are not all like us. Work with empathy and consideration, offering guidance and encouragement to create an inclusive experience.

Design System Principles

Design System Principles page anchor

The Design Systems team won't ship anything unless:

We build a floor for every experience at Twilio. It’s crucial that we consider the voices of people who don’t look like us, speak different languages, work in different parts of the world, or use our work in different ways.

We don’t work on something unless its a base common denominator for a number of exceptional experiences. Our work should multiply upstream and downstream efforts.

Systems should never have single points of failure. Good documentation, reliable APIs, and an intuitive language of operation are necessary to ensure that what we do works, and works well.

TermDescription
PasteThis design system
DSYSThe team that makes this design system
TokensNamed entities that store visual design attributes
PrimitivesUnstyled, accessible UI interaction or behavior that can be used as a starting point for specific UI needs
ComponentsA suite of common UI components (in Figma and React) that can be composed into any web based user experience. They follow the WCAG 2.1 AA standard and the W3C ARIA authoring practices to ensure the best accessibility practices are baked into them. They are available to be installed via NPM or Figma for anyone to use.
ThemesGlobally scoped variations of the design language used by Tokens (and subsequently by Components and Compositions). We use Themes to provide a transitional tool for products to switch their UI from older languages to Paste. In the future, themes may also be used to provide light and dark modes for UIs, or for Twilio customers to match their brand personality while still retaining Paste interaction patterns.
PatternsCommon, repeatable, and extensible Twilio UX compositions that you can use to solve product and UI problems.

What browser support does Paste have?

We support the latest and latest minus one versions of all modern browsers on the market today. Most notable mentions include:

  • Google Chrome
  • Safari
  • Firefox
  • MS Edge
  • Chromium Edge