Twilio
A developer-communication platform with a bold red (#F22F46) signature against predominantly white and light gray surfaces. Twilio's Paste design system is one of the most documented in developer tooling — exhaustive, accessible, and principled — with a clean sans-serif stack (Inter), strict spacing, and a content hierarchy built for documentation-heavy products. The system reads as serious infrastructure: direct, trustworthy, and technical without being cold. Red is used assertively for the brand, CTAs, and product moments; the rest of the palette is functional neutrals.
Color Tokens
version: alpha name: Twilio description: "A developer-communication platform with a bold red (#F22F46) signature against predominantly white and light gray surfaces. Twilio's Paste design system is one of the most documented in developer tooling — exhaustive, accessible, and principled — with a clean sans-serif stack (Inter), strict spacing, and a content hierarchy built for documentation-heavy products. The system reads as serious infrastructure: direct, trustworthy, and technical without being cold. Red is used assertively for the brand, CTAs, and product moments; the rest of the palette is functional neutrals."
colors: primary: "#F22F46" on-primary: "#ffffff" primary-hover: "#D41C32" secondary: "#0263E0" ink: "#121C2D" ink-muted: "#606B85" canvas: "#ffffff" surface-1: "#F4F4F6" surface-2: "#E8E8EB" border: "#CACDD8" code-bg: "#F4F4F6" success: "#14892B" warning: "#F59A1A" danger: "#D61F1F"
typography: display: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: -0.02em body: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0 code: fontFamily: "Fira Code, Consolas, Monaco, monospace" fontSize: 13px fontWeight: 400 lineHeight: 1.5
spacing: base: 4px scale: [2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96]
radius: sm: 2px md: 4px lg: 8px pill: 9999px
shadows: card: "0 1px 4px rgba(18,28,45,0.1)" elevated: "0 4px 16px rgba(18,28,45,0.12)"
motion: duration-fast: 100ms duration-base: 150ms easing: cubic-bezier(0.4, 0, 0.2, 1)
1. Visual Theme & Atmosphere
Twilio is for builders. The Paste design system reflects this with documentation-first thinking: every component has explicit guidance, accessibility annotations, and code snippets. The red brand color is used with confidence — it doesn't apologize for being bold. The rest of the system is clean, functional white and gray that keeps developer attention on the code samples and API documentation that actually matter.
2. Color System
- Red primary: #F22F46 — Twilio's defining color, used on logo, primary CTAs, product accents
- Navy ink: #121C2D — deep cool-dark, not pure black; gives text a technical authority
- Secondary blue: #0263E0 — links, secondary actions, documentation anchors
- Neutral grays: #F4F4F6 / #E8E8EB — light surfaces with cool undertones
- Code background: #F4F4F6 — distinct but not distracting from inline code
- Semantic: success green, warning amber, danger red for API status indicators
3. Typography
Inter at all levels — the choice communicates reliability and cross-platform consistency. Display at 700/48px with tight tracking. Body at 400/16px for documentation readability. Code blocks use Fira Code for ligature support and readability at small sizes. The Paste system specifies exact token values for every typographic use case.
4. Components & Patterns
- API explorer: Dark code panel left, response panel right; toggle between languages
- Product cards: Bordered panels with product icon, name, one-line description
- Status badges: Pill-shaped, color-coded for API health indicators
- Documentation sidebar: Fixed left nav with nested sections, active indicator left border in red
- Code blocks: Syntax-highlighted, copy button, language tab selector
- Callout boxes: Left-border accent in semantic colors (info/warning/danger)
5. Spacing & Layout
Paste uses a 4px base grid (half of the conventional 8px), allowing very fine-grained control. Documentation layout: 240px left nav, content area max 800px, optional right TOC. API reference uses a two-column code/doc split. Marketing pages are wider (1280px) with more visual breathing room.
6. Motion & Interaction
Fast and functional. 100–150ms transitions. Code copy button shows brief checkmark confirmation. API request/response demos have a loading skeleton then fill. No decorative animation — developer tools should be instant-feeling.