# Twilio: brand book and build spec

Twilio's brand as published in Paste, its design system (color tokens, Twilio Sans super family, illustration types, voice and tone, product style), and as applied on twilio.com: one near-black ink page, blue pill actions, red reserved for numbers and the logo, product UI used as illustration.

From unfairly.ai/brand-guidelines/twilio, checked 2026-10-31. Unofficial study; not affiliated with Twilio.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** A developer brand that dresses down. Twilio keeps the page one dark ink color and the type plain, then lets two small things carry the identity: the red logo and red numbers, and blue pills that always mean "build now". The voice adds the personality, so a seasonal theme can sit on top without touching the system. Based on: Paste reserves Twilio Red for moments of impact and uses blue for every interactive element; the homepage runs every band on #000D25 and puts its Halloween campaign only in copy, photography and the stat face.

## Purpose

Mission: On a mission to enable every builder (published; https://www.twilio.com/en-us/company)

Story: Founded in 2008 to bring communications to the cloud; now a platform combining channels, contextual data and AI orchestration (paraphrase). (published)

| Value | What it means in the work | Source |
|---|---|---|
| Wear the customer's shoes | Listen to and build with customers | published: https://www.twilio.com/en-us/company/values |
| Ask "what if?" | Curiosity first; turn uncertainty into possibility | published: https://www.twilio.com/en-us/company/values |
| Own the outcome | Do what we say; high standards | published: https://www.twilio.com/en-us/company/values |
| We > me | Collective success; debate, then commit | published: https://www.twilio.com/en-us/company/values |
| No shenanigans | Transparent, candid, respectful | published: https://www.twilio.com/en-us/company/values |

## Fixed and flexible

Never changes:
- 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)

## Positioning

- **Statement**: The customer engagement platform for builders: channels, context and AI in one platform. (our reading)
- **Category**: CPaaS and customer engagement platform (CEP) (observed)
- **Audience**: Developers and the businesses they build for, from startups to global enterprises (published)
- **Problem**: Bad, context-free communication frustrates customers (the homepage frames it as a horror story). (observed)
- **Promise**: Continuous customer conversations with humans or AI agents, on one platform. (published)
- **Differentiators**: Neutral by design; Trusted at scale; Endlessly extensible; Free trial and pay-as-you-go pricing
- **Alternatives**: Single-vendor suites that lock in a model or stack (their framing)

## Messaging

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. (Why Twilio page hero)
- Don't wait for change. Build it. (Values page)
- Reaching a business shouldn't be a nightmare (homepage hero, Halloween 2026 campaign)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Neutral by design | Work across models and tech stacks; no single-vendor lock-in. | Bring your own LLM; integrate with existing tools | published |
| Trusted at scale | Scale, security and compliance for global interactions. | 180+ countries and territories; 400K+ customers; 262B+ messages sent/received; 38B+ voice calls; 2.4T+ emails sent | published |
| Endlessly extensible | Simple APIs and building blocks developers adapt. | Official server-side SDKs for Python, C#, PHP, Ruby, Java, Node.js plus curl | published |
| Recognized leader | Analyst recognition for CPaaS and customer engagement. | 4x Leader in the Gartner Magic Quadrant for CPaaS (2026); 5x leader in the IDC MarketScape: Worldwide CPaaS | 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
- Analyst claims carry a numbered footnote to a Sources accordion
- Paste: never claim the product does something it can't

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Reaching a business shouldn't be a nightmare" | homepage hero | https://www.twilio.com/en-us (2026-10-31) |
| "Building blocks for every conversation" | homepage | https://www.twilio.com/en-us (2026-10-31) |
| "Build for the AI era. Build with Twilio." | Why Twilio | https://www.twilio.com/en-us/why-twilio |

## Voice

Tone words: conversational, thoughtful, reliable, quirky.

Traits:
- Conversational, but not stiff (published)
- Thoughtful, but not generic (published)
- Reliable, but not overclaiming (published)
- Quirky, but not unprofessional (published)

- 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.

Rules a copy check enforces:
- Sentence case headlines
- American spelling
- Write as "we", to "you"
- Use the serial (Oxford) comma in lists of 3 or more
- Never: &. Say "and" instead
- 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" instead
- 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

