What is Twilio's primary brand color?

Twilio runs two brand voltages with strictly separated roles. Cobalt blue #1866ee (wired in CSS as --color-blue-500 and --color-link) is the action voltage — it fills the primary pill CTA, the inline contact-sales button, and every text link. Twilio red #ef223a (wired as --color-red-light) is the identity voltage — it carries the wordmark in the top nav, the geometric red bracket framing the hero product visual, and the colorway for the second-section emphasis headline reading 'self-service'. The two never overlap; cobalt never appears as a brand mark, and red never appears as a button fill. Across the captured page cobalt registers 22 occurrences and red registers 73, but red's count is dominated by border applications on the bracket frame.

What typeface does Twilio use, and what should I use as a substitute?

Twilio runs Whitney SSm (a Hoefler & Co. licensed sans-serif) across every display, heading, body, button, and nav surface, with Twilio Sans Mono as the secondary voice for code blocks and the custom Buffalo script as a single decorative accent at 72px. Display headlines sit at 40-56px in weight 700 with tight -1.44 to -1.68px letter-spacing, body at 16-18px in weight 400, and labels at 14px in weights 400-600. The closest open-source substitute for Whitney SSm is Inter at the same weights — Whitney's slightly tighter cap-height transfers well at the 56px hero size if you reduce line-height by 8-10%. Buffalo is a Buffalo Studio script with no direct open replacement; substitute with Caveat or Allison if you need the same warm-script accent.

Why does Twilio use navy instead of white as the marketing canvas?

The marketing canvas is #000d25 (wired as --color-ink, --color-blue-900, and --color-default), a deep navy that runs the entire site rather than a per-section feature treatment. Most developer-platform brands (Stripe, the pre-acquisition SendGrid, Mailgun) default to white because it reads as 'API documentation neutral.' Twilio chose navy in the 2023 brand refresh because the dual brand voltages — cobalt blue and Twilio red — both lose chromatic punch against white but read with much more force against the dark floor. The navy also lets product-screen mockups embed inline without requiring a card border or shadow; the screen sits flush against the canvas and the screen's own white surface becomes the elevation.

What corner-radius scale does Twilio use?

The radius scale is binary: 50px pill plus 4px small-step. The 50px pill is the recurring silhouette — it appears 41 times in the captured page across primary buttons, secondary outline buttons, contact-sales chips, and the language-selector tabs. 4px appears 7 times on small surfaces like inputs and code blocks. 20px appears 8 times on larger cards. 2px is reserved for checkboxes and the smallest UI surfaces. There is no 8 / 12 / 16px middle tier — the system is intentionally either fully-rounded or sharp-with-a-hair-of-softening, never in between.

Can I use this DESIGN.md to build my own React communications-API site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Twilio's specific moves: navy canvas at #000d25 instead of white, dual-voltage discipline with cobalt for action and red for identity, Whitney SSm at weight 700 for the display ladder, and the 50px pill as the recurring CTA silhouette. The tokens resolve cleanly without invention. One caveat: the dual-voltage move only works if you have two genuinely distinct brand colors with non-overlapping semantic roles. Most single-brand systems will be better served by a held-in-reserve single voltage like Spline or Cloudflare. The navy canvas is also more demanding than white — every embedded product screenshot has to read against a dark floor without losing legibility, which constrains the visual library.

Twilio Design System

Twilio's marketing system as a DESIGN.md file: deep navy canvas, dual voltage (cobalt action plus Twilio red identity), Whitney SSm display, 50px pill CTAs.

About Twilio DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source twilio.com

Communication & Messaging

Twilio's marketing site does something the rest of the developer-API category avoids: it runs on a deep navy floor instead of white. The hero canvas at twilio.com sits at near-black blue #000d25, with a 56px Whitney SSm display headline rendered in pure white and a small 36px cobalt-blue pill CTA centered beneath. The product visuals in the hero — a tilted red-bracketed frame around a sample voice-AI conversation, a magenta-and-blue chat scene — float on the same navy floor with no atmospheric gradient between sections. Where Stripe sits on indigo mesh and the pre-acquisition SendGrid sat on white, Twilio commits to the dark surface and lets the Twilio red logo and the cobalt CTA carry every chromatic moment.

The dual-voltage discipline is the second move worth naming. The brand owns two saturated reds and a saturated cobalt, and the system keeps their roles strictly separated. Twilio red #ef223a is identity — the wordmark in the top nav, the geometric red bracket framing the hero video, the headline emphasis on "self-service" further down the page. Cobalt #1866ee is action — the "Start for free" pill, the inline "Contact sales" outline button, every link color. The two voltages share the page but never share a job. Most brands running two strong accents (Reddit's orange and blue, Postman's orange and red) let the two compete; Twilio lets them divide labor.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 13 color tokens drawn from the navy canvas and the dual voltage; 13 typography tokens running Whitney SSm at the 700-weight display ladder (56px / 48px / 40px), with body and label tiers at 400-600 and a single Buffalo script accent at 72px; a binary radius scale (4px small-step plus 50px pill); and 16 component definitions covering the cobalt pill CTA, the red-bracketed video frame, the dark dropdown surface, and the navy section card. Feed this file to Claude or Cursor and it will reproduce Twilio's specific moves: navy not white, two voltages not one, Whitney SSm 700 across the display tier, and the 50px pill as the recurring silhouette.

What makes it distinct

Navy-first surfacethe marketing canvas sits at deep navy #000d25 rather than white, inverting the developer-platform default of Stripe or SendGrid-pre-acquisition
Dual voltage disciplinecobalt #1866ee carries every CTA fill while Twilio red #ef223a carries the wordmark and the geometric product-frame bracket; the two never overlap roles
Whitney SSm at weight 70056px hero, 48px section, 40px tertiary; the display ladder leans on weight rather than tracking, the inverse of the Cloudflare 500-weight move
50px pill radius is the only recurring radiusbuttons, chips, and category tabs all share the same fully-rounded silhouette; 4px sits underneath for inputs and small surfaces
Buffalo script accenta single 72px Buffalo serif script appears as a decorative aside, the system's one off-grid typographic moment

Live at twilio.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

twilio.com

Explore Twilio

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Twilio design system FAQ

Common questions about Twilio's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Twilio — official site

Twilio's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.