Paste Design System Newsletter - August 2024 Edition
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.
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.
We added typography and effect variables to the Paste Components & Themes Figma library for more accurate swapping between Twilio, Twilio Dark, Evergreen, Default, and Dark themes.
Learn more about how to swap modes.
- 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 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 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.”
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 if you're interested in design advice and feedback for your own work, too.
| Feature | Description |
|---|---|
| Timeline component | A Timeline represents events displayed in chronological order. |
| Pricing pattern | The 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, refined | Improved design and documentation of the Callout component, including stronger differentiation from the Alert component. |
As always, we're better together.
— The UX Infrastructure Team