About Paste

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

Overview and key concepts.#

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

Glossary of terms#

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
ComponentsStyled, accessible UI that looks and feels like Twilio (or the Theme that you're currently using)
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.
LayoutsWays to responsively space, align, and position your UI in a variety of ways.
CompositionsCommon, repeatable, and extensible Twilio UX patterns that you can use to solve product and UI problems.

Paste is...#

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

Support

If you need support, please open a new issue in our GitHub repository. Please try to provide as much detail as possible in your issue.

Contributing

The Paste design system is open source and contributions are welcome. Check out the project on GitHub to learn more about contributing.

Copyright © 2020 Twilio, Inc.