# Twilio Paste Design System — OpenDesign Application Guide
Compose a notification draft with Paste’s theme and button contracts, a verified spacing scale, and a clear distinction between editing, reviewing, and actually sending a message.
Independent OpenDesign reference to upstream Paste. Paste DSys is a separate unaffiliated fork. No message is sent by this example.
## Source Reference
- **Source:** twilio-labs/paste ([source](https://github.com/twilio-labs/paste))
- **Theme entry:** Theme.Provider ([source](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-theme/src/index.tsx))
- **space70:** 1.5rem ([source](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/spacing.yml))
- **fontSize30:** 0.875rem ([source](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/font-size.yml))
- **borderRadius20:** 4px ([source](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/border-radius.yml))
- **Button type default:** button ([source](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx))
## Design Reference
Verified upstream twilio-labs/paste source. Values below distinguish YAML token names from their JavaScript-style names. This reference does not represent the independent Paste DSys fork as Twilio documentation.
### Spacing aliases
[Official reference](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/spacing.yml)
| Name / Rule | Value / Configuration | Use |
| --- | --- | --- |
| space10 | 0.125rem | 2px at a 16px root. |
| space20 | 0.25rem | 4px at a 16px root. |
| space30 | 0.5rem | 8px field separation. |
| space40 | 0.75rem | 12px control padding. |
| space50 | 1rem | 16px local grouping. |
| space60 | 1.25rem | 20px. |
| space70 | 1.5rem | 24px section separation. |
| space90 | 2rem | 32px large grouping. |
| space130 | 3rem | 48px larger region. |
### Font size aliases
[Official reference](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/font-size.yml)
| Name / Rule | Value / Configuration | Use |
| --- | --- | --- |
| fontSize20 | 0.75rem | 12px at default root. |
| fontSize30 | 0.875rem | 14px body option. |
| fontSize40 | 1rem | 16px body option. |
| fontSize60 | 1.25rem | 20px heading option. |
| fontSize70 | 1.5rem | 24px heading option. |
| fontSize90 | 2rem | 32px display option. |
### Line heights
[Official reference](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/line-height.yml)
| Name / Rule | Value / Configuration | Use |
| --- | --- | --- |
| lineHeight20 / lineHeight30 | 1.25rem | 20px for compact text. |
| lineHeight40 | 1.5rem | 24px for 16px text. |
| lineHeight60 | 1.75rem | 28px for 20px text. |
| lineHeight70 | 2rem | 32px for 24px text. |
### Radii
[Official reference](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/border-radius.yml)
| Name / Rule | Value / Configuration | Use |
| --- | --- | --- |
| borderRadius10 | 2px | Smallest corner radius. |
| borderRadius20 | 4px | Small control radius. |
| borderRadius30 | 8px | Small-medium radius. |
| borderRadius40 | 12px | Medium radius. |
| borderRadiusCircle | 50% | Requires equal width and height for a circle. |
| borderRadiusPill | 100px | Pill radius, distinct from circle. |
### Text roles and pairing
[Official reference](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/global/text-color.yml)
| Name / Rule | Value / Configuration | Use |
| --- | --- | --- |
| colorText | palette-gray-100 | Main body text; resolves to #121c2d in the linked palette. |
| colorTextWeak | palette-gray-60 | Secondary text; resolves to #606b85. |
| colorTextLink | palette-blue-60 | Links; resolves to #0263e0. |
| colorTextError | palette-red-60 | Error text; resolves to #db132a. |
| colorTextSuccess | palette-green-70 | Success text; resolves to #0e7c3a. |
| colorTextWeaker | palette-gray-40 | Source warns against using it as ordinary enabled text. |
### Button behavior
[Official reference](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
| Name / Rule | Value / Configuration | Use |
| --- | --- | --- |
| variant | primary / secondary / destructive / link and other explicit variants | The example uses primary submit and secondary toggle. |
| type | button by default | Set submit explicitly for form submission. |
| pressed | Secondary family only | Use secondary for the theme toggle. |
| loading | aria-busy and disabled control behavior | Use only for a genuine pending operation. |
| as="a" | Requires href | Navigation links do not support disabled/loading button states. |
| tabIndex | 0 or -1 | Positive tab indices are rejected. |
### Theme names
[Official reference](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-theme/src/constants.ts)
| Name / Rule | Value / Configuration | Use |
| --- | --- | --- |
| default / dark | Theme variants | Theme selection is explicit. |
| twilio / twilio-dark | Separate variants | Do not describe every variant as identical to default. |
| sendgrid / evergreen | Additional variants | Choose intentionally rather than using brand as an arbitrary decoration. |
## Twilio Paste Design System Use the upstream system without confusing the documentation fork
### Twilio source and independent continuation
Paste is published in the twilio-labs repository. During verification, old paste.twilio.design documentation routes redirected to that repository. The separately hosted Paste DSys site describes itself as an independent fork with no Twilio affiliation. This guide therefore grounds token values and component behavior in upstream source files.
A notification composer is a useful specimen because it exposes several states that cannot be captured by a static button gallery: editable content, review confirmation, a prepared snapshot, and a clear boundary before sending. No Twilio API is called by this preview.
[Supporting specification](https://github.com/twilio-labs/paste)
## Twilio Paste Design System Read the spacing scale before choosing a suffix
### Token numbers are names, not pixel values
space30 is half a rem, while space70 is one and a half rem. The 30 and 70 suffixes are positions in the scale, not 30px and 70px. At a 16px root, the composer can use 8px between label and field, 12px inside a control, and 24px between regions.
The YAML source uses hyphenated names. The reference table presents JavaScript-style names used by Paste consumers and keeps resolved values beside them. A rem-based value scales with the root font size; its pixel equivalent should not be treated as an unconditional browser measurement.
[Supporting specification](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/spacing.yml)
## Twilio Paste Design System Pair font sizes with separate line-height tokens
### The scale does not imply identical numeric values
Font and line-height aliases are separate. fontSize30 is 14px at the default root and lineHeight30 is 20px. fontSize70 is 24px with a 32px line-height option. These pairs keep labels and multiline content readable without turning every section into a large marketing heading.
The embedded specimen uses a system sans-serif stack and an application-owned phone illustration. Those choices are explicitly illustrative. No proprietary font file is redistributed, and no phone frame dimensions are presented as Paste tokens.
[Supporting specification](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/aliases/font-size.yml)
## Twilio Paste Design System Semantic text roles include contrast constraints
### Weak text is not the same as disabled text
The upstream color source records contrast pairings alongside roles. Main text, secondary text, errors, and success messages have different intended foreground roles. The weaker text role carries a warning against using it for ordinary enabled controls. A muted character count should not simply take the faintest available gray.
In the sample, blue marks action and dark neutral text carries the message. The prepared draft does not turn green merely because the user pressed a button: its status explains that a local snapshot was created. The sample values are tied to the linked palette; other theme variants may resolve differently.
[Supporting specification](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-design-tokens/tokens/global/text-color.yml)
## Twilio Paste Design System Theme selection is an explicit state change
### Provider variants and application surfaces
Theme exports a Provider and Consumer, along with named theme objects and utilities. The current variant constants include default, dark, twilio, twilio-dark, sendgrid, and evergreen. The example intentionally switches only between default and dark.
Native application-owned controls need a matching surface treatment when the provider changes. A provider can theme Paste components without magically restyling every external widget. The supplied code sets the surrounding foreground and background explicitly and identifies the textarea as application-owned.
[Supporting specification](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-theme/src/index.tsx)
## Twilio Paste Design System Use pressed state only on a supported button family
### Action, navigation, and pending work have different contracts
The Button implementation validates certain prop combinations. The theme toggle uses secondary with pressed. The form action sets type="submit", because the component defaults to a button type. An anchor-shaped button requires href and cannot be treated as a disabled or loading action.
- Use primary for preparing the draft and secondary for the independent theme toggle.
- Keep navigation as a link; do not attach href to a button without the corresponding anchor form.
- Reserve loading for an actual pending operation, because it changes both busy and disabled behavior.
- Avoid positive tabIndex values; the implementation restricts the supported values to 0 and -1.
[Supporting specification](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
## Twilio Paste Design System Separate editable copy from the reviewed snapshot
### A truthful sequence
The live preview follows the current textarea value. The prepared copy is stored separately and changes only after validation. Editing again must not quietly rewrite the previously prepared snapshot. The review checkbox is a local interaction exercise, not evidence of recipient consent or legal compliance.
1. Write content in the labeled textarea.
2. Review the current message and confirm the local review checkbox.
3. Prepare a snapshot without calling any messaging service.
4. Edit again and compare the draft against the prepared copy before preparing a new snapshot.
[Supporting specification](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
## Twilio Paste Design System Make feedback understandable without interpreting a phone mockup
### Labels and text feedback remain outside the illustration
The textarea has a visible label and links to count and error descriptions. The count is defined as Unicode code points; it does not claim to measure SMS segmentation, encoding, or cost. The prepared result is also visible as ordinary text outside the illustrative device.
Validation must identify an empty message or missing review confirmation. The status region announces the local result without pretending that a message was delivered. Keyboard focus remains visible on all native controls and buttons, including at the narrow viewport.
[Supporting specification](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
## Twilio Paste Design System Verify the package separately from the offline interpretation
### What the supplied example proves
The setup imports real Paste Theme and Button packages and gives a complete React composition. Native form controls are stated as application-owned rather than attributed to an unverified component API. The embedded version is an offline HTML interpretation with no dependency on an external CDN.
Before using it in a service, resolve peer dependencies, build the native example, and add a genuine backend boundary for sending. A successful local preview test establishes editor behavior, not a production messaging integration or a claim about Twilio delivery.
[Supporting specification](https://github.com/twilio-labs/paste)
## Component Examples
### Complete standalone interactive specimen
Save the complete document as index.html and open it in a browser. Offline HTML interpretation of upstream Paste scales and button state rules; not the native runtime or a messaging service.
```html
Paste notification draft studioPaste / Message studioLocal preview
Notification draft
Write the message. Review the copy. Keep a prepared version.
Prepared copy
No draft prepared yet.
Nothing has been sent.
HTML interpretation of upstream Paste · Counts Unicode code points, not SMS segments · No messaging connection
```
[Code reference](https://raw.githubusercontent.com/twilio-labs/paste/main/packages/paste-core/components/button/src/Button.tsx)
- The phone panel displays a draft snapshot. No SMS is sent; native Paste Theme and Button behavior require the separate React example.
### A local draft with real Paste theme and button state
Theme.Provider wraps the complete composer. Secondary pressed state changes the preview theme; a primary submit button prepares a snapshot after application validation. Labels, textarea, and checkbox are explicitly native application controls.
```jsx
// npm install @twilio-paste/button @twilio-paste/theme react react-dom
import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Theme} from '@twilio-paste/theme';
import {Button} from '@twilio-paste/button';
// Native textarea and labels are application-owned; this is not Paste TextArea.
function Composer() {
const [message,setMessage] = useState('Your appointment is confirmed for Thursday at 10:00.');
const [snapshot,setSnapshot] = useState('');
const [error,setError] = useState('');
const [confirmed,setConfirmed] = useState(false);
const [mode,setMode] = useState('default');
const length = Array.from(message).length;
const background = mode === 'dark' ? '#121c2d' : '#ffffff';
const foreground = mode === 'dark' ? '#ffffff' : '#121c2d';
function prepare(event) {
event.preventDefault();
if (!message.trim()) return setError('Write a message before preparing a draft.');
if (!confirmed) return setError('Confirm that you reviewed the message.');
setError(''); setSnapshot(message.trim());
}
return