---
version: alpha
name: Twilio
description: Dark-navy developer platform — near-black canvas, signature Twilio Red, Whitney SSm at bold weight, pill-shaped CTAs, and a clean two-tone depth system built on border contrast rather than shadow.

colors:
  # Canvas / surfaces
  background: "#000d25"
  surface: "#ffffff"
  surface-dark: "#000d25"
  surface-mid: "#0a1635"  # slightly lighter dark section panels

  # Ink / text
  ink: "#ffffff"                # was #000d25 (= same hex as background → 1:1 body-contrast); fixed to match ink-on-dark (#ffffff) — dark-canvas brand; #ffffff on background #000d25 = 19.4:1
  ink-on-dark: "#ffffff"
  ink-secondary: "#7e869c"
  ink-muted: "#cacdd8"

  # Brand
  primary: "#1866ee"
  primary-hover: "#1d7aff"
  on-primary: "#ffffff"
  primary-container: "#d7e6ff"  # was rgba(24,102,238,0.12) — Google format requires hex

  # Twilio Red — the signature brand accent
  red: "#ef223a"
  red-hover: "#cb1d31"
  red-dim: "#3d0a10"  # was rgba(239,34,58,0.2) — Google format requires hex
  on-red: "#ffffff"

  # Semantic
  success: "#07b56a"
  warning: "#f5a623"
  error: "#ef223a"
  info: "#3acefc"

  # Borders
  border: "#dde0e6"
  border-dark: "#000d25"
  border-subtle: "#1e2d50"  # hairline dividers on dark panels

  # Shadow tints
  shadow-soft: "#121c2d"  # was rgba(18,28,45,0.15) — Google format requires hex
  shadow-card: "#121c2d"  # was rgba(18,28,45,0.10) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Buffalo, Georgia, serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 2.5px
  display:
    fontFamily: "Whitney SSm, helvetica, arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.30
    letterSpacing: -3px
  heading-section:
    fontFamily: "Whitney SSm, helvetica, arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -1.44px
  heading-sub:
    fontFamily: "Whitney SSm, helvetica, arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.30
    letterSpacing: -0.8px
  heading-card:
    fontFamily: "Whitney SSm, helvetica, arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.29
    letterSpacing: 0px
  body-large:
    fontFamily: "Whitney SSm, helvetica, arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Whitney SSm, helvetica, arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  body-strong:
    fontFamily: "Whitney SSm, helvetica, arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.56
    letterSpacing: 0px
  button-ui:
    fontFamily: "Whitney SSm, helvetica, arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "Whitney SSm, helvetica, arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.50
    letterSpacing: 0px
  caption:
    fontFamily: "Whitney SSm, helvetica, arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  caption-sm:
    fontFamily: "Whitney SSm, helvetica, arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.75
    letterSpacing: 0px
  code:
    fontFamily: "Twilio Sans Mono, SFMono-Regular, Consolas, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  none: 0px
  sm: 4px
  md: 10px
  lg: 20px
  pill: 50px

components:
  # Primary blue pill CTA
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 6px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  # Ghost / outlined button
  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.border-dark}"   # was {colors.ink}; after ink changed to #ffffff, use border-dark (#000d25) for dark text on white = 19.4:1
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 6px 24px
  button-ghost-hover:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink-on-dark}"

  # Twilio Red CTA (hero emphasis)
  button-red:
    backgroundColor: "{colors.red}"
    textColor: "{colors.on-red}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 6px 24px
  button-red-hover:
    backgroundColor: "{colors.red-hover}"
    textColor: "{colors.on-red}"

  # Card on dark canvas
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 24px
  card-dark-hover:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink-on-dark}"

  # Card on light surface
  card-light:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.border-dark}"   # was {colors.ink}; after ink changed to #ffffff, use border-dark (#000d25) = 19.4:1 on white
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 24px

  # Input field
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.border-dark}"   # was {colors.ink}; after ink changed to #ffffff, use border-dark (#000d25) = 19.4:1 on white
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.border-dark}"   # was {colors.ink}

  # Badge — pill, Twilio Red
  badge-red:
    backgroundColor: "{colors.red}"
    textColor: "{colors.on-red}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 0px 12px
  badge-chip:
    backgroundColor: "{colors.red-dim}"
    textColor: "{colors.on-red}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 8px 12px

  # Navigation
  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.border-dark}"   # was {colors.ink}; after ink changed to #ffffff, use border-dark (#000d25) = 19.4:1 on white
    typography: "{typography.nav-link}"
    padding: 12px 24px
  nav-link:
    textColor: "{colors.border-dark}"   # was {colors.ink}
    typography: "{typography.nav-link}"
    padding: 8px 12px
  nav-link-hover:
    textColor: "{colors.primary}"

  # Code block
  code-block:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.code}"
    rounded: "{rounded.md}"
    padding: 16px 20px