Their words: builders, conversations, context, channels, platform.
Never: click, leverage, easy, e.g., etc., log in.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Ink | #000D25 | ink / night | The homepage ground, every band; text on white |
| White | #FFFFFF | paper | Nav; all text on ink |
| Action blue | #1866EE | accent | Every CTA pill |
| Twilio Red (logo) | #F22F46 | logo | The Twilio logo |
| Red light | #EF223A | accent_secondary | Stat numbers, New badge |
| Card navy | #191F36 | card on night | Cards on ink |
| Code navy | #081F47 | surface 2 | Code panel |
| Gray 30 | #CACDD8 | muted on night | Footer links on ink |
| Paste Gray 60 | #606B85 | ink_muted | Weak text on light grounds (published) |
| Utility gray | #F3F4F7 | surface | Utility strip; light surface |
| Paste Blue 60 | #0263E0 | product accent | Product UI buttons and links (published) |
| Paste Red 60 | #DB132A | product destructive | Errors, destructive actions (published) |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Whitney SSm | Commercial (Hoefler&Co. / Typography.com web font). Paste names Twilio Sans Display as the brand display face | Open Sans | "Open Sans", "Helvetica Neue", Arial, sans-serif |
| body | Whitney SSm | Commercial (Hoefler&Co.). Paste names Twilio Sans Text for UI text | Open Sans | "Open Sans", "Helvetica Neue", Arial, sans-serif |
| mono | Twilio Sans Mono | Twilio's own face (self-hosted on twilio.com for Paste); not an open licence | JetBrains Mono | "JetBrains Mono", Menlo, Consolas, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 | --text-display-xl-* | display | 56px | 34px | 1.18 | -1.68px | 750 |
| Section H2 | --text-display-l-* | display | 40px | 28px | 1.3 | -0.8px | 750 |
| Analyst number (4x, 5x) | --text-display-num-* | display | 64px | 64px | 1.3 | -1.92px | 750 |
| Analyst claim | --text-title-xl-* | body | 28px | 28px | 1.286 | 0px | 400 |
| Lead paragraph | --text-lead-* | body | 20px | 18px | 1.6 | 0.2px | 400 |
| Card title (product) | --text-title-* | display | 20px | 18px | 1.6 | 0px | 750 |
| Card body (product) | --text-body-l-* | body | 18px | 16px | 1.556 | 0.18px | 400 |
| Stat caption | --text-caption-strong-* | body | 18px | 16px | 1.556 | 0px | 600 |
| Button label | --text-button-* | body | 16px | 14px | 1.5 | 0px | 550 |
| Nav link / footer link | --text-body-s-* | body | 14px | 12px | 1.43 | 0px | 400 |
| Footer column heading | --text-label-* | body | 14px | 16px | 1.43 | 0px | 500 |
| Utility / legal | --text-micro-* | body | 12px | 12px | 1.5 | 0px | 500 |
| Code | --text-code-* | mono | 16px | 16px | 1.5 | 0px | 300 |
| Customer stat (Oxanium stand-in for Buffalo) | --text-stat-* | stat | 80px | 80px | 0.525 | 5px | 800 |

## Layout

Measured on https://www.twilio.com/en-us: computed styles, element boxes and canvas font measurement in headless Chromium at 1440x900 and 390x844 after a full scroll (lazy images loaded).

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 120px | 32px |
| Section padding | 64px | 64px |
| Container max width | 1200px | full |
| Hero text width | max 576px | full |
| Grid columns | 3 | 1 |
| Gutter | 48px | 32px |
| Card gap | 48px | 48px |
| Navigation height | 112px | 112px |

Breakpoints from Twilio's CSS: 400, 768, 1024, 1232px.

Homepage bands, top to bottom (observed):
1. Header (utility strip + nav)
   - Desktop: 32 + 80 = 112px, sticky
   - Phone: 44 + 80 = 124px: English, Login; logo, Start for free, hamburger
   - Only white surface on the page
2. Hero
   - Desktop: y 111-709, two 576 columns
   - Phone: centred stack, video last
   - Video frame 576x240 radius 20 with a 68px round play button
3. Building blocks intro
   - Desktop: y 709-1077
   - Phone: centred, buttons stacked
4. Product cards
   - Desktop: y 1077-2691
   - Phone: one column
   - New badge on Conversations
5. Code sample
   - Desktop: y 2691-3565
   - Phone: same, 326 wide
6. Customer stories
   - Desktop: y 3565-4481
   - Phone: centred head, 464 cards
7. Analyst cards
   - Desktop: y 4481-5237
   - Phone: stacked
8. Closing CTA
   - Desktop: y 5237-5780
   - Phone: centred, photo last
9. Sources
   - Desktop: y 5780-5958
   - Phone: same
10. Footer
   - Desktop: y 5958-6704
   - Phone: stack + 4 accordions

## Page anatomy

