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

Paste Design System Newsletter - November 2024 Edition

Paste
Paste

📣 What was new in Paste?

📣 What was new in Paste? page anchor

Pricing pattern

Pricing pattern page anchor
Preview of Pricing pattern

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!

Preview of Timeline component

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:

Preview of Progress Steps component

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

Improved responsive behavior in Tabs

Improved responsive behavior in Tabs page anchor
Gif of Tabs

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

Error states for AI Chat Log

Error states for AI Chat Log page anchor
Preview of AI UI Kit Error state

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
Preview of Callout component

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.

New

New page anchor

✨ 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 Kara Kenna

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.

👀 What we're working on next

👀 What we're working on next page anchor
FeatureDescription
Keyboard Key componentA Keyboard Key distinguishes a keyboard command or shortcut from other text.
Sample Text componentSample Text is a stylized text wrapper used to highlight standalone contextual information within a body text.
Blockquote componentA Blockquote highlights a quotation.

As always, we're better together.

— The UX Infrastructure Team