---

# Twilio Design System

## Overview

Twilio's website operates in two distinct registers that define the design system's personality. The primary register is a deep midnight navy (`{colors.background}`) — not black, but a near-navy that reads as technical, grounded, and enterprise-trustworthy. White sections break the darkness for contrast, and this two-tone alternation provides the page's visual rhythm. The signature Twilio Red (`{colors.red}`) is restrained: it appears in small text labels, accent underlines, and product badges, not as a CTA background. The interactive role belongs to a confident electric blue (`{colors.primary}`), which is more software-native than the emotional red.

Whitney SSm is the system's typographic engine — a humanist condensed sans with generous x-height and slightly informal warmth. At display sizes (64px, 700 weight), it tracks tight at -3px, creating the dense, bold hero lines typical of developer-focused SaaS. But Whitney's real character is in the 600-weight mid-sizes, where it reads as approachable and instructional rather than stiff. The decorative font Buffalo appears in the hero at 72px with wide positive tracking (+2.5px), creating a sprawling, almost hand-lettered counterpoint — used sparingly, a signal of cultural looseness alongside technical rigor. Twilio Sans Mono handles code snippets and API strings, reinforcing the platform's identity as infrastructure.

Shape is where Twilio makes its most distinctive choice: buttons are pill-shaped (50px radius) across the entire system. Cards use a moderate 10px radius, while small labels and inputs stay at 4px. This gives the interactive layer a friendly, softened quality that sits unexpectedly well against the dark industrial canvas.

**Key Characteristics:**
- Deep midnight navy (`{colors.background}`) as the primary canvas — sophisticated developer-dark, not harsh black
- Two-tone rhythm: dark sections alternate with white sections for pacing
- Twilio Red (`{colors.red}`) as a semantic and brand accent, not a CTA color
- Electric blue (`{colors.primary}`) as the primary interactive color for buttons, links, and focus states
- Pill-shaped buttons (50px radius) across all variants — the friendliest element in a technically demanding interface
- Whitney SSm at 700 weight for headings with aggressive negative tracking (-1.44px to -3px)
- Buffalo decorative serif at 72px with wide positive tracking (+2.5px) for hero moments
- Twilio Sans Mono for code, API tokens, and developer-mode text
- Clean border-based depth on dark panels — thin `{colors.border-subtle}` hairlines rather than shadows
- Shadow system reserved for floating elements: soft `rgba`-derived drops using `{colors.shadow-soft}`
- Tab and navigation underline uses `{colors.red}` (2px solid) for active state indicators

## Colors

### Primary
- **Midnight Navy** (`{colors.background}`): The dominant page canvas. Nearly every dark section sits on this color. Distinct from black: it has blue undertones that harmonize with the blue interactive system.
- **Pure White** (`{colors.surface}`): Alternating light sections, cards on dark canvas, form surfaces.
- **Ink** (`{colors.ink}`): Heading and body text on white sections.

### Brand Accent
- **Twilio Red** (`{colors.red}`): The historic brand signature. Used for active tab underlines, product chips and badges, `1px solid` borders on announcement banners, and semantic error states. Not a button color.
- **Twilio Blue** (`{colors.primary}`): The primary interactive color — pill CTAs, link text, focus rings, and selected state indicators. `{colors.primary-hover}` shifts slightly lighter on hover.

### Text
- **White** (`{colors.ink-on-dark}`): All text on dark sections.
- **Medium** (`{colors.ink-secondary}`): Secondary text and labels on dark panels.
- **Muted** (`{colors.ink-muted}`): Tertiary text, disabled labels, nav link muted states.

