Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Paste Design System Newsletter - August 2024 Edition

Paste
Paste

📣 What was new in Paste?

📣 What was new in Paste? page anchor

Filter pattern

Filter pattern page anchor
Gif of Filters Pattern

We've updated our filter pattern! The simplified layout uses Form Pills, Popovers, and Side Panel to reduce visual noise and help customers focus on the data and information that matter most.

Corner Ornament component

Corner Ornament component page anchor
Preview of Corner Ornament component

The Corner Ornament component lets you quickly relate 2 graphic elements to each other. Use it to show unread notifications, cart counts, relationships in Tables, and more. The component supports a variety of Avatar and Icon sizes with built-in cutouts.

Paste Figma library featuring typography and effect variables

Paste Figma library featuring typography and effect variables page anchor
Gif of Figma Typography

We added typography and effect variables to the Paste Components & Themes(link takes you to an external page) Figma library for more accurate swapping between Twilio, Twilio Dark, Evergreen, Default, and Dark themes.

Learn more about how to swap modes(link takes you to an external page).

New

New page anchor
  • Added new icons for RCSCapable and SupportRequest
  • Badge has a new notification_counter variant.

And thank you for all these contributions, Joe Fehrman!:

  • Form Pill Groups now have a large variant to support the Filter pattern
  • User Dialog has a smaller default size based on feedback from our consumers

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

image of Andres Cortez standing in front of a mountain wearing a blue tee shirt

In this edition of Pastemates, we're spotlighting a mate from the Platform Engineering team, Andrés Rodríguez Cortés! Andrés built One Admin pages with minimal guidance outside of the written guidelines on the Paste doc site.

He recently attended Comms Platform UX office hours for a gut check on his implementation. Principal Designer Andy Doyle was thoroughly impressed with what he was able to achieve, saying it's an “exceptional standard using latest Paste and all the guidance.”

Example of Pastemates UI work

Here's what Andrés has to say about working with Paste:

“Since I arrived at Twilio 3 years ago, the Paste project got my attention. As a former visual designer turned web developer, I always have had a great interest in design systems and component libraries.

Paste made my development work much more enjoyable as I was feeling that I was building with Lego pieces. I didn't need to care about defining a color palette, border sizes, or managing the internal state of the components. I also took the time to read through the pattern guides and realized they were just goldmines of knowledge about good practices in UI and UX. I still enjoy reading them when I have time.

Most of the rough edges I've found are around integration with the form library we use (react-hook-form). But my experience with the Paste library has been great so far, and I really enjoy building interfaces with it given that the components are ready to use and the end result just looks very polished and professional.”

Bravo to Andrés and his attention to detail!

Sign up for Comms Platform UX office hours(link takes you to an external page) if you're interested in design advice and feedback for your own work, too.

👀 What we're working on next

👀 What we're working on next page anchor
FeatureDescription
Timeline componentA Timeline represents events displayed in chronological order.
Pricing patternThe pricing pattern shows a group of paid features or packaged plans a user is selecting, contributed by Kara Kenna with support from Bhooma Srirangarajan.
Callout component, refinedImproved design and documentation of the Callout component, including stronger differentiation from the Alert component.

As always, we're better together.

— The UX Infrastructure Team