Paste

Twilio's open-source design system for consistent, accessible communication product interfaces.

Product Overview

Paste is Twilio's official open-source design system for building consistent, accessible, and scalable user experiences in communication products like messaging, voice, video, and customer engagement platforms. It provides reusable UI components, patterns, guidelines, and tools based on modern design principles, with React implementations (Paste Core) and Figma libraries for seamless designer-developer collaboration in enterprise environments. Component Library: Reusable elements like buttons, forms, modals, tables, alerts, and data grids with variants for themes (light/dark) and states. Design Tokens: Semantic colors, typography, spacing, icons (Paste Icons), and motion for brand consistency. Accessibility: WCAG 2.1 AA compliance with ARIA support, keyboard navigation, and inclusive patterns. Tools: Figma kit for prototyping; React library with TypeScript; Storybook for component exploration.

Best For

Teams building scalable, consistent digital products.

Key Features

Component Library: Reusable elements like buttons, forms, modals, tables, alerts, and data grids with variants for themes (light/dark) and states.
Design Tokens: Semantic colors, typography, spacing, icons (Paste Icons), and motion for brand consistency.
Accessibility: WCAG 2.1 AA compliance with ARIA support, keyboard navigation, and inclusive patterns.
Tools: Figma kit for prototyping; React library with TypeScript; Storybook for component exploration.

Pros

+Open source
+Real-time collaboration
+Extensive icon library
+Color palette generation

Cons

-Adoption requires team alignment
-Customization can be complex

/// SPECS

Pricing:
Free
Platform:
Browser

ASSETS_DIRECTORY

figma

/// Similar Tools

NewsKit

News UK's open-source design system for consistent, accessible digital news experiences.

Orbit

Kiwi.com's open-source design system for consistent, accessible travel booking interfaces.

Pajamas

GitLab's open-source design system for consistent, accessible interfaces across products.

Palmetto Design System

open-source design system for consistent, accessible solar energy product interfaces.

Pando Design System

Pluralsight's open-source design system for consistent, accessible web interfaces.

Porsche Design System

open-source framework for consistent, premium automotive digital interfaces.

Primer Design System

GitHub's open-source design system for consistent, accessible web interfaces.

Radius Design System

Rangle's meta-framework accelerating custom design system creation with tools and kits.

Salt Design System

J.P. Morgan's open-source framework for accessible, customizable financial interfaces.

Paradigm Design System

Mail.ru/VK's open-source framework for consistent web interfaces.