Design System


Currently, every package is standalone in the paste project. While this means you only get what you need, it makes it a little more tedious to get started. We hope to address this in the near future, but for now you can run:

External dependencies#

yarn add react react-dom @emotion/core @emotion/styled styled-system @styled-system/theme-get react-uid

System packages#

yarn add @twilio-paste/types @twilio-paste/style-props @twilio-paste/design-tokens @twilio-paste/theme-tokens @twilio-paste/theme @twilio-paste/icons @twilio-paste/core


Fonts in Paste

Paste leaves it up to you to load the fonts needed for the theme you've selected. Console uses Whitney ScreenSmart and SendGrid uses Colfax

The Whitney font is loaded by the service and is only allowed on * domains as well as localhost. Make sure to serve your app from the correct hostname if you're having issues with font loading

8 minute video walkthrough#

Be gentle :P - this was recorded in one take on zoom.


import {Theme} from '@twilio-paste/theme';
// Wrap your root component with the Theme.Provider like so:
<Theme.Provider theme="default">
// other stuff here

Now you can use our themed and tokenized components anywhere in your app:

import {Box} from '@twilio-paste/box';
<Box margin="space20" backgroundColor="colorBackground">
Hello Paste!

Our tokens are readily available on our components and typescript typings are provided.