Skip to contentSkip to navigationSkip to topbar
Figma
Star

Paste Design System Newsletter - April 2023 Edition

Paste
Paste

📣 What's new in Paste

📣 What's new in Paste page anchor

100% of Paste components updated to the new design language

100% of Paste components updated to the new design language page anchor

We are excited to announce that the new One Twilio Design Language is fully live!

This update comes from an 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)

The update can be seen now on the Paste site. This update comes through 3 new themes: twilio, twilio-dark, and evergreen. For details on each theme, visit our theme documentation.

To determine a timeline for upgrading to the new design language in your product, check out our recommended process(link takes you to an external page) and suggested timeline strategy(link takes you to an external page). We recommend most product teams migrate their top and side navigation bars to use Paste Navigation UI Kit components (estimated for Q2 release) before swapping from their existing theme to the twilio theme (recommend Q3–Q4).

Look for even more details about this design language update and the Tess Hannel for her leadership on this project with the Paste team 🌟.

Check out the new design language on display

Typography Guidelines

Our newest foundations page on Typography shares guidelines on how to set type in Twilio products, using our new design language and typefaces, Twilio Sans Display, Twilio Sans Text, and Twilio Sans Mono. If you’re looking for help in making a decision on how to use a near-infinite combination of font families, sizes, colors, weights, line-heights, and more, and make sure all those text combinations work together on a page, these guidelines are for you!

Detail Text Component

The Detail Text component is used for small pieces of text that are secondary to body text in a page. Use it for an image caption, in a chart legend, or as a paragraph footnote.

New

New page anchor
  • Added 68 new icons to support: Segment, Rich-text editing, Aion (TimeIcon), Console (TrendUpIcon, TrendDownIcon, ProductVoiceIntelligenceIcon), and Twilio customer requests (StoreIcon). Thanks, Emma Sims and Colleen Yerkes for their collaboration and reviews on these!
  • Popover: Updated with more detailed documentation and examples based on feedback from the Design Systems Committee. Thanks, all!
  • Toast: Added a left prop to make Toasts more mobile-compatible. Thanks for the suggestion, Claudia Zhou!
  • Side Modal: Increased the default width of Side Modal to better align with Segment use cases and content. Thanks for the suggestion, Darci Meachin and Chris Chan! Side Modal also received a little TLC with a new animation ✨.

Objective: Establish Paste as the standard UI framework for Segment, and unify Twilio customer experiences in a single, beautiful Design Language update.

Key ResultStatusNotes
100% of Paste components updated to new design language🎉 Complete
Designs for a unified or universal Navigation and Masthead reviewed and approved by downstream applications; Aion, Console, Sendgrid and Segment🎉 Complete
Segment-themed Paste shipped in Segment Core App with 1 Paste component in production.🎉 Complete

Objective: Drive reliability, resiliency, and quality in Twilio products through investments in infrastructure

Key ResultStatusNotes
Monorepo dependency management is automated and key dependencies are updated on an agreed cadenceIncompleteMid-quarter revision: Replanned for Q2 due to capacity constraints
Fully support the use of Paste inside a React 18 application🎉 Complete
Decrease resiliency ticket backlog by 25%IncompleteMid-quarter revision: Replanned for Q2 due to capacity constraints
Avg CI runtime/s is reduced by 20%🎉 Complete
Graduate 2 components out of stage 1 status🎉 Complete PopoverMid-quarter revision: Decreased KR to 1 component from 2.

Objective: Establish the foundations for best in class product and visual design at Twilio

Key ResultStatusNotes
Creation of 1 content design pattern🎉 CompleteError Pattern
10 designers attend visual design office hoursIncompleteMid-quarter revision: No longer tracking.
2 new Design Foundations Guideline added to the Paste docs site🎉 CompleteTypography and Spacing and Layout
Establish the baseline CSAT score for Foundational design guidelines in Paste🎉 Complete38% of respondents are familiar with them but haven’t used them. 56% of respondents have used them.

Most useful guidelines: Spacing & Layout. Least useful guidelines: Illustrations

⚡️ 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’s Data & Applications BU, Colleen Yerkes! Colleen’s been instrumental in advocating for Paste within SendGrid Marketing Campaigns.

Despite her product team’s tight timeline and unique use case within Twilio’s product suite, Colleen has been highly adaptable in her collaboration, leveraging office hours, GitHub Discussions, and our dependency tracker in the best ways depending on the type of questions that came up as design and development progressed. Colleen’s leadership in this work and thoughtful questions have pushed our design system and team to more deeply consider how components and layouts provided through Paste can be used throughout canvas-based customer experiences.

Look for more updates from Colleen as these features move into Twilio Engage!

👀 What we’re working on next

👀 What we’re working on next page anchor
FeatureDescription
Navigation UI KitA collection of components that can be used to build shared, global navigation patterns for Twilio, Segment, and Flex applications. Available in React and Figma.
Avatar Group componentA component that stacks avatars horizontally with an expanded menu for overflows.
Avatar component, refinedThis update to Avatar refines the documentation in preparation for Avatar Group.
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.

As always, we’re better together.

— The UX Infrastructure Team