Twilio · Design system breakdown

Paste

Twilio's open design system with a strong accessibility commitment.

Origin

Twilio's design system team launched Paste publicly in 2020. It ships React components, design tokens, Figma resources, and content guidelines, all open source and Apache 2.0 licensed. Originally consolidated multiple Twilio product surfaces (Console, SendGrid, Segment) under one design language.

Governance

Twilio design system team owns the project. Open contribution model. Each component carries an explicit accessibility statement plus public engineering and design owners.

What it's known for, what's underrated, what to watch out for.

Known for

Accessibility — Paste components ship with documented WCAG conformance and accessibility statements per component.
Token system layered cleanly into primitives, semantics, and component-level overrides.
Content design integrated into the system: voice, tone, and microcopy guidance is first-class, not an afterthought.

Underrated

Paste's component status indicators (production, beta, alpha) at the doc level set expectations clearly — most public design systems duck this.
The Paste Pattern library catalogs higher-order patterns (settings pages, onboarding flows) on top of components.

Watch out for

The visual identity is unmistakably Twilio — adopting Paste outside of Twilio means meaningful retheming.
Component coverage is strong but narrower than MUI/Ant — niche components (advanced data viz, complex calendar) are not in scope.

Token snapshot

Token	Value	Role
color-background	#ffffff	Default surface
color-text	#121c2d	Default text
color-background-primary	#0263e0	Twilio brand action
space-50	8px	Spacing step
radius-30	8px	Default radius
font-size-30	14px	Body font size

Token names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.

Components worth studying

01ComboboxSearchable select with full keyboard model and async support.
02SidebarConfigurable side navigation with collapse, expand, and active-state patterns.
03DataGridComposable data grid with sortable headers, selection, and per-cell rendering.

If you're evaluating this system

Use Paste as a reference for how to publish a design system: per-component accessibility statements, status indicators, owner attribution, content design integration. Adopt directly if you're building a B2B SaaS adjacent to Twilio's space.

Compare more systems

What it's known for, what's underrated, what to watch out for.

Known for

Accessibility — Paste components ship with documented WCAG conformance and accessibility statements per component.
Token system layered cleanly into primitives, semantics, and component-level overrides.
Content design integrated into the system: voice, tone, and microcopy guidance is first-class, not an afterthought.

Underrated

Paste's component status indicators (production, beta, alpha) at the doc level set expectations clearly — most public design systems duck this.
The Paste Pattern library catalogs higher-order patterns (settings pages, onboarding flows) on top of components.

Watch out for

The visual identity is unmistakably Twilio — adopting Paste outside of Twilio means meaningful retheming.
Component coverage is strong but narrower than MUI/Ant — niche components (advanced data viz, complex calendar) are not in scope.

Token

Value

Role

color-background

#ffffff

Default surface

color-text

#121c2d

Default text

color-background-primary

#0263e0

Twilio brand action

space-50

8px

Spacing step

radius-30

8px

Default radius

font-size-30

14px

Body font size