Neutral by design
Work across models and tech stacks; no single-vendor lock-in. Published
The system
Fixed, everywhere
- One ink #000D25 page with a white nav
- Blue #1866EE pill CTAs
- Red only for the logo, numbers and badges
- Plain sans type in sentence case, bold headlines
- Product shown as real UI fragments
- Conversational, precise copy
The one thing that varies
the campaign layer: theme, photography, puns and the stat display face change with the season (Halloween 2026 at time of study)
Source: twilio.com/en-us
How loud each format gets
Silent
QuietProduct UI
CalmDeckEmail
WarmLanding page
Loud
Loudest
Our engine's setting, built from their rules.
Every piece passes 3 checks
Logo hidden
Cover the logo. It should still read as Twilio: one ink page, blue pills, red numbers and product UI fragments.
Red audit
Red appears only on the logo, numbers and badges; never on a button.
Voice
Run the word list: no click, leverage, easy, e.g.; sentence case throughout.
Strategy
The customer engagement platform for builders: channels, context and AI in one platform. Our reading
Trusted at scale
Scale, security and compliance for global interactions. Published
Endlessly extensible
Simple APIs and building blocks developers adapt. Published
Recognized leader
Analyst recognition for CPaaS and customer engagement. Observed
Reaching a business shouldn't be a nightmare
Building blocks for every conversation
Build for the AI era. Build with Twilio.
Full spec
- For Published
- Developers and the businesses they build for, from startups to global enterprises
- Problem Observed
- Bad, context-free communication frustrates customers (the homepage frames it as a horror story).
- Promise Published
- Continuous customer conversations with humans or AI agents, on one platform.
- Mission Published
- On a mission to enable every builder
Proof behind each pillar
- Neutral by design. Bring your own LLM; integrate with existing tools
- Trusted at scale. 180+ countries and territories; 400K+ customers
- Trusted at scale. 262B+ messages sent/received; 38B+ voice calls; 2.4T+ emails sent
- Endlessly extensible. Official server-side SDKs for Python, C#, PHP, Ruby, Java, Node.js plus curl
- Recognized leader. 4x Leader in the Gartner Magic Quadrant for CPaaS (2026)
- Recognized leader. 5x leader in the IDC MarketScape: Worldwide CPaaS
Story Published
Founded in 2008 to bring communications to the cloud; now a platform combining channels, contextual data and AI orchestration (paraphrase).
Values
Wear the customer's shoes
Listen to and build with customers
PublishedAsk "what if?"
Curiosity first; turn uncertainty into possibility
PublishedOwn the outcome
Do what we say; high standards
PublishedWe > me
Collective success; debate, then commit
PublishedNo shenanigans
Transparent, candid, respectful
PublishedCategory. CPaaS and customer engagement platform (CEP) Observed
Why them
- Neutral by design Published
- Trusted at scale Published
- Endlessly extensible Published
- Free trial and pay-as-you-go pricing Observed
Instead of
Single-vendor suites that lock in a model or stack (their framing)
Boilerplate Published
Twilio is a customer engagement platform that combines communication channels, contextual data and AI orchestration so businesses can build conversations with humans and AI agents (paraphrase of the company page).
Taglines
Build for the AI era. Build with Twilio. Published
Don't wait for change. Build it. Published
Reaching a business shouldn't be a nightmare Observed
They never claim
- Customer stats are each customer's own (Smava 150% higher click rates and so on), shown with the customer's logo, never as Twilio averages Observed
- Analyst claims carry a numbered footnote to a Sources accordion Observed
- Paste: never claim the product does something it can't Published
The homepage sells building blocks for conversations: products as cards, proof from customers and analysts, and a free start everywhere. The Why Twilio page states three pillars: neutral, trusted at scale, extensible.
Source: twilio.com/en-us/why-twiliotwilio.com/en-us/companytwilio.com/en-us
Personality and voice
Conversationalbut not stiffPublished
Thoughtfulbut not genericPublished
Reliablebut not overclaimingPublished
Quirkybut not unprofessionalPublished
A voice for developers: plain words, precise claims, a little fun when the moment allows it.
Full spec
- Sentence case headlines
- American spelling
- Write as “we”, to “you”
- Use the serial (Oxford) comma in lists of 3 or more
- Never: &. Say "and"
- Say “select”, not “click” or “tap” or “choose” or “pick”
- Say “sign in”, not “log in” or “login”
- Say “use”, not “leverage”
- Never: easy, easily
- Never: e.g., i.e., etc.. Say "for example" or "that is"
- Say “to”, not “in order to”
- Avoid forced capitalization; title case only for proper nouns and products
- Use contractions with pronouns (it's, you'll, we're) to sound conversational
- Write for a 10-13 year old reading level: short sentences, common words, explain technical terms
- No directional or color cues ("above", "the blue button"); name the thing
- CTAs are 2-3 word verb phrases: Start for free, Send messages, Verify users, View docs
conversationalthoughtfulreliablequirky
Paste publishes the brand team's four voice principles (conversational, thoughtful, reliable, quirky) and a tone spectrum (direct, balanced, casual) chosen by situation. The product style guide and word list are detailed and machine-checkable.
- Sentence case everywhere
- American English, Oxford comma, no ampersands
- Select, not click; sign in, not log in; use, not leverage
- Avoid easy, e.g., i.e., etc.
- Direct tone for errors and legal; casual only for celebrations
- The four voice principles come from the Twilio brand team and are published in Paste: conversational, thoughtful, reliable, quirky (published, https://paste-dsys.com/foundations/content/voice-and-tone/).
- Tone runs on a spectrum of direct, balanced and casual, chosen by the reader's situation and emotional state (published).
- Homepage voice (observed 2026-10-31): a seasonal campaign layer (Halloween 2026) wraps plain product promises in themed puns: nightmare, horror story, escape plan, hair-raising, hauntingly good. Strip the theme and each line is a short benefit plus a verb-first CTA. A landing page follows this homepage voice: one theme, light puns, never in CTAs.
Their words
buildersconversationscontextchannelsplatform
Never
clickleverageeasye.g.etc.log in
Source: paste-dsys.com/foundations/content/voice-and-tonepaste-dsys.com/foundations/colorstwilio.com/en-us
- Don’t joke in an error message
- Don’t claim the product does something it can't
Source: paste-dsys.com/foundations/content/voice-and-tonepaste-dsys.com/foundations/content/product-style-guidepaste-dsys.com/foundations/content/word-list
Logo
Twilio's logo rules (clear space, minimum size, misuse) live in its login-gated brand library (library.twilio.com, Bynder). Its public trademark guidelines only forbid altering or imitating the marks.
The four-dot bug reads at tiny sizes and works alone as an app icon.
Full spec
- Use the logo only as supplied; never restyle it
- Full red on white, all white on ink
- Don’t stylize, recolor or build composite marks with it
- Don’t imitate Twilio's trade dress or website layout (trademark guidelines)
The logo is a red circular bug with four dots plus a lowercase wordmark. On twilio.com it is full red on the white nav and all white in the dark footer.
Not published: clear space and minimum size (in the login-gated brand library).
Color
With one dark ground and one action color, the red logo and red numbers become the only bright marks, so they carry the brand.
Full spec
- Blue for every interactive element; red never for actions
- Twilio Red for logo, illustration accents and key numbers only
- Meet WCAG AA: 4.5:1 text, 3:1 large text and graphics
- Never use color alone to carry meaning
- Don’t overuse primary blue (several primary buttons side by side in product UI)
- Don’t create custom colors outside the tokens
| Page ground | #000D25 (observed) |
|---|---|
| Action | #1866EE (observed); Paste blue-60 #0263E0 (published) |
| Red | logo #F22F46, numbers #EF223A, Paste red-60 #DB132A |
Paste's tokens publish full alias ramps (blue, red, gray, green, orange, purple, yellow) and say Twilio Red is reserved for moments of impact while blue marks everything interactive. The homepage applies this on a single ink ground: #000D25 everywhere, #1866EE for actions, #EF223A for numbers.
Not published: color proportions; marketing palette hex values (homepage values are observed).
Source: paste-dsys.com/foundations/colorsgithub.com/twilio-labs/paste/blob/main/packages/paste-design-tokens/tokens/aliases/color-palette.ymltwilio.com/en-us
Typography
Build for the AI era. Build with Twilio.
Few weights, each with one job, so hierarchy reads at a glance.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| Whitney SSm (twilio.com headlines, 700) | Headlines 700: hero 56/66, section 40/52, card titles 20/32 | Commercial (Hoefler&Co. / Typography.com web font). Paste names Twilio Sans Display as the brand display face | Open Sans Measured closest of 28 open faces against Whitney on twilio.com: width within 2.4%, x-height within 1.3%; at 750 the bold matches width and ink |
| Whitney SSm (twilio.com text, 400-600) | Body 400, buttons and links 500, captions 600 | Commercial (Hoefler&Co.). Paste names Twilio Sans Text for UI text | Open Sans Same calibration; 400 with +0.01em tracking |
| Twilio Sans Mono | Code samples (300 on the homepage) | Twilio's own face (self-hosted on twilio.com for Paste); not an open licence | JetBrains Mono Open coding mono with a similar light weight |
| Buffalo (campaign stat face) | Customer-story stat numbers only | Commercial display face (licence not published) | Oxanium Square, chamfered heavy forms like Buffalo; 800 at 80px with 5px tracking matches its rendered width |
- Display for brand headlines only
- Semibold/bold for headings, regular for body
- Sentence case; avoid all caps
- Flush left by default; centre only short text
Paste names Twilio Sans as a super family of Display, Text and Mono: Display Extrabold for brand moments, Text Semibold for headings, Text Regular for body, Text Medium for small type, Mono for code. The live marketing site still renders Whitney SSm with Twilio Sans Mono for code.
Not published: a marketing type scale (sizes observed); Twilio Sans files or licence.
Source: paste-dsys.com/foundations/typographygithub.com/twilio-labs/paste/blob/main/packages/paste-design-tokens/tokens/themes/twilio/aliases/font-family.ymltwilio.com/en-us
Graphic elements
Reaching a business shouldn't be a nightmare
One dark ink page · the whole homepage, hero to footer
Do action is always Blue 500 #1866EE as a filled pill (radius 50px, 40px tall, 16px/500 white); the second action is the same pill as a 2px white ring or a white text link with a 2px underline. Red never carries an action.
Blue pills on navy · every call to action
Do Red light #EF223A on big numbers only: blocky stat face (Buffalo; Oxanium stand-in) for customer stats, 64px bold for analyst counts. Paste reserves Twilio Red for moments of impact (illustration, logo, iconography).
Red is for numbers · customer-story stats and analyst counts, the New badge, the logo
Do each product is shown as a fragment of real UI (a profile card, a channel switcher, a flowchart) in white-outlined dark panels with tiny red accents, inside a 368x460 rounded #191E36 panel (Paste's "medium scene" idea: real UI screens blended with people and graphic elements).
Product UI as illustration · the six product cards
Do photos of people using phones, cut to a slanted trapezoid with rounded corners and a navy bottom fade, white customer logo, red stat, white 600 caption; they run edge to edge in a continuous carousel.
Trapezoid photo cards · customer stories carousel
Specimens use sample copy, not Twilio’s.
Rounded, friendly shapes soften a technical product.
Full spec
- Pills for actions, 20px radius for cards and media
- White 1-2px outlines on dark UI fragments
- Red as a thin accent line or a number, never a field
Twilio's recognizable elements are few: the red four-dot bug, full-pill buttons, 20px-radius navy cards, white-outlined UI fragments with thin red accents, and photos cut into shapes.
Source: twilio.com/en-uspaste-dsys.com/foundations/illustrations
Iconography
Quiet icons keep attention on copy and product UI.
Full spec
- Pair icons with text labels
- One stroke weight, rounded caps
- White on ink, ink on white
Paste ships a single UI icon set; on the homepage icons are thin 1px rounded outlines in white (checks, plus, arrows) and ink in the nav.
Not published: icon grid and stroke spec for marketing icons.
Illustration
Showing real UI makes an API company's product visible.
Full spec
- Use illustrations sparingly; one per welcome screen
- Prefer SVG
- Give non-decorative illustrations a meaningful title
- Do not add outside elements; partner with Brand on new ones
Paste lists three illustration types curated by the Brand team: spot illustrations (literal, for empty and error states), medium scenes (real UI screens with people and graphic elements) and photo illustrations (photography blended with illustration, mostly for marketing).
Photography
People and phones make "conversations" concrete; the cool grade keeps photos inside the ink palette.
Full spec
- Grade photos cool so they sit on #000D25
- Cut photos into shapes or fade them to navy at the bottom
- Show the customer's product in use, phone in hand
Homepage photography (observed): real people with phones, in cool teal-and-navy grading, cut into shapes (trapezoid cards, a cut-out inside a red hexagon outline). The Halloween campaign uses cinematic horror stills.
Not published: a photography guideline (in the gated brand library).
Source: twilio.com/en-us
Motion
Short, plain transitions; motion shows the product working (typing code), not decoration.
Full spec
- 0.3s ease-in-out for interactive state changes
- Animate content that demonstrates the product
Observed: 0.3s ease-in-out on button color and ring changes, 0.18s on card hovers, a continuously scrolling stories carousel and a self-typing code sample.
Not published: motion principles or easing tokens.
Source: twilio.com/en-us
Interface & layout
The page, band by band
Hero
Building blocks intro
Product cards
Code sample
Customer stories
Analyst cards
Closing CTA
Sources
Buttons
Full spec
Paste publishes an 8px spacing grid with a 4px baseline, "friendship" spacing (closer means related), a 1232px max content width and about 712px text width. The homepage uses a 1200px container at 120px margins, 3-column 368px grids with 48px gaps and 64px band padding.
Measured from twilio.com/en-us's computed styles, element boxes and canvas font measurement in headless Chromium at 1440x900 and 390x844 after a full scroll (lazy images loaded).
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 120px | 32px |
| Section padding | 64px | 64px |
| Hero text width | max 576px, centered | full width |
| Card gap | 48px | 48px |
| Navigation | 112px | 112px |
Type, at size
Hero H1
Whitney SSm (twilio.com headlines, 700) · 56px (phone 34) · line 1.18 · tracking -1.68px · weight 750
Section H2
Whitney SSm (twilio.com headlines, 700) · 40px (phone 28) · line 1.3 · tracking -0.8px · weight 750
Analyst number (4x, 5x)
Whitney SSm (twilio.com headlines, 700) · 64px · line 1.3 · tracking -1.92px · weight 750
Analyst claim
Whitney SSm (twilio.com text, 400-600) · 28px · line 1.286 · weight 400
Lead paragraph
Whitney SSm (twilio.com text, 400-600) · 20px (phone 18) · line 1.6 · tracking 0.2px · weight 400
Card title (product)
Whitney SSm (twilio.com headlines, 700) · 20px (phone 18) · line 1.6 · weight 750
Card body (product)
Whitney SSm (twilio.com text, 400-600) · 18px (phone 16) · line 1.556 · tracking 0.18px · weight 400
Stat caption
Whitney SSm (twilio.com text, 400-600) · 18px (phone 16) · line 1.556 · weight 600
Button label
Whitney SSm (twilio.com text, 400-600) · 16px (phone 14) · line 1.5 · weight 550
Nav link / footer link
Whitney SSm (twilio.com text, 400-600) · 14px (phone 12) · line 1.43 · weight 400
Footer column heading
Whitney SSm (twilio.com text, 400-600) · 14px (phone 16) · line 1.43 · weight 500
Utility / legal
Whitney SSm (twilio.com text, 400-600) · 12px · line 1.5 · weight 500
Code
Twilio Sans Mono · 16px · line 1.5 · weight 300
Customer stat (Oxanium stand-in for Buffalo)
Whitney SSm (twilio.com text, 400-600) · 80px · line 0.525 · tracking 5px · weight 800
- Motion
- color, background and ring transitions 0.3s ease-in-out on buttons; 0.18s ease-in-out on analyst cards; customer-story carousel scrolls continuously; code sample types itself
- Buttons
- pill
Page anatomy
How Twilio’s own landing pages are built, observed on twilio.com/en-us, 2026-10-31. The full measurements are in spec.md.
- Navigation
- Two strips: a 32px light-gray utility strip with language, Support and Login at the right; then an 80px white nav with the red Twilio logo at left, five centered menu triggers, and search, Contact sales (outline) and Start for free (filled) at right. Sticky.
- Hero
- Ink #000D25 band. Left column: three-line 56px bold white headline, a three-line 20px lead, a blue Start for free pill with a white underlined text link beside it, and a row of three check-circle reassurances. Right column: a 576x240 rounded video frame with a round translucent play button.
- Building blocks intro (60/40 head with two buttons)
- A section head: 40px two-line H2 and a 20px three-line paragraph in the left 720px; two pills (filled + ring) right-aligned on the right.
- Product cards (2 rows x 3)
- Six product cards in two rows of three: each is a 368x460 rounded navy image panel showing a slice of product UI, then a 20px bold title, an 18px three-line description and a blue pill.
- Developer code sample
- Centred head (40px H2, 20px two-line paragraph, a ring View docs pill), then a 928px code sample: a row of seven language tabs over a tall navy code panel.
- Customer stories carousel
- Left-aligned two-line H2 and paragraph with a ring Get inspired pill at right, then a full-bleed row of 560x420 trapezoid photo cards, each with a white customer logo, a big red stat and a white caption.
- Analyst recognition (3 cards)
- Centred one-line H2, then three navy rounded cards, each with a white analyst logo, a red 64px multiplier, a 28px four-line claim with a footnote number, and an outbound arrow bottom right.
- Closing CTA with cut-out photo
- Two columns inside the 1200 container: left a 40px two-line H2, a 20px five-line paragraph and Start for free + View pricing; right a cut-out photo of a man holding a phone inside a red outline hexagon, sitting on the band's bottom edge.
- Sources accordion
- One closed accordion row titled Sources with a plus icon and a 2px white rule under it (it holds the analyst footnotes).
- Footer
- Ink footer: left a white Twilio logo, an "Get an AI summary:" row with three AI icons, ten company links, four social icons and the copyright; right four link columns with small-caps headings.
Source: paste-dsys.com/foundations/spacing-and-layoutpaste-dsys.com/foundations/elevationtwilio.com/en-us
In use
Halloween homepage · 2026
The system is neutral enough that a theme reads as a costume over it. Our reading
Full spec
How our engine applies Twilio's system to each format. Our recipe from their published rules and the homepage, not something Twilio publishes.
- Halloween homepage. The homepage reskinned for Halloween: horror-film video and stills, puns in every headline, a blocky display face for stats. twilio.com/en-us%20(2026-10-31)
| Format | What they did | Source |
|---|---|---|
| Marketing site | Ink page, pill CTAs, product UI cards | twilio.com/en-us%20(2026-10-31) |
| Product UI (Console) | Paste components, light default theme, Twilio Sans, blue-60 actions | paste-dsys.com |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | Build it the way twilio.com is built (kit.spec.page, homepage voice): white two-strip header with the red logo; every band on #000D25; Open Sans (Whitney stand-in) bold sentence-case headlines; Blue #1866EE pill CTAs with a ring or underlined-link secondary; product UI images in rounded navy panels; red #EF223A only on numbers; footer on ink with small-caps column heads | which sections and how many cards; a seasonal theme in copy and photography | |
| Deck | Ink or white grounds, bold sentence-case titles, blue for links and calls to action, red for the key number | photography and product UI fragments | |
| Product UI | Paste tokens and components; blue-60 actions; red only for errors and destructive actions | illustration in empty and welcome states | |
| White body, ink headline, one blue pill CTA, red logo | one hero image |
Ads
Be a builderGoogle, Meta, LinkedIn · Jan 2026 – now
Customer engagement platformGoogle, Meta, LinkedIn · Mar 2026 – now
DevelopersMeta, LinkedIn · Feb 2026 – now
Voice Reimagined The Rise of Voice AIMeta, LinkedIn · Oct 2026 – now- Campaign walk: BOMO. Build or Miss Out.ad → landing page → Free trial
- Campaign walk: Global SMS & WhatsApp Sendad → landing page → Contact sales
- Campaign walk: Build fast, launch reliablyad → landing page → Free trial
- Campaign walk: Bring your ideas to lifead → landing page → Free trial
Rules
Do
- Use tokens, never ad hoc hex
- Blue for interaction, red for impact
- Sentence case
- Pills for actions
- One ground per page
- Pair every icon and illustration with text
Don’t
- use color alone to convey meaning
- center large blocks of text
- use forced capitals
- put several primary buttons side by side
Source: paste-dsys.com/foundations/colorspaste-dsys.com/foundations/typographypaste-dsys.com/foundations/illustrationspaste-dsys.com/foundations/content/product-style-guidetwilio.com/en-us
Steal this kit
Your name and logo, Twilio’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Twilio doesn’t publish
- Logo clear space, minimum size and misuse rules: not published (Twilio's brand library at library.twilio.com requires a login).
- Marketing color palette and proportions: not published; homepage values are observed.
- Marketing type scale and Twilio Sans licence: not published; twilio.com currently renders Whitney SSm.
- Photography and motion guidelines: not published publicly.
- Paste is a product UI system; its guidance applies to Twilio products, and the brand guidelines it links to are gated.
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-31. Not affiliated with Twilio.