How Twilio's own landing pages are built, part by part (observed; https://www.twilio.com/en-us, 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: 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.
- ground: utility strip #F3F4F7 (y 0-32); nav #FFFFFF (y 32-112); no bottom border or shadow visible against the ink hero
- height: 112px total desktop (32 + 80); phone 124px (44 + 80)
- border: none
- logo: variant full-color Twilio logo: red #F22F46 bug + wordmark on white; px 108x39; position x 24, y 53 (vertically centred in the 80px bar); file https://www.twilio.com/en-us
- links: count 5; labels Products, Solutions, Why Twilio, Resources, Pricing (all five open menus; each has an 8x4 chevron-down 8px after the label); size 14px/20px; weight 400; color #000D25; alignment centred group, buttons 80px tall with padding 8px 16px at x 397 (Products, 108 wide), 505 (Solutions, 111), 616 (Why Twilio, 124), 740 (Resources, 117), 857 (Pricing, 94)
- utility: right-aligned in the 32px strip, 12px/21px 500 #000D25: [16px globe icon] English [10x5 chevron] at x 1170-1254, a 1px #CACDD8 vertical divider 16px tall, Support [chevron] at x 1286, Login [chevron] at x 1367 (ends x 1417)
- actions:
  - Search: 20px magnifier (#000D25 stroke) in a 40x40 button at x 1084, y 52
  - Contact sales: outline pill, 2px inset ring #1866EE, text #1866EE 16px/500, padding 6px 24px, 141x36 at x 1132 y 54
  - Start for free: filled pill #1866EE, white 16px/500, padding 6px 24px, 135x36 at x 1281 y 54 (8px after Contact sales; right edge x 1416)
- sticky: the whole 112px header is position sticky at the top
- phone: shows utility strip 44px #F3F4F7 with only [globe] English [chev] (x 201) and Login [chev] (x 317), 12px; then 80px white bar: logo 108x39 at x 24 y 65, Start for free pill 14px/500 padding 6px 24px 123x36 at x 187 y 66, hamburger (three 2px #000D25 lines, 24px wide) in a 48x48 button at x 318 y 60; menu full-height white sheet with the five sections as accordions (not shown at rest); cta Start for free stays visible

**Hero**
- summary: 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.
- desktop: section y 111-709 (598px), padding 96px top, 32px bottom; ground #000D25; column split two 576px columns: text x 120-696, media x 744-1320 (48px gap); vertical anchors H1 top y 207 (3 lines, 66px each, bottom 405); lead y 425-513 (3 lines at 32px); CTA row y 549-589; checks row y 621-645; video y 306-546 (vertically centred on the text column); text max width H1 576px: breaks "Reaching a business / shouldn't be a / nightmare"; lead 576px: "Bad communication can turn a simple task into a horror / story. Don't let that happen to your customers. Get it right / with every conversation, with Twilio."; media video frame 576x240 at x 744 y 306, border-radius 20px, overflow hidden, #000D25 behind; at rest it shows a dim teal still of a woman (hero-video-frame-desk.png, object-fit cover); cta size Start for free 148x40 at x 120 y 549; Explore what's possible text link at x 284 (16px after the pill), text 16/24 500 white, 2px #FFFFFF bottom border, 184x26 at y 557
- phone: order H1, lead, CTA pill, text link, checks row, video; alignment everything centred; 32px side gutters; section y 123-915, padding 64px top, 32px bottom; sizes H1 34px/40px -1.02px, 3 lines centred ("Reaching a / business shouldn't / be a nightmare") y 187-307; lead 18px/28px centred, 5 lines y 326-459; Start for free 135x40 (14px) centred at y 495; Explore what's possible 14px/20px 500 with the 2px underline centred at y 553; checks centred at y 611 in 12px/18px; video 326x136 at x 32 y 716, radius 20px (hero-video-frame-phone.png)
- at rest: video PLACE THE IMAGE: hero-video-frame-desk.png (1152x480 = 576x240 at 2x) as the frame's background or an <img> with object-fit cover in a 576x240 box with border-radius 20px. Phone: hero-video-frame-phone.png (652x272 = 326x136 at 2x). It is a still of the Halloween campaign video: never replace it with a gradient or icon; play button 68x68 circle centred in the frame (x 998 y 392 desktop; x 161 y 749 phone): background rgba(20,12,35,0.65), border 1px solid rgba(255,255,255,0.8), a white solid play triangle about 20px tall, optically centred (nudged 2px right); checks three items in a row, 12px apart: 16px white check-in-circle icon (icon-check-circle.svg), 12px gap, label 14px/20px 400 white: "Free trial", "No credit card required", "Flexible pricing" (desktop items at x 124, 223, 420); motion video plays on click only; poster fades (animation only)
- type: H1 Whitney SSm 700 56/66 -1.68px #FFFFFF (Open Sans 750); lead 20/32 400 #FFFFFF
- cta: one filled pill + one underlined text link
- proof: the check row is the only proof in the hero
- copy:
  - H1: "Reaching a business shouldn't be a nightmare"
  - Lead: "Bad communication can turn a simple task into a horror story. Don't let that happen to your customers. Get it right with every conversation, with Twilio."
  - CTA: "Start for free"; link: "Explore what's possible"
  - Checks: "Free trial" / "No credit card required" / "Flexible pricing"

**Building blocks intro (60/40 head with two buttons)**
- summary: 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.
- ground: #000D25
- desktop: band y 709-1077, padding 64px top; H2 at x 120 y 837, 720px wide, 2 lines ("Building blocks for every / conversation"), 40/52 700 -0.8px; paragraph 20/32 at y 949, 3 lines, 720 wide; buttons on one row right-aligned to x 1320, vertically at y 905-945: View all products (filled, 184x40, x 941) then 16px gap, See our platform (2px white ring, 179x40, x 1141)
- phone: y 915-1351, all centred: H2 28/36 2 lines y 979; paragraph 18/28 5 lines y 1059; View all products 167x40 centred y 1223; See our platform 163x40 centred y 1279 (stacked, 16px apart)
- anatomy:
  - Left column 60% (720px), right column 40%; no eyebrow, no divider
- copy:
  - H2: "Building blocks for every conversation"
  - P: "Your toolkit is expanding. Discover a new generation of building blocks designed to orchestrate context-rich conversations across channels, for humans and AI agents."
  - Buttons: "View all products" (filled), "See our platform" (ring)

**Product cards (2 rows x 3)**
- summary: 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.
- ground: #000D25
- desktop: band y 1077-2691 (padding 0 0 64px). Row 1 images at y 1109, row 2 at y 1896; columns x 120, 536, 952 (368 wide, 48 gap). Card stack: image 368x460 (the PNG already contains the #191E36 rounded panel, radius 20, place it as-is); 32px gap; title 20/32 700 white (row 1 y 1601); 16px gap; body 18/28 400 white, 3 lines (y 1652, text ~340px wide); 32px gap; button 40px pill (row 1 y 1768). Row 1 button bottom 1808 to row 2 image top 1896 = 88px
- phone: single column at x 32, 326 wide: image 326x408 (y 1356, 2033, 2710, 3381, 4058, 4735 = 677px pitch), title 18/28 at image bottom + 32, body 16/24 3 lines, button 14px 40px, then 48px to the next image
- anatomy:
  - Order: Conversations [New badge], Messaging, Email / Voice, User authentication, Customer data
  - New badge: #EF223A pill radius 10px, 0 12px padding, 14/20 600 white "New", 8px after the "Conversations" title on the same line
  - Buttons, in order: Start conversations (200x40), Send messages (168), Send emails (142), Make calls (131), Verify users (141), Connect data (153); filled #1866EE pills, left-aligned under the text
  - Each image has a hover twin (*-hover.png: the same UI over a blue glow) that fades in on hover (animation only); at rest show the plain image
- copy:
  - Conversations: "Build conversations that never die with persistent memory, intelligence, and orchestration for humans and AI."
  - Messaging: "Send, receive, and manage SMS, RCS, WhatsApp, and more when every second matters."
  - Email: "Deliver email that always reaches its final destination with the trusted SendGrid Email API."
  - Voice: "Build voice experiences that keep customer connections alive while unchaining ROI with data and AI."
  - User authentication: "Fight fraud and keep accounts securely locked up with verification and identity lookup tools."
  - Customer data: "Unify clean, consented customer data from any source for hair-raising insights on every customer."
- components: button_primary, badge_new

**Developer code sample**
- summary: 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.
- ground: #000D25 (the panel #081F47)
- desktop: band y 2691-3565, padding 64px 0. H2 one line centred, y 2755 (column x 256-1184, 928 wide); paragraph 20/32 centred 2 lines y 2815 ("Sign up for a free Twilio account and grab one of our official server-side SDKs. No locked doors, / no hidden codes. Just your first text, call, or email live in minutes."); View docs ring pill 128x40 centred at y 2911; tab row x 256-1184 y 2983-3041 (58 tall, #000D25), seven 131x58 tabs from x 260, each a centred 32px white language logo; the first (Python) is active: fill #081F47, radius 4px 4px 0 0; panel x 256 y 3041 928x460 #081F47
- phone: y 5369-6304, padding 64 0 32: H2 28/36 centred 2 lines y 5433; paragraph 18/28 centred 5 lines; View docs 118x40 centred y 5685; tab row y 5757, 326 wide, seven 45x55 tabs (icons 24px); panel y 5813, 326x460, code clipped at the right edge
- anatomy:
  - Tabs in order: Python, C#, PHP, Ruby, Java, Node.js, curl (code-python.svg ... code-curl.svg)
  - Panel content at rest: line number "1" in #3ACEFA in a 48px gutter with a 1px #7688C2 right border, then the comment "# Download the helper library from https://www.twil" in #7688C2 JetBrains Mono 300 16/24 followed by a white text cursor bar; the text starts x 317 y 3067 (padding 24px 64px 24px 61px). The rest of the 460px panel is empty navy
  - The snippet types itself (animation only); build the resting line above
- copy:
  - H2: "Build. Without needing an escape plan."
  - Button: "View docs"
- components: code_sample, button_secondary_on_dark

**Customer stories carousel**
- summary: 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.
- ground: #000D25
- desktop: band y 3565-4481, padding 64px 0. H2 x 120 y 3693, 691 wide, 2 lines ("Different teams, different stacks. / Safe and sound on one platform."); paragraph 20/32 y 3805, 2 lines; Get inspired ring pill 144x40 right-aligned (x 1176, y 3745). Carousel y 3965-4385 full width (overflow hidden): cards 560x420 on a 560px pitch, at rest the IBM card at x -211 (cut at the left edge), Smava at x 349, OhMD at x 909 (cut by the right edge)
- phone: y 6305-7293: H2 28/36 centred 4 lines y 6433; paragraph 18/28 centred 4 lines; Get inspired 132x40 centred y 6721; cards 464x340 at y 6857 on a 464px pitch, IBM at x -297, Smava at x 167 (cut by the right edge); overlay padding 24px 96px, logo 100x34, stat same 42px line, caption 16/24 600
- anatomy:
  - Card = the story PNG (story-<name>.png, 1294x948 at 2x, trapezoid with rounded corners and navy bottom fade already in the file, transparent outside) at 560x420, plus an overlay box anchored to the card bottom (560x246, padding 32px 96px, flex column, 48px gap... measured: logo top y 4171, stat y 4267, caption y 4325)
  - Overlay content: white logo 160x48 (object-fit contain, left aligned; story-logo-*.svg already white), stat in the stat face #EF223A (Buffalo 72px/42px +2.5px on the site; Oxanium 800 80px/42px letter-spacing 5px), caption 18/28 600 white
  - Order and stats (the brand's published numbers): IBM 30% increased product adoption; Smava 150% higher click rates; OhMD 1min appointment flow target; Toyota Connected 13% after call work reduction; Resy 21M+ messages sent monthly; Lyft 30M interactions weekly; Posh 97k+ fraud attempts blocked; Delivery Hero 60% fewer escalations
  - Continuous horizontal scroll (animation only); at rest render the three positions above
- copy:
  - H2: "Different teams, different stacks. Safe and sound on one platform."
  - P: "From scaling startups to global enterprises, companies are building hauntingly good customer experiences with Twilio."
  - Button: "Get inspired"
- components: button_secondary_on_dark

**Analyst recognition (3 cards)**
- summary: 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.
- ground: #000D25 (cards #191F36)
- desktop: band y 4481-5237, padding 32px top. H2 centred y 4545 (40/52). Cards 368x512 at y 4661, x 120 / 536 / 952, radius 20, padding 32px. Inside: logo 48px tall (Gartner 172x48, Omdia 152x48, IDC 107x48) at y 4693; number "4x"/"4x"/"5x" 64/83.2 700 -3% #EF223A at y 4776; claim 28/36 400 white at y 4856, 4 lines in 304px; 32px white outbound arrow (icon-outbound-arrow.svg) bottom right at y 5109 (right edge = card right - 32)
- phone: y 7293-9139: H2 28/36 centred 2 lines y 7357; cards stacked 318 wide at x 36 (y 7493, 8036, 8616; 48px gaps), padding 32, logo 32px tall, number 64px, claim 28/36 (5 lines in 254px)
- anatomy:
  - Claims, verbatim, with superscript footnotes 1-3: "Twilio was named a Leader in the 2026 Gartner® Magic Quadrant™ for CPaaS¹"; "Twilio was named a leader in the Omdia Universe: Customer Engagement Platforms (CEP)²"; "Twilio was named a leader in the IDC MarketScape: Worldwide CPaaS³"
  - The whole card is a link; the link label (Read the report / View the excerpt) is not visible at rest, only the arrow
  - Hover: card fill #B10F23 (0.18s ease-in-out)
- copy:
  - H2: "We think our track record speaks for itself"
- components: card_analyst

**Closing CTA with cut-out photo**
- summary: 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.
- ground: #000D25 with a very faint blue glow image (cta-ground.png, almost transparent) as the container background, center/cover
- desktop: band y 5237-5780 (no padding on the outer band; inner container x 120-1320, padding 64px 32px 0). Text column x 152-720 (568), vertically centred against the photo: H2 y 5356 (2 lines, "Don't wait for the next / nightmare"), paragraph 20/32 y 5496 (5 lines), buttons y 5684: Start for free 148x40 at x 152, View pricing text link (2px underline) at x 316. Photo cta-man-phone.png 568x479 at x 720 y 5301, bottom flush with the band bottom (y 5780); its top crosses above the H2
- phone: y 9139-9939, padding 64px 32px 0, centred: H2 28/36 2 lines y 9203; paragraph 18/28 7 lines; Start for free 135x40 centred y 9535; View pricing link y 9591; photo 326x275 at y 9664, flush with the band bottom
- anatomy:
  - The red hexagon outline is part of the photo file; never draw it
- copy:
  - H2: "Don't wait for the next nightmare"
  - P: "Twilio gives you the power to create digital experiences on any channel with full customer context and AI-enabled tools to work efficiently. All on a single platform with flexible plans and pay-as-you-go pricing. No tricks. No traps."
  - CTA "Start for free", link "View pricing"

**Sources accordion**
- summary: One closed accordion row titled Sources with a plus icon and a 2px white rule under it (it holds the analyst footnotes).
- ground: #000D25
- desktop: band y 5780-5958; row x 152-1288 (1136 wide) at y 5812, 114 tall, padding 24px; title "Sources" 20/32 600 -0.4px white at x 176; 16px white plus icon at x 1216 (icon-plus.svg); border-bottom 2px solid #FFFFFF
- phone: y 9939-10117; row x 32 w 326, title 18/28 600, plus at right, same 2px white rule
- anatomy:
  - Closed at rest

**Footer**
- summary: 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.
- ground: #000D25 (band y 5958-6704, padding 32px 0)
- anatomy:
  - Left column x 132 (width ~250): footer-logo.svg white 133x48 at y 6078; "Get an AI summary:" 14/20 600 white at y 6150 followed by three 18-20px white icons (ChatGPT, Gemini, Claude) at x 286, 332, 378
  - Left links 14/20 400 #CACDD8 on a 34px pitch from y 6196: Twilio careers, Twilio.org, Press and media, Investor relations, Legal, Privacy, Security, Impressum, Sitemap, LLMS
  - Social row y ~6554: Facebook, X, LinkedIn, YouTube, white 16-18px icons, 46px pitch from x 132
  - Copyright 12/18 400 white at y 6604, 2 lines in 276px: "Copyright © 2026 Twilio Inc. All rights / reserved."
  - Four columns with headings at y 6066, x 432, 669, 906, 1143 (237px pitch, ~165-190px wide): heading 14/20 500 white, font-variant all-small-caps (renders as small capitals), a 1px white rule 12px below spanning the column; links 14/20 400 #CACDD8 from y 6115 on a 34px pitch (2-line items take 48px); each column ends with a 600-weight #CACDD8 link and a 12px chevron-right
  - Considering Twilio?: About Twilio, Customer Engagement Platform (CEP), Communications, Conversational AI, User authentication and identity, Customer Data Platform (CDP), AI, Customer stories, Events, Contact sales, then "Why Twilio >"
  - Products and Features: SMTP, Branded Calling, Twilio Segment, Twilio Engage, Connections, SendGrid Email API, RCS messaging, Latest innovations, Pre-built solutions, Support plans, then "All products >"
  - Use Cases: AI agent productivity, Customer data management, Audience segmentation, Contact center, SMS marketing, Customer acquisition, Voice response system (IVR), Fraud prevention, Bulk text messaging, Mass email sender, then "All use cases >"
  - Developers: Developer resources, Twilio Essentials, SDKs, CDP integrations, Serverless, Conversation, SMTP Email API, SMS API, WhatsApp API, Voice API, Connections, then "All docs >"
  - No street address or phone number in the footer
- phone: y 10117-11499, 24px gutter: logo 133x48 (y 10229), Get an AI summary 12/18 + icons, the ten links 12/18 #CACDD8, social icons in 40x40 boxes with 1px white border and 4px radius (16px apart), copyright one line; then the four columns become closed accordion rows (390 wide, 73px tall, padding 24px, heading 16/24 600 white, plus icon at right, 1px #DDE0E6 bottom rule) at y 11031, 11152, 11273, 11394

**On dark grounds**
- secondary button: transparent pill with 2px inset white ring, white 16px/500 text; hover fills #1866EE
- link: white 16px/500 with a 2px solid white bottom border; hover #3ACEFA
- muted text: #CACDD8 (footer links); body copy is always pure #FFFFFF
- hairline: 2px #FFFFFF under the Sources row; 1px white under footer headings; 1px #DDE0E6 phone footer dividers
- logo variant: red Twilio logo on the white nav; all-white Twilio logo in the footer; customer and analyst logos all white

## Components

- **button primary** (observed): fill #1866EE, text #FFFFFF, radius pill, height 40, padding x 24, padding 8px 24px, font size 16, weight 550, face body, text style 16px/24px Whitney 500 (Open Sans 550); phone 14px/24px, example Start for free (148x40), View all products (184x40), Send messages (168x40)
  - hover (observed): fill #0E3E92
- **button secondary on dark** (observed): fill none, text #FFFFFF, ring #FFFFFF, ring px 2, radius pill, height 40, padding x 24, padding 8px 24px, font size 16, weight 550, face body, example See our platform (179x40), View docs (128x40), Get inspired (144x40)
  - hover (observed): fill #1866EE, ring #1866EE
- **button nav primary** (observed): fill #1866EE, text #FFFFFF, radius pill, height 36, padding x 24, padding 6px 24px, font size 16, weight 550, face body, example Start for free in the nav (135x36; phone 14px, 123x36)
- **button nav outline** (observed): fill none, text #1866EE, ring #1866EE, ring px 2, radius pill, height 36, padding x 24, padding 6px 24px, font size 16, weight 550, face body, example Contact sales in the nav (141x36), on white
- **text link on dark** (observed): text #FFFFFF. white 16px/24px 500 with border-bottom 2px solid #FFFFFF directly under the text (no underline offset); hover color #3ACEFA. Explore what's possible (184x26), View pricing (98x26)
  - hover (observed): color #3ACEFA
- **card analyst** (observed): fill #191F36, radius 20, padding 32px. 368x512 desktop, 318 wide on phone; logo 48px tall (32 phone) white; number 64/83.2 #EF223A; claim 28/36 400 white with superscript footnote; 32px outbound arrow bottom right, label hidden at rest
  - hover (observed): background-color #B10F23
- **badge new** (observed): fill #EF223A, text #FFFFFF, radius 10, padding 0 12px. 14px/20px 600, 20px tall, sits 8px after the card title on its baseline
- **code sample** (observed): fill #081F47, radius 0. tab row 58px tall on #000D25 with 7 equal tabs (131px) holding 32px white language logos; active tab #081F47 with 4px top corners; panel 928x460 #081F47; line-number gutter 48px, numbers #3ACEFA, 1px #7688C2 divider; code Twilio Sans Mono 300 16/24, padding 24px 64px 24px 61px
- **accordion sources** (observed): . full content width minus 32px, padding 24px, title 20/32 600 -0.4px white, 16px white plus icon at right, border-bottom 2px solid #FFFFFF; no fill

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button | ease-in-out | 300ms | background, color, border and ring on every button and text link | observed |
| card | ease-in-out | 180ms | analyst card background (#191F36 to #B10F23) and number color on hover | observed |
| media-fade | ease | 300ms | hero video poster opacity and product image swap to the hover image | observed |
| badge | ease-in-out | 700ms | New badge transition | observed |

## Icon tokens

Grid 16px and 20px UI icons in a 24px set; 32px for code language and outbound arrows, stroke 1px rounded-cap outline in the 16px set (observed).
| Name | Size | Use |
|---|---|---|
| ui | 16px | globe, checks, plus, chevrons |
| nav | 20px | search |
| feature | 32px | code language logos, outbound arrow |

## Signature moves

### One dark ink page

Where: the whole homepage, hero to footer.
Do: every band sits on #000D25; separation comes from 64px padding, card fills (#191F36, #081F47) and photography, never from alternating grounds or rules. Only the nav is white. One ground for the whole page.
Don't: alternate light and dark bands, or add gradients behind sections.
Example: "Reaching a business shouldn't be a nightmare".

### Blue pills on navy

Where: every call to action.
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.
Don't: use red or square buttons for CTAs.

### Red is for numbers

Where: customer-story stats and analyst counts, the New badge, the logo.
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).
Don't: set paragraphs or buttons in red.

### Product UI as illustration

Where: the six product cards.
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).
Don't: use abstract icons or stock 3D for product cards.

### Trapezoid photo cards

Where: customer stories carousel.
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.
Don't: use rectangular photo tiles.

## Messaging: rules

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.

Why it works: Each claim is paired with proof the reader can check (customer logos with their own numbers, footnoted analyst reports).

- Lead with the benefit, then a 2-3 word verb CTA
- Every stat carries its owner (a customer logo or a footnote)
- Repeat "Start for free" in the nav, hero and closing band

Sources: https://www.twilio.com/en-us/why-twilio, https://www.twilio.com/en-us/company, https://www.twilio.com/en-us

## Voice: rules

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.

Why it works: A voice for developers: plain words, precise claims, a little fun when the moment allows it.

- 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
- Don't joke in an error message
- Don't claim the product does something it can't

Sources: https://paste-dsys.com/foundations/content/voice-and-tone/, https://paste-dsys.com/foundations/content/product-style-guide/, https://paste-dsys.com/foundations/content/word-list/

## Logo: rules

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.

Why it works: The four-dot bug reads at tiny sizes and works alone as an app icon.

- 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)

Not published: clear space and minimum size (in the login-gated brand library).

Sources: https://www.twilio.com/en-us/legal/trademark, https://www.twilio.com/en-us

## Color: rules

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.

Why it works: With one dark ground and one action color, the red logo and red numbers become the only bright marks, so they carry the brand.

|  |  |
|---|---|
| Page ground | #000D25 (observed) |
| Action | #1866EE (observed); Paste blue-60 #0263E0 (published) |
| Red | logo #F22F46, numbers #EF223A, Paste red-60 #DB132A |

- 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

Not published: color proportions; marketing palette hex values (homepage values are observed).

Sources: https://paste-dsys.com/foundations/colors/, https://github.com/twilio-labs/paste/blob/main/packages/paste-design-tokens/tokens/aliases/color-palette.yml, https://www.twilio.com/en-us

## Typography: rules

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.

Why it works: Few weights, each with one job, so hierarchy reads at a glance.

- 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

Not published: a marketing type scale (sizes observed); Twilio Sans files or licence.

Sources: https://paste-dsys.com/foundations/typography/, https://github.com/twilio-labs/paste/blob/main/packages/paste-design-tokens/tokens/themes/twilio/aliases/font-family.yml, https://www.twilio.com/en-us

## Graphic elements: rules

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.

Why it works: Rounded, friendly shapes soften a technical product.

- 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

Sources: https://www.twilio.com/en-us, https://paste-dsys.com/foundations/illustrations/

## Iconography: rules

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.

Why it works: Quiet icons keep attention on copy and product UI.

- Pair icons with text labels
- One stroke weight, rounded caps
- White on ink, ink on white

Not published: icon grid and stroke spec for marketing icons.

Sources: https://paste-dsys.com/components/icon/, https://www.twilio.com/en-us

## Illustration: rules

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).

Why it works: Showing real UI makes an API company's product visible.

- 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

Sources: https://paste-dsys.com/foundations/illustrations/

## Photography: rules

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.

Why it works: People and phones make "conversations" concrete; the cool grade keeps photos inside the ink palette.

- 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

Not published: a photography guideline (in the gated brand library).

Sources: https://www.twilio.com/en-us

## Motion: rules

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.

Why it works: Short, plain transitions; motion shows the product working (typing code), not decoration.

- 0.3s ease-in-out for interactive state changes
- Animate content that demonstrates the product

Not published: motion principles or easing tokens.

Sources: https://www.twilio.com/en-us

## Interface and layout: rules

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.

Why it works: Generous, regular spacing makes a long dark page easy to scan.

- Spacing in multiples of 8
- Related items 4-16px apart; actions 16-32px from their content
- Max 65 characters per line

Sources: https://paste-dsys.com/foundations/spacing-and-layout/, https://paste-dsys.com/foundations/elevation/, https://www.twilio.com/en-us

## Rules: rules

The do and don't list across Paste and the homepage.

Why it works: Consistency makes many products read as one platform.

- 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
- Don't center large blocks of text
- Don't use forced capitals
- Don't put several primary buttons side by side

Sources: https://paste-dsys.com/foundations/colors/, https://paste-dsys.com/foundations/typography/, https://paste-dsys.com/foundations/illustrations/, https://paste-dsys.com/foundations/content/product-style-guide/, https://www.twilio.com/en-us

## Campaigns

### Halloween homepage (2026)

The homepage reskinned for Halloween: horror-film video and stills, puns in every headline, a blocky display face for stats.

How the system shows: Same ink page, blue pills, red numbers and product cards; only copy, photography and the stat face change.
Why it works: The system is neutral enough that a theme reads as a costume over it.
Channels: web. Source: https://www.twilio.com/en-us (2026-10-31)

## Applications

| Format | What | Source |
|---|---|---|
| Marketing site | Ink page, pill CTAs, product UI cards | https://www.twilio.com/en-us (2026-10-31) |
| Product UI (Console) | Paste components, light default theme, Twilio Sans, blue-60 actions | https://paste-dsys.com |

## By format

How our engine applies Twilio's system to each format. Our recipe from their published rules and the homepage, not something Twilio publishes. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 3 | 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 | 2 | 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 | 1 | Paste tokens and components; blue-60 actions; red only for errors and destructive actions | illustration in empty and welcome states |
| Email | 2 | White body, ink headline, one blue pill CTA, red logo | one hero image |

## Checks before anything ships

- **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.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Twilio's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- 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.

Logos and reference images belong to Twilio. Look at them on Twilio's own pages; don't reuse them.