Twilio Paste

---
name: twilio-paste
description: Apply the Twilio Paste visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Twilio Paste, mentions Paste, Twilio design system, Paste UI, or describes navy #121c2d ink instead of black, #006dfa primary blue actions, brand red #f22f46 reserved for brand — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Twilio Paste Design System

Twilio's open-source system for customer-engagement consoles: inky #121c2d navy text, #006dfa primary blue, the #f22f46 brand red held back for brand moments, Twilio Sans type, roomy bordered inputs, a triple-ring focus shadow, and one of the most rigorously token-gated component libraries in open source — plus an official dark theme.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Twilio Paste.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (Paste, Twilio design system, Paste UI, paste.twilio.com), or describes its traits: navy #121c2d ink instead of black; #006dfa primary blue actions; brand red #f22f46 reserved for brand; triple-ring focus shadow; spacious 4/8px-radius components; token-only styling (no raw hexes).

## Design tokens

### Color palette

- color-background-body (rgb(255,255,255) converted): `#ffffff` (--color-bg)
- color-background — wells, page sections (rgb converted): `#f4f4f6` (--color-surface)
- color-text — Twilio ink navy (rgb(18,28,45) converted): `#121c2d` (--color-text)
- color-text-weak (rgb converted): `#606b85` (--color-text-muted)
- color-background-primary — primary buttons (rgb(0,109,250) converted): `#006dfa` (--color-accent)
- color-background-primary-strong — hover/pressed deep blue (rgb converted): `#001489` (--color-accent-strong)
- color-text-link (rgb(2,99,224) converted): `#0263e0` (--color-link)
- color-text-brand-highlight — Twilio red, brand accents only, never actions (rgb converted): `#f22f46` (--color-brand)
- color-border — inputs (rgb(139,147,170)); weak border #cacdd8 for dividers: `#8b93aa` (--color-border)
- color-text-error / color-background-error (rgb converted): `#c72323` (--color-error)
- color-text-success (rgb converted); success background #14b053: `#0b602d` (--color-success)

### Dark mode overrides

When building dark mode, override these roles (all other tokens stay the same):

- twilio-dark color-background-body (rgb(13,19,28) converted): `#0d131c` (--color-bg)
- twilio-dark color-background (rgb converted): `#18253c` (--color-surface)
- twilio-dark color-text (rgb converted): `#f4f4f6` (--color-text)
- twilio-dark color-text-weak (rgb converted): `#8891aa` (--color-text-muted)
- color-background-primary — unchanged on dark (rgb converted): `#006dfa` (--color-accent)
- twilio-dark color-text-link (rgb converted): `#008cff` (--color-link)
- twilio-dark color-border; weak border #394762 (rgb converted): `#606b85` (--color-border)
- twilio-dark color-background-error (rgb converted): `#db132a` (--color-error)

### Typography

- Display / headings: Inter (fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif) (ideal: Twilio Sans Display, premium — use Inter as the free substitute)
- Body: Inter (fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif) (ideal: Twilio Sans Text, premium — use Inter as the free substitute)
- Mono / data: Fira Code (fallback: Courier, monospace) (ideal: Twilio Sans Mono, premium — use Fira Code as the free substitute)
- Type scale: 1.2 ratio, base 14px — computed steps: 14px / 17px / 20px / 24px / 29px / 35px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.3, letter-spacing 0
- Body: line-height 1.43, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 20, 24, 32, 40, 48, 64 — space-20 (4px) through space-130 (48px) and beyond on a 4px base; Paste consoles are roomier than classic enterprise — 16–24px component padding and 32px+ section gaps keep long support sessions calm.
- Border radius: sm 2px, md 4px, lg 8px, xl 12px, pill 100px — border-radius-10 through 50 (2/4/8/12/16px) plus pill and circle; buttons and inputs sit at border-radius-20 (4px), cards at 8px.
- Border treatment: 1px solid #cacdd8 — Weak border #cacdd8 for cards and dividers; form inputs use the stronger #8b93aa so fields read clearly; shadow-border tokens draw 1px rings via box-shadow to avoid layout shift.

### Shadows

- shadow-card: `0 2px 8px 0 rgba(18, 28, 45, 0.1)` — shadow-card / shadow-low — cards and raised panels (ink-tinted, never pure black)
- shadow: `0 4px 16px 0 rgba(18, 28, 45, 0.2)` — Default overlay shadow — menus and popovers
- shadow-high: `0 16px 24px 0 rgba(18, 28, 45, 0.2)` — shadow-high — modals and toasts
- shadow-focus: `0 0 0 2px #ffffff, 0 0 0 3px #006dfa, 0 0 0 5px #cce4ff` — The signature triple focus ring on every interactive element (dark theme swaps to white rings)

