Paste Design System Newsletter - November 2024 Edition

If you’re shipping updated billing flows, you’ll want to check out the new Pricing pattern! This pattern shows a group of paid features or plan options for a user to make a selection. Use it to show the differences between plans in order for customers to make informed purchasing decisions.

This pattern was a major contribution from Kara Kenna, with support from Bhooma Srirangarajan. Thanks for your detailed work and feedback-gathering on this pattern!

The Timeline component displays events in chronological order and can be used for tracking milestones, monitoring system logs, or visualizing user activity that can be associated with a timestamp.

We’ve also updated Progress Steps so you can add additional content to individual steps. With this update, Progress Steps can continue to be used to outline progress multi-step task across multiple pages or apps:

Learn more about when to use Timeline vs. Progress Steps here.

Tabs now have better responsive behavior by default, allowing users to scroll additional tabs, rather than its previous behavior that truncated tab labels.

When designing for AI, you’ll always want to assume errors will happen and plan for them when they inevitably happen. In that vein, check out our new guidelines for error states in AI Chat Log.

These guidelines cover errors when:

• Generating a response
• A user takes an action that’s part of message content
• A user takes an action that affects a message, like giving feedback on a response
• A user’s message fails to be sent
• There’s a system failure

The design and functionality of Callout has been updated with a dismissible variant and greater visual contrast from the Alert component to better communicate differences in urgency.

• Added borderless Status Badges for easier display of statuses within Tables and Data Grids, and updated the Object status pattern (formerly known as Status pattern)
• Added instructions on how to add the HighCharts accessibility module to your charts for enhanced keyboard navigation and screen reader functionality

• Truncate and Inline Code are now composable

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 Voice team, Kara Kenna! Kara contributed the design and guidelines for our new Pricing pattern, and frequently provides valuable product and customer insight on Paste components and features.

She set an outstanding example for Paste contributions, keeping the Paste team updated through regular check-ins and keeping other designers aligned during design critiques. Despite varying feedback, she was able to keep the pattern tightly scoped and showed sensible, incremental progress at every step. This is truly the best way to move broad-reaching systems work forward, and Kara lived the Twilio values of being an Owner by ruthlessly prioritizing and being Curious by seeking progress, over perfection.

Here’s Kara’s own experience with contributing the Pricing pattern:

Working on a product upgrade feature for Voice, I realized the opportunity to contribute additional guidance on pricing cards in Paste. I worked across product teams, including Onboarding, Commerce, Messaging, Support, and Segment to identify use cases and align on a consistent pattern. The established Paste components and guidelines helped us move efficiently with layouts, and the Design System team provided support along the way to ensure we followed best practices. Contributing may seem daunting at first, but the team makes it painless and you have a chance to make an impact across products!

Thank you so much, Kara! We can’t wait to see what you build (and contribute) next.

As always, we're better together.