### Semantic
- **Success** (`{colors.success}`): Green confirmation, status indicators.
- **Warning** (`{colors.warning}`): Caution states.
- **Error** (`{colors.error}`): Matches Twilio Red — error states share the brand color.
- **Info Cyan** (`{colors.info}`): `#3acefc` — used sparingly for informational accent borders and product category tags.

### Borders & Depth
- **Border Light** (`{colors.border}`): Dividers and card outlines on white sections.
- **Border Subtle** (`{colors.border-subtle}`): Hairline separators on dark panels.
- **Shadow Soft** (`{colors.shadow-soft}`): Opaque approximation of `rgba(18,28,45,0.15)` — used for card elevation on light surfaces.

## Typography

### Font Family
- **Primary**: `Whitney SSm`, with fallbacks `helvetica, arial, sans-serif`. Self-hosted, all weights 400–700.
- **Display Decorative**: `Buffalo`, with fallbacks `Georgia, serif`. Slab-serif, used only at hero scale.
- **Monospace**: `Twilio Sans Mono`, with fallbacks `SFMono-Regular, Consolas, monospace`. Custom mono companion font.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | Buffalo 72px — decorative hero only, wide tracking |
| `display` | Whitney SSm 64px/700 — primary hero headlines |
| `heading-section` | 48px/700 — major section titles |
| `heading-sub` | 40px/700 — sub-section headlines |
| `heading-card` | 28px/400 — feature card headings, large callouts |
| `body-large` | 20px/400 — intro paragraphs, lead text |
| `body` | 18px/400 — standard reading text |
| `body-strong` | 18px/600 — emphasized inline labels, strong callouts |
| `button-ui` | 16px/500 — all button labels and interactive text |
| `nav-link` | 16px/600 — navigation items |
| `caption` | 14px/500 — small labels, form hints |
| `caption-sm` | 12px/500 — fine print, timestamps |
| `code` | Twilio Sans Mono 16px/400 — API snippets, code blocks |

### Principles
- **Bold as default for headings**: Whitney SSm at 700 weight for all headlines above 24px — confident and direct, appropriate for a platform selling to engineering teams.
- **Negative tracking scales with size**: from -3px at 64px down to -0.8px at 40px, returning to 0 at body sizes.
- **Buffalo for personality**: the wide-tracked serif at hero scale adds warmth that the bold display headings cannot. Used sparingly — one instance per page maximum.
- **Twilio Sans Mono in developer contexts**: API method names, code snippets, token strings. Never repurposed for labels or captions.
- **Weight 600 as mid-emphasis**: nav links, strong body, product category labels all use 600 — a distinct tier between regular (400) and bold (700).

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit: 8px.

The scale runs dense at the small end (4 / 8 / 12 / 16) to accommodate the component-heavy dark sections, then opens up generously at large (24 / 32 / 48 / 64 / 96) for section-level breathing room.

### Grid & Container
- Max content width: approximately 1280px centered
- Breakpoints at 480px, 768px, 991–992px, 1270–1286px
- Hero: full-bleed dark section, centered content, left-aligned headline on narrow viewports
- Feature sections: 2–3 column grids on dark canvas
- Alternating dark/light sections create structural rhythm without explicit dividers

### Whitespace Philosophy
- **Dense component interiors**: 24px padding on cards keeps content tight on the dark canvas.
- **Generous section gaps**: `3xl`–`5xl` spacing between alternating dark/light sections.
- **No decorative dividers**: depth comes from background color switching, not horizontal rules.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default — all elements on dark canvas |
| Hairline (Level 1) | `1px solid {colors.border-subtle}` | Cards and panels within dark sections |
| Bordered (Level 2) | `1px solid {colors.border}` | Cards on white sections, menus, dropdowns |
| Elevated (Level 3) | `box-shadow: {colors.shadow-soft} 0px 10px 37.5px 0px` | Floating panels, modals, video players |
| Focus Ring | `{colors.primary} 0px 0px 0px 2px inset` | Keyboard focus state on all interactive elements |

**Shadow Philosophy**: The dark canvas is nearly its own elevation layer — white cards on `{colors.background}` feel elevated by contrast alone without any shadow. Shadows are reserved for floating elements (dropdowns, modals, video lightboxes) and use a deep navy-tinted soft drop in `{colors.shadow-soft}`. The focus ring uses a 2px inset blue ring (`{colors.primary}`) rather than an outline — a choice that maintains button shape without expanding hit targets.

