Paste

# Paste — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Twilio. "Paste" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Paste
**Owner:** Twilio
**Official documentation:** https://paste.twilio.design/
**Visual character:** Developer-platform clarity: ink navy text, communication-red brand moments, and tokens engineered for programmatic theming.

---

## Summary

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

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Twilio Red / Brand | `#f22f46` | `--paste-color-brand-primary` | Brand highlight |
| Primary Blue | `#0263e0` | `--paste-color-background-primary` | Primary actions |
| Text | `#121c2d` | `--paste-color-text` | Primary text (ink navy) |
| Text Weak | `#606b85` | `--paste-color-text-weak` | Secondary text |
| Background Body | `#ffffff` | `--paste-color-background-body` | Page background |
| Background | `#f4f4f6` | `--paste-color-background` | Subtle surface |
| Border Weak | `#e1e3ea` | `--paste-color-border-weak` | Borders |
| Error | `#d61f1f` | `--paste-color-text-error` | Errors |
| Success | `#0b602d` | `--paste-color-text-success` | Success |

## Typography

- **Body:** Twilio Sans Text — weights 400, 500, 700 — `'Twilio Sans Text', 'Helvetica Neue', Helvetica, Arial, sans-serif`
- **Mono:** Twilio Sans Mono — weights 400 — `'Twilio Sans Mono', 'Fira Mono', monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| font-size-90 | `40px` | `48px` |
| font-size-60 | `24px` | `32px` |
| font-size-40 | `18px` | `28px` |
| font-size-30 | `14px` | `20px` |
| font-size-20 | `12px` | `16px` |

## Spacing

Base unit: `4px (space-10)`

Scale: `4px` · `8px` · `12px` · `16px` · `20px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| border-radius-20 | `4px` |
| border-radius-30 | `8px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| shadow-card | `0 2px 4px 0 rgba(18,28,45,0.1)` |

## Motion

| Name | Value |
| --- | --- |
| default | `150ms ease` |

## Quick start (CSS)

```css
/* Paste — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://paste.twilio.design/ */

:root {
  /* Color */
  --paste-color-brand-primary: #f22f46; /* Brand highlight */
  --paste-color-background-primary: #0263e0; /* Primary actions */
  --paste-color-text: #121c2d; /* Primary text (ink navy) */
  --paste-color-text-weak: #606b85; /* Secondary text */
  --paste-color-background-body: #ffffff; /* Page background */
  --paste-color-background: #f4f4f6; /* Subtle surface */
  --paste-color-border-weak: #e1e3ea; /* Borders */
  --paste-color-text-error: #d61f1f; /* Errors */
  --paste-color-text-success: #0b602d; /* Success */

  /* Typography */
  --font-body: 'Twilio Sans Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Twilio Sans Mono', 'Fira Mono', monospace;

  /* Type scale */
  --text-font-size-90: 40px /* line-height 48px */;
  --text-font-size-60: 24px /* line-height 32px */;
  --text-font-size-40: 18px /* line-height 28px */;
  --text-font-size-30: 14px /* line-height 20px */;
  --text-font-size-20: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* Radius */
  --radius-border-radius-20: 4px;
  --radius-border-radius-30: 8px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-shadow-card: 0 2px 4px 0 rgba(18,28,45,0.1);

  /* Motion */
  --motion-default: 150ms ease;
}
```

## 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.

## 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.

## Components worth studying

- **Combobox** — Searchable select with full keyboard model and async support.
- **Sidebar** — Configurable side navigation with collapse, expand, and active-state patterns.
- **DataGrid** — Composable data grid with sortable headers, selection, and per-cell rendering.

## When to choose Paste

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.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Paste by Twilio — Twilio's open design system with a strong accessibility commitment. Character: Developer-platform clarity: ink navy text, communication-red brand moments, and tokens engineered for programmatic theming. Use a primary colour near #f22f46, the typeface "Twilio Sans Text" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 4px (space-10) base. Lean into what it's known for: Accessibility — Paste components ship with documented WCAG conformance and accessibility statements per component. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Paste docs](https://paste.twilio.design/)
- [Paste on GitHub](https://github.com/twilio-labs/paste)
- [Paste tokens](https://paste.twilio.design/tokens)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/paste) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._