design-tokens-package.mdx

title	package	description
Design Tokens Package	@twilio-paste/design-tokens	The Paste Design Tokens package allows you to install design tokens in a variety of different formats (Web, Mobile, Sketch, etc.)

import {graphql} from 'gatsby'; import {Box} from '@twilio-paste/box'; import Changelog from '@twilio-paste/design-tokens/CHANGELOG.md'; import {SidebarCategoryRoutes} from '../../constants'; import {Callout, CalloutTitle, CalloutText} from '../../components/callout'; import { Link } from "gatsby"

export const pageQuery = graphql{ allPasteDesignTokensPackage(filter: {name: {eq: "@twilio-paste/design-tokens"}}) { edges { node { name description version } } } };

---

The Paste design tokens are available as a NPM package which acts as the central source of truth for Paste. By using this package correctly, you can rely on a well-maintained, up-to-date definition of Twilio's Design Language. A simple way to grab or view the latest files in this package is to visit UNPKG - @twilio-paste/design-tokens.

Supported Formats

While the Paste Tokens Package supports the following formats, our roadmap currently prioritizes React Components and Sketch Libraries as primary deliverables of the Design System. Reach out to us at #help-design-system if you'd like to use Paste for another format: we'll help you out as much as we can!

Paste Design Tokens are supported in the following formats within this package:

• JSON
• Less
• SCSS
  • as individual variables
  • as a SCSS map
• CSS custom properties
• Android XML
• iOS JSON
• JavaScript
  • commonJS
  • es2015
• Typescript definitions
  • commonJS
  • es2015
• Sketch Palette

Themes

Paste supports multiple themes. This is done by exporting the same token formats for each theme. Each file in the root of the design tokens package is exported for each theme with the corresponding values updated for each token. This allows different parts of Twilio to have their own visual styles whilst still maintaining a consistent Twilio feel, coherent component behavior, and preventing Design System bloat. Here's an example of Themes:

Default theme	SendGrid theme
$color-brand-highlight: #F22F46	$color-brand-highlight: #3368FA
$font-size-70: 1.5rem	$font-size-70: 1.75rem

See our list of Tokens and their corresponding values in the Token List page.

Within themes, we presently have support for:

• Console (Default)
• SendGrid

Give us Feedback on this Page

As you use Paste, you'll likely encounter things that don't seem right. Please reach out with your feedback! Here's some prompts to consider:

• Is this page easy for me to consume?
• Is the information supporting it sufficient / well-described?
• What information is missing?
• How approachable is the documentation? Can a new engineer / PM / designer at Twilio get started with it easily?

---