## Shapes

The complete radius scale lives in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Dividers, tab underlines |
| `sm` | 4px | Inputs, code blocks, small interactive elements |
| `md` | 10px | Cards, menus, dropdown containers, badges |
| `lg` | 20px | Large media containers, video embeds |
| `pill` | 50px | All buttons — primary, ghost, and red variants |

The pill-button is Twilio's most identifiable geometric choice. In a system dominated by dark, technical surfaces, the pill shape provides approachability and consumer-software familiarity. It contrasts deliberately with the sharp 4px inputs and card corners, reserving softness for the most user-facing interactive element.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card-dark}`).

### Buttons

- **`button-primary`** — Blue pill CTA (`{colors.primary}` fill, white text, 50px radius). The default call-to-action throughout the site. Hover shifts to `{colors.primary-hover}`.
- **`button-ghost`** — White pill with `{colors.ink}` text. Used as a secondary action alongside primary CTAs.
- **`button-red`** — Twilio Red pill, reserved for high-emphasis hero moments and destructive actions.

### Cards

- **`card-dark`** — Dark navy surface on dark canvas. Depth established via `1px solid {colors.border-subtle}` border. 10px radius. Hover transitions to `{colors.surface-mid}`.
- **`card-light`** — White surface for content on light sections. Standard `1px solid {colors.border}` border, 10px radius.

### Inputs
**`input`** — White surface, 4px radius, 1px solid `{colors.border}` border, Whitney SSm body size. Focus state shifts to a 2px inset ring using `{colors.primary}`.

### Badges
- **`badge-red`** — Twilio Red fill on white text, 10px radius. Applied to product category labels ("API", "Conversations") inline with content.
- **`badge-chip`** — Dimmed red background with red border, pill-shaped. Used for announcement or feature "chip" labels at the top of sections.

### Navigation
**`nav-bar`** — White surface with `{colors.ink}` text. Navigation links use `{typography.nav-link}` (16px/600). Right-aligned CTAs use primary pill button. Active tab state uses a 2px bottom border in `{colors.red}`. Mobile collapses to hamburger.

### Code Block
**`code-block`** — Dark navy surface (`{colors.surface-dark}`), white text, Twilio Sans Mono, 10px radius. Used to display API method calls and sample code throughout developer-facing sections.

## Do's and Don'ts

### Do
- Use `{colors.background}` midnight navy as the default section canvas — it's Twilio's primary visual identity
- Apply pill-shape buttons (`{rounded.pill}`) for all CTAs — this shape is the system's interactive signature
- Reserve `{colors.red}` for tab active states, product labels, and semantic error states only
- Use `{colors.primary}` blue for all interactive states: buttons, links, focus rings, selected indicators
- Apply negative letter-spacing on all Whitney SSm headings above 24px
- Use Twilio Sans Mono in developer contexts — API tokens, code snippets, method names
- Use Buffalo font only at hero scale (64px+) with positive tracking (+2.5px) for one decorative moment per template
- Alternate dark and white sections for page rhythm — background switching replaces dividers

### Don't
- Don't use `{colors.red}` as a button background in non-destructive contexts — blue is the interactive color
- Don't use mid-range border-radius on buttons (6px–30px) — the system is binary: `{rounded.sm}` for form elements, `{rounded.pill}` for buttons
- Don't apply Buffalo at body or UI sizes — it's an oversized decorative font, not a text face
- Don't use warm-tinted or colored shadows — the depth system uses clean navy-tinted drops only
- Don't use positive letter-spacing on Whitney SSm headings — wide tracking is exclusively a Buffalo pattern
- Don't place text directly on dark panels without checking the ink-on-dark token (`{colors.ink-on-dark}`) — secondary text must use `{colors.ink-muted}` or `{colors.ink-secondary}`, never raw white at reduced opacity
- Don't use the Buffalo display token in body text — it is only specified for 72px single-line hero contexts
- Don't place white cards on white sections without a visible border — depth disappears without `1px solid {colors.border}`

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single column, hero stacks vertically, nav collapses to hamburger |
| Mobile | 480–767px | Single column with increased vertical padding |
| Tablet | 768–991px | 2-column feature grids, reduced hero font sizes |
| Desktop | 992–1279px | Full 3-column grids, side-by-side hero |
| Large Desktop | >1280px | Centered with max-width ~1280px, generous lateral margins |

