Paste

Twilio's 오픈소스 디자인 시스템 를 위한 consistent, accessible communication product interfaces.

제품 개요

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.

주요 기능

컴포넌트 라이브러리: Reusable elements 같은 buttons, forms, modals, tables, alerts, 및 데이터 grids 를 사용한 variants 를 위한 themes (light/dark) 및 states.
디자인 토큰: Semantic 색상, 타이포그래피, 간격, 아이콘 (붙여넣기 아이콘), 및 motion 를 위한 브랜드 consistency.
접근성: WCAG 2.1 AA compliance 를 사용한 ARIA 지원, keyboard navigation, 및 inclusive 패턴.
도구: Figma 키트 를 위한 프로토타이핑; React 라이브러리 를 사용한 TypeScript; Storybook 를 위한 컴포넌트 exploration.

장점

+오픈 소스
+실시간 협업
+방대한 아이콘 라이브러리
+색상 팔레트 생성

단점

-도입 시 팀 조율 필요
-커스터마이징이 복잡할 수 있음

/// 스펙

가격:
Free
플랫폼:
Browser

ASSETS_DIRECTORY

figma

/// 유사 도구

Porsche Design System

오픈소스 프레임워크 를 위한 consistent, 프리미엄 automotive digital interfaces.

NewsKit

News UK's 오픈소스 디자인 시스템 를 위한 consistent, accessible digital news experiences.

Orbit

Kiwi.com's 오픈소스 디자인 시스템 를 위한 consistent, accessible travel booking interfaces.

Pajamas

GitLab's 오픈소스 디자인 시스템 를 위한 consistent, accessible interfaces 전체에 걸쳐 products.

Palmetto Design System

오픈소스 디자인 시스템 를 위한 consistent, accessible solar energy product interfaces.

Pando Design System

Pluralsight's 오픈소스 디자인 시스템 를 위한 consistent, accessible 웹 interfaces.

Primer Design System

GitHub's 오픈소스 디자인 시스템 를 위한 consistent, accessible 웹 interfaces.

Radius Design System

Rangle's Meta-프레임워크 accelerating custom 디자인 시스템 creation 를 사용한 도구 및 키트.

Salt Design System

J.P. Morgan's 오픈소스 프레임워크 를 위한 accessible, 사용자 정의 가능 financial interfaces.

Paradigm Design System

Mail.ru/VK's 오픈소스 프레임워크 를 위한 consistent 웹 interfaces.