Paste assistant Assistant
Figma
Star457

Paste

Build inclusive, delightful customer experiences with Twilio’s open-source design system.
Get to know our
100+
components, patterns, and templates

Try out Paste Assistant, our AI-powered Design System chat bot

internal link
Themeable and composable

Start from anywhere

With Paste, you can get production-ready experiences up in minutes with our 80+ styled components and pre-built themes.Or get complete control by bringing your own theme and creating custom components with our functional primitives.
Build with styled componentsBuild with primitives
Component preview theme
<CustomizationProvider
baseTheme="default"
elements={{
CARD: {
backgroundColor: "colorBackgroundDecorative10Weakest",
borderRadius: "borderRadius0",
borderWidth: "borderWidth20",
borderColor: "colorBorderPrimaryStrong",
},
SEPARATOR: {
borderColor: "colorBorderPrimaryStrong",
},
BOX: {
fontWeight: "fontWeightBold",
color: "colorTextDecorative20",
},
AVATAR: {
backgroundColor: "colorBackgroundDecorative20Weakest",
borderRadius: "borderRadiusCircle",
color: "colorTextIconNew",
},
BADGE: {
borderRadius: "borderRadius0",
backgroundColor: "colorBackgroundPrimaryStrong",
color: "colorTextInverse",
fontWeight: "fontWeightLight",
paddingX: "space50",
},
}}
>
<Card padding="space60" element="STYLED_COMPONENTS_CARD">
<Box display="flex" flexDirection="column" rowGap="space50" alignItems="center" element="INSIDE_OF_WHITE_CARD">
<Box display="flex" width="100%" columnGap="space40" element="TOP_ROW">
<Avatar variant="entity" icon={BusinessIcon} size="sizeIcon20" name="entity-avatar" />
<Box display="flex" justifyContent="space-between" width="size30" element="TWO_TEXTS">
<Anchor href="">ACME production website</Anchor>
<Box display="flex" columnGap="space20">
<ConnectivityAvailableIcon decorative color="colorTextIconAvailable" size="sizeIcon30" />
<Text as="span" display="flex" fontSize="fontSize30" lineHeight="lineHeight20">
Active
</Text>
</Box>
</Box>
</Box>
<Box width="100%" element="SEPARATOR">
<Separator orientation="horizontal" verticalSpacing="space0" />
</Box>
<Box display="flex" alignItems="center" width="100%" justifyContent="space-between">
<Box display="flex" columnGap="space30" alignItems="center">
Events
<Badge variant="neutral" as="span">
+8%
</Badge>
</Box>
301,422
</Box>
<Box display="flex" alignItems="center" width="100%" justifyContent="space-between">
<Box display="flex" columnGap="space30" alignItems="center">
Violations
<Badge variant="neutral" as="span">
-5%
</Badge>
</Box>
0
</Box>
<Box display="flex" alignItems="center" width="100%" justifyContent="space-between">
Entities
<AvatarGroup variant="entity" size="sizeIcon30">
<Avatar name="entity" src="/images/avatars/entity-avatar.png" />
<Avatar name="entity" src="/images/avatars/entity-avatar.png" />
<Avatar name="entity" src="/images/avatars/entity-avatar.png" />
</AvatarGroup>
</Box>
</Box>
</Card>
</CustomizationProvider>

Built with your favorite technologies, Typescript + React + Figma

For Twilions and Twilio customers alike

Rapidly build enterprise-grade, inclusive, and extensible experiences that look and feel like your brand. Paste works great with Flex plugins, CodeExchange apps, and more.

Explore our templates

Page templates bring a collection of components and patterns together into full-page layouts to drive cohesion across our platforms.Get inspired by these examples of Paste templates in use, and start building your customer experiences today.Check out our templates
Design efficiency

Built by designers, for designers

1-to-1 code and design libraries means production-ready design prototypes, too.With our libraries, you can swap themes easily with Figma variable modes, and prep design files for efficient design and engineering collaboration.

Join our community of builders

13kWeekly npm downloads
70kComponents in production
1.1MFigma components inserted
30Monthly Github Discussions

We do the thinking so you don't have to

Creating seamless and accessible user experiences can be a tough task. But we help you simplify the journey.

Paste handles the research, design, testing, and engineering of the core building blocks. This frees up your energy to tackle customer challenges instead of UI issues.

Accessibility standards
User research
Competitive analysis
Product requirements
Design & API review
Usage guidelines
Built-in constraints
Dos and Dont's
Performance
Accessibility

What we talk about when we talk about accessibility

Accessibility is more than just color contrast. We believe in designing for each user, not just “all users”. We build with these considerations in mind:

  • Screen magnification, voice dictation, color blindness, and those who require help with fine motor control.
  • Semantic HTML to better communicate with assistive technologies.
  • UI controls that are designed to be instantly recognizable and easy to see.
  • Keyboard navigation and focus management to allow task completion through a variety of input devices.
Focus managementScreen reader supportKeyboard support
To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.