Paste

Design System

Migration Guide

Paste is a large, multi-year project. This document covers how and when you can migrate to using Paste tokens, components, and design libraries.


Early Access! Early Access! Early Access!

These guidelines are a living document, and not final. Reach out with comments & concerns at #help-design-system

General Guidance#

Why is Paste not ready and feature complete?#

The Paste design system is a large, multi-year effort managed by a small team. We care about our craft and set high standards for anything we ship: it must be thoughtfully built, resilient, accessible, and easy to upgrade. Building this takes time. We are in a very early stage of this project, and have an ambitions goal ahead of us. We choose to prioritize quality, customer trust, and long term value over quick wins.

We have outlined a set of components that we believe are the foundation of a good design system. They are currently in our backlog. We will update this document with a release plan in the near future.

What do I do till then?#

We have specific guidance for your team listed ahead. Our general advice is:

  1. Use your existing design system as far as possible. We will have cleaner migration paths off it to Paste.
  2. Strictly limit the creation of custom components to the rarest of use cases. Building quality UI is expensive, and not doing so in a systemized manner creates design and technical debt. It also makes it difficult for you to upgrade your components.
  3. In a future release, we will document how to create components using our underlying Tokens & Themes. This will allow you to create components that are not in the design system, and can still look and feel like Paste's visual language.

If you absolutely must create a custom component, post a note in #help-design-system or join us for office hours. We'll do our best to help you.

I want to help design / code components. How do I help?#

Thank you for being such a great supporter of Paste! We would love to accept contributions, but need a little more time to be able to do so. This is because of a few reasons:

  1. Paste is very early, and we do not have enough sample components in Sketch or React that you may use as a frame of reference for contributions.
  2. We have not documented guidelines for how we code or design components. This will make it hard for you to find documentation or have a great developer / designer experience.
  3. We have not finalized Standard Operating Procedures or Reviewer Code of Conduct for Sketch or React yet, and want to ensure a fair, transparent and consistent experience for Code and Design Reviews.
  4. Our team is very small, and needs deep, focused time to do the above work. Due to this, we cannot reliably respond to Pull Requests in a reasonable amount of time and want to avoid developer / designer frustrations while contributing.

In a future release, we will pilot a contribution model for Sketch and React. This will pave the way towards a contribution model in the future. Till then, we encourage you to join the conversation at #help-design-system, at our weekly office hours, or our monthly meetup. We'd love to gather your feedback.

Migration Guide for Twilio Console#

I'm looking for a component and don't see it in Paste. What should I do?#

We recommend following these steps:

  1. See if that component (or something similar) is available in Console React Components.
  2. Check if it is possible to compose your component or experience using a few lower level components (that may be available in Console React / Sketch Components)
  3. Check if the component you need is available in Sketch. If it is, see if the corresponding Paste component is in development / alpha / beta (as opposed to backlog).

If this doesn't help, you may need a custom component. In this case, propose the component in Product Design Crit (or nominate your product design to do so). The Product Design team has a process to evaluate components and decide if a custom component is necessary. If so, they will recommend you join Design System Office Hours for further discussion. All custom components must eventually go through Twilio UX Review.

Migration Guide for Twilio SendGrid#

Early Access! Early Access! Early Access!

This section will be updated in a future release. Reach out to #help-design-system till then for guidance.

I'm looking for a component and don't see it in Paste. What should I do?#

Information coming soon!

Migration Guide for Twilio Flex#

Early Access! Early Access! Early Access!

This section will be updated in a future release. Reach out to #help-design-system till then for guidance.

I'm looking for a component and don't see it in Paste. What should I do?#

Information coming soon!