Skip to contentSkip to navigationSkip to topbar
Figma
Star

Paste Design System Newsletter - January 2023 Edition

Paste
Paste

📣 What's new in Paste

📣 What's new in Paste page anchor

Submit feature requests through our new dependency intake form

Submit feature requests through our new dependency intake form page anchor

To help us prioritize our work and keep us accountable, we now have an Airtable form that you and your team can use to submit dependencies for the features and components you need from us.

We factor your requests directly into our roadmap planning, so submit a request today to help us better understand your needs!

Submit a request

Page spacing and layout guidelines

Page spacing and layout guidelines page anchor

Want to learn more about spacing and hierarchy within your flows? Then these spacing and layout guidelines are for you! This foundational page breaks down the importance of creating visual relationships with your elements.

Check out the Spacing and Layout foundations documentation

One Twilio: Design language update in Figma

One Twilio: Design language update in Figma page anchor

We are excited to announce the new design language is live in Figma! This update comes from the One Twilio initiative to create a cohesive design language to unify Twilio’s product suite. Learn more about the work on the Twilio Blog: “Bringing Cohesion to the Twilio Product Suite(link takes you to an external page).”

Stay tuned for more news about this design language update and what product teams can expect over this year. If you have any questions about implementing in the meantime, please refer to the Twilio Theme: Design Language Updates Guide(link takes you to an external page).

Description List component

Description List component page anchor

As product builders, we are constantly trying to find ways to organize our content within a layout that feels digestible and manageable. We want our customers to be able to quickly find the right information they need to make decisions. We now have a component that helps with organizing lots of pieces of small information at once, the Description List!

Check out the Description List

A Form groups related form elements that allow users to input information or configure options. This component package enhances the HTML form element with preset spacing, so forms remain visually consistent across different pages.

Take a look at the Form component

The File Uploader is a visually enhanced form element that is used to upload multiple attachments. It is fully accessible and supports dragging-and-dropping attachments.

Learn more about File Uploader here

The Listbox Primitive is a component used to create accessible Listboxes that can be styled to create interactive, list-based components.Listboxes can also be used in any situation where a user needs to select items in a list or rearrange a list.

Check out other examples here!

  • Conversations UI Kit: The Paste team has been working on something big for the past year: the Conversations UI Kit! It is a set of React components and Figma design assets that make building a chat experience a breeze.

  • Added ProductUSSDIcon and Segment product icons with the help from Brandon Templar from Segment!

    New icons include:

    • ProductAudiencesIcon
    • ProductConnectionsIcon
    • ProductEngageIcon
    • ProductPersonasIcon
    • ProductPrivacyIcon
    • ProductProtocolsIcon
    • ProductReverseETLIcon
    • ProductTraitsIcon
    • ProductUSSDIcon

✨ Pastemates™ spotlight

✨ Pastemates™ spotlight page anchor
Pastemates are individuals and teams who have been critical contributors to Paste, through advocating for adoption within their products and channeling important feedback and contributions back into the system.

In this edition of Pastemates, we're spotlighting a mate from Twilio Brand, Nathan Sharp! Nathan has been such a huge support with our One Twilio efforts, and we’d like to say thanks! We’re truly grateful for our relationship with the Brand team and excited about what we will collab on next!

Nathan and the brand team have been instrumental to our One Twilio project, an initiative to evolve the product design language in order to give our customers a cohesive experience across all products.

Not only did we work across product teams to land on this design language, but it was really essential to have a close relationship with Brand, so we could ensure we were being true to Twilio’s personality.

Marketing energizes customers and invites them in, while product UI reassures customers that we’re here every step of the way to make their experience seamless.

Finding that balance can be a tricky endeavor. However, with Nathan’s help, we were able to keep the brand personality that makes us, well, us. We started using our new super family typeface, Twilio Sans, and also collaborated on lighter color hues, thoughtful brand moments to celebrate success, more negative space, and other visual elements, to give designers tools to set a customer up for success.

We're stoked that Nathan and team were able to work with us on this initiative! If you would like to hear more about the Twilio Sans brand story, check out Nathan's blog post(link takes you to an external page)!

We have just created a new theme of Paste that all products using Paste can use starting later this year. If you or your teams have questions, please feel free to reach out on GitHub Discussions(link takes you to an external page) and check out the Twilio Design Language Updates Guide(link takes you to an external page).

🎊 New year, New Goals (or OKRs)

🎊 New year, New Goals (or OKRs) page anchor
The UX Infrastructure team is moving to an OKR format for tracking our goals and projects. Below are our OKRs for Q1 of 2023:
ObjectiveKey Results
Establish Paste as the standard UI framework for Segment, and unify Twilio customer experiences in a single, beautiful Design Language update.

R&D Shared Goal: One Identity, One Invoice

  • 100% of Paste components updated to new design language
  • Designs for a unified or universal Navigation and Masthead reviewed and approved by downstream applications; Aion, Console, Sendgrid and Segment
  • Segment themed Paste shipped in Segment Core App with 1 Paste component in production
Drive reliability, resiliency, and quality in Twilio products through investments in infrastructure

R&D Shared Goal: Reliability First

  • Monorepo dependency management is automated and key dependencies are updated on an agreed cadence
  • Fully support the use of Paste inside a React 18 application
  • Decrease resiliency ticket backlog by 25%
  • Avg CI runtime/s is reduced by 20%
  • Graduate 2 components out of stage 1 status
Establish the foundations for best in class product and visual design at Twilio

R&D Shared Goal: One Identity, One Invoice

  • Creation of 1 content design pattern
  • 10 designers attend visual design office hours
  • 2 new Design Foundations Guideline added to the Paste docs site
  • Establish the baseline CSAT score for Foundational design guidelines in Paste

👀 What we’re working on next

👀 What we’re working on next page anchor
FeatureDescription
Evergreen themeEstablish Paste as the standard UI framework for Segment by creating a Segment theme, so it's easier to implement Paste for other phases of work.
Typography guidelinesGuidelines for using typography and how to better establish hierarchy within Twilio products.
Tabs component, refinedThis update to Tabs refines the design to create distinct visual hierarchy within a page for tabbed content and when paired with the In Page Navigation component.
Popover component, refinedThis update to Popover includes improved documentation.
Detail TextDetail Text is a typography component used for small, short pieces of secondary text content.
CSAT surveyLook out for our biannual survey to check in on your satisfaction with using Paste.

As always, we’re better together.

— The UX Infrastructure Team