Overview and key concepts#
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.
Glossary of terms#
|Paste||This design system|
|DSYS||The team that makes this design system|
|Tokens||Named entities that store visual design attributes|
|Primitives||Unstyled, accessible UI interaction or behavior that can be used as a starting point for specific UI needs|
|Components||A 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.|
|Themes||Globally 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.|
|Layouts||Ways to responsively space, align, and position your UI.|
|Patterns||Common, repeatable, and extensible Twilio UX compositions that you can use to solve product and UI problems.|
Why are we building Paste?#
A common question we get is: why build a design system at Twilio? Here are some of the reasons why we’re investing in a common UX platform for our customers:
Accessibility at Twilio scale#
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#
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#
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#
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.
- 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.
Paste is not...#
- 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.
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 can’t build Paste without the ideas and tools proposed by: