Paste Design System Newsletter - March 2025 Edition

It’s been a while since we’ve hit your inbox, so we wanted to introduce ourselves in case you’re new or haven’t hit us up in a while. We’ve been hard at work collaborating with the Brand, Commerce, and AI teams (on Voice, Flex, and Messaging), but as always, we’re available on Github Discussions and office hours.

Engineering team: Kristian Antrobus, Nora Krantz, Shoaib Ahmed
Design team: Jhanvi Bhatia, Roxana Gómez, Sarah Li, Tony Ip

The latest version release includes full support for Paste within a React 19 app. No changes should be necessary for consuming applications – this change should be 100% backwards compatible (with a minimum of React v17.0.2). Please let us know if you experience any issues by opening a Github Discussion.

Note: only the three latest versions of React are supported with Paste, so React 16 support is no longer guaranteed.

Elevation represents how "close" or "far" an element feels from the user in a digital context, using a combination of shadows, colors and overlays to create a layering effect, making elements feel distinct, focused or prioritized. Take a look at the new guidelines for context on styles used in Paste components or for direction on styling your own custom components with elevation.

A wireframe theme is now available in Figma! This theme can help with testing design concepts, presenting early work, and learning and iterating rapidly.

Huge thanks to Sam Muñoz for contributing this theme, and his amazing work in learning about theming in Paste and iterating quickly based on feedback. Watch this video on how to apply the wireframe theme, and send Sam any feedback you have.

If you’re an engineer who would find a theme like this helpful in code, please reach out to us in a Github Discussion

Keyboard Key is a styled text component intended to differentiate keyboard commands and shortcuts from other types of text. The component also includes a pressed state, adjusting styles to provide feedback to the user when the given key is active.

A Blockquote is a stylized text wrapper for a quotation and source, while Example Text is a stylized text wrapper that distinguishes user input examples from body text. Both can be used to enhance readability and understanding of written text.

Typewriter animations now work out-of-the-box on the AI Chat Log component. Use the animated prop on messages returned from the AI in order to implement the typewriter animations. The animations will perform well even with non-text components in the body of the AI message.

• Combobox (Figma): Added a slot to Combobox options
• Icons: Added rich content icons for Content Template Builder in Flex and Messaging
• Side Modal: Footer actions are now aligned on the left by default
• Side Panel: Zhuzh’d the responsive behavior

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 an interim addition to the design systems team: Tony Ip!

Tony joins us from the Flex Mobile Platform team, where he recently created the Design Guideline and UI Kit for Flex Mobile following its Public Beta launch. Over his 7 years at Twilio, including time at Zipwhip, he worked on the Zipwhip Mobile App, Zipwhip Embeddables, 10DLC, AMB, RCS, Twilio Frontline, and Twilio Flex. He is now working on an Address validation pattern with the Commerce Team.

Residing in Seattle, Tony enjoys watching suspenseful TV series, gardening, tackling home improvement projects, and building out his camper.

See you next time! 👋