### Touch Targets
- Pill buttons have at least 36px computed height — comfortable for touch
- Navigation links spaced at minimum 44px effective tap area through padding
- Badge chips at 50px radius have adequate tap margins

### Collapsing Strategy
- Hero: 64px Whitney SSm → 40px at tablet → 32px on mobile; letter-spacing scales down proportionally
- Navigation: sticky horizontal bar → hamburger toggle below 768px
- Feature grids: 3-column → 2-column → single column stacked
- Dark/white alternating sections maintain full-width treatment at all viewports
- Code blocks gain horizontal scroll on mobile rather than wrapping

### Image Behavior
- Hero illustration or video thumbnails maintain 20px border-radius at all sizes
- Product screenshots use `{colors.shadow-soft}` drop shadow at all sizes
- Card images maintain 10px border-radius matching the card container

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Midnight Navy (`{colors.background}`)
- Text on dark: White (`{colors.ink-on-dark}`)
- Text on light: Near-black (`{colors.ink}`)
- Primary CTA: Blue (`{colors.primary}`)
- Brand accent: Twilio Red (`{colors.red}`)
- Secondary text: Muted blue-gray (`{colors.ink-secondary}`)
- Border light: `{colors.border}`
- Border dark: `{colors.border-subtle}`
- Code text: Twilio Sans Mono on dark canvas

### Example Component Prompts

- "Create a Twilio-style hero section: dark navy background (`{colors.background}`). Headline using Whitney SSm 64px weight 700, line-height 1.30, letter-spacing -3px, white text (`{colors.ink-on-dark}`). Subtext 18px weight 400 in `{colors.ink-muted}`. Primary pill CTA: `{colors.primary}` background, white text, 50px border-radius, 6px 24px padding, 16px/500 Whitney SSm. Secondary ghost CTA: white background, `{colors.ink}` text, same radius."
- "Build a Twilio developer card on dark canvas: `{colors.background}` background with 1px solid `{colors.border-subtle}` border, 10px border-radius, 24px padding. Card title 28px Whitney SSm weight 400 in white. Body 18px/400 in `{colors.ink-muted}`. Code snippet block: dark surface, Twilio Sans Mono 16px/400, `{colors.info}` as syntax highlight color."
- "Design a Twilio navigation bar: white surface, Twilio wordmark left. Nav links in Whitney SSm 16px weight 600 `{colors.ink}`. On hover, shift text to `{colors.primary}` with 0.3s ease-in-out transition. Right-aligned: blue pill button 'Contact sales' + blue outline pill 'Start for free'."
- "Add a Twilio product badge: `{colors.red}` background, white text, Whitney SSm 14px weight 600, 10px border-radius, 0px 12px padding. Use for product category labels like 'Conversations' or 'Authentication'."
- "Create an API code block: `{colors.surface-dark}` background, 10px border-radius, 16px 20px padding, Twilio Sans Mono 16px weight 400. Primary method name in `{colors.info}` cyan. String values in `{colors.red}`. Comments in `{colors.ink-secondary}`. White for standard tokens."

### Iteration Guide
1. Start with `{colors.background}` — the dark navy canvas defines Twilio's tone. White sections should feel like deliberate relief, not the default.
2. Pill buttons are mandatory for all CTAs — if it's a button, it's a pill (`{rounded.pill}`). Reserve `{rounded.sm}` for inputs and code blocks only.
3. Blue (`{colors.primary}`) is the interactive layer. Red (`{colors.red}`) is the brand and semantic layer. They should never swap roles.
4. Whitney SSm heads always track negative — use the `heading-section` (-1.44px) or `display` (-3px) tokens as the scale, never positive tracking.
5. Depth on dark surfaces comes from the border, not the shadow — apply `1px solid {colors.border-subtle}` to create card lift without shadows.
6. Buffalo appears once per page at 72px. If you're reaching for it at 32px or for UI labels, stop — use Whitney SSm instead.
7. All text on dark panels must resolve through the ink-on-dark tokens (`{colors.ink-on-dark}`, `{colors.ink-secondary}`, `{colors.ink-muted}`). Never use raw white with CSS opacity.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Twilio. Brand names and trademarks belong to their respective owners.