### Layout

- Max content width: 1440px
- Console layouts: fixed left product sidebar, wide content region with page header (title, description, primary action right-aligned)
- Forms cap around 640px line length even on wide screens
- In-page tabs and detail panels over deep navigation trees
- Empty and zero states get illustration + heading + one primary action, centered

### Effects

- Ink-tinted (rgba(18,28,45,…)) shadows keep elevation warm against the navy text
- Brand red appears only as highlight strokes and logo moments — a deliberate scarcity effect

### Motion

- Easing: ease-out; durations 100ms / 200ms / 400ms
- Modals and toasts slide/fade around 200ms; disclosure content animates height briefly
- Loading favors skeletons over spinners for console panels
- Animation tokens respect prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f4f4f6;
  --color-text: #121c2d;
  --color-text-muted: #606b85;
  --color-accent: #006dfa;
  --color-accent-strong: #001489;
  --color-link: #0263e0;
  --color-brand: #f22f46;
  --color-border: #8b93aa;
  --color-error: #c72323;
  --color-success: #0b602d;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 100px;
  --shadow-shadow-card: 0 2px 8px 0 rgba(18, 28, 45, 0.1);
  --shadow-shadow: 0 4px 16px 0 rgba(18, 28, 45, 0.2);
  --shadow-shadow-high: 0 16px 24px 0 rgba(18, 28, 45, 0.2);
  --shadow-shadow-focus: 0 0 0 2px #ffffff, 0 0 0 3px #006dfa, 0 0 0 5px #cce4ff;
  --border-default: 1px solid #cacdd8;
  --font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "Fira Code", Courier, monospace;
  --text-base: 14px;
  --leading-heading: 1.3;
  --leading-body: 1.43;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: ease-out;
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Dark ink #121c2d product sidebar with white labels and blue selected pills, or a white top bar with the red Twilio logo; breadcrumbs live in the page header
- **Hero:** Console page header: 24px 600-weight heading in ink, 14px weak-text description, primary blue button top-right; marketing pages set Twilio Sans Display over white with red accents
- **Card:** White card, 8px radius, 1px #cacdd8 border or shadow-card, 20–24px padding; header row with heading + optional menu button; used for metric and setting groups
- **Button (primary):** #006dfa fill, white 600-weight 14px label, 4px radius, 36px tall; hover/pressed deepen toward #001489; focus fires the triple ring
- **Button (secondary):** White fill, 1px #8b93aa border, ink text; destructive variant uses #c72323; link-style buttons take #0263e0
- **Form fields:** 600-weight 14px label with optional 'Required' asterisk, help text in #606b85, then a white input with 1px #8b93aa border, 4px radius, 36px tall; error swaps border/message to #c72323 with an icon

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The Paste focus state: a triple box-shadow ring (white gap, #006dfa blue, pale blue halo) around any focused control — unmistakable in the Twilio Console and impossible to miss on a support floor. Spend boldness here; keep everything else quiet.

## Do

- Use tokens for every style decision — Paste's lint rules and reviews reject raw hexes, and the dark theme depends on it
- Keep primary actions blue; Twilio red is brand seasoning, not an action color
- Use the triple-ring focus shadow exactly as shipped — it's tuned for both themes
- Compose from Paste primitives (Box, Text) with token props when a component is missing

## Don't

- Don't color buttons or links with #f22f46 — red means brand (or error via the separate #c72323), never 'go'
- Don't use pure-black shadows or text; Paste's ink navy #121c2d is the darkest value in the system
- Don't restyle Paste components with CSS overrides; extend via tokens and variants so theme switching survives
- Don't ship Twilio Sans outside Twilio properties — it's proprietary; Inter (already in Paste's fallback stack) is the substitute

## Accessibility notes

- Paste is built to WCAG 2.1 AA with per-component accessibility docs and a dedicated a11y review in its contribution process; text tokens are split (e.g. success text #0b602d vs success background #14b053) so text always uses the AA-passing variant
- The triple focus ring keeps ≥3:1 contrast against both white and dark backgrounds by including its own white separator ring
- All rgb() token values were converted to hex exactly for this record; the official dark theme ('twilio-dark') supplies the darkRoles

## Reference sites

- Twilio Paste: https://paste.twilio.com
- Paste design tokens: https://paste.twilio.com/tokens/
- twilio-labs/paste on GitHub: https://github.com/twilio-labs/paste

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip twilio-paste.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/twilio-paste.json

Settings → Capabilities → Skills → Upload skill → twilio-paste.zip